diff --git a/packages/plugin-outline-pane/src/controllers/pane-controller.ts b/packages/plugin-outline-pane/src/controllers/pane-controller.ts index e7c41892c..6a9ae7c40 100644 --- a/packages/plugin-outline-pane/src/controllers/pane-controller.ts +++ b/packages/plugin-outline-pane/src/controllers/pane-controller.ts @@ -593,7 +593,7 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy // at this moment, it is possible that pane is not ready yet, so // put ui related operations to the next loop setTimeout(() => { - tree.setNodeSelected(treeNode.id); + tree.setNodeSelected(treeNode.nodeId); this.scrollToNode(treeNode, null, 4); }, 0); } @@ -615,21 +615,21 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy if (!this._shell) { return undefined; } - return this._shell.querySelector(`.tree-node[data-id="${treeNode.id}"]`)?.getBoundingClientRect(); + return this._shell.querySelector(`.tree-node[data-id="${treeNode.nodeId}"]`)?.getBoundingClientRect(); } private getTreeTitleRect(treeNode: TreeNode): DOMRect | undefined { if (!this._shell) { return undefined; } - return this._shell.querySelector(`.tree-node-title[data-id="${treeNode.id}"]`)?.getBoundingClientRect(); + return this._shell.querySelector(`.tree-node-title[data-id="${treeNode.nodeId}"]`)?.getBoundingClientRect(); } private getTreeSlotsRect(treeNode: TreeNode): DOMRect | undefined { if (!this._shell) { return undefined; } - return this._shell.querySelector(`.tree-node-slots[data-id="${treeNode.id}"]`)?.getBoundingClientRect(); + return this._shell.querySelector(`.tree-node-slots[data-id="${treeNode.nodeId}"]`)?.getBoundingClientRect(); } } diff --git a/packages/plugin-outline-pane/src/controllers/tree-node.ts b/packages/plugin-outline-pane/src/controllers/tree-node.ts index 079ed77d6..92bf374d8 100644 --- a/packages/plugin-outline-pane/src/controllers/tree-node.ts +++ b/packages/plugin-outline-pane/src/controllers/tree-node.ts @@ -4,7 +4,7 @@ import { IPublicModelNode, IPublicTypeDisposable, } from '@alilc/lowcode-types'; -import { isI18nData, isLocationChildrenDetail } from '@alilc/lowcode-utils'; +import { isI18nData, isLocationChildrenDetail, uniqueId } from '@alilc/lowcode-utils'; import EventEmitter from 'events'; import { Tree } from './tree'; import { IOutlinePanelPluginContext } from './tree-master'; @@ -60,7 +60,9 @@ export default class TreeNode { */ private _expanded = false; - get id(): string { + id = uniqueId('treeNode'); + + get nodeId(): string { return this.node.id; } @@ -256,7 +258,7 @@ export default class TreeNode { return false; } return ( - isLocationChildrenDetail(loc.detail) && loc.detail.focus?.type === 'node' && loc.detail?.focus?.node.id === this.id + isLocationChildrenDetail(loc.detail) && loc.detail.focus?.type === 'node' && loc.detail?.focus?.node.id === this.nodeId ); } @@ -278,7 +280,7 @@ export default class TreeNode { if (!loc) { return false; } - return loc.target?.id === this.id; + return loc.target?.id === this.nodeId; } setTitleLabel(label: string) { diff --git a/packages/plugin-outline-pane/src/controllers/tree.ts b/packages/plugin-outline-pane/src/controllers/tree.ts index ab0d64b0f..463c7919f 100644 --- a/packages/plugin-outline-pane/src/controllers/tree.ts +++ b/packages/plugin-outline-pane/src/controllers/tree.ts @@ -45,6 +45,10 @@ export class Tree { const treeNode = this.getTreeNodeById(node.id); treeNode?.setHidden(!visible); }); + + doc?.onImportSchema(() => { + this.treeNodesMap = new Map(); + }); } setNodeSelected(nodeId: string): void { diff --git a/packages/plugin-outline-pane/src/views/tree-branches.tsx b/packages/plugin-outline-pane/src/views/tree-branches.tsx index 2e281071b..41bd69481 100644 --- a/packages/plugin-outline-pane/src/views/tree-branches.tsx +++ b/packages/plugin-outline-pane/src/views/tree-branches.tsx @@ -169,12 +169,12 @@ class TreeNodeChildren extends PureComponent<{ children.push(insertion); } } - groupContents.push(); + groupContents.push(); } else { if (index === dropIndex) { children.push(insertion); } - children.push(); + children.push(); } }); endGroup(); @@ -201,14 +201,14 @@ class TreeNodeSlots extends PureComponent<{ className={classNames('tree-node-slots', { 'insertion-at-slots': treeNode.dropDetail?.focus?.type === 'slots', })} - data-id={treeNode.id} + data-id={treeNode.nodeId} >
{/* @ts-ignore */} </div> {treeNode.slots.map(tnode => ( - <TreeNodeView key={tnode.id} treeNode={tnode} /> + <TreeNodeView key={tnode.nodeId} treeNode={tnode} /> ))} </div> ); diff --git a/packages/plugin-outline-pane/src/views/tree-node.tsx b/packages/plugin-outline-pane/src/views/tree-node.tsx index 882fe15b1..be6e6ae2c 100644 --- a/packages/plugin-outline-pane/src/views/tree-node.tsx +++ b/packages/plugin-outline-pane/src/views/tree-node.tsx @@ -225,7 +225,7 @@ export default class TreeNodeView extends PureComponent<{ return ( <div className={className} - data-id={treeNode.id} + data-id={treeNode.nodeId} > <TreeTitle treeNode={treeNode} diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx index 6f35c6a61..6686ea3cf 100644 --- a/packages/plugin-outline-pane/src/views/tree-title.tsx +++ b/packages/plugin-outline-pane/src/views/tree-title.tsx @@ -135,7 +135,7 @@ export default class TreeTitle extends PureComponent<{ <div className={classNames('tree-node-title', { editing })} style={style} - data-id={treeNode.id} + data-id={treeNode.nodeId} onClick={() => { if (isModal) { if (this.state.visible) { diff --git a/packages/plugin-outline-pane/src/views/tree.tsx b/packages/plugin-outline-pane/src/views/tree.tsx index 4bc502886..675f70c2b 100644 --- a/packages/plugin-outline-pane/src/views/tree.tsx +++ b/packages/plugin-outline-pane/src/views/tree.tsx @@ -91,7 +91,7 @@ export default class TreeView extends PureComponent<{ private onDoubleClick = (e: ReactMouseEvent) => { e.preventDefault(); const treeNode = this.getTreeNodeFromEvent(e); - if (treeNode?.id === this.state.root?.id) { + if (treeNode?.nodeId === this.state.root?.nodeId) { return; } if (!treeNode?.expanded) { @@ -188,6 +188,11 @@ export default class TreeView extends PureComponent<{ root: tree.root, }); }); + doc?.onImportSchema(() => { + this.setState({ + root: tree.root, + }); + }); } render() {