From c156bad469b2e683c62341a3e45b2c9ab5eaba06 Mon Sep 17 00:00:00 2001 From: xiaowei Date: Thu, 8 Jul 2021 16:55:58 +0800 Subject: [PATCH 1/4] feat: add the outputEditorInstance property in panelService --- src/model/workbench/panel.tsx | 18 ++++++++++++++++-- src/services/workbench/panelService.ts | 23 ++++++++++++++++------- src/workbench/panel/output.tsx | 17 ++++++++--------- src/workbench/panel/panel.tsx | 2 -- stories/extensions/test/testPane.tsx | 4 +++- 5 files changed, 43 insertions(+), 21 deletions(-) diff --git a/src/model/workbench/panel.tsx b/src/model/workbench/panel.tsx index 94c9bbb32..71287ee5c 100644 --- a/src/model/workbench/panel.tsx +++ b/src/model/workbench/panel.tsx @@ -27,13 +27,27 @@ export interface IPanel { toolbox?: IActionBarItemProps[]; } +export interface IOutput extends IPanelItem { + outputEditorInstance?: IStandaloneCodeEditor; + onUpdateEditorIns?(editorInstance: IStandaloneCodeEditor): void; +} + export function builtInOutputPanel() { - return { + const outputPane: IOutput = { id: PANEL_OUTPUT, name: localize(PANEL_OUTPUT, 'output'), data: '', - renderPane: (item) => , }; + + function onUpdateEditorIns(editorInstance: IStandaloneCodeEditor) { + outputPane.outputEditorInstance = editorInstance; + } + + outputPane.renderPane = (item) => ( + + ); + + return outputPane; } export function builtInPanelToolboxResize(): IActionBarItemProps { diff --git a/src/services/workbench/panelService.ts b/src/services/workbench/panelService.ts index a67808360..3ba5a31f8 100644 --- a/src/services/workbench/panelService.ts +++ b/src/services/workbench/panelService.ts @@ -4,11 +4,11 @@ import { Component } from 'mo/react'; import { builtInOutputPanel, builtInPanelToolboxResize, + IOutput, IPanel, IPanelItem, PanelEvent, PanelModel, - PANEL_OUTPUT, PANEL_TOOLBOX_RESIZE, PANEL_TOOLBOX_RESTORE_SIZE, } from 'mo/model/workbench/panel'; @@ -19,6 +19,10 @@ import { localize } from 'mo/i18n/localize'; import { LayoutService } from 'mo/services'; export interface IPanelService extends Component { + /** + * The editorInstance of Output + */ + readonly outputEditorInstance: IStandaloneCodeEditor | undefined; open(data: IPanelItem): void; getById(id: string): IPanelItem | undefined; add(data: IPanelItem | IPanelItem[]): void; @@ -45,6 +49,13 @@ export class PanelService extends Component implements IPanelService { this.layoutService = container.resolve(LayoutService); } + public get outputEditorInstance() { + const outputPane: IOutput | undefined = this.state.data?.find( + searchById(builtInOutputPanel().id) + ); + return outputPane?.outputEditorInstance; + } + public maximizeRestore(): void { const panelMaximized = this.layoutService.isPanelMaximized(); const { toolbox = [] } = this.state; @@ -87,16 +98,14 @@ export class PanelService extends Component implements IPanelService { public updateOutput(data: IPanelItem): IPanelItem | undefined { return this.update(Object.assign(builtInOutputPanel(), data)); } + public appendOutput(content: string): void { - const output = this.getById(PANEL_OUTPUT); - if (output) { - output.data = output.data + content; - this.updateOutput(output); - } + const outputValue = this.outputEditorInstance?.getValue(); + this.outputEditorInstance?.setValue(outputValue + content); } public clearOutput(): void { - this.updateOutput(Object.assign(builtInOutputPanel(), { data: '' })); + this.outputEditorInstance?.setValue(''); } public add(data: IPanelItem | IPanelItem[]) { diff --git a/src/workbench/panel/output.tsx b/src/workbench/panel/output.tsx index 826406b3b..aade289bd 100644 --- a/src/workbench/panel/output.tsx +++ b/src/workbench/panel/output.tsx @@ -1,20 +1,16 @@ import * as React from 'react'; import { prefixClaName } from 'mo/common/className'; -import { IPanelItem } from 'mo/model/workbench/panel'; +import { IOutput } from 'mo/model/workbench/panel'; import { MonacoEditor } from 'mo/components/monaco'; const defaultClassName = prefixClaName('output'); -function Output(props: IPanelItem) { - const { data = '' } = props; - // TODO: Output should export the editorInstance, it's used for update the editor Language, Monarch +function Output(props: IOutput) { + const { id, data = '', onUpdateEditorIns } = props; return ( -
+
{ + onUpdateEditorIns?.(editorInstance); + }} />
); diff --git a/src/workbench/panel/panel.tsx b/src/workbench/panel/panel.tsx index ac0313b22..1d31230a5 100644 --- a/src/workbench/panel/panel.tsx +++ b/src/workbench/panel/panel.tsx @@ -7,9 +7,7 @@ import { ActionBar } from 'mo/components/actionBar'; const defaultClassName = prefixClaName('panel'); const panelHeaderClassName = getBEMElement(defaultClassName, 'header'); - const panelToolbarClassName = getBEMElement(defaultClassName, 'toolbar'); - const panelContainerClassName = getBEMElement(defaultClassName, 'container'); export function Panel(props: IPanel & IPanelController) { diff --git a/stories/extensions/test/testPane.tsx b/stories/extensions/test/testPane.tsx index d22fcb9af..055b8cec0 100644 --- a/stories/extensions/test/testPane.tsx +++ b/stories/extensions/test/testPane.tsx @@ -93,7 +93,9 @@ export default class TestPane extends React.Component { }; const updateOutput = () => { - molecule.panel.appendOutput('Number: ' + Math.random() * 10); + const editorIns = molecule.panel.outputEditorInstance; + console.log('outputEditorInstance:', editorIns); + molecule.panel.appendOutput('Number: ' + Math.random() * 10 + '\n'); }; const newEditor = function () { From e4266c796e9ca2cdffe3b3d21f3dd5503db421de Mon Sep 17 00:00:00 2001 From: xiaowei Date: Thu, 8 Jul 2021 17:01:49 +0800 Subject: [PATCH 2/4] refactor: add css style for the Output component --- src/style/common.scss | 1 + src/workbench/panel/style.scss | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/src/style/common.scss b/src/style/common.scss index f5f5053e9..b14f16bb3 100644 --- a/src/style/common.scss +++ b/src/style/common.scss @@ -42,6 +42,7 @@ $mainBench: prefix('mainBench'); $activityBar: prefix('activityBar'); $notification: prefix('notification'); $problems: prefix('problems'); +$output: prefix('output'); $folderTree: prefix('folderTree'); $editorTree: prefix('editorTree'); diff --git a/src/workbench/panel/style.scss b/src/workbench/panel/style.scss index 2cb14f4b9..83d9c48a4 100644 --- a/src/workbench/panel/style.scss +++ b/src/workbench/panel/style.scss @@ -50,3 +50,8 @@ min-width: 60px; } } + +#{$output} { + height: 100%; + width: 100%; +} From 4a40da356de0d38e20491cf3dc6505c5f9fa2504 Mon Sep 17 00:00:00 2001 From: xiaowei Date: Thu, 8 Jul 2021 17:43:07 +0800 Subject: [PATCH 3/4] refactor: set builtIn output ID to PANEL_OUTPUT --- src/services/workbench/panelService.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/services/workbench/panelService.ts b/src/services/workbench/panelService.ts index 3ba5a31f8..9684bf4d3 100644 --- a/src/services/workbench/panelService.ts +++ b/src/services/workbench/panelService.ts @@ -9,6 +9,7 @@ import { IPanelItem, PanelEvent, PanelModel, + PANEL_OUTPUT, PANEL_TOOLBOX_RESIZE, PANEL_TOOLBOX_RESTORE_SIZE, } from 'mo/model/workbench/panel'; @@ -51,7 +52,7 @@ export class PanelService extends Component implements IPanelService { public get outputEditorInstance() { const outputPane: IOutput | undefined = this.state.data?.find( - searchById(builtInOutputPanel().id) + searchById(PANEL_OUTPUT) ); return outputPane?.outputEditorInstance; } From d69132f3018bf7f94483027a4572ab0be6087c5d Mon Sep 17 00:00:00 2001 From: xiaowei Date: Thu, 8 Jul 2021 18:07:19 +0800 Subject: [PATCH 4/4] refactor: remove useless css style --- src/workbench/panel/style.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/workbench/panel/style.scss b/src/workbench/panel/style.scss index 83d9c48a4..2cb14f4b9 100644 --- a/src/workbench/panel/style.scss +++ b/src/workbench/panel/style.scss @@ -50,8 +50,3 @@ min-width: 60px; } } - -#{$output} { - height: 100%; - width: 100%; -}