@logicflow/extension 2.1.5 → 2.1.7

package/es/components/mini-map/index.js

@@ -9,7 +9,6 @@ var __values = (this && this.__values) || function(o) {
     };
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
-import { createTeleportContainer, destroyTeleportContainer, } from '@logicflow/vue-node-registry';
 var MiniMap = /** @class */ (function () {
     function MiniMap(_a) {
         var lf = _a.lf, LogicFlow = _a.LogicFlow, options = _a.options;
@@ -107,8 +106,6 @@ var MiniMap = /** @class */ (function () {
          */
         this.hide = function () {
             if (_this.isShow) {
-                // 隐藏小地图时摧毁实例
-                destroyTeleportContainer(_this.lfMap.graphModel.flowId);
                 _this.lf.off('graph:resize', _this.onGraphResize);
                 _this.lfMap.destroy();
                 // 保证重新创建实例时，小地图中内容偏移正确
@@ -279,12 +276,11 @@ var MiniMap = /** @class */ (function () {
             history: false,
             snapline: false,
             disabledPlugins: this.disabledPlugins,
+            isMiniMap: true,
         });
         // minimap中禁用adapter。
         // this.lfMap.adapterIn = (a) => a
         // this.lfMap.adapterOut = (a) => a
-        // 创建teleport容器（vue3中生效）
-        createTeleportContainer(miniMapWrap, this.lfMap.graphModel.flowId);
         this.miniMapWrap = miniMapWrap;
         this.createViewPort();
         miniMapWrap.addEventListener('click', this.mapClick);
@@ -526,7 +522,6 @@ var MiniMap = /** @class */ (function () {
         this.viewport = div;
     };
     MiniMap.prototype.destroy = function () {
-        destroyTeleportContainer(this.lfMap.graphModel.flowId);
         this.lf.off('graph:resize', this.onGraphResize);
     };
     MiniMap.pluginName = 'miniMap';

package/es/components/selection-select/index.d.ts

@@ -12,6 +12,7 @@ export declare class SelectionSelect {
     private disabled;
     private isWholeNode;
     private isWholeEdge;
+    private originStatusSaved;
     exclusiveMode: boolean;
     private mouseDownInfo;
     private originalStopMoveGraph;

package/es/components/selection-select/index.js

@@ -32,6 +32,7 @@ var SelectionSelect = /** @class */ (function () {
         this.disabled = true;
         this.isWholeNode = true;
         this.isWholeEdge = true;
+        this.originStatusSaved = false;
         this.exclusiveMode = false; // 框选独占模式：true 表示只能进行框选操作，false 表示可以同时进行其他画布操作
         // 用于区分选区和点击事件
         this.mouseDownInfo = null;
@@ -73,6 +74,11 @@ var SelectionSelect = /** @class */ (function () {
             }
         };
         this.drawOff = function (e) {
+            // 恢复原始的 stopMoveGraph 设置
+            _this.lf.updateEditConfig({
+                stopMoveGraph: _this.originalStopMoveGraph,
+            });
+            _this.originStatusSaved = false;
             // 处理鼠标抬起事件
             // 首先判断是否是点击，如果是，则清空框选
             if (_this.mouseDownInfo) {
@@ -92,10 +98,6 @@ var SelectionSelect = /** @class */ (function () {
             if (!_this.exclusiveMode) {
                 document.removeEventListener('mouseup', _this.drawOff);
             }
-            // 恢复原始的 stopMoveGraph 设置
-            _this.lf.updateEditConfig({
-                stopMoveGraph: _this.originalStopMoveGraph,
-            });
             if (curStartPoint && curEndPoint) {
                 var x = curStartPoint.x, y = curStartPoint.y;
                 var x1 = curEndPoint.x, y1 = curEndPoint.y;
@@ -270,7 +272,11 @@ var SelectionSelect = /** @class */ (function () {
             time: Date.now(),
         };
         // 记录原始设置并临时禁止画布移动
-        this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
+        if (!this.originStatusSaved) {
+            // 为了防止在开启框选时用户多次点击画布导致缓存的stopMoveGraph变化，所以只在第一次点击时记录原始的stopMoveGraph issue #2263
+            this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
+            this.originStatusSaved = true;
+        }
         this.lf.updateEditConfig({
             stopMoveGraph: true,
         });

package/es/tools/label/LabelOverlay.js

@@ -49,7 +49,7 @@ import { Component, observer } from '@logicflow/core';
 import { forEach, merge } from 'lodash-es';
 import Label from './Label';
 import LabelModel from './LabelModel';
-import { MediumEditor, defaultOptions, ColorPickerButton } from './mediumEditor';
+import { MediumEditor, defaultOptions, createColorPickerButtonClass, } from './mediumEditor';
 // const { createUuid } = LogicFlowUtil
 // DONE: 解决问题，如果 LabelOverlay 设置为 Observer，拖拽 Label 时会导致 LabelOverlay 组件重新渲染，不知道为何
 // 目前解决了。流程是 拖动 -> 更新 label 的数据信息到 element model -> 重新渲染 LabelOverlay
@@ -74,7 +74,7 @@ var LabelOverlay = /** @class */ (function (_super) {
         this.editor = new MediumEditor('.lf-label-editor', merge(defaultOptions, {
             autoLink: true,
             extensions: {
-                colorPicker: new ColorPickerButton(),
+                colorPicker: new (createColorPickerButtonClass(MediumEditor))(),
             },
         }));
         // TODO: 2. 在此处监听一些事件，当 node、edge 数据变化时，主动触发重新渲染，保证同步更新
@@ -99,7 +99,7 @@ var LabelOverlay = /** @class */ (function (_super) {
             this.editor = new MediumEditor('.lf-label-editor', merge(defaultOptions, {
                 autoLink: true,
                 extensions: {
-                    colorPicker: new ColorPickerButton(),
+                    colorPicker: new (createColorPickerButtonClass(MediumEditor))(),
                 },
             }));
         }

package/es/tools/label/mediumEditor.d.ts

@@ -13,5 +13,5 @@ export declare const defaultOptions: {
     };
     disableEditing: boolean;
 };
-export declare const ColorPickerButton: any;
+export declare function createColorPickerButtonClass(MediumEditor?: any): any;
 export { MediumEditor };

package/es/tools/label/mediumEditor.js

@@ -36,56 +36,93 @@ export var defaultOptions = {
     },
     disableEditing: true,
 };
-export var ColorPickerButton = MediumEditor.extensions.button.extend({
-    name: 'colorpicker',
-    tagNames: ['mark'],
-    contentDefault: '<b>Color</b>',
-    aria: 'Color Picker',
-    action: 'colorPicker',
-    init: function () {
-        var _this = this;
-        rangy.init();
-        MediumEditor.extensions.button.prototype.init.call(this);
-        this.colorPicker = new Picker({
-            parent: this.button,
-            color: '#000',
-            onDone: function (res) {
-                if (_this.coloredText && _this.coloredText.isAppliedToSelection()) {
-                    _this.coloredText.undoToSelection();
-                }
-                _this.coloredText = rangy.createClassApplier('colored', {
-                    elementTagName: 'span',
-                    elementProperties: {
-                        style: {
-                            color: res.hex,
-                        },
-                    },
-                    normalize: true,
-                });
-                _this.coloredText.toggleSelection();
-                _this.base.checkContentChanged();
-                _this.setInactive();
-            },
-        });
-    },
-    getButton: function () {
-        return this.button;
-    },
-    handleClick: function () {
-        this.setActive();
-        this.colorPicker.show();
-    },
-    isAlreadyApplied: function (node) {
-        return node.nodeName.toLowerCase() === 'mark';
-    },
-    isActive: function () {
-        return this.button.classList.contains('medium-editor-button-active');
-    },
-    setInactive: function () {
-        this.button.classList.remove('medium-editor-button-active');
-    },
-    setActive: function () {
-        this.button.classList.add('medium-editor-button-active');
-    },
-});
+export function createColorPickerButtonClass(MediumEditor) {
+    var _a, _b;
+    var ButtonBase = ((_a = MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.extensions) === null || _a === void 0 ? void 0 : _a.button) || ((_b = MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.extensions) === null || _b === void 0 ? void 0 : _b.button);
+    var ExtensionBase = (MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.Extension) || (MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.Extension);
+    // 当 Button 扩展基类不可用时，回退到 Extension 基类，避免在模块加载阶段抛错
+    var Base = ButtonBase || ExtensionBase;
+    if (!Base) {
+        console.warn('MediumEditor button/extension base not available; using noop extension');
+        return /** @class */ (function () {
+            function class_1() {
+            }
+            return class_1;
+        }());
+    }
+    return Base.extend({
+        name: 'colorpicker',
+        tagNames: ['mark'],
+        contentDefault: '<b>Color</b>',
+        aria: 'Color Picker',
+        action: 'colorPicker',
+        init: function () {
+            var _this = this;
+            var _a, _b;
+            try {
+                rangy.init();
+            }
+            catch (_c) {
+                console.error('rangy.init failed');
+            }
+            // 初始化按钮（ButtonBase 才有 prototype.init）
+            try {
+                ;
+                (_b = (_a = ButtonBase === null || ButtonBase === void 0 ? void 0 : ButtonBase.prototype) === null || _a === void 0 ? void 0 : _a.init) === null || _b === void 0 ? void 0 : _b.call(this);
+            }
+            catch (_d) {
+                console.error('ButtonBase.init failed');
+            }
+            this.colorPicker = new Picker({
+                parent: this.button || undefined,
+                color: '#000',
+                onDone: function (res) {
+                    var _a, _b, _c, _d, _e;
+                    try {
+                        if (_this.coloredText && ((_b = (_a = _this.coloredText).isAppliedToSelection) === null || _b === void 0 ? void 0 : _b.call(_a))) {
+                            _this.coloredText.undoToSelection();
+                        }
+                        _this.coloredText = rangy.createClassApplier('colored', {
+                            elementTagName: 'span',
+                            elementProperties: { style: { color: res.hex } },
+                            normalize: true,
+                        });
+                        _this.coloredText.toggleSelection();
+                        (_d = (_c = _this.base) === null || _c === void 0 ? void 0 : _c.checkContentChanged) === null || _d === void 0 ? void 0 : _d.call(_c);
+                        (_e = _this.setInactive) === null || _e === void 0 ? void 0 : _e.call(_this);
+                    }
+                    catch (_f) {
+                        console.error('Picker.onDone failed');
+                    }
+                },
+            });
+        },
+        getButton: function () {
+            return this.button;
+        },
+        handleClick: function () {
+            var _a, _b, _c;
+            (_a = this.setActive) === null || _a === void 0 ? void 0 : _a.call(this);
+            (_c = (_b = this.colorPicker) === null || _b === void 0 ? void 0 : _b.show) === null || _c === void 0 ? void 0 : _c.call(_b);
+        },
+        isAlreadyApplied: function (node) {
+            var _a, _b;
+            return ((_b = (_a = node === null || node === void 0 ? void 0 : node.nodeName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === 'mark';
+        },
+        isActive: function () {
+            var _a, _b;
+            return (_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('medium-editor-button-active');
+        },
+        setInactive: function () {
+            var _a, _b;
+            ;
+            (_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('medium-editor-button-active');
+        },
+        setActive: function () {
+            var _a, _b;
+            ;
+            (_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('medium-editor-button-active');
+        },
+    });
+}
 export { MediumEditor };

package/lib/components/mini-map/index.js

@@ -12,7 +12,6 @@ var __values = (this && this.__values) || function(o) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MiniMap = void 0;
-var vue_node_registry_1 = require("@logicflow/vue-node-registry");
 var MiniMap = /** @class */ (function () {
     function MiniMap(_a) {
         var lf = _a.lf, LogicFlow = _a.LogicFlow, options = _a.options;
@@ -110,8 +109,6 @@ var MiniMap = /** @class */ (function () {
          */
         this.hide = function () {
             if (_this.isShow) {
-                // 隐藏小地图时摧毁实例
-                (0, vue_node_registry_1.destroyTeleportContainer)(_this.lfMap.graphModel.flowId);
                 _this.lf.off('graph:resize', _this.onGraphResize);
                 _this.lfMap.destroy();
                 // 保证重新创建实例时，小地图中内容偏移正确
@@ -282,12 +279,11 @@ var MiniMap = /** @class */ (function () {
             history: false,
             snapline: false,
             disabledPlugins: this.disabledPlugins,
+            isMiniMap: true,
         });
         // minimap中禁用adapter。
         // this.lfMap.adapterIn = (a) => a
         // this.lfMap.adapterOut = (a) => a
-        // 创建teleport容器（vue3中生效）
-        (0, vue_node_registry_1.createTeleportContainer)(miniMapWrap, this.lfMap.graphModel.flowId);
         this.miniMapWrap = miniMapWrap;
         this.createViewPort();
         miniMapWrap.addEventListener('click', this.mapClick);
@@ -529,7 +525,6 @@ var MiniMap = /** @class */ (function () {
         this.viewport = div;
     };
     MiniMap.prototype.destroy = function () {
-        (0, vue_node_registry_1.destroyTeleportContainer)(this.lfMap.graphModel.flowId);
         this.lf.off('graph:resize', this.onGraphResize);
     };
     MiniMap.pluginName = 'miniMap';

package/lib/components/selection-select/index.d.ts

@@ -12,6 +12,7 @@ export declare class SelectionSelect {
     private disabled;
     private isWholeNode;
     private isWholeEdge;
+    private originStatusSaved;
     exclusiveMode: boolean;
     private mouseDownInfo;
     private originalStopMoveGraph;

package/lib/components/selection-select/index.js

@@ -35,6 +35,7 @@ var SelectionSelect = /** @class */ (function () {
         this.disabled = true;
         this.isWholeNode = true;
         this.isWholeEdge = true;
+        this.originStatusSaved = false;
         this.exclusiveMode = false; // 框选独占模式：true 表示只能进行框选操作，false 表示可以同时进行其他画布操作
         // 用于区分选区和点击事件
         this.mouseDownInfo = null;
@@ -76,6 +77,11 @@ var SelectionSelect = /** @class */ (function () {
             }
         };
         this.drawOff = function (e) {
+            // 恢复原始的 stopMoveGraph 设置
+            _this.lf.updateEditConfig({
+                stopMoveGraph: _this.originalStopMoveGraph,
+            });
+            _this.originStatusSaved = false;
             // 处理鼠标抬起事件
             // 首先判断是否是点击，如果是，则清空框选
             if (_this.mouseDownInfo) {
@@ -95,10 +101,6 @@ var SelectionSelect = /** @class */ (function () {
             if (!_this.exclusiveMode) {
                 document.removeEventListener('mouseup', _this.drawOff);
             }
-            // 恢复原始的 stopMoveGraph 设置
-            _this.lf.updateEditConfig({
-                stopMoveGraph: _this.originalStopMoveGraph,
-            });
             if (curStartPoint && curEndPoint) {
                 var x = curStartPoint.x, y = curStartPoint.y;
                 var x1 = curEndPoint.x, y1 = curEndPoint.y;
@@ -273,7 +275,11 @@ var SelectionSelect = /** @class */ (function () {
             time: Date.now(),
         };
         // 记录原始设置并临时禁止画布移动
-        this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
+        if (!this.originStatusSaved) {
+            // 为了防止在开启框选时用户多次点击画布导致缓存的stopMoveGraph变化，所以只在第一次点击时记录原始的stopMoveGraph issue #2263
+            this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
+            this.originStatusSaved = true;
+        }
         this.lf.updateEditConfig({
             stopMoveGraph: true,
         });

package/lib/tools/label/LabelOverlay.js

@@ -80,7 +80,7 @@ var LabelOverlay = /** @class */ (function (_super) {
         this.editor = new mediumEditor_1.MediumEditor('.lf-label-editor', (0, lodash_es_1.merge)(mediumEditor_1.defaultOptions, {
             autoLink: true,
             extensions: {
-                colorPicker: new mediumEditor_1.ColorPickerButton(),
+                colorPicker: new ((0, mediumEditor_1.createColorPickerButtonClass)(mediumEditor_1.MediumEditor))(),
             },
         }));
         // TODO: 2. 在此处监听一些事件，当 node、edge 数据变化时，主动触发重新渲染，保证同步更新
@@ -105,7 +105,7 @@ var LabelOverlay = /** @class */ (function (_super) {
             this.editor = new mediumEditor_1.MediumEditor('.lf-label-editor', (0, lodash_es_1.merge)(mediumEditor_1.defaultOptions, {
                 autoLink: true,
                 extensions: {
-                    colorPicker: new mediumEditor_1.ColorPickerButton(),
+                    colorPicker: new ((0, mediumEditor_1.createColorPickerButtonClass)(mediumEditor_1.MediumEditor))(),
                 },
             }));
         }

package/lib/tools/label/mediumEditor.d.ts

@@ -13,5 +13,5 @@ export declare const defaultOptions: {
     };
     disableEditing: boolean;
 };
-export declare const ColorPickerButton: any;
+export declare function createColorPickerButtonClass(MediumEditor?: any): any;
 export { MediumEditor };

package/lib/tools/label/mediumEditor.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediumEditor = exports.ColorPickerButton = exports.defaultOptions = void 0;
+exports.MediumEditor = exports.createColorPickerButtonClass = exports.defaultOptions = void 0;
 var medium_editor_1 = __importDefault(require("medium-editor"));
 exports.MediumEditor = medium_editor_1.default;
 var vanilla_picker_1 = __importDefault(require("vanilla-picker"));
@@ -43,55 +43,93 @@ exports.defaultOptions = {
     },
     disableEditing: true,
 };
-exports.ColorPickerButton = medium_editor_1.default.extensions.button.extend({
-    name: 'colorpicker',
-    tagNames: ['mark'],
-    contentDefault: '<b>Color</b>',
-    aria: 'Color Picker',
-    action: 'colorPicker',
-    init: function () {
-        var _this = this;
-        rangy_1.default.init();
-        medium_editor_1.default.extensions.button.prototype.init.call(this);
-        this.colorPicker = new vanilla_picker_1.default({
-            parent: this.button,
-            color: '#000',
-            onDone: function (res) {
-                if (_this.coloredText && _this.coloredText.isAppliedToSelection()) {
-                    _this.coloredText.undoToSelection();
-                }
-                _this.coloredText = rangy_1.default.createClassApplier('colored', {
-                    elementTagName: 'span',
-                    elementProperties: {
-                        style: {
-                            color: res.hex,
-                        },
-                    },
-                    normalize: true,
-                });
-                _this.coloredText.toggleSelection();
-                _this.base.checkContentChanged();
-                _this.setInactive();
-            },
-        });
-    },
-    getButton: function () {
-        return this.button;
-    },
-    handleClick: function () {
-        this.setActive();
-        this.colorPicker.show();
-    },
-    isAlreadyApplied: function (node) {
-        return node.nodeName.toLowerCase() === 'mark';
-    },
-    isActive: function () {
-        return this.button.classList.contains('medium-editor-button-active');
-    },
-    setInactive: function () {
-        this.button.classList.remove('medium-editor-button-active');
-    },
-    setActive: function () {
-        this.button.classList.add('medium-editor-button-active');
-    },
-});
+function createColorPickerButtonClass(MediumEditor) {
+    var _a, _b;
+    var ButtonBase = ((_a = MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.extensions) === null || _a === void 0 ? void 0 : _a.button) || ((_b = MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.extensions) === null || _b === void 0 ? void 0 : _b.button);
+    var ExtensionBase = (MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.Extension) || (MediumEditor === null || MediumEditor === void 0 ? void 0 : MediumEditor.Extension);
+    // 当 Button 扩展基类不可用时，回退到 Extension 基类，避免在模块加载阶段抛错
+    var Base = ButtonBase || ExtensionBase;
+    if (!Base) {
+        console.warn('MediumEditor button/extension base not available; using noop extension');
+        return /** @class */ (function () {
+            function class_1() {
+            }
+            return class_1;
+        }());
+    }
+    return Base.extend({
+        name: 'colorpicker',
+        tagNames: ['mark'],
+        contentDefault: '<b>Color</b>',
+        aria: 'Color Picker',
+        action: 'colorPicker',
+        init: function () {
+            var _this = this;
+            var _a, _b;
+            try {
+                rangy_1.default.init();
+            }
+            catch (_c) {
+                console.error('rangy.init failed');
+            }
+            // 初始化按钮（ButtonBase 才有 prototype.init）
+            try {
+                ;
+                (_b = (_a = ButtonBase === null || ButtonBase === void 0 ? void 0 : ButtonBase.prototype) === null || _a === void 0 ? void 0 : _a.init) === null || _b === void 0 ? void 0 : _b.call(this);
+            }
+            catch (_d) {
+                console.error('ButtonBase.init failed');
+            }
+            this.colorPicker = new vanilla_picker_1.default({
+                parent: this.button || undefined,
+                color: '#000',
+                onDone: function (res) {
+                    var _a, _b, _c, _d, _e;
+                    try {
+                        if (_this.coloredText && ((_b = (_a = _this.coloredText).isAppliedToSelection) === null || _b === void 0 ? void 0 : _b.call(_a))) {
+                            _this.coloredText.undoToSelection();
+                        }
+                        _this.coloredText = rangy_1.default.createClassApplier('colored', {
+                            elementTagName: 'span',
+                            elementProperties: { style: { color: res.hex } },
+                            normalize: true,
+                        });
+                        _this.coloredText.toggleSelection();
+                        (_d = (_c = _this.base) === null || _c === void 0 ? void 0 : _c.checkContentChanged) === null || _d === void 0 ? void 0 : _d.call(_c);
+                        (_e = _this.setInactive) === null || _e === void 0 ? void 0 : _e.call(_this);
+                    }
+                    catch (_f) {
+                        console.error('Picker.onDone failed');
+                    }
+                },
+            });
+        },
+        getButton: function () {
+            return this.button;
+        },
+        handleClick: function () {
+            var _a, _b, _c;
+            (_a = this.setActive) === null || _a === void 0 ? void 0 : _a.call(this);
+            (_c = (_b = this.colorPicker) === null || _b === void 0 ? void 0 : _b.show) === null || _c === void 0 ? void 0 : _c.call(_b);
+        },
+        isAlreadyApplied: function (node) {
+            var _a, _b;
+            return ((_b = (_a = node === null || node === void 0 ? void 0 : node.nodeName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === 'mark';
+        },
+        isActive: function () {
+            var _a, _b;
+            return (_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains('medium-editor-button-active');
+        },
+        setInactive: function () {
+            var _a, _b;
+            ;
+            (_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.remove('medium-editor-button-active');
+        },
+        setActive: function () {
+            var _a, _b;
+            ;
+            (_b = (_a = this.button) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.add('medium-editor-button-active');
+        },
+    });
+}
+exports.createColorPickerButtonClass = createColorPickerButtonClass;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.1.5",
+  "version": "2.1.7",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,8 +20,8 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/vue-node-registry": "1.1.4",
-    "@logicflow/core": "2.1.3"
+    "@logicflow/core": "2.1.5",
+    "@logicflow/vue-node-registry": "1.1.6"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
@@ -32,8 +32,8 @@
     "preact": "^10.17.1",
     "rangy": "^1.3.1",
     "vanilla-picker": "^2.12.3",
-    "@logicflow/core": "2.1.3",
-    "@logicflow/vue-node-registry": "1.1.4"
+    "@logicflow/vue-node-registry": "1.1.6",
+    "@logicflow/core": "2.1.5"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/components/mini-map/index.ts

@@ -1,8 +1,4 @@
 import LogicFlow from '@logicflow/core'
-import {
-  createTeleportContainer,
-  destroyTeleportContainer,
-} from '@logicflow/vue-node-registry'
 
 import Position = LogicFlow.Position
 import MiniMapOption = MiniMap.MiniMapOption
@@ -240,8 +236,6 @@ export class MiniMap {
    */
   public hide = () => {
     if (this.isShow) {
-      // 隐藏小地图时摧毁实例
-      destroyTeleportContainer(this.lfMap.graphModel.flowId)
       this.lf.off('graph:resize', this.onGraphResize)
       this.lfMap.destroy()
       // 保证重新创建实例时，小地图中内容偏移正确
@@ -363,14 +357,12 @@ export class MiniMap {
       history: false,
       snapline: false,
       disabledPlugins: this.disabledPlugins,
+      isMiniMap: true,
     })
     // minimap中禁用adapter。
     // this.lfMap.adapterIn = (a) => a
     // this.lfMap.adapterOut = (a) => a
 
-    // 创建teleport容器（vue3中生效）
-    createTeleportContainer(miniMapWrap, this.lfMap.graphModel.flowId)
-
     this.miniMapWrap = miniMapWrap
     this.createViewPort()
     miniMapWrap.addEventListener('click', this.mapClick)
@@ -687,7 +679,6 @@ export class MiniMap {
   }
 
   destroy() {
-    destroyTeleportContainer(this.lfMap.graphModel.flowId)
     this.lf.off('graph:resize', this.onGraphResize)
   }
 }