feat(outline-pane): export OutlinePaneContext, add null option to setPluginContext and hideFilter option to Pane

packages/plugin-outline-pane/src/controllers/tree-master.ts

@@ -40,6 +40,7 @@ export class TreeMaster {
     const { workspace } = this.pluginContext;
     this.initEvent();
     if (pluginContext.registerLevel === IPublicEnumPluginRegisterLevel.Workspace) {
+      this.setPluginContext(workspace.window?.currentEditorView);
       workspace.onWindowRendererReady(() => {
         this.setPluginContext(workspace.window?.currentEditorView);
         let dispose: IPublicTypeDisposable | undefined;
@@ -60,7 +61,7 @@ export class TreeMaster {
     }
   }
 
-  private setPluginContext(pluginContext: IPublicModelPluginContext | undefined) {
+  private setPluginContext(pluginContext: IPublicModelPluginContext | undefined | null) {
     if (!pluginContext) {
       return;
     }

packages/plugin-outline-pane/src/index.tsx

@@ -6,6 +6,34 @@ import { TreeMaster } from './controllers/tree-master';
 import { PaneController } from './controllers/pane-controller';
 import { useState } from 'react';
 
+export function OutlinePaneContext(props: {
+  treeMaster?: TreeMaster;
+
+  pluginContext: IPublicModelPluginContext;
+
+  options: any;
+
+  paneName: string;
+
+  hideFilter?: boolean;
+}) {
+  const treeMaster = props.treeMaster || new TreeMaster(props.pluginContext, props.options);
+  const [masterPaneController, setMasterPaneController] = useState(new PaneController(props.paneName || MasterPaneName, treeMaster));
+  treeMaster.onPluginContextChange(() => {
+    setMasterPaneController(new PaneController(props.paneName || MasterPaneName, treeMaster));
+  });
+
+  return (
+    <Pane
+      treeMaster={treeMaster}
+      controller={masterPaneController}
+      key={masterPaneController.id}
+      hideFilter={props.hideFilter}
+      {...props}
+    />
+  );
+}
+
 export const OutlinePlugin = (ctx: IPublicModelPluginContext, options: any) => {
   const { skeleton, config, canvas, project } = ctx;
 
@@ -19,7 +47,6 @@ export const OutlinePlugin = (ctx: IPublicModelPluginContext, options: any) => {
     backupPane: false,
   };
   const treeMaster = new TreeMaster(ctx, options);
-  let backupPaneController: PaneController | null = null;
   return {
     async init() {
       skeleton.add({
@@ -33,22 +60,7 @@ export const OutlinePlugin = (ctx: IPublicModelPluginContext, options: any) => {
             icon: IconOutline,
             description: treeMaster.pluginContext.intlNode('Outline Tree'),
           },
-          content: function Context(props: any) {
-            const [masterPaneController, setMasterPaneController] = useState(new PaneController(MasterPaneName, treeMaster));
-            treeMaster.onPluginContextChange(() => {
-              setMasterPaneController(new PaneController(MasterPaneName, treeMaster));
-            });
-
-            return (
-              <Pane
-                config={config}
-                treeMaster={treeMaster}
-                controller={masterPaneController}
-                key={masterPaneController.id}
-                {...props}
-              />
-            );
-          },
+          content: OutlinePaneContext,
         },
         panelProps: {
           area: isInFloatArea ? 'leftFloatArea' : 'leftFixedArea',
@@ -57,6 +69,8 @@ export const OutlinePlugin = (ctx: IPublicModelPluginContext, options: any) => {
         },
         contentProps: {
           treeTitleExtra: config.get('treeTitleExtra'),
+          treeMaster,
+          paneName: MasterPaneName,
         },
       });
 
@@ -67,15 +81,10 @@ export const OutlinePlugin = (ctx: IPublicModelPluginContext, options: any) => {
         props: {
           hiddenWhenInit: true,
         },
-        content: (props: any) => {
-          backupPaneController = new PaneController(BackupPaneName, treeMaster);
-          return (
-            <Pane
-              treeMaster={treeMaster}
-              controller={backupPaneController}
-              {...props}
-            />
-          );
+        content: OutlinePaneContext,
+        contentProps: {
+          paneName: BackupPaneName,
+          treeMaster,
         },
       });
 

packages/plugin-outline-pane/src/views/filter.tsx

@@ -51,7 +51,6 @@ export default class Filter extends PureComponent<{
 
     return (
       <div className="lc-outline-filter">
-        {/* @ts-ignore */}
         <Search
           hasClear
           shape="simple"
@@ -60,7 +59,6 @@ export default class Filter extends PureComponent<{
           value={keywords}
           onChange={this.handleSearchChange}
         />
-        {/* @ts-ignore */}
         <Balloon
           v2
           align="br"
@@ -72,17 +70,14 @@ export default class Filter extends PureComponent<{
             </div>
           )}
         >
-          {/* @ts-ignore */}
           <Checkbox
             checked={checkAll}
             indeterminate={indeterminate}
             onChange={this.handleCheckAll}
           >
             {this.props.tree.pluginContext.intlNode('Check All')}
           </Checkbox>
-          {/* @ts-ignore */}
           <Divider />
-          {/* @ts-ignore */}
           <Checkbox.Group
             value={filterOps}
             direction="ver"

packages/plugin-outline-pane/src/views/pane.tsx

@@ -9,9 +9,9 @@ import { Tree } from '../controllers/tree';
 import { IPublicTypeDisposable } from '@alilc/lowcode-types';
 
 export class Pane extends PureComponent<{
-  config: any;
   treeMaster: TreeMaster;
   controller: PaneController;
+  hideFilter?: boolean;
 }, {
   tree: Tree | null;
 }> {
@@ -26,29 +26,25 @@ export class Pane extends PureComponent<{
     this.state = {
       tree: treeMaster.currentTree,
     };
+    this.dispose = this.props.treeMaster.pluginContext?.project?.onSimulatorRendererReady(() => {
+      this.setState({
+        tree: this.props.treeMaster.currentTree,
+      });
+    });
   }
 
   componentWillUnmount() {
     this.controller.purge();
     this.dispose && this.dispose();
   }
 
-  componentDidMount() {
-    this.dispose = this.props.treeMaster.pluginContext.project.onSimulatorRendererReady(() => {
-      this.setState({
-        tree: this.props.treeMaster.currentTree,
-      });
-    });
-  }
-
   render() {
     const tree = this.state.tree;
 
     if (!tree) {
       return (
         <div className="lc-outline-pane">
           <p className="lc-outline-notice">
-            {/* @ts-ignore */}
             <Loading
               style={{
                 display: 'block',
@@ -63,8 +59,8 @@ export class Pane extends PureComponent<{
 
     return (
       <div className="lc-outline-pane">
-        <Filter tree={tree} />
-        <div ref={(shell) => this.controller.mount(shell)} className="lc-outline-tree-container">
+        { !this.props.hideFilter && <Filter tree={tree} /> }
+        <div ref={(shell) => this.controller.mount(shell)} className={`lc-outline-tree-container ${ this.props.hideFilter ? 'lc-hidden-outline-filter' : '' }`}>
           <TreeView key={tree.id} tree={tree} />
         </div>
       </div>

packages/plugin-outline-pane/src/views/style.less

@@ -14,10 +14,14 @@
     overflow: auto;
   }
 
+  > .lc-outline-tree-container.lc-hidden-outline-filter {
+    top: 0;
+  }
+
   > .lc-outline-filter {
     padding: 12px 16px;
     display: flex;
-    align-items: center;
+    align-items: stretch;
     justify-content: right;
 
     .lc-outline-filter-search-input {
@@ -27,7 +31,6 @@
     .lc-outline-filter-icon {
       background: #ebecf0;
       border: 1px solid #c4c6cf;
-      height: 28px;
       display: flex;
       align-items: center;
       border-radius: 0 2px 2px 0;

packages/renderer-core/tests/hoc/leaf.test.tsx

@@ -83,7 +83,6 @@ beforeEach(() => {
   });
 
   component = renderer.create(
-    // @ts-ignore
     <Div _leaf={DivNode}>
       <Text _leaf={TextNode} content="content"></Text>
     </Div>
@@ -238,7 +237,6 @@ describe('mini unit render', () => {
     nodeMap.set(textSchema.id, TextNode);
 
     component = renderer.create(
-      // @ts-ignore
       <MiniRenderDiv _leaf={MiniRenderDivNode}>
         <Text _leaf={TextNode} content="content"></Text>
       </MiniRenderDiv>
@@ -285,7 +283,6 @@ describe('mini unit render', () => {
     nodeMap.set(textSchema.id, TextNode);
 
     renderer.create(
-      // @ts-ignore
       <div>
         <Text _leaf={TextNode} content="content"></Text>
       </div>
@@ -309,7 +306,6 @@ describe('mini unit render', () => {
     });
 
     renderer.create(
-      // @ts-ignore
       <div>
         <Text _leaf={TextNode} content="content"></Text>
       </div>
@@ -388,7 +384,6 @@ describe('mini unit render', () => {
     };
 
     const component = renderer.create(
-      // @ts-ignore
       <MiniRenderDiv _leaf={MiniRenderDivNode}>
         <Text _leaf={TextNode} content="content"></Text>
       </MiniRenderDiv>
@@ -428,7 +423,6 @@ describe('mini unit render', () => {
     nodeMap.set(miniRenderSchema.id, MiniRenderDivNode);
 
     component = renderer.create(
-      // @ts-ignore
       <MiniRenderDiv _leaf={MiniRenderDivNode}>
         <Text _leaf={TextNode} content="content"></Text>
       </MiniRenderDiv>
@@ -491,7 +485,6 @@ describe('onVisibleChange', () => {
 describe('children', () => {
   it('this.props.children is array', () => {
     const component = renderer.create(
-      // @ts-ignore
       <Div _leaf={DivNode}>
         <Text _leaf={TextNode} content="content"></Text>
         <Text _leaf={TextNode} content="content"></Text>

packages/renderer-core/tests/renderer/base.test.tsx

@@ -79,7 +79,6 @@ describe('Base Render methods', () => {
     // const originalUtils = jest.requireActual('../../src/utils');
     // mockParseExpression.mockImplementation(originalUtils.parseExpression);
     const component = TestRenderer.create(
-      // @ts-ignore
       <RendererClass
         __schema={mockSchema}
         components={components as any}

packages/renderer-core/tests/renderer/renderer.test.tsx

@@ -13,7 +13,6 @@ function getComp(schema, comp = null, others = {}): Promise<{
 }> {
   return new Promise((resolve, reject) => {
     const component = renderer.create(
-      // @ts-ignore
       <Renderer
         schema={schema}
         components={components as any}
@@ -48,7 +47,6 @@ afterEach(() => {
 describe('Base Render', () => {
   it('renderComp', () => {
     const content = (
-      // @ts-ignore
       <Renderer
         schema={schema as any}
         components={components as any}