From e3baf5c4437a6721904fba43575f740c36ff44c9 Mon Sep 17 00:00:00 2001 From: Abbie Petchtes Date: Mon, 4 Jun 2018 14:41:17 -0700 Subject: [PATCH] Fix model view editor where switching between different type of editors remove the dom (#1546) * fix model view editor where switching between different type of editors destroy the dom * address comments --- .../modelEditor/modelViewEditor.css | 9 +++++ .../modelEditor/modelViewEditor.ts | 26 ++++++++++----- .../modelEditor/modelViewInput.ts | 33 ++++++++++++++++--- 3 files changed, 55 insertions(+), 13 deletions(-) create mode 100644 src/sql/parts/modelComponents/modelEditor/modelViewEditor.css diff --git a/src/sql/parts/modelComponents/modelEditor/modelViewEditor.css b/src/sql/parts/modelComponents/modelEditor/modelViewEditor.css new file mode 100644 index 0000000000..f933d58a49 --- /dev/null +++ b/src/sql/parts/modelComponents/modelEditor/modelViewEditor.css @@ -0,0 +1,9 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the Source EULA. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +.model-view-container { + height: 100%; + width : 100%; +} \ No newline at end of file diff --git a/src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts b/src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts index a2a58cf398..565855ca3b 100644 --- a/src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts +++ b/src/sql/parts/modelComponents/modelEditor/modelViewEditor.ts @@ -2,6 +2,8 @@ * Copyright (c) Microsoft Corporation. All rights reserved. * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ +import 'vs/css!./modelViewEditor'; + import { Builder, $ } from 'vs/base/browser/builder'; import { TPromise } from 'vs/base/common/winjs.base'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; @@ -10,6 +12,7 @@ import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor'; import { Dimension } from 'vs/workbench/services/part/common/partService'; import { EditorOptions } from 'vs/workbench/common/editor'; import * as DOM from 'vs/base/browser/dom'; +import { Position } from 'vs/platform/editor/common/editor'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { ModelViewInput } from 'sql/parts/modelComponents/modelEditor/modelViewInput'; @@ -40,25 +43,32 @@ export class ModelViewEditor extends BaseEditor { public focus(): void { } - async setInput(input: ModelViewInput, options?: EditorOptions): TPromise { - if (this.input && this.input.matches(input)) { - return TPromise.as(undefined); - } + public clearInput() { + this.hideOrRemoveModelViewContainer(); + super.clearInput(); + } - const parentElement = this.getContainer().getHTMLElement(); + private hideOrRemoveModelViewContainer() { if (this.input instanceof ModelViewInput) { if (this.input.container) { if (this.input.options && this.input.options.retainContextWhenHidden) { this.input.container.style.visibility = 'hidden'; } else { - parentElement.removeChild(this.input.container); + this.input.removeModelViewContainer(); + this.input.container.style.visibility = 'hidden'; } } } + } - if (!parentElement.contains(input.container)) { - parentElement.appendChild(input.container); + async setInput(input: ModelViewInput, options?: EditorOptions): TPromise { + if (this.input && this.input.matches(input)) { + return TPromise.as(undefined); } + + this.hideOrRemoveModelViewContainer(); + + input.appendModelViewContainer(); input.container.style.visibility = 'visible'; await super.setInput(input, options); diff --git a/src/sql/parts/modelComponents/modelEditor/modelViewInput.ts b/src/sql/parts/modelComponents/modelEditor/modelViewInput.ts index e16f110472..ce594382f6 100644 --- a/src/sql/parts/modelComponents/modelEditor/modelViewInput.ts +++ b/src/sql/parts/modelComponents/modelEditor/modelViewInput.ts @@ -8,6 +8,7 @@ import { IEditorModel } from 'vs/platform/editor/common/editor'; import { EditorInput } from 'vs/workbench/common/editor'; import * as DOM from 'vs/base/browser/dom'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; +import { IPartService, Parts } from 'vs/workbench/services/part/common/partService'; import { DialogPane } from 'sql/platform/dialog/dialogPane'; @@ -16,13 +17,19 @@ export class ModelViewInput extends EditorInput { public static ID: string = 'workbench.editorinputs.ModelViewEditorInput'; private _container: HTMLElement; + private _dialogPaneContainer: HTMLElement; private _dialogPane: DialogPane; constructor(private _title: string, private _modelViewId: string, private _options: sqlops.ModelViewEditorOptions, @IInstantiationService private _instantiationService: IInstantiationService, + @IPartService private readonly _partService: IPartService ) { super(); + this._container = document.createElement('div'); + this._container.id = `modelView-${_modelViewId}`; + this._partService.getContainer(Parts.EDITOR_PART).appendChild(this._container); + } public get title(): string { @@ -46,14 +53,30 @@ export class ModelViewInput extends EditorInput { } public get container(): HTMLElement { - if (!this._container && !this._dialogPane) { - this._container = DOM.$('div.model-view-container'); - this._dialogPane = new DialogPane(this.title, this.modelViewId, () => undefined, this._instantiationService); - this._dialogPane.createBody(this._container); - } return this._container; } + public appendModelViewContainer(): void { + if (!this._dialogPane) { + this.createDialogPane(); + } + if (!this._container.contains(this._dialogPaneContainer)) { + this._container.appendChild(this._dialogPaneContainer); + } + } + + public removeModelViewContainer(): void { + if (this._dialogPaneContainer) { + this._container.removeChild(this._dialogPaneContainer); + } + } + + private createDialogPane(): void { + this._dialogPaneContainer = DOM.$('div.model-view-container'); + this._dialogPane = new DialogPane(this.title, this.modelViewId, () => undefined, this._instantiationService); + this._dialogPane.createBody(this._dialogPaneContainer); + } + public get dialogPane(): DialogPane { return this._dialogPane; }