@logicflow/core 2.2.0-alpha.3 → 2.2.0-alpha.4

package/es/model/GraphModel.js

@@ -131,6 +131,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,
@@ -1392,12 +1396,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/tool/MultipleSelectTool.js

@@ -55,6 +55,10 @@ var MultipleSelect = /** @class */ (function (_super) {
     function MultipleSelect(props) {
         var _this = _super.call(this, props) || this;
         _this.handleMouseDown = function (ev) {
+            // 多选区域的拖拽步长随缩放变化
+            var _a = _this.props, gridSize = _a.graphModel.gridSize, lf = _a.lf;
+            var SCALE_X = lf.getTransform().SCALE_X;
+            _this.stepDrag.setStep(gridSize * SCALE_X);
             _this.stepDrag.handleMouseDown(ev);
         };
         // 使多选区域的滚轮事件可以触发画布的滚轮事件

package/es/view/node/BaseNode.js

@@ -242,6 +242,15 @@ 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 = typeof window !== 'undefined' &&
+                    typeof window.requestAnimationFrame === 'function'
+                    ? window.requestAnimationFrame.bind(window)
+                    : function (fn) { return setTimeout(fn, 0); };
+                rAF(function () {
+                    el_1.focus();
+                });
             }
         };
         _this.handleContextMenu = function (ev) {

package/es/view/overlay/CanvasOverlay.js

@@ -97,6 +97,9 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 if (selectElements.size > 0) {
                     graphModel.clearSelectElements();
                 }
+                // 如果是拖拽状态，不触发点击事件
+                if (_this.state.isDragging)
+                    return;
                 graphModel.eventCenter.emit(EventType.BLANK_CLICK, { e: ev });
             }
         };
@@ -158,8 +161,6 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 else {
                     eventCenter.emit(EventType.BLANK_MOUSEDOWN, { e: ev });
                 }
-                // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
-                _this.clickHandler(ev);
             }
         };
         _this.pointerMoveHandler = function (ev) {
@@ -217,6 +218,8 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 var editConfigModel = _this.props.graphModel.editConfigModel;
                 // 标记退出捏合，框选等交互可恢复
                 editConfigModel.updateEditConfig({ isPinching: false });
+                // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
+                _this.clickHandler(ev);
             }
         };
         var _a = props.graphModel, gridSize = _a.gridSize, eventCenter = _a.eventCenter;

package/lib/model/GraphModel.js

@@ -137,6 +137,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,
@@ -1398,12 +1402,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/tool/MultipleSelectTool.js

@@ -57,6 +57,10 @@ var MultipleSelect = /** @class */ (function (_super) {
     function MultipleSelect(props) {
         var _this = _super.call(this, props) || this;
         _this.handleMouseDown = function (ev) {
+            // 多选区域的拖拽步长随缩放变化
+            var _a = _this.props, gridSize = _a.graphModel.gridSize, lf = _a.lf;
+            var SCALE_X = lf.getTransform().SCALE_X;
+            _this.stepDrag.setStep(gridSize * SCALE_X);
             _this.stepDrag.handleMouseDown(ev);
         };
         // 使多选区域的滚轮事件可以触发画布的滚轮事件

package/lib/view/node/BaseNode.js

@@ -246,6 +246,15 @@ 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 = typeof window !== 'undefined' &&
+                    typeof window.requestAnimationFrame === 'function'
+                    ? window.requestAnimationFrame.bind(window)
+                    : function (fn) { return setTimeout(fn, 0); };
+                rAF(function () {
+                    el_1.focus();
+                });
             }
         };
         _this.handleContextMenu = function (ev) {

package/lib/view/overlay/CanvasOverlay.js

@@ -100,6 +100,9 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 if (selectElements.size > 0) {
                     graphModel.clearSelectElements();
                 }
+                // 如果是拖拽状态，不触发点击事件
+                if (_this.state.isDragging)
+                    return;
                 graphModel.eventCenter.emit(constant_1.EventType.BLANK_CLICK, { e: ev });
             }
         };
@@ -161,8 +164,6 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 else {
                     eventCenter.emit(constant_1.EventType.BLANK_MOUSEDOWN, { e: ev });
                 }
