text editor interface (#17527)

This commit is contained in:
Alan Ren
2021-10-28 13:23:33 -07:00
committed by GitHub
parent 447b969b5c
commit 12261aa7a2
4 changed files with 61 additions and 6 deletions

View File

@@ -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<Slick.SlickData> | 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);
});

View File

@@ -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<string>;
}

View File

@@ -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);

View File

@@ -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<string> = new Emitter<string>();
readonly onDidContentChange: Event<string> = 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;
}
}