@logicflow/core 2.0.8 → 2.0.9

package/es/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/es/LogicFlow.js

@@ -1166,6 +1166,10 @@ var LogicFlow = /** @class */ (function () {
             this.components.push(extensionIns.render.bind(extensionIns));
         this.extension[pluginName] = extensionIns;
     };
+    /** 销毁当前实例 */
+    LogicFlow.prototype.destroy = function () {
+        this.graphModel.destroy();
+    };
     // 全局配置的插件，所有的LogicFlow示例都会使用
     LogicFlow.extensions = new Map();
     return LogicFlow;

package/es/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/es/model/GraphModel.d.ts

@@ -62,6 +62,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 +71,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>[];
     /**
      * 获取指定区域内的所有元素
@@ -437,6 +438,8 @@ export declare class GraphModel {
      * @returns
      */
     setPartial(partial: boolean): void;
+    /** 销毁当前实例 */
+    destroy(): void;
 }
 export declare namespace GraphModel {
     type NodesMapType = Record<string, {

package/es/model/GraphModel.js

@@ -15,6 +15,17 @@ 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 __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -40,7 +51,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { find, forEach, map, merge, isBoolean, isEqual } from 'lodash-es';
+import { find, forEach, map, merge, isBoolean, debounce, isEqual } from 'lodash-es';
 import { action, computed, observable } from 'mobx';
 import { EditConfigModel, TransformModel, } from '.';
 import { DEFAULT_VISIBLE_SPACE, ELEMENT_MAX_Z_INDEX, ElementState, ElementType, EventType, ModelType, OverlapMode, TextMode, } from '../constant';
@@ -49,6 +60,7 @@ import EventEmitter from '../event/eventEmitter';
 import { Grid } from '../view/overlay';
 var GraphModel = /** @class */ (function () {
     function GraphModel(options) {
+        var _this = this;
         // 维护所有节点和边类型对应的 model
         this.modelMap = new Map();
         // Remind：用于记录当前画布上所有节点和边的 model 的 Map
@@ -81,6 +93,7 @@ var GraphModel = /** @class */ (function () {
         this.gridSize = 1;
         // 控制是否开启局部渲染
         this.partial = false;
+        this.waitCleanEffects = [];
         var container = options.container, partial = options.partial, _a = options.background, background = _a === void 0 ? {} : _a, grid = options.grid, idGenerator = options.idGenerator, edgeGenerator = options.edgeGenerator, animation = options.animation, customTrajectory = options.customTrajectory;
         this.rootEl = container;
         this.partial = !!partial;
@@ -95,6 +108,32 @@ var GraphModel = /** @class */ (function () {
         this.overlapMode = options.overlapMode || OverlapMode.DEFAULT;
         this.width = options.width || this.rootEl.getBoundingClientRect().width;
         this.height = options.height || this.rootEl.getBoundingClientRect().height;
+        var resizeObserver = new ResizeObserver(debounce((function (entries) {
+            var e_1, _a;
+            try {
+                for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
+                    var entry = entries_1_1.value;
+                    if (entry.target === _this.rootEl) {
+                        _this.resize();
+                        _this.eventCenter.emit('graph:resize', {
+                            target: _this.rootEl,
+                            contentRect: entry.contentRect,
+                        });
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        }), 16));
+        resizeObserver.observe(this.rootEl);
+        this.waitCleanEffects.push(function () {
+            resizeObserver.disconnect();
+        });
         this.eventCenter = new EventEmitter();
         this.editConfigModel = new EditConfigModel(options);
         this.transformModel = new TransformModel(this.eventCenter, options);
@@ -1407,6 +1446,18 @@ var GraphModel = /** @class */ (function () {
     GraphModel.prototype.setPartial = function (partial) {
         this.partial = partial;
     };
+    /** 销毁当前实例 */
+    GraphModel.prototype.destroy = function () {
+        try {
+            this.waitCleanEffects.forEach(function (fn) {
+                fn();
+            });
+        }
+        catch (err) {
+            console.warn('error on destroy GraphModel', err);
+        }
+        this.waitCleanEffects.length = 0;
+    };
     __decorate([
         observable
     ], GraphModel.prototype, "width", void 0);

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

@@ -172,8 +172,8 @@ export declare class BaseNodeModel<P extends PropertiesType = PropertiesType> im
         color?: string | undefined;
         fontSize: number;
         lineHeight?: number | undefined;
-        textAnchor?: "start" | "end" | "middle" | undefined;
-        dominantBaseline?: "middle" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "central" | "mathematical" | "hanging" | "text-top" | undefined;
+        textAnchor?: "middle" | "start" | "end" | undefined;
+        dominantBaseline?: "middle" | "central" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "mathematical" | "hanging" | "text-top" | undefined;
     };
     /**
      * @overridable 支持重写

package/es/model/node/TextNodeModel.d.ts

@@ -24,8 +24,8 @@ export declare class TextNodeModel<P extends ITextNodeProperties = ITextNodeProp
         fontSize: number;
         textWidth?: number | undefined;
         lineHeight?: number | undefined;
-        textAnchor?: "start" | "end" | "middle" | undefined;
-        dominantBaseline?: "middle" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "central" | "mathematical" | "hanging" | "text-top" | undefined;
+        textAnchor?: "middle" | "start" | "end" | undefined;
+        dominantBaseline?: "middle" | "central" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "mathematical" | "hanging" | "text-top" | undefined;
         overflowMode?: "default" | "autoWrap" | "ellipsis" | undefined;
         wrapPadding?: string | undefined;
     };

package/es/view/node/BaseNode.js

@@ -218,7 +218,7 @@ var BaseNode = /** @class */ (function (_super) {
             // 不是双击的，默认都是单击
             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);
                     }

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/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

@@ -1195,6 +1195,10 @@ var LogicFlow = /** @class */ (function () {
             this.components.push(extensionIns.render.bind(extensionIns));
         this.extension[pluginName] = extensionIns;
     };
+    /** 销毁当前实例 */
+    LogicFlow.prototype.destroy = function () {
+        this.graphModel.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/model/GraphModel.d.ts

@@ -62,6 +62,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 +71,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>[];
     /**
      * 获取指定区域内的所有元素
@@ -437,6 +438,8 @@ export declare class GraphModel {
      * @returns
      */
     setPartial(partial: boolean): void;
+    /** 销毁当前实例 */
+    destroy(): void;
 }
 export declare namespace GraphModel {
     type NodesMapType = Record<string, {

package/lib/model/GraphModel.js

@@ -16,6 +16,17 @@ 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 __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -55,6 +66,7 @@ var eventEmitter_1 = __importDefault(require("../event/eventEmitter"));
 var overlay_1 = require("../view/overlay");
 var GraphModel = /** @class */ (function () {
     function GraphModel(options) {
+        var _this = this;
         // 维护所有节点和边类型对应的 model
         this.modelMap = new Map();
         // Remind：用于记录当前画布上所有节点和边的 model 的 Map
@@ -87,6 +99,7 @@ var GraphModel = /** @class */ (function () {
         this.gridSize = 1;
         // 控制是否开启局部渲染
         this.partial = false;
+        this.waitCleanEffects = [];
         var container = options.container, partial = options.partial, _a = options.background, background = _a === void 0 ? {} : _a, grid = options.grid, idGenerator = options.idGenerator, edgeGenerator = options.edgeGenerator, animation = options.animation, customTrajectory = options.customTrajectory;
         this.rootEl = container;
         this.partial = !!partial;
@@ -101,6 +114,32 @@ var GraphModel = /** @class */ (function () {
         this.overlapMode = options.overlapMode || constant_1.OverlapMode.DEFAULT;
         this.width = options.width || this.rootEl.getBoundingClientRect().width;
         this.height = options.height || this.rootEl.getBoundingClientRect().height;
+        var resizeObserver = new ResizeObserver((0, lodash_es_1.debounce)((function (entries) {
+            var e_1, _a;
+            try {
+                for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
+                    var entry = entries_1_1.value;
+                    if (entry.target === _this.rootEl) {
+                        _this.resize();
+                        _this.eventCenter.emit('graph:resize', {
+                            target: _this.rootEl,
+                            contentRect: entry.contentRect,
+                        });
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        }), 16));
+        resizeObserver.observe(this.rootEl);
+        this.waitCleanEffects.push(function () {
+            resizeObserver.disconnect();
+        });
         this.eventCenter = new eventEmitter_1.default();
         this.editConfigModel = new _1.EditConfigModel(options);
         this.transformModel = new _1.TransformModel(this.eventCenter, options);
@@ -1413,6 +1452,18 @@ var GraphModel = /** @class */ (function () {
     GraphModel.prototype.setPartial = function (partial) {
         this.partial = partial;
     };
+    /** 销毁当前实例 */
+    GraphModel.prototype.destroy = function () {
+        try {
+            this.waitCleanEffects.forEach(function (fn) {
+                fn();
+            });
+        }
+        catch (err) {
+            console.warn('error on destroy GraphModel', err);
+        }
+        this.waitCleanEffects.length = 0;
+    };
     __decorate([
         mobx_1.observable
     ], GraphModel.prototype, "width", void 0);

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

@@ -172,8 +172,8 @@ export declare class BaseNodeModel<P extends PropertiesType = PropertiesType> im
         color?: string | undefined;
         fontSize: number;
         lineHeight?: number | undefined;
-        textAnchor?: "start" | "end" | "middle" | undefined;
-        dominantBaseline?: "middle" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "central" | "mathematical" | "hanging" | "text-top" | undefined;
+        textAnchor?: "middle" | "start" | "end" | undefined;
+        dominantBaseline?: "middle" | "central" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "mathematical" | "hanging" | "text-top" | undefined;
     };
     /**
      * @overridable 支持重写

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

@@ -24,8 +24,8 @@ export declare class TextNodeModel<P extends ITextNodeProperties = ITextNodeProp
         fontSize: number;
         textWidth?: number | undefined;
         lineHeight?: number | undefined;
-        textAnchor?: "start" | "end" | "middle" | undefined;
-        dominantBaseline?: "middle" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "central" | "mathematical" | "hanging" | "text-top" | undefined;
+        textAnchor?: "middle" | "start" | "end" | undefined;
+        dominantBaseline?: "middle" | "central" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "mathematical" | "hanging" | "text-top" | undefined;
         overflowMode?: "default" | "autoWrap" | "ellipsis" | undefined;
         wrapPadding?: string | undefined;
     };

package/lib/view/node/BaseNode.js

@@ -222,7 +222,7 @@ var BaseNode = /** @class */ (function (_super) {
             // 不是双击的，默认都是单击
             if (isDoubleClick) {
                 if (editConfigModel.nodeTextEdit) {
-                    if (model.text.editable) {
+                    if (model.text.editable && editConfigModel.textMode === constant_1.TextMode.TEXT) {
                         model.setSelected(false);
                         graphModel.setElementStateById(model.id, constant_1.ElementState.TEXT_EDIT);
                     }

package/lib/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/package.json

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