web流程设计器andflow_js已支持独立配置节点样式

​
andflow_js支持在网页上设计和展示流程图、架构图、关系图等图形，只需要传递 json配置参数即可实现，同时还能通过js函数进行实时读取、调整。但很多时候我需要根据节点的功能展示节点的样式。最新发布的版本可以支持在保留全局样式的基础上，通过给节点增加“theme”参数配置样式来实现不同节点具有不同的外观，默认的样式有：action_theme_default、action_theme_icon、action_theme_zone，这三个。

一、andflow_js 节点样式DEMO

<div id="andflow" style="width: 100%;height: 600px;padding:0px;"> 
</div>

json配置方式没有变化，只是在actions的元素中增加了: theme 属性，属性值可以是：action_theme_default、action_theme_icon、action_theme_zone，之一，或者自己设计CSS。代码如下：

 
var flowModel= {
       "code": "",
       "name": "",
       "show_action_body": "true",
       "show_action_content": "true",
       "theme": "flow_theme_default",
       "link_type": "Flowchart",
       "params": [],
       "actions": [
           {
               "id": "4e7fed4b5f90466a856cb743294e383c",
               "left": "51px",
               "top": "27px",
               "name": "begin",
               "params": {},
               "title": "开始",
               "theme": "action_theme_icon",
               "icon": "begin.png",
               "width": "65px",
               "height": "49px"
           },
           {
               "id": "c3747d543b724800ab792de258c9f64e",
               "left": "35px",
               "top": "367px",
               "name": "end",
               "params": {},
               "title": "结束",
               "theme": "action_theme_icon",
               "icon": "end.png",
               "width": "60px",
               "height": "49px"
           },
           {
               "id": "7e56400e9b634045941db181e7aaccb0",
               "left": "26px",
               "top": "188px",
               "name": "script",
               "params": {},
               "title": "执行脚本",
               "theme": "action_theme_zone",
               "icon": "script.png",
               "width": "180px",
               "height": "80px"
           },
           {
               "id": "3aff58a55237434a9a1d3b6253e7f681",
               "left": "267px",
               "top": "207px",
               "name": "script",
               "params": {},
               "title": "执行脚本",
               "theme": "action_theme_icon",
               "icon": "script.png",
               "width": "52px",
               "height": "43px"
           },
           {
               "id": "51de62db588d4993aa2341fde8277f9a",
               "left": "377px",
               "top": "189px",
               "name": "script",
               "params": {},
               "title": "执行脚本",
               "icon": "script.png",
               "width": "120px",
               "height": "80px"
           },
           {
               "id": "98cc1c82a40e4e92b6c1b6ab9b56be77",
               "left": "377px",
               "top": "350px",
               "name": "cmd",
               "params": {
                   "timeout": "10000"
               },
               "title": "系统命令",
               "icon": "cmd.png",
               "width": "120px",
               "height": "80px"
           }
       ],
       "groups": [],
       "lists": [],
       "links": [
           {
               "source_id": "7e56400e9b634045941db181e7aaccb0",
               "target_id": "3aff58a55237434a9a1d3b6253e7f681"
           },
           {
               "source_id": "3aff58a55237434a9a1d3b6253e7f681",
               "target_id": "51de62db588d4993aa2341fde8277f9a"
           },
           {
               "source_id": "4e7fed4b5f90466a856cb743294e383c",
               "target_id": "7e56400e9b634045941db181e7aaccb0"
           },
           {
               "source_id": "51de62db588d4993aa2341fde8277f9a",
               "target_id": "98cc1c82a40e4e92b6c1b6ab9b56be77"
           },
           {
               "source_id": "98cc1c82a40e4e92b6c1b6ab9b56be77",
               "target_id": "c3747d543b724800ab792de258c9f64e"
           }
       ],
       "tips": []
   };


   var options={
       tags:tags,            //组件过滤标签列表
       metadata:metadata,    //组件元素
       flowModel:flowModel,  //流程模型
       img_path: "../img/meta/",
       editable:true,   //是否可编辑，默认true
       show_toolbar: true,
       metadata_position: 'default', //top,left,default
       render_action:function(metadata,action,html){ return html; },//节点渲染
       render_action_helper: function(metadata,html){return null},  //节点拖拉渲染
       render_state_list: function(datas){return null},             //流程状态列表渲染
       render_link:function(conn,linktype,linkdata){return null},   //连接线渲染
       event_group_click:function(group){

       },
       event_group_dblclick: function(group){ 
       },
       //节点单击事件
       event_action_click:function(metadata,action){


       },
       //节点双击事件
       event_action_dblclick:function(metadata,action){


       },
       //连线单击事件
       event_link_click: function (link) {
            
       },
       //连线双击事件
       event_link_dblclick: function (link) {
           

       },
       //画图板单击事件
       event_canvas_click: function(e){
           
       }
   }


   andflow.newInstance("andflow",options);
   andflow.showFlow();

二、CSS样式顺序及规范

andflow_js的节点样式的实现参考了CSS样式顺序以及等级规范。

（一）CSS优先级

通常可以将css的优先级由高到低分为6组：

• 第一优先级：无条件优先的属性只需要在属性后面使用**！important**。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
• 第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
• 第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
• 第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
• 第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
• 第六优先级：通配选择器，如*{marigin:6px;}

（二）CSS优先顺序

概括来讲，CSS优先顺序为：
！important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器

各项示例如下:

• 内联样式：写在标签属性style的样式，如

• ID选择器，如#id{…}
• 类选择器，如 .class{…}
• 属性选择器，如 input[type=“email”]{…}
• 伪类选择器，如a:hover{…}
• 伪元素选择器，如 p::before{…}
• 标签选择器，如 input{…}
• 通配选择器，如 *{…}
  

三、CSS样式顺序在Andflow_js中的应用

andflow_js 设计了全局样式，同时支持节点独立设置样式。如果两个样式同时设置，那么节点样式优先于全局样式。要做到这个功能，其实主要注意样式加载的顺序即可。为了区分全局样式还是节点样式，andflow_js全局样式名称都以flow_theme_作为前缀，节点样式以action_theme_为前缀。并在CSS顺序上，先夹在全局样式再加载节点样式。

下载源代码，扫码回复andflow，

​