diff --git a/packages/designer/src/document/document-model.ts b/packages/designer/src/document/document-model.ts index 2731aa5e6..63b1a45dd 100644 --- a/packages/designer/src/document/document-model.ts +++ b/packages/designer/src/document/document-model.ts @@ -342,14 +342,6 @@ export class DocumentModel implements IDocumentModel { } onChangeNodeVisible(fn: (node: INode, visible: boolean) => void): IPublicTypeDisposable { - this.designer.editor?.eventBus.on(EDITOR_EVENT.NODE_CHILDREN_CHANGE, fn); - - return () => { - this.designer.editor?.eventBus.off(EDITOR_EVENT.NODE_CHILDREN_CHANGE, fn); - }; - } - - onChangeNodeChildren(fn: (info: IPublicTypeOnChangeOptions) => void): IPublicTypeDisposable { this.designer.editor?.eventBus.on(EDITOR_EVENT.NODE_VISIBLE_CHANGE, fn); return () => { @@ -357,6 +349,14 @@ export class DocumentModel implements IDocumentModel { }; } + onChangeNodeChildren(fn: (info: IPublicTypeOnChangeOptions) => void): IPublicTypeDisposable { + this.designer.editor?.eventBus.on(EDITOR_EVENT.NODE_CHILDREN_CHANGE, fn); + + return () => { + this.designer.editor?.eventBus.off(EDITOR_EVENT.NODE_CHILDREN_CHANGE, fn); + }; + } + addWillPurge(node: INode) { this.willPurgeSpace.push(node); } diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index d8b371ddf..df4e30c6f 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -98,11 +98,11 @@ export interface IBaseNode(stage: IPublicEnumTransformStage, options?: any): T; + export(stage: IPublicEnumTransformStage, options?: any): T; emitPropChange(val: IPublicTypePropChangeOptions): void; - import(data: IPublicTypeNodeSchema, checkId?: boolean): void; + import(data: Schema, checkId?: boolean): void; internalSetSlotFor(slotFor: Prop | null | undefined): void; @@ -394,7 +394,10 @@ export class Node editor?.eventBus.emit(EDITOR_EVENT.NODE_VISIBLE_CHANGE, this, visible); }); this.onChildrenChange((info?: { type: string; node: INode }) => { - editor?.eventBus.emit(EDITOR_EVENT.NODE_VISIBLE_CHANGE, info); + editor?.eventBus.emit(EDITOR_EVENT.NODE_CHILDREN_CHANGE, { + type: info?.type, + node: this, + }); }); } diff --git a/packages/plugin-outline-pane/src/controllers/tree.ts b/packages/plugin-outline-pane/src/controllers/tree.ts index 2256d45d9..be44db2f6 100644 --- a/packages/plugin-outline-pane/src/controllers/tree.ts +++ b/packages/plugin-outline-pane/src/controllers/tree.ts @@ -20,23 +20,10 @@ export class Tree { const doc = this.pluginContext.project.currentDocument; this.id = doc?.id; - doc?.onMountNode((payload: {node: IPublicModelNode }) => { - const { node } = payload; - const parentNode = node.parent; - if (!parentNode) { - return; - } - const parentTreeNode = this.getTreeNodeById(parentNode.id); - parentTreeNode?.notifyExpandableChanged(); - }); - - doc?.onRemoveNode((node: IPublicModelNode) => { - const parentNode = node.parent; - if (!parentNode) { - return; - } - const parentTreeNode = this.getTreeNodeById(parentNode.id); - parentTreeNode?.notifyExpandableChanged(); + doc?.onChangeNodeChildren((info: {node: IPublicModelNode }) => { + const { node } = info; + const treeNode = this.getTreeNodeById(node.id); + treeNode?.notifyExpandableChanged(); }); } diff --git a/packages/plugin-outline-pane/src/views/tree-branches.tsx b/packages/plugin-outline-pane/src/views/tree-branches.tsx index abbc5a840..210fe0af8 100644 --- a/packages/plugin-outline-pane/src/views/tree-branches.tsx +++ b/packages/plugin-outline-pane/src/views/tree-branches.tsx @@ -9,6 +9,7 @@ export default class TreeBranches extends PureComponent<{ isModal?: boolean; pluginContext: IPublicModelPluginContext; expanded: boolean; + treeChildren: TreeNode[] | null; }> { state = { filterWorking: false, @@ -56,13 +57,13 @@ export default class TreeBranches extends PureComponent<{ treeNode={treeNode} isModal={isModal || false} pluginContext={this.props.pluginContext} + treeChildren={this.props.treeChildren} /> ); } } - interface ITreeNodeChildrenState { filterWorking: boolean; matchSelf: boolean; @@ -73,6 +74,7 @@ class TreeNodeChildren extends PureComponent<{ treeNode: TreeNode; isModal?: boolean; pluginContext: IPublicModelPluginContext; + treeChildren: TreeNode[] | null; }, ITreeNodeChildrenState> { state: ITreeNodeChildrenState = { filterWorking: false, @@ -115,7 +117,7 @@ class TreeNodeChildren extends PureComponent<{ } render() { - const { treeNode, isModal } = this.props; + const { isModal } = this.props; const children: any = []; let groupContents: any[] = []; let currentGrp: IPublicModelExclusiveGroup; @@ -150,7 +152,7 @@ class TreeNodeChildren extends PureComponent<{ })} /> ); - treeNode.children?.forEach((child, index) => { + this.props.treeChildren?.forEach((child, index) => { const childIsModal = child.node.componentMeta?.isModal || false; if (isModal != childIsModal) { return; @@ -178,7 +180,7 @@ class TreeNodeChildren extends PureComponent<{ } }); endGroup(); - const length = treeNode.children?.length || 0; + const length = this.props.treeChildren?.length || 0; if (dropIndex != null && dropIndex >= length) { children.push(insertion); } diff --git a/packages/plugin-outline-pane/src/views/tree-node.tsx b/packages/plugin-outline-pane/src/views/tree-node.tsx index 1531eaf63..712dc20fa 100644 --- a/packages/plugin-outline-pane/src/views/tree-node.tsx +++ b/packages/plugin-outline-pane/src/views/tree-node.tsx @@ -4,7 +4,7 @@ import TreeNode from '../controllers/tree-node'; import TreeTitle from './tree-title'; import TreeBranches from './tree-branches'; import { IconEyeClose } from '../icons/eye-close'; -import { IPublicModelPluginContext, IPublicModelModalNodesManager, IPublicModelDocumentModel, IPublicTypeDisposable } from '@alilc/lowcode-types'; +import { IPublicModelPluginContext, IPublicModelModalNodesManager, IPublicTypeDisposable } from '@alilc/lowcode-types'; class ModalTreeNodeView extends PureComponent<{ treeNode: TreeNode; @@ -49,6 +49,7 @@ class ModalTreeNodeView extends PureComponent<{
{ - state = { + state: { + expanded: boolean; + selected: boolean; + hidden: boolean; + locked: boolean; + detecting: boolean; + isRoot: boolean; + highlight: boolean; + dropping: boolean; + conditionFlow: boolean; + expandable: boolean; + treeChildren: TreeNode[] | null; + } = { expanded: false, selected: false, hidden: false, @@ -76,6 +89,7 @@ export default class TreeNodeView extends PureComponent<{ dropping: false, conditionFlow: false, expandable: false, + treeChildren: [], }; eventOffCallbacks: Array = []; @@ -95,6 +109,7 @@ export default class TreeNodeView extends PureComponent<{ conditionFlow: treeNode.node.conditionGroup != null, highlight: treeNode.isFocusingNode(), expandable: treeNode.expandable, + treeChildren: treeNode.children, }; } @@ -114,11 +129,13 @@ export default class TreeNodeView extends PureComponent<{ this.setState({ locked }); }); treeNode.onExpandableChanged((expandable: boolean) => { - this.setState({ expandable }); + this.setState({ + expandable, + treeChildren: treeNode.children, + }); }); - this.eventOffCallbacks.push( - doc?.onDropLocationChanged((document: IPublicModelDocumentModel) => { + doc?.onDropLocationChanged(() => { this.setState({ dropping: treeNode.dropDetail?.index != null, }); @@ -210,6 +227,7 @@ export default class TreeNodeView extends PureComponent<{ isModal={false} expanded={this.state.expanded} pluginContext={this.props.pluginContext} + treeChildren={this.state.treeChildren} />
); diff --git a/packages/shell/src/model/document-model.ts b/packages/shell/src/model/document-model.ts index b1015b8de..b8698ebf7 100644 --- a/packages/shell/src/model/document-model.ts +++ b/packages/shell/src/model/document-model.ts @@ -300,7 +300,7 @@ export class DocumentModel implements IPublicModelDocumentModel { * @param fn */ onChangeNodeChildren(fn: (info: IPublicTypeOnChangeOptions) => void): IPublicTypeDisposable { - return this[documentSymbol].onChangeNodeChildren((info?: IPublicTypeOnChangeOptions) => { + return this[documentSymbol].onChangeNodeChildren((info?: IPublicTypeOnChangeOptions) => { if (!info) { return; }