feat: support online tree title extra

alibaba · Dec 13, 2022 · 778ba32 · 778ba32
1 parent d9e1203
commit 778ba32
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 0 deletions.
diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts
@@ -172,6 +172,9 @@ engineConfig.set('isOpenSource', isOpenSource);
             keepVisibleWhileDragging: true,
             ...engineConfig.get('defaultOutlinePaneProps'),
           },
+          contentProps: {
+            treeTitleExtra: engineConfig.get('treeTitleExtra'),
+          },
         });
         skeleton.add({
           area: 'rightArea',

diff --git a/packages/plugin-outline-pane/src/helper/tree-title-extra.ts b/packages/plugin-outline-pane/src/helper/tree-title-extra.ts
@@ -0,0 +1,20 @@
+import { globalContext } from '@alilc/lowcode-editor-core';
+import { ReactElement } from 'react';
+
+const TREE_TITLE_EXTRA_KEY = 'TREE_TITLE_EXTRA_KEY';
+
+export const registerTreeTitleExtra = (extra: ReactElement) => {
+  if (extra && !globalContext.has(TREE_TITLE_EXTRA_KEY)) {
+    globalContext.register(extra, TREE_TITLE_EXTRA_KEY);
+  }
+};
+
+export const getTreeTitleExtra = () => {
+  try {
+    return globalContext.get(TREE_TITLE_EXTRA_KEY);
+  } catch (e) {
+    // console.error('getTreeTitleExtra Error', e);
+  }
+
+  return null;
+};
diff --git a/packages/plugin-outline-pane/src/views/pane.tsx b/packages/plugin-outline-pane/src/views/pane.tsx
@@ -6,6 +6,7 @@ import TreeView from './tree';
 import './style.less';
 import { IEditor } from '@alilc/lowcode-types';
 import Filter from './filter';
+import { registerTreeTitleExtra } from '../helper/tree-title-extra';
 
 @observer
 export class OutlinePane extends Component<{ config: any; editor: IEditor }> {
@@ -15,6 +16,10 @@ export class OutlinePane extends Component<{ config: any; editor: IEditor }> {
     this.main.purge();
   }
 
+  componentDidMount() {
+    registerTreeTitleExtra(this.props?.config?.contentProps?.treeTitleExtra);
+  }
+
   render() {
     const tree = this.main.currentTree;
 

diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx
@@ -13,6 +13,7 @@ import { IconLoop } from '../icons/loop';
 import { IconRadioActive } from '../icons/radio-active';
 import { IconRadio } from '../icons/radio';
 import { IconLock, IconUnlock } from '../icons';
+import { getTreeTitleExtra } from '../helper/tree-title-extra';
 
 
 function emitOutlineEvent(type: string, treeNode: TreeNode, rest?: Record<string, unknown>) {
@@ -97,6 +98,7 @@ export default class TreeTitle extends Component<{
       };
     }
     const { filterWorking, matchSelf, keywords } = treeNode.filterReult;
+    const Extra = getTreeTitleExtra();
 
     return (
       <div
@@ -153,6 +155,7 @@ export default class TreeTitle extends Component<{
                 match={filterWorking && matchSelf}
                 keywords={keywords}
               />
+              {Extra && <Extra node={treeNode?.node} />}
               {node.slotFor && (
                 <a className="tree-node-tag slot">
                   {/* todo: click redirect to prop */}