├── .DS_Store ├── dist ├── .DS_Store ├── js │ └── andflow_themes.min.js └── css │ └── andflow.min.css ├── img ├── demo1.png ├── demo2.png ├── demos.png ├── flow1.png ├── flow2.png ├── flow3.png ├── flow4.png ├── flow5.png ├── flow6.png ├── flow7.png ├── flow8.png ├── github.png ├── logo.jpeg ├── meta │ ├── cmd.png │ ├── end.png │ ├── list.png │ ├── tip.png │ ├── begin.png │ ├── group.png │ ├── mongodb.png │ ├── mysql.png │ ├── nginx.png │ ├── person.png │ ├── redis.png │ ├── script.png │ ├── server.png │ └── fireware.png └── shape │ ├── circle.png │ ├── diamond.png │ ├── ellipse.png │ ├── triangle.png │ ├── rectangle.png │ └── triangle_90.png ├── index.html ├── src ├── css │ └── demo.css └── js │ ├── andflow_themes.js │ └── demo.js ├── examples ├── tip.html ├── erd.html ├── link_style.html ├── action_theme.html ├── custom_meta.html ├── topology.html ├── action_color.html ├── group.html ├── design.html └── design_min.html ├── depends └── custombox │ └── custombox.min.js └── readme.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/.DS_Store -------------------------------------------------------------------------------- /dist/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/dist/.DS_Store -------------------------------------------------------------------------------- /img/demo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/demo1.png -------------------------------------------------------------------------------- /img/demo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/demo2.png -------------------------------------------------------------------------------- /img/demos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/demos.png -------------------------------------------------------------------------------- /img/flow1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/flow1.png -------------------------------------------------------------------------------- /img/flow2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/flow2.png -------------------------------------------------------------------------------- /img/flow3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/flow3.png -------------------------------------------------------------------------------- /img/flow4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/flow4.png -------------------------------------------------------------------------------- /img/flow5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/flow5.png -------------------------------------------------------------------------------- /img/flow6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/flow6.png -------------------------------------------------------------------------------- /img/flow7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/flow7.png -------------------------------------------------------------------------------- /img/flow8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/flow8.png -------------------------------------------------------------------------------- /img/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/github.png -------------------------------------------------------------------------------- /img/logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/logo.jpeg -------------------------------------------------------------------------------- /img/meta/cmd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/meta/cmd.png -------------------------------------------------------------------------------- /img/meta/end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/meta/end.png -------------------------------------------------------------------------------- /img/meta/list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/meta/list.png -------------------------------------------------------------------------------- /img/meta/tip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/meta/tip.png -------------------------------------------------------------------------------- /img/meta/begin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/meta/begin.png -------------------------------------------------------------------------------- /img/meta/group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/meta/group.png -------------------------------------------------------------------------------- /img/meta/mongodb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/meta/mongodb.png -------------------------------------------------------------------------------- /img/meta/mysql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/meta/mysql.png -------------------------------------------------------------------------------- /img/meta/nginx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/meta/nginx.png -------------------------------------------------------------------------------- /img/meta/person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/meta/person.png -------------------------------------------------------------------------------- /img/meta/redis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/meta/redis.png -------------------------------------------------------------------------------- /img/meta/script.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/meta/script.png -------------------------------------------------------------------------------- /img/meta/server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/meta/server.png -------------------------------------------------------------------------------- /img/shape/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/shape/circle.png -------------------------------------------------------------------------------- /img/meta/fireware.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/meta/fireware.png -------------------------------------------------------------------------------- /img/shape/diamond.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/shape/diamond.png -------------------------------------------------------------------------------- /img/shape/ellipse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/shape/ellipse.png -------------------------------------------------------------------------------- /img/shape/triangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/shape/triangle.png -------------------------------------------------------------------------------- /img/shape/rectangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/shape/rectangle.png -------------------------------------------------------------------------------- /img/shape/triangle_90.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zone-7/andflow_js/HEAD/img/shape/triangle_90.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | andflow 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
Andflow
20 |
21 | 22 |
23 | Github 24 |
25 |
26 | 27 |
28 |

29 | andflow 一个用于在web端进行设计和展示各种流程、关系图形的JS组件。 30 |

