gg-editor/lib/index.js

A visual graph editor based on G6 and React

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var G6 = _interopDefault(require('@antv/g6'));
var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
var merge = _interopDefault(require('lodash/merge'));
var isArray = _interopDefault(require('lodash/isArray'));
var _inheritsLoose = _interopDefault(require('@babel/runtime/helpers/inheritsLoose'));
var React = _interopDefault(require('react'));
var pick = _interopDefault(require('lodash/pick'));
var cloneDeep = _interopDefault(require('lodash/cloneDeep'));
var _objectWithoutPropertiesLoose = _interopDefault(require('@babel/runtime/helpers/objectWithoutPropertiesLoose'));
var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
var omit = _interopDefault(require('lodash/omit'));
var isPlainObject = _interopDefault(require('lodash/isPlainObject'));
var ReactDOM = _interopDefault(require('react-dom'));
var delay = _interopDefault(require('lodash/delay'));

var FLOW_CONTAINER_ID = 'J_FlowContainer';
var MIND_CONTAINER_ID = 'J_MindContainer';
var LABEL_DEFAULT_TEXT = '新建节点';
var RendererType;

(function (RendererType) {
  RendererType["Canvas"] = "canvas";
  RendererType["Svg"] = "svg";
})(RendererType || (RendererType = {}));

var ItemType;

(function (ItemType) {
  ItemType["Node"] = "node";
  ItemType["Edge"] = "edge";
})(ItemType || (ItemType = {}));

var ItemState;

(function (ItemState) {
  ItemState["Active"] = "active";
  ItemState["ActiveAnchorPoints"] = "activeAnchorPoints";
  ItemState["Selected"] = "selected";
  ItemState["HighLight"] = "highLight";
  ItemState["Error"] = "error";
})(ItemState || (ItemState = {}));

var GraphType;

(function (GraphType) {
  GraphType["Flow"] = "flow";
  GraphType["Mind"] = "mind";
})(GraphType || (GraphType = {}));

var GraphMode;

(function (GraphMode) {
  GraphMode["Default"] = "default";
  GraphMode["AddNode"] = "addNode";
  GraphMode["Readonly"] = "readonly";
})(GraphMode || (GraphMode = {}));

var GraphState;

(function (GraphState) {
  GraphState["NodeSelected"] = "nodeSelected";
  GraphState["EdgeSelected"] = "edgeSelected";
  GraphState["MultiSelected"] = "multiSelected";
  GraphState["CanvasSelected"] = "canvasSelected";
})(GraphState || (GraphState = {}));

var LabelState;

(function (LabelState) {
  LabelState["Hide"] = "hide";
  LabelState["Show"] = "show";
})(LabelState || (LabelState = {}));

var AnchorPointState;

(function (AnchorPointState) {
  AnchorPointState["Enabled"] = "enabled";
  AnchorPointState["Disabled"] = "disabled";
})(AnchorPointState || (AnchorPointState = {}));

var EditorEvent;

(function (EditorEvent) {
  /** 调用命令之前触发 */
  EditorEvent["onBeforeExecuteCommand"] = "onBeforeExecuteCommand";
  /** 调用命令之后触发 */

  EditorEvent["onAfterExecuteCommand"] = "onAfterExecuteCommand";
  /** 改变画面状态触发 */

  EditorEvent["onGraphStateChange"] = "onGraphStateChange";
  /** 改变标签状态触发 */

  EditorEvent["onLabelStateChange"] = "onLabelStateChange";
})(EditorEvent || (EditorEvent = {}));

var EditorCommand;

(function (EditorCommand) {
  /** 撤销 */
  EditorCommand["Undo"] = "undo";
  /** 重做 */

  EditorCommand["Redo"] = "redo";
  /** 添加 */

  EditorCommand["Add"] = "add";
  /** 更新 */

  EditorCommand["Update"] = "update";
  /** 删除 */

  EditorCommand["Remove"] = "remove";
  /** 复制 */

  EditorCommand["Copy"] = "copy";
  /** 粘贴 */

  EditorCommand["Paste"] = "paste";
  /** 粘贴到这里 */

  EditorCommand["PasteHere"] = "pasteHere";
  /** 放大 */

  EditorCommand["ZoomIn"] = "zoomIn";
  /** 缩小 */

  EditorCommand["ZoomOut"] = "zoomOut";
  /** 插入主题 */

  EditorCommand["Topic"] = "topic";
  /** 插入子主题 */

  EditorCommand["Subtopic"] = "subtopic";
  /** 收起 */

  EditorCommand["Fold"] = "fold";
  /** 展开 */

  EditorCommand["Unfold"] = "unfold";
})(EditorCommand || (EditorCommand = {}));

var GraphCommonEvent;

(function (GraphCommonEvent) {
  /** 单击鼠标左键或者按下回车键时触发 */
  GraphCommonEvent["onClick"] = "click";
  /** 双击鼠标左键时触发 */

  GraphCommonEvent["onDoubleClick"] = "dblclick";
  /** 鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发 */

  GraphCommonEvent["onMouseEnter"] = "mouseenter";
  /** 鼠标在元素内部移到时不断触发，不能通过键盘触发 */

  GraphCommonEvent["onMouseMove"] = "mousemove";
  /** 鼠标移出目标元素后触发 */

  GraphCommonEvent["onMouseOut"] = "mouseout";
  /** 鼠标移入目标元素上方，鼠标移到其后代元素上时会触发 */

  GraphCommonEvent["onMouseOver"] = "mouseover";
  /** 鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发 */

  GraphCommonEvent["onMouseLeave"] = "mouseleave";
  /** 鼠标按钮被按下（左键或者右键）时触发，不能通过键盘触发 */

  GraphCommonEvent["onMouseDown"] = "mousedown";
  /** 鼠标按钮被释放弹起时触发，不能通过键盘触发 */

  GraphCommonEvent["onMouseUp"] = "mouseup";
  /** 用户右击鼠标时触发并打开上下文菜单 */

  GraphCommonEvent["onContextMenu"] = "contextmenu";
  /** 当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上 */

  GraphCommonEvent["onDragStart"] = "dragstart";
  /** 当拖拽元素在拖动过程中时触发的事件，此事件作用于被拖拽元素上 */

  GraphCommonEvent["onDrag"] = "drag";
  /** 当拖拽完成后触发的事件，此事件作用在被拖曳元素上 */

  GraphCommonEvent["onDragEnd"] = "dragend";
  /** 当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上 */

  GraphCommonEvent["onDragEnter"] = "dragenter";
  /** 当拖曳元素离开目标元素的时候触发的事件，此事件作用在目标元素上 */

  GraphCommonEvent["onDragLeave"] = "dragleave";
  /** 被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 */

  GraphCommonEvent["onDrop"] = "drop";
  /** 按下键盘键触发该事件 */

  GraphCommonEvent["onKeyDown"] = "keydown";
  /** 释放键盘键触发该事件 */

  GraphCommonEvent["onKeyUp"] = "keyup";
  /** 当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发 */

  GraphCommonEvent["onTouchStart"] = "touchstart";
  /** 当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用 preventDefault() 事件可以阻止滚动。 */

  GraphCommonEvent["onTouchMove"] = "touchmove";
  /** 当手指从屏幕上离开的时候触发 */

  GraphCommonEvent["onTouchEnd"] = "touchend";
})(GraphCommonEvent || (GraphCommonEvent = {}));

