From 99f5c406e3d52b045ccf730ede6398a0c70ba217 Mon Sep 17 00:00:00 2001 From: Aditya Bist Date: Wed, 3 Nov 2021 21:07:36 -0700 Subject: [PATCH] Added editor to table designer (#17576) * format doc * correct class name * set content * remove mssql commands * merge classes * code refactoring and bug fixing * remove unnecessary class * handle promise Co-authored-by: Alan Ren --- src/sql/base/browser/ui/designer/designer.ts | 15 ++- .../base/browser/ui/designer/interfaces.ts | 10 +- .../browser/tableDesignerEditor.ts | 5 +- .../browser/tableDesignerTextEditor.ts | 106 ++++++++++++++++-- 4 files changed, 114 insertions(+), 22 deletions(-) diff --git a/src/sql/base/browser/ui/designer/designer.ts b/src/sql/base/browser/ui/designer/designer.ts index 92e947f9e0..ace05e95dc 100644 --- a/src/sql/base/browser/ui/designer/designer.ts +++ b/src/sql/base/browser/ui/designer/designer.ts @@ -3,7 +3,12 @@ * 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, DesignerTextEditor, ScriptProperty } 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'; @@ -120,10 +125,12 @@ export class Designer extends Disposable implements IThemable { maximumSize: Number.POSITIVE_INFINITY, onDidChange: Event.None }, Sizing.Distribute); - + this._textEditor = textEditorCreator(this._editorContainer); this._verticalSplitView.addView({ element: this._editorContainer, - layout: size => { }, + layout: size => { + this._textEditor.layout(new DOM.Dimension(this._editorContainer.clientWidth, size)); + }, minimumSize: 100, maximumSize: Number.POSITIVE_INFINITY, onDidChange: Event.None @@ -152,7 +159,6 @@ export class Designer extends Disposable implements IThemable { }, (definition, component, viewModel) => { this.setComponentValue(definition, component, viewModel); }); - this._textEditor = textEditorCreator(this._editorContainer); } private styleComponent(component: TabbedPanel | InputBox | Checkbox | Table | SelectBox | Button): void { @@ -371,7 +377,6 @@ export class Designer extends Disposable implements IThemable { const viewModel = this._input.viewModel; 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 6267227eca..095177f1f2 100644 --- a/src/sql/base/browser/ui/designer/interfaces.ts +++ b/src/sql/base/browser/ui/designer/interfaces.ts @@ -4,6 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import { PanelTabIdentifier } from 'sql/base/browser/ui/panel/panel'; +import { Dimension } from 'vs/base/browser/dom'; import { Event } from 'vs/base/common/event'; export interface DesignerComponentInput { @@ -208,12 +209,13 @@ 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; + + /** + * Update the size of the editor + */ + layout(dimensions: Dimension): void; } diff --git a/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerEditor.ts b/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerEditor.ts index f37a083c93..8423c4756a 100644 --- a/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerEditor.ts +++ b/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerEditor.ts @@ -27,6 +27,7 @@ export class TableDesignerEditor extends EditorPane { public static readonly ID: string = 'workbench.editor.tableDesigner'; private _designer: Designer; + private _designerTextEditor: TableDesignerTextEditor; private _saveChangesAction: SaveTableChangesAction; constructor( @@ -60,8 +61,10 @@ 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, (editorContainer) => { - return this._instantiationService.createInstance(TableDesignerTextEditor, editorContainer); + this._designerTextEditor = this._instantiationService.createInstance(TableDesignerTextEditor, editorContainer); + return this._designerTextEditor; }, this._contextViewService); this._register(attachDesignerStyler(this._designer, this.themeService)); this._register(registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => { diff --git a/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerTextEditor.ts b/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerTextEditor.ts index 6666a2ce36..55fcd64aaa 100644 --- a/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerTextEditor.ts +++ b/src/sql/workbench/contrib/tableDesigner/browser/tableDesignerTextEditor.ts @@ -5,16 +5,103 @@ import { DesignerTextEditor } from 'sql/base/browser/ui/designer/interfaces'; import { Event, Emitter } from 'vs/base/common/event'; +import { Schemas } from 'vs/base/common/network'; +import { URI } from 'vs/base/common/uri'; +import { ITextModel } from 'vs/editor/common/model'; +import { IModelService } from 'vs/editor/common/services/modelService'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; +import { UntitledTextEditorInput } from 'vs/workbench/services/untitled/common/untitledTextEditorInput'; +import { UntitledTextEditorModel } from 'vs/workbench/services/untitled/common/untitledTextEditorModel'; +import { IEditorOptions } from 'vs/editor/common/config/editorOptions'; +import * as nls from 'vs/nls'; +import * as DOM from 'vs/base/browser/dom'; +import { TextResourceEditorModel } from 'vs/workbench/common/editor/textResourceEditorModel'; +import * as editorCommon from 'vs/editor/common/editorCommon'; +import { BaseTextEditor } from 'vs/workbench/browser/parts/editor/textEditor'; +import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; +import { IThemeService } from 'vs/platform/theme/common/themeService'; +import { IStorageService } from 'vs/platform/storage/common/storage'; +import { ITextResourceConfigurationService } from 'vs/editor/common/services/textResourceConfigurationService'; +import { IEditorOpenContext } from 'vs/workbench/common/editor'; +import { IEditorService } from 'vs/workbench/services/editor/common/editorService'; +import { CancellationToken } from 'vs/base/common/cancellation'; +import { IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService'; +import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget'; +import { ITextEditorOptions } from 'vs/platform/editor/common/editor'; +import { onUnexpectedError } from 'vs/base/common/errors'; -// TODO: Implement the text editor -export class TableDesignerTextEditor implements DesignerTextEditor { +class TableDesignerCodeEditor extends CodeEditorWidget { +} + +export class TableDesignerTextEditor extends BaseTextEditor 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) { + private _untitledTextEditorModel: UntitledTextEditorModel; + private _editorInput: UntitledTextEditorInput; + private _editorModel: ITextModel; + + public static ID = 'designer.editors.textEditor'; + constructor( + private _container: HTMLElement, + @IModelService private _modelService: IModelService, + @ITelemetryService telemetryService: ITelemetryService, + @IInstantiationService instantiationService: IInstantiationService, + @IStorageService storageService: IStorageService, + @ITextResourceConfigurationService configurationService: ITextResourceConfigurationService, + @IThemeService themeService: IThemeService, + @IEditorService editorService: IEditorService, + @IEditorGroupsService editorGroupService: IEditorGroupsService + + ) { + super(TableDesignerTextEditor.ID, telemetryService, instantiationService, storageService, configurationService, themeService, editorService, editorGroupService); + this.create(this._container); + this.setVisible(true); + this._untitledTextEditorModel = this.instantiationService.createInstance(UntitledTextEditorModel, URI.from({ scheme: Schemas.untitled }), false, undefined, 'sql', undefined); + this._editorInput = this.instantiationService.createInstance(UntitledTextEditorInput, this._untitledTextEditorModel); + this.setInput(this._editorInput, undefined, undefined).catch(onUnexpectedError); + this._editorInput.resolve().then((model) => { + this._editorModel = model.textEditorModel; + }); + } + + public override createEditorControl(parent: HTMLElement, configuration: IEditorOptions): editorCommon.IEditor { + return this.instantiationService.createInstance(TableDesignerCodeEditor, parent, configuration, {}); + } + + protected override getConfigurationOverrides(): IEditorOptions { + const options = super.getConfigurationOverrides(); + options.readOnly = true; + if (this.input) { + options.inDiffEditor = false; + options.scrollBeyondLastLine = false; + options.folding = false; + options.renderWhitespace = 'all'; + options.wordWrap = 'off'; + options.renderIndentGuides = false; + options.rulers = []; + options.glyphMargin = true; + options.minimap = { + enabled: true + }; + } + return options; + } + + override async setInput(input: UntitledTextEditorInput, options: ITextEditorOptions, context: IEditorOpenContext): Promise { + await super.setInput(input, options, context, CancellationToken.None); + const editorModel = await this.input.resolve() as TextResourceEditorModel; + await editorModel.resolve(); + this.getControl().setModel(editorModel.textEditorModel); + } + + protected getAriaLabel(): string { + return nls.localize('designer.textEditorAriaLabel', "Designer text editor."); + } + + public override layout(dimension: DOM.Dimension) { + this.getControl().layout(dimension); } get content(): string { @@ -23,13 +110,8 @@ export class TableDesignerTextEditor implements DesignerTextEditor { set content(val: string) { this._content = val; - } - - get readonly(): boolean { - return this._readonly; - } - - set readonly(val: boolean) { - this._readonly = val; + this._modelService.updateModel(this._editorModel, this._content); + this._untitledTextEditorModel.setDirty(false); + this.layout(new DOM.Dimension(this._container.clientWidth, this._container.clientHeight)); } }