* improve UI of uploader.

docs/examples/flowchart.fbd.js

 if ($.zui.FlowChart) {
+    var textGenerator = function(elementType) {
+        if (!elementType.newElementsCounter) {
+            elementType.newElementsCounter = 1;
+        }
+        return elementType.name.substring(4) + '_' + (elementType.newElementsCounter++);
+    };
     var renderInOut = function($node, elementType, options) {
         var that = this;
         if (elementType.hasPorts()) {
@@ -47,6 +53,7 @@ if ($.zui.FlowChart) {
                 }
                 return {
                     name: name,
+                    rest: name.indexOf('*') > -1,
                     maxLinkCount: 1,
                     direction: 'in',
                     free: false
@@ -61,6 +68,7 @@ if ($.zui.FlowChart) {
                 }
                 return {
                     name: name,
+                    rest: name.indexOf('*') > -1,
                     maxLinkCount: 1,
                     direction: 'out',
                     free: false
@@ -77,54 +85,50 @@ if ($.zui.FlowChart) {
             portLineLength: 8,
             style: {borderRadius: 0},
             textStyle: {padding: 0, minWidth: 120},
-            text: function(elementType) {
-                if (!newElementsCounter[elementType.name]) {
-                    newElementsCounter[elementType.name] = 1;
-                }
-                return elementType.displayName.toUpperCase() + (newElementsCounter[elementType.name]++);
-            },
+            text: textGenerator,
             fbdModel: true
         };
     };
     var types = {
-        fbd_and: createModelType('AND', 'I1,I2', 'Q'),
-        fbd_or: createModelType('OR', 'I1,I2', 'Q'),
-        fbd_not: createModelType('NOT', 'I', 'Q'),
-        fbd_xor: createModelType('XOR', 'I1,I2', 'Q'),
-        fbd_xnor: createModelType('XNOR', 'I1,I2', 'Q'),
-        fbd_eq: createModelType('EQ', 'I1,I2', 'Q'),
-        fbd_ne: createModelType('NE', 'I1,I2', 'Q'),
-        fbd_gt: createModelType('GT', 'I1,I2', 'Q'),
-        fbd_ge: createModelType('GE', 'I1,I2', 'Q'),
-        fbd_lt: createModelType('LT', 'I1,I2', 'Q'),
-        fbd_le: createModelType('LE', 'I1,I2', 'Q'),
-        fbd_add: createModelType('ADD', 'I1,I2', 'Q'),
-        fbd_sub: createModelType('SUB', 'I1,I2', 'Q'),
-        fbd_mul: createModelType('MUL', 'I1,I2', 'Q'),
-        fbd_div: createModelType('DIV', 'I1,I2', 'Q'),
-        fbd_mod: createModelType('MOD', 'I1,I2', 'Q'),
-        fbd_abs: createModelType('ABS', 'I', 'Q'),
-        fbd_exp: createModelType('EXP', 'I', 'Q'),
-        fbd_expt: createModelType('EXPT', 'I', 'Q'),
-        fbd_sqrt: createModelType('SQRT', 'I1,I2', 'Q'),
-        fbd_ln: createModelType('LN', 'I', 'Q'),
-        fbd_log: createModelType('LOG', 'I', 'Q'),
-        fbd_max: createModelType('MAX', 'I1,I2', 'Q'),
-        fbd_min: createModelType('MIN', 'I1,I2', 'Q'),
-        fbd_limin: createModelType('LIMIN', 'MI,IN,MX', 'Q'),
-        fbd_sel: createModelType('SEL', 'G,IN0,IN1', 'Q'),
-        fbd_ton: createModelType('TON', 'IN,PT', 'Q,ET'),
-        fbd_tof: createModelType('TOF', 'IN,PT', 'Q,ET'),
-        fbd_tp: createModelType('TP', 'IN,PT', 'Q,ET'),
-        fbd_rs: createModelType('RS', 'SET,RESET', 'Q'),
-        fbd_sr: createModelType('SR', 'SET,RESET', 'Q'),
-        fbd_rtrig: createModelType('R_TRIG', 'CLK', 'Q'),
-        fbd_ftrig: createModelType('F_TRIG', 'CLK', 'Q'),
-        fbd_ctu: createModelType('CTU', 'CU,RESET,PV', 'Q,CV'),
-        fbd_ctd: createModelType('CTD', 'CU,RESET,PV', 'Q,CV'),
-        fbd_ctud: createModelType('CTUD', 'CU,CD,RESET,LOAD,PV', 'QU,QD,CV'),
-        fbd_in: {
-            displayName: 'DATA_IN',
+        FBD_AND: createModelType('与', 'I*', 'Q'),
+        FBD_OR: createModelType('或', 'I*', 'Q'),
+        FBD_NOT: createModelType('非', 'I', 'Q'),
+        FBD_SET: createModelType('设置', 'I1,I2', 'Q'),
+        FBD_XOR: createModelType('异或', 'I1,I2', 'Q'),
+        FBD_XNOR: createModelType('同或', 'I1,I2', 'Q'),
+        FBD_EQ: createModelType('等于', 'I1,I2', 'Q'),
+        FBD_NE: createModelType('不等于', 'I1,I2', 'Q'),
+        FBD_GT: createModelType('大于', 'I1,I2', 'Q'),
+        FBD_GE: createModelType('大于等于', 'I1,I2', 'Q'),
+        FBD_LT: createModelType('小于', 'I1,I2', 'Q'),
+        FBD_LE: createModelType('小于等于', 'I1,I2', 'Q'),
+        FBD_ADD: createModelType('加', 'I*', 'Q'),
+        FBD_SUB: createModelType('减', 'I1,I2', 'Q'),
+        FBD_MUL: createModelType('乘', 'I*', 'Q'),
+        FBD_DIV: createModelType('除', 'I1,I2', 'Q'),
+        FBD_MOD: createModelType('求余', 'I1,I2', 'Q'),
+        FBD_ABS: createModelType('绝对值', 'I', 'Q'),
+        FBD_EXP: createModelType('平方', 'I', 'Q'),
+        FBD_EXPT: createModelType('N次方', 'I', 'Q'),
+        FBD_SQRT: createModelType('根号', 'I1,I2', 'Q'),
+        FBD_LN: createModelType('自然对数', 'I', 'Q'),
+        FBD_LOG: createModelType('10对数', 'I', 'Q'),
+        FBD_MAX: createModelType('最大值', 'I*', 'Q'),
+        FBD_MIN: createModelType('最小值', 'I*', 'Q'),
+        FBD_LIMIN: createModelType('限制', 'MI,IN,MX', 'Q'),
+        FBD_SEL: createModelType('选择', 'G,IN0,IN1', 'Q'),
+        FBD_TON: createModelType('上升沿延时', 'IN,PT', 'Q,ET'),
+        FBD_TOF: createModelType('下降沿延时', 'IN,PT', 'Q,ET'),
+        FBD_TP: createModelType('脉冲', 'IN,PT', 'Q,ET'),
+        FBD_RS: createModelType('锁存器RS', 'SET,RESET', 'Q'),
+        FBD_SR: createModelType('锁存器SR', 'SET,RESET', 'Q'),
+        FBD_RTRIG: createModelType('上升沿', 'CLK', 'Q'),
+        FBD_FTRIG: createModelType('下降沿', 'CLK', 'Q'),
+        FBD_CTU: createModelType('上升沿计数', 'CU,RESET,PV', 'Q,CV'),
+        FBD_CTD: createModelType('下降沿计数', 'CU,RESET,PV', 'Q,CV'),
+        FBD_CTUD: createModelType('递增递减计数器', 'CU,CD,RESET,LOAD,PV', 'QU,QD,CV'),
+        FBD_INPUT: {
+            displayName: '输入模块',
             ports: {
                 left: null,
                 top: null,
@@ -148,8 +152,8 @@ if ($.zui.FlowChart) {
                 return elementType.displayName.toUpperCase() + (newElementsCounter[elementType.name]++);
             },
         },
-        fbd_out: {
-            displayName: 'DATA_OUT',
+        FBD_OUTPUT: {
+            displayName: '输出模块',
             ports: {
                 right: null,
                 top: null,
@@ -194,6 +198,7 @@ if ($.zui.FlowChart) {
             '#{id} .flowchart-fbd-model .flowchart-text {top: -20px}',
             '#{id} .flowchart-fbd-model .flowchart-port-left:before {content: attr(data-name); position: absolute; display: block; left: 100%; padding-left: 5px}',
             '#{id} .flowchart-fbd-model .flowchart-port-right:before {content: attr(data-name); position: absolute; display: block; right: 100%; padding-right: 5px}',
+            '#{id} .flowchart-fbd-model .flowchart-port-resthoder.flowchart-port-left:before, #{id} .flowchart-fbd-model .flowchart-port-resthoder.flowchart-port-right:before {opacity: .5}',
         ].join('\n')
     });
 }

docs/examples/flowchart.fsm.js

 if ($.zui.FlowChart) {
+    var textGenerator = function(elementType) {
+        if (!elementType.newElementsCounter) {
+            elementType.newElementsCounter = 1;
+        }
+        return elementType.name.substring(4) + '_' + (elementType.newElementsCounter++);
+    };
     var types = {
-        fsm_start: {
+        FSM_InitState: {
             width: 32,
             height: 32,
             type: 'dot',
-            displayName: 'FSM 开始',
-            text: '开始',
+            displayName: 'FSM初始状态',
+            text: textGenerator,
             portLineLength: 1,
             shapeStyle: {background: '#888'}
         },
-        fsm_stop: {
+        FSM_EndState: {
             width: 32,
             height: 32,
             type: 'dot',
             shapeStyle: {background: '#888', boxShadow: 'inset 0 0 0 2px #fff'},
-            text: '结束',
+            text: textGenerator,
             portLineLength: 1,
-            text: '结束',
-            displayName: 'FSM 结束',
-        },
-        fsm_actionConvert: {
-            type: 'relation',
-            lineStyle: 'solid',
-            text: '动作转换',
-            displayName: 'FSM动作转换'
-        },
-        fsm_virtualActionConvert: {
-            type: 'relation',
-            lineStyle: 'dashed',
-            text: '虚拟转换',
-            displayName: 'FSM虚拟转换',
+            displayName: 'FSM结束状态',
         },
-        fsm_simpleState: {
+        FSM_State: {
             type: 'box',
             portLineLength: 1,
-            text: '简单状态',
+            text: textGenerator,
             displayName: 'FSM简单状态'
         },
-        fsm_virtualState: {
+        FSM_VirState: {
             type: 'box',
             portLineLength: 1,
             shapeStyle: {borderStyle: 'dashed'},
-            text: '虚拟状态',
+            text: textGenerator,
             displayName: 'FSM虚拟状态',
         },
-        fsm_actualState: {
-            type: 'box',
-            portLineLength: 1,
-            shapeStyle: {paddingLeft: 30},
-            text: '实际状态',
-            displayName: 'FSM实际状态',
+        // FSM_ConStates: {
+        //     type: 'box',
+        //     portLineLength: 1,
+        //     shapeStyle: {borderStyle: 'dotted'},
+        //     text: textGenerator,
+        //     displayName: 'FSM并发组合状态',
+        // },
+        // FSM_SerStates: {
+        //     type: 'box',
+        //     portLineLength: 1,
+        //     shapeStyle: {borderStyle: 'dotted'},
+        //     text: textGenerator,
+        //     displayName: 'FSM顺序组合状态',
+        // },
+        FSM_Action: {
+            type: 'relation',
+            lineStyle: 'solid',
+            text: textGenerator,
+            displayName: 'FSM动作转换1'
+        },
+        FSM_Action1: {
+            type: 'relation',
+            lineStyle: 'solid',
+            text: textGenerator,
+            displayName: 'FSM动作转换2'
+        },
+        FSM_VirAction: {
+            type: 'relation',
+            lineStyle: 'dashed',
+            text: textGenerator,
+            displayName: 'FSM虚拟转换',
         },
-        fsm_selectState: {
+        FSM_SelectState: {
             type: 'diamond',
             portLineLength: 1,
-            text: '选择状态',
+            text: textGenerator,
             displayName: 'FSM选择状态',
         },
-        fsm_fork: {
+        FSM_ActState: {
+            type: 'box',
+            portLineLength: 1,
+            shapeStyle: {paddingLeft: 30},
+            text: textGenerator,
+            displayName: 'FSM实际状态',
+        },
+
+        FSM_ActionBran: {
             type: 'rectangle',
             portLineLength: 6,
             displayName: 'FSM分叉',
+            text: textGenerator,
             ports: {
                 top: null,
                 left: [{
@@ -126,10 +153,11 @@ if ($.zui.FlowChart) {
                 });
             }
         },
-        fsm_merge: {
+        FSM_ActionComb: {
             type: 'rectangle',
             portLineLength: 6,
             displayName: 'FSM合并',
+            text: textGenerator,
             ports: {
                 top: null,
                 left: [{
@@ -201,7 +229,9 @@ if ($.zui.FlowChart) {
     };
     var defaultOptions = {
         elementTypes: types,
-        quickAddActionType: 'fsm_simpleState'
+        defaultRelationType: 'FSM_Action',
+        defaultActionType: 'FSM_State',
+        quickAddActionType: 'FSM_State'
     };
     $.zui.FlowChart.addPlugin('fsm', {
         defaultOptions: defaultOptions,
@@ -209,7 +239,7 @@ if ($.zui.FlowChart) {
             '.flowchart-contextmenu {min-width: 360px}',
             '.flowchart-contextmenu .col-xs-4 {width: 25%}',
             '#{id} .flowchart-element-fsm_fork, #{id} .flowchart-element-fsm_merge {align-items: flex-start!important;}',
-            '#{id} .flowchart-element-fsm_actualState:before {content: " "; position: absolute; width: 30px; height: 30px; top: 4px; left: 4px; background: #888; border-radius: 50%; border: 1px solid #333}'
+            '#{id} .flowchart-element-FSM_ActState:before {content: " "; position: absolute; width: 30px; height: 30px; top: 4px; left: 4px; background: #888; border-radius: 50%; border: 1px solid #333}'
         ].join('\n')
     });
 }

docs/examples/flowchart.html

@@ -32,6 +32,7 @@
         <div class="pull-left margin-bottom: 10px">
             <button type="button" class="btn btn-danger" id="resetDataBtn">清空</button>
             <button type="button" class="btn btn-primary" id="exportDataBtn">导出</button>
+            <button type="button" class="btn btn-primary" id="exportTypeBtn">导出类型定义</button>
         </div>
     </div>
     <div class="row">
@@ -39,7 +40,7 @@
             <div class="panel">
                 <div class="panel-heading">变量<small class="text-muted">(可拖放)</small></div>
                 <div class="panel-body" id="variables">
-                    <button type="button" class="btn btn-sm" data-var="var1Name" data-value="var1Value" draggable="true" >变量1</button>
+                    <button type="button" class="btn btn-sm" data-id="test" data-var="var1Name" data-value="var1Value" draggable="true" >变量1</button>
                     <button type="button" class="btn btn-sm" data-var="var2Name" data-value="var2Value" draggable="true" >变量2</button>
                     <button type="button" class="btn btn-sm" data-var="var3Name" data-value="var3Value" draggable="true" >变量3</button>
                     <button type="button" class="btn btn-sm" data-var="var4Name" data-value="var4Value" draggable="true" >变量4</button>
@@ -224,13 +225,15 @@
                 }
             };
             $('#flowchart').flowChart({
-                plugins: 'fsm,fbd,var',
+                plugins: 'fbd,fsm,var',
+                initialTypes: false,
                 readonly: false,
                 showRelationTextOnSide: false,
                 adsorptionGrid: 10,
                 data: originData,
                 relationLineGap: 3,
                 portLineLength: 1,
+                quickAdd: false,
                 addFromDrop: '#toolbar',
                 addVariablesFromDrop: '#variables',
                 showContextMenu: function(element, items, event) {
@@ -280,19 +283,29 @@
                 flowchart.resetData();
             });
             $('#exportDataBtn').on('click', function() {
+                var data = flowchart.exportData();
+                console.log('FlowChart > Export data', data);
                 bootbox.dialog({
                     title: '流程图数据导出',
-                    message: '<pre><code>' + JSON.stringify(flowchart.exportData(), null, 4) + '</code></pre>'
+                    message: '<textarea class="form-control code" rows="20" readonly>' + JSON.stringify(data, null, 4) + '</textarea>'
+                });
+            });
+            $('#exportTypeBtn').on('click', function() {
+                var types = flowchart.exportTypes();
+                console.log('FlowChart > Export types', types);
+                bootbox.dialog({
+                    title: '流程图类型定义导出',
+                    message: '<textarea class="form-control code" rows="20" readonly>' + JSON.stringify(types, null, 4) + '</textarea>'
                 });
             });
             $('#showExampleBtn').on('click', function() {
                 flowchart.resetData(data);
             });
-            var fsmData = [{"position":{"left":20,"top":50},"id":"start","type":"fsm_start","text":"开始"},{"position":{"left":130,"top":50},"id":"state1","type":"fsm_simpleState","text":"简单状态"},{"position":{"left":290,"top":50},"id":"state2","type":"fsm_virtualState","text":"虚拟状态"},{"position":{"left":270,"top":200},"id":"state3","type":"fsm_actualState","text":"实际状态"},{"position":{"left":430,"top":200},"id":"state4","type":"fsm_selectState","text":"选择状态"},{"position":{"left":890,"top":120},"id":"stop","type":"fsm_stop","text":"结束"},{"position":{"left":460,"top":40},"id":"fhznztkw9a","type":"fsm_fork","text":"分叉"},{"position":{"left":560,"top":10},"id":"fhzo014wp4","type":"fsm_simpleState","text":"简单状态"},{"position":{"left":560,"top":90},"id":"fhzo02dejt","type":"fsm_simpleState","text":"简单状态"},{"position":{"left":740,"top":40},"id":"fhzo0gw250","type":"fsm_merge","text":"合并"},{"hideArrow":true,"from":"start","to":"state1","id":"fhznzi9quh","type":"fsm_actionConvert","text":"动作转换"},{"hideArrow":true,"from":"state1","to":"state2","id":"fhznzi9qui","type":"fsm_virtualActionConvert","text":"虚拟转换"},{"hideArrow":true,"from":"state1","to":"state3","id":"fhznzi9quj","type":"fsm_actionConvert","text":""},{"hideArrow":true,"from":"state3","to":"state4","id":"fhznzi9rmc","type":"fsm_actionConvert","text":""},{"hideArrow":true,"from":"state4","to":"stop","id":"fhznzi9rmd","type":"fsm_actionConvert","text":""},{"hideArrow":true,"from":"state2","to":"fhznztkw9a","fromPort":"right1","toPort":"in","id":"fhznzvsmmn","type":"relation","text":""},{"hideArrow":true,"from":"fhznztkw9a","to":"fhzo014wp4","fromPort":"out1","toPort":"left1","id":"fhzo0cii2i","type":"relation","text":""},{"hideArrow":true,"from":"fhznztkw9a","to":"fhzo02dejt","fromPort":"out2","toPort":"left1","id":"fhzo0dtwuz","type":"relation","text":""},{"hideArrow":true,"from":"fhzo014wp4","to":"fhzo0gw250","fromPort":"right1","toPort":"in1","id":"fhzo0i57wt","type":"relation","text":""},{"hideArrow":true,"from":"fhzo02dejt","to":"fhzo0gw250","fromPort":"right1","toPort":"in2","id":"fhzo0j7092","type":"relation","text":""},{"hideArrow":true,"from":"fhzo0gw250","to":"stop","fromPort":"out","toPort":"left1","id":"fhzo0kfv7z","type":"relation","text":""}];
+            var fsmData = [{"position":{"left":20,"top":50},"id":"start","type":"FSM_InitState","text":"开始"},{"position":{"left":130,"top":50},"id":"state1","type":"FSM_State","text":"简单状态"},{"position":{"left":290,"top":50},"id":"state2","type":"FSM_VirState","text":"虚拟状态"},{"position":{"left":270,"top":200},"id":"state3","type":"FSM_ActState","text":"实际状态"},{"position":{"left":430,"top":200},"id":"state4","type":"FSM_SelectState","text":"选择状态"},{"position":{"left":890,"top":120},"id":"stop","type":"FSM_EndState","text":"结束"},{"position":{"left":460,"top":40},"id":"fhznztkw9a","type":"FSM_ActionBran","text":"分叉"},{"position":{"left":560,"top":10},"id":"fhzo014wp4","type":"FSM_State","text":"简单状态"},{"position":{"left":560,"top":90},"id":"fhzo02dejt","type":"FSM_State","text":"简单状态"},{"position":{"left":740,"top":40},"id":"fhzo0gw250","type":"FSM_ActionComb","text":"合并"},{"hideArrow":true,"from":"start","to":"state1","id":"fhznzi9quh","type":"FSM_Action1","text":"动作转换"},{"hideArrow":true,"from":"state1","to":"state2","id":"fhznzi9qui","type":"FSM_VirAction","text":"虚拟转换"},{"hideArrow":true,"from":"state1","to":"state3","id":"fhznzi9quj","type":"FSM_Action1","text":""},{"hideArrow":true,"from":"state3","to":"state4","id":"fhznzi9rmc","type":"FSM_Action1","text":""},{"hideArrow":true,"from":"state4","to":"stop","id":"fhznzi9rmd","type":"FSM_Action1","text":""},{"hideArrow":true,"from":"state2","to":"fhznztkw9a","fromPort":"right1","toPort":"in","id":"fhznzvsmmn","type":"relation","text":""},{"hideArrow":true,"from":"fhznztkw9a","to":"fhzo014wp4","fromPort":"out1","toPort":"left1","id":"fhzo0cii2i","type":"relation","text":""},{"hideArrow":true,"from":"fhznztkw9a","to":"fhzo02dejt","fromPort":"out2","toPort":"left1","id":"fhzo0dtwuz","type":"relation","text":""},{"hideArrow":true,"from":"fhzo014wp4","to":"fhzo0gw250","fromPort":"right1","toPort":"in1","id":"fhzo0i57wt","type":"relation","text":""},{"hideArrow":true,"from":"fhzo02dejt","to":"fhzo0gw250","fromPort":"right1","toPort":"in2","id":"fhzo0j7092","type":"relation","text":""},{"hideArrow":true,"from":"fhzo0gw250","to":"stop","fromPort":"out","toPort":"left1","id":"fhzo0kfv7z","type":"relation","text":""}];
             $('#showFsmExampleBtn').on('click', function() {
                 flowchart.resetData(fsmData);
             }).click();
-            var fbdData = [{"position":{"left":40,"top":60},"id":"fhzelyvq88","type":"fbd_in","text":"DATA_IN1"},{"position":{"left":40,"top":110},"id":"fhzem0258h","type":"fbd_in","text":"DATA_IN2"},{"position":{"left":40,"top":160},"id":"fhzem0sm62","type":"fbd_in","text":"DATA_IN3"},{"position":{"left":260,"top":60},"id":"fhzem7c1h7","type":"fbd_add","text":"ADD1"},{"position":{"left":260,"top":160},"id":"fhzemixzrz","type":"fbd_ftrig","text":"F_TRIG1"},{"position":{"left":460,"top":100},"id":"fhzemr4jy2","type":"fbd_mul","text":"MUL1"},{"position":{"left":40,"top":210},"id":"fhzen7iupy","type":"fbd_in","text":"DATA_IN4"},{"position":{"left":40,"top":320},"id":"fhzen973pb","type":"fbd_in","text":"DATA_IN5"},{"position":{"left":40,"top":370},"id":"fhzenaevbk","type":"fbd_in","text":"DATA_IN6"},{"position":{"left":-10,"top":510},"id":"fhzencfdnt","type":"fbd_ctd","text":"CTD1"},{"position":{"left":260,"top":260},"id":"fhzend4wn6","type":"fbd_ctd","text":"CTD2"},{"position":{"left":460,"top":260},"id":"fhzenjwmke","type":"fbd_mod","text":"MOD1"},{"position":{"left":650,"top":120},"id":"fhzenpheyp","type":"fbd_out","text":"DATA_OUT2"},{"position":{"left":650,"top":280},"id":"fhzenssv4b","type":"fbd_out","text":"DATA_OUT3"},{"position":{"left":830,"top":160},"id":"fhzeojqg7q","type":"fbd_ctud","text":"CTUD1"},{"hideArrow":true,"from":"fhzelyvq88","to":"fhzem7c1h7","fromPort":"in","toPort":"I1","id":"fhzem8rhbw","type":"relation","text":""},{"hideArrow":true,"from":"fhzem0258h","to":"fhzem7c1h7","fromPort":"in","toPort":"I2","id":"fhzem9zc19","type":"relation","text":""},{"hideArrow":true,"from":"fhzem0sm62","to":"fhzemixzrz","fromPort":"in","toPort":"CLK","id":"fhzemlpc60","type":"relation","text":""},{"hideArrow":true,"from":"fhzem7c1h7","to":"fhzemr4jy2","fromPort":"Q","toPort":"I1","id":"fhzemsq25v","type":"relation","text":""},{"hideArrow":true,"from":"fhzemixzrz","to":"fhzemr4jy2","fromPort":"Q","toPort":"I2","id":"fhzemtqvs4","type":"relation","text":""},{"hideArrow":true,"from":"fhzen7iupy","to":"fhzend4wn6","fromPort":"in","toPort":"CU","id":"fhzenf6j3v","type":"relation","text":""},{"hideArrow":true,"from":"fhzen973pb","to":"fhzend4wn6","fromPort":"in","toPort":"RESET","id":"fhzengjpxw","type":"relation","text":""},{"hideArrow":true,"from":"fhzenaevbk","to":"fhzend4wn6","fromPort":"in","toPort":"PV","id":"fhzenhtv7h","type":"relation","text":""},{"hideArrow":true,"from":"fhzend4wn6","to":"fhzenjwmke","fromPort":"Q","toPort":"I1","id":"fhzenllovb","type":"relation","text":""},{"hideArrow":true,"from":"fhzend4wn6","to":"fhzenjwmke","fromPort":"CV","toPort":"I2","id":"fhzenme05s","type":"relation","text":""},{"hideArrow":true,"from":"fhzemr4jy2","to":"fhzenpheyp","fromPort":"Q","toPort":"out","id":"fhzenqkykq","type":"relation","text":""},{"hideArrow":true,"from":"fhzenjwmke","to":"fhzenssv4b","fromPort":"Q","toPort":"out","id":"fhzenuqmp0","type":"relation","text":""}];
+            var fbdData = [{"position":{"left":40,"top":60},"id":"fhzelyvq88","type":"FBD_INPUT","text":"DATA_IN1"},{"position":{"left":40,"top":110},"id":"fhzem0258h","type":"FBD_INPUT","text":"DATA_IN2"},{"position":{"left":40,"top":160},"id":"fhzem0sm62","type":"FBD_INPUT","text":"DATA_IN3"},{"position":{"left":260,"top":60},"id":"fhzem7c1h7","type":"FBD_ADD","text":"ADD1"},{"position":{"left":260,"top":160},"id":"fhzemixzrz","type":"FBD_FTRIG","text":"F_TRIG1"},{"position":{"left":460,"top":100},"id":"fhzemr4jy2","type":"FBD_MUL","text":"MUL1"},{"position":{"left":40,"top":210},"id":"fhzen7iupy","type":"FBD_INPUT","text":"DATA_IN4"},{"position":{"left":40,"top":320},"id":"fhzen973pb","type":"FBD_INPUT","text":"DATA_IN5"},{"position":{"left":40,"top":370},"id":"fhzenaevbk","type":"FBD_INPUT","text":"DATA_IN6"},{"position":{"left":-10,"top":510},"id":"fhzencfdnt","type":"FBD_CTD","text":"CTD1"},{"position":{"left":260,"top":260},"id":"fhzend4wn6","type":"FBD_CTD","text":"CTD2"},{"position":{"left":460,"top":260},"id":"fhzenjwmke","type":"FBD_MOD","text":"MOD1"},{"position":{"left":650,"top":120},"id":"fhzenpheyp","type":"FBD_OUTPUT","text":"DATA_OUT2"},{"position":{"left":650,"top":280},"id":"fhzenssv4b","type":"FBD_OUTPUT","text":"DATA_OUT3"},{"position":{"left":830,"top":160},"id":"fhzeojqg7q","type":"FBD_CTUD","text":"CTUD1"},{"hideArrow":true,"from":"fhzelyvq88","to":"fhzem7c1h7","fromPort":"in","toPort":"I1","id":"fhzem8rhbw","type":"relation","text":""},{"hideArrow":true,"from":"fhzem0258h","to":"fhzem7c1h7","fromPort":"in","toPort":"I2","id":"fhzem9zc19","type":"relation","text":""},{"hideArrow":true,"from":"fhzem0sm62","to":"fhzemixzrz","fromPort":"in","toPort":"CLK","id":"fhzemlpc60","type":"relation","text":""},{"hideArrow":true,"from":"fhzem7c1h7","to":"fhzemr4jy2","fromPort":"Q","toPort":"I1","id":"fhzemsq25v","type":"relation","text":""},{"hideArrow":true,"from":"fhzemixzrz","to":"fhzemr4jy2","fromPort":"Q","toPort":"I2","id":"fhzemtqvs4","type":"relation","text":""},{"hideArrow":true,"from":"fhzen7iupy","to":"fhzend4wn6","fromPort":"in","toPort":"CU","id":"fhzenf6j3v","type":"relation","text":""},{"hideArrow":true,"from":"fhzen973pb","to":"fhzend4wn6","fromPort":"in","toPort":"RESET","id":"fhzengjpxw","type":"relation","text":""},{"hideArrow":true,"from":"fhzenaevbk","to":"fhzend4wn6","fromPort":"in","toPort":"PV","id":"fhzenhtv7h","type":"relation","text":""},{"hideArrow":true,"from":"fhzend4wn6","to":"fhzenjwmke","fromPort":"Q","toPort":"I1","id":"fhzenllovb","type":"relation","text":""},{"hideArrow":true,"from":"fhzend4wn6","to":"fhzenjwmke","fromPort":"CV","toPort":"I2","id":"fhzenme05s","type":"relation","text":""},{"hideArrow":true,"from":"fhzemr4jy2","to":"fhzenpheyp","fromPort":"Q","toPort":"out","id":"fhzenqkykq","type":"relation","text":""},{"hideArrow":true,"from":"fhzenjwmke","to":"fhzenssv4b","fromPort":"Q","toPort":"out","id":"fhzenuqmp0","type":"relation","text":""}];
             $('#showFbdExampleBtn').on('click', function() {
                 flowchart.resetData(fbdData);
             });

docs/examples/flowchart.var.js

@@ -40,24 +40,51 @@ if ($.zui.FlowChart) {
         if (this.flowChart.callCallback('beforeSetVariable', [newVars, this]) === false) {
             return;
         }
-        this.setData('vars', $.extend(vars, newVars));
+        this.setData('vars', $.extend(true, vars, newVars));
         this.flowChart.callCallback('afterSetVariable', [newVars, this]);
     };
 
+    $.zui.FlowChartElement.prototype.setVariableObject = function(varName, varObject) {
+        if (typeof varObject !== 'object') {
+            throw new Error('FlowChart: The param "varObject" must be an object like "{value: 123}".');
+        }
+        var varData = {};
+        varData[varName] = varObject;
+        this.setVariable(varData, true);
+    };
+
+    $.zui.FlowChartElement.prototype.removeVariable = function(varName) {
+        var vars = this.getData('vars');
+        if (vars) {
+            delete vars[varName];
+        }
+    };
+
+    $.zui.FlowChart.prototype.checkTypeCanAddVariable = function(typeName, varName, varData) {
+        if (this.typesCanAddVariablesFunc) {
+            return this.typesCanAddVariablesFunc(typeName, varName, varData);
+        } else if (this.typesCanAddVariablesMap) {
+            return this.typesCanAddVariablesMap[typeName];
+        }
+        return false;
+    };
+
     $.zui.FlowChart.addPlugin('var', {
-        plugins: 'fsm',
         defaultOptions: {
             addVariablesFromDrop: true,
-            typesCanAddVariables: 'fsm_simpleState,fsm_virtualState,fsm_actualState,fsm_selectState',
+            typesCanAddVariables: function(type) {
+                var typeLowerCase = type.toLowerCase();
+                return typeLowerCase.indexOf('fsm_') === 0 || typeLowerCase.indexOf('fbd_') === 0;
+            },
             onDrop: function(e) {
                 var that = this;
                 var newVarData = e.originalEvent.dataTransfer.getData('newVar');
                 if (newVarData) {
                     e.preventDefault();
-                    var $target = $(e.target).closest('.flowchart-node');
+                    var $target = $(e.target).closest('.flowchart-element');
                     if ($target.length) {
                         var element = that.getElement($target.data('id'));
-                        if (element && that.typesCanAddVariablesMap[element.type]) {
+                        if (element) {
                             try {
                                 newVarData = $.parseJSON(newVarData);
                             } catch (e) {
@@ -66,14 +93,16 @@ if ($.zui.FlowChart) {
                             if (newVarData && typeof newVarData === 'object' && newVarData.var) {
                                 var varName = newVarData.var;
                                 delete newVarData.var;
-                                var varData = {};
-                                varData[varName] = newVarData;
-                                element.setVariable(varData, true);
+                                if (that.checkTypeCanAddVariable(element.type, varName, newVarData)) {
+                                    element.setVariableObject(varName, newVarData);
+                                } else {
+                                    console.warn('FlowChart: Cannot add variable to the target element.', element);
+                                }
                             } else {
                                 console.warn('FlowChart: Data format error in  "newVarData" data from drop event\'s dataTransfer.', newVarData);
                             }
                         } else {
-                            console.warn('FlowChart: Cannot add variable to the target element.', element);
+                            console.warn('FlowChart: Cannot add variable to the target element not in flowchart.', element);
                         }
                     }
                     return false;
@@ -81,23 +110,30 @@ if ($.zui.FlowChart) {
             }
         },
         style: [
-            '#{id}.flowchart-drag-var-start.flowchart-drag-over .flowchart-can-add-var {box-shadow: 0 0 4px 1px {activeColor}!important}'
+            '#{id}.flowchart-drag-var-start.flowchart-drag-over .flowchart-can-add-var.flowchart-node {box-shadow: 0 0 4px 1px {activeColor}!important}'
         ].join('\n'),
         onRenderNode: function($node, node) {
-            $node.toggleClass('flowchart-can-add-var', !!this.typesCanAddVariablesMap[node.type]);
+            $node.toggleClass('flowchart-can-add-var', !!this.checkTypeCanAddVariable(node.type));
+        },
+        onRenderRelation: function($relation, relation) {
+            $relation.toggleClass('flowchart-can-add-var', !!this.checkTypeCanAddVariable(relation.type));
         },
         onCreate: function() {
             var that = this;
             var options = that.options;
-            var typesCanAddVariablesMap = {};
             var typesCanAddVariables = options.typesCanAddVariables;
             if (typeof typesCanAddVariables === 'string') {
                 typesCanAddVariables = typesCanAddVariables.split(',');
             }
+            if ($.isArray(typesCanAddVariables)) {
+                var typesCanAddVariablesMap = {};
                 typesCanAddVariables.forEach(function(type) {
                     typesCanAddVariablesMap[$.trim(type)] = 1;
                 });
                 that.typesCanAddVariablesMap = typesCanAddVariablesMap;
+            } else if (typeof typesCanAddVariables === 'function') {
+                that.typesCanAddVariablesFunc = typesCanAddVariables;
+            }
 
             if (options.addVariablesFromDrop) {
                 if (typeof options.addVariablesFromDrop === 'string') {