var GraphNodeEvent;

(function (GraphNodeEvent) {
  /** 鼠标左键单击节点时触发 */
  GraphNodeEvent["onNodeClick"] = "node:click";
  /** 鼠标双击左键节点时触发 */

  GraphNodeEvent["onNodeDoubleClick"] = "node:dblclick";
  /** 鼠标移入节点时触发 */

  GraphNodeEvent["onNodeMouseEnter"] = "node:mouseenter";
  /** 鼠标在节点内部移到时不断触发，不能通过键盘触发 */

  GraphNodeEvent["onNodeMouseMove"] = "node:mousemove";
  /** 鼠标移出节点后触发 */

  GraphNodeEvent["onNodeMouseOut"] = "node:mouseout";
  /** 鼠标移入节点上方时触发 */

  GraphNodeEvent["onNodeMouseOver"] = "node:mouseover";
  /** 鼠标移出节点时触发 */

  GraphNodeEvent["onNodeMouseLeave"] = "node:mouseleave";
  /** 鼠标按钮在节点上按下（左键或者右键）时触发，不能通过键盘触发 */

  GraphNodeEvent["onNodeMouseDown"] = "node:mousedown";
  /** 节点上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发 */

  GraphNodeEvent["onNodeMouseUp"] = "node:mouseup";
  /** 用户在节点上右击鼠标时触发并打开右键菜单 */

  GraphNodeEvent["onNodeContextMenu"] = "node:contextmenu";
  /** 当节点开始被拖拽的时候触发的事件，此事件作用在被拖曳节点上 */

  GraphNodeEvent["onNodeDragStart"] = "node:dragstart";
  /** 当节点在拖动过程中时触发的事件，此事件作用于被拖拽节点上 */

  GraphNodeEvent["onNodeDrag"] = "node:drag";
  /** 当拖拽完成后触发的事件，此事件作用在被拖曳节点上 */

  GraphNodeEvent["onNodeDragEnd"] = "node:dragend";
  /** 当拖曳节点进入目标元素的时候触发的事件，此事件作用在目标元素上 */

  GraphNodeEvent["onNodeDragEnter"] = "node:dragenter";
  /** 当拖曳节点离开目标元素的时候触发的事件，此事件作用在目标元素上 */

  GraphNodeEvent["onNodeDragLeave"] = "node:dragleave";
  /** 被拖拽的节点在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 */

  GraphNodeEvent["onNodeDrop"] = "node:drop";
})(GraphNodeEvent || (GraphNodeEvent = {}));

var GraphEdgeEvent;

(function (GraphEdgeEvent) {
  /** 鼠标左键单击边时触发 */
  GraphEdgeEvent["onEdgeClick"] = "edge:click";
  /** 鼠标双击左键边时触发 */

  GraphEdgeEvent["onEdgeDoubleClick"] = "edge:dblclick";
  /** 鼠标移入边时触发 */

  GraphEdgeEvent["onEdgeMouseEnter"] = "edge:mouseenter";
  /** 鼠标在边上移到时不断触发，不能通过键盘触发 */

  GraphEdgeEvent["onEdgeMouseMove"] = "edge:mousemove";
  /** 鼠标移出边后触发 */

  GraphEdgeEvent["onEdgeMouseOut"] = "edge:mouseout";
  /** 鼠标移入边上方时触发 */

  GraphEdgeEvent["onEdgeMouseOver"] = "edge:mouseover";
  /** 鼠标移出边时触发 */

  GraphEdgeEvent["onEdgeMouseLeave"] = "edge:mouseleave";
  /** 鼠标按钮在边上按下（左键或者右键）时触发，不能通过键盘触发 */

  GraphEdgeEvent["onEdgeMouseDown"] = "edge:mousedown";
  /** 边上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发 */

  GraphEdgeEvent["onEdgeMouseUp"] = "edge:mouseup";
  /** 用户在边上右击鼠标时触发并打开右键菜单 */

  GraphEdgeEvent["onEdgeContextMenu"] = "edge:contextmenu";
})(GraphEdgeEvent || (GraphEdgeEvent = {}));

var GraphCanvasEvent;

(function (GraphCanvasEvent) {
  /** 鼠标左键单击画布时触发 */
  GraphCanvasEvent["onCanvasClick"] = "canvas:click";
  /** 鼠标双击左键画布时触发 */

  GraphCanvasEvent["onCanvasDoubleClick"] = "canvas:dblclick";
  /** 鼠标移入画布时触发 */

  GraphCanvasEvent["onCanvasMouseEnter"] = "canvas:mouseenter";
  /** 鼠标在画布内部移到时不断触发，不能通过键盘触发 */

  GraphCanvasEvent["onCanvasMouseMove"] = "canvas:mousemove";
  /** 鼠标移出画布后触发 */

  GraphCanvasEvent["onCanvasMouseOut"] = "canvas:mouseout";
  /** 鼠标移入画布上方时触发 */

  GraphCanvasEvent["onCanvasMouseOver"] = "canvas:mouseover";
  /** 鼠标移出画布时触发 */

  GraphCanvasEvent["onCanvasMouseLeave"] = "canvas:mouseleave";
  /** 鼠标按钮在画布上按下（左键或者右键）时触发，不能通过键盘触发 */

  GraphCanvasEvent["onCanvasMouseDown"] = "canvas:mousedown";
  /** 画布上按下的鼠标按钮被释放弹起时触发，不能通过键盘触发 */

  GraphCanvasEvent["onCanvasMouseUp"] = "canvas:mouseup";
  /** 用户在画布上右击鼠标时触发并打开右键菜单 */

  GraphCanvasEvent["onCanvasContextMenu"] = "canvas:contextmenu";
  /** 当画布开始被拖拽的时候触发的事件，此事件作用在被拖曳画布上 */

  GraphCanvasEvent["onCanvasDragStart"] = "canvas:dragstart";
  /** 当画布在拖动过程中时触发的事件，此事件作用于被拖拽画布上 */

  GraphCanvasEvent["onCanvasDrag"] = "canvas:drag";
  /** 当拖拽完成后触发的事件，此事件作用在被拖曳画布上 */

  GraphCanvasEvent["onCanvasDragEnd"] = "canvas:dragend";
  /** 当拖曳画布进入目标元素的时候触发的事件，此事件作用在目标元素上 */

  GraphCanvasEvent["onCanvasDragEnter"] = "canvas:dragenter";
  /** 当拖曳画布离开目标元素的时候触发的事件，此事件作用在目标元素上 */

  GraphCanvasEvent["onCanvasDragLeave"] = "canvas:dragleave";
})(GraphCanvasEvent || (GraphCanvasEvent = {}));

var GraphCustomEvent;

