From 778ba32a14d47ba8e57b78de4f815246484e6a6c Mon Sep 17 00:00:00 2001
From: huoteng <huoteng_2021@qq.com>
Date: Tue, 13 Dec 2022 18:58:51 +0800
Subject: [PATCH] feat: support online tree title extra

---
 packages/engine/src/engine-core.ts            |  3 +++
 .../src/helper/tree-title-extra.ts            | 20 +++++++++++++++++++
 .../plugin-outline-pane/src/views/pane.tsx    |  5 +++++
 .../src/views/tree-title.tsx                  |  3 +++
 4 files changed, 31 insertions(+)
 create mode 100644 packages/plugin-outline-pane/src/helper/tree-title-extra.ts

diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts
index acc961c16..7775c4c64 100644
--- 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
new file mode 100644
index 000000000..b1bcbf6ed
--- /dev/null
+++ 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
index a57bfad92..a86eaa383 100644
--- 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
index 3398ffc63..a17440465 100644
--- 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 */}