@logicflow/core 2.0.8 → 2.0.10

package/es/view/Graph.js

@@ -55,9 +55,26 @@ var Graph = /** @class */ (function (_super) {
     function Graph() {
         var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
         _this.handleResize = function () {
-            _this.props.graphModel.resize();
+            var _a = _this.props, graphModel = _a.graphModel, options = _a.options;
+            var width = graphModel.width, height = graphModel.height, isContainerWidth = graphModel.isContainerWidth, isContainerHeight = graphModel.isContainerHeight;
+            var resizeWidth = width;
+            var resizeHeight = height;
+            var needUpdate = false;
+            if (isContainerWidth) {
+                resizeWidth = undefined;
+                needUpdate = true;
+            }
+            if (isContainerHeight) {
+                resizeHeight = undefined;
+                needUpdate = true;
+            }
+            if (needUpdate) {
+                graphModel.resize(resizeWidth, resizeHeight);
+            }
+            options.width = width;
+            options.height = height;
         };
-        _this.throttleResize = function () { return throttle(_this.handleResize, 200); };
+        _this.throttleResize = throttle(_this.handleResize, 200);
         return _this;
     }
     Graph.prototype.componentDidMount = function () {

package/es/view/behavior/dnd.js

@@ -81,10 +81,11 @@ var Dnd = /** @class */ (function () {
         });
         // 处理缩放和偏移
         var _b = position.canvasOverlayPosition, x1 = _b.x, y1 = _b.y;
+        var snapGrid = this.lf.graphModel.editConfigModel.snapGrid;
         // x, y 对齐到网格的 size
         return {
-            x: snapToGrid(x1, gridSize),
-            y: snapToGrid(y1, gridSize),
+            x: snapToGrid(x1, gridSize, snapGrid),
+            y: snapToGrid(y1, gridSize, snapGrid),
         };
     };
     Dnd.prototype.startDrag = function (nodeConfig) {

package/es/view/edge/BaseEdge.js

@@ -99,12 +99,16 @@ var BaseEdge = /** @class */ (function (_super) {
                 clearTimeout(_this.clickTimer);
             }
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            var editConfigModel = graphModel.editConfigModel;
             var position = graphModel.getPointByClient({
                 x: ev.clientX,
                 y: ev.clientY,
             });
             graphModel.setElementStateById(model.id, ElementState.SHOW_MENU, position.domOverlayPosition);
-            _this.toFront();
+            // 静默模式下点击节点不变更节点层级
+            if (!editConfigModel.isSilentMode) {
+                _this.toFront();
+            }
             if (!model.isSelected) {
                 graphModel.selectEdgeById(model.id);
             }
@@ -192,7 +196,10 @@ var BaseEdge = /** @class */ (function (_super) {
             }
             var editConfigModel = graphModel.editConfigModel;
             graphModel.selectEdgeById(model.id, isMultipleSelect(e, editConfigModel));
-            _this.toFront();
+            // 静默模式下点击节点不变更节点层级
+            if (!editConfigModel.isSilentMode) {
+                _this.toFront();
+            }
         };
         _this.handleFocus = function () {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;

package/es/view/node/BaseNode.js

@@ -85,7 +85,7 @@ var BaseNode = /** @class */ (function (_super) {
             var _b, _c, _d, _e;
             var event = _a.event;
             var _f = _this.props, model = _f.model, graphModel = _f.graphModel;
-            var _g = graphModel.editConfigModel, stopMoveGraph = _g.stopMoveGraph, autoExpand = _g.autoExpand, transformModel = graphModel.transformModel, selectNodes = graphModel.selectNodes, width = graphModel.width, height = graphModel.height, gridSize = graphModel.gridSize;
+            var _g = graphModel.editConfigModel, stopMoveGraph = _g.stopMoveGraph, autoExpand = _g.autoExpand, snapGrid = _g.snapGrid, transformModel = graphModel.transformModel, selectNodes = graphModel.selectNodes, width = graphModel.width, height = graphModel.height, gridSize = graphModel.gridSize;
             model.isDragging = true;
             var _h = event, clientX = _h.clientX, clientY = _h.clientY;
             var _j = graphModel.getPointByClient({
@@ -97,9 +97,9 @@ var BaseNode = /** @class */ (function (_super) {
             // 2. 考虑鼠标位置不再节点中心
             x = x + ((_c = (_b = _this.moveOffset) === null || _b === void 0 ? void 0 : _b.dx) !== null && _c !== void 0 ? _c : 0);
             y = y + ((_e = (_d = _this.moveOffset) === null || _d === void 0 ? void 0 : _d.dy) !== null && _e !== void 0 ? _e : 0);
-            // 将x, y移动到grid上
-            x = snapToGrid(x, gridSize);
-            y = snapToGrid(y, gridSize);
+            // 校准坐标
+            x = snapToGrid(x, gridSize, snapGrid);
+            y = snapToGrid(y, gridSize, snapGrid);
             if (!width || !height) {
                 graphModel.moveNode2Coordinate(model.id, x, y);
                 return;
@@ -213,12 +213,15 @@ var BaseNode = /** @class */ (function (_super) {
             else {
                 graphModel.selectNodeById(model.id, isMultiple);
                 eventOptions.isSelected = true;
-                _this.toFront();
+                // 静默模式下点击节点不变更节点层级
+                if (!editConfigModel.isSilentMode) {
+                    _this.toFront();
+                }
             }
             // 不是双击的，默认都是单击
             if (isDoubleClick) {
                 if (editConfigModel.nodeTextEdit) {
-                    if (model.text.editable) {
+                    if (model.text.editable && editConfigModel.textMode === TextMode.TEXT) {
                         model.setSelected(false);
                         graphModel.setElementStateById(model.id, ElementState.TEXT_EDIT);
                     }
@@ -233,6 +236,7 @@ var BaseNode = /** @class */ (function (_super) {
         _this.handleContextMenu = function (ev) {
             ev.preventDefault();
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            var editConfigModel = graphModel.editConfigModel;
             // 节点数据，多为事件对象数据抛出
             var nodeData = model.getData();
             var position = graphModel.getPointByClient({
@@ -248,7 +252,10 @@ var BaseNode = /** @class */ (function (_super) {
                 e: ev,
                 position: position,
             });
-            _this.toFront();
+            // 静默模式下点击节点不变更节点层级
+            if (!editConfigModel.isSilentMode) {
+                _this.toFront();
+            }
         };
         _this.handleMouseDown = function (ev) {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
@@ -322,6 +329,12 @@ var BaseNode = /** @class */ (function (_super) {
         if (this.modelDisposer) {
             this.modelDisposer();
         }
+        // 以下是 mobx-preact 中 componentWillUnmount 的回调逻辑，但是不知道出于什么考虑，mobx-preact 没有混入这一段逻辑
+        // @ts-ignore
+        if (this.render.$mobx) {
+            // @ts-ignore
+            this.render.$mobx.dispose();
+        }
     };
     BaseNode.prototype.componentDidMount = function () { };
     BaseNode.prototype.componentDidUpdate = function () { };

package/es/view/node/HtmlNode.js

@@ -113,6 +113,7 @@ var HtmlNode = /** @class */ (function (_super) {
         }
     };
     HtmlNode.prototype.componentWillUnmount = function () {
+        _super.prototype.componentWillUnmount.call(this);
         this.rootEl.innerHTML = '';
     };
     HtmlNode.prototype.getShape = function () {

package/es/view/overlay/CanvasOverlay.js

@@ -63,8 +63,9 @@ var CanvasOverlay = /** @class */ (function (_super) {
         _this.zoomHandler = function (ev) {
             var _a = _this.props, _b = _a.graphModel, editConfigModel = _b.editConfigModel, transformModel = _b.transformModel, gridSize = _b.gridSize, graphModel = _a.graphModel;
             var eX = ev.deltaX, eY = ev.deltaY;
+            var stopScrollGraph = editConfigModel.stopScrollGraph, stopZoomGraph = editConfigModel.stopZoomGraph;
             // 如果没有禁止滚动移动画布, 并且当前触发的时候ctrl键、cmd键没有按住, 那么移动画布
-            if (!editConfigModel.stopScrollGraph && !ev.ctrlKey && !ev.metaKey) {
+            if (!stopScrollGraph && !ev.ctrlKey && !ev.metaKey) {
                 ev.preventDefault();
                 _this.stepScrollX += eX;
                 _this.stepScrollY += eY;
@@ -83,7 +84,7 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 return;
             }
             // 如果没有禁止缩放画布，那么进行缩放. 在禁止缩放画布后，按住 ctrl、cmd 键也不能缩放了。
-            if (!editConfigModel.stopZoomGraph) {
+            if (!stopZoomGraph) {
                 ev.preventDefault();
                 var position = graphModel.getPointByClient({
                     x: ev.clientX,
@@ -124,10 +125,11 @@ var CanvasOverlay = /** @class */ (function (_super) {
         // 鼠标、触摸板 按下
         _this.mouseDownHandler = function (ev) {
             var _a = _this.props.graphModel, eventCenter = _a.eventCenter, editConfigModel = _a.editConfigModel, SCALE_X = _a.transformModel.SCALE_X, gridSize = _a.gridSize;
+            var adjustEdge = editConfigModel.adjustEdge, adjustNodePosition = editConfigModel.adjustNodePosition, stopMoveGraph = editConfigModel.stopMoveGraph;
             var target = ev.target;
-            var isFrozenElement = !editConfigModel.adjustEdge && !editConfigModel.adjustNodePosition;
+            var isFrozenElement = !adjustEdge && !adjustNodePosition;
             if (target.getAttribute('name') === 'canvas-overlay' || isFrozenElement) {
-                if (editConfigModel.stopMoveGraph !== true) {
+                if (stopMoveGraph !== true) {
                     _this.stepDrag.setStep(gridSize * SCALE_X);
                     _this.stepDrag.handleMouseDown(ev);
                 }

package/es/view/overlay/getTransformHoc.d.ts

@@ -25,7 +25,7 @@ export declare function getTransform<P>(WrappedComponent: ComponentType<P>): {
         props: import("preact").RenderableProps<IProps & P, any>;
         context: any;
         base?: Element | Text | undefined;
-        setState<K extends never>(state: ((prevState: Readonly<{}>, props: Readonly<IProps & P>) => Pick<{}, K> | Partial<{}> | null) | Pick<{}, K> | Partial<{}> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: Partial<{}> | ((prevState: Readonly<{}>, props: Readonly<IProps & P>) => Partial<{}> | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
     };
     displayName?: string | undefined;

package/es/view/text/BaseText.js

@@ -54,6 +54,7 @@ var BaseText = /** @class */ (function (_super) {
             var _a = _this.props, draggable = _a.draggable, model = _a.model, graphModel = _a.graphModel;
             var nodeTextDraggable = graphModel.editConfigModel.nodeTextDraggable;
             if (draggable !== null && draggable !== void 0 ? draggable : nodeTextDraggable) {
+                e.stopPropagation();
                 _this.stepperDrag.model = model;
                 _this.stepperDrag.handleMouseDown(e);
             }

package/lib/LogicFlow.d.ts

@@ -568,6 +568,8 @@ export declare class LogicFlow {
      * 加载插件-内部方法
      */
     private installPlugin;
+    /** 销毁当前实例 */
+    destroy(): void;
 }
 export declare namespace LogicFlow {
     /**
@@ -638,6 +640,7 @@ export declare namespace LogicFlow {
     };
     type LabelConfig = {
         id?: string;
+        type?: string;
         x: number;
         y: number;
         content?: string;

package/lib/LogicFlow.js

@@ -806,12 +806,18 @@ var LogicFlow = /** @class */ (function () {
      */
     LogicFlow.prototype.updateEditConfig = function (config) {
         var _a = this.graphModel, editConfigModel = _a.editConfigModel, transformModel = _a.transformModel;
+        var currentSnapGrid = editConfigModel.snapGrid;
         editConfigModel.updateEditConfig(config);
         if ((config === null || config === void 0 ? void 0 : config.stopMoveGraph) !== undefined) {
             transformModel.updateTranslateLimits(config.stopMoveGraph);
         }
         // 静默模式切换时，修改快捷键的启用状态
         (config === null || config === void 0 ? void 0 : config.isSilentMode) ? this.keyboard.disable() : this.keyboard.enable(true);
+        // 切换网格对齐状态时，修改网格尺寸
+        if (!(0, lodash_es_1.isNil)(config === null || config === void 0 ? void 0 : config.snapGrid) && config.snapGrid !== currentSnapGrid) {
+            var _b = this.graphModel.grid.size, size = _b === void 0 ? 1 : _b;
+            this.graphModel.updateGridSize(config.snapGrid ? size : 1);
+        }
     };
     /**
      * 获取流程图当前编辑相关设置
@@ -936,6 +942,8 @@ var LogicFlow = /** @class */ (function () {
      */
     LogicFlow.prototype.clearData = function () {
         this.graphModel.clearData();
+        // 强制刷新数据, 让 preact 清除对已删除节点的引用
+        this.render({});
     };
     /*********************************************************
      * LogicFlow Render方法
@@ -1195,6 +1203,15 @@ var LogicFlow = /** @class */ (function () {
             this.components.push(extensionIns.render.bind(extensionIns));
         this.extension[pluginName] = extensionIns;
     };
+    /** 销毁当前实例 */
+    LogicFlow.prototype.destroy = function () {
+        this.clearData();
+        (0, compat_1.render)(null, this.container);
+        this.keyboard.destroy();
+        this.graphModel.destroy();
+        this.tool.destroy();
+        this.history.destroy();
+    };
     // 全局配置的插件，所有的LogicFlow示例都会使用
     LogicFlow.extensions = new Map();
     return LogicFlow;

package/lib/event/eventArgs.d.ts

@@ -349,6 +349,16 @@ interface CommonEventArgs {
          */
         data: GraphData;
     };
+    /**
+     * 画布容器大小发生变化触发，为了性能考虑对事件做了防抖处理，间隔为16ms
+     */
+    'graph:resize': {
+        /**
+         * 更新后的画布数据
+         */
+        target: HTMLElement;
+        contentRect: DOMRectReadOnly;
+    };
 }
 type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> = Pick<{
     /**

package/lib/event/eventEmitter.d.ts

@@ -44,5 +44,6 @@ export default class EventEmitter {
     off<T extends keyof EventArgs>(evts: T, callback?: (args: EventArgs[T]) => void): void;
     off<T extends string>(evts: T, callback?: EventCallback<T>): void;
     getEvents(): EventsType<string>;
+    destroy(): void;
 }
 export { EventEmitter, EventArgs };

package/lib/event/eventEmitter.js

@@ -87,6 +87,9 @@ var EventEmitter = /** @class */ (function () {
     EventEmitter.prototype.getEvents = function () {
         return this._events;
     };
+    EventEmitter.prototype.destroy = function () {
+        this._events = {};
+    };
     return EventEmitter;
 }());
 exports.EventEmitter = EventEmitter;

package/lib/history/index.d.ts

@@ -19,5 +19,6 @@ export declare class History {
     redoAble(): boolean;
     redo(): LogicFlow.GraphData | undefined;
     watch(model: GraphModel): void;
+    destroy(): void;
 }
 export default History;

package/lib/history/index.js

@@ -107,6 +107,12 @@ var History = /** @class */ (function () {
             }
         }, this.waitTime));
     };
+    History.prototype.destroy = function () {
+        this.undos = [];
+        this.redos = [];
+        this.curData = null;
+        this.stopWatch && this.stopWatch();
+    };
     return History;
 }());
 exports.History = History;

package/lib/keyboard/index.d.ts

@@ -26,6 +26,7 @@ export declare class Keyboard {
     off(keys: string | string[], action?: Action): void;
     enable(force: boolean): void;
     disable(): void;
+    destroy(): void;
     private getKeys;
     protected formatKey(key: string): string;
 }

package/lib/keyboard/index.js

@@ -88,6 +88,9 @@ var Keyboard = /** @class */ (function () {
             }
         }
     };
+    Keyboard.prototype.destroy = function () {
+        this.mousetrap.reset();
+    };
     Keyboard.prototype.getKeys = function (keys) {
         var _this = this;
         return (Array.isArray(keys) ? keys : [keys]).map(function (key) {

package/lib/model/EditConfigModel.d.ts

@@ -113,6 +113,7 @@ export interface IEditConfigType {
     textMode: TextMode;
     nodeTextMode: TextMode;
     edgeTextMode: TextMode;
+    snapGrid: boolean;
 }
 export type IConfigKeys = keyof IEditConfigType;
 /**
@@ -127,6 +128,7 @@ export declare class EditConfigModel {
     stopZoomGraph: boolean;
     stopMoveGraph: boolean;
     stopScrollGraph: boolean;
+    snapGrid: boolean;
     /*********************************************************
      * 文本相关配置（全局）
      ********************************************************/
@@ -168,7 +170,7 @@ export declare class EditConfigModel {
     multipleSelectKey: string;
     constructor(config: Partial<IEditConfigType>);
     updateEditConfig(config: Partial<IEditConfigType>): void;
-    computeConfig(config: Partial<IEditConfigType>): Partial<IEditConfigType> & Pick<Partial<IEditConfigType>, "textMode" | "adjustEdgeStartAndEnd" | "isSilentMode" | "stopZoomGraph" | "stopScrollGraph" | "stopMoveGraph" | "adjustEdge" | "adjustEdgeMiddle" | "adjustEdgeStart" | "adjustEdgeEnd" | "adjustNodePosition" | "hideAnchors" | "allowRotate" | "allowResize" | "autoExpand" | "hoverOutline" | "nodeSelectedOutline" | "edgeSelectedOutline" | "textEdit" | "nodeTextEdit" | "edgeTextEdit" | "textDraggable" | "nodeTextDraggable" | "edgeTextDraggable" | "multipleSelectKey" | "nodeTextMode" | "edgeTextMode" | "nodeTextMultiple" | "edgeTextMultiple" | "nodeTextVertical" | "edgeTextVertical">;
+    computeConfig(config: Partial<IEditConfigType>): Partial<IEditConfigType> & Pick<Partial<IEditConfigType>, "textMode" | "adjustEdgeStartAndEnd" | "edgeTextDraggable" | "edgeTextEdit" | "nodeTextDraggable" | "nodeTextEdit" | "isSilentMode" | "stopZoomGraph" | "stopScrollGraph" | "stopMoveGraph" | "snapGrid" | "adjustEdge" | "adjustEdgeMiddle" | "adjustEdgeStart" | "adjustEdgeEnd" | "adjustNodePosition" | "hideAnchors" | "allowRotate" | "allowResize" | "autoExpand" | "hoverOutline" | "nodeSelectedOutline" | "edgeSelectedOutline" | "textEdit" | "textDraggable" | "multipleSelectKey" | "nodeTextMode" | "edgeTextMode" | "nodeTextMultiple" | "edgeTextMultiple" | "nodeTextVertical" | "edgeTextVertical">;
     updateTextMode(textMode: TextMode): void;
     getConfig(): IEditConfigType;
 }

package/lib/model/EditConfigModel.js

@@ -36,6 +36,7 @@ var allKeys = [
     'stopZoomGraph', // 禁止缩放画布
     'stopScrollGraph', // 禁止鼠标滚动移动画布
     'stopMoveGraph', // 禁止拖动画布
+    'snapGrid', // 是否开启网格对齐
     'adjustEdge', // 允许调整边
     'adjustEdgeMiddle', // 允许调整边中点
     'adjustEdgeStartAndEnd', // 允许调整边起点和终点
@@ -77,6 +78,7 @@ var EditConfigModel = /** @class */ (function () {
         this.stopZoomGraph = false;
         this.stopMoveGraph = false;
         this.stopScrollGraph = false;
+        this.snapGrid = false;
         /*********************************************************
          * 文本相关配置（全局）
          ********************************************************/
@@ -191,6 +193,9 @@ var EditConfigModel = /** @class */ (function () {
     __decorate([
         mobx_1.observable
     ], EditConfigModel.prototype, "stopScrollGraph", void 0);
+    __decorate([
+        mobx_1.observable
+    ], EditConfigModel.prototype, "snapGrid", void 0);
     __decorate([
         mobx_1.observable
     ], EditConfigModel.prototype, "textMode", void 0);

package/lib/model/GraphModel.d.ts

@@ -46,6 +46,14 @@ export declare class GraphModel {
      * 获取自定义连线轨迹
      */
     customTrajectory: LFOptions.Definition['customTrajectory'];
+    /**
+     * 判断是否使用的是容器的宽度
+     */
+    isContainerWidth: boolean;
+    /**
+     * 判断是否使用的是容器的高度
+     */
+    isContainerHeight: boolean;
     edgeType: string;
     nodes: BaseNodeModel[];
     edges: BaseEdgeModel[];
@@ -62,6 +70,7 @@ export declare class GraphModel {
     editConfigModel: EditConfigModel;
     partial: boolean;
     [propName: string]: any;
+    private waitCleanEffects;
     constructor(options: LFOptions.Common);
     get nodesMap(): GraphModel.NodesMapType;
     get edgesMap(): GraphModel.EdgesMapType;
@@ -70,15 +79,15 @@ export declare class GraphModel {
      * 基于zIndex对元素进行排序。
      * todo: 性能优化
      */
-    get sortElements(): (BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType>)[];
+    get sortElements(): (BaseNodeModel<LogicFlow.PropertiesType> | BaseEdgeModel<LogicFlow.PropertiesType>)[];
     /**
      * 当前编辑的元素，低频操作，先循环找。
      */
-    get textEditElement(): BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType> | undefined;
+    get textEditElement(): BaseNodeModel<LogicFlow.PropertiesType> | BaseEdgeModel<LogicFlow.PropertiesType> | undefined;
     /**
      * 当前画布所有被选中的元素
      */
-    get selectElements(): Map<string, BaseEdgeModel<LogicFlow.PropertiesType> | BaseNodeModel<LogicFlow.PropertiesType>>;
+    get selectElements(): Map<string, BaseNodeModel<LogicFlow.PropertiesType> | BaseEdgeModel<LogicFlow.PropertiesType>>;
     get selectNodes(): BaseNodeModel<LogicFlow.PropertiesType>[];
     /**
      * 获取指定区域内的所有元素
@@ -390,7 +399,11 @@ export declare class GraphModel {
      */
     updateGridOptions(options: Partial<Grid.GridOptions>): void;
     /**
-     * 更新网格配置
+     * 更新网格尺寸
+     */
+    updateGridSize(size: number): void;
+    /**
+     * 更新背景配置
      */
     updateBackgroundOptions(options: boolean | Partial<LFOptions.BackgroundConfig>): void;
     /**
@@ -437,6 +450,8 @@ export declare class GraphModel {
      * @returns
      */
     setPartial(partial: boolean): void;
+    /** 销毁当前实例 */
+    destroy(): void;
 }
 export declare namespace GraphModel {
     type NodesMapType = Record<string, {