@logicflow/extension 2.1.5 → 2.2.0-alpha.0

package/es/components/dnd-panel/index.js

@@ -17,6 +17,9 @@ var DndPanel = /** @class */ (function () {
         }
         this.panelEl = document.createElement('div');
         this.panelEl.className = 'lf-dndpanel';
+        this.panelEl.addEventListener('touchmove', function (e) {
+            e.preventDefault();
+        }, { passive: false });
         this.shapeList.forEach(function (shapeItem) {
             var _a;
             (_a = _this.panelEl) === null || _a === void 0 ? void 0 : _a.appendChild(_this.createDndItem(shapeItem));
@@ -63,14 +66,14 @@ var DndPanel = /** @class */ (function () {
         if (shapeItem.disabled) {
             el.classList.add('disabled');
             // 保留callback的执行，可用于界面提示当前shapeItem的禁用状态
-            el.onmousedown = function () {
+            el.onpointerdown = function () {
                 if (shapeItem.callback) {
                     shapeItem.callback(_this.lf, _this.domContainer);
                 }
             };
             return el;
         }
-        el.onmousedown = function () {
+        el.onpointerdown = function (e) {
             if (shapeItem.type) {
                 _this.lf.dnd.startDrag({
                     type: shapeItem.type,
@@ -81,6 +84,7 @@ var DndPanel = /** @class */ (function () {
             if (shapeItem.callback) {
                 shapeItem.callback(_this.lf, _this.domContainer);
             }
+            e.preventDefault();
         };
         el.ondblclick = function (e) {
             _this.lf.graphModel.eventCenter.emit('dnd:panel-dbclick', {

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();
                 // 保证重新创建实例时，小地图中内容偏移正确
@@ -182,8 +179,8 @@ var MiniMap = /** @class */ (function () {
             }
         };
         this.startDrag = function (e) {
-            document.addEventListener('mousemove', _this.drag);
-            document.addEventListener('mouseup', _this.drop);
+            document.addEventListener('pointermove', _this.drag);
+            document.addEventListener('pointerup', _this.drop);
             var x = e.x, y = e.y;
             _this.startPosition = { x: x, y: y };
         };
@@ -209,8 +206,8 @@ var MiniMap = /** @class */ (function () {
          * 拖拽预览视窗结束，移除拖拽事件
          */
         this.drop = function () {
-            document.removeEventListener('mousemove', _this.drag);
-            document.removeEventListener('mouseup', _this.drop);
+            document.removeEventListener('pointermove', _this.drag);
+            document.removeEventListener('pointerup', _this.drop);
         };
         /**
          * 点击小地图中非预览视窗的区域时，移动主画布视口聚焦于点击位置
@@ -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);
@@ -517,8 +513,8 @@ var MiniMap = /** @class */ (function () {
     MiniMap.prototype.createViewPort = function () {
         var div = document.createElement('div');
         div.className = 'lf-minimap-viewport';
-        // 拖拽预览视窗，主画布视口跟随移动
-        div.addEventListener('mousedown', this.startDrag);
+        div.style.touchAction = 'none';
+        div.addEventListener('pointerdown', this.startDrag);
         // 禁止预览视窗的点击事件冒泡
         div.addEventListener('click', function (e) {
             e.stopPropagation();
@@ -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;
@@ -45,6 +46,12 @@ var SelectionSelect = /** @class */ (function () {
             _this.handleMouseDown(e);
         };
         this.draw = function (ev) {
+            if (_this.lf.graphModel.editConfigModel.isPinching) {
+                _this.lf.updateEditConfig({ stopMoveGraph: _this.originalStopMoveGraph });
+                _this.originStatusSaved = false;
+                _this.cleanupSelectionState();
+                return;
+            }
             var _a = _this.lf.getPointByClient(ev.clientX, ev.clientY).domOverlayPosition, x1 = _a.x, y1 = _a.y;
             _this.endPoint = {
                 x: x1,
@@ -73,6 +80,11 @@ var SelectionSelect = /** @class */ (function () {
             }
         };
         this.drawOff = function (e) {
+            // 恢复原始的 stopMoveGraph 设置
+            _this.lf.updateEditConfig({
+                stopMoveGraph: _this.originalStopMoveGraph,
+            });
+            _this.originStatusSaved = false;
             // 处理鼠标抬起事件
             // 首先判断是否是点击，如果是，则清空框选
             if (_this.mouseDownInfo) {
@@ -88,14 +100,10 @@ var SelectionSelect = /** @class */ (function () {
             }
             var curStartPoint = cloneDeep(_this.startPoint);
             var curEndPoint = cloneDeep(_this.endPoint);
-            document.removeEventListener('mousemove', _this.draw);
+            document.removeEventListener('pointermove', _this.draw);
             if (!_this.exclusiveMode) {
-                document.removeEventListener('mouseup', _this.drawOff);
+                document.removeEventListener('pointerup', _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;
@@ -208,8 +216,8 @@ var SelectionSelect = /** @class */ (function () {
         this.endPoint = undefined;
         this.mouseDownInfo = null;
         // 移除事件监听
-        document.removeEventListener('mousemove', this.draw);
-        document.removeEventListener('mouseup', this.drawOff);
+        document.removeEventListener('pointermove', this.draw);
+        document.removeEventListener('pointerup', this.drawOff);
     };
     /**
      * 切换框选模式
@@ -233,7 +241,8 @@ var SelectionSelect = /** @class */ (function () {
         if (this.exclusiveMode) {
             // 独占模式：监听 container 的 mousedown 事件
             this.container.style.pointerEvents = 'auto';
-            this.container.addEventListener('mousedown', this.handleMouseDown);
+            this.container.style.touchAction = 'none';
+            this.container.addEventListener('pointerdown', this.handleMouseDown);
         }
         else {
             // 非独占模式：监听画布的 blank:mousedown 事件
@@ -245,7 +254,7 @@ var SelectionSelect = /** @class */ (function () {
     SelectionSelect.prototype.removeEventListeners = function () {
         if (this.container) {
             this.container.style.pointerEvents = 'none';
-            this.container.removeEventListener('mousedown', this.handleMouseDown);
+            this.container.removeEventListener('pointerdown', this.handleMouseDown);
         }
         // 移除 blank:mousedown 事件监听
         this.lf.off('blank:mousedown', this.handleBlankMouseDown);
@@ -257,6 +266,8 @@ var SelectionSelect = /** @class */ (function () {
         var _a;
         if (!this.container || this.disabled)
             return;
+        if (this.lf.graphModel.editConfigModel.isPinching)
+            return;
         // 禁用右键框选
         var isRightClick = e.button === 2;
         if (isRightClick)
@@ -270,7 +281,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,
         });
@@ -286,8 +301,8 @@ var SelectionSelect = /** @class */ (function () {
         wrapper.style.left = "".concat(this.startPoint.x, "px");
         (_a = this.container) === null || _a === void 0 ? void 0 : _a.appendChild(wrapper);
         this.wrapper = wrapper;
-        document.addEventListener('mousemove', this.draw);
-        document.addEventListener('mouseup', this.drawOff);
+        document.addEventListener('pointermove', this.draw);
+        document.addEventListener('pointerup', this.drawOff);
     };
     /**
      * 设置选中的灵敏度
@@ -325,7 +340,7 @@ var SelectionSelect = /** @class */ (function () {
         if (this.wrapper && this.startPoint && this.endPoint) {
             // 记录上一次的结束点，用于触发 mouseup 事件
             var lastEndPoint = cloneDeep(this.endPoint);
-            var lastEvent = new MouseEvent('mouseup', {
+            var lastEvent = new PointerEvent('pointerup', {
                 clientX: lastEndPoint.x,
                 clientY: lastEndPoint.y,
             });

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

@@ -17,8 +17,8 @@ export declare class Label extends Component<ILabelProps, ILabelState> {
     constructor(props: ILabelProps);
     setHoverOn: () => void;
     setHoverOff: () => void;
-    handleMouseDown: (e: MouseEvent) => void;
-    handleMouseUp: (e: MouseEvent) => void;
+    handleMouseDown: (e: PointerEvent) => void;
+    handleMouseUp: (e: PointerEvent) => void;
     handleDragging: ({ deltaX, deltaY }: IDragParams) => void;
     handleDragEnd: () => void;
     handleClick: (e: MouseEvent) => void;

package/es/tools/label/Label.js

@@ -274,7 +274,7 @@ var Label = /** @class */ (function (_super) {
                 ? "".concat(transform, " rotate(").concat(rotate, "deg)")
                 : "".concat(transform, " rotate(").concat(vertical ? -0.25 : 0, "turn)"),
         };
-        return (_jsx("div", { id: "element-container-".concat(id), className: classNames('lf-label-editor-container'), style: containerStyle, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onDblClick: this.handleDbClick, onBlur: this.handleBlur, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, children: _jsx("div", { ref: this.textRef, id: "editor-container-".concat(id), className: classNames('lf-label-editor', (_a = {
+        return (_jsx("div", { id: "element-container-".concat(id), className: classNames('lf-label-editor-container'), style: containerStyle, onPointerDown: this.handleMouseDown, onPointerUp: this.handleMouseUp, onClick: this.handleClick, onDblClick: this.handleDbClick, onBlur: this.handleBlur, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, children: _jsx("div", { ref: this.textRef, id: "editor-container-".concat(id), className: classNames('lf-label-editor', (_a = {
                         'lf-label-editor-dragging': isDragging,
                         'lf-label-editor-editing': isEditing,
                         'lf-label-editor-hover': !isEditing && (isHovered || isSelected)

package/lib/components/dnd-panel/index.js

@@ -20,6 +20,9 @@ var DndPanel = /** @class */ (function () {
         }
         this.panelEl = document.createElement('div');
         this.panelEl.className = 'lf-dndpanel';
+        this.panelEl.addEventListener('touchmove', function (e) {
+            e.preventDefault();
+        }, { passive: false });
         this.shapeList.forEach(function (shapeItem) {
             var _a;
             (_a = _this.panelEl) === null || _a === void 0 ? void 0 : _a.appendChild(_this.createDndItem(shapeItem));
@@ -66,14 +69,14 @@ var DndPanel = /** @class */ (function () {
         if (shapeItem.disabled) {
             el.classList.add('disabled');
             // 保留callback的执行，可用于界面提示当前shapeItem的禁用状态
-            el.onmousedown = function () {
+            el.onpointerdown = function () {
                 if (shapeItem.callback) {
                     shapeItem.callback(_this.lf, _this.domContainer);
                 }
             };
             return el;
         }
-        el.onmousedown = function () {
+        el.onpointerdown = function (e) {
             if (shapeItem.type) {
                 _this.lf.dnd.startDrag({
                     type: shapeItem.type,
@@ -84,6 +87,7 @@ var DndPanel = /** @class */ (function () {
             if (shapeItem.callback) {
                 shapeItem.callback(_this.lf, _this.domContainer);
             }
+            e.preventDefault();
         };
         el.ondblclick = function (e) {
             _this.lf.graphModel.eventCenter.emit('dnd:panel-dbclick', {

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();
                 // 保证重新创建实例时，小地图中内容偏移正确
@@ -185,8 +182,8 @@ var MiniMap = /** @class */ (function () {
             }
         };
         this.startDrag = function (e) {
-            document.addEventListener('mousemove', _this.drag);
-            document.addEventListener('mouseup', _this.drop);
+            document.addEventListener('pointermove', _this.drag);
+            document.addEventListener('pointerup', _this.drop);
             var x = e.x, y = e.y;
             _this.startPosition = { x: x, y: y };
         };
@@ -212,8 +209,8 @@ var MiniMap = /** @class */ (function () {
          * 拖拽预览视窗结束，移除拖拽事件
          */
         this.drop = function () {
-            document.removeEventListener('mousemove', _this.drag);
-            document.removeEventListener('mouseup', _this.drop);
+            document.removeEventListener('pointermove', _this.drag);
+            document.removeEventListener('pointerup', _this.drop);
         };
         /**
          * 点击小地图中非预览视窗的区域时，移动主画布视口聚焦于点击位置
@@ -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);
@@ -520,8 +516,8 @@ var MiniMap = /** @class */ (function () {
     MiniMap.prototype.createViewPort = function () {
         var div = document.createElement('div');
         div.className = 'lf-minimap-viewport';
-        // 拖拽预览视窗，主画布视口跟随移动
-        div.addEventListener('mousedown', this.startDrag);
+        div.style.touchAction = 'none';
+        div.addEventListener('pointerdown', this.startDrag);
         // 禁止预览视窗的点击事件冒泡
         div.addEventListener('click', function (e) {
             e.stopPropagation();
@@ -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;
@@ -48,6 +49,12 @@ var SelectionSelect = /** @class */ (function () {
             _this.handleMouseDown(e);
         };
         this.draw = function (ev) {
+            if (_this.lf.graphModel.editConfigModel.isPinching) {
+                _this.lf.updateEditConfig({ stopMoveGraph: _this.originalStopMoveGraph });
+                _this.originStatusSaved = false;
+                _this.cleanupSelectionState();
+                return;
+            }
             var _a = _this.lf.getPointByClient(ev.clientX, ev.clientY).domOverlayPosition, x1 = _a.x, y1 = _a.y;
             _this.endPoint = {
                 x: x1,
@@ -76,6 +83,11 @@ var SelectionSelect = /** @class */ (function () {
             }
         };
         this.drawOff = function (e) {
+            // 恢复原始的 stopMoveGraph 设置
+            _this.lf.updateEditConfig({
+                stopMoveGraph: _this.originalStopMoveGraph,
+            });
+            _this.originStatusSaved = false;
             // 处理鼠标抬起事件
             // 首先判断是否是点击，如果是，则清空框选
             if (_this.mouseDownInfo) {
@@ -91,14 +103,10 @@ var SelectionSelect = /** @class */ (function () {
             }
             var curStartPoint = (0, lodash_es_1.cloneDeep)(_this.startPoint);
             var curEndPoint = (0, lodash_es_1.cloneDeep)(_this.endPoint);
-            document.removeEventListener('mousemove', _this.draw);
+            document.removeEventListener('pointermove', _this.draw);
             if (!_this.exclusiveMode) {
-                document.removeEventListener('mouseup', _this.drawOff);
+                document.removeEventListener('pointerup', _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;
@@ -211,8 +219,8 @@ var SelectionSelect = /** @class */ (function () {
         this.endPoint = undefined;
         this.mouseDownInfo = null;
         // 移除事件监听
-        document.removeEventListener('mousemove', this.draw);
-        document.removeEventListener('mouseup', this.drawOff);
+        document.removeEventListener('pointermove', this.draw);
+        document.removeEventListener('pointerup', this.drawOff);
     };
     /**
      * 切换框选模式
@@ -236,7 +244,8 @@ var SelectionSelect = /** @class */ (function () {
         if (this.exclusiveMode) {
             // 独占模式：监听 container 的 mousedown 事件
             this.container.style.pointerEvents = 'auto';
-            this.container.addEventListener('mousedown', this.handleMouseDown);
+            this.container.style.touchAction = 'none';
+            this.container.addEventListener('pointerdown', this.handleMouseDown);
         }
         else {
             // 非独占模式：监听画布的 blank:mousedown 事件
@@ -248,7 +257,7 @@ var SelectionSelect = /** @class */ (function () {
     SelectionSelect.prototype.removeEventListeners = function () {
         if (this.container) {
             this.container.style.pointerEvents = 'none';
-            this.container.removeEventListener('mousedown', this.handleMouseDown);
+            this.container.removeEventListener('pointerdown', this.handleMouseDown);
         }
         // 移除 blank:mousedown 事件监听
         this.lf.off('blank:mousedown', this.handleBlankMouseDown);
@@ -260,6 +269,8 @@ var SelectionSelect = /** @class */ (function () {
         var _a;
         if (!this.container || this.disabled)
             return;
+        if (this.lf.graphModel.editConfigModel.isPinching)
+            return;
         // 禁用右键框选
         var isRightClick = e.button === 2;
         if (isRightClick)
@@ -273,7 +284,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,
         });
@@ -289,8 +304,8 @@ var SelectionSelect = /** @class */ (function () {
         wrapper.style.left = "".concat(this.startPoint.x, "px");
         (_a = this.container) === null || _a === void 0 ? void 0 : _a.appendChild(wrapper);
         this.wrapper = wrapper;
-        document.addEventListener('mousemove', this.draw);
-        document.addEventListener('mouseup', this.drawOff);
+        document.addEventListener('pointermove', this.draw);
+        document.addEventListener('pointerup', this.drawOff);
     };
     /**
      * 设置选中的灵敏度
@@ -328,7 +343,7 @@ var SelectionSelect = /** @class */ (function () {
         if (this.wrapper && this.startPoint && this.endPoint) {
             // 记录上一次的结束点，用于触发 mouseup 事件
             var lastEndPoint = (0, lodash_es_1.cloneDeep)(this.endPoint);
-            var lastEvent = new MouseEvent('mouseup', {
+            var lastEvent = new PointerEvent('pointerup', {
                 clientX: lastEndPoint.x,
                 clientY: lastEndPoint.y,
             });

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

@@ -17,8 +17,8 @@ export declare class Label extends Component<ILabelProps, ILabelState> {
     constructor(props: ILabelProps);
     setHoverOn: () => void;
     setHoverOff: () => void;
-    handleMouseDown: (e: MouseEvent) => void;
-    handleMouseUp: (e: MouseEvent) => void;
+    handleMouseDown: (e: PointerEvent) => void;
+    handleMouseUp: (e: PointerEvent) => void;
     handleDragging: ({ deltaX, deltaY }: IDragParams) => void;
     handleDragEnd: () => void;
     handleClick: (e: MouseEvent) => void;

package/lib/tools/label/Label.js

@@ -280,7 +280,7 @@ var Label = /** @class */ (function (_super) {
                 ? "".concat(transform, " rotate(").concat(rotate, "deg)")
                 : "".concat(transform, " rotate(").concat(vertical ? -0.25 : 0, "turn)"),
         };
-        return ((0, jsx_runtime_1.jsx)("div", { id: "element-container-".concat(id), className: (0, classnames_1.default)('lf-label-editor-container'), style: containerStyle, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onDblClick: this.handleDbClick, onBlur: this.handleBlur, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, children: (0, jsx_runtime_1.jsx)("div", { ref: this.textRef, id: "editor-container-".concat(id), className: (0, classnames_1.default)('lf-label-editor', (_a = {
+        return ((0, jsx_runtime_1.jsx)("div", { id: "element-container-".concat(id), className: (0, classnames_1.default)('lf-label-editor-container'), style: containerStyle, onPointerDown: this.handleMouseDown, onPointerUp: this.handleMouseUp, onClick: this.handleClick, onDblClick: this.handleDbClick, onBlur: this.handleBlur, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, children: (0, jsx_runtime_1.jsx)("div", { ref: this.textRef, id: "editor-container-".concat(id), className: (0, classnames_1.default)('lf-label-editor', (_a = {
                         'lf-label-editor-dragging': isDragging,
                         'lf-label-editor-editing': isEditing,
                         'lf-label-editor-hover': !isEditing && (isHovered || isSelected)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.1.5",
+  "version": "2.2.0-alpha.0",
   "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.2.0-alpha.0",
+    "@logicflow/vue-node-registry": "1.2.0-alpha.0"
   },
   "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/core": "2.2.0-alpha.0",
+    "@logicflow/vue-node-registry": "1.2.0-alpha.0"
   },
   "devDependencies": {
     "less": "^4.1.1",

package/src/components/dnd-panel/index.ts

@@ -36,6 +36,13 @@ export class DndPanel {
     }
     this.panelEl = document.createElement('div')
     this.panelEl.className = 'lf-dndpanel'
+    this.panelEl.addEventListener(
+      'touchmove',
+      (e) => {
+        e.preventDefault()
+      },
+      { passive: false },
+    )
     this.shapeList.forEach((shapeItem) => {
       this.panelEl?.appendChild(this.createDndItem(shapeItem))
     })
@@ -85,14 +92,14 @@ export class DndPanel {
     if (shapeItem.disabled) {
       el.classList.add('disabled')
       // 保留callback的执行，可用于界面提示当前shapeItem的禁用状态
-      el.onmousedown = () => {
+      el.onpointerdown = () => {
         if (shapeItem.callback) {
           shapeItem.callback(this.lf, this.domContainer)
         }
       }
       return el
     }
-    el.onmousedown = () => {
+    el.onpointerdown = (e: PointerEvent) => {
       if (shapeItem.type) {
         this.lf.dnd.startDrag({
           type: shapeItem.type,
@@ -103,6 +110,7 @@ export class DndPanel {
       if (shapeItem.callback) {
         shapeItem.callback(this.lf, this.domContainer)
       }
+      e.preventDefault()
     }
     el.ondblclick = (e) => {
       this.lf.graphModel.eventCenter.emit('dnd:panel-dbclick', {

package/src/components/menu/index.ts

@@ -603,7 +603,6 @@ class Menu {
     if (lf.graphModel.editConfigModel.isSilentMode) return
     this.__container = container
     this.__currentData = null // 当前展示的菜单所属元素的model数据
-
     // 监听 isSilentMode 变化
     this.setupSilentModeListener()