(function (GraphCustomEvent) {
  /** 调用 add / addItem 方法之前触发 */
  GraphCustomEvent["onBeforeAddItem"] = "beforeadditem";
  /** 调用 add / addItem 方法之后触发 */

  GraphCustomEvent["onAfterAddItem"] = "afteradditem";
  /** 调用 remove / removeItem 方法之前触发 */

  GraphCustomEvent["onBeforeRemoveItem"] = "beforeremoveitem";
  /** 调用 remove / removeItem 方法之后触发 */

  GraphCustomEvent["onAfterRemoveItem"] = "afterremoveitem";
  /** 调用 update / updateItem 方法之前触发 */

  GraphCustomEvent["onBeforeUpdateItem"] = "beforeupdateitem";
  /** 调用 update / updateItem 方法之后触发 */

  GraphCustomEvent["onAfterUpdateItem"] = "afterupdateitem";
  /** 调用 showItem / hideItem 方法之前触发 */

  GraphCustomEvent["onBeforeItemVisibilityChange"] = "beforeitemvisibilitychange";
  /** 调用 showItem / hideItem 方法之后触发 */

  GraphCustomEvent["onAfterItemVisibilityChange"] = "afteritemvisibilitychange";
  /** 调用 setItemState 方法之前触发 */

  GraphCustomEvent["onBeforeItemStateChange"] = "beforeitemstatechange";
  /** 调用 setItemState 方法之后触发 */

  GraphCustomEvent["onAfterItemStateChange"] = "afteritemstatechange";
  /** 调用 refreshItem 方法之前触发 */

  GraphCustomEvent["onBeforeRefreshItem"] = "beforerefreshitem";
  /** 调用 refreshItem 方法之后触发 */

  GraphCustomEvent["onAfterRefreshItem"] = "afterrefreshitem";
  /** 调用 clearItemStates 方法之前触发 */

  GraphCustomEvent["onBeforeItemStatesClear"] = "beforeitemstatesclear";
  /** 调用 clearItemStates 方法之后触发 */

  GraphCustomEvent["onAfterItemStatesClear"] = "afteritemstatesclear";
  /** 布局前触发。调用 render 时会进行布局，因此 render 时会触发。或用户主动调用图的 layout 时触发 */

  GraphCustomEvent["onBeforeLayout"] = "beforelayout";
  /** 布局完成后触发。调用 render 时会进行布局，因此 render 时布局完成后会触发。或用户主动调用图的 layout 时布局完成后触发 */

  GraphCustomEvent["onAfterLayout"] = "afterlayout";
  /** 连线完成之后触发 */

  GraphCustomEvent["onAfterConnect"] = "afterconnect";
})(GraphCustomEvent || (GraphCustomEvent = {}));

var index = /*#__PURE__*/Object.freeze({
  __proto__: null,
  FLOW_CONTAINER_ID: FLOW_CONTAINER_ID,
  MIND_CONTAINER_ID: MIND_CONTAINER_ID,
  LABEL_DEFAULT_TEXT: LABEL_DEFAULT_TEXT,
  get RendererType () { return RendererType; },
  get ItemType () { return ItemType; },
  get ItemState () { return ItemState; },
  get GraphType () { return GraphType; },
  get GraphMode () { return GraphMode; },
  get GraphState () { return GraphState; },
  get LabelState () { return LabelState; },
  get AnchorPointState () { return AnchorPointState; },
  get EditorEvent () { return EditorEvent; },
  get EditorCommand () { return EditorCommand; },
  get GraphCommonEvent () { return GraphCommonEvent; },
  get GraphNodeEvent () { return GraphNodeEvent; },
  get GraphEdgeEvent () { return GraphEdgeEvent; },
  get GraphCanvasEvent () { return GraphCanvasEvent; },
  get GraphCustomEvent () { return GraphCustomEvent; }
});

function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } it = o[Symbol.iterator](); return it.next.bind(it); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
function getNodeSide(item) {
  var model = item.getModel();

  if (model.side) {
    return model.side;
  }

  var parent = item.get('parent');

  if (parent) {
    return getNodeSide(parent);
  }

  return 'right';
}
function getRectPath(x, y, w, h, r) {
  if (r) {
    return [['M', +x + +r, y], ['l', w - r * 2, 0], ['a', r, r, 0, 0, 1, r, r], ['l', 0, h - r * 2], ['a', r, r, 0, 0, 1, -r, r], ['l', r * 2 - w, 0], ['a', r, r, 0, 0, 1, -r, -r], ['l', 0, r * 2 - h], ['a', r, r, 0, 0, 1, r, -r], ['z']];
  }

  var res = [['M', x, y], ['l', w, 0], ['l', 0, h], ['l', -w, 0], ['z']];
  res.toString = toString;
  return res;
}
function getFoldButtonPath() {
  var w = 14;
  var h = 14;
  var rect = getRectPath(0, 0, w, h, 2);
  var hp = "M" + w * 3 / 14 + "," + h / 2 + "L" + w * 11 / 14 + "," + h / 2;
  var vp = '';
  return rect + hp + vp;
}
function getUnfoldButtonPath() {
  var w = 14;
  var h = 14;
  var rect = getRectPath(0, 0, w, h, 2);
  var hp = "M" + w * 3 / 14 + "," + h / 2 + "L" + w * 11 / 14 + "," + h / 2;
  var vp = "M" + w / 2 + "," + h * 3 / 14 + "L" + w / 2 + "," + h * 11 / 14;
  return rect + hp + vp;
}
function optimizeMultilineText(text, font, maxRows, maxWidth) {
  canvasContext.font = font;

  if (canvasContext.measureText(text).width <= maxWidth) {
    return text;
  }

  var multilineText = [];
  var tempText = '';
  var tempTextWidth = 0;

  for (var _iterator = _createForOfIteratorHelperLoose(text), _step; !(_step = _iterator()).done;) {
    var _char2 = _step.value;

    var _canvasContext$measur2 = canvasContext.measureText(_char2),
        _width = _canvasContext$measur2.width;

    if (tempTextWidth + _width >= maxWidth) {
      multilineText.push(tempText);
      tempText = '';
      tempTextWidth = 0;
    }

    tempText += _char2;
    tempTextWidth += _width;
  }

  if (tempText) {
    multilineText.push(tempText);
  }

  if (multilineText.length > maxRows) {
    var ellipsis = '...';
    var ellipsisWidth = canvasContext.measureText(ellipsis).width;
    var _tempText = '';
    var _tempTextWidth = 0;

    for (var _iterator2 = _createForOfIteratorHelperLoose(multilineText[maxRows - 1]), _step2; !(_step2 = _iterator2()).done;) {
      var _char = _step2.value;

      var _canvasContext$measur = canvasContext.measureText(_char),
          width = _canvasContext$measur.width;

      if (_tempTextWidth + width > maxWidth - ellipsisWidth) {
        break;
      }

      _tempText += _char;
      _tempTextWidth += width;
    }

    multilineText = multilineText.slice(0, maxRows - 1).concat("" + _tempText + ellipsis);
  }

  return multilineText.join('\n');
}

