From 12261aa7a20a582c3bdcfb72698dbaf4c0fccf26 Mon Sep 17 00:00:00 2001 From: Alan Ren Date: Thu, 28 Oct 2021 13:23:33 -0700 Subject: [PATCH] text editor interface (#17527) --- src/sql/base/browser/ui/designer/designer.ts | 12 ++++--- .../base/browser/ui/designer/interfaces.ts | 15 ++++++++ .../browser/tableDesignerEditor.ts | 5 ++- .../browser/tableDesignerTextEditor.ts | 35 +++++++++++++++++++ 4 files changed, 61 insertions(+), 6 deletions(-) create mode 100644 src/sql/workbench/contrib/tableDesigner/browser/tableDesignerTextEditor.ts diff --git a/src/sql/base/browser/ui/designer/designer.ts b/src/sql/base/browser/ui/designer/designer.ts index dc0f7ae1e3..1968fbd418 100644 --- a/src/sql/base/browser/ui/designer/designer.ts +++ b/src/sql/base/browser/ui/designer/designer.ts @@ -3,7 +3,7 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import { DesignerComponentInput, DesignerEditType, DesignerTab, DesignerEdit, DesignerEditIdentifier, DesignerViewModel, DesignerDataPropertyInfo, DesignerTableComponentRowData, DesignerTableProperties, InputBoxProperties, DropDownProperties, CheckBoxProperties, DesignerComponentTypeName, DesignerEditProcessedEventArgs, DesignerStateChangedEventArgs, DesignerAction, DesignerUIState } from 'sql/base/browser/ui/designer/interfaces'; +import { DesignerComponentInput, DesignerEditType, DesignerTab, DesignerEdit, DesignerEditIdentifier, DesignerViewModel, DesignerDataPropertyInfo, DesignerTableComponentRowData, DesignerTableProperties, InputBoxProperties, DropDownProperties, CheckBoxProperties, DesignerComponentTypeName, DesignerEditProcessedEventArgs, DesignerStateChangedEventArgs, DesignerAction, DesignerUIState, DesignerTextEditor, ScriptProperty } from 'sql/base/browser/ui/designer/interfaces'; import { IPanelTab, ITabbedPanelStyles, TabbedPanel } from 'sql/base/browser/ui/panel/panel'; import * as DOM from 'vs/base/browser/dom'; import { Event } from 'vs/base/common/event'; @@ -67,8 +67,10 @@ export class Designer extends Disposable implements IThemable { private _inputDisposable: DisposableStore; private _loadingTimeoutHandle: any; private _groupHeaders: HTMLElement[] = []; + private _textEditor: DesignerTextEditor; constructor(private readonly _container: HTMLElement, + textEditorCreator: (container: HTMLElement) => DesignerTextEditor, private readonly _contextViewProvider: IContextViewProvider) { super(); this._tableCellEditorFactory = new TableCellEditorFactory( @@ -150,9 +152,7 @@ export class Designer extends Disposable implements IThemable { }, (definition, component, viewModel) => { this.setComponentValue(definition, component, viewModel); }); - const editor = DOM.$('div'); - editor.innerText = 'script pane placeholder'; - this._editorContainer.appendChild(editor); + this._textEditor = textEditorCreator(this._editorContainer); } private styleComponent(component: TabbedPanel | InputBox | Checkbox | Table | SelectBox | Button): void { @@ -369,7 +369,9 @@ export class Designer extends Disposable implements IThemable { private updateComponentValues(): void { const viewModel = this._input.viewModel; - // data[ScriptPropertyName] -- todo- set the script editor + const scriptProperty = viewModel[ScriptProperty] as InputBoxProperties; + this._textEditor.content = scriptProperty.value; + this._textEditor.readonly = scriptProperty.enabled === false; this._componentMap.forEach((value) => { this.setComponentValue(value.defintion, value.component, viewModel); }); diff --git a/src/sql/base/browser/ui/designer/interfaces.ts b/src/sql/base/browser/ui/designer/interfaces.ts index 4146b5f3b3..e8a9ee3bd5 100644 --- a/src/sql/base/browser/ui/designer/interfaces.ts +++ b/src/sql/base/browser/ui/designer/interfaces.ts @@ -188,3 +188,18 @@ export interface DesignerEditResult { isValid: boolean; errors?: { message: string, property?: DesignerEditIdentifier }[]; } + +export interface DesignerTextEditor { + /** + * Gets or sets the content of the text editor + */ + content: string; + /** + * Gets or sets a boolean value indicating whether the editor is readonly + */ + readonly: boolean; + /** + * Event fired when the content is changed by user + */ + readonly onDidContentChange: Event; +} diff --git a/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerEditor.ts b/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerEditor.ts index 367f1f6743..f37a083c93 100644 --- a/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerEditor.ts +++ b/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerEditor.ts @@ -21,6 +21,7 @@ import { SaveTableChangesAction } from 'sql/workbench/contrib/tableDesigner/brow import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; import { DesignerPaneSeparator } from 'sql/platform/theme/common/colorRegistry'; +import { TableDesignerTextEditor } from 'sql/workbench/contrib/tableDesigner/browser/tableDesignerTextEditor'; export class TableDesignerEditor extends EditorPane { public static readonly ID: string = 'workbench.editor.tableDesigner'; @@ -59,7 +60,9 @@ export class TableDesignerEditor extends EditorPane { this._saveChangesAction = this._instantiationService.createInstance(SaveTableChangesAction); this._saveChangesAction.enabled = false; actionbar.push(this._saveChangesAction, { icon: true, label: false }); - this._designer = new Designer(designerContainer, this._contextViewService); + this._designer = new Designer(designerContainer, (editorContainer) => { + return this._instantiationService.createInstance(TableDesignerTextEditor, editorContainer); + }, this._contextViewService); this._register(attachDesignerStyler(this._designer, this.themeService)); this._register(registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => { const border = theme.getColor(DesignerPaneSeparator); diff --git a/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerTextEditor.ts b/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerTextEditor.ts new file mode 100644 index 0000000000..6666a2ce36 --- /dev/null +++ b/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerTextEditor.ts @@ -0,0 +1,35 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import { DesignerTextEditor } from 'sql/base/browser/ui/designer/interfaces'; +import { Event, Emitter } from 'vs/base/common/event'; +import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; + +// TODO: Implement the text editor +export class TableDesignerTextEditor implements DesignerTextEditor { + private _content: string; + private _readonly: boolean; + private _contentChangeEventEmitter: Emitter = new Emitter(); + readonly onDidContentChange: Event = this._contentChangeEventEmitter.event; + + constructor(container: HTMLElement, @IInstantiationService instantiationService: IInstantiationService) { + } + + get content(): string { + return this._content; + } + + set content(val: string) { + this._content = val; + } + + get readonly(): boolean { + return this._readonly; + } + + set readonly(val: boolean) { + this._readonly = val; + } +}