-                // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
-                _this.clickHandler(ev);
             }
         };
         _this.pointerMoveHandler = function (ev) {
@@ -220,6 +221,8 @@ var CanvasOverlay = /** @class */ (function (_super) {
                 var editConfigModel = _this.props.graphModel.editConfigModel;
                 // 标记退出捏合，框选等交互可恢复
                 editConfigModel.updateEditConfig({ isPinching: false });
+                // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
+                _this.clickHandler(ev);
             }
         };
         var _a = props.graphModel, gridSize = _a.gridSize, eventCenter = _a.eventCenter;

package/package.json

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

package/src/model/EditConfigModel.ts

@@ -23,10 +23,10 @@ export interface IEditConfigType {
    * - [number, number, number, number]：[minX, minY, maxX, maxY] 画布可拖动范围
    */
   stopMoveGraph:
-    | boolean
-    | 'vertical'
-    | 'horizontal'
-    | [number, number, number, number]
+  | boolean
+  | 'vertical'
+  | 'horizontal'
+  | [number, number, number, number]
   /**
    * 允许调整边
    */

package/src/model/GraphModel.ts

@@ -206,6 +206,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,
@@ -1601,15 +1604,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/model/node/BaseNodeModel.ts

@@ -57,8 +57,7 @@ export interface IBaseNodeModel<P extends PropertiesType>
 }
 
 export class BaseNodeModel<P extends PropertiesType = PropertiesType>
-  implements IBaseNodeModel<P>
-{
+  implements IBaseNodeModel<P> {
   readonly BaseType = ElementType.NODE
   static BaseType: ElementType = ElementType.NODE
 
@@ -226,7 +225,7 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
    *
    * @overridable 支持重写
    */
-  public setAttributes() {}
+  public setAttributes() { }
 
   /**
    * @overridable 支持重写，自定义此类型节点默认生成方式
@@ -307,7 +306,7 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
   }
 
   // TODO: 等比例缩放
-  proportionalResize() {}
+  proportionalResize() { }
 
   /**
    * 获取被保存时返回的数据

package/src/tool/MultipleSelectTool.tsx

@@ -27,6 +27,13 @@ export default class MultipleSelect extends Component<IToolProps> {
   }
 
   handleMouseDown = (ev: PointerEvent) => {
+    // 多选区域的拖拽步长随缩放变化
+    const {
+      graphModel: { gridSize },
+      lf,
+    } = this.props
+    const { SCALE_X } = lf.getTransform()
+    this.stepDrag.setStep(gridSize * SCALE_X)
     this.stepDrag.handleMouseDown(ev)
   }
   // 使多选区域的滚轮事件可以触发画布的滚轮事件

package/src/view/node/BaseNode.tsx

@@ -407,6 +407,16 @@ 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 =
+        typeof window !== 'undefined' &&
+        typeof window.requestAnimationFrame === 'function'
+          ? window.requestAnimationFrame.bind(window)
+          : (fn: () => void) => setTimeout(fn, 0)
+      rAF(() => {
+        el.focus()
+      })
     }
   }
 

package/src/view/overlay/CanvasOverlay.tsx

@@ -115,6 +115,8 @@ export class CanvasOverlay extends Component<IProps, IState> {
       if (selectElements.size > 0) {
         graphModel.clearSelectElements()
       }
+      // 如果是拖拽状态，不触发点击事件
+      if (this.state.isDragging) return
       graphModel.eventCenter.emit(EventType.BLANK_CLICK, { e: ev })
     }
   }
@@ -184,8 +186,6 @@ export class CanvasOverlay extends Component<IProps, IState> {
       } else {
         eventCenter.emit(EventType.BLANK_MOUSEDOWN, { e: ev })
       }
-      // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
-      this.clickHandler(ev)
     }
   }
   pointerMoveHandler = (ev: PointerEvent) => {
@@ -249,6 +249,8 @@ export class CanvasOverlay extends Component<IProps, IState> {
       } = this.props
       // 标记退出捏合，框选等交互可恢复
       editConfigModel.updateEditConfig({ isPinching: false })
+      // 为了处理画布移动的时候，编辑和菜单仍然存在的问题。
+      this.clickHandler(ev)
     }
   }