From 80fc9766b19a762dd5d773cbb12cda128e79a942 Mon Sep 17 00:00:00 2001 From: liujuping Date: Fri, 24 Mar 2023 14:22:30 +0800 Subject: [PATCH] fix: fix cant change the panel tree item title with prop api --- .../src/controllers/tree-node.ts | 263 +++++++++--------- .../src/controllers/tree.ts | 10 +- 2 files changed, 143 insertions(+), 130 deletions(-) diff --git a/packages/plugin-outline-pane/src/controllers/tree-node.ts b/packages/plugin-outline-pane/src/controllers/tree-node.ts index 1f15405e5..62f373e2a 100644 --- a/packages/plugin-outline-pane/src/controllers/tree-node.ts +++ b/packages/plugin-outline-pane/src/controllers/tree-node.ts @@ -41,43 +41,22 @@ export default class TreeNode { readonly pluginContext: IPublicModelPluginContext; event = new EventEmitter(); - onFilterResultChanged(fn: () => void): IPublicTypeDisposable { - this.event.on(EVENT_NAMES.filterResultChanged, fn); - return () => { - this.event.off(EVENT_NAMES.filterResultChanged, fn); - } - }; - onExpandedChanged(fn: (expanded: boolean) => void): IPublicTypeDisposable { - this.event.on(EVENT_NAMES.expandedChanged, fn); - return () => { - this.event.off(EVENT_NAMES.expandedChanged, fn); - } - }; - onHiddenChanged(fn: (hidden: boolean) => void): IPublicTypeDisposable { - this.event.on(EVENT_NAMES.hiddenChanged, fn); - return () => { - this.event.off(EVENT_NAMES.hiddenChanged, fn); - } - }; - onLockedChanged(fn: (locked: boolean) => void): IPublicTypeDisposable { - this.event.on(EVENT_NAMES.lockedChanged, fn); - return () => { - this.event.off(EVENT_NAMES.lockedChanged, fn); - } - }; - onTitleLabelChanged(fn: (treeNode: TreeNode) => void): IPublicTypeDisposable { - this.event.on(EVENT_NAMES.titleLabelChanged, fn); + private _node: IPublicModelNode; - return () => { - this.event.off(EVENT_NAMES.titleLabelChanged, fn); - } + readonly tree: Tree; + + private _filterResult: FilterResult = { + filterWorking: false, + matchChild: false, + matchSelf: false, + keywords: '', }; - onExpandableChanged(fn: (expandable: boolean) => void): IPublicTypeDisposable { - this.event.on(EVENT_NAMES.expandableChanged, fn); - return () => { - this.event.off(EVENT_NAMES.expandableChanged, fn); - } - } + + /** + * 默认为折叠状态 + * 在初始化根节点时，设置为展开状态 + */ + private _expanded = false; get id(): string { return this.node.id; @@ -91,11 +70,8 @@ export default class TreeNode { return this.hasChildren() || this.hasSlots() || this.dropDetail?.index != null; } - /** - * 触发 onExpandableChanged 回调 - */ - notifyExpandableChanged(): void { - this.event.emit(EVENT_NAMES.expandableChanged, this.expandable); + get expanded(): boolean { + return this.isRoot(true) || (this.expandable && this._expanded); } /** @@ -110,47 +86,6 @@ export default class TreeNode { return this.node.zLevel; } - isRoot(includeOriginalRoot = false) { - const rootNode = this.pluginContext.project.getCurrentDocument()?.root; - return this.tree.root === this || (includeOriginalRoot && rootNode === this.node); - } - - /** - * 是否是响应投放区 - */ - isResponseDropping(): boolean { - const loc = this.pluginContext.project.getCurrentDocument()?.dropLocation; - if (!loc) { - return false; - } - return loc.target?.id === this.id; - } - - isFocusingNode(): boolean { - const loc = this.pluginContext.project.getCurrentDocument()?.dropLocation; - if (!loc) { - return false; - } - return ( - isLocationChildrenDetail(loc.detail) && loc.detail.focus?.type === 'node' && loc.detail?.focus?.node.id === this.id - ); - } - - /** - * 默认为折叠状态 - * 在初始化根节点时，设置为展开状态 - */ - private _expanded = false; - - get expanded(): boolean { - return this.isRoot(true) || (this.expandable && this._expanded); - } - - setExpanded(value: boolean) { - this._expanded = value; - this.event.emit(EVENT_NAMES.expandedChanged, value); - } - get detecting() { const doc = this.pluginContext.project.currentDocument; return !!(doc?.isDetectingNode(this.node)); @@ -164,23 +99,10 @@ export default class TreeNode { return !cv; } - setHidden(flag: boolean) { - if (this.node.conditionGroup) { - return; - } - this.node.visible = !flag; - this.event.emit(EVENT_NAMES.hiddenChanged, flag); - } - get locked(): boolean { return this.node.isLocked; } - setLocked(flag: boolean) { - this.node.lock(flag); - this.event.emit(EVENT_NAMES.lockedChanged, flag); - } - get selected(): boolean { // TODO: check is dragging const selection = this.pluginContext.project.getCurrentDocument()?.selection; @@ -213,19 +135,6 @@ export default class TreeNode { return this.node.componentName; } - setTitleLabel(label: string) { - const origLabel = this.titleLabel; - if (label === origLabel) { - return; - } - if (label === '') { - this.node.getExtraProp('title', false)?.remove(); - } else { - this.node.getExtraProp('title', true)?.setValue(label); - } - this.event.emit(EVENT_NAMES.titleLabelChanged, this); - } - get icon() { return this.node.componentMeta?.icon; } @@ -247,6 +156,123 @@ export default class TreeNode { return this.node.children?.map((node) => this.tree.getTreeNode(node)) || null; } + get node(): IPublicModelNode { + return this._node; + } + + constructor(tree: Tree, node: IPublicModelNode, pluginContext: IPublicModelPluginContext) { + this.tree = tree; + this.pluginContext = pluginContext; + this._node = node; + } + + setLocked(flag: boolean) { + this.node.lock(flag); + this.event.emit(EVENT_NAMES.lockedChanged, flag); + } + + onFilterResultChanged(fn: () => void): IPublicTypeDisposable { + this.event.on(EVENT_NAMES.filterResultChanged, fn); + return () => { + this.event.off(EVENT_NAMES.filterResultChanged, fn); + }; + } + onExpandedChanged(fn: (expanded: boolean) => void): IPublicTypeDisposable { + this.event.on(EVENT_NAMES.expandedChanged, fn); + return () => { + this.event.off(EVENT_NAMES.expandedChanged, fn); + }; + } + onHiddenChanged(fn: (hidden: boolean) => void): IPublicTypeDisposable { + this.event.on(EVENT_NAMES.hiddenChanged, fn); + return () => { + this.event.off(EVENT_NAMES.hiddenChanged, fn); + }; + } + onLockedChanged(fn: (locked: boolean) => void): IPublicTypeDisposable { + this.event.on(EVENT_NAMES.lockedChanged, fn); + return () => { + this.event.off(EVENT_NAMES.lockedChanged, fn); + }; + } + + onTitleLabelChanged(fn: (treeNode: TreeNode) => void): IPublicTypeDisposable { + this.event.on(EVENT_NAMES.titleLabelChanged, fn); + + return () => { + this.event.off(EVENT_NAMES.titleLabelChanged, fn); + }; + } + onExpandableChanged(fn: (expandable: boolean) => void): IPublicTypeDisposable { + this.event.on(EVENT_NAMES.expandableChanged, fn); + return () => { + this.event.off(EVENT_NAMES.expandableChanged, fn); + }; + } + + /** + * 触发 onExpandableChanged 回调 + */ + notifyExpandableChanged(): void { + this.event.emit(EVENT_NAMES.expandableChanged, this.expandable); + } + + notifyTitleLabelChanged(): void { + this.event.emit(EVENT_NAMES.titleLabelChanged, this.title); + } + + setHidden(flag: boolean) { + if (this.node.conditionGroup) { + return; + } + this.node.visible = !flag; + this.event.emit(EVENT_NAMES.hiddenChanged, flag); + } + + isFocusingNode(): boolean { + const loc = this.pluginContext.project.getCurrentDocument()?.dropLocation; + if (!loc) { + return false; + } + return ( + isLocationChildrenDetail(loc.detail) && loc.detail.focus?.type === 'node' && loc.detail?.focus?.node.id === this.id + ); + } + + setExpanded(value: boolean) { + this._expanded = value; + this.event.emit(EVENT_NAMES.expandedChanged, value); + } + + isRoot(includeOriginalRoot = false) { + const rootNode = this.pluginContext.project.getCurrentDocument()?.root; + return this.tree.root === this || (includeOriginalRoot && rootNode === this.node); + } + + /** + * 是否是响应投放区 + */ + isResponseDropping(): boolean { + const loc = this.pluginContext.project.getCurrentDocument()?.dropLocation; + if (!loc) { + return false; + } + return loc.target?.id === this.id; + } + + setTitleLabel(label: string) { + const origLabel = this.titleLabel; + if (label === origLabel) { + return; + } + if (label === '') { + this.node.getExtraProp('title', false)?.remove(); + } else { + this.node.getExtraProp('title', true)?.setValue(label); + } + this.event.emit(EVENT_NAMES.titleLabelChanged, this); + } + /** * 是否是容器，允许子节点拖入 */ @@ -298,39 +324,18 @@ export default class TreeNode { } } - private _node: IPublicModelNode; - - get node(): IPublicModelNode { - return this._node; - } - - readonly tree: Tree; - - constructor(tree: Tree, node: IPublicModelNode, pluginContext: IPublicModelPluginContext) { - this.tree = tree; - this.pluginContext = pluginContext; - this._node = node; - } - setNode(node: IPublicModelNode) { if (this._node !== node) { this._node = node; } } - private _filterResult: FilterResult = { - filterWorking: false, - matchChild: false, - matchSelf: false, - keywords: '', - }; - get filterReult(): FilterResult { return this._filterResult; } setFilterReult(val: FilterResult) { this._filterResult = val; - this.event.emit(EVENT_NAMES.filterResultChanged) + this.event.emit(EVENT_NAMES.filterResultChanged); } } diff --git a/packages/plugin-outline-pane/src/controllers/tree.ts b/packages/plugin-outline-pane/src/controllers/tree.ts index be44db2f6..c0098794c 100644 --- a/packages/plugin-outline-pane/src/controllers/tree.ts +++ b/packages/plugin-outline-pane/src/controllers/tree.ts @@ -1,5 +1,5 @@ import TreeNode from './tree-node'; -import { IPublicModelNode, IPublicModelPluginContext } from '@alilc/lowcode-types'; +import { IPublicModelNode, IPublicModelPluginContext, IPublicTypePropChangeOptions } from '@alilc/lowcode-types'; export class Tree { private treeNodesMap = new Map(); @@ -25,6 +25,14 @@ export class Tree { const treeNode = this.getTreeNodeById(node.id); treeNode?.notifyExpandableChanged(); }); + + doc?.onChangeNodeProp((info: IPublicTypePropChangeOptions) => { + const { node, key } = info; + if (key === '___title___') { + const treeNode = this.getTreeNodeById(node.id); + treeNode?.notifyTitleLabelChanged(); + } + }); } setNodeSelected(nodeId: string): void {