31 |
32 | 33 |
Demos：
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 | -------------------------------------------------------------------------------- /src/css/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0px; 3 | margin: 0px; 4 | } 5 | 6 | .bander { 7 | display: flex; 8 | flex-direction: row; 9 | align-items: center; 10 | height: 50px; 11 | width: 100%; 12 | padding-left: 10px; 13 | padding-right: 10px; 14 | border-bottom: 1px solid #DEDEDE; 15 | box-sizing: border-box; 16 | overflow: hidden; 17 | } 18 | 19 | .bander a { 20 | text-decoration-line: none; 21 | color: #333333; 22 | } 23 | 24 | .bander a:active { 25 | text-decoration-line: none; 26 | color: #333333; 27 | } 28 | 29 | .bander .logo { 30 | height: 40px; 31 | } 32 | 33 | .bander .logo img { 34 | height: 40px; 35 | } 36 | 37 | .bander .title { 38 | display: flex; 39 | flex-direction: row; 40 | align-items: center; 41 | height: 100%; 42 | font-size: 30px; 43 | } 44 | 45 | .bander .subtitle { 46 | display: flex; 47 | flex-direction: row; 48 | align-items: center; 49 | flex-grow: 1; 50 | height: 100%; 51 | font-size: 20px; 52 | padding-left: 20px; 53 | } 54 | 55 | .bander .menus { 56 | 57 | font-size: 14px; 58 | line-height: 50px; 59 | display: flex; 60 | flex-direction: row; 61 | justify-content: center; 62 | align-items: end; 63 | gap: 5px; 64 | } 65 | 66 | .bander .menus a { 67 | 68 | display: flex; 69 | flex-direction: row; 70 | justify-content: center; 71 | align-items: center; 72 | } 73 | 74 | .bander .menus a img { 75 | width: 24px; 76 | height: 24px; 77 | } 78 | 79 | .demo-table { 80 | width: 100%; 81 | } 82 | 83 | .demo-table td { 84 | width: 50%; 85 | vertical-align: top; 86 | } 87 | 88 | .demo-table img { 89 | width: 100%; 90 | } 91 | 92 | 93 | .dialog { 94 | display: none; 95 | background-color: white; 96 | padding: 0px; 97 | min-width: 50%; 98 | border-radius: 5px; 99 | border: 1px solid gray; 100 | 101 | } 102 | 103 | .dialog .dialog-body { 104 | width: 100%; 105 | padding: 20px; 106 | } 107 | 108 | .dialog .dialog-header { 109 | height: 40px; 110 | border-bottom: 1px solid gray; 111 | } 112 | 113 | .dialog .dialog-header .dialog-title { 114 | font-weight: bold; 115 | line-height: 30px; 116 | padding-left: 10px; 117 | } 118 | 119 | .dialog .dialog-footer { 120 | display: inline-block; 121 | width: 100%; 122 | height: 40px; 123 | text-align: right; 124 | padding: 10px; 125 | } 126 | 127 | .form-item { 128 | display: flex; 129 | width: 100%; 130 | align-items: center; 131 | align-content: center; 132 | margin-bottom: 10px; 133 | 134 | } 135 | 136 | .form-item * { 137 | display: inline-block; 138 | align-content: center; 139 | align-items: center; 140 | align-content: center; 141 | } 142 | 143 | .form-item input:read-only { 144 | background-color: gray; 145 | } 146 | 147 | .form-item label { 148 | width: 80px; 149 | font-size: 12px; 150 | } 151 | 152 | .form-item select, 153 | .form-item input, 154 | .form-item textarea { 155 | box-sizing: border-box; 156 | -moz-box-sizing: border-box; 157 | -webkit-box-sizing: border-box; 158 | width: calc(100% - 100px); 159 | min-height: 30px; 160 | 161 | border: 1px solid gray; 162 | border-radius: 3px; 163 | } -------------------------------------------------------------------------------- /examples/tip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | andflow-erd 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
Andflow
30 |
首页 > 备注
31 | 32 |
33 | Demos 34 | Github 35 | 36 |
37 |
38 | 39 |
40 | 41 |
42 | 43 | 44 | 48 | 149 | 150 | -------------------------------------------------------------------------------- /examples/erd.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | andflow-erd 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
Andflow
30 |
首页 > ER图
31 | 32 |
33 | Demos 34 | Github 35 | 36 |
37 |
38 | 39 |
40 | 41 |
42 | 43 | 44 | 48 | 236 | 237 | -------------------------------------------------------------------------------- /examples/link_style.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | andflow 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
Andflow
30 |
首页 > 自定义连接线样式
31 | 32 |
33 | Demos 34 | Github 35 | 36 |
37 |
38 | 39 |
40 |
41 | 42 | 类型: 43 | 49 | 50 |
51 | 颜色: 52 | 宽度: 53 | 圆角: 54 | 样式: 58 |
59 | 标签: 60 | 起点标签: 61 | 终点标签: 62 | 63 |
64 | 起点箭头: 65 | 69 | 中间箭头: 70 | 74 | 终点箭头: 75 | 79 | 80 | 81 |
82 | 83 | 动画: 84 | 88 |
89 | 90 | 91 | 92 | 93 | 94 | 98 | 236 | 237 | -------------------------------------------------------------------------------- /examples/action_theme.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | andflow 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
Andflow
30 |
首页 > 自定义风格
31 | 32 |
33 | Demos 34 | Github 35 | 36 |
37 |
38 | 39 |
40 |
41 | 42 |
43 | 44 | 45 | 49 | 209 | 210 | -------------------------------------------------------------------------------- /dist/js/andflow_themes.min.js: -------------------------------------------------------------------------------- 1 | "undefined"==typeof flow_themes&&(flow_themes={}),flow_themes.flow_theme_default={is_body_resizable:!1,default_link_color:"#BBBBBB",default_link_color_hover:"#007bff",default_link_color_g:"#BBBBBB",default_link_color_g_hover:"#007bff",default_link_color_t:"#BBBBBB",default_link_color_t_hover:"#007bff",default_link_strokeWidth:2,default_link_strokeWidth_hover:2,default_link_strokeWidth_g:8,default_link_strokeWidth_g_hover:8,default_link_strokeWidth_t:1,default_link_strokeWidth_t_hover:2,default_link_outlineWidth:8,default_link_outlineWidth_hover:8,default_link_outlineWidth_g:8,default_link_outlineWidth_g_hover:8,default_link_outlineWidth_t:5,default_link_outlineWidth_t_hover:5,default_link_radius:2,default_link_radius_hover:2,default_link_radius_g:5,default_link_radius_g_hover:5,default_link_radius_t:2,default_link_radius_t_hover:2,default_link_color_error:"#b0413f",default_link_radius_error:5,default_link_strokeWidth_error:2,default_link_outlineWidth_error:8,default_link_color_run:"#CCCCCC",default_link_radius_run:5,default_link_strokeWidth_run:2,default_link_outlineWidth_run:8,default_link_color_success:"#7AB02C",default_link_radius_success:5,default_link_strokeWidth_success:2,default_link_outlineWidth_success:8,default_link_color_reject:"#fdcf7c",default_link_radius_reject:5,default_link_strokeWidth_reject:2,default_link_outlineWidth_reject:8,default_endpoint_stroke_color:"transparent",default_endpoint_stroke_color_hover:"#007bff",default_endpoint_fill_color:"transparent",default_endpoint_fill_color_hover:"#007bff",default_endpoint_radius:5,default_endpoint_radius_hover:6,default_endpoint_strokeWidth:1,default_endpoint_strokeWidth_hover:1,default_endpoint_stroke_color_error:"#b0413f",default_endpoint_fill_color_error:"#b0413f",default_endpoint_stroke_color_run:"#CCCCCC",default_endpoint_fill_color_run:"#CCCCCC",default_endpoint_stroke_color_success:"#7AB02C",default_endpoint_fill_color_success:"#7AB02C",default_endpoint_stroke_color_reject:"#fdcf7c",default_endpoint_fill_color_reject:"#fdcf7c"},flow_themes.flow_theme_icon={is_body_resizable:!0,default_link_color:"#BBBBBB",default_link_color_hover:"#007bff",default_link_color_g:"#BBBBBB",default_link_color_g_hover:"#007bff",default_link_color_t:"#BBBBBB",default_link_color_t_hover:"#007bff",default_link_radius:5,default_link_radius_hover:5,default_link_radius_g:5,default_link_radius_g_hover:5,default_link_radius_t:5,default_link_radius_t_hover:5,default_link_strokeWidth:2,default_link_strokeWidth_hover:2,default_link_strokeWidth_g:8,default_link_strokeWidth_g_hover:8,default_link_strokeWidth_t:1,default_link_strokeWidth_t_hover:2,default_link_outlineWidth:8,default_link_outlineWidth_hover:8,default_link_outlineWidth_g:8,default_link_outlineWidth_g_hover:8,default_link_outlineWidth_t:5,default_link_outlineWidth_t_hover:5,default_link_color_error:"#b0413f",default_link_radius_error:5,default_link_strokeWidth_error:2,default_link_outlineWidth_error:8,default_link_color_run:"#CCCCCC",default_link_radius_run:5,default_link_strokeWidth_run:2,default_link_outlineWidth_run:8,default_link_color_success:"#7AB02C",default_link_radius_success:5,default_link_strokeWidth_success:2,default_link_outlineWidth_success:8,default_link_color_reject:"#fdcf7c",default_link_radius_reject:5,default_link_strokeWidth_reject:2,default_link_outlineWidth_reject:8,default_endpoint_stroke_color:"transparent",default_endpoint_stroke_color_hover:"#007bff",default_endpoint_fill_color:"transparent",default_endpoint_fill_color_hover:"#007bff",default_endpoint_radius:5,default_endpoint_radius_hover:6,default_endpoint_strokeWidth:1,default_endpoint_strokeWidth_hover:1,default_endpoint_stroke_color_error:"#b0413f",default_endpoint_fill_color_error:"#b0413f",default_endpoint_stroke_color_run:"#CCCCCC",default_endpoint_fill_color_run:"#CCCCCC",default_endpoint_stroke_color_success:"#7AB02C",default_endpoint_fill_color_success:"#7AB02C",default_endpoint_stroke_color_reject:"#fdcf7c",default_endpoint_fill_color_reject:"#fdcf7c"},flow_themes.flow_theme_zone={is_body_resizable:!1,default_link_color:"#BBBBBB",default_link_color_hover:"#007bff",default_link_color_g:"#BBBBBB",default_link_color_g_hover:"#007bff",default_link_color_t:"#BBBBBB",default_link_color_t_hover:"#007bff",default_link_radius:5,default_link_radius_hover:5,default_link_radius_g:5,default_link_radius_g_hover:5,default_link_radius_t:2,default_link_radius_t_hover:2,default_link_strokeWidth:2,default_link_strokeWidth_hover:2,default_link_strokeWidth_g:8,default_link_strokeWidth_g_hover:8,default_link_strokeWidth_t:1,default_link_strokeWidth_t_hover:2,default_link_outlineWidth:8,default_link_outlineWidth_hover:8,default_link_outlineWidth_g:8,default_link_outlineWidth_g_hover:8,default_link_outlineWidth_t:5,default_link_outlineWidth_t_hover:5,default_link_color_error:"#b0413f",default_link_radius_error:5,default_link_strokeWidth_error:2,default_link_outlineWidth_error:8,default_link_color_run:"#CCCCCC",default_link_radius_run:5,default_link_strokeWidth_run:2,default_link_outlineWidth_run:8,default_link_color_success:"#7AB02C",default_link_radius_success:5,default_link_strokeWidth_success:2,default_link_outlineWidth_success:8,default_link_color_reject:"#fdcf7c",default_link_radius_reject:5,default_link_strokeWidth_reject:2,default_link_outlineWidth_reject:8,default_endpoint_stroke_color:"transparent",default_endpoint_stroke_color_hover:"#007bff",default_endpoint_fill_color:"transparent",default_endpoint_fill_color_hover:"#007bff",default_endpoint_radius:5,default_endpoint_radius_hover:6,default_endpoint_strokeWidth:1,default_endpoint_strokeWidth_hover:1,default_endpoint_stroke_color_error:"#b0413f",default_endpoint_fill_color_error:"#b0413f",default_endpoint_stroke_color_run:"#CCCCCC",default_endpoint_fill_color_run:"#CCCCCC",default_endpoint_stroke_color_success:"#7AB02C",default_endpoint_fill_color_success:"#7AB02C",default_endpoint_stroke_color_reject:"#fdcf7c",default_endpoint_fill_color_reject:"#fdcf7c"},flow_themes.flow_theme_box={is_body_resizable:!0,default_link_color:"#BBBBBB",default_link_color_hover:"#007bff",default_link_color_g:"#BBBBBB",default_link_color_g_hover:"#007bff",default_link_color_t:"#BBBBBB",default_link_color_t_hover:"#007bff",default_link_strokeWidth:2,default_link_strokeWidth_hover:2,default_link_strokeWidth_g:8,default_link_strokeWidth_g_hover:8,default_link_strokeWidth_t:1,default_link_strokeWidth_t_hover:2,default_link_outlineWidth:8,default_link_outlineWidth_hover:8,default_link_outlineWidth_g:8,default_link_outlineWidth_g_hover:8,default_link_outlineWidth_t:5,default_link_outlineWidth_t_hover:5,default_link_radius:2,default_link_radius_hover:2,default_link_radius_g:5,default_link_radius_g_hover:5,default_link_radius_t:2,default_link_radius_t_hover:2,default_link_color_error:"#b0413f",default_link_radius_error:5,default_link_strokeWidth_error:2,default_link_outlineWidth_error:8,default_link_color_run:"#CCCCCC",default_link_radius_run:5,default_link_strokeWidth_run:2,default_link_outlineWidth_run:8,default_link_color_success:"#7AB02C",default_link_radius_success:5,default_link_strokeWidth_success:2,default_link_outlineWidth_success:8,default_link_color_reject:"#fdcf7c",default_link_radius_reject:5,default_link_strokeWidth_reject:2,default_link_outlineWidth_reject:8,default_endpoint_stroke_color:"transparent",default_endpoint_stroke_color_hover:"#007bff",default_endpoint_fill_color:"transparent",default_endpoint_fill_color_hover:"#007bff",default_endpoint_radius:5,default_endpoint_radius_hover:6,default_endpoint_strokeWidth:1,default_endpoint_strokeWidth_hover:1,default_endpoint_stroke_color_error:"#b0413f",default_endpoint_fill_color_error:"#b0413f",default_endpoint_stroke_color_run:"#CCCCCC",default_endpoint_fill_color_run:"#CCCCCC",default_endpoint_stroke_color_success:"#7AB02C",default_endpoint_fill_color_success:"#7AB02C",default_endpoint_stroke_color_reject:"#fdcf7c",default_endpoint_fill_color_reject:"#fdcf7c"},"undefined"==typeof action_themes&&(action_themes={}),action_themes.action_theme_default={is_body_resizable:!1},action_themes.action_theme_icon={is_body_resizable:!0},action_themes.action_theme_zone={is_body_resizable:!1},action_themes.action_theme_box={is_body_resizable:!0}; -------------------------------------------------------------------------------- /examples/custom_meta.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | andflow 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 35 | 36 | 37 | 38 |
39 | 40 |
Andflow
41 |
首页 > 自定义图形
42 | 43 |
44 | Demos 45 | Github 46 | 47 |
48 |
49 | 50 |
51 | 52 |
53 | 54 | 55 | 249 | 250 | -------------------------------------------------------------------------------- /examples/topology.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | andflow 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 |
Andflow
30 |
首页 > 拓扑图
31 |
32 | Demos 33 | Github 34 | 35 |
36 |
37 | 38 |
39 |
40 | 41 | 42 | 351 | 352 | -------------------------------------------------------------------------------- /examples/action_color.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | andflow 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 |
Andflow
29 |
首页 > 自定义颜色
30 | 31 |
32 | Demos 33 | Github 34 | 35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 | action: 43 | group: 44 | list: 45 | tip: 46 | 47 | 48 | 49 | 53 | 324 | 325 | -------------------------------------------------------------------------------- /examples/group.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | andflow 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Andflow
31 |
首页 > 分组
32 | 33 |
34 | Demos 35 | Github 36 | 37 |
38 |
39 | 40 |
41 |
42 | 43 |
44 | 45 | 46 | 47 | 48 | 49 |
50 | 51 | 55 | 56 | 62 | 63 | 69 | 70 | 74 | 75 | 76 | 77 |
78 | 79 | 82 | 83 | 87 | 308 | 309 | -------------------------------------------------------------------------------- /src/js/andflow_themes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 默认连线样式 3 | */ 4 | 5 | if("undefined" == typeof flow_themes){ 6 | flow_themes={} ; 7 | } 8 | 9 | flow_themes.flow_theme_default={ 10 | is_body_resizable:false, 11 | 12 | default_link_color:"#BBBBBB", 13 | default_link_color_hover:"#007bff", 14 | 15 | default_link_color_g:"#BBBBBB", 16 | default_link_color_g_hover:"#007bff", 17 | 18 | default_link_color_t:"#BBBBBB", 19 | default_link_color_t_hover:"#007bff", 20 | 21 | 22 | default_link_strokeWidth:2, 23 | default_link_strokeWidth_hover:2, 24 | 25 | default_link_strokeWidth_g:8, 26 | default_link_strokeWidth_g_hover:8, 27 | 28 | default_link_strokeWidth_t:1, 29 | default_link_strokeWidth_t_hover:2, 30 | 31 | 32 | default_link_outlineWidth:8, 33 | default_link_outlineWidth_hover:8, 34 | default_link_outlineWidth_g:8, 35 | default_link_outlineWidth_g_hover:8, 36 | default_link_outlineWidth_t:5, 37 | default_link_outlineWidth_t_hover:5, 38 | 39 | 40 | default_link_radius:2, 41 | default_link_radius_hover:2, 42 | default_link_radius_g:5, 43 | default_link_radius_g_hover:5, 44 | default_link_radius_t:2, 45 | default_link_radius_t_hover:2, 46 | 47 | default_link_color_error:"#b0413f", 48 | default_link_radius_error:5, 49 | default_link_strokeWidth_error:2, 50 | default_link_outlineWidth_error:8, 51 | 52 | default_link_color_run:"#CCCCCC", 53 | default_link_radius_run:5, 54 | default_link_strokeWidth_run:2, 55 | default_link_outlineWidth_run:8, 56 | 57 | default_link_color_success:"#7AB02C", 58 | default_link_radius_success:5, 59 | default_link_strokeWidth_success:2, 60 | default_link_outlineWidth_success:8, 61 | 62 | default_link_color_reject:"#fdcf7c", 63 | default_link_radius_reject:5, 64 | default_link_strokeWidth_reject:2, 65 | default_link_outlineWidth_reject:8, 66 | 67 | 68 | default_endpoint_stroke_color:"transparent", 69 | default_endpoint_stroke_color_hover:"#007bff", 70 | default_endpoint_fill_color:"transparent", 71 | default_endpoint_fill_color_hover:"#007bff", 72 | default_endpoint_radius:5, 73 | default_endpoint_radius_hover:6, 74 | 75 | default_endpoint_strokeWidth:1, 76 | default_endpoint_strokeWidth_hover:1, 77 | 78 | 79 | default_endpoint_stroke_color_error:"#b0413f", 80 | default_endpoint_fill_color_error:"#b0413f", 81 | 82 | default_endpoint_stroke_color_run:"#CCCCCC", 83 | default_endpoint_fill_color_run:"#CCCCCC", 84 | 85 | default_endpoint_stroke_color_success:"#7AB02C", 86 | default_endpoint_fill_color_success:"#7AB02C", 87 | 88 | default_endpoint_stroke_color_reject:"#fdcf7c", 89 | default_endpoint_fill_color_reject:"#fdcf7c", 90 | 91 | }; 92 | 93 | 94 | flow_themes.flow_theme_icon={ 95 | is_body_resizable:true, 96 | 97 | default_link_color:"#BBBBBB", 98 | default_link_color_hover:"#007bff", 99 | 100 | default_link_color_g:"#BBBBBB", 101 | default_link_color_g_hover:"#007bff", 102 | 103 | default_link_color_t:"#BBBBBB", 104 | default_link_color_t_hover:"#007bff", 105 | 106 | 107 | default_link_radius:5, 108 | default_link_radius_hover:5, 109 | 110 | default_link_radius_g:5, 111 | default_link_radius_g_hover:5, 112 | 113 | default_link_radius_t:5, 114 | default_link_radius_t_hover:5, 115 | 116 | 117 | default_link_strokeWidth:2, 118 | default_link_strokeWidth_hover:2, 119 | 120 | default_link_strokeWidth_g:8, 121 | default_link_strokeWidth_g_hover:8, 122 | 123 | default_link_strokeWidth_t:1, 124 | default_link_strokeWidth_t_hover:2, 125 | 126 | 127 | default_link_outlineWidth:8, 128 | default_link_outlineWidth_hover:8, 129 | 130 | default_link_outlineWidth_g:8, 131 | default_link_outlineWidth_g_hover:8, 132 | 133 | default_link_outlineWidth_t:5, 134 | default_link_outlineWidth_t_hover:5, 135 | 136 | default_link_color_error:"#b0413f", 137 | default_link_radius_error:5, 138 | default_link_strokeWidth_error:2, 139 | default_link_outlineWidth_error:8, 140 | 141 | default_link_color_run:"#CCCCCC", 142 | default_link_radius_run:5, 143 | default_link_strokeWidth_run:2, 144 | default_link_outlineWidth_run:8, 145 | 146 | default_link_color_success:"#7AB02C", 147 | default_link_radius_success:5, 148 | default_link_strokeWidth_success:2, 149 | default_link_outlineWidth_success:8, 150 | 151 | default_link_color_reject:"#fdcf7c", 152 | default_link_radius_reject:5, 153 | default_link_strokeWidth_reject:2, 154 | default_link_outlineWidth_reject:8, 155 | 156 | default_endpoint_stroke_color:"transparent", 157 | default_endpoint_stroke_color_hover:"#007bff", 158 | default_endpoint_fill_color:"transparent", 159 | default_endpoint_fill_color_hover:"#007bff", 160 | default_endpoint_radius:5, 161 | default_endpoint_radius_hover:6, 162 | 163 | default_endpoint_strokeWidth:1, 164 | default_endpoint_strokeWidth_hover:1, 165 | 166 | default_endpoint_stroke_color_error:"#b0413f", 167 | default_endpoint_fill_color_error:"#b0413f", 168 | 169 | default_endpoint_stroke_color_run:"#CCCCCC", 170 | default_endpoint_fill_color_run:"#CCCCCC", 171 | 172 | default_endpoint_stroke_color_success:"#7AB02C", 173 | default_endpoint_fill_color_success:"#7AB02C", 174 | 175 | default_endpoint_stroke_color_reject:"#fdcf7c", 176 | default_endpoint_fill_color_reject:"#fdcf7c", 177 | 178 | }; 179 | 180 | 181 | 182 | flow_themes.flow_theme_zone={ 183 | is_body_resizable:false, 184 | 185 | default_link_color:"#BBBBBB", 186 | default_link_color_hover:"#007bff", 187 | 188 | default_link_color_g:"#BBBBBB", 189 | default_link_color_g_hover:"#007bff", 190 | 191 | default_link_color_t:"#BBBBBB", 192 | default_link_color_t_hover:"#007bff", 193 | 194 | default_link_radius:5, 195 | default_link_radius_hover:5, 196 | 197 | default_link_radius_g:5, 198 | default_link_radius_g_hover:5, 199 | 200 | default_link_radius_t:2, 201 | default_link_radius_t_hover:2, 202 | 203 | default_link_strokeWidth:2, 204 | default_link_strokeWidth_hover:2, 205 | 206 | default_link_strokeWidth_g:8, 207 | default_link_strokeWidth_g_hover:8, 208 | 209 | default_link_strokeWidth_t:1, 210 | default_link_strokeWidth_t_hover:2, 211 | 212 | default_link_outlineWidth:8, 213 | default_link_outlineWidth_hover:8, 214 | 215 | default_link_outlineWidth_g:8, 216 | default_link_outlineWidth_g_hover:8, 217 | 218 | 219 | default_link_outlineWidth_t:5, 220 | default_link_outlineWidth_t_hover:5, 221 | 222 | default_link_color_error:"#b0413f", 223 | default_link_radius_error:5, 224 | default_link_strokeWidth_error:2, 225 | default_link_outlineWidth_error:8, 226 | 227 | default_link_color_run:"#CCCCCC", 228 | default_link_radius_run:5, 229 | default_link_strokeWidth_run:2, 230 | default_link_outlineWidth_run:8, 231 | 232 | default_link_color_success:"#7AB02C", 233 | default_link_radius_success:5, 234 | default_link_strokeWidth_success:2, 235 | default_link_outlineWidth_success:8, 236 | 237 | default_link_color_reject:"#fdcf7c", 238 | default_link_radius_reject:5, 239 | default_link_strokeWidth_reject:2, 240 | default_link_outlineWidth_reject:8, 241 | 242 | 243 | default_endpoint_stroke_color:"transparent", 244 | default_endpoint_stroke_color_hover:"#007bff", 245 | default_endpoint_fill_color:"transparent", 246 | default_endpoint_fill_color_hover:"#007bff", 247 | default_endpoint_radius:5, 248 | default_endpoint_radius_hover:6, 249 | 250 | default_endpoint_strokeWidth:1, 251 | default_endpoint_strokeWidth_hover:1, 252 | 253 | 254 | default_endpoint_stroke_color_error:"#b0413f", 255 | default_endpoint_fill_color_error:"#b0413f", 256 | 257 | default_endpoint_stroke_color_run:"#CCCCCC", 258 | default_endpoint_fill_color_run:"#CCCCCC", 259 | 260 | default_endpoint_stroke_color_success:"#7AB02C", 261 | default_endpoint_fill_color_success:"#7AB02C", 262 | 263 | default_endpoint_stroke_color_reject:"#fdcf7c", 264 | default_endpoint_fill_color_reject:"#fdcf7c", 265 | 266 | }; 267 | 268 | 269 | flow_themes.flow_theme_box={ 270 | is_body_resizable:true, 271 | 272 | default_link_color:"#BBBBBB", 273 | default_link_color_hover:"#007bff", 274 | 275 | default_link_color_g:"#BBBBBB", 276 | default_link_color_g_hover:"#007bff", 277 | 278 | default_link_color_t:"#BBBBBB", 279 | default_link_color_t_hover:"#007bff", 280 | 281 | 282 | default_link_strokeWidth:2, 283 | default_link_strokeWidth_hover:2, 284 | 285 | default_link_strokeWidth_g:8, 286 | default_link_strokeWidth_g_hover:8, 287 | 288 | default_link_strokeWidth_t:1, 289 | default_link_strokeWidth_t_hover:2, 290 | 291 | 292 | default_link_outlineWidth:8, 293 | default_link_outlineWidth_hover:8, 294 | default_link_outlineWidth_g:8, 295 | default_link_outlineWidth_g_hover:8, 296 | default_link_outlineWidth_t:5, 297 | default_link_outlineWidth_t_hover:5, 298 | 299 | 300 | default_link_radius:2, 301 | default_link_radius_hover:2, 302 | default_link_radius_g:5, 303 | default_link_radius_g_hover:5, 304 | default_link_radius_t:2, 305 | default_link_radius_t_hover:2, 306 | 307 | default_link_color_error:"#b0413f", 308 | default_link_radius_error:5, 309 | default_link_strokeWidth_error:2, 310 | default_link_outlineWidth_error:8, 311 | 312 | default_link_color_run:"#CCCCCC", 313 | default_link_radius_run:5, 314 | default_link_strokeWidth_run:2, 315 | default_link_outlineWidth_run:8, 316 | 317 | default_link_color_success:"#7AB02C", 318 | default_link_radius_success:5, 319 | default_link_strokeWidth_success:2, 320 | default_link_outlineWidth_success:8, 321 | 322 | default_link_color_reject:"#fdcf7c", 323 | default_link_radius_reject:5, 324 | default_link_strokeWidth_reject:2, 325 | default_link_outlineWidth_reject:8, 326 | 327 | 328 | default_endpoint_stroke_color:"transparent", 329 | default_endpoint_stroke_color_hover:"#007bff", 330 | default_endpoint_fill_color:"transparent", 331 | default_endpoint_fill_color_hover:"#007bff", 332 | default_endpoint_radius:5, 333 | default_endpoint_radius_hover:6, 334 | 335 | default_endpoint_strokeWidth:1, 336 | default_endpoint_strokeWidth_hover:1, 337 | 338 | 339 | default_endpoint_stroke_color_error:"#b0413f", 340 | default_endpoint_fill_color_error:"#b0413f", 341 | 342 | default_endpoint_stroke_color_run:"#CCCCCC", 343 | default_endpoint_fill_color_run:"#CCCCCC", 344 | 345 | default_endpoint_stroke_color_success:"#7AB02C", 346 | default_endpoint_fill_color_success:"#7AB02C", 347 | 348 | default_endpoint_stroke_color_reject:"#fdcf7c", 349 | default_endpoint_fill_color_reject:"#fdcf7c", 350 | 351 | }; 352 | 353 | 354 | if("undefined" == typeof action_themes){ 355 | action_themes={} ; 356 | } 357 | 358 | action_themes.action_theme_default={ 359 | is_body_resizable:false, 360 | }; 361 | action_themes.action_theme_icon={ 362 | is_body_resizable:true, 363 | }; 364 | action_themes.action_theme_zone={ 365 | is_body_resizable:false, 366 | }; 367 | action_themes.action_theme_box={ 368 | is_body_resizable:true, 369 | }; -------------------------------------------------------------------------------- /src/js/demo.js: -------------------------------------------------------------------------------- 1 | var tags = ['', '通用', '系统']; 2 | 3 | var metadata = [ 4 | { 5 | 6 | "name": "begin", 7 | "tp": "action", 8 | "title": "开始", 9 | "des": "开始", 10 | "group": "通用", 11 | "tag": "通用", 12 | "css": "begin", 13 | "icon": "begin.png", 14 | "params": [], 15 | "params_html": "", 16 | "params_script": "" 17 | }, 18 | { 19 | "name": "end", 20 | "tp": "action", 21 | "title": "结束", 22 | "des": "结束", 23 | "group": "通用", 24 | "tag": "通用", 25 | "css": "end", 26 | "icon": "end.png", 27 | "params": [], 28 | "params_html": "", 29 | "params_script": "" 30 | }, 31 | { 32 | "name": "group", 33 | "tp": "group", 34 | "title": "分组", 35 | "des": "分组", 36 | "group": "通用", 37 | "tag": "通用", 38 | "css": "group", 39 | "icon": "group.png", 40 | "params": [], 41 | "params_html": "", 42 | "params_script": "" 43 | }, 44 | { 45 | "name": "tip", 46 | "tp": "tip", 47 | "title": "标签", 48 | "des": "标签", 49 | "group": "通用", 50 | "tag": "通用", 51 | "css": "tip", 52 | "icon": "tip.png", 53 | "params": [], 54 | "params_html": "", 55 | "params_script": "" 56 | }, 57 | { 58 | "name": "script", 59 | "tp": "action", 60 | "title": "执行脚本", 61 | "des": "", 62 | "group": "通用", 63 | "tag": "通用", 64 | "css": "", 65 | "icon": "script.png", 66 | "params": [], 67 | "params_html": "", 68 | "params_script": "" 69 | }, 70 | 71 | { 72 | "name": "cmd", 73 | "tp": "action", 74 | "title": "系统命令", 75 | "des": "", 76 | "group": "系统", 77 | "tag": "系统", 78 | "css": "", 79 | "icon": "cmd.png", 80 | "params": [ 81 | { 82 | "name": "command", 83 | "title": "命令", 84 | "placeholder": "操作系统指令", 85 | "element": "textarea", 86 | "default": "", 87 | "attrs": { 88 | "rows": "4" 89 | }, 90 | "options": null, 91 | "option_mode": "" 92 | }, 93 | { 94 | "name": "timeout", 95 | "title": "超时（毫秒）", 96 | "placeholder": "超时毫秒", 97 | "element": "input", 98 | "default": "10000", 99 | "attrs": { 100 | "type": "number" 101 | }, 102 | "options": null, 103 | "option_mode": "" 104 | }, 105 | { 106 | "name": "cache", 107 | "title": "执行结果参数名", 108 | "placeholder": "执行结果存储到哪个参数变量", 109 | "element": "", 110 | "default": "", 111 | "attrs": null, 112 | "options": null, 113 | "option_mode": "" 114 | } 115 | ], 116 | "params_html": "", 117 | "params_script": "" 118 | }, 119 | { 120 | "name": "server", 121 | "tp": "action", 122 | "title": "服务器", 123 | "des": "", 124 | "group": "通用", 125 | "tag": "通用", 126 | "css": "", 127 | "icon": "server.png", 128 | "params": [], 129 | "params_html": "", 130 | "params_script": "" 131 | }, 132 | { 133 | "name": "fireware", 134 | "tp": "action", 135 | "title": "防火墙", 136 | "des": "", 137 | "group": "通用", 138 | "tag": "通用", 139 | "css": "", 140 | "icon": "fireware.png", 141 | "params": [], 142 | "params_html": "", 143 | "params_script": "" 144 | }, 145 | { 146 | "name": "mysql", 147 | "tp": "action", 148 | "title": "Mysql", 149 | "des": "", 150 | "group": "通用", 151 | "tag": "通用", 152 | "css": "", 153 | "icon": "mysql.png", 154 | "params": [], 155 | "params_html": "", 156 | "params_script": "" 157 | }, 158 | { 159 | "name": "redis", 160 | "tp": "action", 161 | "title": "Redis", 162 | "des": "", 163 | "group": "通用", 164 | "tag": "通用", 165 | "css": "", 166 | "icon": "redis.png", 167 | "params": [], 168 | "params_html": "", 169 | "params_script": "" 170 | }, 171 | { 172 | "name": "mongodb", 173 | "tp": "action", 174 | "title": "MongoDB", 175 | "des": "MongogDB 文件服务器", 176 | "group": "通用", 177 | "tag": "通用", 178 | "css": "", 179 | "icon": "mongodb.png", 180 | "params": [], 181 | "params_html": "", 182 | "params_script": "" 183 | }, 184 | { 185 | "name": "nginx", 186 | "tp": "action", 187 | "title": "Nginx", 188 | "des": "负载均衡", 189 | "group": "通用", 190 | "tag": "通用", 191 | "css": "", 192 | "icon": "nginx.png", 193 | "params": [], 194 | "params_html": "", 195 | "params_script": "" 196 | }, 197 | { 198 | "name": "erd", 199 | "tp": "list", 200 | "title": "数据库实体", 201 | "des": "数据库实体", 202 | "group": "ER图", 203 | "tag": "ER图", 204 | "css": "list", 205 | "icon": "list.png", 206 | "params": [], 207 | "params_html": "", 208 | "params_script": "" 209 | }, 210 | { 211 | "name": "custom_action", 212 | "tp": "action", 213 | "title": "自定义类型", 214 | "des": "自定义类型", 215 | "group": "自定义", 216 | "tag": "自定义", 217 | "icon": "person.png", 218 | "render": function (meta, action, html) { 219 | var el = '
' + 220 | 221 | '
' + meta.title + '
' + 222 | '
aa
' + 223 | '
' + 224 | '
'; 225 | 226 | return el; 227 | } 228 | }, 229 | { 230 | "name": "custom_group", 231 | "tp": "group", 232 | "title": "自定义分组", 233 | "des": "自定义分组", 234 | "group": "自定义", 235 | "tag": "自定义", 236 | "icon": "person.png", 237 | "render": function (meta, action, html) { 238 | var el = '
'; 239 | return el; 240 | } 241 | }, 242 | ]; 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | var currentLinkInfo; 251 | var currentActionInfo; 252 | 253 | //打开连接线配置对话框 254 | function openLinkDialog(link) { 255 | currentLinkInfo = link; 256 | var dialog = document.getElementById("linkDialog"); 257 | dialog.querySelector("input[name='source_id']").value = link.source_id; 258 | dialog.querySelector("input[name='target_id']").value = (link.target_id); 259 | dialog.querySelector("input[name='title']").value = (link.title || ""); 260 | dialog.querySelector("input[name='label_source']").value = link.label_source || ""; 261 | dialog.querySelector("input[name='label_target']").value = (link.label_target || ""); 262 | dialog.querySelector("select[name='animation']").value = (link.animation ? "true" : "false"); 263 | 264 | var arrows = link.arrows || [false, false, true]; 265 | 266 | dialog.querySelector("select[name='arrows1']").value = (arrows[0] ? "true" : "false"); 267 | dialog.querySelector("select[name='arrows2']").value = (arrows[1] ? "true" : "false"); 268 | dialog.querySelector("select[name='arrows3']").value = (arrows[2] ? "true" : "false"); 269 | 270 | dialog.querySelector("select[name='active']").value = (link.active || "true"); 271 | dialog.querySelector("textarea[name='filter']").value = (link.filter || ""); 272 | 273 | var modalLink = new Custombox.modal({ 274 | content: { 275 | id: 'linkModal', 276 | effect: 'fadein', 277 | target: '#linkDialog' 278 | } 279 | }); 280 | modalLink.open(); 281 | } 282 | 283 | function closeLinkDialog() { 284 | Custombox.modal.close(); 285 | } 286 | function saveLinkDialog() { 287 | if (currentLinkInfo == null) { 288 | return; 289 | } 290 | var dialog = document.getElementById("linkDialog"); 291 | currentLinkInfo.title = dialog.querySelector("input[name='title']").value; 292 | currentLinkInfo.label_target = dialog.querySelector("input[name='label_target']").value; 293 | currentLinkInfo.label_source = dialog.querySelector("input[name='label_source']").value; 294 | currentLinkInfo.animation = dialog.querySelector("select[name='animation']").value == "true" ? true : false; 295 | var arrows = [false, false, true]; 296 | if (dialog.querySelector("select[name='arrows1']").value == "true") { 297 | arrows[0] = true 298 | } 299 | if (dialog.querySelector("select[name='arrows2']").value == "true") { 300 | arrows[1] = true 301 | } 302 | if (dialog.querySelector("select[name='arrows3']").value == "true") { 303 | arrows[2] = true 304 | } 305 | currentLinkInfo.arrows = arrows; 306 | currentLinkInfo.active = dialog.querySelector("select[name='active']").value; 307 | currentLinkInfo.filter = dialog.querySelector("textarea[name='filter']").value; 308 | 309 | andflow.setLinkInfo(currentLinkInfo); 310 | Custombox.modal.close(); 311 | } 312 | 313 | //打开节点配置对话框 314 | function openActionDialog(action) { 315 | currentActionInfo = action; 316 | 317 | var dialog = document.getElementById("actionDialog"); 318 | dialog.querySelector("input[name='name']").value = action.name; 319 | dialog.querySelector("input[name='title']").value = action.title || ""; 320 | // dialog.querySelector("input[name='des']").value = action.des||""; 321 | dialog.querySelector("select[name='theme']").value = action.theme || "andflow_theme_default"; 322 | dialog.querySelector("select[name='once']").value = action.once || "false"; 323 | dialog.querySelector("select[name='collect']").value = action.collect || "false"; 324 | if (action.content == null) { 325 | action.content = {}; 326 | } 327 | dialog.querySelector("textarea[name='content']").value = (action.content.content || ""); 328 | dialog.querySelector("textarea[name='script']").value = (action.script || ""); 329 | var modalAction = new Custombox.modal({ 330 | content: { 331 | id: 'actionModal', 332 | effect: 'fadein', 333 | target: '#actionDialog' 334 | } 335 | }); 336 | modalAction.open(); 337 | } 338 | function closeActionDialog() { 339 | Custombox.modal.close(); 340 | } 341 | function saveActionDialog() { 342 | if (currentActionInfo == null) { 343 | return; 344 | } 345 | var dialog = document.getElementById("actionDialog"); 346 | 347 | currentActionInfo.title = dialog.querySelector("input[name='title']").value; 348 | // currentActionInfo.des = dialog.querySelector("select[name='des']").value; 349 | currentActionInfo.theme = dialog.querySelector("select[name='theme']").value; 350 | currentActionInfo.once = dialog.querySelector("select[name='once']").value; 351 | currentActionInfo.collect = dialog.querySelector("select[name='collect']").value; 352 | if (currentActionInfo.content == null) { 353 | currentActionInfo.content = {}; 354 | } 355 | currentActionInfo.content.content = dialog.querySelector("textarea[name='content']").value; 356 | currentActionInfo.script = dialog.querySelector("textarea[name='script']").value; 357 | 358 | andflow.setActionInfo(currentActionInfo); 359 | 360 | Custombox.modal.close(); 361 | } 362 | 363 | //截图 364 | function snap() { 365 | 366 | andflow.snap("流程"); 367 | } -------------------------------------------------------------------------------- /examples/design.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | andflow 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 |
Andflow
36 |
首页 > 设计器
37 | 38 |
39 | Demos 40 | Github 41 |
42 |
43 | 44 |
45 |
46 | 47 |
48 |
49 |
节点属性
50 |
51 |
52 |
53 | 54 | 55 |
56 |
57 | 58 | 59 |
60 |
61 | 62 | 68 |
69 |
70 | 71 | 75 |
76 |
77 | 78 | 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 | 130 |
131 |
132 | 133 | 137 |
138 |
139 | 140 | 144 |
145 |
146 | 147 | 151 |
152 | 153 |
154 | 155 | 159 |
160 |
161 | 162 | 163 |
164 |
165 |
166 | 167 | 168 |
169 |
170 | 171 | 172 | 176 | 358 | 359 | -------------------------------------------------------------------------------- /examples/design_min.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | andflow 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 |
Andflow
36 |
首页 > 设计器
37 | 38 |
39 | Demos 40 | Github 41 | 42 |
43 |
44 | 45 |
46 |
47 | 48 |
49 |
50 |
节点属性
51 |
52 |
53 |
54 | 55 | 56 |
57 |
58 | 59 | 60 |
61 |
62 | 63 | 69 |
70 |
71 | 72 | 76 |
77 |
78 | 79 | 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 | 131 |
132 |
133 | 134 | 138 |
139 |
140 | 141 | 145 |
146 |
147 | 148 | 152 |
153 | 154 |
155 | 156 | 160 |
161 |
162 | 163 | 164 |
165 |
166 |
167 | 168 | 169 |
170 |
171 | 172 | 173 | 177 | 358 | 359 | -------------------------------------------------------------------------------- /depends/custombox/custombox.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * custombox - Modal dialog effects with transitions CSS3 3 | * version: 4.0.3 4 | * http://dixso.github.io/custombox/ 5 | * (c) 2017 Julio de la Calle - @dixso9 6 | * 7 | * Under MIT License - http://opensource.org/licenses/MIT 8 | */ 9 | "use strict";function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _extends=Object.assign||function(e){for(var t=1;t-1}},{key:"isIE",value:function(){var e=window.navigator.userAgent,t=e.indexOf("MSIE ");if(t>0)return!isNaN(parseInt(e.substring(t+5,e.indexOf(".",t)),10));if(e.indexOf("Trident/")>0){var n=e.indexOf("rv:");return!isNaN(parseInt(e.substring(n+3,e.indexOf(".",n)),10))}var o=e.indexOf("Edge/");return o>0&&!isNaN(parseInt(e.substring(o+5,e.indexOf(".",o)),10))}}]),e}(),m=function(){function e(){_classCallCheck(this,e),this.position=document.documentElement&&document.documentElement.scrollTop||document.body&&document.body.scrollTop||0,document.documentElement.classList.add(t+"-perspective")}return _createClass(e,[{key:"remove",value:function(){document.documentElement.classList.remove(t+"-perspective"),window.scrollTo(0,this.position)}}]),e}(),p=function(e){function t(e){_classCallCheck(this,t);var n=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return Object.keys(n).forEach(function(t){e[t]&&_extends(n[t],e[t])}),n}return _inherits(t,e),t}(function e(){_classCallCheck(this,e),this.overlay={color:"#000",opacity:.48,close:!0,speedIn:300,speedOut:300,onOpen:null,onComplete:null,onClose:null,active:!0},this.content={id:null,target:null,container:null,clone:!1,animateFrom:"top",animateTo:"top",positionX:"center",positionY:"center",width:null,effect:"fadein",speedIn:300,speedOut:300,delay:150,fullscreen:!1,onOpen:null,onComplete:null,onClose:null,close:!0},this.loader={active:!0,color:"#FFF",background:"#999",speed:1e3}}),f=function(){function e(n){_classCallCheck(this,e),this.options=n,this.element=document.createElement("div"),this.element.classList.add(t+"-loader"),this.element.style.borderColor=this.options.loader.background,this.element.style.borderTopColor=this.options.loader.color,this.element.style.animationDuration=this.options.loader.speed+"ms",document.body.appendChild(this.element)}return _createClass(e,[{key:"show",value:function(){this.element.style.display="block"}},{key:"destroy",value:function(){this.element.parentElement.removeChild(this.element)}}]),e}(),v=function(){function e(n){if(_classCallCheck(this,e),this.options=n,"loading"===document.readyState)throw new Error("You need to instantiate Custombox when the document is fully loaded");var o=document.querySelector(this.options.content.container);if(o)this.element=o;else if(document.querySelector("."+t+"-container"))document.querySelector("."+t+"-container")&&(this.element=document.querySelector("."+t+"-container"));else{for(this.element=document.createElement("div");document.body.firstChild;)this.element.appendChild(document.body.firstChild);document.body.appendChild(this.element)}this.element.classList.add(t+"-container"),this.element.classList.add(t+"-"+this.options.content.effect),this.element.style.animationDuration=this.options.content.speedIn+"ms",u.check(l,this.options.content.effect)&&this.setAnimation()}return _createClass(e,[{key:"bind",value:function(e){var t=this;return e===o&&(u.check(l,this.options.content.effect)&&this.setAnimation("animateTo"),this.element.classList.remove(n)),this.element.classList.add(e),new Promise(function(e){return t.listener().then(function(){return e()})})}},{key:"remove",value:function(){this.element.classList.remove(o),this.element.classList.remove(t+"-"+this.options.content.effect),this.element.style.removeProperty("animation-duration");var e=document.querySelectorAll("."+t+"-content"),n=document.querySelector(this.options.content.container);if(!e.length)if(n)for(var i=this.element.className.split(" "),s=0,r=i.length;s0&&void 0!==arguments[0]?arguments[0]:s,n=0,o=r.length;n0&&void 0!==arguments[0]?arguments[0]:s,n=0,o=r.length;n560?560:window.innerWidth,a=window.innerHeight>315?315:window.innerHeight,h=parseInt(e.options.content.width,10);e.options.content.width&&window.innerWidth>h&&(a=Math.round(a*h/c),c=h),l.setAttribute("width",c+"px"),l.setAttribute("height",a+"px")}e.element.appendChild(r),n()}else if("#"!==e.options.content.target.charAt(0)&&"."!==e.options.content.target.charAt(0)){var d=new XMLHttpRequest;d.open("GET",e.options.content.target),d.onload=function(){if(200===d.status){e.element.insertAdjacentHTML("beforeend",d.response);var t=e.element.firstChild;try{t.style.display="block"}catch(e){o(new Error("The ajax response need a wrapper element"))}e.options.content.width&&(t.style.flexBasis=e.options.content.width),n()}else o(new Error(d.statusText))},d.onerror=function(){return o(new Error("Network error"))},d.send()}else{var u=document.querySelector(e.options.content.target);u?(e.options.content.clone?(u=u.cloneNode(!0)).removeAttribute("id"):(e.reference=document.createElement("div"),e.reference.classList.add(t+"-reference"),e.reference.setAttribute("style",u.getAttribute("style")),u.parentNode.insertBefore(e.reference,u.nextSibling)),u.style.display="block",e.options.content.width&&(u.style.flexBasis=e.options.content.width),e.element.appendChild(u),n()):o(new Error("The element doesn't exist"))}})}},{key:"bind",value:function(e){var i=this;switch(e){case o:this.element.style.animationDelay="0ms",this.element.style.animationDuration=this.options.content.speedOut+"ms",this.element.classList.remove(n),this.element.classList.add(o),this.setAnimation("animateTo");break;default:document.body.appendChild(this.element),this.element.classList.add(t+"-"+this.options.content.effect),this.element.classList.add(n)}return new Promise(function(e){return i.listener().then(function(){return e()})})}},{key:"remove",value:function(){var e=new RegExp("^[#|.]");!this.options.content.clone&&e.test(this.options.content.target)&&(this.element.childNodes[0].setAttribute("style",this.reference.getAttribute("style")),this.reference.parentNode.insertBefore(this.element.childNodes[0],this.reference.nextSibling),this.reference.parentNode.removeChild(this.reference));try{this.element.parentNode.removeChild(this.element)}catch(e){}}},{key:"listener",value:function(){var e=this;return new Promise(function(t){u.isIE()?setTimeout(t,e.options.content.speedIn):e.element.addEventListener("animationend",function(){return t()},!0)})}},{key:"setAnimation",value:function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:s,n=0,o=r.length;n 37 | 38 | 39 | 40 | ![流程DEMO](./img/flow1.png) 41 | 42 | 43 | 44 | ![流程DEMO](./img/flow2.png) 45 | 46 | 47 | 48 | 49 | 50 | ![流程DEMO](./img/flow3.png) 51 | 52 | 53 | 54 | ![流程DEMO](./img/flow4.png) 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | ![流程DEMO](./img/flow5.png) 63 | 64 | 65 | 66 | ![流程DEMO](./img/flow6.png) 67 | 68 | 69 | 70 | 71 | 72 | ![流程DEMO](./img/flow7.png) 73 | 74 | 75 | 76 | ![流程DEMO](./img/flow8.png) 77 | 78 | 79 | 80 | 81 | 82 | 83 | # 3.开发说明 84 | 85 | ## 3.1 相关js依赖 86 | * jsplumb 87 | * canvg.js 88 | * html2canvas.min.js 89 | 90 | ## 3.2 开发 91 | 92 | ### 3.2.1引用依赖js 93 | ```html 94 | 95 | 96 | 97 | 98 | ``` 99 | 100 | ### 3.2.2引用andflow_js相关css、js 101 | 102 | ```html 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | ``` 111 | 112 | ### 3.2.3定义流程设计器的DOM 113 | ```html 114 |
115 |
116 | 117 | ``` 118 | 119 | ### 3.2.4初始化流程设计器 120 | ```js 121 | 122 | //流程组件过滤标签 123 | var tags=['通用', '系统']; 124 | 125 | //流程组件定义 126 | var metadata=[ 127 | { 128 | "name": "begin", 129 | "title": "开始", 130 | "des": "开始", 131 | "group": "通用", 132 | "tag": "通用", 133 | "css": "begin", 134 | "icon": "/static/flow/img/begin.png", 135 | "flow_code": "57edec62af8a42628714da6d1a045928", 136 | "params": [], 137 | "params_html": "", 138 | "params_script": "" 139 | }, 140 | { 141 | "name": "end", 142 | "title": "结束", 143 | "des": "结束", 144 | "group": "通用", 145 | "tag": "通用", 146 | "css": "end", 147 | "icon": "/static/flow/img/end.png", 148 | "flow_code": "57edec62af8a42628714da6d1a045928", 149 | "params": [], 150 | "params_html": "", 151 | "params_script": "" 152 | }, 153 | 154 | { 155 | "name": "script", 156 | "title": "执行脚本", 157 | "des": "", 158 | "group": "通用", 159 | "tag": "通用", 160 | "css": "", 161 | "icon": "/static/flow/img/script.png", 162 | "flow_code": "57edec62af8a42628714da6d1a045928", 163 | "params": [], 164 | "params_html": "", 165 | "params_script": "" 166 | }, 167 | 168 | { 169 | "name": "cmd", 170 | "title": "系统命令", 171 | "des": "", 172 | "group": "系统", 173 | "tag": "系统", 174 | "css": "", 175 | "icon": "/static/flow/img/cmd.png", 176 | "flow_code": "57edec62af8a42628714da6d1a045928", 177 | "params": [ 178 | { 179 | "name": "command", 180 | "title": "命令", 181 | "placeholder": "操作系统指令", 182 | "element": "textarea", 183 | "default": "", 184 | "attrs": { 185 | "rows": "4" 186 | }, 187 | "options": null, 188 | "option_mode": "" 189 | }, 190 | { 191 | "name": "timeout", 192 | "title": "超时（毫秒）", 193 | "placeholder": "超时毫秒", 194 | "element": "input", 195 | "default": "10000", 196 | "attrs": { 197 | "type": "number" 198 | }, 199 | "options": null, 200 | "option_mode": "" 201 | }, 202 | { 203 | "name": "cache", 204 | "title": "执行结果参数名", 205 | "placeholder": "执行结果存储到哪个参数变量", 206 | "element": "", 207 | "default": "", 208 | "attrs": null, 209 | "options": null, 210 | "option_mode": "" 211 | } 212 | ], 213 | "params_html": "", 214 | "params_script": "" 215 | } 216 | 217 | ] ; 218 | 219 | 220 | 221 | //初始化流程模型 222 | //这个部分也是设计完成之后的JSON，可以参考examples下的例子 223 | var flowModel= { 224 | "code":"", 225 | "name":"", 226 | "show_action_body":"false", //是否显示Body,默认true, flow_theme_icon比较有用 227 | "show_action_content":"true", //是否显示节点内容,默认true 228 | "show_action_state_list":"false", //是否显示列表,默认false 229 | "theme":"flow_theme_default", //节点风格,默认flow_theme_default 230 | "link_type":"Flowchart", //连接线风格，默认Flowchart 231 | 232 | }; 233 | 234 | //设计器配置选项 235 | var options={ 236 | //组件过滤标签列表 237 | tags:tags, 238 | //组件元素 239 | metadata:metadata, 240 | //流程模型 241 | flowModel:flowModel, 242 | //是否可编辑，默认true 243 | editable:true, 244 | //是否显示工具栏，默认true 245 | show_toolbar:true, 246 | //是否显示缩略图 247 | show_thumbail:false, 248 | //是否显示标尺 249 | show_rulers:true, 250 | //组件栏样式，可选项：固定左边metadata_fix_left、浮在左边metadata_float_left、浮在顶部metadata_float_top 251 | metadata_style:"", 252 | render_action:function(metadata,action,html){ return html; },//节点渲染 253 | render_action_helper: function(metadata,html){return null}, //节点拖拉渲染 254 | render_state_list: function(datas){return null}, //流程状态列表渲染 255 | render_link:function(conn,linktype,linkdata){return null}, //连接线渲染 256 | 257 | //节点单击事件 258 | event_action_click:function(metadata,action){ 259 | 260 | var oldid=$("#current_action_id").val(); 261 | andflow.setActionSelected(oldid,false); 262 | 263 | $("#current_action_id").val(action.id); 264 | andflow.setActionSelected(action.id,true); 265 | 266 | }, 267 | //节点双击事件 268 | event_action_dblclick:function(metadata,action){ 269 | 270 | var content = prompt("set action content "); 271 | 272 | andflow.setActionContent(action.id,content); 273 | 274 | }, 275 | //连线单击事件 276 | event_link_click: function (link) { 277 | alert("link click"); 278 | }, 279 | //连线双击事件 280 | event_link_dblclick: function (link) { 281 | var label = prompt("set link label "); 282 | link.title=label; 283 | andflow.setLinkInfo(link); 284 | 285 | }, 286 | //画图板单击事件 287 | event_canvas_click: function(e){ 288 | var oldid=$("#current_action_id").val(); 289 | andflow.setActionSelected(oldid,false); 290 | $("#current_action_id").val(""); 291 | } 292 | } 293 | 294 | //初始化流程设计器实例 295 | andflow.newInstance("andflow",options); 296 | //显示流程设计器 297 | andflow.showFlow(); 298 | ``` 299 | 300 | 301 | # 4.参数 302 | 303 | ## 4.1.设计器选项options 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 |
名称描述值默认值
tags组件标签列表数组null
metadata组件定义元数据数组null
flowModel流程模型objectnull
editable是否可设计true/falsetrue
show_toolbar是否显示工具栏true/falsetrue
show_thumbnail是否显示缩略图true/falsefalse
show_rulers是否显示标尺true/falsetrue
show_grid是否显示背景格子true/falsetrue
drag_step每次拖动的单步距离number10
lang一些标题的方言json 337 | { 338 | metadata_tag_all: '所有组件', 339 | delete_action_confirm: '确定删除该节点?', 340 | } 341 |
render_action组件节点渲染函数function(metadata,action,html){ return null; }null
render_action_helper组件节点拖拉过程渲染函数function(metadata,html){ return null; }null
render_endpoint组件节点拖拉点渲染函数function(metadata,action,html){ return null; }null
render_removebtn组件节点拖拉点渲染函数function(metadata,action,html){ return null; }null
render_link组件节点连线渲染函数function(conn,linktype,linkdata){return null}null
event_action_click节点单击事件function(metadata,action){}null
event_action_dblclick节点双击事件function(metadata,action){}null
event_link_click连线单击事件function (link)null
event_link_dblclick连线双击事件function (link)null
event_canvas_click画布单击事件function (event)null
379 | 380 | ### 4.1.1组件元数据定义metadata 381 | 382 | metadata 参数用于定义流程设计器的组件列表 383 | 384 | ```js 385 | var metadata=[ 386 | { 387 | "name": "begin", 388 | "title": "开始", 389 | "des": "开始", 390 | "group": "通用", 391 | "tag": "通用", 392 | "icon": "/static/flow/img/begin.png", 393 | "params": [ 394 | { 395 | "name": "command", 396 | "title": "命令", 397 | "placeholder": "操作系统指令", 398 | "element": "textarea", 399 | "default": "", 400 | "attrs": { 401 | "rows": "4" 402 | }, 403 | "options": null, 404 | "option_mode": "" 405 | }, 406 | ], 407 | "params_html": "", 408 | "params_script": "" 409 | }, 410 | ] 411 | 412 | ``` 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 |
名称描述取值
name组件名称唯一字符串
title组件标题中英文标题
group组件所属组别中英文名称
tag组件标签，用于过滤中英文名称
css组件样式CSS样式名称
icon组件图标图标路径或者使用base64格式（例如 data:image/png;base64,....）
params组件设计参数数组这个部分可以自定义
params组件设计参数数组这个部分可以自定义
params_html组件设计参数设置界面HTMl这个部分可以自定义
params_script组件设计参数设置界面javascript这个部分可以自定义
473 | 474 | 475 | ### 4.1.2流程模型参数flowModel 476 | 用于默认显示的流程模型，也可以放空。 477 | 478 | 例如： 479 | ```js 480 | var flowModel= { 481 | "code":"", 482 | "name":"", 483 | "show_action_body":"false", //是否显示Body,默认true, flow_theme_icon比较有用 484 | "show_action_content":"true", //是否显示节点内容,默认true 485 | "show_action_state_list":"false", //是否显示列表,默认false 486 | "theme":"flow_theme_default", //节点风格,默认flow_theme_default 487 | "link_type":"Flowchart", //连接线风格，默认Flowchart 488 | "params":[], 489 | // "actions":[{"id":"f7a6ec0031784f5a80d8633a6418fd52","left":"77px","top":"101px","name":"begin","params":{},"title":"开始","icon":"/static/flow/img/begin.png","width":"120px","height":"80px"},{"id":"793a2a11cf8b40e9afd8bd8f04405e64","left":"126px","top":"222px","name":"script","params":{},"title":"执行脚本","icon":"/static/flow/img/script.png","width":"120px","height":"80px"},{"id":"f558687ca5f34a6c89732eb50749a15a","left":"201px","top":"362px","name":"end","params":{},"title":"结束","icon":"/static/flow/img/end.png","width":"120px","height":"80px"}], 490 | // "links":[{"source_id":"f7a6ec0031784f5a80d8633a6418fd52","target_id":"793a2a11cf8b40e9afd8bd8f04405e64"},{"source_id":"793a2a11cf8b40e9afd8bd8f04405e64","target_id":"f558687ca5f34a6c89732eb50749a15a"}] 491 | }; 492 | ``` 493 | 494 | 流程模型对象内的相关参数为： 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 516 | 517 | 518 | 519 | 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 |
名称描述取值默认
code流程唯一编码字符串null
name流程名称字符串null
theme组件节点样式flow_theme_default、flow_theme_icon、flow_theme_zone、flow_theme_box,也可以自定义flow_theme_default
link_type连线样式Flowchart、Straight、Bezier、StateMachineFlowchart
show_action_body是否显示组件节点中的Body部分“true"、“false""true"
show_action_content是否显示组件节点中的内容“true"、“false""true"
show_action_state_list是否显示流程状态列表“true"、“false""false"
actions节点列表：可以在设计后自动生成objectnull
actions连线列表：可以设计后自动生成objectnull
558 | 559 | ## 4.2 方法 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 599 | 600 | 601 | 602 | 603 | 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 703 | 704 | 705 | 708 | 709 | 710 | 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 | 741 | 742 | 743 | 744 | 745 | 746 | 747 | 748 | 749 | 750 | 751 | 752 | 753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | 812 | 813 | 814 | 815 | 816 | 817 | 818 | 819 | 820 | 821 | 822 | 823 | 824 | 825 | 826 | 827 | 828 | 829 | 830 | 831 | 832 | 833 | 834 | 835 | 836 | 837 | 838 | 839 | 840 | 841 | 842 | 843 | 844 | 845 | 846 | 847 | 848 | 849 | 850 | 851 | 852 | 853 | 854 | 855 | 856 | 857 | 858 | 859 | 860 | 861 | 862 | 863 | 864 | 865 | 866 | 867 | 868 | 869 | 870 | 871 | 872 | 873 | 874 | 875 | 876 | 877 | 878 | 879 | 880 | 881 | 882 | 883 | 884 | 885 | 886 | 887 | 888 | 889 | 890 | 891 | 892 | 893 | 894 | 895 | 896 | 897 | 898 | 899 | 900 | 901 | 902 | 903 | 904 | 905 | 906 | 907 | 908 | 909 | 910 | 911 | 912 | 913 | 914 | 915 | 916 | 917 | 918 | 919 | 920 | 921 | 922 | 923 | 924 | 925 | 926 | 927 | 928 | 929 | 930 | 931 | 932 | 933 | 934 | 935 | 936 | 937 | 938 | 939 | 940 | 941 | 942 | 943 | 944 | 945 | 946 | 947 | 948 | 949 | 950 | 951 | 952 | 953 | 954 | 955 | 956 | 957 | 958 | 959 | 960 | 961 | 962 | 963 | 964 | 965 | 966 | 967 | 968 | 969 | 970 | 971 | 972 | 973 | 974 | 975 | 976 | 977 | 978 | 979 | 980 | 981 | 982 | 983 | 984 | 985 | 986 | 987 | 988 | 989 | 990 | 991 | 992 | 993 | 994 | 995 | 996 | 997 | 998 | 999 | 1000 | 1001 | 1002 | 1003 | 1004 | 1005 | 1006 | 1007 | 1008 | 1009 | 1010 | 1011 | 1012 | 1013 | 1014 | 1015 | 1016 | 1017 | 1018 | 1019 | 1020 | 1021 | 1022 | 1023 | 1024 | 1025 | 1026 | 1027 | 1028 | 1029 | 1030 | 1031 | 1032 | 1033 | 1034 | 1035 | 1036 | 1037 | 1038 | 1039 | 1040 | 1041 | 1042 | 1043 | 1044 | 1045 | 1046 | 1047 | 1048 | 1049 | 1050 | 1051 | 1052 | 1053 | 1054 | 1055 | 1056 | 1057 | 1058 | 1059 | 1060 | 1061 | 1062 | 1063 | 1064 | 1065 | 1066 | 1067 |
名称描述参数返回值DEMO
andflow.showFlow();显示流程模型flowModel，可以为空null
andflow.getFlow();获取流程模型对象nullflowModel
andflow.snap("流程");截图截图导出的文件名称null
andflow.setTheme(theme);设置组件节点样式名称flow_theme_default、flow_theme_icon、flow_theme_zone、flow_theme_box、或者其他自定义null 596 | andflow.setTheme(theme); 597 | andflow.reflow(); 598 |
andflow.setEditable(false);设置是否可设计true、falsenull
andflow.reflow();重新渲染设计器,在改变样式、风格之后需要执行这个函数。nullnull
andflow.getLinkInfo(sourceId, targetId);获取连线信息sourceId：起始节点ID, targetId：目的节点ID连线信息
andflow.setLinkInfo(linkInfo);设置连线信息linkInfo连线信息null
andflow.setLinkType(link_type);设置连接线样式名称Flowchart、Straight、Bezier、StateMachinenull 640 | andflow.setLinkType(link_type); 641 | andflow.reflow(); 642 |
andflow.getLinkLabel(source_id,target_id);获取连线中间标签标题sourceId：起始节点ID, targetId：目的节点ID标签标题
andflow.setLinkLabel(source_id,target_id,title);设置连线中间标签标题sourceId：起始节点ID, targetId：目的节点ID,title:标题null
andflow.removeLink(sourceId, targetId);删除链接线sourceId：起始节点ID, targetId：目的节点IDnull
andflow.removeLinkBySource(sourceId);删除从SoureceID节点开始的所有链接线sourceId：起始节点IDnull
andflow.removeLinkByTarget(targetId);删除所有到达targetId节点的所有链接线targetId：目标节点IDnull
andflow.getActionInfo(actionId);获取节点配置信息actionId：节点ID节点信息
andflow.setActionInfo(actionInfo);设置节点配置信息 actionInfo：节点信息null
andflow.setActionTheme(actionId, theme);设置节点样式 706 | actionId: 节点ID
707 | theme:节点样式，action_theme_default,action_theme_icon,action_theme_zone,action_theme_box 等		null
andflow.setActionTitle(actionId,title);设置节点标题 actionId: 节点ID，title:标题null
andflow.getActionTitle(actionId);获取节点标题 actionId: 节点IDstring
andflow.setActionContentVisible(true);设置内容是否可见true、falsenull
andflow.getActionContent(actionId);获取节点内容actionId:节点IDstring
andflow.setActionContent(actionId, content, content_type);设置内容actionId:节点ID；content:内容; content_type:类型（"msg"、"html","chart"）null
andflow.setActionParam(actionId,key,value);设置节点参数。actionId：节点ID,key：参数名,value：参数值null
andflow.getActionParam(actionId,key);设置节点参数。actionId：节点ID,key：参数名参数值
andflow.setActionBorderColor(actionId,color);设置节点边框颜色。actionId：节点ID,color: 颜色null
andflow.setActionHeaderColor(actionId,color);设置节点头部背景颜色。actionId：节点ID,color: 颜色null
andflow.setActionHeaderTextColor(actionId,color);设置节点头部字体颜色。actionId：节点ID,color: 颜色null
andflow.setActionBodyColor(actionId,color);设置节点内容背景颜色。actionId：节点ID,color: 颜色null
andflow.setActionBodyTextColor(actionId,color);设置节点内容字体颜色。actionId：节点ID,color: 颜色null
andflow.removeAction(actionId);删除节点actionId：节点ID
andflow.getGroupInfo(groupId);获取组配置信息groupId：组ID组信息
andflow.setGroupInfo(groupInfo);设置组配置信息groupInfo：组信息null
andflow.getGroupTitle(groupId);获取组标题groupId：组ID组标题
andflow.setGroupTitle(groupId,title);设置组标题groupId：组ID, title:组标题null
andflow.setGroupBorderColor(groupId,color);设置组边框颜色。groupId:组ID,color: 颜色null
andflow.setGroupHeaderColor(groupId,color);设置组头部背景颜色。groupId：组ID,color: 颜色null
andflow.setGroupHeaderTextColor(groupId,color);设置组头部字体颜色。groupId：组ID,color: 颜色null
andflow.setGroupBodyColor(groupId,color);设置组内容背景颜色。groupId：组ID,color: 颜色null
andflow.setGroupBodyTextColor(groupId,color);设置组内容字体颜色。groupId：组ID,color: 颜色null
andflow.removeGroup(groupId,deleteMembers);删除组groupId：组ID, deleteMembers: 是否删除子元素（true,false)null
andflow.getListInfo(listId);获取列表配置信息listId: 列表ID列表信息
andflow.setListInfo(listInfo);设置列表配置信息listInfo: 列表信息null
andflow.getListTitle(listId);获取列表标题listId: 列表ID列表标题
andflow.setListTitle(listId,title);设置列表标题listId: 列表ID, title:标题null
andflow.setListBorderColor(listId,color);设置列表边框颜色。listId:列表ID,color: 颜色null
andflow.setListHeaderColor(listId,color);设置列表头部背景颜色。listId: 列表ID,color: 颜色null
andflow.setListHeaderTextColor(listId,color);设置列表头部字体颜色。listId: 列表ID,color: 颜色null
andflow.setListBodyColor(listId,color);设置列表内容背景颜色。listId: 列表ID,color: 颜色null
andflow.setListBodyTextColor(listId,color);设置列表内容字体颜色。listId:列表ID,color: 颜色null
andflow.setListItemColor(listId,color);设置列表元素背景颜色。listId: 列表ID,color: 颜色null
andflow.setListItemTextColor(listId,color);设置列表元素字体颜色。listId:列表ID,color: 颜色null
andflow.removeList(listId);删除列表listId: 列表IDnull
andflow.getTipInfo(tipId);获取标签配置信息tipId：标签ID标签信息
andflow.setTipInfo(tipInfo);设置标签配置信息tipInfo:标签信息null
andflow.getTipTitle(tipId);获取标签标题tipId：标签ID标签标题
andflow.setTipTitle(tipId,title);设置标签标题tipId：标签ID, title:标题null
andflow.getTipContent(tipId);获取标签内容tipId：标签ID标签内容
andflow.setTipContent(tipId,content);设置标签内容tipId：标签ID, content:内容null
andflow.setTipBodyColor(tip,color);设置标签背景颜色。tipId：标签ID,color: 颜色null
andflow.setTipBodyTextColor(tip,color);设置标签内容字体颜色。tipId：标签ID,color: 颜色null
andflow.removeTip(tipId);删除标签tipId：标签IDnull
1068 | 1069 | 1070 | ## 4.3 事件 1071 | 1072 | 1073 | 1074 | 1075 | 1076 | 1077 | 1078 | 1079 | 1080 | 1081 | 1082 | 1083 | 1084 | 1085 | 1086 | 1087 | 1088 | 1089 | 1090 | 1091 | 1092 | 1093 | 1094 | 1095 | 1096 | 1097 | 1098 | 1099 | 1100 | 1101 | 1102 | 1103 | 1104 | 1105 | 1106 | 1107 | 1108 | 1109 | 1110 | 1111 | 1112 | 1113 | 1114 | 1115 | 1116 | 1117 | 1118 | 1119 | 1120 | 1121 | 1122 | 1123 | 1124 | 1125 | 1126 |
事件名称事件函数签名描述
event_action_click节点单击event_action_click(action_meta, action) action_meta节点配置信息, action:节点信息
event_action_dblclick节点双击event_action_dblclick(action_meta, action) action_meta节点配置信息, action:节点信息
event_action_remove节点被删除event_action_remove( action) action:节点信息
event_link_click连接线单击event_link_click(linkinfo) linkinfo:链接线信息
event_link_dblclick连接线双击event_link_dblclick(linkinfo) linkinfo:链接线信息
event_link_remove连接线被删除event_link_remove(linkinfo) linkinfo:链接线信息
event_canvas_click设计面板单击event_canvas_click(event) event:事件
event_canvas_changed设计面板被调整event_canvas_changed() null
-------------------------------------------------------------------------------- /dist/css/andflow.min.css: -------------------------------------------------------------------------------- 1 | div { 2 | box-sizing: border-box 3 | } 4 | 5 | ::-webkit-scrollbar { 6 | width: 8px; 7 | height: 8px 8 | } 9 | 10 | ::-webkit-scrollbar-thumb { 11 | border-radius: 3px; 12 | background-color: rgba(220, 220, 220, 0.5); 13 | background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent) 14 | } 15 | 16 | .hide { 17 | display: none 18 | } 19 | 20 | .ico { 21 | display: block; 22 | padding: 0px; 23 | margin: 0px; 24 | font-style: normal; 25 | font-size: 12px; 26 | width: 100%; 27 | height: 100%; 28 | text-align: center; 29 | line-height: 10px; 30 | overflow: hidden; 31 | color: inherit 32 | } 33 | 34 | .ico-white { 35 | color: #ffffff 36 | } 37 | 38 | .ico-black { 39 | color: #000000 40 | } 41 | 42 | .column { 43 | overflow: hidden 44 | } 45 | 46 | .column-left { 47 | height: 400px; 48 | background-color: #fff; 49 | position: relative; 50 | float: left 51 | } 52 | 53 | .column-right { 54 | height: 400px; 55 | padding: 16px; 56 | background-color: #eee; 57 | box-sizing: border-box; 58 | overflow: hidden 59 | } 60 | 61 | .resize-save { 62 | position: absolute; 63 | top: 0; 64 | right: 5px; 65 | bottom: 0; 66 | left: 0; 67 | padding: 16px; 68 | overflow-x: hidden 69 | } 70 | 71 | .resize-bar { 72 | width: 200px; 73 | height: inherit; 74 | resize: horizontal; 75 | cursor: ew-resize; 76 | opacity: 0; 77 | overflow: scroll; 78 | max-width: 500px; 79 | min-width: 200px 80 | } 81 | 82 | .resize-line { 83 | position: absolute; 84 | right: 0; 85 | top: 0; 86 | bottom: 0; 87 | border-right: 2px solid #eee; 88 | border-left: 1px solid #bbb; 89 | pointer-events: none 90 | } 91 | 92 | .resize-bar:hover~.resize-line, 93 | .resize-bar:active~.resize-line { 94 | border-left: 1px dashed skyblue 95 | } 96 | 97 | .resize-bar::-webkit-scrollbar { 98 | width: 200px; 99 | height: inherit 100 | } 101 | 102 | @supports (-moz-user-select:none) { 103 | 104 | .resize-bar:hover~.resize-line, 105 | .resize-bar:active~.resize-line { 106 | border-left: 1px solid #bbb 107 | } 108 | 109 | .resize-bar:hover~.resize-line::after, 110 | .resize-bar:active~.resize-line::after { 111 | content: ''; 112 | position: absolute; 113 | width: 16px; 114 | height: 16px; 115 | bottom: 0; 116 | right: -8px; 117 | background: red; 118 | background-size: 100% 100% 119 | } 120 | } 121 | 122 | .andflow { 123 | position: relative; 124 | display: inline-block; 125 | width: 100%; 126 | height: 100%; 127 | overflow: hidden; 128 | border: 1px solid #E3E3E3; 129 | border-radius: 0.25rem; 130 | -moz-user-select: none; 131 | -webkit-user-select: none; 132 | -ms-user-select: none; 133 | -khtml-user-select: none; 134 | user-select: none; 135 | color: #333333; 136 | text-align: left 137 | } 138 | 139 | .andflow .metadata { 140 | position: relative; 141 | display: inline-block; 142 | width: 200px; 143 | height: 100%; 144 | float: left; 145 | border-right: 1px solid #E3E3E3; 146 | min-width: 0; 147 | word-wrap: break-word; 148 | background-color: #fff; 149 | background-clip: border-box; 150 | padding-top: 0px 151 | } 152 | 153 | .andflow .metadata .tags { 154 | display: flex; 155 | padding: 0px; 156 | align-items: center; 157 | border: 0px; 158 | height: 25px; 159 | background-color: #E3E3E3; 160 | overflow: hidden 161 | } 162 | 163 | .andflow .metadata .tags>label { 164 | display: inline-block; 165 | width: 50px; 166 | height: 100%; 167 | font-size: 12px; 168 | background-color: #E3E3E3; 169 | color: #333333; 170 | line-height: 25px; 171 | text-align: center; 172 | margin: 0px 173 | } 174 | 175 | .andflow .metadata .tags>select { 176 | display: inline-block; 177 | width: 100%; 178 | height: 100%; 179 | font-size: 12px; 180 | margin: 0px; 181 | border: 0px; 182 | outline: 0px; 183 | border-radius: 0px; 184 | -moz-border-radius: 0px; 185 | -webkit-border-radius: 0px; 186 | -webkit-appearance: none; 187 | appearance: none; 188 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAGVJREFUOE9jZKAQMFKon2HUAAbahEEDAwPDVQYGhtVoMRTKwMCgzcDAAJKHA2yxAFK4ioGBIQzJEGxiYENwRSOyBpA6dAPxugAmCTMExEd2DYrPCCUkGajqJ7hSLCEDCKb0YWAAAPWaDREoXWNBAAAAAElFTkSuQmCC"); 189 | background-repeat: no-repeat; 190 | background-position: calc(100% - 5px) 50%; 191 | padding-left: 10px; 192 | padding-right: 10px; 193 | overflow: hidden; 194 | color: #333333 195 | } 196 | 197 | .andflow .metadata .actions { 198 | border-top: 1px solid #E3E3E3; 199 | padding: 5px; 200 | height: calc(100% - 25px); 201 | overflow: auto 202 | } 203 | 204 | .andflow .metadata .actionMenu { 205 | list-style-type: none; 206 | padding: 0px; 207 | margin: 0px 208 | } 209 | 210 | .andflow .metadata .actionMenuSpliter { 211 | border-top: 1px solid #E3E3E3; 212 | margin-top: 10px; 213 | height: 10px 214 | } 215 | 216 | .andflow .metadata .actionMenuGroup { 217 | text-align: left 218 | } 219 | 220 | .andflow .metadata .actionMenuGroup .group-title { 221 | cursor: default; 222 | text-decoration: none; 223 | color: #333333; 224 | font-size: 14px 225 | } 226 | 227 | .andflow .metadata .actionMenuGroup .group-title .group-label { 228 | color: #8e8e8e; 229 | font-size: 12px 230 | } 231 | 232 | .andflow .metadata .actionMenuGroupBody { 233 | padding: 0px 234 | } 235 | 236 | .andflow .metadata .actionMenuItem { 237 | display: flex; 238 | flex-direction: row; 239 | align-items: center; 240 | padding-left: 10px; 241 | padding-right: 10px; 242 | list-style-type: none; 243 | height: 40px; 244 | line-height: 40px; 245 | font-size: 12px; 246 | cursor: pointer 247 | } 248 | 249 | .andflow .metadata .actionMenuItem .item-title { 250 | display: flex; 251 | align-content: center; 252 | align-items: center; 253 | height: 100% 254 | } 255 | 256 | .andflow .metadata .actionMenuItem .item-title>img { 257 | height: 16px; 258 | width: 16px 259 | } 260 | 261 | .andflow .metadata .actionMenuItem:hover { 262 | background-color: rgba(233, 233, 233, 0.21) 263 | } 264 | 265 | .andflow .metadata .actionMenuItem .item-title { 266 | display: flex; 267 | flex-direction: row; 268 | align-items: center; 269 | justify-content: start; 270 | text-decoration: none; 271 | color: #333333; 272 | font-size: 12px 273 | } 274 | 275 | .andflow .metadata .actionMenuItem .item-title .item-label { 276 | color: #333333; 277 | font-size: 12px 278 | } 279 | 280 | .andflow .designer { 281 | display: inline-block; 282 | overflow: hidden; 283 | width: calc(100% - 200px); 284 | height: 100%; 285 | border-right: 5px solid transparent; 286 | box-shadow: 0 0 1px rgba(0, 0, 0, 0.13); 287 | position: relative; 288 | display: -ms-flexbox; 289 | display: flex; 290 | -ms-flex-direction: column; 291 | flex-direction: column; 292 | min-width: 0; 293 | word-wrap: break-word; 294 | background-color: #fff; 295 | background-clip: border-box; 296 | border: 0 solid rgba(0, 0, 0, .125); 297 | border-radius: .25rem; 298 | box-sizing: border-box 299 | } 300 | 301 | .andflow .designer.max { 302 | width: 100%; 303 | height: 100% 304 | } 305 | 306 | .codeContainer { 307 | display: none; 308 | position: absolute; 309 | z-index: 10000; 310 | top: 25px; 311 | left: 0px; 312 | background-color: transparent; 313 | width: 100%; 314 | height: calc(100% - 25px); 315 | padding: 0px; 316 | overflow: hidden; 317 | box-sizing: border-box 318 | } 319 | 320 | .codeContainer textarea { 321 | width: 100%; 322 | height: 100%; 323 | border: 0px; 324 | box-sizing: border-box; 325 | resize: none 326 | } 327 | 328 | .canvasContainer { 329 | position: relative; 330 | display: block; 331 | background-color: transparent; 332 | width: 100%; 333 | height: calc(100% - 25px); 334 | padding: 0px; 335 | overflow: hidden; 336 | box-sizing: border-box 337 | } 338 | 339 | .multi_select_box { 340 | display: none; 341 | position: absolute; 342 | z-index: 99999; 343 | left: 0px; 344 | top: 0px; 345 | width: 0px; 346 | height: 0px; 347 | border: 2px dashed rgba(0, 0, 0, 0.125); 348 | background-color: rgba(255, 255, 224, 0.2); 349 | cursor: move 350 | } 351 | 352 | .multi_select_dragging { 353 | display: none; 354 | position: absolute; 355 | z-index: 99999; 356 | left: 0px; 357 | top: 0px; 358 | width: 0px; 359 | height: 0px; 360 | border: 2px dashed rgba(0, 0, 0, 0.125); 361 | background-color: rgba(255, 255, 224, 0) 362 | } 363 | 364 | .canvasBox { 365 | position: relative; 366 | box-sizing: border-box; 367 | width: 100%; 368 | height: 100%; 369 | padding: 0px; 370 | background-image: url(data:image/gif;base64,R0lGODlhDAAMAJEAAOrq6v////Hx8QAAACH5BAAHAP8ALAAAAAAMAAwAAAIWjI8hycvonomSPtvkwYlDPQniSApAAQA7); 371 | background-size: 10px 10px; 372 | overflow: auto 373 | } 374 | 375 | .ruler_h { 376 | display: none; 377 | box-sizing: border-box; 378 | position: absolute; 379 | z-index: 100; 380 | left: 20px; 381 | top: 0px; 382 | height: 20px; 383 | width: 100%; 384 | overflow: hidden; 385 | background-color: white; 386 | border-bottom: 1px solid #E3E3E3 387 | } 388 | 389 | .ruler_h .scope { 390 | display: none; 391 | position: absolute; 392 | top: 0px; 393 | left: 0px; 394 | z-index: 2; 395 | height: 100%; 396 | width: 100px; 397 | border: 0px; 398 | border-left: 1px dotted #E3E3E3; 399 | border-right: 1px dotted #E3E3E3; 400 | background-color: #00000017 401 | } 402 | 403 | .ruler_h canvas { 404 | position: absolute; 405 | top: 0px; 406 | left: 0px; 407 | z-index: 1 408 | } 409 | 410 | .ruler_v { 411 | display: none; 412 | box-sizing: border-box; 413 | position: absolute; 414 | z-index: 100; 415 | left: 0px; 416 | top: 20px; 417 | width: 20px; 418 | height: 100%; 419 | overflow: hidden; 420 | background-color: white; 421 | border: 0px; 422 | border-right: 1px solid #E3E3E3 423 | } 424 | 425 | .ruler_v .scope { 426 | display: none; 427 | position: absolute; 428 | top: 0px; 429 | left: 0px; 430 | z-index: 2; 431 | width: 100%; 432 | height: 100px; 433 | border: 0px; 434 | border-top: 1px dotted #E3E3E3; 435 | border-bottom: 1px dotted #E3E3E3; 436 | background-color: #00000017 437 | } 438 | 439 | .ruler_v canvas { 440 | position: absolute; 441 | top: 0px; 442 | left: 0px; 443 | z-index: 1 444 | } 445 | 446 | .canvas { 447 | position: absolute; 448 | display: block; 449 | transform-origin: center center; 450 | min-width: 100%; 451 | min-height: 100%; 452 | width: 100%; 453 | height: 100%; 454 | padding: 0px; 455 | margin: 0px; 456 | background-color: transparent; 457 | overflow: visible; 458 | box-sizing: border-box 459 | } 460 | 461 | .canvas_move { 462 | cursor: grab 463 | } 464 | 465 | .canvas_moveing { 466 | cursor: grabbing 467 | } 468 | 469 | .canvas_select { 470 | cursor: crosshair 471 | } 472 | 473 | .flow_tools { 474 | display: inline-block; 475 | height: 25px; 476 | width: 100%; 477 | background-color: white; 478 | border-bottom: 1px solid #E3E3E3; 479 | color: #333333; 480 | font-size: 12px; 481 | overflow: hidden; 482 | margin: 0px; 483 | padding: 0px 484 | } 485 | 486 | .flow_tools .nav_btn { 487 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAPpJREFUWEftVssNwjAMtdUdYIcyBEJIHNMkEptwp5wZgTPntEcWYQiWMIrUogT6ox+5iORUKS/26/OzEwTmhcz5IRCYlwJSyhQRj1P6gohOWZalZQ5PAXYCSZLEiLiYWIFHnuf3SgWmTFwXe14m/AkFlFJ7Ilr1Jet2gI3RWAIp5Q4Rb8aYF25op7ixGgkopc4AcLCgCgLrvgoYYzbu2Q8FhBDLKIquALAtge+s+yavOucR0FoLIroAgDcL/oeAlYi1BG6N2EzokmBtwzqnF4MoLvaticn5bm2QrwZRa7QRAOEy8hRgf5AMvWi6WGLeb8IufzA2JnRBUOAJ7/V1IeDm3+wAAAAASUVORK5CYII=') 488 | } 489 | 490 | .flow_tools .nav_btn.close { 491 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAARdJREFUWEftljEOgkAQRXcu4SGw8gTGAxjYwgMYE2srW7G28gLGE/AX4gUs7K1M9AjegYzBYAIK7oqSxQQqir9/Hp+Z3SVh+SHL9UUL0KwEPM/ziWhRZ18w81Ip5T9q5BKwDuC6rkNEnZoTuIZheCpMoM7CZd7NasK/SEBKOWLmblXY7AQkHi+/QErJzNxTSh2Linw7KQByNQsB7mRE4yAIts8QKUC/agIABtm1pQCpaA1gVrWYyTodQOKxF0JMAVxMDD/VmAAc4jieRFF0/tTcRK8D2ACYmBhV1bwDmANY2WrCIYCdlTHURZluRE6qSxLkzLtuudBuRFqHHwvawyiXgPULybcHjUl7NPtOaPIFv9a0U9AmcAOt/n8huWU9DAAAAABJRU5ErkJggg==') 492 | } 493 | 494 | .flow_tools .code_btn { 495 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAf5JREFUWEftl79rFEEUx79v4FotQqwsTB1IZWmRNBYai0BiKRF2392hV8RKsDAH/gdy4e7NgmdrSCFoI0LSpEwRCLZerQimOzhunsw5e2zMSbjcJkvITbXszrz5zPf9mLeEggcVvD+mAKcUiKJokYjWAKwR0ax3kXNuKUmSvXHc5e0YY3bDmg6AxDm3/6+dUwDM/ArAm+xmOQAMzKnqlrX2Wdb2KIDvAO6o6vDEqlo/jwJE9DrdjIgWVfWntfbWWQAaaPestUvjyP6/uXEc73oA/11EThx6lAJTgGusQDZ3fRZcRBAS0Xyr1fo2zI5s5DLzWwDPw7sdEVnNIwvK5fI7VV0PtjZFpD4ECJVvxhizrKqPAMyENHxqrW3nARBF0QNjzOdg65iI9p1z26raIWYeBF1mfAWwXSqVdhqNxq88AJj5JoAqgIcA7p0oRIUDFO6CAoKwLiKbI7Og8DT0VGlMZOsAM98H0ALwPqWv1Wo3ut3uR7+m1+uttNvt32G9P92qMeZls9n85N9NfBkx8wffoADoiMicN1qtVhf6/f6hf3bO3U2S5CAAHAGY/3vxSTkXgGDYK+CL05fUf8w88GXWp5VKZdk590REHqfzJlZg0lpwtQDiOP7hm9EiWzLva87KfqlNaQi4DQAvANwOUX55bfmkATfu+umvWeEK/AFYAJFq0iBzXAAAAABJRU5ErkJggg==') 496 | } 497 | 498 | .flow_tools .code_btn.design { 499 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABBBJREFUWEfFl1mIXUUQhv86CAHBxzwEQXxRXNA4JLhBHBRUhEBccERRBLldDerkQSOCC+OOkkwEdZSuvkpQUDBRRxExuCGJGcVM4oYE9zyYgD4p+OTcLik9Zzj3zFnuBGQaDvfC6e7/66rqqjqEFR60wvroBGBmTinN9/v9+eXAOudOjTF+17WmFYCZlYj2qOoGALeLyEzXhvbeey8ppSuJaDWACRHZ2bSuEcDEATwoIg/0er2zsyz7DMB9IjLdBsHMzwM4S0TOZeZrAbzaBlELUBYvxLz3Z6jqXgDbROSxOghmPkhEFEI4p3jfBbEEoE68AvE+ADHLlCGY+SUA4wD+JKKJEMK3JYibAeyos8QQQJt4BeJtAC8WEM65l4noRBEZd849TkQbR4VYBGBmO9EaEfFlsZTSTIzx4vJpc3dYYO0kotNVdbWIXFI68XYAlzVBiMii7uKfXq+3Lsuy/UR0YQhhLhexANpVNXce6RYTcwC+F5H11Zjw3s+o6ngNxO8ANojIIVtTdQEDeArALQDuaRK3hcxscCeIyBVNt6IKwcz7AcyXrVwXhAbxrKruiDH26tyRix8vIhu78oJzbpqILs8Pu7csvsQCxWb5opuIaFPZHUT0gqqeD2CViGzqEi/FxBEAR+pc1ZaINgO4C8Dd5g4ielhVryGi40IIVy9D/HMAB6onL9a3pmLn3BYi2grAWVSrKsUYLbuNNJj5UwBfNok3uqC8u3NulojsGu4WkYmRlP8L0m8AfNImPhKABZwVlRDCUC7oqAd7AJwJYFpEHm2b21UN7apZ3l3OyT8GcEhVnyOi1+w3xritCaItCI9F/MM8Mf2bTb33F6iq7bNVRCy/LBlN1fBYxK1I/Vj1eQ7xJoD7RSRUCeoS0ZT5b5lm301Eh1X1PVW9taZ2mCXetWttZbQMsQTAe/96SumtGKOVz87BzO8AOArABMxyV4nIbHVhbomPAGwuQ9RZ4Id8k6+71L33c6p6GoCHAGxX1UtjjOaK2pFD7EsprS96zGoxOgnA4XK5bNqMmc2vfwD4CcAUEd0QQnilmG+dUJ07mNni4GhRYYcAnHPWSDwhInaHGwczv0FEf4UQbrRJzGzuusgaEeuEmtqwvOeYqu0H8o3uVVVrp62Fqh3MvAvA3yJyfXlCvrlVUkvd1pAMdcN14ra+aoHZLMs+CCE8bS8nJydXLSwsjA0GgzEiGkspnZJl2W8hhOvq6JjZegjLfHeIyJMld1i3NXTy4l0V4Ncsy7aklNYS0VoA9qwB8AuAL/LCMtSMVkGY+U4Aj6SUzuv3+181nbwWgJn3AThZVa29tufAYDA42O/3f+66ERV33AbgmeKjpi2oOz/NliNcnpv3mOuqiae63/8GMCr4igP8A88tOz9MyKreAAAAAElFTkSuQmCC') 500 | } 501 | 502 | .flow_tools .ruler_btn { 503 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAX9JREFUWEftV9F1wjAMrLIYYYM4CwELxdmAsFhUzrX6VD0bh7gN5QF/+MXRSTqdLuSc448H/kgBmDbG0SKeAJi89/stAUjibwDPUYGu61oiOjDzaRzHQNaaM9y/iwMx2JmZ9wbAqrPnAICsZSybpmmZ+UBEp3meQwtqzsL8E51v6oBzDg98g/grjchOQaoCV0ATEV1+E8yiMRQSogXDMBxfA0COhJtVIEXCTVvw8Apoor1JqFXvX5NQeBMB70S0IN+yxKyG3KWEuSmQ1VyS7tT9aiXs+/6IRaUyC3JtznTiP/xnFQAVPGxIBBaOZJYZngsLTrzF6hbo4HDUCKgdU6IyIagQGosN97IASkoolsp7T9HhfO13ogtIBwtnOSFZCzhwYlUFRJgkCwROZWwZL2AXASgpoW2B9nmpdS0ToIECUBUJVZtCP3PjmAouZ1UAbOmtZwQXQDrLCe2u9cdp0ejkhGhJ/+PLJz0p2pQWg0eG37RkABJnfKdfiKD4n5LjTxQZawe++x5BAAAAAElFTkSuQmCC') 504 | } 505 | 506 | .flow_tools .ruler_btn.close { 507 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAahJREFUWEftV1tygzAQw1ysyQ0wFyK5EOYGJRdjW7mIMR4/iKFkMq3/8HjWslarXZTWWqrXrVE5AMaTcVyqqloAjMaY61kAmqa5KKU+/wG8DwNt295E5ENE7sMwWLFyz9XO1r2nNTAH7kTk6gHojDGK4uW53N57AADKuq5RqxXo/xYMSufO1x6xlxSh1hp1agH84oobERjgxUqpbgYzKqUeRwGapmmbE1JcSEHf97ejACAOe0HSil8CICbC0xgIifBvpcAVWkgDTNHelBSLMCZMli9NDKVG+w5VTxTAFhH6IPgdvGh2UZ+xKICtIuQ5CnRuNB0NS0RgYsvyhVycAkQMgAz6SYCZ5VwxgATdS3DqARqIgS0CELoc1Fpv/xk20UHt7ICzyLszA6zSUSTCEABe6L7UHWCeBpATYYxS/yJPnJYdLkxORSlAgNiLWGZgaU4FKsJ2UZc57hUDcEBwVrAPoxaQf5YkpymCwDkC3QWAVKYMKOUBq3kAI3ds0ICtwlBy3dChHTMkGXmgOmIx3J/T7KCTA5AL4DC1MqKVMlNBYK97u5/fRb8AwrOLAQt1M84AAAAASUVORK5CYII=') 508 | } 509 | 510 | .flow_tools .thumbnail_btn { 511 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAspJREFUWEft1kvoVVUUx/HPHwmCwBrkwHz0Es3EF2I0CQoEwVdOfIyUQs03DoQUlYp8gA4ExYRKJBv4GulARRDDB6IYRBYqJVqaOBBf+AhEkCX7yOl0zr3n/v/8+TtwTS7su/Za3/3ba6192nSxtXVxfs8sQH/cx5XOVqhKgVMYicnY3ZkQVQBf4ouUuAxiGAbiNdzDOfyBf1qFbVQDjSAu4o2SZMexF3twvg5MsyKsgoj1zLqjN97B4Nz6WqzD9UYgzQDexS4ManAd+fhDMREZYKiwCj9WQTQCiOS/p41RiJNqQoTbGKxGAIV9lYP6D0sVwIc4nDw/xdakRCsQryaImSlO/H5fVKIMIJ98LPblNsV1tAIRW9dgSYrxFqKAn1oRYAj2p/aqkq09EN9gDg5hVCOA7ZiKLZhRUTj5zgiXusMqix3d8XkWO69AJA6nh+iLayUAL+NWOwuzH37BS/gIP0WcPEAUXdz/LHxXcfro819xFb3aUZgLsCENq4+LAJswN83+kLXMsta8gDhRWCs1cQLvYyMWFgHeRjj0wHRsKyF4EZE83oCnMtaEWI6vk3ojsisudkEm0R2Mx5ESiNnYnNYvo1sCyrsWC3M4jqb7z+bKE/+yObADU3A2tUzcd9FiFoT0eZuHN7E4LeYh4mWN7jmGD/Kbqibh3+iDg6ktb5ZAvJJexEcI/9vJ5wdMK4GIAj+Nu3UAwife9yi0M1hZcuKKOn2yfACjSyD+t6fZa5iv8JjjAfJXo8zoic8Qsz+KNaxyWDUDiM2RdFkKdCON6hjX8fFxKa2/kJ7seIrziWOcN/qyqv1VPA4r8F7h9NGSDzAAAZHZt1iKAJ6f+r5UiToK5HNGIU1IMyA+UrKkkegkfsNO/FwAXYT1aS06JVOutgJl1x7J4+T/4s8mdRF/Rxu+jk/qdkGNmB13afUKOp6xEOE5QJcr8BhVNZUhAZa4eAAAAABJRU5ErkJggg==') 512 | } 513 | 514 | .flow_tools .thumbnail_btn.open { 515 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjNJREFUWEft1kuoT1EUx/HPzWuiPCZiTCEhlDwmBsiACUKiJAxMiBEDDK6Rx0Apj7yTRwYmihQDQogMPEtGlAkGJK+0ah8du///nnP/Ayd1V51OZ++z1/ru31577d2lYetqOL4+gP9egfH4heed5lJvFViPmZiQnkEp8Fc8xlPcw+G6QHUBInA8U2s6fpggKkGqAGbgQCnwWxzBG7zCi7QEYzAa8V6HUQk0QDbhVjvwngAW4yiGogh8CO8qVBiJDSWQT+n7fKtx7QCCen8acBdrWiTaREzBd9zHyyzAWJzA9NS+BftyiFYAy3Au/XgVq/G+NHApNiOWp2wXE/SdUuMInMbc1LYcfymRAwzEbUzDZSzBj5LDVTiVvq+lHOiH2QhFwibhSWnMAFzCQjzALHwr+nOAbehOnTHDkL+wCHADw7ELO0t90XYcixBg8zN15iHUDNuO3a0AxqXZD8NebM2crMBZPEoz/pL1x8yKbA8FYweU7QxW4kNS4Vl0lhWIGe1IIwbjc+YgkmgPjmFt1ld8XsGClPV5DRiCj+nHPwr2BqDYGQexsQ3ABUSSxq6JHVC2SoCqJQjHEaDOEuSJGCCVSxA/9ZSEk1MSRmHKkzDaTqYkvIk5nSRhjKnahnEeRDUMu47X6J8KUgCG5QnYq20YDhotRIVydUpxnIzx/ERUvziKy9ZxKS6cNHoYFRCNHsdlORu7kOT1prErWZvC559fStuBdNxedSfs2HHdgX0AjSvwG5F4nCH6feA0AAAAAElFTkSuQmCC') 516 | } 517 | 518 | .flow_tools .multi_select_btn.close { 519 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAbpJREFUWEfdV9F1gzAMtFgszQaYhZIsBGxQuhhq5YfyFGFkmcJrXvkhEEmc5dNxQIwRQwgBEa/jOE4xxs8QwgcAPPq+v3ddd0fE28+9aRiGa9u29B/FhGEYgM61NSiHD6hNPhwAFSQ0tHo683Xuno4pXVs1nh2Q7fiL37QFaT8R8cErOhrIwqMLAHwRr0wOHP1wqqeJ/AKA/qQbGlkOCPOjaZrEG+uQ9SiPcuZ5nnSX0xh5D54YbzyPqRUP3IEcOpkox480wiqKiBfSEtYW7kCu0ysd2CosACRBsgCUxEyT0DUFEgBNjNlWAFLOp5ouubfsFHj3k+JO4YBWQgsQ82XZYxO71JWcunKymwM1ndKxpg7ol9FvHrSVawLIJTGLPWB41DyxuZiVEAm03prFsTQnpuQHCvOezExJ8ao4oEXkdAB6DNX+J5NiHOmlVOoAxWyN+4oDUvM9JGDv6InNknDLkEjxsIp7TMz/MSR721wtRHsftEsJtSHR9ilnJrSN26rBgNig0McNvZIl0FM/TDydXNlyzVhtJvh6mf/kjPQkcQ0BQJrYF22pMqWeFeVi3puEe1dVk/fWHfgGgm1IWQafo/sAAAAASUVORK5CYII=') 520 | } 521 | 522 | .flow_tools .multi_select_btn { 523 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAWFJREFUWEe9l9utwzAIhs1kbTeIs1DbheJs0HQyjrCChKzaBgefPEXKhc9cfyA0rnVdX4j4BID3tm2v1rujz6D2YYzxE0K48/NZEC0AJOOI+AAAggkzILoAKSVYluU+C0IFQKefBaEGIAhOSs9wmABmQJgBvCGGADwhhgFKCCrXfd8Pa0O6BOABcRngKoQLQAlBzUsbCjcAMijmx5FSemggXAFGINwBrBBTAE6IPE17E3QagHZ4TQMoJ2itMi4DnCd9NjKeVFW1KoYAyKhsuzHGHO/a1WrTZgDWBNKlQicciPiWIL35YAJoJRZ7wdIFc5U0VHF2K/9QGudvfnmhV3alPTWAbLMs16UxKdcsXlABlD2+trBwGCxeUC8mZSn9ivnIJlUFKGKes1tmdM8L2jB053ZZ85xEElAa43BpJVoXoNVg2BjFnN+jZZbu/wVAZr4EdUlCjZoRUux2jt6vdY3/A9FwizBLe2X5AAAAAElFTkSuQmCC') 524 | } 525 | 526 | .flow_tools .vertical_btn { 527 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAATJJREFUWEftVtGtwjAMTLwCzPDeDPzBAKh1J2KiuhUDwB8zwAyPFdynoCBFpa0TFxSQyG/s+HLnc2JN5mUz1zdfALMYQMSDk5CINlop1QDKslxba28Auq7bNE1z1ID4XADutlkl0NA9lKOW4G0AuGbUNqC7xAMDiLjw1rpO3TJ0ARGJTPpzF0R0Cc99SCyKYusCAODcDw4TU2yIiD/M/Ovy27bdRwGQQMQCCIsnA4gBAQDruq53Q3Ih4oqZl+FeEgNTiZILhoqrGPAs/BHRSSoa7t97qZ+TzAAAjBavqmrHzMcxG/b1T2Zgygkvb8JsNnS0GWOuRDQ5iPxj1MU+x2MDTpxg0jScM4YHR3FKpz8jdhYD2QFk/ZDE2lBiSS1BdgDehvm+5RK1sftqCWILSHFfAP8RLN0hMFwwggAAAABJRU5ErkJggg==') 528 | } 529 | 530 | .flow_tools .horizontal_btn { 531 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAASFJREFUWEftls0NwjAMhROvADPADHCCAVDrLgQsVLdiADjBDDADrOBAkIIqFELjtuolubRqEr/PLz+1ViM3PbK+SgBRDiDihJmXoWUDgCsR3dou7RAAZyJ6DAJggyLijJnnPoHY7G2MKAecqA9CIi4G+HYCAO5EdGlre3OcyAEXIMuyTRfxTg5IsvXN6eRAHxAJwOtAnucra29VVaemze57qO97jh37K553EyLiUSn1Bng9T0S0bpx/496NMWsnVhTFzhiz9fWF4kUB2Cy01hbu3bTW+7Isdy7DZh8RfZyNBvhnWd/Lk05BcqCTA4i4YOZpXdcH6bUsBnDiVlhaC4j/hqMWJKOWZC2r4uGK0lD2bhMCwHAA0p0emic+BX3BJIAn97usIQ/B/08AAAAASUVORK5CYII=') 532 | } 533 | 534 | .flow_tools .left { 535 | display: block; 536 | float: left; 537 | height: 100% 538 | } 539 | 540 | .flow_tools .right { 541 | display: block; 542 | float: right; 543 | height: 100% 544 | } 545 | 546 | .flow_tools a { 547 | display: inline-block; 548 | text-decoration: none; 549 | min-width: 25px; 550 | height: 25px; 551 | line-height: 25px; 552 | text-align: center; 553 | margin: 0px; 554 | padding: 0px; 555 | cursor: pointer; 556 | background-size: 70% 70%; 557 | background-position: 50% 50%; 558 | background-repeat: no-repeat; 559 | overflow: hidden; 560 | box-sizing: border-box; 561 | padding-left: 5px; 562 | padding-right: 5px 563 | } 564 | 565 | .flow_tools a:hover { 566 | background-color: #d9d9d9 567 | } 568 | 569 | .flow_tools .scale_value { 570 | font-size: 10px 571 | } 572 | 573 | .flow_tools .fold_btn { 574 | color: white 575 | } 576 | 577 | .flow_thumbnail { 578 | display: none; 579 | position: absolute; 580 | z-index: 100; 581 | top: 20px; 582 | right: 20px; 583 | padding: 0px; 584 | width: 150px; 585 | height: 150px; 586 | border: 1px solid #E3E3E3; 587 | background-color: rgba(255, 255, 255, 0.2); 588 | background-size: contain; 589 | background-repeat: no-repeat; 590 | overflow: hidden; 591 | box-sizing: border-box 592 | } 593 | 594 | .flow_thumbnail_mask { 595 | position: absolute; 596 | z-index: 100; 597 | top: 0px; 598 | left: 0px; 599 | padding: 0px; 600 | width: 100%; 601 | height: 100%; 602 | background-color: rgba(0, 0, 0, 0.1); 603 | box-sizing: border-box; 604 | cursor: move 605 | } 606 | 607 | .flow_state_list { 608 | position: absolute; 609 | z-index: 99; 610 | bottom: 0px; 611 | width: 100%; 612 | height: auto; 613 | max-height: 50%; 614 | background-color: white; 615 | padding: 0px; 616 | margin: 0px; 617 | overflow: hidden 618 | } 619 | 620 | .flow_state_list_title { 621 | height: 20px; 622 | padding: 2px; 623 | padding-left: 10px; 624 | padding-right: 10px; 625 | border-top: 1px solid #E3E3E3; 626 | background-color: white; 627 | font-size: 12px; 628 | color: grey 629 | } 630 | 631 | .flow_state_list_title .flow_state_list_btn { 632 | font-size: 20px; 633 | color: grey; 634 | float: right; 635 | cursor: pointer; 636 | line-height: 12px 637 | } 638 | 639 | .flow_state_list_content { 640 | width: 100%; 641 | height: calc(100% - 20px); 642 | background-color: white; 643 | overflow: auto; 644 | padding: 5px 645 | } 646 | 647 | .flow_state_list_content>table { 648 | width: 100%; 649 | margin: 0px; 650 | padding: 0px 651 | } 652 | 653 | .flow_state_list_content>table>thead th { 654 | text-align: center; 655 | font-size: 12px 656 | } 657 | 658 | .flow_state_list_content>table tr { 659 | border-bottom: 1px solid #dedede 660 | } 661 | 662 | .flow_state_list_content>table tr>td { 663 | font-size: 12px 664 | } 665 | 666 | .flow_state_list_content label.state-execute { 667 | color: deepskyblue 668 | } 669 | 670 | .flow_state_list_content label.state_complete { 671 | color: darkblue 672 | } 673 | 674 | .flow_state_list_content label.state_waiting { 675 | color: gray 676 | } 677 | 678 | .flow_state_list_content label.error { 679 | color: red 680 | } 681 | 682 | .flow_state_list_content label.success { 683 | color: green 684 | } 685 | 686 | .andflow.toolbar_hide .flow_tools { 687 | display: none 688 | } 689 | 690 | .andflow.toolbar_hide .canvasContainer { 691 | height: 100% 692 | } 693 | 694 | .andflow.metadata_float_left .metadata { 695 | position: absolute; 696 | z-index: 100; 697 | left: 0px; 698 | top: 25px; 699 | display: inline-block; 700 | width: 200px; 701 | height: calc(100% - 25px); 702 | border-right: 1px solid #E3E3E3; 703 | min-width: 0; 704 | word-wrap: break-word; 705 | background-color: rgba(255, 255, 255, 0.9); 706 | background-clip: border-box; 707 | padding-top: 0px 708 | } 709 | 710 | .andflow.metadata_float_left.toolbar_hide .metadata { 711 | top: 0px; 712 | height: 100% 713 | } 714 | 715 | .andflow.metadata_float_left .designer { 716 | display: inline-block; 717 | width: 100%; 718 | height: 100%; 719 | border-right: 5px solid transparent; 720 | box-shadow: 0 0 1px rgba(0, 0, 0, 0.13); 721 | position: relative; 722 | min-width: 0; 723 | word-wrap: break-word; 724 | background-color: #fff; 725 | background-clip: border-box; 726 | border: 0 solid rgba(0, 0, 0, .125) 727 | } 728 | 729 | .andflow.metadata_float_top .metadata { 730 | position: absolute; 731 | z-index: 1000; 732 | left: 0px; 733 | top: 25px; 734 | display: flex; 735 | flex-direction: row; 736 | align-items: start; 737 | width: 100%; 738 | height: auto; 739 | border-right: 0px; 740 | border-left: 0px; 741 | border-bottom: 1px solid #E3E3E3; 742 | min-width: 0; 743 | word-wrap: break-word; 744 | background-color: rgba(255, 255, 255, 0.8); 745 | background-clip: border-box; 746 | padding-top: 0px 747 | } 748 | 749 | .andflow.metadata_float_top.toolbar_hide .metadata { 750 | top: 0px 751 | } 752 | 753 | .andflow.metadata_float_top .metadata .tags { 754 | width: 100px 755 | } 756 | 757 | .andflow.metadata_float_top .metadata .actions { 758 | border: 0px; 759 | padding: 0px; 760 | height: auto; 761 | width: calc(100% - 100px); 762 | overflow-y: hidden; 763 | overflow-x: auto; 764 | white-space: nowrap; 765 | box-sizing: border-box 766 | } 767 | 768 | .andflow.metadata_float_top .metadata .actions .actionMenu { 769 | display: flex; 770 | align-items: center; 771 | align-content: center; 772 | flex-wrap: wrap; 773 | height: auto; 774 | width: 100% 775 | } 776 | 777 | .andflow.metadata_float_top .metadata .actions .actionMenu>.actionMenuGroup { 778 | display: none; 779 | height: 25px; 780 | padding: 0px; 781 | margin: 0px; 782 | padding-left: 5px; 783 | border-left: 1px solid #E3E3E3 784 | } 785 | 786 | .andflow.metadata_float_top .metadata .actions .actionMenu>.actionMenuGroup>a { 787 | font-size: 10px; 788 | padding-left: 5px; 789 | height: 100%; 790 | line-height: 25px; 791 | color: #A3A3A3 792 | } 793 | 794 | .andflow.metadata_float_top .metadata .actions .actionMenu>.actionMenuItem { 795 | display: inline-block 796 | } 797 | 798 | .andflow.metadata_float_top .metadata .actions .actionMenu>.actionMenuItem>a { 799 | display: flex 800 | } 801 | 802 | .andflow.metadata_float_top .designer { 803 | width: 100%; 804 | height: calc(100% - 100px); 805 | border-right: 5px solid transparent; 806 | box-shadow: 0 0 1px rgba(0, 0, 0, 0.13); 807 | position: relative; 808 | min-width: 0; 809 | word-wrap: break-word; 810 | background-color: #fff; 811 | background-clip: border-box; 812 | border: 0 solid rgba(0, 0, 0, .125) 813 | } 814 | 815 | .andflow.fold .metadata { 816 | display: none 817 | } 818 | 819 | .andflow.fold .designer { 820 | width: 100%; 821 | height: 100% 822 | } 823 | 824 | .andflow.state .metadata { 825 | display: none 826 | } 827 | 828 | .andflow.state .designer { 829 | width: 100%; 830 | height: 100% 831 | } 832 | 833 | .andflow.state .flow_tools .nav_btn { 834 | display: none 835 | } 836 | 837 | .andflow.state .action .action-remove-btn { 838 | display: none; 839 | visibility: hidden 840 | } 841 | 842 | .andflow.state .action .action-resize { 843 | display: none; 844 | visibility: hidden 845 | } 846 | 847 | .andflow.state .action .body-resize { 848 | display: none; 849 | visibility: hidden 850 | } 851 | 852 | .andflow.state .action .ep { 853 | display: none; 854 | visibility: hidden 855 | } 856 | 857 | .andflow.state .group .group-remove-btn { 858 | display: none; 859 | visibility: hidden 860 | } 861 | 862 | .andflow.state .group .group-resize { 863 | display: none; 864 | visibility: hidden 865 | } 866 | 867 | .andflow.state .group .group-ep { 868 | display: none; 869 | visibility: hidden 870 | } 871 | 872 | .andflow.state .list .list-remove-btn { 873 | display: none; 874 | visibility: hidden 875 | } 876 | 877 | .andflow.state .list .list-resize { 878 | display: none; 879 | visibility: hidden 880 | } 881 | 882 | .andflow.state .list .list-ep { 883 | display: none; 884 | visibility: hidden 885 | } 886 | 887 | .andflow.state .tip .tip-remove-btn { 888 | display: none; 889 | visibility: hidden 890 | } 891 | 892 | .andflow.state .tip .tip-resize { 893 | display: none; 894 | visibility: hidden 895 | } 896 | 897 | .andflow.state .tip .tip-ep { 898 | display: none; 899 | visibility: hidden 900 | } 901 | 902 | .jtk-drag-hover { 903 | outline: 4px solid #ffc107 904 | } 905 | 906 | .animationLabel { 907 | background-color: red; 908 | height: 30px; 909 | width: 30px; 910 | border-radius: 15px 911 | } 912 | 913 | .drag-helper { 914 | position: absolute; 915 | z-index: 5 916 | } 917 | 918 | .action-container { 919 | display: absolute; 920 | width: auto; 921 | height: auto 922 | } 923 | 924 | @media (max-width:640px) { 925 | .andflow .metadata { 926 | position: relative; 927 | display: inline-block; 928 | width: 50px; 929 | height: 100%; 930 | border-right: 1px solid #E3E3E3; 931 | min-width: 0; 932 | word-wrap: break-word; 933 | background-color: #fff; 934 | background-clip: border-box; 935 | padding-top: 0px 936 | } 937 | 938 | .andflow .metadata .tags>select { 939 | text-align: center; 940 | background: white; 941 | padding: 0px; 942 | -webkit-appearance: none; 943 | -moz-appearance: none; 944 | appearance: none 945 | } 946 | 947 | .andflow .metadata .tags>select::-ms-expand { 948 | display: none 949 | } 950 | 951 | .andflow .metadata .item-label { 952 | display: none 953 | } 954 | 955 | .andflow .metadata .actionMenuGroup .group-label { 956 | display: none 957 | } 958 | 959 | .andflow .designer { 960 | overflow: hidden; 961 | width: calc(100% - 50px) 962 | } 963 | 964 | .andflow.metadata_float_left .metadata { 965 | width: 50px 966 | } 967 | 968 | .andflow.metadata_float_left .designer { 969 | width: 100% 970 | } 971 | } --------------------------------------------------------------------------------