From 8d44c588454f5d691da55b476c13896b3c306db6 Mon Sep 17 00:00:00 2001 From: liukairui Date: Fri, 14 Jun 2024 03:21:37 +0800 Subject: [PATCH 1/2] fix: update outline tree when node loop property changes --- .../src/controllers/tree-node.ts | 18 ++++++++++++++++++ .../src/controllers/tree.ts | 5 +++-- .../src/views/tree-title.tsx | 9 ++++++++- 3 files changed, 29 insertions(+), 3 deletions(-) diff --git a/packages/plugin-outline-pane/src/controllers/tree-node.ts b/packages/plugin-outline-pane/src/controllers/tree-node.ts index 34d06fee0..1526e2a59 100644 --- a/packages/plugin-outline-pane/src/controllers/tree-node.ts +++ b/packages/plugin-outline-pane/src/controllers/tree-node.ts @@ -37,6 +37,8 @@ enum EVENT_NAMES { expandableChanged = 'expandableChanged', conditionChanged = 'conditionChanged', + + loopChanged = 'loopChanged', } export default class TreeNode { @@ -160,6 +162,10 @@ export default class TreeNode { return this.node.hasCondition() && !this.node.conditionGroup; } + get loop(): boolean { + return this.node.hasLoop(); + } + get children(): TreeNode[] | null { return this.node.children?.map((node) => this.tree.getTreeNode(node)) || null; } @@ -222,6 +228,14 @@ export default class TreeNode { }; } + onLoopChanged(fn: (treeNode: TreeNode) => void): IPublicTypeDisposable { + this.event.on(EVENT_NAMES.loopChanged, fn); + + return () => { + this.event.off(EVENT_NAMES.loopChanged, fn); + }; + } + onExpandableChanged(fn: (expandable: boolean) => void): IPublicTypeDisposable { this.event.on(EVENT_NAMES.expandableChanged, fn); return () => { @@ -244,6 +258,10 @@ export default class TreeNode { this.event.emit(EVENT_NAMES.conditionChanged, this.condition); } + notifyLoopChanged(): void { + this.event.emit(EVENT_NAMES.loopChanged, this.loop); + } + setHidden(flag: boolean) { if (this.node.conditionGroup) { return; diff --git a/packages/plugin-outline-pane/src/controllers/tree.ts b/packages/plugin-outline-pane/src/controllers/tree.ts index ca5a43c55..7e75307a0 100644 --- a/packages/plugin-outline-pane/src/controllers/tree.ts +++ b/packages/plugin-outline-pane/src/controllers/tree.ts @@ -36,12 +36,13 @@ export class Tree { doc?.onChangeNodeProp((info: IPublicTypePropChangeOptions) => { const { node, key } = info; + const treeNode = this.getTreeNodeById(node.id); if (key === '___title___') { - const treeNode = this.getTreeNodeById(node.id); treeNode?.notifyTitleLabelChanged(); } else if (key === '___condition___') { - const treeNode = this.getTreeNodeById(node.id); treeNode?.notifyConditionChanged(); + } else if (key === '___loop___') { + treeNode?.notifyLoopChanged(); } }); diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx index f822bd644..d7e29dbe8 100644 --- a/packages/plugin-outline-pane/src/views/tree-title.tsx +++ b/packages/plugin-outline-pane/src/views/tree-title.tsx @@ -28,6 +28,7 @@ export default class TreeTitle extends PureComponent<{ editing: boolean; title: string; condition?: boolean; + loop?: boolean; visible?: boolean; filterWorking: boolean; keywords: string; @@ -89,6 +90,7 @@ export default class TreeTitle extends PureComponent<{ editing: false, title: treeNode.titleLabel, condition: treeNode.condition, + loop: treeNode.loop, visible: !treeNode.hidden, }); treeNode.onTitleLabelChanged(() => { @@ -101,6 +103,11 @@ export default class TreeTitle extends PureComponent<{ condition: treeNode.condition, }); }); + treeNode.onLoopChanged(() => { + this.setState({ + loop: treeNode.loop, + }); + }); treeNode.onHiddenChanged((hidden: boolean) => { this.setState({ visible: !hidden, @@ -207,7 +214,7 @@ export default class TreeTitle extends PureComponent<{ {intlNode('Slot for {prop}', { prop: node.slotFor.key })} )} - {node.hasLoop() && ( + {this.state.loop && ( {/* todo: click todo something */} From a8c50ef9cd2a24349641ef71b0b0528d1df1406a Mon Sep 17 00:00:00 2001 From: liukairui Date: Fri, 14 Jun 2024 03:31:19 +0800 Subject: [PATCH 2/2] test: update renderer-core snapshots --- .../renderer/__snapshots__/renderer.test.tsx.snap | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/renderer-core/tests/renderer/__snapshots__/renderer.test.tsx.snap b/packages/renderer-core/tests/renderer/__snapshots__/renderer.test.tsx.snap index 79c5f0f08..4a55c6cd4 100644 --- a/packages/renderer-core/tests/renderer/__snapshots__/renderer.test.tsx.snap +++ b/packages/renderer-core/tests/renderer/__snapshots__/renderer.test.tsx.snap @@ -259,10 +259,11 @@ exports[`Base Render renderComp 1`] = ` "hidden": undefined, } } + aria-expanded="false" + aria-label="select" autoComplete="off" disabled={false} height="100%" - maxLength={null} onBlur={[Function]} onChange={[Function]} onCompositionEnd={[Function]} @@ -378,10 +379,11 @@ exports[`Base Render renderComp 1`] = ` "hidden": undefined, } } + aria-expanded="false" + aria-label="select" autoComplete="off" disabled={false} height="100%" - maxLength={null} onBlur={[Function]} onChange={[Function]} onCompositionEnd={[Function]} @@ -485,7 +487,6 @@ exports[`Base Render renderComp 1`] = ` autoComplete="off" disabled={false} height="100%" - maxLength={null} onBlur={[Function]} onChange={[Function]} onCompositionEnd={[Function]} @@ -988,7 +989,6 @@ exports[`Base Render renderComp 1`] = ` autoComplete="off" disabled={false} height="100%" - maxLength={null} onBlur={[Function]} onChange={[Function]} onCompositionEnd={[Function]} @@ -1048,10 +1048,11 @@ exports[`Base Render renderComp 1`] = ` "hidden": undefined, } } + aria-expanded="false" + aria-label="select" autoComplete="off" disabled={false} height="100%" - maxLength={null} name="error" onBlur={[Function]} onChange={[Function]}