var _stateStyles;
var WRAPPER_BORDER_WIDTH = 2;
var WRAPPER_HORIZONTAL_PADDING = 10;
var WRAPPER_CLASS_NAME = 'node-wrapper';
var CONTENT_CLASS_NAME = 'node-content';
var LABEL_CLASS_NAME = 'node-label';
var bizNode = {
  options: {
    size: [120, 60],
    wrapperStyle: {
      fill: '#5487ea',
      radius: 8
    },
    contentStyle: {
      fill: '#ffffff',
      radius: 6
    },
    labelStyle: {
      fill: '#000000',
      textAlign: 'center',
      textBaseline: 'middle'
    },
    stateStyles: (_stateStyles = {}, _stateStyles[ItemState.Active] = {
      wrapperStyle: {},
      contentStyle: {},
      labelStyle: {}
    }, _stateStyles[ItemState.Selected] = {
      wrapperStyle: {},
      contentStyle: {},
      labelStyle: {}
    }, _stateStyles)
  },
  getOptions: function getOptions(model) {
    return merge({}, this.options, this.getCustomConfig(model) || {}, model);
  },
  draw: function draw(model, group) {
    var keyShape = this.drawWrapper(model, group);
    this.drawContent(model, group);
    this.drawLabel(model, group);
    return keyShape;
  },
  drawWrapper: function drawWrapper(model, group) {
    var _this$getSize = this.getSize(model),
        width = _this$getSize[0],
        height = _this$getSize[1];

    var _this$getOptions = this.getOptions(model),
        wrapperStyle = _this$getOptions.wrapperStyle;

    var shape = group.addShape('rect', {
      className: WRAPPER_CLASS_NAME,
      draggable: true,
      attrs: _extends({
        x: 0,
        y: -WRAPPER_BORDER_WIDTH * 2,
        width: width,
        height: height + WRAPPER_BORDER_WIDTH * 2
      }, wrapperStyle)
    });
    return shape;
  },
  drawContent: function drawContent(model, group) {
    var _this$getSize2 = this.getSize(model),
        width = _this$getSize2[0],
        height = _this$getSize2[1];

    var _this$getOptions2 = this.getOptions(model),
        contentStyle = _this$getOptions2.contentStyle;

    var shape = group.addShape('rect', {
      className: CONTENT_CLASS_NAME,
      draggable: true,
      attrs: _extends({
        x: 0,
        y: 0,
        width: width,
        height: height
      }, contentStyle)
    });
    return shape;
  },
  drawLabel: function drawLabel(model, group) {
    var _this$getSize3 = this.getSize(model),
        width = _this$getSize3[0],
        height = _this$getSize3[1];

    var _this$getOptions3 = this.getOptions(model),
        labelStyle = _this$getOptions3.labelStyle;

    var shape = group.addShape('text', {
      className: LABEL_CLASS_NAME,
      draggable: true,
      attrs: _extends({
        x: width / 2,
        y: height / 2,
        text: model.label
      }, labelStyle)
    });
    return shape;
  },
  setLabelText: function setLabelText(model, group) {
    var shape = group.findByClassName(LABEL_CLASS_NAME);

    if (!shape) {
      return;
    }

    var _this$getSize4 = this.getSize(model),
        width = _this$getSize4[0];

    var _shape$attr = shape.attr(),
        fontStyle = _shape$attr.fontStyle,
        fontWeight = _shape$attr.fontWeight,
        fontSize = _shape$attr.fontSize,
        fontFamily = _shape$attr.fontFamily;

    var text = model.label;
    var font = fontStyle + " " + fontWeight + " " + fontSize + "px " + fontFamily;
    shape.attr('text', optimizeMultilineText(text, font, 2, width - WRAPPER_HORIZONTAL_PADDING * 2));
  },
  update: function update(model, item) {
    var group = item.getContainer();
    this.setLabelText(model, group);
  },
  setState: function setState(name, value, item) {
    var _this = this;

    var group = item.getContainer();
    var model = item.getModel();
    var states = item.getStates();
    [WRAPPER_CLASS_NAME, CONTENT_CLASS_NAME, LABEL_CLASS_NAME].forEach(function (className) {
      var shape = group.findByClassName(className);

      var options = _this.getOptions(model);

      var shapeName = className.split('-')[1];
      shape.attr(_extends({}, options[shapeName + "Style"]));
      states.forEach(function (state) {
        if (options.stateStyles[state] && options.stateStyles[state][shapeName + "Style"]) {
          shape.attr(_extends({}, options.stateStyles[state][shapeName + "Style"]));
        }
      });
    });

    if (name === ItemState.Selected) {
      var wrapperShape = group.findByClassName(WRAPPER_CLASS_NAME);

      var _this$getSize5 = this.getSize(model),
          width = _this$getSize5[0],
          height = _this$getSize5[1];

      if (value) {
        wrapperShape.attr({
          x: -WRAPPER_BORDER_WIDTH,
          y: -WRAPPER_BORDER_WIDTH * 2,
          width: width + WRAPPER_BORDER_WIDTH * 2,
          height: height + WRAPPER_BORDER_WIDTH * 3
        });
      } else {
        wrapperShape.attr({
          x: 0,
          y: -WRAPPER_BORDER_WIDTH * 2,
          width: width,
          height: height + WRAPPER_BORDER_WIDTH * 2
        });
      }
    }

    if (this.afterSetState) {
      this.afterSetState(name, value, item);
    }
  },
  getSize: function getSize(model) {
    var _this$getOptions4 = this.getOptions(model),
        size = _this$getOptions4.size;

    if (!isArray(size)) {
      return [size, size];
    }

    return size;
  },
  getCustomConfig: function getCustomConfig() {
    return {};
  },
  getAnchorPoints: function getAnchorPoints() {
    return [];
  }
};
G6.registerNode('bizNode', bizNode);

var ANCHOR_POINT_NAME = 'anchorPoint';

var getAnchorPointDefaultStyle = function getAnchorPointDefaultStyle(item, anchorPoint) {
  var _item$getKeyShape$get = item.getKeyShape().getBBox(),
      width = _item$getKeyShape$get.width,
      height = _item$getKeyShape$get.height;

  var x = anchorPoint[0],
      y = anchorPoint[1];
  return {
    x: width * x,
    y: height * y - 3,
    r: 3,
    lineWidth: 2,
    fill: '#FFFFFF',
    stroke: '#5AAAFF'
  };
};

var getAnchorPointDefaultDisabledStyle = function getAnchorPointDefaultDisabledStyle(item, anchorPoint) {
  var _item$getKeyShape$get2 = item.getKeyShape().getBBox(),
      width = _item$getKeyShape$get2.width,
      height = _item$getKeyShape$get2.height;

  var x = anchorPoint[0],
      y = anchorPoint[1];
  return {
    img: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xLjUxNSAxLjE3Mmw1LjY1NyA1LjY1Nm0wLTUuNjU2TDEuNTE1IDYuODI4IiBzdHJva2U9IiNGRjYwNjAiIHN0cm9rZS13aWR0aD0iMS42IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIi8+PC9zdmc+',
    x: width * x - 4,
    y: height * y - 8,
    width: 8,
    height: 8
  };
};

