* 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') {

src/js/flowchart.js

@@ -560,13 +560,13 @@ if (!Array.prototype.map) {
     };
 
     var supportElementTypes = {
-        relation: true,
+        relation: {type: 'relation'},
         action: {type: 'rectangle'},
         start: {type: 'box'},
         stop: {type: 'box'},
         judge: {type: 'diamond'},
         result: {type: 'circle'},
-        connection: true,
+        connection: {type: 'connection'},
         point: {type: 'dot'},
     };
 
@@ -578,7 +578,7 @@ if (!Array.prototype.map) {
      */
     var FlowChartElementPort = function(portData, side, index) {
         if (typeof portData === 'number') {
-            portData = {name: '', space: portData};
+            portData = {space: portData};
         } else if (typeof portData === 'string') {
             portData = {name: portData};
         }
@@ -614,6 +614,9 @@ if (!Array.prototype.map) {
          */
         this.direction = portData.direction === 'out' ? 'out' : portData.direction === 'in' ? 'in' : 'in-out';
 
+        /**
+         * @type {number}
+         */
         this.space = this.space === undefined ? 1 : this.space;
 
         /**
@@ -651,15 +654,89 @@ if (!Array.prototype.map) {
          */
         this.index = index;
 
+        /**
+         * @type {boolean|number}
+         */
+        this.rest;
+
+        /**
+         * @type {number}
+         */
+        this.maxLinkCount = this.rest ? 1 : this.maxLinkCount ? Math.max(1, this.maxLinkCount) : 1;
+
         /**
          * @type {boolean}
          */
-        this.free = this.free !== false;
+        this.free = !this.rest && this.free !== false;
 
         /**
          * @type {number}
          */
-        this.maxLinkCount = this.maxLinkCount ? Math.max(1, this.maxLinkCount) : 1;
+        this.restMinIndex = this.restMinIndex === undefined ? 1 : this.restMinIndex;
+    };
+
+    FlowChartElementPort.prototype.getMaxRestCount = function() {
+        if (this.rest === true) {
+            return Number.MAX_SAFE_INTEGER;
+        }
+        if (this.rest && typeof this.rest === 'number') {
+            return this.rest;
+        }
+        return 0;
+    };
+
+    FlowChartElementPort.prototype.isMatchRestName = function(name) {
+        if (this.rest) {
+            if (!this._restNameRegex) {
+                this._restNameRegex = new RegExp('^' + this.name.replace('*', '(\\d+)') + '$');
+            }
+            return this._restNameRegex.test(name);
+        }
+        return false;
+    };
+
+    FlowChartElementPort.prototype.getRestPortAt = function(index, restMinIndex) {
+        if (this.rest) {
+            if (restMinIndex === undefined) {
+                restMinIndex = this.restMinIndex;
+            }
+            var portName = this.name.replace('*', index + restMinIndex);
+            return this.getRestPortByName(portName);
+        }
+        return null;
+    };
+
+    FlowChartElementPort.prototype.getRestPortByName = function(portName) {
+        if (this.isMatchRestName(portName)) {
+            if (!this._restPorts) {
+                this._restPorts = {};
+            }
+            var port = this._restPorts[portName];
+            if (port) {
+                return port;
+            }
+
+            var portData = this.exportPort();
+            portData.name = portName;
+            portData.rest = false;
+            portData._restPort = true;
+            portData.maxLinkCount = 1;
+            port = new FlowChartElementPort(portData);
+            this._restPorts[portName] = port;
+            return port;
+        }
+        return null;
+    };
+
+    FlowChartElementPort.prototype.exportPort = function() {
+        var port = {};
+        var that = this;
+        $.each(that, function(propName) {
+            if (propName[0] !== '_') {
+                port[propName] = that[propName];
+            }
+        });
+        return port;
     };
 
     /**
@@ -671,7 +748,7 @@ if (!Array.prototype.map) {
         if (!initData) {
             return null;
         }
-        var map = {$all: {}, $free: [], $list: []};
+        var map = {$all: {}, $free: [], $list: [], $rest: []};
         var hasPort;
         $.each(SIDES, function(side) {
             var portsData = initData[side];
@@ -695,6 +772,9 @@ if (!Array.prototype.map) {
                         if (port.free) {
                             map.$free.push(port);
                         }
+                        if (port.rest) {
+                            map.$rest.push(port);
+                        }
                     }
                     return port;
                 });
@@ -998,11 +1078,13 @@ if (!Array.prototype.map) {
         if (typeof newType === 'string') {
             newType = that.flowChart.types[newType];
         }
+        if (newType) {
             that.type = newType.name;
             that.basicType = newType.type;
             that.isRelation = newType.isRelation;
             that.isNode = newType.isNode;
             that.elementType = newType;
+        }
     };
 
     /**
@@ -1106,12 +1188,12 @@ if (!Array.prototype.map) {
             } else {
                 var fromPort, toPort;
                 if (that.fromPort) {
-                    fromPort = fromNode.elementType.getPortByName(that.fromPort);
+                    fromPort = fromNode.getPortByName(that.fromPort);
                 }
                 if (that.toPort) {
-                    toPort = toNode.elementType.getPortByName(that.toPort);
+                    toPort = toNode.getPortByName(that.toPort);
                 }
-                if (!that.fromPort || !that.toPort) {
+                if (that.flowChart.options.allowFreePorts && !that.fromPort || !that.toPort) {
                     var fromBounds = fromNode.getBounds();
                     var toBounds = toNode.getBounds();
                     var centerPoint = {
@@ -1137,7 +1219,7 @@ if (!Array.prototype.map) {
                         }
 
                         if (minPortName) {
-                            return node.elementType.getPortByName(minPortName);
+                            return node.getPortByName(minPortName);
                         }
                     };
 
@@ -1247,7 +1329,7 @@ if (!Array.prototype.map) {
     };
 
     /**
-     *
+     * Get actual ports, if side set then return port at given side
      * @param {string} [side]
      */
     FlowChartElement.prototype.getPorts = function(side) {
@@ -1260,11 +1342,16 @@ if (!Array.prototype.map) {
         return this.elementType.ports.$list;
     };
 
+    /**
+     * Get actual port by port name
+     * @return {FlowChartElementPort}
+     */
     FlowChartElement.prototype.getPortByName = function(name) {
         if (this.isRelation) {
             return null;
         }
-        return this.elementType.ports.$all[name];
+        return this.elementType.getPortByName(name, true);
+
     };
 
     FlowChartElement.prototype.isActive = function() {
@@ -1370,6 +1457,7 @@ if (!Array.prototype.map) {
         var portsInfo        = that.getPortsInfoOfRelation();
         var $fromPort        = fromNode.$get('.flowchart-port[data-name="' + portsInfo.fromPort.name + '"]');
         var $toPort          = toNode.$get('.flowchart-port[data-name="' + portsInfo.toPort.name + '"]');
+
         var fromPortPos      = flowChart.getPositionOf($fromPort);
         var toPortPos        = flowChart.getPositionOf($toPort);
         var fromCenterOffset = $fromPort.data('centerOffset');
@@ -1436,6 +1524,51 @@ if (!Array.prototype.map) {
         return (text === undefined || text === null) ? '' : String(text);
     };
 
+    /**
+     * Get rest ports
+     */
+    FlowChartElement.prototype.getRestPorts = function(originPort, appendEmptyPort) {
+        if (originPort.rest) {
+            if (appendEmptyPort === undefined) {
+                appendEmptyPort = true;
+            }
+            var ports = this.getRelationOfRestPort(originPort);
+            if (appendEmptyPort) {
+                var port = originPort.getRestPortAt(ports.length);
+                port._restHolder = true;
+                ports.push(port);
+            }
+            return ports;
+        }
+        return [];
+    };
+
+    FlowChartElement.prototype.getRelationOfRestPort = function(originPort) {
+        var that = this;
+        var ports = [];
+        if (that.fromRels && that.fromRels.length) {
+            that.fromRels.forEach(function(rel) {
+                if (rel.fromPort && originPort.isMatchRestName(rel.fromPort)) {
+                    var port = originPort.getRestPortAt(ports.length);
+                    port._restHolder = false;
+                    rel.fromPort = port.name;
+                    ports.push(port);
+                }
+            });
+        }
+        if (that.toRels && that.toRels.length) {
+            that.toRels.forEach(function(rel) {
+                if (rel.toPort && originPort.isMatchRestName(rel.toPort)) {
+                    var port = originPort.getRestPortAt(ports.length);
+                    port._restHolder = false;
+                    rel.toPort = port.name;
+                    ports.push(port);
+                }
+            });
+        }
+        return ports;
+    };
+
     /**
      * Render ports
      */
@@ -1462,13 +1595,7 @@ if (!Array.prototype.map) {
         that.$ports = $ports;
         var sideSizes = {left: 0, right: 0, top: 0, bottom: 0};
         var portSize = options.portSpaceSize || 20;
-        $.each(sideSizes, function(side) {
-            var $side = $ports.find('.flowchart-ports-' + side).empty();
-            var sidePorts = ports[side];
-            if (!sidePorts || !sidePorts.length) {
-                return;
-            }
-            sidePorts.forEach(function(port) {
+        var renderSidePort = function($side, side, port) {
             var spaceSize = Math.floor(port.space * portSize);
             var spaceBegin = Math.floor(port.spaceBegin * portSize);
             var spaceEnd = Math.floor(port.spaceEnd * portSize);
@@ -1531,7 +1658,20 @@ if (!Array.prototype.map) {
                 $('<div class="flowchart-port-line" style="position:absolute"></div>').css(portLineStyle).appendTo($port);
             }
             $port.addClass('flowchart-port-' + side).data('centerOffset', portCenterOffset).toggleClass('flowchart-port-free', port.free).append($('<div class="flowchart-port-dot" style="position:absolute"></div>').css(portDotStyle));
+            $port.toggleClass('flowchart-port-resthoder', !!port._restHolder);
             $side.append($port);
+        };
+        $.each(sideSizes, function(side) {
+            var $side = $ports.find('.flowchart-ports-' + side).empty();
+            var sidePorts = ports[side];
+            if (!sidePorts || !sidePorts.length) {
+                return;
+            }
+            sidePorts.forEach(function(port) {
+                if (port.rest) {
+                    return that.getRestPorts(port).forEach(renderSidePort.bind(null, $side, side));
+                }
+                renderSidePort($side, side, port);
             });
             $side.css(side === 'left' || side === 'right' ? 'margin-top' : 'margin-left', 0 - Math.floor(sideSizes[side] / 2));
         });
@@ -1667,15 +1807,6 @@ if (!Array.prototype.map) {
         if (!skipLayout) {
             that.layoutNode();
         }
-
-        if (options.relationLineGap) {
-            that.sideRels = {
-                top:    [],
-                right:  [],
-                bottom: [],
-                left:   [],
-            };
-        }
     };
 
     /**
@@ -1936,9 +2067,9 @@ if (!Array.prototype.map) {
         this.edit;
 
         /**
-         * @type {boolean}
+         * @type {string}
          */
-        this.quickAdd;
+        this.desc;
 
         /**
          * @type {{left: FlowChartElementPort[], right: FlowChartElementPort[], top: FlowChartElementPort[], bottom: FlowChartElementPort[]}}
@@ -1946,11 +2077,22 @@ if (!Array.prototype.map) {
         this.ports = FlowChartElementPort.createPortsMap(this.ports);
     };
 
-    FlowChartElementType.prototype.getPortByName = function(name) {
+    FlowChartElementType.prototype.getPortByName = function(name, tryReturnRestPort) {
         var that = this;
         var ports = that.ports;
         if (ports) {
-            return ports.$all[name];
+            var port = ports.$all[name];
+            if (port) {
+                return port;
+            }
+            if (ports.$rest.length) {
+                for (var i = 0; i < ports.$rest.length; ++i) {
+                    var port = ports.$rest[i];
+                    if (port.isMatchRestName(name)) {
+                        return tryReturnRestPort ? port.getRestPortByName(name) : port;
+                    }
+                }
+            }
         }
         return null;
     };
@@ -1981,6 +2123,46 @@ if (!Array.prototype.map) {
         return element;
     };
 
+    FlowChartElementType.prototype.exportType = function(includeEmptyPorts) {
+        var that = this;
+        var type = {
+            name: that.name,
+            shape: that.shape,
+            isRelation: that.isRelation,
+            isNode: that.isNode,
+            displayName: that.displayName,
+            internal: that.internal,
+            type: that.type,
+        };
+        var ports = that.ports;
+        if (ports) {
+            var portsToExport = {};
+            ['left', 'top', 'right', 'bottom'].forEach(function(side) {
+                var sidePorts = ports[side];
+                if (sidePorts && sidePorts.length) {
+                    var sidePOrtsToExport = [];
+                    sidePorts.forEach(function(port) {
+                        if (!port.empty || includeEmptyPorts) {
+                            var portToExport = port.exportPort();
+                            delete portToExport.empty;
+                            delete portToExport.side;
+                            delete portToExport.space;
+                            delete portToExport.spaceBegin;
+                            delete portToExport.spaceEnd;
+                            delete portToExport.index;
+                            sidePOrtsToExport.push(portToExport);
+                        }
+                    });
+                    if (sidePOrtsToExport.length) {
+                        portsToExport[side] = sidePOrtsToExport;
+                    }
+                }
+            });
+            type.ports = portsToExport;
+        }
+        return type;
+    };
+
     /**
      * The flowChart model class
      * @class
@@ -2051,9 +2233,15 @@ if (!Array.prototype.map) {
         // Init element types 初始化元素类型定义
         var types = {};
         $.each(basicElementTypes, function(name, typeData) {
-            types[name] = new FlowChartElementType([{type: name, internal: name !== 'relation', name: name, displayName: that.lang['type.' + name]}, typeData]);
+            types[name] = new FlowChartElementType([{type: name, internal: true, name: name, displayName: that.lang['type.' + name]}, typeData]);
+        });
+        var initialTypes = {};
+        $.each(supportElementTypes, function(name, typeData) {
+            initialTypes[name] = $.extend(true, {}, typeData, {
+                internal: !options.initialTypes
+            });
         });
-        $.each($.extend(true, {}, supportElementTypes, options.elementTypes), function(name, typeData) {
+        $.each($.extend(true, {}, initialTypes, options.elementTypes), function(name, typeData) {
             if (name === 'relation') return;
             if (types[name]) {
                 var basicType = types[name];
@@ -2087,90 +2275,6 @@ if (!Array.prototype.map) {
             $container.css('height', options.height);
         }
 
-        // Init quick add
-        // if (!options.readonly && options.quickAdd) {
-        //     $canvas.on('mouseenter', '.flowchart-node:not(.flowchart-has-ports)', function() {
-        //         that.showQuickAdd($(this).data('id'));
-        //     }).on('mouseleave', '.flowchart-node', function() {
-        //         if (!that.isPreventDragNode) {
-        //             that.hideQuickAdd();
-        //         }
-        //     }).on('click', '.flowchart-quick-mark', function () {
-        //         var $mark = $(this);
-        //         that.quickAddNode($mark.closest('.flowchart-node').data('id'), $mark.data('direction'));
-        //     });
-
-        //     $canvas.droppable({
-        //         container: '#' + canvasID,
-        //         target: '.flowchart-node',
-        //         selector: '.flowchart-quick-link-mark',
-        //         mouseButton: 'left',
-        //         before: function() {
-        //             that.isPreventDragNode = true;
-        //         },
-        //         start: function(e) {
-        //             var $node = $(e.element).closest('.flowchart-node');
-        //             that.dragSourceNode = $node.data('id');
-        //             that.focusElement(that.dragSourceNode);
-        //             $(e.shadowElement).css('zIndex', 20);
-        //             that.showQuickAdd(that.dragSourceNode, true);
-        //         },
-        //         drag: function(e) {
-        //             var newDragNode = e.isIn && e.target && $(e.target).data('id');
-        //             var lastDragNode = that.lastDragNode;
-        //             if (lastDragNode && (!newDragNode || newDragNode !== lastDragNode)) {
-        //                 that.blurElement(lastDragNode);
-        //                 that.lastDragNode = null;
-        //             }
-        //             if (newDragNode && newDragNode !== lastDragNode) {
-        //                 that.lastDragNode = newDragNode;
-        //                 that.focusElement(newDragNode);
-        //             }
-        //             var $line = $canvas.find('.flowchart-link-line');
-        //             var sourceNode = that.getElement(that.dragSourceNode);
-        //             if (!$line.length) {
-        //                 $line = $('<svg class="flowchart-link-line" style="position: absolute; z-index: 30; top: 0; left: 0; right: 0; bottom: 0"><line x1="50" y1="50" x2="350" y2="350" stroke="' + options.activeColor + '" stroke-width="2" /></svg>').appendTo($canvas);
-        //             }
-        //             var sourcePoint = {
-        //                 left: sourceNode.bounds.right,
-        //                 top: sourceNode.bounds.bottom,
-        //             };
-        //             var targetPoint = {
-        //                 left: e.position.left + 8,
-        //                 top: e.position.top + 8,
-        //             };
-
-        //             $line.show().attr({
-        //                 width: $canvas.width(),
-        //                 height: $canvas.height(),
-        //             }).find('line').attr({
-        //                 x1: sourcePoint.left,
-        //                 y1: sourcePoint.top,
-        //                 x2: targetPoint.left,
-        //                 y2: targetPoint.top,
-        //             });
-        //         },
-        //         drop: function(e) {
-        //             var toNode = e.isIn && e.target && $(e.target).data('id');
-        //             that.addRelation(that.dragSourceNode, toNode);
-        //         },
-        //         always: function(e) {
-        //             that.isPreventDragNode = false;
-        //             if (that.dragSourceNode) {
-        //                 that.blurElement(that.dragSourceNode);
-        //                 that.dragSourceNode = null;
-        //             }
-
-        //             if (that.lastDragNode) {
-        //                 that.blurElement(that.lastDragNode);
-        //                 that.lastDragNode = null;
-        //             }
-        //             $canvas.find('.flowchart-link-line').hide();
-        //             that.hideQuickAdd();
-        //         }
-        //     });
-        // }
-
         // Init draggable event
         that.draggableEnable = !!$.fn.draggable;
         if (that.draggableEnable) {
@@ -2273,7 +2377,7 @@ if (!Array.prototype.map) {
                         $targetPort && $targetPort.removeClass('flowchart-drop-active');
                         $targetNode && $targetNode.removeClass('flowchart-drop-active');
                         $line && $line.hide();
-                        if (!hasDropped && (e.cancel || distanceOfTwoPoints(e.position, sourcePoint) < 20)) {
+                        if (options.quickAdd && !hasDropped && (e.cancel || distanceOfTwoPoints(e.position, sourcePoint) < 20)) {
                             var $target = $(e.event.target);
                             var $thisPort = $target.closest('.flowchart-port');
                             var $thisNode = ($thisPort.length ? $thisPort : $target).closest('.flowchart-node');
@@ -2336,8 +2440,8 @@ if (!Array.prototype.map) {
                         var canvasOffset = $canvas.offset();
                         that.addElement($.extend({
                             position: {
-                                centerLeft: e.clientX - canvasOffset.left,
-                                centerTop: e.clientY - canvasOffset.top,
+                                centerLeft: e.clientX - canvasOffset.left + $(window).scrollLeft(),
+                                centerTop: e.clientY - canvasOffset.top + $(window).scrollTop(),
                             },
                             text: null,
                         }, newElementData));
@@ -2686,56 +2790,6 @@ if (!Array.prototype.map) {
         that._focusedElement = element.id;
     };
 
-    // Show quick add marks
-    // FlowChart.prototype.showQuickAdd = function(node, onlyLinkMark) {
-    //     var that = this;
-
-    //     if (typeof node === 'string') {
-    //         node = that.getElement(node);
-    //     }
-    //     if (!node || node.elementType.quickAdd === false) {
-    //         return;
-    //     }
-
-    //     var $marks = node.$ele.find('.flowchart-quick-marks');
-    //     if (!$marks.length) {
-    //         var activeColor = that.options.activeColor;
-    //         $marks = $([
-    //             '<div class="flowchart-quick-marks" style="position:absolute;left:-16px;top:-16px;right:-16px;bottom:-16px;z-index:10">',
-    //                 '<div class="flowchart-quick-mark" data-direction="top" style="position:absolute;pointer-events:auto;width:16px;height:16px;top:0;left:50%;margin-left:-8px;line-height:17px;text-align:center;cursor:pointer;border-radius:50%;background:#fff;background:rgba(255,255,255,.9);color:' + activeColor + '"><i class="icon icon-circle-arrow-up"></i></div>',
-    //                 '<div class="flowchart-quick-mark" data-direction="right" style="position:absolute;pointer-events:auto;width:16px;height:16px;right:0;top:50%;margin-top:-8px;line-height:17px;text-align:center;cursor:pointer;border-radius:50%;background:#fff;background:rgba(255,255,255,.9);color:' + activeColor + '"><i class="icon icon-circle-arrow-right"></i></div>',
-    //                 '<div class="flowchart-quick-mark" data-direction="bottom" style="position:absolute;pointer-events:auto;width:16px;height:16px;bottom:0;left:50%;margin-left:-8px;line-height:17px;text-align:center;cursor:pointer;border-radius:50%;background:#fff;background:rgba(255,255,255,.9);color:' + activeColor + '"><i class="icon icon-circle-arrow-down"></i></div>',
-    //                 '<div class="flowchart-quick-mark" data-direction="left" style="position:absolute;pointer-events:auto;width:16px;height:16px;left:0;top:50%;margin-top:-8px;line-height:17px;text-align:center;cursor:pointer;border-radius:50%;background:#fff;background:rgba(255,255,255,.9);color:' + activeColor + '"><i class="icon icon-circle-arrow-left"></i></div>',
-    //                 '<div class="flowchart-quick-link-mark" style="position:absolute;pointer-events:auto;width:16px;height:16px;right:1px;bottom:1px;line-height:17px;text-align:center;cursor:pointer;border-radius:50%;background:#fff;background:rgba(255,255,255,.9);color:' + activeColor + ';border-radius:50%;cursor:move"><i class="icon icon-dot-circle"></i></div>',
-    //             '</div>'
-    //         ].join('')).appendTo(node.$ele);
-    //     }
-    //     var $children = $marks.show().children().show();
-    //     if (onlyLinkMark) {
-    //         $children.not('.flowchart-quick-link-mark').hide();
-    //     }
-    //     var options = that.options;
-    //     if (node.bounds.left < (options.padding + 80 + options.horzSpace)) {
-    //         $marks.find('[data-direction="left"]').hide();
-    //     }
-    //     if (node.bounds.top < (options.padding + options.nodeHeight + options.vertSpace)) {
-    //         $marks.find('[data-direction="top"]').hide();
-    //     }
-
-    //     that._currentQuickAddNode = node;
-    // };
-
-    // Hide quick add marks
-    // FlowChart.prototype.hideQuickAdd = function() {
-    //     var that = this;
-    //     var node  = that._currentQuickAddNode;
-    //     if (!node) {
-    //         return;
-    //     }
-    //     node.$ele.find('.flowchart-quick-marks').hide();
-    //     that._currentQuickAddNode = null;
-    // };
-
     // Show contextmenu
     FlowChart.prototype.showContextMenu = function(ele, event) {
         var that = this;
@@ -2834,14 +2888,6 @@ if (!Array.prototype.map) {
                         };
                         var addRel = function(rel) {
                             addRelToPartialMap(rel);
-                            if (that.options.relationLineGap) {
-                                if (rel.beginSideRels) {
-                                    rel.beginSideRels.forEach(addRelToPartialMap);
-                                }
-                                if (rel.endSideRels) {
-                                    rel.endSideRels.forEach(addRelToPartialMap);
-                                }
-                            }
                         };
                         if (element.fromRels.length) {
                             element.fromRels.forEach(addRel);
@@ -2849,6 +2895,13 @@ if (!Array.prototype.map) {
                         if (element.toRels.length) {
                             element.toRels.forEach(addRel);
                         }
+                    }  else {
+                        if (element.fromNode) {
+                            map[element.fromNode.id] = element.fromNode;
+                        }
+                        if (element.toNode) {
+                            map[element.toNode.id] = element.toNode;
+                        }
                     }
                 }
             });
@@ -2926,14 +2979,13 @@ if (!Array.prototype.map) {
             (element.isRelation ? relationList : nodeList).push(element);
         });
 
-        this.nodeList = FlowChartElement.sort(nodeList);
-        this.relationList = FlowChartElement.sort(relationList);
+        that.nodeList = FlowChartElement.sort(nodeList);
+        that.relationList = FlowChartElement.sort(relationList);
 
         relationList.forEach(function(relation) {
             relation.initRelationBeforeRender();
         });
 
-
         var partialRenderMap = that._getPartialRenderMap(partialIDList);
         if (!partialRenderMap.enabled) {
             that.bounds = {left: options.padding, top: options.padding, width: 0, height: 0};
@@ -3160,6 +3212,10 @@ if (!Array.prototype.map) {
             return;
         }
 
+        if (!that.options.allowFreePorts && (!fromPort && !toPort)) {
+            return;
+        }
+
         return that.addElement({
             type: 'relation',
             text: text === undefined ? null : text,
@@ -3346,6 +3402,20 @@ if (!Array.prototype.map) {
                     if (element.relationLineID) {
                         $('#' + element.relationLineID).remove();
                     }
+                    var fromNode = element.fromNode;
+                    if (fromNode && fromNode.fromRels && fromNode.fromRels.length) {
+                        var relIndex = fromNode.fromRels.findIndex(x => x.id === element.id);
+                        if (relIndex > -1) {
+                            fromNode.fromRels.splice(relIndex, 1);
+                        }
+                    }
+                    var toNode = element.toNode;
+                    if (toNode && toNode.toRels && toNode.toRels.length) {
+                        var relIndex = toNode.toRels.findIndex(x => x.id === element.id);
+                        if (relIndex > -1) {
+                            toNode.toRels.splice(relIndex, 1);
+                        }
+                    }
                 }
                 delete that.elements[id];
                 if (that._focusedElement === id) {
@@ -3389,6 +3459,17 @@ if (!Array.prototype.map) {
         return dataList;
     };
 
+    FlowChart.prototype.exportTypes = function(includeInternalTypes) {
+        var that = this;
+        var typesList = [];
+        $.each(that.types, function(_, elementType) {
+            if (!elementType.internal || includeInternalTypes) {
+                typesList.push(elementType.exportType());
+            }
+        });
+        return typesList;
+    };
+
     // Change options
     FlowChart.prototype.setOptions = function(newOptions, skipRender) {
         $.extend(this.options, newOptions);
@@ -3489,6 +3570,9 @@ if (!Array.prototype.map) {
         // 激活状态颜色
         activeColor: '#3280fc',
 
+        // 允许自由端口
+        allowFreePorts: false,
+
         // 是否移动时自动吸附网格
         // 如果设置为 true，则设置网格为 5，如果为数值则为指定的网格大小
         adsorptionGrid: 5,
@@ -3582,9 +3666,6 @@ if (!Array.prototype.map) {
         // 端口线颜色
         portLineColor: '#333',
 
-        // 连接线间距，如果设置为 0 则会合并同一方向上的连接线，否则会使用给定的值作为间距
-        // relationLineGap: 2,
-
         // 关系连接线文本样式
         relationTextStyle: {
         },
@@ -3615,6 +3696,9 @@ if (!Array.prototype.map) {
         // 自定义元素类型
         elementTypes: {},
 
+        // 是否包含默认节点类型
+        initialTypes: true,
+
         // 初始数据
         data: [{
             id: 'start',