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>

1
2
3
4
5

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();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

二、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，

​