function drawAnchorPoints(item, getAnchorPointStyle, getAnchorPointDisabledStyle) {
  var group = item.getContainer();
  var model = item.getModel();
  var anchorPoints = this.getAnchorPoints ? this.getAnchorPoints(model) : [];
  var anchorPointsState = item.get('anchorPointsState') || [];
  anchorPoints.forEach(function (anchorPoint, index) {
    if (anchorPointsState[index] === AnchorPointState.Enabled) {
      group.addShape('circle', {
        name: ANCHOR_POINT_NAME,
        attrs: _extends({}, getAnchorPointDefaultStyle(item, anchorPoint), getAnchorPointStyle(item, anchorPoint)),
        isAnchorPoint: true,
        anchorPointIndex: index,
        anchorPointState: AnchorPointState.Enabled
      });
    } else {
      group.addShape('image', {
        name: ANCHOR_POINT_NAME,
        attrs: _extends({}, getAnchorPointDefaultDisabledStyle(item, anchorPoint), getAnchorPointDisabledStyle(item, anchorPoint)),
        isAnchorPoint: true,
        anchorPointIndex: index,
        anchorPointState: AnchorPointState.Disabled
      });
    }
  });
}

function removeAnchorPoints(item) {
  var group = item.getContainer();
  var anchorPoints = group.findAllByName(ANCHOR_POINT_NAME);
  anchorPoints.forEach(function (anchorPoint) {
    group.removeChild(anchorPoint);
  });
}

function setAnchorPointsState(name, value, item, getAnchorPointStyle, getAnchorPointDisabledStyle) {
  if (getAnchorPointStyle === void 0) {
    getAnchorPointStyle = function getAnchorPointStyle() {
      return {};
    };
  }

  if (getAnchorPointDisabledStyle === void 0) {
    getAnchorPointDisabledStyle = function getAnchorPointDisabledStyle() {
      return {};
    };
  }

  if (name !== ItemState.ActiveAnchorPoints) {
    return;
  }

  if (value) {
    drawAnchorPoints.call(this, item, getAnchorPointStyle, getAnchorPointDisabledStyle);
  } else {
    removeAnchorPoints.call(this, item);
  }
}

var bizFlowNode = {
  afterSetState: function afterSetState(name, value, item) {
    setAnchorPointsState.call(this, name, value, item);
  },
  getAnchorPoints: function getAnchorPoints() {
    return [[0.5, 0], [0.5, 1], [0, 0.5], [1, 0.5]];
  }
};
G6.registerNode('bizFlowNode', bizFlowNode, 'bizNode');

var FOLD_BUTTON_CLASS_NAME = 'node-fold-button';
var UNFOLD_BUTTON_CLASS_NAME = 'node-unfold-button';
var bizMindNode = {
  afterDraw: function afterDraw(model, group) {
    this.drawButton(model, group);
  },
  afterUpdate: function afterUpdate(model, item) {
    var group = item.getContainer();
    this.drawButton(model, group);
    this.adjustButton(model, item);
  },
  drawButton: function drawButton(model, group) {
    var children = model.children,
        collapsed = model.collapsed;
    [FOLD_BUTTON_CLASS_NAME, UNFOLD_BUTTON_CLASS_NAME].forEach(function (className) {
      var shape = group.findByClassName(className);

      if (shape) {
        shape.destroy();
      }
    });

    if (!children || !children.length) {
      return;
    }

    if (!collapsed) {
      group.addShape('path', {
        className: FOLD_BUTTON_CLASS_NAME,
        attrs: {
          path: getFoldButtonPath(),
          fill: '#ffffff',
          stroke: '#ccc1d8'
        }
      });
    } else {
      group.addShape('path', {
        className: UNFOLD_BUTTON_CLASS_NAME,
        attrs: {
          path: getUnfoldButtonPath(),
          fill: '#ffffff',
          stroke: '#ccc1d8'
        }
      });
    }
  },
  adjustButton: function adjustButton(model, item) {
    var children = model.children,
        collapsed = model.collapsed;

    if (!children || !children.length) {
      return;
    }

    var group = item.getContainer();
    var shape = group.findByClassName(!collapsed ? FOLD_BUTTON_CLASS_NAME : UNFOLD_BUTTON_CLASS_NAME);

    var _this$getSize = this.getSize(model),
        width = _this$getSize[0],
        height = _this$getSize[1];

    var x = getNodeSide(item) === 'left' ? -24 : width + 10;
    var y = height / 2 - 9;
    shape.translate(x, y);
  },
  getAnchorPoints: function getAnchorPoints() {
    return [[0, 0.5], [1, 0.5]];
  }
};
G6.registerNode('bizMindNode', bizMindNode, 'bizNode');

var _stateStyles$1;
var EDGE_LABEL_CLASS_NAME = 'edge-label';
var EDGE_LABEL_WRAPPER_CLASS_NAME = 'edge-label-wrapper-label';
var bizFlowEdge = {
  options: {
    style: {
      stroke: '#ccc1d8',
      lineWidth: 2,
      shadowColor: null,
      shadowBlur: 0,
      radius: 8,
      offset: 24,
      // startArrow: {
      //   path: 'M 3,0 A 3,3,0,1,1,-3,0 A 3,3,0,1,1,3,0 Z',
      //   d: 7,
      // },
      // endArrow: {
      //   path: 'M 3,0 L -3,-3 L -3,3 Z',
      //   d: 5,
      // },
      endArrow: {
        path: 'M 0,0 L 4,3 L 4,-3 Z'
      }
    },
    labelCfg: {
      style: {
        fill: '#000000',
        fontSize: 10
      }
    },
    stateStyles: (_stateStyles$1 = {}, _stateStyles$1[ItemState.Selected] = {
      stroke: '#5aaaff',
      shadowColor: '#5aaaff',
      shadowBlur: 24
    }, _stateStyles$1[ItemState.HighLight] = {
      stroke: '#5aaaff',
      shadowColor: '#5aaaff',
      shadowBlur: 24
    }, _stateStyles$1)
  },
  createLabelWrapper: function createLabelWrapper(group) {
    var label = group.findByClassName(EDGE_LABEL_CLASS_NAME);
    var labelWrapper = group.findByClassName(EDGE_LABEL_WRAPPER_CLASS_NAME);

    if (!label) {
      return;
    }

    if (labelWrapper) {
      return;
    }

    group.addShape('rect', {
      className: EDGE_LABEL_WRAPPER_CLASS_NAME,
      attrs: {
        fill: '#e1e5e8',
        radius: 2
      }
    });
    label.set('zIndex', 1);
    group.sort();
  },
  updateLabelWrapper: function updateLabelWrapper(group) {
    var label = group.findByClassName(EDGE_LABEL_CLASS_NAME);
    var labelWrapper = group.findByClassName(EDGE_LABEL_WRAPPER_CLASS_NAME);

    if (!label) {
      labelWrapper && labelWrapper.hide();
      return;
    } else {
      labelWrapper && labelWrapper.show();
    }

    if (!labelWrapper) {
      return;
    }

    var _label$getBBox = label.getBBox(),
        minX = _label$getBBox.minX,
        minY = _label$getBBox.minY,
        width = _label$getBBox.width,
        height = _label$getBBox.height;

    labelWrapper.attr({
      x: minX - 5,
      y: minY - 3,
      width: width + 10,
      height: height + 6
    });
  },
  afterDraw: function afterDraw(model, group) {
    this.createLabelWrapper(group);
    this.updateLabelWrapper(group);
  },
  afterUpdate: function afterUpdate(model, item) {
    var group = item.getContainer();
    this.createLabelWrapper(group);
    this.updateLabelWrapper(group);
  },
  setState: function setState(name, value, item) {
    var shape = item.get('keyShape');

    if (!shape) {
      return;
    }

    var _this$options = this.options,
        style = _this$options.style,
        stateStyles = _this$options.stateStyles;
    var stateStyle = stateStyles[name];

    if (!stateStyle) {
      return;
    }

    if (value) {
      shape.attr(_extends({}, style, stateStyle));
    } else {
      shape.attr(style);
    }
  }
};
G6.registerEdge('bizFlowEdge', bizFlowEdge, 'polyline');

