@logicflow/core 2.0.5 → 2.0.7

package/lib/util/resize.js

@@ -1,9 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.handleResize = exports.triggerResizeEvent = exports.updateEdgePointByAnchors = exports.recalcResizeInfo = void 0;
+exports.calculateWidthAndHeight = exports.handleResize = exports.triggerResizeEvent = exports.updateEdgePointByAnchors = exports.recalcResizeInfo = void 0;
 var Control_1 = require("../view/Control");
 var lodash_es_1 = require("lodash-es");
 var constant_1 = require("../constant");
+var rotate_1 = require("../algorithm/rotate");
+function recalcRotatedResizeInfo(pct, resizeInfo, rotate, controlX, controlY, oldCenterX, oldCenterY, freezeWidth, freezeHeight) {
+    if (freezeWidth === void 0) { freezeWidth = false; }
+    if (freezeHeight === void 0) { freezeHeight = false; }
+    // 假设我们触摸的点是右下角的control
+    var deltaX = resizeInfo.deltaX, deltaY = resizeInfo.deltaY, oldWidth = resizeInfo.width, oldHeight = resizeInfo.height;
+    var angle = (0, rotate_1.radianToAngle)(rotate);
+    // 右下角的control
+    var startZeroTouchControlPoint = {
+        x: controlX, // control锚点的坐标x
+        y: controlY, // control锚点的坐标y
+    };
+    var oldCenter = { x: oldCenterX, y: oldCenterY };
+    // 右下角的control坐标（transform后的-touchStartPoint）
+    var startRotatedTouchControlPoint = (0, rotate_1.calculatePointAfterRotateAngle)(startZeroTouchControlPoint, oldCenter, angle);
+    // 右下角的control坐标（transform后的-touchEndPoint）
+    var endRotatedTouchControlPoint = {
+        x: startRotatedTouchControlPoint.x + deltaX,
+        y: startRotatedTouchControlPoint.y + deltaY,
+    };
+    // 计算出新的宽度和高度以及新的中心点
+    var _a = calculateWidthAndHeight(startRotatedTouchControlPoint, endRotatedTouchControlPoint, oldCenter, angle, freezeWidth, freezeHeight, oldWidth, oldHeight), newWidth = _a.width, newHeight = _a.height, newCenter = _a.center;
+    // calculateWidthAndHeight()得到的是整个宽度，比如圆pct=0.5,此时newWidth等于整个圆直径
+    resizeInfo.width = newWidth * pct;
+    resizeInfo.height = newHeight * pct;
+    // BaseNodeModel.resize(deltaX/2, deltaY/2)，因此这里要*2
+    resizeInfo.deltaX = (newCenter.x - oldCenter.x) * 2;
+    resizeInfo.deltaY = (newCenter.y - oldCenter.y) * 2;
+    return resizeInfo;
+}
 /**
  * 计算 Control 拖动后，节点的高度信息
  * @param index
@@ -12,10 +42,11 @@ var constant_1 = require("../constant");
  * @param freezeWidth
  * @param freezeHeight
  */
