@logicflow/core 2.0.5 → 2.0.7

package/lib/event/eventArgs.d.ts

@@ -105,7 +105,7 @@ interface NodeEventArgs {
     /**
      * 拖拽外部拖入节点
      */
-    'node:dnd-drag': NodeEventArgsPick<'data'>;
+    'node:dnd-drag': NodeEventArgsPick<'data' | 'e'>;
     /**
      * 开始拖拽节点
      */
@@ -130,6 +130,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<{
     /**
@@ -275,33 +296,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>;
-        };
-    };
     /**
      * 进行画布平移或缩放等变化操作时触发
      */
@@ -356,7 +350,7 @@ type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> = P
     /**
      * 通过拖动锚点连线添加的边的数据
      */
-    edgeModel: BaseEdgeModel;
+    edgeModel?: BaseEdgeModel;
 }, T>;
 /**
  * 锚点事件

package/lib/model/BaseModel.d.ts

@@ -42,6 +42,15 @@ export declare namespace Model {
      * deltaY: 移动的 Y 轴距离
      */
     type NodeMoveRule = (model: BaseNodeModel, deltaX: number, deltaY: number) => boolean | IsAllowMove;
+    /**
+     * 限制节点resize规则
+     * model: 移动节点的 model
+     * deltaX: 中心点移动的 X 轴距离
+     * deltaY: 中心点移动的 Y 轴距离
+     * width: 中心点新的width
+     * height: 中心点新的height
+     */
+    type NodeResizeRule = (model: BaseNodeModel, deltaX: number, deltaY: number, width: number, height: number) => boolean;
     type AdjustEdgeStartAndEndParams = {
         startPoint: LogicFlow.Point;
         endPoint: LogicFlow.Point;

package/lib/model/GraphModel.d.ts

@@ -3,6 +3,7 @@ import { ElementState, EventType, OverlapMode, TextMode } from '../constant';
 import LogicFlow from '../LogicFlow';
 import { Options as LFOptions } from '../options';
 import EventEmitter from '../event/eventEmitter';
+import { Grid } from '../view/overlay';
 import PointTuple = LogicFlow.PointTuple;
 import GraphData = LogicFlow.GraphData;
 import NodeConfig = LogicFlow.NodeConfig;
@@ -16,6 +17,7 @@ export declare class GraphModel {
     width: number;
     height: number;
     theme: LogicFlow.Theme;
+    grid: Grid.GridOptions;
     readonly eventCenter: EventEmitter;
     readonly modelMap: Map<string, LogicFlow.GraphElementCtor>;
     /**
@@ -32,9 +34,14 @@ export declare class GraphModel {
     elementsModelMap: Map<string, BaseNodeModel | BaseEdgeModel>;
     /**
      * 节点移动规则判断
-     * 在节点移动的时候，会出发此数组中的所有规则判断
+     * 在节点移动的时候，会触发此数组中的所有规则判断
      */
     nodeMoveRules: Model.NodeMoveRule[];
+    /**
+     * 节点resize规则判断
+     * 在节点resize的时候，会触发此数组中的所有规则判断
+     */
+    nodeResizeRules: Model.NodeResizeRule[];
     /**
      * 获取自定义连线轨迹
      */
@@ -330,6 +337,7 @@ export declare class GraphModel {
      *
      */
     addNodeMoveRules(fn: Model.NodeMoveRule): void;
+    addNodeResizeRules(fn: Model.NodeResizeRule): void;
     /**
      * 设置默认的边类型
      * 也就是设置在节点直接有用户手动绘制的连线类型。
@@ -377,6 +385,14 @@ export declare class GraphModel {
      * todo docs link
      */
     setTheme(style: Partial<LogicFlow.Theme>): void;
+    /**
+     * 更新网格配置
+     */
+    updateGridOptions(options: Partial<Grid.GridOptions>): void;
+    /**
+     * 更新网格配置
+     */
+    updateBackgroundOptions(options: boolean | Partial<LFOptions.BackgroundConfig>): void;
     /**
      * 重新设置画布的宽高
      */

package/lib/model/GraphModel.js

@@ -52,6 +52,7 @@ var _1 = require(".");
 var constant_1 = require("../constant");
 var util_1 = require("../util");
 var eventEmitter_1 = __importDefault(require("../event/eventEmitter"));
+var overlay_1 = require("../view/overlay");
 var GraphModel = /** @class */ (function () {
     function GraphModel(options) {
         // 维护所有节点和边类型对应的 model
@@ -64,9 +65,14 @@ var GraphModel = /** @class */ (function () {
         this.elementsModelMap = new Map();
         /**
          * 节点移动规则判断
-         * 在节点移动的时候，会出发此数组中的所有规则判断
+         * 在节点移动的时候，会触发此数组中的所有规则判断
          */
         this.nodeMoveRules = [];
+        /**
+         * 节点resize规则判断
+         * 在节点resize的时候，会触发此数组中的所有规则判断
+         */
+        this.nodeResizeRules = [];
         // 当前图上所有节点的model
         this.nodes = [];
         // 当前图上所有边的model
@@ -89,6 +95,7 @@ var GraphModel = /** @class */ (function () {
             this.gridSize = grid.size || 1; // 默认 gridSize 设置为 1
         }
         this.theme = (0, util_1.setupTheme)(options.style);
+        this.grid = overlay_1.Grid.getGridOptions(grid !== null && grid !== void 0 ? grid : false);
         this.edgeType = options.edgeType || 'polyline';
         this.animation = (0, util_1.setupAnimation)(animation);
         this.overlapMode = options.overlapMode || constant_1.OverlapMode.DEFAULT;
@@ -1087,6 +1094,11 @@ var GraphModel = /** @class */ (function () {
             this.nodeMoveRules.push(fn);
         }
     };
+    GraphModel.prototype.addNodeResizeRules = function (fn) {
+        if (!this.nodeResizeRules.includes(fn)) {
+            this.nodeResizeRules.push(fn);
+        }
+    };
     /**
      * 设置默认的边类型
      * 也就是设置在节点直接有用户手动绘制的连线类型。
@@ -1234,6 +1246,26 @@ var GraphModel = /** @class */ (function () {
     GraphModel.prototype.setTheme = function (style) {
         this.theme = (0, util_1.updateTheme)(__assign(__assign({}, this.theme), style));
     };
+    /**
+     * 更新网格配置
+     */
+    GraphModel.prototype.updateGridOptions = function (options) {
+        (0, lodash_es_1.merge)(this.grid, options);
+    };
+    /**
+     * 更新网格配置
+     */
+    GraphModel.prototype.updateBackgroundOptions = function (options) {
+        if (typeof options === 'boolean') {
+            this.background = options;
+        }
+        else if (typeof this.background === 'boolean') {
+            this.background = options;
+        }
+        else {
+            this.background = __assign(__assign({}, this.background), options);
+        }
+    };
     /**
      * 重新设置画布的宽高
      */
@@ -1361,6 +1393,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         mobx_1.observable
     ], GraphModel.prototype, "height", void 0);
+    __decorate([
+        mobx_1.observable
+    ], GraphModel.prototype, "grid", void 0);
     __decorate([
         mobx_1.observable
     ], GraphModel.prototype, "edgeType", void 0);

package/lib/model/edge/BaseEdgeModel.d.ts

@@ -48,6 +48,7 @@ export declare class BaseEdgeModel<P extends PropertiesType = PropertiesType> im
     visible: boolean;
     isAnimation: boolean;
     isShowAdjustPoint: boolean;
+    isDragging?: boolean;
     graphModel: GraphModel;
     zIndex: number;
     state: ElementState;

package/lib/model/node/BaseNodeModel.d.ts

@@ -72,6 +72,7 @@ export declare class BaseNodeModel<P extends PropertiesType = PropertiesType> im
     targetRules: Model.ConnectRule[];
     sourceRules: Model.ConnectRule[];
     moveRules: Model.NodeMoveRule[];
+    resizeRules: Model.NodeResizeRule[];
     hasSetTargetRules: boolean;
     hasSetSourceRules: boolean;
     [propName: string]: any;
@@ -264,6 +265,12 @@ export declare class BaseNodeModel<P extends PropertiesType = PropertiesType> im
     moveTo(x: number, y: number, isIgnoreRule?: boolean): boolean;
     moveText(deltaX: number, deltaY: number): void;
     updateText(value: string): void;
+    addNodeResizeRules(fn: Model.NodeResizeRule): void;
+    /**
+     * 内部方法
+     * 是否允许resize节点到新的位置
+     */
+    isAllowResizeNode(deltaX: number, deltaY: number, width: number, height: number): boolean;
     setSelected(flag?: boolean): void;
     setHovered(flag?: boolean): void;
     setIsShowAnchor(flag?: boolean): void;

package/lib/model/node/BaseNodeModel.js

@@ -98,6 +98,7 @@ var BaseNodeModel = /** @class */ (function () {
         this.targetRules = [];
         this.sourceRules = [];
         this.moveRules = []; // 节点移动之前的hook
+        this.resizeRules = []; // 节点resize之前的hook
         this.hasSetTargetRules = false; // 用来限制rules的重复值
         this.hasSetSourceRules = false; // 用来限制rules的重复值
         this.graphModel = graphModel;
@@ -243,7 +244,7 @@ var BaseNodeModel = /** @class */ (function () {
                     textConfig.draggable = text.draggable;
                 }
                 if (!(0, lodash_es_1.isUndefined)(text.editable)) {
-                    textConfig.draggable = text.draggable;
+                    textConfig.editable = text.editable;
                 }
             }
         }
@@ -255,6 +256,10 @@ var BaseNodeModel = /** @class */ (function () {
      */
     BaseNodeModel.prototype.resize = function (resizeInfo) {
         var width = resizeInfo.width, height = resizeInfo.height, deltaX = resizeInfo.deltaX, deltaY = resizeInfo.deltaY;
+        var isAllowResize = this.isAllowResizeNode(deltaX, deltaY, width, height);
+        if (!isAllowResize) {
+            return this.getData();
+        }
         // 移动节点以及文本内容
         this.move(deltaX / 2, deltaY / 2);
         this.width = width;
@@ -277,6 +282,18 @@ var BaseNodeModel = /** @class */ (function () {
         if ((0, mobx_1.isObservable)(properties)) {
             properties = (0, mobx_1.toJS)(properties);
         }
+        if ((0, lodash_es_1.isNil)(properties.width)) {
+            // resize()的时候会触发this.setProperties({width,height})
+            // 然后返回getData()，可以从properties拿到width
+            // 但是初始化如果没有在properties传入width，那么getData()就一直无法从properties拿到width
+            properties.width = this.width;
+        }
+        if ((0, lodash_es_1.isNil)(properties.height)) {
+            // resize()的时候会触发this.setProperties({width,height})
+            // 然后返回getData()，可以从properties拿到height
+            // 但是初始化如果没有在properties传入height，那么getData()就一直无法从properties拿到width
+            properties.height = this.height;
+        }
         var data = {
             id: this.id,
             type: this.type,
@@ -609,6 +626,10 @@ var BaseNodeModel = /** @class */ (function () {
             this.y = this.y + deltaY;
             this.text && this.moveText(0, deltaY);
         }
+        if (isAllowMoveX || isAllowMoveY) {
+            // 更新x和y的同时也要更新对应的transform旋转矩阵（依赖x、y)
+            this.rotate = this._rotate;
+        }
         return isAllowMoveX || isAllowMoveY;
     };
     BaseNodeModel.prototype.getMoveDistance = function (deltaX, deltaY, isIgnoreRule) {
@@ -652,6 +673,35 @@ var BaseNodeModel = /** @class */ (function () {
     BaseNodeModel.prototype.updateText = function (value) {
         this.text = __assign(__assign({}, (0, mobx_1.toJS)(this.text)), { value: value });
     };
+    BaseNodeModel.prototype.addNodeResizeRules = function (fn) {
+        if (!this.resizeRules.includes(fn)) {
+            this.resizeRules.push(fn);
+        }
+    };
+    /**
+     * 内部方法
+     * 是否允许resize节点到新的位置
+     */
+    BaseNodeModel.prototype.isAllowResizeNode = function (deltaX, deltaY, width, height) {
+        var e_2, _a;
+        var rules = this.resizeRules.concat(this.graphModel.nodeResizeRules);
+        try {
+            for (var rules_2 = __values(rules), rules_2_1 = rules_2.next(); !rules_2_1.done; rules_2_1 = rules_2.next()) {
+                var rule = rules_2_1.value;
+                var r = rule(this, deltaX, deltaY, width, height);
+                if (!r)
+                    return false;
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (rules_2_1 && !rules_2_1.done && (_a = rules_2.return)) _a.call(rules_2);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+        return true;
+    };
     BaseNodeModel.prototype.setSelected = function (flag) {
         if (flag === void 0) { flag = true; }
         this.isSelected = flag;
@@ -689,7 +739,7 @@ var BaseNodeModel = /** @class */ (function () {
         var preProperties = (0, mobx_1.toJS)(this.properties);
         this.properties = nextProperties;
         this.setAttributes();
-        // 触发更新节点 properties:change 的事件
+        // 触发更新节点 node:properties-change 的事件
         this.graphModel.eventCenter.emit(constant_1.EventType.NODE_PROPERTIES_CHANGE, {
             id: this.id,
             keys: updateKeys,
@@ -842,6 +892,9 @@ var BaseNodeModel = /** @class */ (function () {
     __decorate([
         mobx_1.action
     ], BaseNodeModel.prototype, "updateText", null);
+    __decorate([
+        mobx_1.action
+    ], BaseNodeModel.prototype, "addNodeResizeRules", null);
     __decorate([
         mobx_1.action
     ], BaseNodeModel.prototype, "setSelected", null);

package/lib/util/drag.d.ts

@@ -44,4 +44,5 @@ export declare class StepDrag {
     handleMouseMove: (e: MouseEvent) => void;
     handleMouseUp: (e: MouseEvent) => void;
     cancelDrag: () => void;
+    destroy: () => void;
 }

package/lib/util/drag.js

@@ -124,6 +124,17 @@ var StepDrag = /** @class */ (function () {
             _this.onDragEnd({ event: undefined });
             _this.isDragging = false;
         };
+        this.destroy = function () {
+            if (_this.isStartDragging) {
+                // https://github.com/didi/LogicFlow/issues/1934
+                // https://github.com/didi/LogicFlow/issues/1926
+                // cancelDrag()->onDragEnd()->updateEdgePointByAnchors()触发线的重新计算
+                // 我们的本意是为了防止mousemove和mouseup没有及时被移除
+                // 因此这里增加if(this.isStartDragging)的判断，isStartDragging=true代表没有触发handleMouseUp()，此时监听还没被移除
+                // 在拖拽情况下(isStartDragging=true)，此时注册了监听，在组件突然销毁时，强制触发cancelDrag进行监听事件的移除
+                _this.cancelDrag();
+            }
+        };
         this.onDragStart = onDragStart;
         this.onDragging = onDragging;
         this.onDragEnd = onDragEnd;

package/lib/util/graph.d.ts

@@ -1,5 +1,5 @@
 import LogicFlow from '..';
-import { EditConfigModel } from 'src/model';
+import { EditConfigModel } from '..';
 /**
  * 判断一个点是否在指定区域
  * @param point 当前点

package/lib/util/resize.d.ts

@@ -2,6 +2,7 @@ import { ResizeControl, ResizeControlIndex } from '../view/Control';
 import { BaseNodeModel, GraphModel } from '../model';
 import ResizeInfo = ResizeControl.ResizeInfo;
 import ResizeNodeData = ResizeControl.ResizeNodeData;
+import type { SimplePoint } from '../algorithm/rotate';
 /**
  * 计算 Control 拖动后，节点的高度信息
  * @param index
@@ -10,11 +11,23 @@ import ResizeNodeData = ResizeControl.ResizeNodeData;
  * @param freezeWidth
  * @param freezeHeight
  */
-export declare const recalcResizeInfo: (index: ResizeControlIndex, resizeInfo: ResizeInfo, pct?: number, freezeWidth?: boolean, freezeHeight?: boolean) => ResizeInfo;
+export declare const recalcResizeInfo: (index: ResizeControlIndex, resizeInfo: ResizeInfo, pct: number | undefined, freezeWidth: boolean | undefined, freezeHeight: boolean | undefined, rotate: number | undefined, controlX: number | undefined, controlY: number | undefined, oldCenterX: number, oldCenterY: number) => ResizeInfo;
 export declare const updateEdgePointByAnchors: (nodeModel: BaseNodeModel, graphModel: GraphModel) => void;
 export declare const triggerResizeEvent: (preNodeData: ResizeNodeData, curNodeData: ResizeNodeData, deltaX: number, deltaY: number, index: number, nodeModel: BaseNodeModel, graphModel: GraphModel) => void;
+export type IHandleResizeParams = {
+    x?: number;
+    y?: number;
+    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
@@ -22,11 +35,12 @@ export declare const triggerResizeEvent: (preNodeData: ResizeNodeData, curNodeDa
  * @param graphModel
  * @param cancelCallback
  */
-export declare const handleResize: ({ deltaX, deltaY, index, nodeModel, graphModel, cancelCallback, }: {
-    deltaX: any;
-    deltaY: any;
-    index: any;
-    nodeModel: any;
-    graphModel: any;
-    cancelCallback: any;
-}) => void;
+export declare const handleResize: ({ x, y, deltaX, deltaY, index, nodeModel, graphModel, cancelCallback, }: IHandleResizeParams) => void;
+export declare function calculateWidthAndHeight(startRotatedTouchControlPoint: SimplePoint, endRotatedTouchControlPoint: SimplePoint, oldCenter: SimplePoint, angle: number, freezeWidth: boolean | undefined, freezeHeight: boolean | undefined, oldWidth: number, oldHeight: number): {
+    width: number;
+    height: number;
+    center: {
+        x: number;
+        y: number;
+    };
+};