var _stateStyles$2;
var bizMindEdge = {
  options: {
    style: {
      stroke: '#ccc1d8',
      lineWidth: 2,
      shadowColor: null,
      shadowBlur: 0
    },
    stateStyles: (_stateStyles$2 = {}, _stateStyles$2[ItemState.Selected] = {
      stroke: '#5aaaff',
      shadowColor: '#5aaaff',
      shadowBlur: 24
    }, _stateStyles$2[ItemState.HighLight] = {
      stroke: '#5aaaff',
      shadowColor: '#5aaaff',
      shadowBlur: 24
    }, _stateStyles$2)
  },
  setState: function setState(name, value, item) {
    var shape = item.get('keyShape');

    if (!shape) {
      return;
    }

    var _this$options = this.options,
        style = _this$options.style,
        stateStyles = _this$options.stateStyles;
    var stateStyle = stateStyles[name];

    if (!stateStyle) {
      return;
    }

    if (value) {
      shape.attr(_extends({}, style, stateStyle));
    } else {
      shape.attr(style);
    }
  }
};
G6.registerEdge('bizMindEdge', bizMindEdge, 'cubic-horizontal');

/** 生成唯一标识 */

function guid() {
  return 'xxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = Math.random() * 16 | 0;
    var v = c === 'x' ? r : r & 0x3 | 0x8;
    return v.toString(16);
  });
}
/** 拼接查询字符 */

var toQueryString = function toQueryString(obj) {
  return Object.keys(obj).map(function (key) {
    return encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]);
  }).join('&');
};
/** 执行批量处理 */

function executeBatch(graph, execute) {
  var autoPaint = graph.get('autoPaint');
  graph.setAutoPaint(false);
  execute();
  graph.paint();
  graph.setAutoPaint(autoPaint);
}
/** 执行递归遍历 */

function recursiveTraversal(root, callback) {
  if (!root) {
    return;
  }

  callback(root);

  if (!root.children) {
    return;
  }

  root.children.forEach(function (item) {
    return recursiveTraversal(item, callback);
  });
}
/** 判断是否流程图 */

function isFlow(graph) {
  return graph.constructor === G6.Graph;
}
/** 判断是否脑图 */

function isMind(graph) {
  return graph.constructor === G6.TreeGraph;
}
/** 判断是否节点 */

function isNode(item) {
  return item.getType() === ItemType.Node;
}
/** 判断是否边线 */

function isEdge(item) {
  return item.getType() === ItemType.Edge;
}
/** 获取选中节点 */

function getSelectedNodes(graph) {
  return graph.findAllByState(ItemType.Node, ItemState.Selected);
}
/** 获取选中边线 */

function getSelectedEdges(graph) {
  return graph.findAllByState(ItemType.Edge, ItemState.Selected);
}
/** 获取高亮边线 */

function getHighlightEdges(graph) {
  return graph.findAllByState(ItemType.Edge, ItemState.HighLight);
}
/** 获取图表状态 */

function getGraphState(graph) {
  var graphState = GraphState.MultiSelected;
  var selectedNodes = getSelectedNodes(graph);
  var selectedEdges = getSelectedEdges(graph);

  if (selectedNodes.length === 1 && !selectedEdges.length) {
    graphState = GraphState.NodeSelected;
  }

  if (selectedEdges.length === 1 && !selectedNodes.length) {
    graphState = GraphState.EdgeSelected;
  }

  if (!selectedNodes.length && !selectedEdges.length) {
    graphState = GraphState.CanvasSelected;
  }

  return graphState;
}
/** 设置选中元素 */

function setSelectedItems(graph, items) {
  executeBatch(graph, function () {
    var selectedNodes = getSelectedNodes(graph);
    var selectedEdges = getSelectedEdges(graph);
    [].concat(selectedNodes, selectedEdges).forEach(function (node) {
      graph.setItemState(node, ItemState.Selected, false);
    });
    items.forEach(function (item) {
      graph.setItemState(item, ItemState.Selected, true);
    });
  });
  graph.emit(EditorEvent.onGraphStateChange, {
    graphState: getGraphState(graph)
  });
}
/** 清除选中状态 */

function clearSelectedState(graph, shouldUpdate) {
  if (shouldUpdate === void 0) {
    shouldUpdate = function shouldUpdate() {
      return true;
    };
  }

  var selectedNodes = getSelectedNodes(graph);
  var selectedEdges = getSelectedEdges(graph);
  executeBatch(graph, function () {
    [].concat(selectedNodes, selectedEdges).forEach(function (item) {
      if (shouldUpdate(item)) {
        graph.setItemState(item, ItemState.Selected, false);
      }
    });
  });
}
/** 获取回溯路径 - Flow */

function getFlowRecallEdges(graph, node, targetIds, edges) {
  if (targetIds === void 0) {
    targetIds = [];
  }

  if (edges === void 0) {
    edges = [];
  }

  var inEdges = node.getInEdges();

  if (!inEdges.length) {
    return [];
  }

  inEdges.map(function (edge) {
    var sourceId = edge.getModel().source;
    var sourceNode = graph.findById(sourceId);
    edges.push(edge);
    var targetId = node.get('id');
    targetIds.push(targetId);

    if (!targetIds.includes(sourceId)) {
      getFlowRecallEdges(graph, sourceNode, targetIds, edges);
    }
  });
  return edges;
}
/** 获取回溯路径 - Mind */

function getMindRecallEdges(graph, node, edges) {
  if (edges === void 0) {
    edges = [];
  }

  var parentNode = node.get('parent');

  if (!parentNode) {
    return edges;
  }

  node.getEdges().forEach(function (edge) {
    var source = edge.getModel().source;

    if (source.get('id') === parentNode.get('id')) {
      edges.push(edge);
    }
  });
  return getMindRecallEdges(graph, parentNode, edges);
}

var index$1 = /*#__PURE__*/Object.freeze({
  __proto__: null,
  guid: guid,
  toQueryString: toQueryString,
  executeBatch: executeBatch,
  recursiveTraversal: recursiveTraversal,
  isFlow: isFlow,
  isMind: isMind,
  isNode: isNode,
  isEdge: isEdge,
  getSelectedNodes: getSelectedNodes,
  getSelectedEdges: getSelectedEdges,
  getHighlightEdges: getHighlightEdges,
  getGraphState: getGraphState,
  setSelectedItems: setSelectedItems,
  clearSelectedState: clearSelectedState,
  getFlowRecallEdges: getFlowRecallEdges,
  getMindRecallEdges: getMindRecallEdges
});

