From 644b351682ef221eb4ed961b6360b38ecb0cd4be Mon Sep 17 00:00:00 2001 From: boyongjiong Date: Mon, 24 Jun 2024 16:46:05 +0800 Subject: [PATCH] =?UTF-8?q?fix(docs):=20=E8=A7=A3=E5=86=B3=20docs=20?= =?UTF-8?q?=E5=90=AF=E5=8A=A8=E6=97=B6=E3=80=8CThe=20same=20observable=20o?= =?UTF-8?q?bject=20cannot=20appear=20twice=20in=20the=20same=20tree?= =?UTF-8?q?=E3=80=8D=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 节点定义写法有问题，observer 属性赋值给另一个 observer 属性，导致触发上面错误 - 更新包版本 - DEFAULT_GRID_SIZE 将默认的 gridSize 值提成常量值，放在 constant 中，方便修改 - history 功能需要测试一下 cloneDeep(model) 的部分 --- examples/feature-examples/package.json | 2 +- examples/material-ui-demo/package.json | 1 - examples/next-app/package.json | 2 +- examples/vue3-app/package.json | 2 +- examples/vue3-memory-leak/package.json | 2 +- packages/core/package.json | 2 +- packages/core/src/constant/index.ts | 2 ++ packages/core/src/history/index.ts | 21 ++++++++++++--- packages/core/src/model/node/BaseNodeModel.ts | 2 +- packages/core/src/options.ts | 4 +-- packages/core/src/view/overlay/Grid.tsx | 7 ++--- packages/extension/package.json | 2 +- packages/react-node-registry/package.json | 2 +- packages/vue-node-registry/package.json | 2 +- .../index/components/demo/node/circleNode.ts | 7 ++--- .../index/components/demo/node/stepNode.ts | 27 ++++++++++++------- 16 files changed, 56 insertions(+), 31 deletions(-) diff --git a/examples/feature-examples/package.json b/examples/feature-examples/package.json index 44f5b6ecc..27eea2048 100644 --- 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 ", "scripts": { "dev": "umi dev", diff --git a/examples/material-ui-demo/package.json b/examples/material-ui-demo/package.json index 54dd894b4..1e1376ab6 100644 --- 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 index 96121a090..13ad88c6b 100644 --- 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 index 0c48b79f2..eb9d2c665 100644 --- 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 index c5972fa7e..87857df57 100644 --- 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 index 6242cf330..a68ea557d 100644 --- 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 index bbd8de673..a4b349162 100644 --- 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 index 976459d8c..b15396d87 100644 --- 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 index 0a6370b01..79b9e610d 100644 --- 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 index 0a6cc4f8e..a1bec1e30 100644 --- 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 index d40002598..7ee6915f0 100644 --- 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 { 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 { } 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 index bc60ffd67..5a65e04b1 100644 --- 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 index a0a44bbf4..560e0cf71 100644 --- 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 index 739c01165..65d9ae62e 100644 --- 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 index 42669c90a..e460fc2a2 100644 --- 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 = `
${innerText}
`; + const html = `
${nodeData.text?.value}
`; const animationDom = `
`; // 需要先把之前渲染的子节点清除掉。 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 index 9286fd4a3..2cbd27ac5 100644 --- 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 = `
${innerText}
`; + const html = `
${nodeData.text?.value}
`; const animationDom = `
`; // 需要先把之前渲染的子节点清除掉。 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 = ''; + // } } }