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

package/es/LogicFlow.js

@@ -1217,7 +1217,6 @@ var LogicFlow = /** @class */ (function () {
         this.graphModel.destroy();
         this.tool.destroy();
         this.history.destroy();
-        clearThemeMode();
         for (var extensionName in this.extension) {
             var extensionInstance = this.extension[extensionName];
             if ('destroy' in extensionInstance) {

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,
@@ -499,7 +503,7 @@ var GraphModel = /** @class */ (function () {
                 edgeDragging = true;
                 break;
             }
-            else {
+            if (!edgeMode.virtual) {
                 edges.push(edgeMode.getHistoryData());
             }
         }
@@ -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

@@ -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, isFunction, isNil } from 'lodash-es';
 import Anchor from '../Anchor';
 import { BaseText } from '../text';
 import { ElementState, EventType, TextMode } from '../../constant';
@@ -242,6 +242,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) {

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/es/view/overlay/OutlineOverlay.js

@@ -57,7 +57,7 @@ var OutlineOverlay = /** @class */ (function (_super) {
                 var isHovered = element.isHovered, isSelected = element.isSelected, x = element.x, y = element.y, width = element.width, height = element.height;
                 if ((nodeSelectedOutline && isSelected) ||
                     (hoverOutline && isHovered)) {
-                    var style_1 = element.getOutlineStyle();
+                    var style_1 = element.getOutlineStyle() || {};
                     var attributes_1 = {};
                     Object.keys(style_1).forEach(function (key) {
                         if (key !== 'hover') {

package/lib/LogicFlow.js

@@ -1246,7 +1246,6 @@ var LogicFlow = /** @class */ (function () {
         this.graphModel.destroy();
         this.tool.destroy();
         this.history.destroy();
-        (0, util_1.clearThemeMode)();
         for (var extensionName in this.extension) {
             var extensionInstance = this.extension[extensionName];
             if ('destroy' in extensionInstance) {

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,
@@ -505,7 +509,7 @@ var GraphModel = /** @class */ (function () {
                 edgeDragging = true;
                 break;
             }
-            else {
+            if (!edgeMode.virtual) {
                 edges.push(edgeMode.getHistoryData());
             }
         }
@@ -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,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) {

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/lib/view/overlay/OutlineOverlay.js

@@ -60,7 +60,7 @@ var OutlineOverlay = /** @class */ (function (_super) {
                 var isHovered = element.isHovered, isSelected = element.isSelected, x = element.x, y = element.y, width = element.width, height = element.height;
                 if ((nodeSelectedOutline && isSelected) ||
                     (hoverOutline && isHovered)) {
-                    var style_1 = element.getOutlineStyle();
+                    var style_1 = element.getOutlineStyle() || {};
                     var attributes_1 = {};
                     Object.keys(style_1).forEach(function (key) {
                         if (key !== 'hover') {

package/package.json

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

package/src/LogicFlow.tsx

@@ -1445,7 +1445,6 @@ export class LogicFlow {
     this.graphModel.destroy()
     this.tool.destroy()
     this.history.destroy()
-    clearThemeMode()
     for (const extensionName in this.extension) {
       const extensionInstance = this.extension[extensionName]
       if ('destroy' in extensionInstance) {

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,
@@ -573,7 +576,8 @@ export class GraphModel {
       if (edgeMode.isDragging) {
         edgeDragging = true
         break
-      } else {
+      }
+      if (!edgeMode.virtual) {
         edges.push(edgeMode.getHistoryData())
       }
     }
@@ -1601,15 +1605,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

@@ -1,6 +1,6 @@
 import { createElement as h, Component } from 'preact/compat'
 import { reaction, IReactionDisposer } from 'mobx'
-import { map } from 'lodash-es'
+import { map, isFunction, isNil } from 'lodash-es'
 import Anchor from '../Anchor'
 import { BaseText } from '../text'
 import LogicFlow from '../../LogicFlow'
@@ -407,6 +407,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()
+      })
     }
   }
 

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)
     }
   }
 

package/src/view/overlay/OutlineOverlay.tsx

@@ -51,7 +51,7 @@ export class OutlineOverlay extends Component<IProps> {
           (nodeSelectedOutline && isSelected) ||
           (hoverOutline && isHovered)
         ) {
-          const style = element.getOutlineStyle()
+          const style = element.getOutlineStyle() || {}
           let attributes = {}
           Object.keys(style).forEach((key) => {
             if (key !== 'hover') {