From 5b1423068e5630975cba21460a58b46702810dee Mon Sep 17 00:00:00 2001 From: liujuping Date: Wed, 26 Apr 2023 10:20:52 +0800 Subject: [PATCH] feat(outline-pane): export OutlinePaneContext --- .../src/controllers/tree-master.ts | 3 +- packages/plugin-outline-pane/src/index.tsx | 61 +++++++++++-------- .../plugin-outline-pane/src/views/filter.tsx | 5 -- .../plugin-outline-pane/src/views/pane.tsx | 20 +++--- .../plugin-outline-pane/src/views/style.less | 7 ++- .../renderer-core/tests/hoc/leaf.test.tsx | 7 --- .../tests/renderer/base.test.tsx | 1 - .../tests/renderer/renderer.test.tsx | 2 - 8 files changed, 50 insertions(+), 56 deletions(-) diff --git a/packages/plugin-outline-pane/src/controllers/tree-master.ts b/packages/plugin-outline-pane/src/controllers/tree-master.ts index a6852803b..cb6298048 100644 --- a/packages/plugin-outline-pane/src/controllers/tree-master.ts +++ b/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; } diff --git a/packages/plugin-outline-pane/src/index.tsx b/packages/plugin-outline-pane/src/index.tsx index 1ea53b2f0..95b219a4b 100644 --- a/packages/plugin-outline-pane/src/index.tsx +++ b/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 ( + + ); +} + 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 ( - - ); - }, + 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 ( - - ); + content: OutlinePaneContext, + contentProps: { + paneName: BackupPaneName, + treeMaster, }, }); diff --git a/packages/plugin-outline-pane/src/views/filter.tsx b/packages/plugin-outline-pane/src/views/filter.tsx index 908f83d56..8fd18ed25 100644 --- a/packages/plugin-outline-pane/src/views/filter.tsx +++ b/packages/plugin-outline-pane/src/views/filter.tsx @@ -51,7 +51,6 @@ export default class Filter extends PureComponent<{ return (
- {/* @ts-ignore */} - {/* @ts-ignore */} )} > - {/* @ts-ignore */} {this.props.tree.pluginContext.intlNode('Check All')} - {/* @ts-ignore */} - {/* @ts-ignore */} { @@ -26,6 +26,11 @@ 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() { @@ -33,14 +38,6 @@ export class Pane extends PureComponent<{ 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; @@ -48,7 +45,6 @@ export class Pane extends PureComponent<{ return (

- {/* @ts-ignore */} - -

this.controller.mount(shell)} className="lc-outline-tree-container"> + { !this.props.hideFilter && } +
this.controller.mount(shell)} className={`lc-outline-tree-container ${ this.props.hideFilter ? 'lc-hidden-outline-filter' : '' }`}>
diff --git a/packages/plugin-outline-pane/src/views/style.less b/packages/plugin-outline-pane/src/views/style.less index cd133932b..f343fba17 100644 --- a/packages/plugin-outline-pane/src/views/style.less +++ b/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; diff --git a/packages/renderer-core/tests/hoc/leaf.test.tsx b/packages/renderer-core/tests/hoc/leaf.test.tsx index 94d50f87a..d4a65e578 100644 --- a/packages/renderer-core/tests/hoc/leaf.test.tsx +++ b/packages/renderer-core/tests/hoc/leaf.test.tsx @@ -83,7 +83,6 @@ beforeEach(() => { }); component = renderer.create( - // @ts-ignore
@@ -238,7 +237,6 @@ describe('mini unit render', () => { nodeMap.set(textSchema.id, TextNode); component = renderer.create( - // @ts-ignore @@ -285,7 +283,6 @@ describe('mini unit render', () => { nodeMap.set(textSchema.id, TextNode); renderer.create( - // @ts-ignore
@@ -309,7 +306,6 @@ describe('mini unit render', () => { }); renderer.create( - // @ts-ignore
@@ -388,7 +384,6 @@ describe('mini unit render', () => { }; const component = renderer.create( - // @ts-ignore @@ -428,7 +423,6 @@ describe('mini unit render', () => { nodeMap.set(miniRenderSchema.id, MiniRenderDivNode); component = renderer.create( - // @ts-ignore @@ -491,7 +485,6 @@ describe('onVisibleChange', () => { describe('children', () => { it('this.props.children is array', () => { const component = renderer.create( - // @ts-ignore
diff --git a/packages/renderer-core/tests/renderer/base.test.tsx b/packages/renderer-core/tests/renderer/base.test.tsx index 63c5cfbb2..3faa2bcf4 100644 --- a/packages/renderer-core/tests/renderer/base.test.tsx +++ b/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 { return new Promise((resolve, reject) => { const component = renderer.create( - // @ts-ignore { describe('Base Render', () => { it('renderComp', () => { const content = ( - // @ts-ignore