beta-glozic-workflow 1.0.0

package/dist/index.js

@@ -0,0 +1,2040 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SPECIAL_END_NODE = exports.SPECIAL_CORNER_NODE = exports.NODE_START = exports.NODE_END = void 0;
+require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.parse-float.js");
+var _react = _interopRequireWildcard(require("react"));
+var _TaskPalette = _interopRequireDefault(require("./component/TaskPalette"));
+var _reactstrap = require("reactstrap");
+var _jsplumb = require("jsplumb");
+var _workflow = require("./utils/workflow.config");
+var _jquery = _interopRequireDefault(require("jquery"));
+var _Designer = require("./utils/Designer.module");
+require("./css/style.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+// import './index.css';
+
+//Actions
+const NODE_START = 'node-start';
+exports.NODE_START = NODE_START;
+const NODE_END = 'node-end';
+exports.NODE_END = NODE_END;
+const SPECIAL_END_NODE = 'special_end_node';
+exports.SPECIAL_END_NODE = SPECIAL_END_NODE;
+const SPECIAL_CORNER_NODE = 'SPECIAL_CORNER_NODE';
+exports.SPECIAL_CORNER_NODE = SPECIAL_CORNER_NODE;
+let taskConfig = {};
+Object.values(_workflow.config.taskType).map(s => {
+  taskConfig = Object.assign(taskConfig, s);
+});
+let _count = 0; // every node has a unique name node-${_count}
+
+const layout = {
+  "workflowName": "",
+  "workflowDescription": "",
+  "workflowType": "",
+  "isPublished": 0,
+  "definition": {
+    "variables": [],
+    "actions": [],
+    "settings": {}
+  },
+  "createdTime": "",
+  "createdBy": "",
+  "modifiedTime": "",
+  "modifiedBy": ""
+};
+class Designer extends _react.Component {
+  constructor(_props) {
+    super(_props);
+    _defineProperty(this, "componentDidMount", async () => {
+      this.onload();
+      this.onUpdateNodes(this.props);
+    });
+    _defineProperty(this, "componentWillReceiveProps", props => {
+      this.onUpdateNodes(props);
+    });
+    _defineProperty(this, "onUpdateNodes", props => {
+      if (props.Nodes && props.Nodes.length != 0) {
+        let data = JSON.parse(JSON.stringify(layout));
+        data.definition.actions = props.Nodes;
+        this.importedJsonFile(data);
+      }
+    });
+    _defineProperty(this, "onload", async () => {
+      let self = this;
+      this.fileLoadedFromServer = _Designer.getFileNameParam;
+      this.paletteContainer = document.getElementById('workflow-task-palette-container');
+      // this.paletteContainer.style.height = (window.innerHeight - this.paletteContainer.offsetTop) + 'px';
+      (0, _jquery.default)('.workflow--node-task-palette-item').on('mousedown', e => {
+        e.stopPropagation();
+      });
+      (0, _jquery.default)('.workflow--node-task-palette-item').on('dragstart', function (event) {
+        self.draged = event.target;
+        event.stopPropagation();
+      });
+      (0, _jquery.default)('.fc-workflow--node-task-palette-item').on('dragstart', function (event) {
+        console.log(event.target);
+        self.draged = event.target;
+        event.stopPropagation();
+      });
+      (0, _jquery.default)('.workflow--node-task-palette-item').on('drag', function (event) {
+        event.stopPropagation();
+      });
+
+      // prevent dragenter and dragover if you want drop event fired
+      document.addEventListener("dragenter", function (event) {
+        // highlight potential drop target when the draggable element enters it
+        if (event.target.className.indexOf('jtk-overlay') >= 0) {
+          event.target.classList.add('onDroping');
+        }
+        event.stopPropagation();
+      }, false);
+      /* events fired on the drop targets */
+      document.addEventListener("dragover", function (event) {
+        // prevent default to allow drop
+        event.preventDefault();
+      }, false);
+      document.addEventListener("dragleave", function (event) {
+        event.stopPropagation();
+        // reset background of potential drop target when the draggable element leaves it
+        if (event.target.className.indexOf('jtk-overlay') >= 0) {
+          event.target.classList.remove('onDroping');
+        }
+      }, false);
+      document.addEventListener("dragend", function (event) {
+        // reset the transparency
+      }, false);
+      document.addEventListener("drop", function (event) {
+        let moveTask = false,
+          taskId = "";
+        // prevent default action (open as link for some elements)
+        event.preventDefault();
+        // move dragged elem to the selected drop target
+        if (event.target.className.indexOf('jtk-overlay') >= 0) {
+          event.target.classList.remove('onDroping');
+          if (self.draged.getAttribute('datatype')) {
+            var datatype = JSON.parse(self.draged.getAttribute('datatype'));
+            if (datatype && datatype.fc) {
+              taskId = self.draged.getAttribute('id');
+              moveTask = true;
+            }
+          }
+          if (moveTask) {
+            self.addBranchTaskToPlaceHolder(taskId, event.target);
+            self.deleteTaskById(taskId);
+          } else {
+            self.addTaskToDropZone(event.target, self.draged);
+          }
+
+          //When Node Move to other place then deleted old node
+          self.draged = null;
+        }
+        window.setTimeout(() => {
+          self.props.onChange(self.flowchartToJson());
+        }, 300);
+      }, false);
+      document.addEventListener('click', e => {
+        //console.log(e.target, document.getElementById('designer-form-container'))
+        //console.log(e.target.childNodes)
+        if (document.getElementById('designer-form-container') && document.getElementById('designer-form-container').contains(e.target) || e.target.className.indexOf('glyphicon-remove') >= 0 || e.target.childNodes.length && e.target.childNodes[0].className && e.target.childNodes[0].className.indexOf('glyphicon-remove') >= 0) return;
+        if (e.target.className.indexOf('task-iconmenu-item') >= 0 || e.target.parentElement.className.indexOf('task-iconmenu-item') >= 0) {
+          let btn = e.target.className.indexOf('task-iconmenu-item') >= 0 ? e.target : e.target.parentElement;
+          let btnType = btn.getAttribute('data-btn');
+          let taskId = btn.parentElement.getAttribute('data-task');
+          switch (btnType) {
+            case 'copy':
+              this.curCopyTask = taskId;
+              break;
+            case 'delete':
+              self.deleteTaskById(taskId);
+              break;
+            case 'rename':
+              this.curFocusTask = taskId;
+              self.setState({
+                popupRenameFormDisplay: true
+              });
+              break;
+            case 'disabled':
+              (0, _Designer.toggleDisabledTask)(taskId, this.nodes);
+              break;
+            default:
+          }
+          return;
+        }
+        if (e.target.className.indexOf('fc-item') >= 0 || e.target.parentElement.className.indexOf('fc-item') >= 0) {
+          let target = e.target.className.indexOf('fc-item') >= 0 ? e.target : e.target.parentElement;
+          let targetId = target.getAttribute('id');
+          // focus on NODE_END or NODE_START
+          if (targetId === NODE_START || targetId === NODE_END) {
+            this.props.onChange(this.flowchartToJson());
+            return self.setState({
+              currentNodeFocused: null
+            });
+          }
+          var actionObj = self.nodes[target.getAttribute('id')];
+          var vars = []; //self.props.workflowSettingReducer.variables.map((v, i) => v.name)
+
+          //comment by anup start
+          // if (actionObj.schema.properties) {
+          //     Object.keys(actionObj.schema.properties).forEach(key => {
+          //         if (actionObj.schema.properties[key].enum && actionObj.schema.properties[key].enum[0] === "<WF_Variables_setting>") {
+          //             actionObj.schema.properties[key].enum = vars; //vars.map(v => `<<${v}>>`);
+          //             actionObj.schema.properties[key].enumNames = vars;
+          //         }
+          //     })
+          // }
+          // if (actionObj.schema.items && actionObj.schema.items.properties) {
+          //     Object.keys(actionObj.schema.items.properties).forEach(key => {
+          //         if (actionObj.schema.items.properties[key].enum && actionObj.schema.items.properties[key].enum[0] === "<WF_Variables_setting>") {
+          //             actionObj.schema.items.properties[key].enum = vars; //vars.map(v => `<<${v}>>`);
+          //             actionObj.schema.items.properties[key].enumNames = vars;
+          //         }
+          //     })
+          // }
+          //comment by anup Stop
+          this.props.onNodeClick(actionObj, this.flowchartToJson());
+          self.setState({
+            currentNodeFocused: actionObj
+          });
+          return;
+        }
+        // not focusing on Node
+        if (this.state.currentTab === 'workflowSetting') return;
+        return self.setState(_objectSpread({
+          currentNodeFocused: null
+        }, e.target.className.indexOf('popupform-mask') >= 0 && {
+          popupRenameFormDisplay: false
+        }));
+      });
+      this.firstInstance = _jsplumb.jsPlumb.getInstance({
+        Container: 'designer-area',
+        Anchors: ['Top', 'TopCenter', 'TopRight', 'TopLeft', 'Right', 'RightMiddle', 'Bottom', 'BottomCenter', 'BottomRight', 'BottomLeft', 'Left', 'LeftMiddle'],
+        DragOptions: {
+          cursor: "pointer",
+          zIndex: 2000
+        },
+        Container: 'flowBox',
+        PaintStyle: {
+          strokeWidth: 2,
+          stroke: "#9E9E9E",
+          boxShadow: "0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)",
+          transition: "color 0.15s ease-in -out, background - color 0.15s ease -in -out, border - color 0.15s ease -in -out, box - shadow 0.15s ease -in -out"
+        }
+      });
+      this.paletteBoard = document.getElementById('workflow-task-palette-container');
+      if (this.paletteBoard) {
+        this.firstInstance.importDefaults({
+          Connector: ["Flowchart", {
+            cornerRadius: 4,
+            stub: 0
+          }]
+          // ConnectionOverlays: [['Custom', overlayPlus()]]
+        });
+
+        this.containerWrapper = document.getElementById('workflow-node-designer-wrapper-area');
+        this.container = document.getElementById('designer-area');
+        this.containerWrapper.addEventListener('wheel', e => {
+          if (e.ctrlKey) {
+            e.preventDefault();
+            let formData = document.getElementById('designer-form-container');
+            if (formData && formData.contains(e.target)) return;
+            console.log(e.target);
+            let xScreen = e.pageX - self.container.offsetLeft;
+            let yScreen = e.pageY - self.container.offsetTop;
+
+            // find current location on the image at the current scale
+            self.xImage = self.xImage + (xScreen - self.xLast) * self.scale;
+            self.yImage = self.yImage + (yScreen - self.yLast) * self.scale;
+
+            // determine the new scale
+            if (e.deltaY > 0) {
+              self.scale += 0.02;
+            } else {
+              self.scale += -0.02;
+            }
+            if (self.scale < 0.3) {
+              self.scale = 0.3;
+              return;
+            } else if (self.scale > 2) {
+              self.scale = 2;
+              return;
+            }
+
+            // determine the location on the screen at the new scale
+            let xNew = (xScreen - self.xImage) / self.scale;
+            let yNew = (yScreen - self.yImage) / self.scale;
+
+            // save the current screen location
+            self.xLast = xScreen;
+            self.yLast = yScreen;
+
+            // redraw
+            self.container.style.cssText = ["-webkit-transform: scale(".concat(self.scale, ")"), "-moz-transform: scale(".concat(self.scale, ")"), "-ms-transform: scale(".concat(self.scale, ")"), "-o-transform: scale(".concat(self.scale, ")"), "transform: scale(".concat(self.scale, ")"), "transform-origin: ".concat(self.xImage, "px ").concat(self.yImage, "px") // `translate: ${xNew*self.scale}px ${yNew*self.scale}px`
+            ].join(';');
+            self.container.style.left = "".concat(self.containerPosition.x, "px");
+            self.container.style.top = "".concat(self.containerPosition.y, "px");
+            self.firstInstance.setZoom(self.scale);
+            return false;
+          } else if (this.state.currentNodeFocused === null) {
+            if (e.deltaY > 0) {
+              self.containerPosition = {
+                x: self.containerPosition.x,
+                y: self.containerPosition.y - 10
+              };
+            } else {
+              self.containerPosition = {
+                x: self.containerPosition.x,
+                y: self.containerPosition.y + 10
+              };
+            }
+            self.container.style.left = "".concat(self.containerPosition.x, "px");
+            self.container.style.top = "".concat(self.containerPosition.y, "px");
+          }
+        });
+        var touchStartY, touchStartX;
+        this.containerWrapper.addEventListener('touchend', e => {
+          touchStartY = undefined;
+          touchStartX = undefined;
+        });
+        this.containerWrapper.addEventListener('touchmove', e => {
+          if (this.state.currentNodeFocused === null) {
+            e.preventDefault();
+            //console.log("on touchmove")
+            touchStartY = touchStartY ? touchStartY : Math.round(e.touches[0].pageY);
+            touchStartX = touchStartX ? touchStartX : Math.round(e.touches[0].pageX);
+            var yEnd = Math.round(e.touches[0].pageY),
+              xEnd = Math.round(e.touches[0].pageX),
+              yDistance = yEnd - touchStartY,
+              xDistance = xEnd - touchStartX;
+            if (yDistance > 5 || yDistance < -5) {
+              touchStartY = touchStartY + yDistance;
+              self.containerPosition = {
+                x: self.containerPosition.x,
+                y: self.containerPosition.y + yDistance
+              };
+              self.container.style.left = "".concat(self.containerPosition.x, "px");
+              self.container.style.top = "".concat(self.containerPosition.y, "px");
+            }
+            if (xDistance > 5 || xDistance < -5) {
+              touchStartX = touchStartX + xDistance;
+              self.containerPosition = {
+                x: self.containerPosition.x + xDistance,
+                y: self.containerPosition.y
+              };
+              self.container.style.left = "".concat(self.containerPosition.x, "px");
+              self.container.style.top = "".concat(self.containerPosition.y, "px");
+            }
+          }
+        });
+        this.containerWrapper.addEventListener('mousedown', e => {
+          //////console.log('mousedown ', e.target)
+          if (e.target === self.containerWrapper || e.target === self.container || e.target.className.indexOf('jtk-overlay') >= 0) {
+            self.startDropPosition = {
+              x: e.pageX,
+              y: e.pageY
+            };
+            self.onDragContainer = true;
+          }
+        });
+        this.containerWrapper.addEventListener('mouseup', e => {
+          // if (self.onDragContainer) {
+          //     self.firstInstance.repaintEverything();
+          // }
+          self.onDragContainer = false;
+        });
+        this.containerWrapper.addEventListener('mousemove', e => {
+          if (self.onDragContainer) {
+            self.containerPosition = {
+              x: self.containerPosition.x + (e.pageX - self.startDropPosition.x) / 1,
+              y: self.containerPosition.y + (e.pageY - self.startDropPosition.y) / 1
+            };
+            self.container.style.left = "".concat(self.containerPosition.x, "px");
+            self.container.style.top = "".concat(self.containerPosition.y, "px");
+            self.startDropPosition.x = e.pageX;
+            self.startDropPosition.y = e.pageY;
+          }
+        });
+        this.containerWrapper.addEventListener('click', e => {
+          console.log('click', e.target);
+          if (e.target.className.indexOf('fc-task-placeholder') >= 0 && !this.state.taskPalette.display) {
+            this.setState({
+              taskPalette: {
+                display: true,
+                x: e.pageX,
+                y: e.pageY
+              }
+            }).then(ele => {
+              this.props.onChange(this.flowchartToJson());
+            });
+          } else {
+            window.setTimeout(() => {
+              this.props.onChange(this.flowchartToJson());
+            }, 300);
+          }
+        });
+        this.resetFlowchart();
+        this.firstInstance.draggable([this.paletteBoard], {
+          containment: document.getElementById('workflow-node-designer-wrapper-area'),
+          stop: params => {
+            console.log(this.nodes);
+            console.log('STOP');
+            // ////////console.log('STOP ', params)
+          },
+
+          start: () => {
+            console.log(this.nodes);
+            console.log('start');
+          },
+          drag: e => {
+            // ////////console.log('dragging', e)
+            // return false;
+          }
+        });
+        if (this.fileLoadedFromServer) {
+          //   this.props.loadFileFromServer(this.fileLoadedFromServer());
+        }
+      }
+    });
+    _defineProperty(this, "addBranchTaskToPlaceHolder", (task, placeholder) => {
+      // this.setState({paletteActive: true});
+      let plusIcon = placeholder.querySelector('.workflow--node-dropable-zone');
+      let source = plusIcon.getAttribute('data-source');
+      let target = plusIcon.getAttribute('data-target');
+      let branch = plusIcon.getAttribute('data-position');
+      let self = this;
+      let newParent = "node-".concat(_count);
+      let endBranchNode;
+
+      ////console.log('addBranchTaskToPlaceHolder', task, self.nodes)
+      let taskCount = _count;
+      self.addTaskToDropZone(placeholder, null, self.nodes[task].datatype, self.nodes[task]);
+      // renameTask(`node-${_count-1}`, self.nodes, self.nodes[task].displayName);
+      let endId = "node-end-".concat(self.nodes[task].count);
+      for (var i = 0; i < self.nodes[task].branch; i++) {
+        let cNode = self.nodes[task].next[i];
+        let countInBranch;
+        ////console.log('2706 branch =====>  ', cNode, newParent)
+        while (cNode !== endId) {
+          ////console.log('2706 cNode ****', cNode)
+          if (self.nodes[cNode].type === SPECIAL_END_NODE || self.nodes[cNode].type === SPECIAL_CORNER_NODE) {
+            cNode = self.nodes[cNode].next;
+          } else if (cNode === newParent) {
+            cNode = "node-end-".concat(self.nodes[cNode].count);
+          } else {
+            let previous = self.nodes[cNode].previous;
+            let next = self.nodes[cNode].next;
+            ////console.log('previous, next ', previous, next, self.nodes[previous], self.nodes[next])
+            if (self.nodes[previous].type === SPECIAL_CORNER_NODE) {
+              previous = "node-topbranch_".concat(i, "-").concat(taskCount);
+            } else if (self.nodes[previous].type === SPECIAL_END_NODE) {
+              previous = "node-end-".concat(countInBranch);
+            } else {
+              previous = "node-".concat(_count - 1);
+            }
+            next = "node-botbranch_".concat(i, "-").concat(taskCount);
+            let o = self.getOverlayBySourceTarget(previous, next);
+            if (!self.nodes[cNode].branch) {
+              self.addTaskToDropZone(o, null, this.nodes[cNode].datatype, self.nodes[cNode]);
+              // renameTask(`node-${_count-1}`, self.nodes, self.nodes[cNode].displayName);
+              cNode = self.nodes[cNode].next;
+            } else {
+              countInBranch = _count;
+              this.addBranchTaskToPlaceHolder(cNode, o);
+              cNode = self.nodes["node-end-".concat(self.nodes[cNode].count)].next;
+            }
+          }
+        }
+      }
+    });
+    _defineProperty(this, "updateWorkflowPermission", permission => {
+      this.setState({
+        permission: permission,
+        newWorkflowSetup: false
+      });
+    });
+    _defineProperty(this, "setDroppable", () => {
+      console.log(this.flowchartToJson());
+    });
+    this.currentFocusOverlay = null;
+    this.state = {
+      options: [],
+      taskPalette: {
+        display: true,
+        x: 0,
+        y: 0
+      }
+    };
+    this.togglePalette = this.togglePalette.bind(this);
+
+    //Workflow
+    this.elements = [];
+    this.scale = 1;
+    this.xLast = 0; // last x location on the screen
+    this.yLast = 0; // last y location on the screen
+    this.xImage = 0; // last x location on the image
+    this.yImage = 0; // last y location on the image
+    this.nodes = {};
+    this.IsMainBranch = true;
+    this.startDropPosition = {
+      x: null,
+      y: null
+    };
+    this.containerPosition = {
+      x: 0,
+      y: 0
+    };
+    this.onDragContainer = false;
+    this.variables = {};
+    this.curCopyTask = false;
+    this.curFocusTask = false;
+    this.curTaskCallService = null;
+    this.flexibleNode = {
+      id: null,
+      jsonData: null
+    };
+    // this.currentFocusOverlay = null;
+    this.handleClickOverlay = this.handleClickOverlay.bind(this);
+    this.togglePalette = this.togglePalette.bind(this);
+    this.moveDownFlowchart = this.moveDownFlowchart.bind(this);
+    this.nodes = {};
+    this.exportFlowchart = this.exportFlowchart.bind(this);
+    this.addTaskToDropZone = this.addTaskToDropZone.bind(this);
+    this.updateFormValue = this.updateFormValue.bind(this);
+    this.updateFormVar = this.updateFormVar.bind(this);
+    this.addEndPointToNode = this.addEndPointToNode.bind(this);
+    this.connectNodes = this.connectNodes.bind(this);
+    this.expandFlowchart = this.expandFlowchart.bind(this);
+    this.getDataBranchTask = this.getDataBranchTask.bind(this);
+    this.getDataBranchNode = this.getDataBranchNode.bind(this);
+    this.addEndpoints = this.addEndpoints.bind(this);
+    this.hoverTaskAction = this.hoverTaskAction.bind(this);
+    this.deleteTaskById = this.deleteTaskById.bind(this);
+    this.getOverlayBySourceTarget = this.getOverlayBySourceTarget.bind(this);
+    this.narrowFlowchart = this.narrowFlowchart.bind(this);
+    this.moveUpFlowchart = this.moveUpFlowchart.bind(this);
+    this.handleRenameTask = this.handleRenameTask.bind(this);
+    this.importedJsonFile = this.importedJsonFile.bind(this);
+    this.reRenderFromFile = this.reRenderFromFile.bind(this);
+    this.resetFlowchart = this.resetFlowchart.bind(this);
+    this.getVariablesHardcode = this.getVariablesHardcode.bind(this);
+    this.flowchartToJson = this.flowchartToJson.bind(this);
+    this.selectTab = this.selectTab.bind(this);
+    this.handleChangePermissionSetting = this.handleChangePermissionSetting.bind(this);
+    this.removeBranch = this.removeBranch.bind(this);
+    this.addNewBranch = this.addNewBranch.bind(this);
+    this.reRenderBranchTask = this.reRenderBranchTask.bind(this);
+    this.removeAllEndpointOfNode = this.removeAllEndpointOfNode.bind(this);
+    this.handleSubmitTaskForm = this.handleSubmitTaskForm.bind(this);
+  }
+  // componentWillReceiveProps(newProps) {
+  //     console.log(newProps.workflowobj)
+  //     console.log(newProps.is_import)
+  //     console.log('componentWillReceiveProps ', newProps)
+  //     let self = this;
+  //     if (newProps.workflowobj) {
+  //         self.onload();
+  //     }
+  // }
+
+  render() {
+    let self = this;
+    const props = this.props;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "workflow-node-designer-container"
+    }, /*#__PURE__*/_react.default.createElement(_TaskPalette.default, {
+      buttonRef: props.buttonRef,
+      onCancel: props.onCancel,
+      onSave: props.onSave,
+      isToggele: props.isToggele,
+      options: props.options,
+      isActive: !!this.currentFocusOverlay,
+      isDisplay: this.state.taskPalette.display,
+      left: this.state.taskPalette.x + 40,
+      top: this.state.taskPalette.y,
+      toggle: this.togglePalette
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "workflow-node-designer-wrapper",
+      id: "workflow-node-designer-wrapper-area"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      id: "designer-area",
+      ref: e => this.container = e
+    })));
+  }
+  handleSubmitTaskForm(nodeId, e) {
+    let self = this;
+  }
+  selectTab(tab) {
+    //console.log('==================== ', tab)
+    this.setState({
+      currentTab: tab
+    });
+  }
+  handleChangePermissionSetting(inputName, e) {
+    let {
+      permission
+    } = this.state;
+    if (inputName == 'permissionRead') {
+      permission.read = e;
+    } else if (inputName == 'permissionDesign') {
+      permission.design = e;
+    }
+    this.setState({
+      permission
+    });
+  }
+  getVariablesHardcode() {
+    let self = this;
+    let listVar = {};
+    // this.props.workflowSettingReducer.variables.forEach(v => {
+    //     listVar[v.name] = {
+    //         /*"displayName": v.name,
+    //         "dataType": {
+    //             "name": v.type,
+    //             "version": 1
+    //         },
+    //         "defaultValue": v.defaultValue,
+    //         "displayDefaultValue": "",
+    //         "output": false,
+    //         "name": v.name,
+    //         "source": "workflow",
+    //         "initiate": false,
+    //         "configuration": {
+    //             "description": "",
+    //             "defaultValue": '',
+    //             "displayDefaultValue": ""
+    //         },
+    //         "isInUse": false,
+    //         "isUsedInActions": true,
+    //         "usedInActions": []*/
+    //         "name": v.name,
+    //         "type": v.type,
+    //         ...(v.defaultValueString !== undefined && { "defaultValueString": v.defaultValueString }),
+    //         ...(v.defaultValueNumber !== undefined && { "defaultValueNumber": v.defaultValueNumber }),
+    //         ...(v.defaultValueBoolean !== undefined && { "defaultValueBoolean": v.defaultValueBoolean }),
+    //         ...(v.defaultValueObject !== undefined && { "defaultValueObject": v.defaultValueObject }),
+    //         ...(v.defaultValueArray != undefined && { "defaultValueArray": v.defaultValueArray }),
+    //         "value": v.value
+    //     }
+    // })
+
+    let result = [];
+    Object.keys(listVar).forEach(key => result.push(listVar[key]));
+    //console.log(result)
+    return result;
+  }
+  reRenderBranchTask(task, placeholder) {
+    //console.log('1307 reRenderBranchTask ', task, placeholder)
+    let self = this;
+    let taskCount = _count;
+    self.addTaskToDropZone(placeholder, null, task.datatype, task, task.number);
+    //console.log(this.nodes)
+    let endId = "node-end-".concat(task.number);
+    for (var i = 0; i < task.branches.length; i++) {
+      let cNode = task.branches[i][0];
+      // console('1307 loop though branches', i, task.branches[i])
+      // let countInBranch;
+      ////console.log('2706 branch =====>  ', cNode, newParent)
+      task.branches[i].actions.forEach((n, j) => {
+        //console.log('loop in branch ', i, n, j);
+        cNode = "node-".concat(n.number);
+        let pre;
+        let nex = "node-botbranch_".concat(i, "-").concat(task.number);
+        if (j === 0) {
+          pre = "node-topbranch_".concat(i, "-").concat(task.number);
+        } else {
+          pre = "node-".concat(n.previous);
+          //console.log(task.branches)
+          if (task.branches[i].actions[j - 1].branches && task.branches[i].actions[j - 1].branches.length > 0) {
+            pre = "node-end-".concat(n.previous);
+          }
+        }
+        let o = self.getOverlayBySourceTarget(pre, nex);
+        if (!n.branches || !n.branches.length) {
+          self.addTaskToDropZone(o, null, n.datatype, n, n.number);
+        } else {
+          self.reRenderBranchTask(n, o);
+        }
+      });
+    }
+  }
+  reRenderFromFile() {
+    this.resetFlowchart();
+    let self = this;
+    let previous = NODE_START;
+    this.maxCount = -1;
+    //console.log('1307 reRenderFromFile ', this.importData)
+    this.importData.definition && this.importData.definition.actions && this.importData.definition.actions.forEach((e, i) => {
+      let o = self.getOverlayBySourceTarget(previous, NODE_END);
+      if (e.branches && e.branches.length >= 1) {
+        self.reRenderBranchTask(e, o);
+        previous = "node-end-".concat(e.number);
+      } else {
+        //console.log(o)
+        self.addTaskToDropZone(o, null, e.datatype, e, e.number);
+        previous = "node-".concat(e.number);
+      }
+    });
+    Object.keys(this.nodes).forEach(key => {
+      if (self.nodes[key].configuration && self.nodes[key].configuration.actionName === 'set_variables') {
+        self.variables[key] = {};
+        self.nodes[key].configuration.properties.forEach(variable => {
+          self.variables[key][variable.var] = variable.value;
+        });
+      }
+    });
+
+    //console.log('bon0507 variables ', self.variables)
+    _count = this.maxCount + 1;
+    this.firstInstance.repaintEverything();
+    console.log(this.nodes);
+  }
+  removeAllEndpointOfNode(node) {
+    let self = this;
+    this.firstInstance.selectEndpoints({
+      element: node
+    }).each(ep => {
+      // //console.log('1307 remove endpoint ', ep);
+      self.firstInstance.deleteEndpoint(ep);
+    });
+    //console.log('1307 ep select after remove', node,  this.firstInstance.selectEndpoints({element: node}))
+    // this.firstInstance.deleteEveryEndpoint();
+    // this.firstInstance.deleteEndpoint({uuid: `${node}-ep-right`});
+    // this.firstInstance.deleteEndpoint({uuid: `${node}-ep-bottom`});
+    // this.firstInstance.deleteEndpoint({uuid: `${node}-ep-left`});
+  }
+
+  handleRenameTask(value) {
+    (0, _Designer.renameTask)(this.curFocusTask, this.nodes, value);
+    this.setState({
+      popupRenameFormDisplay: false
+    });
+    this.props.onChange(this.flowchartToJson());
+  }
+  getOverlayBySourceTarget(source, target) {
+    let o = document.querySelector('.jtk-overlay .workflow--node-dropable-zone[data-source="' + source + '"][data-target="' + target + '"]');
+    //console.log('getOverlayBySourceTarget ', source, target, o)
+    return o.parentElement;
+  }
+  resetFlowchart() {
+    let self = this;
+    Object.keys(this.nodes).forEach(key => {
+      //console.log('0507====> key', key, self.nodes[key])
+      if (self.nodes[key].element) {
+        self.firstInstance.deleteConnectionsForElement(key);
+        self.nodes[key].element.remove();
+      }
+    });
+    this.firstInstance.deleteEveryEndpoint();
+    this.nodes = {};
+    let xValue = window.innerWidth * 0.5 - 20;
+    let yMiddle = (window.innerHeight - 50) * 0.1;
+    let yValue = 10 + _workflow.config.nodeSizeDefault / 2 + _workflow.config.nodeGap + _workflow.config.nodeSizeDefault / 2;
+    // add startpoint and endpoint
+    this.container.innerHTML += '<div id="' + NODE_START + '" class="fc-item fc-item-draggable" style="top: ' + (yMiddle - _workflow.config.nodeGap / 2 - _workflow.config.nodeSizeDefault / 2) + 'px; left: ' + xValue + 'px;"><span class="fa fa-play"></span></div>';
+    this.container.innerHTML += '<div id="' + NODE_END + '" class="fc-item fc-item-draggable" style="top: ' + (yMiddle + _workflow.config.nodeGap / 2) + 'px; left: ' + xValue + 'px;"><span class="fa fa-stop"></span></div>';
+    this.nodes.nodeStart = document.getElementById(NODE_START);
+    this.nodes.nodeEnd = document.getElementById(NODE_END);
+    this.addEndPointToNode(this.nodes.nodeStart, 'Bottom', "".concat(NODE_START, "-ep-bottom"));
+    this.addEndPointToNode(this.nodes.nodeEnd, 'Top', "".concat(NODE_END, "-ep-top"));
+    this.connectNodes(['Custom', (0, _Designer.overlayPlus)(NODE_START, NODE_END)], NODE_START + '-ep-bottom', NODE_END + '-ep-top');
+    this.nodes[NODE_START] = {
+      nodeId: NODE_START,
+      next: NODE_END,
+      previous: null,
+      element: this.nodes.nodeStart,
+      type: NODE_START,
+      data: {}
+    };
+    this.nodes[NODE_END] = {
+      nodeId: NODE_END,
+      next: null,
+      previous: NODE_START,
+      element: this.nodes.nodeEnd,
+      type: NODE_END,
+      data: {}
+    };
+    this.firstInstance.repaintEverything();
+    let connections = this.firstInstance.getConnections({
+      source: NODE_START,
+      target: NODE_END
+    });
+    //console.log('0507', this.nodes, connections)
+  }
+
+  deleteTaskById(taskId) {
+    let previous = this.nodes[taskId].previous;
+    let next = this.nodes[taskId].next;
+    let branch = this.nodes[taskId].onBranch ? Number(this.nodes[taskId].onBranch) : null;
+    let nodeList = [taskId];
+    let parent = this.nodes[taskId].parent;
+    let onBranch = this.nodes[taskId].onBranch;
+    let self = this;
+    if (this.nodes[taskId].branch) {
+      next = this.nodes["node-end-".concat(this.nodes[taskId].count)].next;
+      nodeList.push("node-end-".concat(this.nodes[taskId].count));
+      for (var i = 0; i < this.nodes[taskId].branch; i++) {
+        for (var j = 0; j < this.nodes[taskId][i].length; j++) {
+          nodeList.push(this.nodes[taskId][i][j]);
+        }
+      }
+    }
+    if (this.nodes[taskId].wrapper) {
+      nodeList = [...nodeList, "node-lefttop-".concat(this.nodes[taskId].count), "node-leftbot-".concat(this.nodes[taskId].count), "node-righttop-".concat(this.nodes[taskId].count), "node-rightbot-".concat(this.nodes[taskId].count)];
+    }
+    let loopParent = parent;
+    while (loopParent) {
+      ////console.log(loopParent)
+      let i = this.nodes[loopParent][onBranch].length;
+      ////console.log('i', i, nodeList)
+      while (i--) {
+        ////console.log('===> ', i)
+        if (nodeList.includes(this.nodes[loopParent][onBranch][i])) this.nodes[loopParent][onBranch].splice(i, 1);
+      }
+      onBranch = this.nodes[loopParent].onBranch;
+      loopParent = this.nodes[loopParent].parent;
+    }
+    this.narrowFlowchart(taskId);
+    this.moveUpFlowchart(taskId);
+    this.firstInstance.repaintEverything();
+    // delete all connections
+    nodeList.forEach(n => {
+      //console.log('1307 remove node ', n)
+      self.firstInstance.deleteConnectionsForElement(n);
+      // self.firstInstance.detach(n);
+      self.removeAllEndpointOfNode(n);
+    });
+    // delete all nodes
+    nodeList.forEach(n => {
+      ////console.log(n)
+      document.getElementById(n).remove();
+      delete self.nodes[n];
+    });
+    this.connectNodes(['Custom', Object.assign({}, (0, _Designer.overlayPlus)(previous, next, branch))], "".concat(previous, "-ep-bottom"), "".concat(next, "-ep-top"));
+    this.nodes[next].previous = previous;
+    this.nodes[previous].next = next;
+  }
+  moveUpFlowchart(deletedTask) {
+    let previous = this.nodes[deletedTask].previous;
+    let next = this.nodes[deletedTask].next;
+    if (this.nodes[deletedTask].branch) next = this.nodes["node-end-".concat(this.nodes[deletedTask].count)].next;
+    let currentGap = this.nodes[next].element.offsetTop - (this.nodes[previous].element.offsetTop + this.nodes[previous].element.offsetHeight);
+    let gapMinus = -(currentGap - (_workflow.config.nodeGap - 50));
+    let parent = this.nodes[deletedTask].parent;
+    ////console.log('********', previous, next, currentGap, config.nodeGap, this.nodes[deletedTask].onBranch)
+    let item = deletedTask;
+    let smallestGap = -gapMinus;
+    // calculate gap each branch
+    if (parent && this.nodes[parent].branch) {
+      for (var i = 0; i < this.nodes[parent].branch; i++) {
+        if (this.nodes[deletedTask].onBranch && i === +this.nodes[deletedTask].onBranch) continue;
+        let botNode = "node-botbranch_".concat(i, "-").concat(this.nodes[parent].count);
+        let prevBot = this.nodes[botNode].previous;
+        let bGap = this.nodes[botNode].element.offsetTop - (this.nodes[prevBot].element.offsetTop + this.nodes[prevBot].element.offsetHeight);
+        if (smallestGap > bGap) smallestGap = bGap;
+      }
+    }
+    ////console.log('smallestGap', smallestGap)
+    if (smallestGap > _workflow.config.nodeGap) gapMinus = _workflow.config.nodeGap - smallestGap;else return;
+    while (item) {
+      ////console.log('08/06 ', item, gapMinus)
+      this.nodes[item].element.style.top = "".concat(this.nodes[item].element.offsetTop + gapMinus, "px");
+      let itemP = item.split('-');
+      let corner;
+      if (itemP[1].indexOf('botbranch') >= 0) {
+        let c = this.nodes[item].count;
+        for (var i = 0; i < this.nodes[this.nodes[item].parent].branch; i++) {
+          if (item === "node-botbranch_".concat(i, "-").concat(c)) continue;
+          this.nodes["node-botbranch_".concat(i, "-").concat(c)].element.style.top = "".concat(this.nodes["node-botbranch_".concat(i, "-").concat(c)].element.offsetTop + gapMinus, "px");
+        }
+        item = this.nodes[item].next;
+        continue;
+      }
+      if (this.nodes[item].type === SPECIAL_END_NODE && this.nodes[item].parent && this.nodes[this.nodes[item].parent].wrapper) {
+        let itemLeft = "node-leftbot-".concat(this.nodes[item].count);
+        let itemRight = "node-rightbot-".concat(this.nodes[item].count);
+        this.nodes[itemLeft].element.style.top = "".concat(this.nodes[itemLeft].element.offsetTop + gapMinus, "px");
+        this.nodes[itemRight].element.style.top = "".concat(this.nodes[itemRight].element.offsetTop + gapMinus, "px");
+      }
+      if (this.nodes[item].wrapper) {
+        this.nodes["node-lefttop-".concat(this.nodes[item].count)].element.style.top = this.nodes["node-lefttop-".concat(this.nodes[item].count)].element.offsetTop + gapMinus + 'px';
+        this.nodes["node-leftbot-".concat(this.nodes[item].count)].element.style.top = this.nodes["node-leftbot-".concat(this.nodes[item].count)].element.offsetTop + gapMinus + 'px';
+        this.nodes["node-righttop-".concat(this.nodes[item].count)].element.style.top = this.nodes["node-righttop-".concat(this.nodes[item].count)].element.offsetTop + gapMinus + 'px';
+        this.nodes["node-rightbot-".concat(this.nodes[item].count)].element.style.top = this.nodes["node-rightbot-".concat(this.nodes[item].count)].element.offsetTop + gapMinus + 'px';
+      }
+      if (this.nodes[item].branch >= 1) {
+        for (var i = 0; i < this.nodes[item].branch; i++) {
+          this.nodes[item][i].forEach(n => {
+            this.nodes[n].element.style.top = "".concat(this.nodes[n].element.offsetTop + gapMinus, "px");
+          });
+        }
+        this.nodes["node-end-".concat(this.nodes[item].count)].element.style.top = "".concat(this.nodes["node-end-".concat(this.nodes[item].count)].element.offsetTop + gapMinus, "px");
+        item = "node-end-".concat(this.nodes[item].count);
+      }
+      if (!this.nodes[item].branch) {
+        item = this.nodes[item].next;
+      }
+    }
+  }
+  removeBranch(branchIndex, node) {
+    // let self = this;
+    // this.nodes[node][branchIndex].forEach(n => {
+    //     self.firstInstance.deleteConnectionsForElement(n);
+    //     self.firstInstance.deleteEndNo
+    // })
+  }
+  addNewBranch() {}
+  updateFormValue(node, value, removedIndex) {
+    console.log('updateFormValue', node, value, removedIndex, this.nodes[node]);
+    let self = this;
+    // add/remove branch
+    if (value && value.branches && value.branches instanceof Array) {
+      let jsonTask = self.getDataBranchNode(node);
+      console.log(jsonTask);
+      let previous = this.nodes[node].previous;
+      let next = this.nodes["node-end-".concat(jsonTask.number)].next;
+      //console.log('endpoint nodestart', this.firstInstance.selectEndpoints({element: NODE_START}));
+      if (value.branches.length !== this.nodes[node].configuration.properties.branches.length) {
+        // remove branche
+        if (value.branches.length < this.nodes[node].configuration.properties.branches.length) {
+          jsonTask.branches.splice(removedIndex, 1);
+          //console.log(jsonTask)
+          jsonTask.branch--;
+          jsonTask.configuration.properties = value;
+        }
+        // add branch
+        else if (value.branches.length > this.nodes[node].configuration.properties.branches.length) {
+          jsonTask.branches.push({
+            name: value[value.length - 1],
+            actions: []
+          });
+          jsonTask.configuration.properties = value;
+          jsonTask.branch++;
+        }
+        this.flexibleNode.id = node;
+        this.flexibleNode.jsonData = jsonTask;
+        let data = this.flowchartToJson();
+        this.importData = data;
+        self.resetFlowchart();
+        this.reRenderFromFile();
+      }
+      // change branch name
+      else {
+        this.nodes[node].configuration.properties = value;
+      }
+      return;
+    }
+    this.nodes[node].configuration.properties = value;
+    if (this.nodes[node].configuration.actionName === 'set_variables') {
+      // value.forEach((v, i) => {
+      //     if (v.var && !v.value) {
+      //         v.value = this.settingVarDefaultValue[v.var];
+      //     }
+      // })
+      this.nodes[node].configuration.properties = value;
+      this.setState(Object.assign({}, {
+        currentNodeFocused: Object.assign({}, this.nodes[node], {
+          schema: this.state.currentNodeFocused.schema,
+          configuration: Object.assign({}, this.nodes[node].configuration, {
+            properties: value
+          })
+        })
+      })).then(() => {
+        this.props.onChange(this.flowchartToJson());
+      });
+    }
+  }
+  shouldComponentUpdate(newProps, newState) {
+    return true;
+  }
+  togglePalette() {
+    this.setState({
+      taskPalette: Object.assign({}, this.state.taskPalette, {
+        display: !this.state.taskPalette.display
+      })
+    }).then(() => {
+      this.props.onChange(this.flowchartToJson());
+    });
+  }
+  addEndPointToNode(node, position, uuid) {
+    this.firstInstance.addEndpoint(node, {
+      isSource: true,
+      isTarget: true,
+      endpoint: 'Blank',
+      uuid: uuid,
+      anchor: [position],
+      maxConnections: 100
+    });
+  }
+  addEndpoints(node, position, uuids, nodeId) {
+    let self = this;
+    if (position && position.length) {
+      position.forEach((p, i) => {
+        self.addEndPointToNode(node, p, uuids[i]);
+      });
+      return;
+    } else {
+      self.addEndPointToNode(node, 'Left', "".concat(nodeId, "-ep-left"));
+      self.addEndPointToNode(node, 'Top', "".concat(nodeId, "-ep-top"));
+      self.addEndPointToNode(node, 'Right', "".concat(nodeId, "-ep-right"));
+      self.addEndPointToNode(node, 'Bottom', "".concat(nodeId, "-ep-bottom"));
+    }
+  }
+  connectNodes(overlays, endpointStart, endpointEnd, PaintStyle) {
+    // //console.log('0507 connectNodes', overlays, PaintStyle, endpointStart, endpointEnd)
+    let self = this;
+    let connOptions = {
+      uuids: [endpointStart, endpointEnd]
+    };
+    if (overlays) connOptions.overlays = [overlays];
+    if (PaintStyle) connOptions.paintStyle = PaintStyle;
+    let conn = this.firstInstance.connect(connOptions);
+    conn.bind('click', self.handleClickOverlay);
+    // //console.log('0507', conn)
+  }
+
+  addTaskToDropZone(destination, node, tasktype, copyTask, countValue) {
+    //console.log('1307 addTaskToDropZone', destination, node, tasktype, countValue, _count, copyTask)
+    if (!destination) return;
+    if (!isNaN(parseFloat(countValue)) && isFinite(countValue)) {
+      _count = countValue;
+      this.maxCount = _count > this.maxCount ? _count : this.maxCount;
+    }
+    let self = this;
+    let leftPosNewNode = destination.offsetLeft - 80;
+    let destinationLeft = destination.offsetLeft;
+    let source = destination.querySelector('.workflow--node-dropable-zone').getAttribute('data-source');
+    let target = destination.querySelector('.workflow--node-dropable-zone').getAttribute('data-target');
+    let position = destination.querySelector('.workflow--node-dropable-zone').getAttribute('data-position');
+    let datatype = node ? JSON.parse(node.getAttribute('datatype')) : tasktype;
+    // //console.log('====> datatype ', datatype)
+    //let item = config.taskType[datatype.parent][datatype.type];
+    let item = taskConfig[datatype.type];
+    let branches = copyTask ? copyTask.branches ? copyTask.branches.length : null : item.branch;
+    let connections = this.firstInstance.getConnections({
+      source: source,
+      target: target
+    });
+    let parent = '';
+    let newNodeId = "node-".concat(_count);
+    let taskTitle = item.title;
+    //console.log(branches)
+    // //console.log('0806 ', this.nodes)
+    if (this.nodes[source].type === SPECIAL_CORNER_NODE) parent = this.nodes[source].parent;
+    if (this.nodes[source].branch >= 1) parent = source;
+    if (this.nodes[target].type === SPECIAL_END_NODE) parent = this.nodes[target].parent;
+    if (this.nodes[target].parent) parent = this.nodes[target].parent;
+    if (parent != "" && parent && this.nodes[parent].nestedLevel >= _workflow.config.MAXIMUM_NESTED) return;
+    let curConnection = connections.filter(c => {
+      if (!c.getOverlays().overlayPLus) return false;
+      return c.getOverlays().overlayPLus.canvas.id === destination.getAttribute('id');
+    });
+
+    // calculate the gap between source->target => decide this flowchart will be moved down or not
+    // only do this when new node is adding to branch of other node
+    let needToMoveFlowchart = true;
+    let needToExpandBranchNode = false;
+    let p = null;
+    let parentExpand = null;
+    if (position) {
+      if (this.nodes[source].branch >= 1) p = source;else if (this.nodes[source].type === SPECIAL_END_NODE) p = this.nodes[this.nodes[source].parent].parent;else if (this.nodes[source].parent) p = this.nodes[source].parent;
+      parentExpand = p;
+      needToMoveFlowchart = (0, _Designer.isFlowchartWillMove)(this.nodes, p, position, item, source, target);
+    }
+
+    // remove old connection -> move nodes down -> repaint
+    this.firstInstance.deleteConnection(curConnection[0]);
+    if (needToMoveFlowchart) {
+      self.moveDownFlowchart(target, datatype.type, position, branches);
+    }
+    this.firstInstance.repaintEverything(); // redraw everything before you  addd new connect
+
+    // calculate top position new node
+    let sourceH = [SPECIAL_END_NODE, SPECIAL_CORNER_NODE].includes(this.nodes[source].type) ? 0 : _workflow.config.nodeSizeDefault / 2;
+    let targetH = [SPECIAL_END_NODE, SPECIAL_CORNER_NODE].includes(this.nodes[target].type) ? 0 : _workflow.config.nodeSizeDefault / 2;
+    // let topPos = (this.nodes[target].element.offsetTop + this.nodes[source].element.offsetTop + sourceH + targetH)/2 - config.nodeSizeDefault/2;
+    let topPosNewNode = this.nodes[source].element.offsetTop + (this.nodes[source].branch === 2 ? sourceH : sourceH * 2) + _workflow.config.nodeGap;
+    if (branches === 2) {
+      // let gapSize = this.nodes[target].element.offsetTop - (this.nodes[source].element.offsetTop + config.nodeSizeDefault);
+      // topPos = (this.nodes[source].element.offsetTop + (source === NODE_START ? config.nodeStartEndSize : config.nodeSizeDefault)) + config.nodeGap;
+      topPosNewNode = this.nodes[source].element.offsetTop + (this.nodes[source].branch === 2 ? sourceH : sourceH * 2) + _workflow.config.nodeGap;
+    }
+
+    // create new node element -> add attribute -> append to container canvas
+    let newNode = document.createElement('div');
+    newNode.setAttribute('id', newNodeId);
+    newNode.setAttribute('datatype', JSON.stringify({
+      type: item.name,
+      parent: item.type,
+      fc: true
+    }));
+    newNode.draggable = "true";
+    newNode.className = 'fc-workflow--node-task-palette-item fc-item fc-item-draggable fc-item-default';
+    newNode.style.cssText = 'top: ' + topPosNewNode + 'px; left: ' + leftPosNewNode + 'px;';
+    newNode.innerHTML = node ? node.innerHTML : "\n            <div  class=\"task-palette-icon fa fa-".concat(item.icon, " unselectable\"  ></div>\n            <div class=\"task-palette-title unselectable\">").concat(copyTask ? copyTask.configuration.actionTitle : taskTitle, "</div>");
+    (0, _Designer.addTaskMenuIcon)(newNode);
+    this.container.append(newNode);
+    (0, _jquery.default)('.fc-workflow--node-task-palette-item').on('dragstart', function (event) {
+      self.draged = event.target;
+      event.stopPropagation();
+    });
+
+    // add endpoint to new node
+    // 2 branches -> add RIGHT and LEFT endpoints
+    //console.log('1307  check endpoint before add ', this.firstInstance.selectEndpoints({element: newNodeId}))
+    this.addEndpoints(newNode, null, null, newNodeId);
+    //console.log('1307 check endpoint after add ', this.firstInstance.selectEndpoints({element: newNodeId}))
+    this.firstInstance.repaintEverything();
+    // add TOP endpoint
+    // this.addEndPointToNode(newNode, 'Top', `node-${_count}-ep-top`);
+
+    // 2 branches -> add one more node as end of new node (end-new-node)
+    let newEndNode = null;
+    let newLeftTopNode = null;
+    let newLeftBotNode = null;
+    let newRightTopNode = null;
+    let newRightBotNode = null;
+    let lefttopId;
+    let leftbotId;
+    let righttopId;
+    let rightbotId;
+    let endId;
+    let nodesCornerList = [];
+    ////////console.log('branches ', branches)
+    if (branches >= 1) {
+      if (item.wrapper) {
+        lefttopId = "node-lefttop-".concat(_count);
+        leftbotId = "node-leftbot-".concat(_count);
+        righttopId = "node-righttop-".concat(_count);
+        rightbotId = "node-rightbot-".concat(_count);
+        newLeftTopNode = document.createElement('div');
+        newLeftBotNode = document.createElement('div');
+        newRightTopNode = document.createElement('div');
+        newRightBotNode = document.createElement('div');
+        let gapSize = this.nodes[target].element.offsetTop - (this.nodes[source].element.offsetTop + _workflow.config.nodeSizeDefault);
+        let topPos = this.nodes[target].element.offsetTop - _workflow.config.nodeGap;
+        newLeftTopNode.setAttribute('id', "node-lefttop-".concat(_count));
+        newLeftBotNode.setAttribute('id', "node-leftbot-".concat(_count));
+        newRightTopNode.setAttribute('id', "node-righttop-".concat(_count));
+        newRightBotNode.setAttribute('id', "node-rightbot-".concat(_count));
+        newLeftTopNode.className = 'fc-item fc-item-draggable fc-item-end-point';
+        newLeftBotNode.className = 'fc-item fc-item-draggable fc-item-end-point';
+        newRightTopNode.className = 'fc-item fc-item-draggable fc-item-end-point';
+        newRightBotNode.className = 'fc-item fc-item-draggable fc-item-end-point';
+        newLeftTopNode.style.cssText = 'top: ' + (topPosNewNode + _workflow.config.nodeSizeDefault / 2) + 'px; left: ' + (leftPosNewNode - 90) + 'px;';
+        newLeftBotNode.style.cssText = 'top: ' + (this.nodes[target].element.offsetTop - _workflow.config.nodeGap + 10) + 'px; left: ' + (leftPosNewNode - 90) + 'px;';
+        newRightTopNode.style.cssText = 'top: ' + (topPosNewNode + _workflow.config.nodeSizeDefault / 2) + 'px; left: ' + (leftPosNewNode + 160 + 90) + 'px;';
+        newRightBotNode.style.cssText = 'top: ' + (this.nodes[target].element.offsetTop - _workflow.config.nodeGap + 10) + 'px; left: ' + (leftPosNewNode + 160 + 90) + 'px;';
+        this.container.append(newLeftTopNode);
+        this.container.append(newRightTopNode);
+        this.container.append(newRightBotNode);
+        this.container.append(newLeftBotNode);
+        this.addEndPointToNode(newLeftTopNode, 'Bottom', "".concat(lefttopId, "-ep-bottom"));
+        this.addEndPointToNode(newLeftTopNode, 'Right', "".concat(lefttopId, "-ep-right"));
+        this.addEndPointToNode(newRightTopNode, 'Bottom', "".concat(righttopId, "-ep-bottom"));
+        this.addEndPointToNode(newRightTopNode, 'Left', "".concat(righttopId, "-ep-left"));
+        this.addEndPointToNode(newRightBotNode, 'Top', "".concat(rightbotId, "-ep-top"));
+        this.addEndPointToNode(newRightBotNode, 'Left', "".concat(rightbotId, "-ep-left"));
+        this.addEndPointToNode(newLeftBotNode, 'Top', "".concat(leftbotId, "-ep-top"));
+        this.addEndPointToNode(newLeftBotNode, 'Right', "".concat(leftbotId, "-ep-right"));
+        this.nodes["node-lefttop-".concat(_count)] = {
+          nodeId: "node-lefttop-".concat(_count),
+          previous: "node-".concat(_count),
+          next: "node-leftbot-".concat(_count),
+          element: newLeftTopNode,
+          type: SPECIAL_CORNER_NODE,
+          data: [],
+          title: '',
+          parent: "node-".concat(_count),
+          count: _count
+        };
+        this.nodes["node-righttop-".concat(_count)] = {
+          nodeId: "node-righttop-".concat(_count),
+          previous: "node-".concat(_count),
+          next: "node-rightbot-".concat(_count),
+          element: newRightTopNode,
+          type: SPECIAL_CORNER_NODE,
+          data: [],
+          title: '',
+          parent: "node-".concat(_count),
+          count: _count
+        };
+        this.nodes["node-leftbot-".concat(_count)] = {
+          nodeId: "node-leftbot-".concat(_count),
+          previous: "node-lefttop-".concat(_count),
+          next: "node-end-".concat(_count),
+          element: newLeftBotNode,
+          type: SPECIAL_CORNER_NODE,
+          data: [],
+          title: '',
+          parent: "node-".concat(_count),
+          count: _count
+        };
+        this.nodes["node-rightbot-".concat(_count)] = {
+          nodeId: "node-rightbot-".concat(_count),
+          previous: "node-righttop-".concat(_count),
+          next: "node-end-".concat(_count),
+          element: newRightBotNode,
+          type: SPECIAL_CORNER_NODE,
+          data: [],
+          title: '',
+          parent: "node-".concat(_count),
+          count: _count
+        };
+        nodesCornerList = [lefttopId, leftbotId, righttopId, rightbotId];
+      }
+
+      // branches >= 3
+      let halfBranches = Math.floor(branches / 2);
+      endId = "node-end-".concat(_count);
+      newEndNode = document.createElement('div');
+      newEndNode.setAttribute('id', "node-end-".concat(_count));
+      newEndNode.className = 'fc-item fc-item-draggable fc-item-end-point';
+      newEndNode.style.cssText = 'top: ' + (this.nodes[target].element.offsetTop - _workflow.config.nodeGap + 10) + 'px; left: ' + destinationLeft + 'px;';
+      this.addEndpoints(newEndNode, null, null, endId);
+      this.container.append(newEndNode);
+      this.nodes["node-end-".concat(_count)] = {
+        nodeId: "node-end-".concat(_count),
+        previous: {
+          left: leftbotId,
+          right: rightbotId
+        },
+        next: target,
+        element: newEndNode,
+        type: SPECIAL_END_NODE,
+        data: [],
+        title: '',
+        parent: "node-".concat(_count),
+        count: _count
+      };
+      let equalPostionLeft = null;
+      let equalPostionRight = null;
+      for (let i = 0; i < branches; i++) {
+        let topBranchId = "node-topbranch_".concat(i, "-").concat(_count);
+        let botBranchId = "node-botbranch_".concat(i, "-").concat(_count);
+        let newTopBranchNode = document.createElement('div');
+        let newBotBranchNode = document.createElement('div');
+        let topPos = this.nodes[target].element.offsetTop - _workflow.config.nodeGap;
+        newTopBranchNode.setAttribute('id', topBranchId);
+        newBotBranchNode.setAttribute('id', botBranchId);
+        newTopBranchNode.className = 'fc-item fc-item-draggable fc-item-end-point';
+        newBotBranchNode.className = 'fc-item fc-item-draggable fc-item-end-point';
+        let left;
+        let top;
+        if (branches % 2 === 1 && Math.floor(branches / 2) === i) {
+          left = leftPosNewNode + _workflow.config.nodeWidthDefault / 2;
+          top = topPosNewNode + _workflow.config.nodeSizeDefault;
+        } else if (i < halfBranches) {
+          left = leftPosNewNode + _workflow.config.nodeWidthDefault / 2 - (halfBranches - i) * 180;
+          // if (this.IsMainBranch) {
+          //     equalPostionLeft = (leftPosNewNode + config.nodeWidthDefault / 2) - (halfBranches - i) * 180
+          //     left = (equalPostionRight && equalPostionRight >= equalPostionLeft) ? equalPostionLeft : ((equalPostionRight / 2))
+          // }
+          top = topPosNewNode + _workflow.config.nodeSizeDefault / 2;
+        } else {
+          left = leftPosNewNode + _workflow.config.nodeWidthDefault / 2 + (i - halfBranches + (branches % 2 ? 0 : 1)) * 180;
+          // if (this.IsMainBranch) {
+          //     equalPostionRight = (leftPosNewNode + config.nodeWidthDefault / 2) + (i - halfBranches + (branches % 2 ? 0 : 1)) * 180;
+          //     left = equalPostionRight >= equalPostionLeft ? equalPostionRight : equalPostionRight;
+          // }
+          top = topPosNewNode + _workflow.config.nodeSizeDefault / 2;
+        }
+        if (equalPostionRight != null && equalPostionLeft != null) {
+          this.IsMainBranch = false;
+        }
+        newTopBranchNode.style.cssText = 'top: ' + top + 'px; left: ' + left + 'px;';
+        newBotBranchNode.style.cssText = 'top: ' + (this.nodes[target].element.offsetTop - _workflow.config.nodeGap) + 'px; left: ' + left + 'px;';
+        this.container.append(newTopBranchNode);
+        this.container.append(newBotBranchNode);
+        this.addEndpoints(newTopBranchNode, null, null, topBranchId);
+        this.addEndpoints(newBotBranchNode, null, null, botBranchId);
+        this.nodes[topBranchId] = {
+          nodeId: topBranchId,
+          previous: "node-".concat(_count),
+          next: botBranchId,
+          element: newTopBranchNode,
+          type: SPECIAL_CORNER_NODE,
+          data: [],
+          title: '',
+          parent: "node-".concat(_count),
+          count: _count,
+          positionBranch: i
+        };
+        this.nodes[botBranchId] = {
+          nodeId: botBranchId,
+          previous: topBranchId,
+          next: endId,
+          element: newBotBranchNode,
+          type: SPECIAL_CORNER_NODE,
+          data: [],
+          title: '',
+          parent: "node-".concat(_count),
+          count: _count,
+          positionBranch: i
+        };
+        if (branches % 2 === 1 && Math.floor(branches / 2) === i) {
+          this.connectNodes(null, "node-".concat(_count, "-ep-bottom"), "".concat(topBranchId, "-ep-top"));
+        } else if (i < halfBranches) {
+          this.connectNodes(null, "node-".concat(_count, "-ep-left"), "".concat(topBranchId, "-ep-right"));
+        } else {
+          this.connectNodes(null, "node-".concat(_count, "-ep-right"), "".concat(topBranchId, "-ep-left"));
+        }
+        this.connectNodes(['Custom', Object.assign({}, (0, _Designer.overlayPlus)(topBranchId, botBranchId, i))], "".concat(topBranchId, "-ep-bottom"), "".concat(botBranchId, "-ep-top"));
+        this.connectNodes(null, "".concat(botBranchId, "-ep-bottom"), "".concat(endId, "-ep-top"));
+        nodesCornerList.push(topBranchId, botBranchId);
+      }
+      this.connectNodes(['Custom', Object.assign((0, _Designer.overlayPlus)(endId, target, position))], "".concat(endId, "-ep-bottom"), "".concat(target, "-ep-top"));
+    }
+
+    // connect from source to new node
+    // if source has 2 branches
+    if (this.nodes[source].type === SPECIAL_CORNER_NODE) {
+      this.connectNodes(['Custom', Object.assign({}, (0, _Designer.overlayPlus)(source, "node-".concat(_count), position))], "".concat(source, "-ep-bottom"), "".concat(newNodeId, "-ep-top"));
+    } else {
+      this.connectNodes(['Custom', Object.assign({}, (0, _Designer.overlayPlus)(source, "node-".concat(_count), position))], "".concat(source, "-ep-bottom"), "node-".concat(_count, "-ep-top"));
+    }
+    if (item.wrapper) {
+      this.connectNodes(null, "node-".concat(_count, "-ep-left"), "".concat(lefttopId, "-ep-right"), {
+        strokeWidth: 2,
+        stroke: "#1565C0",
+        dashstyle: "2 4"
+      });
+      this.connectNodes(null, "node-".concat(_count, "-ep-right"), "".concat(righttopId, "-ep-left"), {
+        strokeWidth: 2,
+        stroke: "#1565C0",
+        dashstyle: "2 4"
+      });
+      this.connectNodes(null, "".concat(leftbotId, "-ep-right"), "".concat(endId, "-ep-left"), {
+        strokeWidth: 2,
+        stroke: "#1565C0",
+        dashstyle: "2 4"
+      });
+      this.connectNodes(null, "".concat(rightbotId, "-ep-left"), "".concat(endId, "-ep-right"), {
+        strokeWidth: 2,
+        stroke: "#1565C0",
+        dashstyle: "2 4"
+      });
+      this.connectNodes(item.wrapper ? null : ['Custom', Object.assign({}, (0, _Designer.overlayPlus)(lefttopId, leftbotId, 'left'))], "".concat(lefttopId, "-ep-bottom"), "".concat(leftbotId, "-ep-top"), {
+        strokeWidth: 2,
+        stroke: "#1565C0",
+        dashstyle: "2 4"
+      });
+      this.connectNodes(item.wrapper ? null : ['Custom', Object.assign({}, (0, _Designer.overlayPlus)(righttopId, rightbotId, 'right'))], "".concat(righttopId, "-ep-bottom"), "".concat(rightbotId, "-ep-top"), {
+        strokeWidth: 2,
+        stroke: "#1565C0",
+        dashstyle: "2 4"
+      });
+    }
+    if (branches < 1) {
+      if (this.nodes[target].type === SPECIAL_CORNER_NODE) {
+        this.connectNodes(['Custom', Object.assign((0, _Designer.overlayPlus)("node-".concat(_count), target, position))], "node-".concat(_count, "-ep-bottom"), "".concat(target, "-ep-top"));
+      } else {
+        this.connectNodes(['Custom', (0, _Designer.overlayPlus)("node-".concat(_count), target, position)], "node-".concat(_count, "-ep-bottom"), "".concat(target, "-ep-top"));
+      }
+    }
+
+    //debugger
+    //        this.firstInstance.draggable(this.paletteBoard);
+
+    // add next previous property to new-node data
+    if (position && typeof this.nodes[source].next === 'object' && this.nodes[source].next) {
+      this.nodes[source].next[position] = "node-".concat(_count);
+    } else {
+      this.nodes[source].next = "node-".concat(_count);
+    }
+    // ////////console.log('source ', position, this.nodes[source].next)
+    if (position && typeof this.nodes[target].previous === 'object' && this.nodes[target].previous) {
+      this.nodes[target].previous[position] = newEndNode ? "node-end-".concat(_count) : "node-".concat(_count);
+    } else {
+      this.nodes[target].previous = newEndNode ? "node-end-".concat(_count) : "node-".concat(_count);
+    }
+
+    // let datatype = JSON.parse(node.getAttribute('datatype'));
+    let newObject = {};
+    //////console.log('1806 ', config.taskType[datatype.parent][datatype.type])
+
+    let propertiesClone;
+    if (copyTask) {
+      if (copyTask.configuration.properties instanceof Array) {
+        propertiesClone = [];
+        copyTask.configuration.properties.forEach(prop => {
+          propertiesClone.push(Object.assign({}, prop));
+        });
+      } else {
+        propertiesClone = Object.assign({}, copyTask.configuration.properties);
+      }
+    } else {
+      console.log(this.nodes);
+      console.log(_workflow.config);
+      console.log(_jsplumb.jsPlumb.getConnections());
+
+      // comment by anup 
+      //propertiesClone = item.schema.type === 'array' ? [] : {};
+      //Add by anup
+      propertiesClone = {};
+      if (item.defaultFormData) {
+        propertiesClone = item.defaultFormData;
+      }
+    }
+    this.nodes["node-".concat(_count)] = {
+      number: _count,
+      next: '',
+      previous: source,
+      next: '',
+      actionConfig: copyTask ? copyTask.actionConfig : {},
+      configuration: {
+        actionID: "node-".concat(_count),
+        actionTitle: item.title,
+        actionName: copyTask ? copyTask.configuration.actionName : item.name,
+        actionImage: item.actionImage,
+        properties: propertiesClone,
+        nodeType: item.nodeType,
+        isDisabled: copyTask ? copyTask.configuration.isDisabled : false,
+        isHidden: false
+      },
+      branches: null,
+      wrapper: item.wrapper,
+      count: _count,
+      nodeId: "node-".concat(_count),
+      element: newNode,
+      type: datatype.type,
+      nodeType: item.nodeType,
+      branch: branches,
+      // schema: copyTask && copyTask.schema ? Object.assign({}, copyTask.schema) : item.schema,  //comment by anup 
+      // uiSchema: copyTask && copyTask.uiSchema ? Object.assign({}, copyTask.uiSchema) : item.uiSchema, //comment by anup 
+      onBranch: position,
+      parent: '',
+      taskType: item.type,
+      datatype: datatype
+      // code: config.taskType[datatype.parent][datatype.type].code
+    };
+
+    if (this.nodes[newNodeId].configuration.isDisabled) {
+      this.nodes[newNodeId].element.classList.add('is-disabled');
+    }
+    if (branches > 0) {
+      this.nodes[newNodeId].next = {};
+      this.nodes[endId].previous = {};
+      this.nodes[newNodeId].branches = [];
+      for (var i = 0; i < branches; i++) {
+        this.nodes[newNodeId].next[i] = "node-topbranch_".concat(i, "-").concat(_count);
+        this.nodes[endId].previous[i] = "node-botbranch_".concat(i, "-").concat(_count);
+        this.nodes["node-".concat(_count)][i] = ["node-topbranch_".concat(i, "-").concat(_count), "node-botbranch_".concat(i, "-").concat(_count)];
+        this.nodes[newNodeId].branches[i] = Object.assign({}, item.branches[i], {
+          actions: []
+        });
+      }
+    } else {
+      this.nodes[newNodeId].next = target;
+    }
+    if (this.nodes[source].parent) {
+      ////////console.log(this.nodes[source].parent, this.nodes[source]);
+      if (this.nodes[source].type === SPECIAL_END_NODE) {
+        parent = this.nodes[this.nodes[source].parent].parent;
+      } else {
+        parent = this.nodes[source].parent;
+      }
+    }
+    this.nodes["node-".concat(_count)].parent = parent;
+    let fields = item.fields;
+    if (branches >= 1) {
+      let currentNestedLevel = 0;
+      if (parent) {
+        currentNestedLevel = this.nodes[parent].nestedLevel + 1;
+      }
+      this.nodes["node-".concat(_count)].nestedLevel = currentNestedLevel;
+    }
+
+    // add this node id to parent left, right array
+    if (parent) {
+      if (branches >= 1 && position) {
+        this.nodes[parent][position] = [...this.nodes[parent][position], "node-".concat(_count), "node-end-".concat(_count), ...nodesCornerList];
+      } else if (position) {
+        ////////console.log('===) add new node to parent ', parent, position, `node-${_count}`)
+        if (this.nodes[parent][position]) {
+          this.nodes[parent][position].push("node-".concat(_count));
+        } else {
+          this.nodes[parent][position] = ["node-".concat(_count)];
+        }
+      }
+      let cP = this.nodes[parent].parent;
+      while (cP) {
+        if (this.nodes[cP].branch >= 1) {
+          let positionBranch;
+          for (var i = 0; i < this.nodes[cP].branch; i++) {
+            if (this.nodes[cP][i].includes(parent)) positionBranch = i;
+          }
+          if (branches >= 1) {
+            this.nodes[cP][positionBranch] = [...this.nodes[cP][positionBranch], "node-".concat(_count), "node-end-".concat(_count), ...nodesCornerList];
+          } else {
+            this.nodes[cP][positionBranch].push("node-".concat(_count));
+          }
+        }
+        ////////console.log(this.nodes[cP])
+        cP = this.nodes[cP].parent;
+        // ////////console.log('2605 cP ', cP)
+      }
+    }
+
+    if (branches >= 1 && this.nodes["node-".concat(_count)].parent) self.expandFlowchart(this.nodes["node-".concat(_count)].parent, "node-".concat(_count), position);
+    this.firstInstance.repaintEverything();
+    ////console.log(this.nodes)
+    // increase _count variable
+    _count++;
+  }
+
+  ////console.log(this.nodes[this.curCopyTask], this.curCopyTask)
+
+  handleClickOverlay(overlay, e, i) {
+    if (e.target.className.indexOf('jtk-overlay') >= 0) return;
+    if (!this.curCopyTask) return;
+    ////console.log('handleClickOverlay ', overlay, e, i)
+    this.currentFocusOverlay = overlay;
+    if (!this.nodes[this.curCopyTask].branch) {
+      this.addTaskToDropZone(overlay.canvas, null, this.nodes[this.curCopyTask].datatype, this.nodes[this.curCopyTask]);
+      // renameTask(`node-${_count-1}`, self.nodes, self.nodes[this.curCopyTask].displayName);
+      this.curCopyTask = null;
+    } else {
+      let parent = this.nodes[this.curCopyTask];
+      this.addBranchTaskToPlaceHolder(this.curCopyTask, overlay.canvas);
+    }
+    this.curCopyTask = null;
+  }
+  moveDownFlowchart(item, type, position, branches) {
+    if (!this.nodes[item]) return;
+    // this.nodes[item].element.style.top = `${this.nodes[item].element.offsetTop + _gap}px`;
+    ////console.log('moveDownFlowchart', type, item, this.nodes[item].previous, this.nodes)
+    let currentGap = this.nodes[item].element.offsetTop - this.nodes[this.nodes[item].previous].element.offsetTop - this.nodes[this.nodes[item].previous].element.offsetHeight;
+    let gapPlus;
+    let self = this;
+    if (branches >= 2) {
+      gapPlus = _workflow.config.nodeGap * 3 + _workflow.config.nodeSizeDefault / 2;
+    } else if (branches === 1) {
+      gapPlus = _workflow.config.nodeGap * 3 + _workflow.config.nodeSizeDefault;
+    } else {
+      gapPlus = _workflow.config.nodeGap * 2 + _workflow.config.nodeSizeDefault;
+    }
+    //////console.log('0806 moveDownFlowchart ', branches, item, this.nodes[item], currentGap, gapPlus)
+    gapPlus = gapPlus - currentGap;
+    while (item) {
+      ////console.log('08/06 ', item, gapPlus)
+      this.nodes[item].element.style.top = "".concat(this.nodes[item].element.offsetTop + gapPlus, "px");
+      let itemP = item.split('-');
+      let corner;
+      // switch (itemP[1]) {
+      //     case 'leftbot':
+      //         corner = 'rightbot';
+      //         break;
+      //     case 'lefttop':
+      //         corner = 'righttop';
+      //         break;
+      //     case 'righttop':
+      //         corner = 'lefttop';
+      //         break;
+      //     case 'rightbot':
+      //         corner = 'leftbot';
+      //         break;
+      //     default:
+      //         break;
+      // }
+      //
+      // // ////////console.log('moveDownFlowchart ', item, itemP, corner)
+      // if (['rightbot', 'righttop', 'lefttop', 'leftbot'].includes(itemP[1])) {
+      //     this.nodes[`${itemP[0]}-${corner}-${itemP[2]}`].element.style.top = `${this.nodes[`${itemP[0]}-${corner}-${itemP[2]}`].element.offsetTop + gapPlus}px`;
+      // }
+      if (itemP[1].indexOf('botbranch') >= 0) {
+        let c = this.nodes[item].count;
+        for (var i = 0; i < this.nodes[this.nodes[item].parent].branch; i++) {
+          if (item === "node-botbranch_".concat(i, "-").concat(c)) continue;
+          ////////console.log('0806 move down ', `node-botbranch_${i}-${c}`, `${this.nodes[`node-botbranch_${i}-${c}`].element.style.offsetTop + gapPlus}px`)
+          this.nodes["node-botbranch_".concat(i, "-").concat(c)].element.style.top = "".concat(this.nodes["node-botbranch_".concat(i, "-").concat(c)].element.offsetTop + gapPlus, "px");
+          ////////console.log('0806 move down ', this.nodes[`node-botbranch_${i}-${c}`].element.style.offsetTop)
+        }
+
+        item = this.nodes[item].next;
+        continue;
+      }
+      // ////////console.log(this.nodes[item], position)
+      // if (typeof this.nodes[item].next === 'object' && this.nodes[item].next && !position) {
+      //     self.nodes[item].left.forEach(child => {
+      //         self.nodes[child].element.style.top = `${this.nodes[child].element.offsetTop + gapPlus}px`;
+      //     });
+      //     self.nodes[item].right.forEach(child => {
+      //         self.nodes[child].element.style.top = `${this.nodes[child].element.offsetTop + gapPlus}px`;
+      //     });
+      //     item = `${itemP[0]}-end-${itemP[1]}`;
+      // }
+      ////////console.log('======> ', item, self.nodes[item], `node-leftbot-${self.nodes[item].count}`, item, self.nodes)
+      if (this.nodes[item].type === SPECIAL_END_NODE && this.nodes[item].parent && this.nodes[this.nodes[item].parent].wrapper) {
+        let itemLeft = "node-leftbot-".concat(self.nodes[item].count);
+        let itemRight = "node-rightbot-".concat(self.nodes[item].count);
+        this.nodes[itemLeft].element.style.top = "".concat(this.nodes[itemLeft].element.offsetTop + gapPlus, "px");
+        this.nodes[itemRight].element.style.top = "".concat(this.nodes[itemRight].element.offsetTop + gapPlus, "px");
+      }
+      if (this.nodes[item].wrapper) {
+        //////console.log('moveDownFlowchart ', this.nodes[item])
+        this.nodes["node-lefttop-".concat(this.nodes[item].count)].element.style.top = this.nodes["node-lefttop-".concat(this.nodes[item].count)].element.offsetTop + gapPlus + 'px';
+        this.nodes["node-leftbot-".concat(this.nodes[item].count)].element.style.top = this.nodes["node-leftbot-".concat(this.nodes[item].count)].element.offsetTop + gapPlus + 'px';
+        this.nodes["node-righttop-".concat(this.nodes[item].count)].element.style.top = this.nodes["node-righttop-".concat(this.nodes[item].count)].element.offsetTop + gapPlus + 'px';
+        this.nodes["node-rightbot-".concat(this.nodes[item].count)].element.style.top = this.nodes["node-rightbot-".concat(this.nodes[item].count)].element.offsetTop + gapPlus + 'px';
+      }
+      if (this.nodes[item].branch >= 1) {
+        for (var i = 0; i < this.nodes[item].branch; i++) {
+          this.nodes[item][i].forEach(n => {
+            this.nodes[n].element.style.top = "".concat(this.nodes[n].element.offsetTop + gapPlus, "px");
+          });
+        }
+        this.nodes["node-end-".concat(this.nodes[item].count)].element.style.top = "".concat(this.nodes["node-end-".concat(this.nodes[item].count)].element.offsetTop + gapPlus, "px");
+        item = "node-end-".concat(this.nodes[item].count);
+      }
+      if (!this.nodes[item].branch) {
+        //////console.log(item, this.nodes[item])
+        item = this.nodes[item].next;
+      }
+      ////////console.log(item)
+    }
+  }
+
+  narrowFlowchart(deletedTask) {
+    let self = this;
+    let parent = this.nodes[deletedTask].parent;
+    let child = deletedTask;
+    while (parent) {
+      let colLeft = Number.MAX_SAFE_INTEGER;
+      let colRight = Number.MIN_SAFE_INTEGER;
+      let deletedTaskOnBranch = Number(this.nodes[child].onBranch);
+      let rightPosOfPre = Number.MIN_SAFE_INTEGER;
+      let leftPosOfNext = Number.MAX_SAFE_INTEGER;
+      let gapLeft, gapRight;
+      let narrowLeft, narrowRight;
+      let parentHalfBranch = Math.floor(this.nodes[parent].branch / 2);
+      let centerPosition = self.nodes[parent].element.offsetLeft + self.nodes[parent].element.offsetWidth / 2;
+      ////console.log('2606', parent, child)
+      this.nodes[parent][deletedTaskOnBranch].forEach((item, i) => {
+        ////console.log('asdfsadfas', item)
+        if (item === deletedTask || this.nodes[item].parent === deletedTask) return;
+        ////console.log('=====> ', item)
+        let l = this.nodes[item].element.offsetLeft;
+        // ////console.log(colLeft, l)
+        if (colLeft > l) colLeft = l;
+        let r = this.nodes[item].element.offsetLeft + this.nodes[item].element.offsetWidth;
+        if (colRight < r) colRight = r;
+      });
+
+      // right position of Previous branch
+      if (deletedTaskOnBranch == 0) rightPosOfPre = colLeft;else {
+        this.nodes[parent][deletedTaskOnBranch - 1].forEach((item, i) => {
+          let r = this.nodes[item].element.offsetLeft + this.nodes[item].element.offsetWidth;
+          if (rightPosOfPre < r) rightPosOfPre = r;
+        });
+      }
+
+      // left position of next branch
+      if (deletedTaskOnBranch + 1 == this.nodes[parent].branch) leftPosOfNext = colRight;else {
+        this.nodes[parent][deletedTaskOnBranch + 1].forEach((item, i) => {
+          let l = this.nodes[item].element.offsetLeft;
+          if (leftPosOfNext > l) leftPosOfNext = l;
+        });
+      }
+      gapLeft = colLeft - rightPosOfPre;
+      gapRight = leftPosOfNext - colRight;
+      if (gapLeft > 180) narrowLeft = gapLeft - 180;
+      if (gapRight > 180) narrowRight = gapRight - 180;
+      if (!narrowLeft && !narrowRight) {
+        child = parent;
+        parent = this.nodes[child].parent;
+        return;
+      }
+      if (deletedTaskOnBranch === parentHalfBranch && self.nodes[parent].branch % 2) {
+        if (narrowLeft) {
+          for (var i = 0; i < parentHalfBranch; i++) {
+            this.nodes[parent][i].forEach((nodeId, j) => {
+              self.nodes[nodeId].element.style.left = self.nodes[nodeId].element.offsetLeft + narrowLeft + 'px';
+            });
+          }
+        }
+        if (narrowRight) {
+          for (var i = parentHalfBranch + 1; i < self.nodes[parent].branch; i++) {
+            this.nodes[parent][i].forEach((nodeId, j) => {
+              self.nodes[nodeId].element.style.left = self.nodes[nodeId].element.offsetLeft - narrowRight + 'px';
+            });
+          }
+        }
+      } else if (deletedTaskOnBranch < parentHalfBranch) {
+        if (narrowLeft) {
+          for (var i = 0; i < deletedTaskOnBranch; i++) {
+            this.nodes[parent][i].forEach((nodeId, j) => {
+              self.nodes[nodeId].element.style.left = self.nodes[nodeId].element.offsetLeft + narrowLeft + 'px';
+            });
+          }
+        }
+        if (narrowRight) {
+          for (var i = 0; i <= deletedTaskOnBranch; i++) {
+            this.nodes[parent][i].forEach((nodeId, j) => {
+              // depend on gap between this element and center position
+              let gap = centerPosition - colRight;
+              ////console.log('=====> nodeId', nodeId, gap, deletedTaskOnBranch + 1 === parentHalfBranch, (deletedTaskOnBranch + 1 === parentHalfBranch) ? gap - 180 : narrowRight)
+              self.nodes[nodeId].element.style.left = self.nodes[nodeId].element.offsetLeft + (deletedTaskOnBranch + 1 === parentHalfBranch ? gap - 180 : narrowRight) + 'px';
+            });
+          }
+        }
+      } else if (deletedTaskOnBranch >= parentHalfBranch) {
+        if (narrowLeft) {
+          for (var i = deletedTaskOnBranch; i < this.nodes[parent].branch; i++) {
+            ////console.log(this.nodes[parent][i])
+            // depend on gap between this element and center position
+            let gap = colLeft - centerPosition;
+            this.nodes[parent][i].forEach((nodeId, j) => {
+              self.nodes[nodeId].element.style.left = self.nodes[nodeId].element.offsetLeft - (deletedTaskOnBranch === parentHalfBranch ? gap - 180 : narrowLeft) + 'px';
+            });
+          }
+        }
+        if (narrowRight) {
+          for (var i = deletedTaskOnBranch + 1; i < this.nodes[parent].branch; i++) {
+            this.nodes[parent][i].forEach((nodeId, j) => {
+              self.nodes[nodeId].element.style.left = self.nodes[nodeId].element.offsetLeft - narrowRight + 'px';
+            });
+          }
+        }
+      }
+      child = parent;
+      parent = this.nodes[child].parent;
+    }
+  }
+  expandFlowchart(item, childItem, position) {
+    let self = this;
+    let count = 1;
+    while (item) {
+      let childCenter = this.nodes["node-end-".concat(this.nodes[childItem].count)].element.offsetLeft;
+      let self = this;
+      let childColumns = self.nodes[childItem].branch;
+      let childLeftColumns = Number.MAX_SAFE_INTEGER;
+      let childRightColumns = Number.MIN_SAFE_INTEGER;
+      this.nodes[childItem][0].forEach(nodeId => {
+        if (childLeftColumns > self.nodes[nodeId].element.offsetLeft) childLeftColumns = self.nodes[nodeId].element.offsetLeft;
+      });
+      this.nodes[childItem][this.nodes[childItem].branch - 1].forEach(nodeId => {
+        if (childRightColumns < self.nodes[nodeId].element.offsetLeft + self.nodes[nodeId].element.offsetWidth) {
+          childRightColumns = self.nodes[nodeId].element.offsetLeft + self.nodes[nodeId].element.offsetWidth;
+        }
+      });
+      childLeftColumns = (childCenter - childLeftColumns) / 180;
+      childRightColumns = (childRightColumns - childCenter) / 180;
+      let childOnBranch;
+      let childHalfColumn = Math.floor(childColumns / 2);
+      for (var i = 0; i < self.nodes[item].branch; i++) {
+        if (self.nodes[item][i].includes(childItem)) childOnBranch = i;
+      }
+      let parentHalfBranch = Math.floor(self.nodes[item].branch / 2);
+      let leftGap;
+      let rightGap;
+      // calculate expect rightgap
+      let leftColumnsNextBranch = Number.MAX_SAFE_INTEGER;
+      if (childOnBranch + 1 === self.nodes[item].branch) {
+        leftColumnsNextBranch = 0;
+      } else {
+        let centerNextBranch = self.nodes["node-topbranch_".concat(childOnBranch + 1, "-").concat(self.nodes[item].count)].element.offsetLeft;
+        this.nodes[item][childOnBranch + 1].forEach(nodeId => {
+          if (leftColumnsNextBranch > self.nodes[nodeId].element.offsetLeft) leftColumnsNextBranch = self.nodes[nodeId].element.offsetLeft;
+        });
+        leftColumnsNextBranch = (centerNextBranch - leftColumnsNextBranch) / 180;
+      }
+      // end calculate expect rightgap
+      // calculate expect leftgap
+      let rightColumnsPreBranch = Number.MIN_SAFE_INTEGER;
+      if (childOnBranch === 0) {
+        rightColumnsPreBranch = 0;
+      } else {
+        let centerPreBranch = self.nodes["node-topbranch_".concat(childOnBranch - 1, "-").concat(self.nodes[item].count)].element.offsetLeft;
+        this.nodes[item][childOnBranch - 1].forEach(nodeId => {
+          if (rightColumnsPreBranch < self.nodes[nodeId].element.offsetLeft + self.nodes[nodeId].element.offsetWidth) {
+            rightColumnsPreBranch = self.nodes[nodeId].element.offsetLeft + self.nodes[nodeId].element.offsetWidth;
+          }
+        });
+        rightColumnsPreBranch = (rightColumnsPreBranch - centerPreBranch) / 180;
+      }
+      let expectLeftGap = (childLeftColumns + rightColumnsPreBranch + 1) * 180;
+      let expectRightGap = (childRightColumns + leftColumnsNextBranch + 1) * 180;
+      if (childOnBranch === 0) leftGap = expectLeftGap + 1;else {
+        leftGap = this.nodes["node-topbranch_".concat(childOnBranch, "-").concat(this.nodes[item].count)].element.offsetLeft - this.nodes["node-topbranch_".concat(childOnBranch - 1, "-").concat(this.nodes[item].count)].element.offsetLeft;
+      }
+      if (childOnBranch === self.nodes[item].branch - 1) {
+        rightGap = expectRightGap + 1;
+      } else {
+        rightGap = -this.nodes["node-topbranch_".concat(childOnBranch, "-").concat(this.nodes[item].count)].element.offsetLeft + this.nodes["node-topbranch_".concat(childOnBranch + 1, "-").concat(this.nodes[item].count)].element.offsetLeft;
+      }
+      if (childOnBranch === parentHalfBranch && self.nodes[item].branch % 2) {
+        if (leftGap <= expectLeftGap) {
+          for (var i = 0; i < parentHalfBranch; i++) {
+            this.nodes[item][i].forEach((nodeId, j) => {
+              this.nodes[nodeId].element.style.left = this.nodes[nodeId].element.offsetLeft - (expectLeftGap - leftGap) + 'px';
+            });
+          }
+        }
+        for (var i = parentHalfBranch + 1; i < self.nodes[item].branch; i++) {
+          this.nodes[item][i].forEach((nodeId, j) => {
+            self.nodes[nodeId].element.style.left = self.nodes[nodeId].element.offsetLeft + (expectRightGap - rightGap) + 'px';
+          });
+        }
+      } else if (childOnBranch < parentHalfBranch) {
+        if (rightGap <= expectRightGap) {
+          for (var i = 0; i <= childOnBranch; i++) {
+            this.nodes[item][i].forEach((nodeId, j) => {
+              self.nodes[nodeId].element.style.left = self.nodes[nodeId].element.offsetLeft - (expectRightGap - rightGap) + 'px';
+            });
+          }
+        }
+        if (leftGap <= expectLeftGap) {
+          for (var i = 0; i < childOnBranch; i++) {
+            this.nodes[item][i].forEach((nodeId, j) => {
+              self.nodes[nodeId].element.style.left = self.nodes[nodeId].element.offsetLeft - (expectLeftGap - leftGap) + 'px';
+            });
+          }
+        }
+      } else if (childOnBranch >= parentHalfBranch) {
+        if (leftGap <= expectLeftGap) {
+          for (var i = childOnBranch; i < this.nodes[item].branch; i++) {
+            this.nodes[item][i].forEach((nodeId, j) => {
+              ////console.log('====> bug ', nodeId)
+              self.nodes[nodeId].element.style.left = self.nodes[nodeId].element.offsetLeft + (expectLeftGap - leftGap) + 'px';
+            });
+          }
+        }
+        if (leftGap <= expectLeftGap) {
+          for (var i = childOnBranch + 1; i < this.nodes[item].branch; i++) {
+            this.nodes[item][i].forEach((nodeId, j) => {
+              self.nodes[nodeId].element.style.left = self.nodes[nodeId].element.offsetLeft + (expectRightGap - rightGap) + 'px';
+            });
+          }
+        }
+      }
+      if (this.nodes[item].wrapper) {
+        let itemp = item.split('-');
+        let endItem = "".concat(itemp[0], "-end-").concat(itemp[1]);
+        let width = 0;
+        let cornerPosition = (0, _Designer.getWidthOfGroup)(self.nodes, item);
+        if (cornerPosition.left !== false) {
+          self.nodes["node-lefttop-".concat(self.nodes[item].count)].element.style.left = "".concat(cornerPosition.left - 15, "px");
+          self.nodes["node-leftbot-".concat(self.nodes[item].count)].element.style.left = "".concat(cornerPosition.left - 15, "px");
+        }
+        if (cornerPosition.right !== false) {
+          self.nodes["node-righttop-".concat(self.nodes[item].count)].element.style.left = "".concat(cornerPosition.right + 15, "px");
+          self.nodes["node-rightbot-".concat(self.nodes[item].count)].element.style.left = "".concat(cornerPosition.right + 15, "px");
+        }
+      }
+      childItem = item;
+      item = this.nodes[item].parent;
+      count++;
+    }
+  }
+  hoverTaskAction(e) {}
+  flowchartToJson() {
+    let itemId = this.nodes[NODE_START].next;
+    let data = [];
+    let text = '[\r\n';
+    let self = this;
+    let jsonData = {
+      "workflowName": "",
+      "workflowDescription": "",
+      "workflowType": "",
+      "isPublished": 0,
+      "definition": {
+        "variables": [],
+        "actions": [],
+        "settings": {}
+      },
+      "createdTime": "",
+      "createdBy": "",
+      "modifiedTime": "",
+      "modifiedBy": ""
+    };
+    // if (this.importData) {
+    //     jsonData = Object.assign({}, this.importData, {
+    //         workflowDefinition: {
+    //             state: { modified: false },
+    //             actions: [],
+    //             settings: {}
+    //         }
+    //     })
+    // }
+    while (itemId && itemId !== NODE_END) {
+      //////console.log(itemId, this.nodes[itemId])
+      if (this.nodes[itemId].type === SPECIAL_END_NODE) {
+        itemId = this.nodes[itemId].next;
+        continue;
+      }
+      if (this.nodes[itemId].type === 'set_variables') {
+        //console.log('getTaskData call')
+        jsonData.definition.actions.push((0, _Designer.getTaskData)(this.nodes[itemId], this.nodes));
+      } else if (this.nodes[itemId].branch >= 1) {
+        let data = self.getDataBranchNode(itemId);
+        //console.log('0207 ---------> ', data)
+        // text+= `${data},\r\n`;
+        //console.log('getTaskData call')
+        jsonData.definition.actions.push((0, _Designer.getTaskData)(data, this.nodes));
+      } else {
+        //console.log('getTaskData call')
+        jsonData.definition.actions.push((0, _Designer.getTaskData)(this.nodes[itemId], this.nodes));
+      }
+      if (self.nodes[itemId].branch >= 1) {
+        let itemIdP = itemId.split('-');
+        itemId = "".concat(itemIdP[0], "-end-").concat(itemIdP[1]);
+      } else {
+        itemId = this.nodes[itemId].next;
+      }
+    }
+    // text += ']';
+    jsonData.definition.variables = self.getVariablesHardcode();
+    // jsonData.definition.settings = this.props.workflowSettingReducer.detail;
+    // jsonData.workflowType = this.props.workflowSettingReducer.detail.workflowType;
+    // jsonData.workflowName = this.props.workflowSettingReducer.detail.workflowName;
+    // jsonData.workflowDescription = this.props.workflowSettingReducer.detail.workflowDescription;
+    return jsonData;
+  }
+  exportFlowchart() {
+    let data = this.flowchartToJson();
+
+    // downloadJSON(JSON.stringify(data, null, "\t"), 'flowchart.json', 'text/plain');
+    //downloadJSON(JSON.stringify(data, null, '\t'), 'flowchart.json', 'text/plain');
+  }
+
+  getDataBranchNode(node) {
+    if (node === this.flexibleNode.id) {
+      this.flexibleNode.id = null;
+      return this.flexibleNode.jsonData;
+    }
+    let self = this;
+    let left = self.nodes[node].next.left;
+    let right = self.nodes[node].next.right;
+    let leftData = [];
+    let rightData = [];
+    let nodeP = node.split('-');
+    let newData = [];
+    let actionsData = Object.assign({}, self.nodes[node], {
+      branches: []
+    });
+    for (var i = 0; i < self.nodes[node].branch; i++) {
+      let cNode = self.nodes[self.nodes[node].next[i]].next;
+      let endBranchId = "node-botbranch_".concat(i, "-").concat(self.nodes[node].count);
+      newData[i] = [];
+      let curBranch = Object.assign({}, this.nodes[node].branches[i], {
+        actions: []
+      });
+      while (cNode !== endBranchId) {
+        //console.log('ele in branch  ', cNode, this.nodes[cNode])
+        ////console.log('get data while ', cNode, endBranchId, this.nodes[cNode])
+        let l = '';
+        if (this.nodes[cNode].type === SPECIAL_END_NODE || this.nodes[cNode].type === SPECIAL_CORNER_NODE) {
+          cNode = self.nodes[cNode].next;
+          continue;
+        }
+        if (this.nodes[cNode].type === 'set_variables') {
+          //console.log('getTaskData call')
+          curBranch.actions.push((0, _Designer.getTaskData)(this.nodes[cNode], this.nodes));
+        } else if (self.nodes[cNode].branch >= 1) {
+          l = self.getDataBranchNode(cNode);
+          //console.log('getTaskData call')
+          curBranch.actions.push((0, _Designer.getTaskData)(l, this.nodes));
+        } else {
+          //console.log('getTaskData call')
+          curBranch.actions.push((0, _Designer.getTaskData)(this.nodes[cNode], this.nodes));
+        }
+        if (self.nodes[cNode].branch >= 1) {
+          cNode = "node-end-".concat(this.nodes[cNode].count);
+        } else {
+          cNode = self.nodes[cNode].next;
+        }
+      }
+      actionsData.branches[i] = curBranch;
+    }
+    //console.log('0207 --> ', actionsData)
+    return actionsData;
+  }
+  getDataBranchTask(node) {
+    //////console.log(node, this.nodes[node])
+    let self = this;
+    let cNode = this.nodes[node].next[0];
+    let endId = "node-end-".concat(this.nodes[node].count);
+    let data = [];
+    let text = '';
+    let actionsData = Object.assign({}, self.nodes[node], {
+      branches: []
+    });
+    // if (!actionsData.branches) actionsData.branches = [];
+    // actionsData.branches = [];
+    //////console.log(cNode)
+    let curBranch = Object.assign({}, this.nodes[node].branches[0], {
+      actions: []
+    });
+    while (cNode !== endId) {
+      ////console.log('0106 ', cNode, this.nodes[cNode])
+      let l;
+      if (this.nodes[cNode].type === 'set_variables') {
+        //console.log('getTaskData call')
+        actionsData.branches[0].actions.push((0, _Designer.getTaskData)(this.nodes[cNode], this.nodes));
+      } else if (self.nodes[cNode].branch >= 1) {
+        l = self.getDataBranchNode(cNode);
+        actionsData.branches[0].actions.push((0, _Designer.getTaskData)(cNode, this.nodes));
+      } else if (self.nodes[cNode].type !== SPECIAL_END_NODE && this.nodes[cNode].type !== SPECIAL_CORNER_NODE) {
+        //console.log('getTaskData call')
+        actionsData.branches[0].actions.push((0, _Designer.getTaskData)(this.nodes[cNode], this.nodes));
+      }
+      // if (l) data.push(l);
+      if (self.nodes[cNode].branch >= 1) {
+        cNode = "node-end-".concat(this.nodes[cNode].count);
+      } else {
+        cNode = this.nodes[cNode].next;
+      }
+    }
+    return actionsData;
+  }
+  importedJsonFile(jsonData) {
+    let temPermission = jsonData.permission ? _objectSpread({}, jsonData.permission) : {
+      read: [],
+      readAl: [],
+      write: [],
+      design: []
+    };
+    temPermission.read = temPermission.read ? temPermission.read.map(member => ({
+      value: member.id,
+      label: member.email
+    })) : [];
+    temPermission.design = temPermission.design ? temPermission.design.map(member => ({
+      value: member.id,
+      label: member.email
+    })) : [];
+    this.setState({
+      permission: temPermission
+    });
+    this.importData = jsonData;
+    this.reRenderFromFile();
+
+    // comment by anup
+    // jsonData && jsonData.definition && this.props.updateWorkflowSetting(this.importData.definition.settings);
+    // jsonData && jsonData.definition && this.props.updateWorkflowVariables(this.importData.definition.variables);
+  }
+
+  updateFormVar(node, value) {
+    let self = this;
+    self.variables[node] = {};
+    value.forEach(item => {
+      //////console.log('item ', item)
+      self.variables[node][item.var] = item.value;
+    });
+  }
+}
+var _default = Designer;
+exports.default = _default;