From ba3adcfb891f92aca5c341571e9048fca30838cb Mon Sep 17 00:00:00 2001 From: JackLian Date: Mon, 26 Dec 2022 17:46:41 +0800 Subject: [PATCH] fix: expandable state not changed when node added/removed --- docs/docs/api/project.md | 4 ++-- docs/package.json | 2 +- docs/scripts/sync-oss.js | 1 - .../src/controllers/tree-node.ts | 10 ++++++++- .../src/controllers/tree.ts | 22 ++++++++++++++++++- .../src/views/tree-node.tsx | 7 ++++-- scripts/sync-oss.js | 1 - 7 files changed, 38 insertions(+), 9 deletions(-) diff --git a/docs/docs/api/project.md b/docs/docs/api/project.md index 0a22cd920..15fb3cb7e 100644 --- a/docs/docs/api/project.md +++ b/docs/docs/api/project.md @@ -5,7 +5,7 @@ sidebar_position: 3 ## 模块简介 引擎编排模块中包含多种模型，包括： -- [文档模型 DocumentModel）](./model/document-model) +- [文档模型 DocumentModel](./model/document-model) - [节点模型 Node](./model/node) - [节点孩子模型 NodeChildren](./model/node-children) - [属性模型 Prop](./model/prop) @@ -18,7 +18,7 @@ sidebar_position: 3 - [历史操作 History）](./model/history) - [画布节点选中 Selection）](./model/selection) - [画布节点悬停 Detecting）](./model/detecting) -- [模态节点管理器 ModalNodesManager](./model/modal_nodes_manager) +- [模态节点管理器 ModalNodesManager](./model/modal-nodes-manager) 整个模型系统，以 project API 为入口，所有模型实例均需要通过 project 来获得，比如 project.currentDocument 来获取当前的文档模型，project.currentDocument.nodesMap 来获取当前文档模型里所有的节点列表。 diff --git a/docs/package.json b/docs/package.json index b5a6669fe..62747d46d 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-engine-docs", - "version": "1.0.10", + "version": "1.0.11", "description": "低代码引擎版本化文档", "license": "MIT", "files": [ diff --git a/docs/scripts/sync-oss.js b/docs/scripts/sync-oss.js index 8ab9402e8..9518a8ea7 100644 --- a/docs/scripts/sync-oss.js +++ b/docs/scripts/sync-oss.js @@ -4,7 +4,6 @@ const package = require('../package.json'); const { version, name } = package; const options = { method: 'PUT', - // 暂时使用 日常环境的 uipaas-node，上线后可切换成线上环境 https://uipaas-node.alibaba-inc.com hostname: 'uipaas-node.alibaba-inc.com', path: '/staticAssets/cdn/packages', headers: { diff --git a/packages/plugin-outline-pane/src/controllers/tree-node.ts b/packages/plugin-outline-pane/src/controllers/tree-node.ts index b6063e724..32c21ede2 100644 --- a/packages/plugin-outline-pane/src/controllers/tree-node.ts +++ b/packages/plugin-outline-pane/src/controllers/tree-node.ts @@ -28,6 +28,7 @@ export default class TreeNode { onHiddenChanged: (hidden: boolean) => void; onLockedChanged: (locked: boolean) => void; onTitleLabelChanged: (treeNode: TreeNode) => void; + onExpandableChanged: (expandable: boolean) => void; get id(): string { return this.node.id; @@ -41,6 +42,13 @@ export default class TreeNode { return this.hasChildren() || this.hasSlots() || this.dropDetail?.index != null; } + /** + * 触发 onExpandableChanged 回调 + */ + notifyExpandableChanged(): void { + this.onExpandableChanged && this.onExpandableChanged(this.expandable); + } + /** * 插入"线"位置信息 */ @@ -96,7 +104,7 @@ export default class TreeNode { get detecting() { const doc = this.pluginContext.project.currentDocument; - return doc?.isDetectingNode(this.node); + return !!(doc?.isDetectingNode(this.node)); } get hidden(): boolean { diff --git a/packages/plugin-outline-pane/src/controllers/tree.ts b/packages/plugin-outline-pane/src/controllers/tree.ts index a4106088b..2256d45d9 100644 --- a/packages/plugin-outline-pane/src/controllers/tree.ts +++ b/packages/plugin-outline-pane/src/controllers/tree.ts @@ -17,7 +17,27 @@ export class Tree { constructor(pluginContext: IPublicModelPluginContext) { this.pluginContext = pluginContext; - this.id = this.pluginContext.project.currentDocument?.id; + 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(); + }); } setNodeSelected(nodeId: string): void { diff --git a/packages/plugin-outline-pane/src/views/tree-node.tsx b/packages/plugin-outline-pane/src/views/tree-node.tsx index 091530706..a6dc03f08 100644 --- a/packages/plugin-outline-pane/src/views/tree-node.tsx +++ b/packages/plugin-outline-pane/src/views/tree-node.tsx @@ -32,7 +32,7 @@ class ModalTreeNodeView extends Component<{ const { project } = this.pluginContext; const rootNode = project.currentDocument?.root; const rootTreeNode = treeNode.tree.getTreeNode(rootNode!); - const expanded = rootTreeNode.expanded; + const { expanded } = rootTreeNode; const hasVisibleModalNode = !!this.modalNodesManager?.getVisibleModalNode(); return ( @@ -100,7 +100,7 @@ export default class TreeNodeView extends Component<{ componentDidMount() { const { treeNode, pluginContext } = this.props; - const { event, project } = pluginContext; + const { project } = pluginContext; const doc = project.currentDocument; @@ -113,6 +113,9 @@ export default class TreeNodeView extends Component<{ treeNode.onLockedChanged = (locked: boolean) => { this.setState({ locked }); }; + treeNode.onExpandableChanged = (expandable: boolean) => { + this.setState({ expandable }); + }; this.eventOffCallbacks.push( doc?.onDropLocationChanged((document: IPublicModelDocumentModel) => { diff --git a/scripts/sync-oss.js b/scripts/sync-oss.js index 4b67bdca9..ba4a77be3 100644 --- a/scripts/sync-oss.js +++ b/scripts/sync-oss.js @@ -4,7 +4,6 @@ const package = require('../packages/engine/package.json'); const { version, name } = package; const options = { method: 'PUT', - // 暂时使用 日常环境的 uipaas-node，上线后可切换成线上环境 https://uipaas-node.alibaba-inc.com hostname: 'uipaas-node.alibaba-inc.com', path: '/staticAssets/cdn/packages', headers: {