@logicflow/core 2.1.4 → 2.1.6

package/es/model/GraphModel.js

@@ -124,6 +124,10 @@ var GraphModel = /** @class */ (function () {
                 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) {
+                        // 检查元素是否仍在DOM中
+                        var isElementInDOM = document.body.contains(_this.rootEl);
+                        if (!isElementInDOM)
+                            return;
                         _this.resize();
                         _this.eventCenter.emit('graph:resize', {
                             target: _this.rootEl,
@@ -1382,12 +1386,30 @@ var GraphModel = /** @class */ (function () {
      * 重新设置画布的宽高
      */
     GraphModel.prototype.resize = function (width, height) {
-        this.width = width !== null && width !== void 0 ? width : this.rootEl.getBoundingClientRect().width;
-        this.isContainerWidth = isNil(width);
-        this.height = height !== null && height !== void 0 ? height : this.rootEl.getBoundingClientRect().height;
-        this.isContainerHeight = isNil(height);
-        if (!this.width || !this.height) {
-            console.warn('渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675');
+        // 检查当前实例是否已被销毁或rootEl不存在
+        if (!this.rootEl)
+            return;
+        // 检查元素是否仍在DOM中
+        var isElementInDOM = document.body.contains(this.rootEl);
+        if (!isElementInDOM)
+            return;
+        // 检查元素是否可见
+        var isVisible = this.rootEl.offsetParent !== null;
+        if (!isVisible)
+            return;
+        try {
+            this.width = width !== null && width !== void 0 ? width : this.rootEl.getBoundingClientRect().width;
+            this.isContainerWidth = isNil(width);
+            this.height = height !== null && height !== void 0 ? height : this.rootEl.getBoundingClientRect().height;
+            this.isContainerHeight = isNil(height);
+            // 只有在元素可见且应该有宽高的情况下才显示警告
+            if (isVisible && (!this.width || !this.height)) {
+                console.warn('渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675');
+            }
+        }
+        catch (error) {
+            // 捕获可能的DOM操作错误
+            console.warn('获取画布宽高时发生错误:', error);
         }
     };
     /**

package/es/view/node/BaseNode.d.ts

@@ -19,6 +19,7 @@ export declare abstract class BaseNode<P extends IProps = IProps> extends Compon
     mouseUpDrag?: boolean;
     startTime?: number;
     modelDisposer: IReactionDisposer;
+    mouseDownPosition?: LogicFlow.Position;
     constructor(props: IProps);
     componentWillUnmount(): void;
     componentDidMount(): void;

package/es/view/node/BaseNode.js

@@ -54,7 +54,7 @@ var __read = (this && this.__read) || function (o, n) {
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { Component } from 'preact/compat';
 import { reaction } from 'mobx';
-import { map } from 'lodash-es';
+import { map, isNil, isFunction } from 'lodash-es';
 import Anchor from '../Anchor';
 import { BaseText } from '../text';
 import { ElementState, EventType, TextMode } from '../../constant';
@@ -88,11 +88,15 @@ var BaseNode = /** @class */ (function (_super) {
             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({
+            var _j = _this.mouseDownPosition, mouseDownX = _j.x, mouseDownY = _j.y;
+            if (clientX - mouseDownX > gridSize || clientY - mouseDownY > gridSize) {
+                model.isDragging = true;
+            }
+            var _k = graphModel.getPointByClient({
                 x: clientX,
                 y: clientY,
-            }).canvasOverlayPosition, x = _j.x, y = _j.y;
-            var _k = __read(transformModel.CanvasPointToHtmlPoint([x, y]), 2), x1 = _k[0], y1 = _k[1];
+            }).canvasOverlayPosition, x = _k.x, y = _k.y;
+            var _l = __read(transformModel.CanvasPointToHtmlPoint([x, y]), 2), x1 = _l[0], y1 = _l[1];
             // 1. 考虑画布被缩放
             // 2. 考虑鼠标位置不再节点中心
             x = x + ((_c = (_b = _this.moveOffset) === null || _b === void 0 ? void 0 : _b.dx) !== null && _c !== void 0 ? _c : 0);
@@ -110,14 +114,14 @@ var BaseNode = /** @class */ (function (_super) {
                 return;
             }
             // 取节点左上角和右下角，计算节点移动是否超出范围
-            var _l = __read(transformModel.CanvasPointToHtmlPoint([
+            var _m = __read(transformModel.CanvasPointToHtmlPoint([
                 x - model.width / 2,
                 y - model.height / 2,
-            ]), 2), leftTopX = _l[0], leftTopY = _l[1];
-            var _m = __read(transformModel.CanvasPointToHtmlPoint([
+            ]), 2), leftTopX = _m[0], leftTopY = _m[1];
+            var _o = __read(transformModel.CanvasPointToHtmlPoint([
                 x + model.width / 2,
                 y + model.height / 2,
-            ]), 2), rightBottomX = _m[0], rightBottomY = _m[1];
+            ]), 2), rightBottomX = _o[0], rightBottomY = _o[1];
             var size = Math.max(gridSize, 20);
             var nearBoundary = [];
             if (leftTopX < 0) {
@@ -180,7 +184,7 @@ var BaseNode = /** @class */ (function (_super) {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
             // 这里会有一种极端情况：当网格大小是1或者关闭网格吸附时，用触摸板点击节点会触发拖拽事件导致节点无法选中
             // 当触摸板点击节点时,为了防止误触发拖拽导致节点无法选中，允许在非拖拽状态且时间间隔小于100ms时触发点击事件
-            if (!isDragging && timeInterval > 100)
+            if (!isDragging && timeInterval > 300)
                 return;
             if (!isDragging) {
                 _this.onDragEnd();
@@ -235,6 +239,14 @@ var BaseNode = /** @class */ (function (_super) {
             else {
                 graphModel.eventCenter.emit(EventType.ELEMENT_CLICK, eventOptions);
                 graphModel.eventCenter.emit(EventType.NODE_CLICK, eventOptions);
+                // 复制粘贴后会出现点击节点时，节点会失去焦点的问题，这里手动让节点获焦以解决这个问题
+                var el_1 = e.currentTarget;
+                var rAF = !isNil(window) && isFunction(window.requestAnimationFrame)
+                    ? window.requestAnimationFrame.bind(window)
+                    : function (fn) { return setTimeout(fn, 0); };
+                rAF(function () {
+                    el_1.focus();
+                });
             }
         };
         _this.handleContextMenu = function (ev) {
@@ -263,6 +275,7 @@ var BaseNode = /** @class */ (function (_super) {
         };
         _this.handleMouseDown = function (ev) {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            _this.mouseDownPosition = { x: ev.clientX, y: ev.clientY };
             _this.startTime = new Date().getTime();
             var editConfigModel = graphModel.editConfigModel;
             if (editConfigModel.adjustNodePosition && model.draggable) {

package/lib/model/GraphModel.js

@@ -130,6 +130,10 @@ var GraphModel = /** @class */ (function () {
                 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) {
+                        // 检查元素是否仍在DOM中
+                        var isElementInDOM = document.body.contains(_this.rootEl);
+                        if (!isElementInDOM)
+                            return;
                         _this.resize();
                         _this.eventCenter.emit('graph:resize', {
                             target: _this.rootEl,
@@ -1388,12 +1392,30 @@ var GraphModel = /** @class */ (function () {
      * 重新设置画布的宽高
      */
     GraphModel.prototype.resize = function (width, height) {
-        this.width = width !== null && width !== void 0 ? width : this.rootEl.getBoundingClientRect().width;
-        this.isContainerWidth = (0, lodash_es_1.isNil)(width);
-        this.height = height !== null && height !== void 0 ? height : this.rootEl.getBoundingClientRect().height;
-        this.isContainerHeight = (0, lodash_es_1.isNil)(height);
-        if (!this.width || !this.height) {
-            console.warn('渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675');
+        // 检查当前实例是否已被销毁或rootEl不存在
+        if (!this.rootEl)
+            return;
+        // 检查元素是否仍在DOM中
+        var isElementInDOM = document.body.contains(this.rootEl);
+        if (!isElementInDOM)
+            return;
+        // 检查元素是否可见
+        var isVisible = this.rootEl.offsetParent !== null;
+        if (!isVisible)
+            return;
+        try {
+            this.width = width !== null && width !== void 0 ? width : this.rootEl.getBoundingClientRect().width;
+            this.isContainerWidth = (0, lodash_es_1.isNil)(width);
+            this.height = height !== null && height !== void 0 ? height : this.rootEl.getBoundingClientRect().height;
+            this.isContainerHeight = (0, lodash_es_1.isNil)(height);
+            // 只有在元素可见且应该有宽高的情况下才显示警告
+            if (isVisible && (!this.width || !this.height)) {
+                console.warn('渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675');
+            }
+        }
+        catch (error) {
+            // 捕获可能的DOM操作错误
+            console.warn('获取画布宽高时发生错误:', error);
         }
     };
     /**

package/lib/view/node/BaseNode.d.ts

@@ -19,6 +19,7 @@ export declare abstract class BaseNode<P extends IProps = IProps> extends Compon
     mouseUpDrag?: boolean;
     startTime?: number;
     modelDisposer: IReactionDisposer;
+    mouseDownPosition?: LogicFlow.Position;
     constructor(props: IProps);
     componentWillUnmount(): void;
     componentDidMount(): void;

package/lib/view/node/BaseNode.js

@@ -92,11 +92,15 @@ var BaseNode = /** @class */ (function (_super) {
             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({
+            var _j = _this.mouseDownPosition, mouseDownX = _j.x, mouseDownY = _j.y;
+            if (clientX - mouseDownX > gridSize || clientY - mouseDownY > gridSize) {
+                model.isDragging = true;
+            }
+            var _k = graphModel.getPointByClient({
                 x: clientX,
                 y: clientY,
-            }).canvasOverlayPosition, x = _j.x, y = _j.y;
-            var _k = __read(transformModel.CanvasPointToHtmlPoint([x, y]), 2), x1 = _k[0], y1 = _k[1];
+            }).canvasOverlayPosition, x = _k.x, y = _k.y;
+            var _l = __read(transformModel.CanvasPointToHtmlPoint([x, y]), 2), x1 = _l[0], y1 = _l[1];
             // 1. 考虑画布被缩放
             // 2. 考虑鼠标位置不再节点中心
             x = x + ((_c = (_b = _this.moveOffset) === null || _b === void 0 ? void 0 : _b.dx) !== null && _c !== void 0 ? _c : 0);
@@ -114,14 +118,14 @@ var BaseNode = /** @class */ (function (_super) {
                 return;
             }
             // 取节点左上角和右下角，计算节点移动是否超出范围
-            var _l = __read(transformModel.CanvasPointToHtmlPoint([
+            var _m = __read(transformModel.CanvasPointToHtmlPoint([
                 x - model.width / 2,
                 y - model.height / 2,
-            ]), 2), leftTopX = _l[0], leftTopY = _l[1];
-            var _m = __read(transformModel.CanvasPointToHtmlPoint([
+            ]), 2), leftTopX = _m[0], leftTopY = _m[1];
+            var _o = __read(transformModel.CanvasPointToHtmlPoint([
                 x + model.width / 2,
                 y + model.height / 2,
-            ]), 2), rightBottomX = _m[0], rightBottomY = _m[1];
+            ]), 2), rightBottomX = _o[0], rightBottomY = _o[1];
             var size = Math.max(gridSize, 20);
             var nearBoundary = [];
             if (leftTopX < 0) {
@@ -184,7 +188,7 @@ var BaseNode = /** @class */ (function (_super) {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
             // 这里会有一种极端情况：当网格大小是1或者关闭网格吸附时，用触摸板点击节点会触发拖拽事件导致节点无法选中
             // 当触摸板点击节点时,为了防止误触发拖拽导致节点无法选中，允许在非拖拽状态且时间间隔小于100ms时触发点击事件
-            if (!isDragging && timeInterval > 100)
+            if (!isDragging && timeInterval > 300)
                 return;
             if (!isDragging) {
                 _this.onDragEnd();
@@ -239,6 +243,14 @@ var BaseNode = /** @class */ (function (_super) {
             else {
                 graphModel.eventCenter.emit(constant_1.EventType.ELEMENT_CLICK, eventOptions);
                 graphModel.eventCenter.emit(constant_1.EventType.NODE_CLICK, eventOptions);
+                // 复制粘贴后会出现点击节点时，节点会失去焦点的问题，这里手动让节点获焦以解决这个问题
+                var el_1 = e.currentTarget;
+                var rAF = !(0, lodash_es_1.isNil)(window) && (0, lodash_es_1.isFunction)(window.requestAnimationFrame)
+                    ? window.requestAnimationFrame.bind(window)
+                    : function (fn) { return setTimeout(fn, 0); };
+                rAF(function () {
+                    el_1.focus();
+                });
             }
         };
         _this.handleContextMenu = function (ev) {
@@ -267,6 +279,7 @@ var BaseNode = /** @class */ (function (_super) {
         };
         _this.handleMouseDown = function (ev) {
             var _a = _this.props, model = _a.model, graphModel = _a.graphModel;
+            _this.mouseDownPosition = { x: ev.clientX, y: ev.clientY };
             _this.startTime = new Date().getTime();
             var editConfigModel = graphModel.editConfigModel;
             if (editConfigModel.adjustNodePosition && model.draggable) {

package/package.json

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

package/src/model/GraphModel.ts

@@ -192,6 +192,9 @@ export class GraphModel {
         ((entries) => {
           for (const entry of entries) {
             if (entry.target === this.rootEl) {
+              // 检查元素是否仍在DOM中
+              const isElementInDOM = document.body.contains(this.rootEl)
+              if (!isElementInDOM) return
               this.resize()
               this.eventCenter.emit('graph:resize', {
                 target: this.rootEl,
@@ -1584,15 +1587,32 @@ export class GraphModel {
    * 重新设置画布的宽高
    */
   @action resize(width?: number, height?: number): void {
-    this.width = width ?? this.rootEl.getBoundingClientRect().width
-    this.isContainerWidth = isNil(width)
-    this.height = height ?? this.rootEl.getBoundingClientRect().height
-    this.isContainerHeight = isNil(height)
-
-    if (!this.width || !this.height) {
-      console.warn(
-        '渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675',
-      )
+    // 检查当前实例是否已被销毁或rootEl不存在
+    if (!this.rootEl) return
+
+    // 检查元素是否仍在DOM中
+    const isElementInDOM = document.body.contains(this.rootEl)
+    if (!isElementInDOM) return
+
+    // 检查元素是否可见
+    const isVisible = this.rootEl.offsetParent !== null
+    if (!isVisible) return
+
+    try {
+      this.width = width ?? this.rootEl.getBoundingClientRect().width
+      this.isContainerWidth = isNil(width)
+      this.height = height ?? this.rootEl.getBoundingClientRect().height
+      this.isContainerHeight = isNil(height)
+
+      // 只有在元素可见且应该有宽高的情况下才显示警告
+      if (isVisible && (!this.width || !this.height)) {
+        console.warn(
+          '渲染画布的时候无法获取画布宽高，请确认在container已挂载到DOM。@see https://github.com/didi/LogicFlow/issues/675',
+        )
+      }
+    } catch (error) {
+      // 捕获可能的DOM操作错误
+      console.warn('获取画布宽高时发生错误:', error)
     }
   }
 

package/src/view/node/BaseNode.tsx

@@ -1,6 +1,6 @@
 import { createElement as h, Component } from 'preact/compat'
 import { reaction, IReactionDisposer } from 'mobx'
-import { map } from 'lodash-es'
+import { map, isNil, isFunction } from 'lodash-es'
 import Anchor from '../Anchor'
 import { BaseText } from '../text'
 import LogicFlow from '../../LogicFlow'
@@ -42,6 +42,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
   mouseUpDrag?: boolean
   startTime?: number
   modelDisposer: IReactionDisposer
+  mouseDownPosition?: LogicFlow.Position
 
   constructor(props: IProps) {
     super()
@@ -88,9 +89,9 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     }
   }
 
-  componentDidMount() { }
+  componentDidMount() {}
 
-  componentDidUpdate() { }
+  componentDidUpdate() {}
 
   abstract getShape(): h.JSX.Element | null
 
@@ -249,6 +250,10 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     } = graphModel
     model.isDragging = true
     const { clientX, clientY } = event!
+    const { x: mouseDownX, y: mouseDownY } = this.mouseDownPosition!
+    if (clientX - mouseDownX > gridSize || clientY - mouseDownY > gridSize) {
+      model.isDragging = true
+    }
     let {
       canvasOverlayPosition: { x, y },
     } = graphModel.getPointByClient({
@@ -342,7 +347,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     const { model, graphModel } = this.props
     // 这里会有一种极端情况：当网格大小是1或者关闭网格吸附时，用触摸板点击节点会触发拖拽事件导致节点无法选中
     // 当触摸板点击节点时,为了防止误触发拖拽导致节点无法选中，允许在非拖拽状态且时间间隔小于100ms时触发点击事件
-    if (!isDragging && timeInterval > 100) return
+    if (!isDragging && timeInterval > 300) return
     if (!isDragging) {
       this.onDragEnd()
       this.handleMouseUp()
@@ -398,6 +403,15 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
     } else {
       graphModel.eventCenter.emit(EventType.ELEMENT_CLICK, eventOptions)
       graphModel.eventCenter.emit(EventType.NODE_CLICK, eventOptions)
+      // 复制粘贴后会出现点击节点时，节点会失去焦点的问题，这里手动让节点获焦以解决这个问题
+      const el = e.currentTarget as HTMLElement
+      const rAF =
+        !isNil(window) && isFunction(window.requestAnimationFrame)
+          ? window.requestAnimationFrame.bind(window)
+          : (fn: () => void) => setTimeout(fn, 0)
+      rAF(() => {
+        el.focus()
+      })
     }
   }
 
@@ -433,6 +447,7 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
 
   handleMouseDown = (ev: MouseEvent) => {
     const { model, graphModel } = this.props
+    this.mouseDownPosition = { x: ev.clientX, y: ev.clientY }
     this.startTime = new Date().getTime()
     const { editConfigModel } = graphModel
     if (editConfigModel.adjustNodePosition && model.draggable) {