-var recalcResizeInfo = function (index, resizeInfo, pct, freezeWidth, freezeHeight) {
+var recalcResizeInfo = function (index, resizeInfo, pct, freezeWidth, freezeHeight, rotate, controlX, controlY, oldCenterX, oldCenterY) {
     if (pct === void 0) { pct = 1; }
     if (freezeWidth === void 0) { freezeWidth = false; }
     if (freezeHeight === void 0) { freezeHeight = false; }
+    if (rotate === void 0) { rotate = 0; }
     var nextResizeInfo = (0, lodash_es_1.cloneDeep)(resizeInfo);
     var deltaX = nextResizeInfo.deltaX, deltaY = nextResizeInfo.deltaY;
     var width = nextResizeInfo.width, height = nextResizeInfo.height, PCTResizeInfo = nextResizeInfo.PCTResizeInfo;
@@ -73,6 +104,14 @@ var recalcResizeInfo = function (index, resizeInfo, pct, freezeWidth, freezeHeig
         }
         return nextResizeInfo;
     }
+    if (rotate % (2 * Math.PI) !== 0 &&
+        controlX !== undefined &&
+        controlY !== undefined) {
+        // 角度rotate不为0，则触发另外的计算修正resize的deltaX和deltaY
+        // 因为rotate不为0的时候，左上角的坐标一直在变化
+        // 角度rotate不为0得到的resizeInfo.deltaX仅仅代表中心点的变化，而不是宽度的变化
+        return recalcRotatedResizeInfo(pct, nextResizeInfo, rotate, controlX, controlY, oldCenterX, oldCenterY, freezeWidth, freezeHeight);
+    }
     // 如果限制了宽/高不变，对应的 width/height 保持一致
     switch (index) {
         case Control_1.ResizeControlIndex.LEFT_TOP:
@@ -146,17 +185,10 @@ var triggerResizeEvent = function (preNodeData, curNodeData, deltaX, deltaY, ind
     });
 };
 exports.triggerResizeEvent = triggerResizeEvent;
