fix(docs): 解决 docs 启动时「The same observable object cannot appear twice…

… in the same tree」错误 - 节点定义写法有问题，observer 属性赋值给另一个 observer 属性，导致触发上面错误 - 更新包版本 - DEFAULT_GRID_SIZE 将默认的 gridSize 值提成常量值，放在 constant 中，方便修改 - history 功能需要测试一下 cloneDeep(model) 的部分
didi · Jun 24, 2024 · 644b351 · 644b351
1 parent 29a5d95
commit 644b351
Show file tree

Hide file tree

Showing 16 changed files with 56 additions and 31 deletions.
diff --git a/examples/feature-examples/package.json b/examples/feature-examples/package.json
@@ -1,6 +1,6 @@
 {
-  "private": true,
   "name": "@logicflow/feature-examples",
+  "private": true,
   "author": "boyongjiong <boyongjiong@didiglobal.com>",
   "scripts": {
     "dev": "umi dev",

diff --git a/examples/material-ui-demo/package.json b/examples/material-ui-demo/package.json
@@ -1,6 +1,5 @@
 {
   "name": "material-ui-app",
-  "version": "1.3.0",
   "private": true,
   "dependencies": {
     "@emotion/cache": "^11.9.3",

diff --git a/examples/next-app/package.json b/examples/next-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-app",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/examples/vue3-app/package.json b/examples/vue3-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue3-app",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "private": true,
   "type": "module",
   "scripts": {

diff --git a/examples/vue3-memory-leak/package.json b/examples/vue3-memory-leak/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-memory-leak",
   "private": true,
-  "version": "0.0.0",
+  "version": "1.0.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "1.3.0",
+  "version": "2.0.0-beta.1",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "dist/index.js",
   "module": "es/index.js",

diff --git a/packages/core/src/constant/index.ts b/packages/core/src/constant/index.ts
@@ -1,6 +1,8 @@
 export const DEFAULT_VISIBLE_SPACE = 200
 export const ELEMENT_MAX_Z_INDEX = 9999
 
+export const DEFAULT_GRID_SIZE = 10
+
 export enum ElementState {
   DEFAULT = 1, // 默认显示
   TEXT_EDIT, // 此元素正在进行文本编辑

diff --git a/packages/core/src/history/index.ts b/packages/core/src/history/index.ts
@@ -81,13 +81,28 @@ export class History {
     this.undos.push(model.modelToGraphData())
 
     this.stopWatch = deepObserve(
+      // TODO：避免用户触发「The same observable object cannot appear twice in the same tree」 错误
+      // 例如：在自定义节点的 setAttributes 方法中，将 nodeModel 属性赋值给另一个 observable 属性
+      // eg:
+      // setAttributes() {
+      //   this.width = 120
+      //   this.height = 50
+      //
+      //   if (this.text) {
+      //     this.properties.text = this.text;
+      //     this.text.value = '';
+      //   }
+      // }
+      // 解决方案：使用 cloneDeep 方法，将 observable 对象克隆一份。需要测试下面操作是否会造成其它问题
+      // https://stackoverflow.com/questions/55328504/a-node-cannot-exists-twice-in-the-state-tree-mobx-state-tree
+      // cloneDeep(model),
       model,
       debounce(() => {
-        // 数据变更后，把最新的当前model数据存起来，并清空redos。
-        // 因为这个回调函数的触发，一般是用户交互而引起的，所以按正常逻辑需要清空redos。
+        // 数据变更后，把最新的当前model数据存起来，并清空 redos。
+        // 因为这个回调函数的触发，一般是用户交互而引起的，所以按正常逻辑需要清空 redos。
         const data = model.modelToHistoryData()
         if (data) {
-          this.add(data)
+          this.add({ ...data })
         }
       }, this.waitTime),
     )

diff --git a/packages/core/src/model/node/BaseNodeModel.ts b/packages/core/src/model/node/BaseNodeModel.ts
@@ -186,7 +186,7 @@ export class BaseNodeModel implements IBaseNodeModel {
     }
 
     this.formatText(data)
-    assign(this, pickNodeConfig(data))
+    assign(this, pickNodeConfig(data)) // TODO: 确认 constructor 中赋值 properties 是否必要
     const { overlapMode } = this.graphModel
     if (overlapMode === OverlapMode.INCREASE) {
       this.zIndex = data.zIndex || getZIndex()

diff --git a/packages/core/src/options.ts b/packages/core/src/options.ts
@@ -3,7 +3,7 @@ import { createElement as h } from 'preact/compat'
 import LogicFlow from './LogicFlow'
 import { GraphModel } from './model'
 import { KeyboardDef } from './keyboard'
-import { OverlapMode } from './constant'
+import { DEFAULT_GRID_SIZE, OverlapMode } from './constant'
 
 export namespace Options {
   import NodeData = LogicFlow.NodeData
@@ -135,7 +135,7 @@ export namespace Options {
     const result = assign({}, defaults, others) as Options.Definition
 
     const defaultGrid: GridOptions = {
-      size: 20,
+      size: DEFAULT_GRID_SIZE,
       type: 'dot',
       visible: true,
       config: {

diff --git a/packages/core/src/view/overlay/Grid.tsx b/packages/core/src/view/overlay/Grid.tsx
@@ -1,7 +1,8 @@
 import { Component } from 'preact/compat'
 import { observer } from '../..'
-import { GraphModel } from '../../model'
 import { createUuid } from '../../util'
+import { GraphModel } from '../../model'
+import { DEFAULT_GRID_SIZE } from '../../constant'
 
 export type GridOptions = {
   /**
@@ -37,7 +38,7 @@ export class Grid extends Component<IProps> {
 
     const { color, thickness = 2 } = config ?? {}
 
-    const length = Math.min(Math.max(2, thickness), size / 2) // 2 < length < size /2
+    const length = Math.min(Math.max(1.5, thickness), size / 2) // 2 < length < size /2
     let opacity = 1
     if (!visible) {
       opacity = 0
@@ -122,7 +123,7 @@ export class Grid extends Component<IProps> {
 }
 
 Grid.defaultProps = {
-  size: 20,
+  size: DEFAULT_GRID_SIZE,
   visible: true,
   type: 'dot',
   config: {

diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "1.3.0",
+  "version": "2.0.0-beta.1",
   "description": "LogicFlow Extensions",
   "main": "dist/index.js",
   "module": "es/index.js",

diff --git a/packages/react-node-registry/package.json b/packages/react-node-registry/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/react-node-registry",
-  "version": "1.3.0",
+  "version": "1.0.0-beta.1",
   "description": "LogicFlow React Shape",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/packages/vue-node-registry/package.json b/packages/vue-node-registry/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/vue-node-registry",
-  "version": "1.3.0",
+  "version": "1.0.0-beta.1",
   "description": "LogicFlow Vue Component Node Registry",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/sites/docs/.dumi/pages/index/components/demo/node/circleNode.ts b/sites/docs/.dumi/pages/index/components/demo/node/circleNode.ts
@@ -1,7 +1,8 @@
 import { HtmlNode, HtmlNodeModel, h } from '@logicflow/core';
 
 class CircleNodeView extends HtmlNode {
-  setHtml(rootEl: HTMLElement) {
+  setHtml(rootEl: SVGForeignObjectElement) {
+    const nodeData = this.props.model.getData();
     const { properties } = this.props.model;
     const text: any = properties.text;
     const innerText = text.value;
@@ -11,7 +12,7 @@ class CircleNodeView extends HtmlNode {
     el.className = `step-wrapper circle-wrapper spin ${
       isAnimation ? 'is-animate' : ''
     }`;
-    const html = `<div class='text'>${innerText}</div>`;
+    const html = `<div class='text'>${nodeData.text?.value}</div>`;
     const animationDom = `<div class='border-div border-circle-animate'><div>`;
     // 需要先把之前渲染的子节点清除掉。
     el.innerHTML = isAnimation ? html + animationDom : html;
@@ -25,7 +26,7 @@ class CircleNodeModel extends HtmlNodeModel {
     this.width = 80;
     this.height = 80;
     if (this.text) {
-      this.properties.text = this.text;
+      // this.properties.text = this.text;
       this.text.value = '';
     }
   }

diff --git a/sites/docs/.dumi/pages/index/components/demo/node/stepNode.ts b/sites/docs/.dumi/pages/index/components/demo/node/stepNode.ts
@@ -1,15 +1,20 @@
 import { HtmlNode, HtmlNodeModel, h } from '@logicflow/core';
 
 class StepNodeView extends HtmlNode {
-  setHtml(rootEl: HTMLElement) {
-    const { properties } = this.props.model;
-    const text: any = properties.text;
-    const innerText = text.value;
-    const isAnimation = properties.isAnimation;
+  getText() {
+    return null;
+  }
+
+  setHtml(rootEl: SVGForeignObjectElement) {
+    const { model } = this.props;
+    const {
+      properties: { isAnimation },
+    } = model;
+    const nodeData = model.getData();
 
     const el = document.createElement('div');
     el.className = `step-wrapper spin ${isAnimation ? 'is-animate' : ''}`;
-    const html = `<div class='text'>${innerText}</div>`;
+    const html = `<div class='text'>${nodeData.text?.value}</div>`;
     const animationDom = `<div class='border-div border-animate'><div>`;
     // 需要先把之前渲染的子节点清除掉。
     el.innerHTML = isAnimation ? html + animationDom : html;
@@ -22,10 +27,12 @@ class StepNodeModel extends HtmlNodeModel {
   setAttributes() {
     this.width = 120;
     this.height = 50;
-    if (this.text) {
-      this.properties.text = this.text;
-      this.text.value = '';
-    }
+
+    // 错误之源 -> 这种错误写法，应该写入教科书
+    // if (this.text) {
+    //   this.properties.text = this.text;
+    //   this.text.value = '';
+    // }
   }
 }