var Global = function Global() {
  /** 当前版本 */
  this.version = "3.1.3";
  /** 埋点开关 */

  this.trackable = true;
  /** 剪贴板 */

  this.clipboard = {
    point: {
      x: 0,
      y: 0
    },
    models: []
  };
  /** 组件数据 */

  this.component = {
    itemPanel: {
      model: null,
      delegateShapeClassName: "delegateShape_" + guid()
    }
  };
  /** 插件数据 */

  this.plugin = {
    itemPopover: {
      state: 'hide'
    },
    contextMenu: {
      state: 'hide'
    },
    editableLabel: {
      state: 'hide'
    }
  };
};

var global = new Global();

var CommandManager = /*#__PURE__*/function () {
  function CommandManager() {
    this.command = {};
    this.commandQueue = [];
    this.commandIndex = 0;
  }
  /** 注册命令 */


  var _proto = CommandManager.prototype;

  _proto.register = function register(name, command) {
    this.command[name] = _extends({}, command, {
      name: name
    });
  }
  /** 执行命令 */
  ;

  _proto.execute = function execute(graph, name, params) {
    var Command = this.command[name];

    if (!Command) {
      return;
    }

    var command = Object.create(Command);
    command.params = cloneDeep(Command.params);

    if (params) {
      command.params = _extends({}, command.params, params);
    }

    if (!command.canExecute(graph)) {
      return;
    }

    if (!command.shouldExecute(graph)) {
      return;
    }

    command.init(graph);
    graph.emit(EditorEvent.onBeforeExecuteCommand, {
      name: command.name,
      params: command.params
    });
    command.execute(graph);
    graph.emit(EditorEvent.onAfterExecuteCommand, {
      name: command.name,
      params: command.params
    });

    if (command.canUndo(graph)) {
      var commandQueue = this.commandQueue,
          commandIndex = this.commandIndex;
      commandQueue.splice(commandIndex, commandQueue.length - commandIndex, command);
      this.commandIndex += 1;
    }

    graph.emit(EditorEvent.onGraphStateChange, {
      graphState: getGraphState(graph)
    });
  }
  /** 判断是否可以执行 */
  ;

  _proto.canExecute = function canExecute(graph, name) {
    return this.command[name].canExecute(graph);
  }
  /** 注入是否应该执行 */
  ;

  _proto.injectShouldExecute = function injectShouldExecute(name, shouldExecute) {
    this.command[name].shouldExecute = shouldExecute;
  };

  return CommandManager;
}();

function withContext (Context, shouldRender) {
  if (shouldRender === void 0) {
    shouldRender = function shouldRender() {
      return true;
    };
  }

  return function (WrappedComponent) {
    var InjectContext = function InjectContext(props) {
      var forwardRef = props.forwardRef,
          rest = _objectWithoutPropertiesLoose(props, ["forwardRef"]);

      var refProp = {};

      if (WrappedComponent.prototype.isReactComponent) {
        refProp = {
          ref: forwardRef
        };
      } else {
        refProp = {
          forwardRef: forwardRef
        };
      }

      return /*#__PURE__*/React.createElement(Context.Consumer, null, function (context) {
        return shouldRender(context) ? /*#__PURE__*/React.createElement(WrappedComponent, Object.assign({}, refProp, rest, context)) : null;
      });
    };

    return /*#__PURE__*/React.forwardRef(function (props, ref) {
      return /*#__PURE__*/React.createElement(InjectContext, Object.assign({
        forwardRef: ref
      }, props));
    });
  };
}

var EditorContext = /*#__PURE__*/React.createContext({});
var EditorPrivateContext = /*#__PURE__*/React.createContext({});
var withEditorContext = withContext(EditorContext, function (context) {
  return !!context.graph;
});
var withEditorPrivateContext = withContext(EditorPrivateContext);

var _Editor$defaultProps;

var Editor = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Editor, _React$Component);

  function Editor(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.lastMousedownTarget = null;

    _this.setGraph = function (graph) {
      _this.setState({
        graph: graph
      });

      _this.bindEvent(graph);

      _this.bindShortcut(graph);
    };

    _this.executeCommand = function (name, params) {
      var _this$state = _this.state,
          graph = _this$state.graph,
          commandManager = _this$state.commandManager;

      if (graph) {
        commandManager.execute(graph, name, params);
      }
    };

    _this.state = {
      graph: null,
      setGraph: _this.setGraph,
      executeCommand: _this.executeCommand,
      commandManager: new CommandManager()
    };
    _this.lastMousedownTarget = null;
    return _this;
  }

  Editor.setTrackable = function setTrackable(trackable) {
    global.trackable = trackable;
  };

  var _proto = Editor.prototype;

  _proto.shouldTriggerShortcut = function shouldTriggerShortcut(graph, target) {
    var renderer = graph.get('renderer');
    var canvasElement = graph.get('canvas').get('el');

    if (!target) {
      return false;
    }

    if (target === canvasElement) {
      return true;
    }

    if (renderer === RendererType.Svg) {
      if (target.nodeName === 'svg') {
        return true;
      }

      var parentNode = target.parentNode;

      while (parentNode && parentNode.nodeName !== 'BODY') {
        if (parentNode.nodeName === 'svg') {
          return true;
        } else {
          parentNode = parentNode.parentNode;
        }
      }

      return false;
    }
  };

  _proto.bindEvent = function bindEvent(graph) {
    var props = this.props;
    graph.on(EditorEvent.onBeforeExecuteCommand, props[EditorEvent.onBeforeExecuteCommand]);
    graph.on(EditorEvent.onAfterExecuteCommand, props[EditorEvent.onAfterExecuteCommand]);
  };

  _proto.bindShortcut = function bindShortcut(graph) {
    var _this2 = this;

    var commandManager = this.state.commandManager;
    window.addEventListener(GraphCommonEvent.onMouseDown, function (e) {
      _this2.lastMousedownTarget = e.target;
    });
    graph.on(GraphCommonEvent.onKeyDown, function (e) {
      if (!_this2.shouldTriggerShortcut(graph, _this2.lastMousedownTarget)) {
        return;
      }

      Object.values(commandManager.command).some(function (command) {
        var name = command.name,
            shortcuts = command.shortcuts;
        var flag = shortcuts.some(function (shortcut) {
          var key = e.key;

          if (!isArray(shortcut)) {
            return shortcut === key;
          }

          return shortcut.every(function (item, index) {
            if (index === shortcut.length - 1) {
              return item === key;
            }

            return e[item];
          });
        });

        if (flag) {
          if (commandManager.canExecute(graph, name)) {
            // Prevent default
            e.preventDefault(); // Execute command

            _this2.executeCommand(name);

            return true;
          }
        }

        return false;
      });
    });
  };

  _proto.render = function render() {
    var children = this.props.children;
    var _this$state2 = this.state,
        graph = _this$state2.graph,
        setGraph = _this$state2.setGraph,
        executeCommand = _this$state2.executeCommand,
        commandManager = _this$state2.commandManager;
    return /*#__PURE__*/React.createElement(EditorContext.Provider, {
      value: {
        graph: graph,
        executeCommand: executeCommand,
        commandManager: commandManager
      }
    }, /*#__PURE__*/React.createElement(EditorPrivateContext.Provider, {
      value: {
        setGraph: setGraph,
        commandManager: commandManager
      }
    }, /*#__PURE__*/React.createElement("div", Object.assign({}, pick(this.props, ['className', 'style'])), children)));
  };

  return Editor;
}(React.Component);

