@logicflow/core 1.2.0-alpha.12 → 1.2.0-alpha.15

package/dist/logic-flow.js

@@ -11337,7 +11337,7 @@ module.exports.f = function (C) {
 /* 161 */
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"1.2.0-alpha.11\"}");
+module.exports = JSON.parse("{\"a\":\"1.2.0-alpha.14\"}");
 
 /***/ }),
 /* 162 */
@@ -21633,7 +21633,7 @@ var defaultTheme = {
     stroke: 'red',
     strokeDasharray: '10 10',
     strokeDashoffset: '100%',
-    animationName: 'dash',
+    animationName: 'lf-dash',
     animationDuration: '20s',
     animationIterationCount: 'infinite',
     animationTimingFunction: 'linear',
@@ -22727,7 +22727,7 @@ var BaseEdgeModel_BaseEdgeModel = /*#__PURE__*/function () {
     BaseEdgeModel_defineProperty(this, "style", {});
 
     BaseEdgeModel_defineProperty(this, "arrowConfig", {
-      markerEnd: "url(#marker-end-".concat(this.id, ")"),
+      markerEnd: '',
       markerStart: ''
     });
 
@@ -22824,6 +22824,8 @@ var BaseEdgeModel_BaseEdgeModel = /*#__PURE__*/function () {
       if (overlapMode === OverlapMode.INCREASE) {
         this.zIndex = data.zIndex || getZIndex();
       }
+
+      this.arrowConfig.markerEnd = "url(#marker-end-".concat(this.id, ")");
     }
     /**
      * 设置model属性，每次properties发生变化会触发
@@ -24194,6 +24196,27 @@ var getVerticalPointOfLine = function getVerticalPointOfLine(config) {
 
   return pointPosition;
 };
+// CONCATENATED MODULE: ./src/util/vector.ts
+var getDirectionVector = function getDirectionVector(point1, point2) {
+  var a = point2.x - point1.x;
+  var b = point2.y - point1.y;
+
+  if (a !== 0) {
+    a = a / Math.abs(a);
+  }
+
+  if (b !== 0) {
+    b = b / Math.abs(b);
+  }
+
+  return [a, b];
+};
+var isSameDirection = function isSameDirection(v1, v2) {
+  return v1[0] === v2[0] && v1[1] === v2[1];
+};
+var isContraryDirection = function isContraryDirection(v1, v2) {
+  return !(v1[0] + v2[0] || v1[1] + v2[1]);
+};
 // CONCATENATED MODULE: ./src/util/edge.ts
 function edge_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -24251,6 +24274,7 @@ function edge_arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 
+
 
 
 /* 手动创建边时edge->edgeModel */
@@ -24990,14 +25014,58 @@ var edge_getBezierControlPoints = function getBezierControlPoints(_ref) {
       sourceNode = _ref.sourceNode,
       targetNode = _ref.targetNode,
       offset = _ref.offset;
+  var nodeDistance = Math.max(Math.abs(sourceNode.x - targetNode.x), Math.abs(sourceNode.y - targetNode.y));
+  offset = offset || nodeDistance / 4;
   var sBBox = getNodeBBox(sourceNode);
   var tBBox = getNodeBBox(targetNode);
   var sExpendBBox = getExpandedBBox(sBBox, offset);
   var tExpendBBox = getExpandedBBox(tBBox, offset);
   var sDirection = edge_pointDirection(start, sourceNode);
+  var tDirection = edge_pointDirection(end, targetNode); // 1. 避免两个节点连出的多个连线重合。
+  // 2. 避免开始节点和结束节点方向相同时成为一个穿过节点的直线。
+
   var sNext = edge_getExpandedBBoxPoint(sExpendBBox, start, sDirection);
-  var tDirection = edge_pointDirection(end, targetNode);
-  var ePre = edge_getExpandedBBoxPoint(tExpendBBox, end, tDirection);
+  var ePre = edge_getExpandedBBoxPoint(tExpendBBox, end, tDirection); // 如果两个节点水平或垂直并且连线在两个节点最近的锚点之间，则不产生偏移，保证连线看起来像是直线
+
+  var vector1 = getDirectionVector(sourceNode, start);
+  var vector2 = getDirectionVector(targetNode, end);
+  var vector3 = getDirectionVector(sourceNode, targetNode); // 当开始节点控制连线的方向和连线方向相同，并且结束节点控制连线相反的时候，则意味这两个节点直接相连。此时不需要对控制点进行偏移调整
+
+  if (isSameDirection(vector1, vector3) && isContraryDirection(vector2, vector3)) {
+    return {
+      sNext: sNext,
+      ePre: ePre
+    };
+  } // 当开始节点控制连线方向和连线方向相反的时候或者结束节点控制连线形同的时候，增大偏移量，实现更美观的效果。
+
+
+  if (isSameDirection(vector2, vector3) || isContraryDirection(vector1, vector3)) {
+    offset = offset * 2;
+  } // 计算起点的调整点是否需要偏移
+  // 如果起点的调整点方向和连线方向相反，则添加偏移量
+  // 如果终点的调整点方向与连线方向
+
+
+  var randomNumberX = Math.ceil((Math.random() + 0.5) * offset);
+  var randomNumberY = Math.ceil((Math.random() + 0.5) * offset); // 如果是调整点在节点水平方向，那么调整的点Y需要向着另一个节点的方向进行一定随机量的偏移。
+  // 如果是调整点在节点垂直方向，那么调整的点X需要向着另一个节点的方向进行一定随机量的偏移。
+
+  if (sDirection === SegmentDirection.HORIZONTAL) {
+    sNext.y += sourceNode.y >= targetNode.y ? randomNumberY : -randomNumberY;
+  }
+
+  if (sDirection === SegmentDirection.VERTICAL) {
+    sNext.x += sourceNode.x >= targetNode.x ? randomNumberX : -randomNumberX;
+  }
+
+  if (tDirection === SegmentDirection.HORIZONTAL) {
+    ePre.y += sourceNode.y > targetNode.y ? randomNumberY : -randomNumberY;
+  }
+
+  if (tDirection === SegmentDirection.VERTICAL) {
+    ePre.x += sourceNode.x > targetNode.x ? randomNumberX : -randomNumberX;
+  }
+
   return {
     sNext: sNext,
     ePre: ePre
@@ -25647,6 +25715,8 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
     this.partial = options.partial;
     this.overlapMode = options.overlapMode || 0;
     this.idGenerator = idGenerator;
+    this.width = options.width || this.rootEl.getBoundingClientRect().width;
+    this.height = options.height || this.rootEl.getBoundingClientRect().height;
   }
 
   GraphModel_createClass(GraphModel, [{
@@ -25930,6 +26000,10 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
     value: function graphDataToModel(graphData) {
       var _this = this;
 
+      if (!this.width || !this.height) {
+        this.resize();
+      }
+
       this.nodes = lodash_es_map(graphData.nodes, function (node) {
         var Model = _this.getModel(node.type);
 
@@ -26904,8 +26978,12 @@ var GraphModel_GraphModel = /*#__PURE__*/function () {
   }, {
     key: "resize",
     value: function resize(width, height) {
-      this.width = width !== null && width !== void 0 ? width : this.width;
-      this.height = height !== null && height !== void 0 ? height : this.height;
+      this.width = width || this.rootEl.getBoundingClientRect().width;
+      this.height = height || this.rootEl.getBoundingClientRect().height;
+
+      if (!this.width || !this.height) {
+        console.warn('渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675');
+      }
     }
     /**
      * 清空画布
@@ -28966,7 +29044,7 @@ var BezierEdgeModel_BezierEdgeModel = /*#__PURE__*/function (_BaseEdgeModel) {
   BezierEdgeModel_createClass(BezierEdgeModel, [{
     key: "initEdgeData",
     value: function initEdgeData(data) {
-      this.offset = 100;
+      this.offset = 0;
 
       BezierEdgeModel_get(BezierEdgeModel_getPrototypeOf(BezierEdgeModel.prototype), "initEdgeData", this).call(this, data);
     }
@@ -31268,6 +31346,39 @@ var SnaplineModel_SnaplineModel = /*#__PURE__*/function () {
 
 
 
+// CONCATENATED MODULE: ./src/util/raf.ts
+
+
+
+
+
+
+var rafIdMap = new Map();
+var raf_createRaf = function createRaf(callback) {
+  var rafId = uuid_createUuid();
+
+  function run() {
+    callback();
+    var eId = rafIdMap.get(rafId);
+
+    if (eId) {
+      var nId = window.requestAnimationFrame(run);
+      rafIdMap.set(rafId, nId);
+    }
+  }
+
+  var id = window.requestAnimationFrame(run);
+  rafIdMap.set(rafId, id);
+  return rafId;
+};
+var cancelRaf = function cancelRaf(rafId) {
+  var eId = rafIdMap.get(rafId);
+
+  if (eId) {
+    window.cancelAnimationFrame(eId);
+    rafIdMap.delete(rafId);
+  }
+};
 // CONCATENATED MODULE: ./src/view/Anchor.tsx
 function Anchor_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { Anchor_typeof = function _typeof(obj) { return typeof obj; }; } else { Anchor_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return Anchor_typeof(obj); }
 
@@ -31342,6 +31453,7 @@ function Anchor_defineProperty(obj, key, value) { if (key in obj) { Object.defin
 
 
 
+
 var Anchor_Anchor = /*#__PURE__*/function (_Component) {
   Anchor_inherits(Anchor, _Component);
 
@@ -31422,7 +31534,7 @@ var Anchor_Anchor = /*#__PURE__*/function (_Component) {
           y1 = _graphModel$getPointB3.y;
 
       if (_this.t) {
-        clearInterval(_this.t);
+        cancelRaf(_this.t);
       }
 
       var nearBoundary = [];
@@ -31447,7 +31559,7 @@ var Anchor_Anchor = /*#__PURE__*/function (_Component) {
       _this.moveAnchorEnd(x1, y1);
 
       if (nearBoundary.length > 0 && !stopMoveGraph && autoExpand) {
-        _this.t = setInterval(function () {
+        _this.t = raf_createRaf(function () {
           var _nearBoundary = nearBoundary,
               _nearBoundary2 = Anchor_slicedToArray(_nearBoundary, 2),
               translateX = _nearBoundary2[0],
@@ -31464,7 +31576,7 @@ var Anchor_Anchor = /*#__PURE__*/function (_Component) {
           });
 
           _this.moveAnchorEnd(endX - translateX, endY - translateY);
-        }, 50);
+        });
       }
 
       eventCenter.emit(EventType.ANCHOR_DRAG, {
@@ -32082,39 +32194,6 @@ var BaseText_BaseText = /*#__PURE__*/function (_Component) {
 
 
 var isIe = window.navigator.userAgent.match(/MSIE|Trident/) !== null;
-// CONCATENATED MODULE: ./src/util/raf.ts
-
-
-
-
-
-
-var rafIdMap = new Map();
-var raf_createRaf = function createRaf(callback) {
-  var rafId = uuid_createUuid();
-
-  function run() {
-    callback();
-    var eId = rafIdMap.get(rafId);
-
-    if (eId) {
-      var nId = window.requestAnimationFrame(run);
-      rafIdMap.set(rafId, nId);
-    }
-  }
-
-  var id = window.requestAnimationFrame(run);
-  rafIdMap.set(rafId, id);
-  return rafId;
-};
-var cancelRaf = function cancelRaf(rafId) {
-  var eId = rafIdMap.get(rafId);
-
-  if (eId) {
-    window.cancelAnimationFrame(eId);
-    rafIdMap.delete(rafId);
-  }
-};
 // CONCATENATED MODULE: ./src/view/node/BaseNode.tsx
 function BaseNode_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { BaseNode_typeof = function _typeof(obj) { return typeof obj; }; } else { BaseNode_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return BaseNode_typeof(obj); }
 
@@ -32265,7 +32344,20 @@ var BaseNode_BaseNode = /*#__PURE__*/function (_Component) {
       y = y + _this.moveOffset.y; // 将x, y移动到grid上
 
       x = snapToGrid(x, gridSize);
-      y = snapToGrid(y, gridSize); // 取节点左上角和右下角，计算节点移动是否超出范围
+      y = snapToGrid(y, gridSize);
+
+      if (!width || !height) {
+        graphModel.moveNode2Coordinate(model.id, x, y);
+        return;
+      }
+
+      var isOutCanvas = x1 < 0 || y1 < 0 || x1 > width || y1 > height;
+
+      if (autoExpand && !stopMoveGraph && isOutCanvas) {
+        // 鼠标超出画布后的拖动，不处理，而是让上一次setInterval持续滚动画布
+        return;
+      } // 取节点左上角和右下角，计算节点移动是否超出范围
+
 
       var _transformModel$Canva3 = transformModel.CanvasPointToHtmlPoint([x - model.width / 2, y - model.height / 2]),
           _transformModel$Canva4 = BaseNode_slicedToArray(_transformModel$Canva3, 2),
@@ -35481,7 +35573,11 @@ var History_History = /*#__PURE__*/function () {
 
     this.eventCenter = graphModel.eventCenter;
     var NODE_ADD = EventType.NODE_ADD,
+        NODE_DELETE = EventType.NODE_DELETE,
+        NODE_DND_ADD = EventType.NODE_DND_ADD,
         EDGE_ADD = EventType.EDGE_ADD,
+        EDGE_DELETE = EventType.EDGE_DELETE,
+        TEXT_UPDATE = EventType.TEXT_UPDATE,
         NODE_DROP = EventType.NODE_DROP,
         EDGE_ADJUST = EventType.EDGE_ADJUST,
         SELECTION_DROP = EventType.SELECTION_DROP,
@@ -35492,7 +35588,7 @@ var History_History = /*#__PURE__*/function () {
         NODE_PROPERTY_UPDATE = EventType.NODE_PROPERTY_UPDATE,
         EDGE_PROPERTY_UPDATE = EventType.EDGE_PROPERTY_UPDATE,
         HISTORY_INSERT = EventType.HISTORY_INSERT;
-    var historyChangeKeys = "\n      ".concat(NODE_ADD, ",\n      ").concat(EDGE_ADD, ",\n      ").concat(NODE_DROP, ",\n      ").concat(EDGE_ADJUST, ",\n      ").concat(SELECTION_DROP, ",\n      ").concat(TEXT_DROP, ",\n      ").concat(NODE_TEXT_UPDATE, ",\n      ").concat(EDGE_TEXT_UPDATE, ",\n      ").concat(GRAPH_RENDERED, "\n    ");
+    var historyChangeKeys = "\n      ".concat(NODE_ADD, ",\n      ").concat(EDGE_ADD, ",\n      ").concat(NODE_DELETE, ",\n      ").concat(NODE_DND_ADD, ",\n      ").concat(EDGE_DELETE, ",\n      ").concat(TEXT_UPDATE, ",\n      ").concat(NODE_DROP, ",\n      ").concat(EDGE_ADJUST, ",\n      ").concat(SELECTION_DROP, ",\n      ").concat(TEXT_DROP, ",\n      ").concat(NODE_TEXT_UPDATE, ",\n      ").concat(EDGE_TEXT_UPDATE, ",\n      ").concat(GRAPH_RENDERED, "\n    ");
 
     if (isPropertiesChangeHistory) {
       historyChangeKeys += ",".concat(NODE_PROPERTY_UPDATE, ",").concat(EDGE_PROPERTY_UPDATE);
@@ -36861,14 +36957,15 @@ var LogicFlow_LogicFlow = /*#__PURE__*/function () {
     }
     /**
      * 重新设置画布的宽高
+     * 不传会自动计算画布宽高
      */
 
   }, {
     key: "resize",
     value: function resize(width, height) {
-      this.options.width = width !== null && width !== void 0 ? width : this.options.width;
-      this.options.height = height !== null && height !== void 0 ? height : this.options.height;
       this.graphModel.resize(width, height);
+      this.options.width = this.graphModel.width;
+      this.options.height = this.graphModel.height;
     }
     /**
      * 设置默认的边类型。