-// TODO：确认 handleResize 函数的类型定义
-// export type IHandleResizeParams = {
-//   deltaX: number
-//   deltaY: number
-//   index: ResizeControlIndex
-//   nodeModel: BaseNodeModel
-//   graphModel: GraphModel
-//   cancelCallback?: () => void
-// }
 /**
  * 处理节点的 resize 事件，提出来放到 utils 中，方便在外面（extension）中使用
+ * @param x
+ * @param y
  * @param deltaX
  * @param deltaY
  * @param index
@@ -165,11 +197,11 @@ exports.triggerResizeEvent = triggerResizeEvent;
  * @param cancelCallback
  */
 var handleResize = function (_a) {
-    var deltaX = _a.deltaX, deltaY = _a.deltaY, index = _a.index, nodeModel = _a.nodeModel, graphModel = _a.graphModel, cancelCallback = _a.cancelCallback;
+    var x = _a.x, y = _a.y, deltaX = _a.deltaX, deltaY = _a.deltaY, index = _a.index, nodeModel = _a.nodeModel, graphModel = _a.graphModel, cancelCallback = _a.cancelCallback;
     var r = nodeModel.r, // circle
     rx = nodeModel.rx, // ellipse/diamond
     ry = nodeModel.ry, width = nodeModel.width, // rect/html
-    height = nodeModel.height, PCTResizeInfo = nodeModel.PCTResizeInfo, minWidth = nodeModel.minWidth, minHeight = nodeModel.minHeight, maxWidth = nodeModel.maxWidth, maxHeight = nodeModel.maxHeight;
+    height = nodeModel.height, PCTResizeInfo = nodeModel.PCTResizeInfo, minWidth = nodeModel.minWidth, minHeight = nodeModel.minHeight, maxWidth = nodeModel.maxWidth, maxHeight = nodeModel.maxHeight, rotate = nodeModel.rotate, oldCenterX = nodeModel.x, oldCenterY = nodeModel.y;
     var isFreezeWidth = minWidth === maxWidth;
     var isFreezeHeight = minHeight === maxHeight;
     var resizeInfo = {
@@ -180,7 +212,9 @@ var handleResize = function (_a) {
         PCTResizeInfo: PCTResizeInfo,
     };
     var pct = r || (rx && ry) ? 1 / 2 : 1;
-    var nextSize = (0, exports.recalcResizeInfo)(index, resizeInfo, pct, isFreezeWidth, isFreezeHeight);
+    var controlX = x;
+    var controlY = y;
+    var nextSize = (0, exports.recalcResizeInfo)(index, resizeInfo, pct, isFreezeWidth, isFreezeHeight, rotate, controlX, controlY, oldCenterX, oldCenterY);
     // 限制放大缩小的最大最小范围
     if (nextSize.width < minWidth ||
         nextSize.width > maxWidth ||
@@ -190,14 +224,104 @@ var handleResize = function (_a) {
         cancelCallback === null || cancelCallback === void 0 ? void 0 : cancelCallback();
         return;
     }
-    // 如果限制了宽高不变，对应的 x/y 不产生位移
-    nextSize.deltaX = isFreezeWidth ? 0 : nextSize.deltaX;
-    nextSize.deltaY = isFreezeWidth ? 0 : nextSize.deltaY;
+    if (rotate % (2 * Math.PI) == 0 ||
+        PCTResizeInfo ||
+        controlX === undefined ||
+        controlY === undefined) {
+        // rotate!==0并且不是PCTResizeInfo时，即使是isFreezeWidth||isFreezeHeight
+        // recalcRotatedResizeInfo()计算出来的中心点会发生变化
+        // 如果限制了宽高不变，对应的 x/y 不产生位移
+        nextSize.deltaX = isFreezeWidth ? 0 : nextSize.deltaX;
+        nextSize.deltaY = isFreezeHeight ? 0 : nextSize.deltaY;
+    }
     var preNodeData = nodeModel.getData();
     var curNodeData = nodeModel.resize(nextSize);
+    // 检测preNodeData和curNodeData是否没变化
+    if (preNodeData.x === curNodeData.x && preNodeData.y === curNodeData.y) {
+        // 中心点x和y都没有变化，说明无法resize，阻止下面边的更新以及resize事件的emit
+        return;
+    }
     // 更新边
     (0, exports.updateEdgePointByAnchors)(nodeModel, graphModel);
     // 触发 resize 事件
     (0, exports.triggerResizeEvent)(preNodeData, curNodeData, deltaX, deltaY, index, nodeModel, graphModel);
 };
 exports.handleResize = handleResize;
+function calculateWidthAndHeight(startRotatedTouchControlPoint, endRotatedTouchControlPoint, oldCenter, angle, freezeWidth, freezeHeight, oldWidth, oldHeight) {
+    if (freezeWidth === void 0) { freezeWidth = false; }
+    if (freezeHeight === void 0) { freezeHeight = false; }
+    // 假设目前触摸的是右下角的control点
+    // 计算出来左上角的control坐标，resize过程左上角的control坐标保持不变
+    var freezePoint = {
+        x: oldCenter.x - (startRotatedTouchControlPoint.x - oldCenter.x),
+        y: oldCenter.y - (startRotatedTouchControlPoint.y - oldCenter.y),
+    };
+    // 【touchEndPoint】右下角 + freezePoint左上角 计算出新的中心点
+    var newCenter = (0, rotate_1.getNewCenter)(freezePoint, endRotatedTouchControlPoint);
+    // 得到【touchEndPoint】右下角-没有transform的坐标
+    var endZeroTouchControlPoint = (0, rotate_1.calculatePointAfterRotateAngle)(endRotatedTouchControlPoint, newCenter, -angle);
+    // ---------- 使用transform之前的坐标计算出新的width和height ----------
+    // 得到左上角---没有transform的坐标
+    var zeroFreezePoint = (0, rotate_1.calculatePointAfterRotateAngle)(freezePoint, newCenter, -angle);
+    if (freezeWidth) {
+        // 如果固定width，那么不能单纯使用endZeroTouchControlPoint.x=startZeroTouchControlPoint.x
+        // 因为去掉transform的左上角不一定是重合的，我们要保证的是transform后的左上角重合
+        var newWidth = Math.abs(endZeroTouchControlPoint.x - zeroFreezePoint.x);
+        var widthDx = newWidth - oldWidth;
+        // 点击的是左边锚点，是+widthDx/2，点击是右边锚点，是-widthDx/2
+        if (newCenter.x > endZeroTouchControlPoint.x) {
+            // 当前触摸的是左边锚点
+            newCenter.x = newCenter.x + widthDx / 2;
+        }
+        else {
+            // 当前触摸的是右边锚点
+            newCenter.x = newCenter.x - widthDx / 2;
+        }
+    }
+    if (freezeHeight) {
+        var newHeight = Math.abs(endZeroTouchControlPoint.y - zeroFreezePoint.y);
+        var heightDy = newHeight - oldHeight;
+        if (newCenter.y > endZeroTouchControlPoint.y) {
+            // 当前触摸的是上边锚点
+            newCenter.y = newCenter.y + heightDy / 2;
+        }
+        else {
+            newCenter.y = newCenter.y - heightDy / 2;
+        }
+    }
+    if (freezeWidth || freezeHeight) {
+        // 如果调整过transform之前的坐标，那么transform后的坐标也会改变，那么算出来的newCenter也得调整
+        // 由于无论如何rotate，中心点都是不变的，因此我们可以使用transform之前的坐标算出新的中心点
+        var nowFreezePoint = (0, rotate_1.calculatePointAfterRotateAngle)(zeroFreezePoint, newCenter, angle);
+        // 得到当前新rect的左上角与实际上transform后的左上角的偏移量
+        var dx = nowFreezePoint.x - freezePoint.x;
+        var dy = nowFreezePoint.y - freezePoint.y;
+        // 修正不使用transform的坐标: 左上角、右下角、center
+        newCenter.x = newCenter.x - dx;
+        newCenter.y = newCenter.y - dy;
+        zeroFreezePoint = (0, rotate_1.calculatePointAfterRotateAngle)(freezePoint, newCenter, -angle);
+        endZeroTouchControlPoint = {
+            x: newCenter.x - (zeroFreezePoint.x - newCenter.x),
+            y: newCenter.y - (zeroFreezePoint.y - newCenter.y),
+        };
+    }
+    // transform之前的坐标的左上角+右下角计算出宽度和高度
+    var width = Math.abs(endZeroTouchControlPoint.x - zeroFreezePoint.x);
+    var height = Math.abs(endZeroTouchControlPoint.y - zeroFreezePoint.y);
+    // ---------- 使用transform之前的坐标计算出新的width和height ----------
+    if (freezeWidth) {
+        // 理论计算出来的width应该等于oldWidth
+        // 但是有误差，比如oldWidth = 100; newWidth=100.000000000001
+        // 会在handleResize()限制放大缩小的最大最小范围中被阻止滑动
+        width = oldWidth;
+    }
+    if (freezeHeight) {
+        height = oldHeight;
+    }
+    return {
+        width: width,
+        height: height,
+        center: newCenter,
+    };
+}
+exports.calculateWidthAndHeight = calculateWidthAndHeight;

package/lib/view/Anchor.js

@@ -141,14 +141,12 @@ var Anchor = /** @class */ (function (_super) {
             _this.sourceRuleResults.clear();
             _this.targetRuleResults.clear();
             var _b = _this.props, graphModel = _b.graphModel, nodeModel = _b.nodeModel, anchorData = _b.anchorData;
-            if (edgeModel) {
-                graphModel.eventCenter.emit(constant_1.EventType.ANCHOR_DRAGEND, {
-                    data: anchorData,
-                    e: event,
-                    nodeModel: nodeModel,
-                    edgeModel: edgeModel,
-                });
-            }
+            graphModel.eventCenter.emit(constant_1.EventType.ANCHOR_DRAGEND, {
+                data: anchorData,
+                e: event,
+                nodeModel: nodeModel,
+                edgeModel: edgeModel !== null && edgeModel !== void 0 ? edgeModel : undefined,
+            });
         };
         _this.checkEnd = function (event) {
             var _a;

package/lib/view/Control.d.ts

@@ -30,6 +30,7 @@ export declare class ResizeControl extends Component<IResizeControlProps, IResiz
     readonly graphModel: GraphModel;
     readonly dragHandler: StepDrag;
     constructor(props: IResizeControlProps);
+    componentWillUnmount(): void;
     updateEdgePointByAnchors: () => void;
     triggerResizeEvent: (preNodeData: ResizeNodeData, curNodeData: ResizeNodeData, deltaX: any, deltaY: any, index: any, nodeModel: BaseNodeModel) => void;
     /**

package/lib/view/Control.js

@@ -213,9 +213,11 @@ var ResizeControl = /** @class */ (function (_super) {
         _this.resizeNode = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
             var index = _this.index;
-            var _b = _this.props, model = _b.model, graphModel = _b.graphModel;
+            var _b = _this.props, model = _b.model, graphModel = _b.graphModel, x = _b.x, y = _b.y;
             // DONE: 调用每个节点中更新缩放时的方法 updateNode 函数，用来各节点缩放的方法
             (0, util_1.handleResize)({
+                x: x,
+                y: y,
                 deltaX: deltaX,
                 deltaY: deltaY,
                 index: index,
@@ -316,6 +318,9 @@ var ResizeControl = /** @class */ (function (_super) {
         });
         return _this;
     }
+    ResizeControl.prototype.componentWillUnmount = function () {
+        this.dragHandler.destroy();
+    };
     ResizeControl.prototype.render = function () {
         var _a = this.props, x = _a.x, y = _a.y, direction = _a.direction, model = _a.model;
         var _b = model.getResizeControlStyle(), width = _b.width, height = _b.height, restStyle = __rest(_b, ["width", "height"]);

package/lib/view/Graph.js

@@ -14,17 +14,6 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -104,12 +93,11 @@ var Graph = /** @class */ (function (_super) {
         if (options.height) {
             style.height = "".concat(graphModel.height, "px");
         }
-        var grid = options.grid && overlay_1.Grid.getGridOptions(options.grid);
-        var fakeNode = graphModel.fakeNode, editConfigModel = graphModel.editConfigModel;
+        var fakeNode = graphModel.fakeNode, editConfigModel = graphModel.editConfigModel, background = graphModel.background;
         var adjustEdge = editConfigModel.adjustEdge;
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "lf-graph", "flow-id": graphModel.flowId, children: [(0, jsx_runtime_1.jsxs)(overlay_1.CanvasOverlay, { graphModel: graphModel, dnd: dnd, children: [(0, jsx_runtime_1.jsx)("g", { className: "lf-base", children: (0, lodash_es_1.map)(graphModel.sortElements, function (nodeModel) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "lf-graph", "flow-id": graphModel.flowId, style: style, children: [(0, jsx_runtime_1.jsxs)(overlay_1.CanvasOverlay, { graphModel: graphModel, dnd: dnd, children: [(0, jsx_runtime_1.jsx)("g", { className: "lf-base", children: (0, lodash_es_1.map)(graphModel.sortElements, function (nodeModel) {
                                 return _this.getComponent(nodeModel, graphModel);
-                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), (0, jsx_runtime_1.jsxs)(overlay_1.ModificationOverlay, { graphModel: graphModel, children: [(0, jsx_runtime_1.jsx)(overlay_1.OutlineOverlay, { graphModel: graphModel }), adjustEdge ? (0, jsx_runtime_1.jsx)(overlay_1.BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? ((0, jsx_runtime_1.jsx)(overlay_1.SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), (0, jsx_runtime_1.jsx)(overlay_1.ToolOverlay, { graphModel: graphModel, tool: tool }), options.background && ((0, jsx_runtime_1.jsx)(overlay_1.BackgroundOverlay, { background: options.background })), grid && (0, jsx_runtime_1.jsx)(overlay_1.Grid, __assign({}, grid, { graphModel: graphModel }))] }));
+                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), (0, jsx_runtime_1.jsxs)(overlay_1.ModificationOverlay, { graphModel: graphModel, children: [(0, jsx_runtime_1.jsx)(overlay_1.OutlineOverlay, { graphModel: graphModel }), adjustEdge ? (0, jsx_runtime_1.jsx)(overlay_1.BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? ((0, jsx_runtime_1.jsx)(overlay_1.SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), (0, jsx_runtime_1.jsx)(overlay_1.ToolOverlay, { graphModel: graphModel, tool: tool }), background && (0, jsx_runtime_1.jsx)(overlay_1.BackgroundOverlay, { background: background }), (0, jsx_runtime_1.jsx)(overlay_1.Grid, { graphModel: graphModel })] }));
     };
     Graph = __decorate([
         __1.observer

package/lib/view/behavior/dnd.js

@@ -44,6 +44,7 @@ var Dnd = /** @class */ (function () {
                 _this.lf.setNodeSnapLine(nodeData);
                 _this.lf.graphModel.eventCenter.emit(constant_1.EventType.NODE_DND_DRAG, {
                     data: nodeData,
+                    e: e,
                 });
             }
             return false;

package/lib/view/edge/BaseEdge.d.ts

@@ -13,6 +13,7 @@ export type IEdgeState = {
 export declare abstract class BaseEdge<P extends IProps> extends Component<P, IEdgeState> {
     static isObserved: boolean;
     static extendsKey?: string;
+    mouseUpDrag?: boolean;
     startTime?: number;
     contextMenuTime?: number;
     clickTimer?: number;
@@ -127,10 +128,11 @@ export declare abstract class BaseEdge<P extends IProps> extends Component<P, IE
      * 不支持重写
      */
     handleMouseDown: (e: MouseEvent) => void;
+    handleMouseUp: () => void;
     /**
      * 不支持重写
      */
-    handleMouseUp: (e: MouseEvent) => void;
+    handleClick: (e: MouseEvent) => void;
     /**
      * @overridable 支持重写, 此方法为获取边的形状，如果需要自定义边的形状，请重写此方法。
      * @example https://docs.logic-flow.cn/docs/#/zh/guide/basic/edge?id=%e5%9f%ba%e4%ba%8e-react-%e7%bb%84%e4%bb%b6%e8%87%aa%e5%ae%9a%e4%b9%89%e8%be%b9

package/lib/view/edge/BaseEdge.js

@@ -149,15 +149,18 @@ var BaseEdge = /** @class */ (function (_super) {
             e.stopPropagation();
             _this.startTime = new Date().getTime();
         };
+        _this.handleMouseUp = function () {
+            var model = _this.props.model;
+            _this.mouseUpDrag = model.isDragging;
+        };
         /**
          * 不支持重写
          */
-        _this.handleMouseUp = function (e) {
+        _this.handleClick = function (e) {
             if (!_this.startTime)
                 return;
-            var time = new Date().getTime() - _this.startTime;
-            if (time > 200)
-                return; // 事件大于200ms，认为是拖拽。
+            if (_this.mouseUpDrag)
+                return; // 如果是拖拽，不触发click事件。
             var isRightClick = e.button === 2;
             if (isRightClick)
                 return;
@@ -405,7 +408,7 @@ var BaseEdge = /** @class */ (function (_super) {
                         isSelected && 'lf-edge-selected',
                     ]
                         .filter(Boolean)
-                        .join(' '), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onContextMenu: this.handleContextMenu, onMouseOver: this.setHoverOn, onMouseEnter: this.setHoverOn, onMouseLeave: this.setHoverOff, children: [this.getShape(), this.getAppend(), this.getText(), this.getArrow()] }), isShowAdjustPoint && isSelected ? this.getAdjustPoints() : ''] }));
+                        .join(' '), onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onContextMenu: this.handleContextMenu, onMouseOver: this.setHoverOn, onMouseEnter: this.setHoverOn, onMouseLeave: this.setHoverOff, children: [this.getShape(), this.getAppend(), this.getText(), this.getArrow()] }), isShowAdjustPoint && isSelected ? this.getAdjustPoints() : ''] }));
     };
     BaseEdge.isObserved = false;
     return BaseEdge;

package/lib/view/overlay/BackgroundOverlay.d.ts

@@ -1,26 +1,16 @@
 import { Component } from 'preact/compat';
+import { Options as LFOptions } from '../../options';
 /**
  * 背景配置, 支持css属性配置
  * https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
  * @example
  * {
- *  backgroundImage: "url('./img/grid.svg')",
- backgroundRepeat: 'repeat',
+ *    backgroundImage: "url('./img/grid.svg')",
+      backgroundRepeat: 'repeat',
  * }
  */
-export type BackgroundConfig = {
-    /**
-     * 背景图片地址
-     */
-    backgroundImage?: string;
-    /**
-     * 是否重复
-     */
-    backgroundRepeat?: string;
-    [key: string]: any;
-};
 type IProps = {
-    background: BackgroundConfig;
+    background: boolean | LFOptions.BackgroundConfig;
 };
 export declare class BackgroundOverlay extends Component<IProps> {
     render(): import("preact/compat").JSX.Element;

package/lib/view/overlay/BackgroundOverlay.js

@@ -14,10 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BackgroundOverlay = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 var compat_1 = require("preact/compat");
+var __1 = require("../..");
 var BackgroundOverlay = /** @class */ (function (_super) {
     __extends(BackgroundOverlay, _super);
     function BackgroundOverlay() {
@@ -25,8 +32,11 @@ var BackgroundOverlay = /** @class */ (function (_super) {
     }
     BackgroundOverlay.prototype.render = function () {
         var background = this.props.background;
-        return ((0, jsx_runtime_1.jsx)("div", { className: "lf-background", children: (0, jsx_runtime_1.jsx)("div", { style: background, className: "lf-background-area" }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: "lf-background", children: (0, jsx_runtime_1.jsx)("div", { style: typeof background === 'object' ? background : {}, className: "lf-background-area" }) }));
     };
+    BackgroundOverlay = __decorate([
+        __1.observer
+    ], BackgroundOverlay);
     return BackgroundOverlay;
 }(compat_1.Component));
 exports.BackgroundOverlay = BackgroundOverlay;

package/lib/view/overlay/Grid.d.ts

@@ -1,11 +1,12 @@
 import { Component } from 'preact/compat';
 import { GraphModel } from '../../model';
-import GridOptions = Grid.GridOptions;
-type IProps = GridOptions & {
+type IProps = {
     graphModel: GraphModel;
 };
 export declare class Grid extends Component<IProps> {
+    gridOptions: Grid.GridOptions;
     readonly id: string;
+    constructor(props: IProps);
     renderDot(): import("preact/compat").JSX.Element;
     renderMesh(): import("preact/compat").JSX.Element;
     render(): import("preact/compat").JSX.Element;
@@ -30,7 +31,7 @@ export declare namespace Grid {
             /**
              * 网格的颜色
              */
-            color: string;
+            color?: string;
             /**
              * 网格的宽度
              * - 对于 `dot` 点状网格，表示点的大小

package/lib/view/overlay/Grid.js

@@ -20,31 +20,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Grid = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
@@ -55,14 +30,15 @@ var util_1 = require("../../util");
 var constant_1 = require("../../constant");
 var Grid = /** @class */ (function (_super) {
     __extends(Grid, _super);
-    function Grid() {
-        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+    function Grid(props) {
+        var _this = _super.call(this, props) || this;
         _this.id = (0, util_1.createUuid)();
+        _this.gridOptions = _this.props.graphModel.grid;
         return _this;
     }
     // 网格类型为点状
     Grid.prototype.renderDot = function () {
-        var _a = this.props, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
+        var _a = this.gridOptions, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
         var _c = config !== null && config !== void 0 ? config : {}, color = _c.color, _d = _c.thickness, thickness = _d === void 0 ? 2 : _d;
         // 对于点状网格，点的半径不能大于网格大小的四分之一
         var radius = Math.min(Math.max(2, thickness), size / 4);
@@ -72,16 +48,17 @@ var Grid = /** @class */ (function (_super) {
     // 网格类型为交叉线
     // todo: 采用背景缩放的方式，实现更好的体验
     Grid.prototype.renderMesh = function () {
-        var _a = this.props, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
+        var _a = this.gridOptions, config = _a.config, _b = _a.size, size = _b === void 0 ? 1 : _b, visible = _a.visible;
         var _c = config !== null && config !== void 0 ? config : {}, color = _c.color, _d = _c.thickness, thickness = _d === void 0 ? 1 : _d;
         // 对于交叉线网格，线的宽度不能大于网格大小的一半
         var strokeWidth = Math.min(Math.max(1, thickness), size / 2);
         var d = "M 0 0 H ".concat(size, " V ").concat(size, " H 0 Z");
         var opacity = visible ? 1 : 0;
-        return ((0, jsx_runtime_1.jsx)("path", { d: d, stroke: color, strokeWidth: strokeWidth, opacity: opacity, fill: "transparent" }));
+        return ((0, jsx_runtime_1.jsx)("path", { d: d, stroke: color, strokeWidth: strokeWidth / 2, opacity: opacity, fill: "transparent" }));
     };
     Grid.prototype.render = function () {
-        var _a = this.props, type = _a.type, _b = _a.size, size = _b === void 0 ? 1 : _b, transformModel = _a.graphModel.transformModel;
+        var transformModel = this.props.graphModel.transformModel;
+        var _a = this.gridOptions, type = _a.type, _b = _a.size, size = _b === void 0 ? 1 : _b;
         var SCALE_X = transformModel.SCALE_X, SKEW_Y = transformModel.SKEW_Y, SKEW_X = transformModel.SKEW_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
         var matrixString = [
             SCALE_X,

package/lib/view/text/BaseText.js

@@ -67,7 +67,7 @@ var BaseText = /** @class */ (function (_super) {
         _this.onDragging = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
             var _b = _this.props, model = _b.model, transformModel = _b.graphModel.transformModel;
-            if (deltaX && deltaY) {
+            if (deltaX || deltaY) {
                 var _c = __read(transformModel.fixDeltaXY(deltaX, deltaY), 2), curDeltaX = _c[0], curDeltaY = _c[1];
                 model.moveText(curDeltaX, curDeltaY);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/algorithm/edge.ts

@@ -60,10 +60,8 @@ export const isInSegment = (point: Point, start: Point, end: Point) => {
   const k = (endY - startY) / (endX - startX)
   const b = startY - k * startX
   return (
-    x >= startX &&
-    x <= endX &&
-    y >= startY &&
-    y <= endY &&
+    ((x >= startX && x <= endX) || (x <= startX && x >= endX)) &&
+    ((y >= startY && y <= endY) || (y <= startY && y >= endY)) &&
     Math.abs(y - k * x + b) < Number.EPSILON
   )
 }

package/src/event/eventArgs.ts

@@ -140,7 +140,7 @@ interface NodeEventArgs {
   /**
    * 拖拽外部拖入节点
    */
-  'node:dnd-drag': NodeEventArgsPick<'data'>
+  'node:dnd-drag': NodeEventArgsPick<'data' | 'e'>
   /**
    * 开始拖拽节点
    */
@@ -167,6 +167,27 @@ interface NodeEventArgs {
   'node:resize': NodeEventArgsPick<
     'preData' | 'data' | 'model' | 'deltaX' | 'deltaY' | 'index'
   >
+  /**
+   * 元素的 properties 发生改变
+   */
+  'node:properties-change': {
+    /**
+     * 元素的 id
+     */
+    id: string
+    /**
+     * 改变的 properties 的 key
+     */
+    keys: string[]
+    /**
+     * 改变前的 properties
+     */
+    preProperties: Record<string, any>
+    /**
+     * 改变后的 properties
+     */
+    properties: Record<string, any>
+  }
 }
 
 type EdgeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<
@@ -356,33 +377,6 @@ interface CommonEventArgs {
      */
     position: ClientPosition
   }
-  /**
-   * 元素的 properties 发生改变
-   */
-  'properties:change': {
-    data: {
-      /**
-       * 元素的 id
-       */
-      id: string
-      /**
-       * 元素的类型
-       */
-      type: string
-      /**
-       * 改变的 properties 的 key
-       */
-      keys: string[]
-      /**
-       * 改变前的 properties
-       */
-      preProperties: Record<string, any>
-      /**
-       * 改变后的 properties
-       */
-      properties: Record<string, any>
-    }
-  }
   /**
    * 进行画布平移或缩放等变化操作时触发
    */
@@ -440,7 +434,7 @@ type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> =
       /**
        * 通过拖动锚点连线添加的边的数据
        */
-      edgeModel: BaseEdgeModel
+      edgeModel?: BaseEdgeModel
     },
     T
   >