Editor.defaultProps = (_Editor$defaultProps = {}, _Editor$defaultProps[EditorEvent.onBeforeExecuteCommand] = function () {}, _Editor$defaultProps[EditorEvent.onAfterExecuteCommand] = function () {}, _Editor$defaultProps);

var BehaviorManager = /*#__PURE__*/function () {
  function BehaviorManager() {
    this.behaviors = {};
  }

  var _proto = BehaviorManager.prototype;

  _proto.getRegisteredBehaviors = function getRegisteredBehaviors(type) {
    var _this = this;

    var registeredBehaviors = {};
    Object.keys(this.behaviors).forEach(function (name) {
      var behavior = _this.behaviors[name];
      var graphType = behavior.graphType;

      if (graphType && graphType !== type) {
        return;
      }

      var _behavior$graphMode = behavior.graphMode,
          graphMode = _behavior$graphMode === void 0 ? 'default' : _behavior$graphMode;

      if (!registeredBehaviors[graphMode]) {
        registeredBehaviors[graphMode] = {};
      }

      registeredBehaviors[graphMode][name] = name;
    });
    return registeredBehaviors;
  };

  _proto.wrapEventHandler = function wrapEventHandler(type, behavior) {
    var events = behavior.getEvents();
    Object.keys(events).forEach(function (event) {
      var handlerName = events[event];
      var handler = behavior[handlerName];

      behavior[handlerName] = function () {
        var graph = this.graph;

        if (type === GraphType.Flow && isMind(graph) === false || type === GraphType.Mind && isMind(graph)) {
          for (var _len = arguments.length, params = new Array(_len), _key = 0; _key < _len; _key++) {
            params[_key] = arguments[_key];
          }

          handler.apply(this, params);
        }
      };
    });
    return behavior;
  };

  _proto.register = function register(name, behavior) {
    var graphType = behavior.graphType;
    this.behaviors[name] = behavior;

    switch (graphType) {
      case GraphType.Flow:
        G6.registerBehavior(name, this.wrapEventHandler(GraphType.Flow, behavior));
        break;

      case GraphType.Mind:
        G6.registerBehavior(name, this.wrapEventHandler(GraphType.Mind, behavior));
        break;

      default:
        G6.registerBehavior(name, behavior);
        break;
    }
  };

  return BehaviorManager;
}();

var behaviorManager = new BehaviorManager();

var BASE_URL = 'http://gm.mmstat.com/fsp.1.1';
function track(graphType) {
  var version = global.version;
  var trackable = global.trackable;

  if (!trackable) {
    return;
  }

  var _window = window,
      location = _window.location,
      navigator = _window.navigator;
  var image = new Image();
  var params = toQueryString({
    pid: 'ggeditor',
    code: '11',
    msg: 'syslog',
    page: location.protocol + "//" + location.host + location.pathname,
    hash: location.hash,
    ua: navigator.userAgent,
    rel: version,
    c1: graphType
  });
  image.src = BASE_URL + "?" + params;
}

var redoCommand = {
  name: 'redo',
  params: {},
  canExecute: function canExecute(graph) {
    var commandManager = graph.get('commandManager');
    var commandQueue = commandManager.commandQueue,
        commandIndex = commandManager.commandIndex;
    return commandIndex < commandQueue.length;
  },
  shouldExecute: function shouldExecute() {
    return true;
  },
  canUndo: function canUndo() {
    return false;
  },
  init: function init() {},
  execute: function execute(graph) {
    var commandManager = graph.get('commandManager');
    var commandQueue = commandManager.commandQueue,
        commandIndex = commandManager.commandIndex;
    commandQueue[commandIndex].execute(graph);
    commandManager.commandIndex += 1;
  },
  undo: function undo() {},
  shortcuts: [['metaKey', 'shiftKey', 'z'], ['ctrlKey', 'shiftKey', 'z']]
};

var undoCommand = {
  name: 'undo',
  params: {},
  canExecute: function canExecute(graph) {
    var commandManager = graph.get('commandManager');
    var commandIndex = commandManager.commandIndex;
    return commandIndex > 0;
  },
  shouldExecute: function shouldExecute() {
    return true;
  },
  canUndo: function canUndo() {
    return false;
  },
  init: function init() {},
  execute: function execute(graph) {
    var commandManager = graph.get('commandManager');
    var commandQueue = commandManager.commandQueue,
        commandIndex = commandManager.commandIndex;
    commandQueue[commandIndex - 1].undo(graph);
    commandManager.commandIndex -= 1;
  },
  undo: function undo() {},
  shortcuts: [['metaKey', 'z'], ['ctrlKey', 'z']]
};

var baseCommand = {
  name: '',
  params: {},
  canExecute: function canExecute() {
    return true;
  },
  shouldExecute: function shouldExecute() {
    return true;
  },
  canUndo: function canUndo() {
    return true;
  },
  init: function init() {},
  execute: function execute() {},
  undo: function undo() {},
  shortcuts: [],
  isMind: isMind,
  getSelectedNodes: getSelectedNodes,
  getSelectedEdges: getSelectedEdges,
  setSelectedItems: setSelectedItems,
  editSelectedNode: function editSelectedNode(graph) {
    graph.emit(EditorEvent.onLabelStateChange, {
      labelState: LabelState.Show
    });
  }
};

var addCommand = _extends({}, baseCommand, {
  params: {
    type: ItemType.Node,
    model: {
      id: ''
    }
  },
  init: function init() {
    var model = this.params.model;

    if (model.id) {
      return;
    }

    model.id = guid();
  },
  execute: function execute(graph) {
    var _this$params = this.params,
        type = _this$params.type,
        model = _this$params.model;
    graph.add(type, model);
    this.setSelectedItems(graph, [model.id]);
  },
  undo: function undo(graph) {
    var model = this.params.model;
    graph.remove(model.id);
  }
});

var removeCommand = _extends({}, baseCommand, {
  params: {
    flow: {
      nodes: {},
      edges: {}
    },
    mind: {
      model: null,
      parent: ''
    }
  },
  canExecute: function canExecute(graph) {
    var selectedNodes = this.getSelectedNodes(graph);
    var selectedEdges = this.getSelectedEdges(graph);
    return !!(selectedNodes.length || selectedEdges.length);
  },
  init: function init(graph) {
    var selectedNodes = this.getSelectedNodes(graph);
    var selectedEdges = this.getSelectedEdges(graph);

    if (isMind(graph)) {
      var selectedNode = selectedNodes[0];
      var selectedNodeModel = selectedNode.getModel();
      var selectedNodeParent = selectedNode.get('parent');
      var selectedNodeParentModel = selectedNodeParent ? selectedNodeParent.getModel() : {};
      this.params.mind = {
        model: selectedNodeModel,