From 9d32b16a4a5ce92db079b23892f7499692cb1f14 Mon Sep 17 00:00:00 2001 From: Kornelia Kobiela Date: Fri, 23 Aug 2019 15:57:43 +0200 Subject: [PATCH] Closing HTML Assistant on loose element focus Issue: #269 Problem: HTML Assistant cannot close when focus is lost Solution: When focus lost HTML Assistant close by itself Signed-off-by: Kornelia Kobiela --- .../src/pane/select-layer/html-assistant.js | 13 ++++-- design-editor/src/panel/toolbar-element.js | 10 ++++ design-editor/src/system/stage-manager.js | 46 +++++++++---------- 3 files changed, 43 insertions(+), 26 deletions(-) diff --git a/design-editor/src/pane/select-layer/html-assistant.js b/design-editor/src/pane/select-layer/html-assistant.js index 41014dbf5..498226980 100644 --- a/design-editor/src/pane/select-layer/html-assistant.js +++ b/design-editor/src/pane/select-layer/html-assistant.js @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ 'use babel'; import {HTMLAssistantEditorElement} from 'html-assistant-editor'; import {EVENTS, eventEmitter} from '../../events-emitter'; @@ -54,26 +55,32 @@ class HTMLAssistant { .then(() => { this.element = this._model.getElementWithoutId(this.selectedElementId); this._htmlAssistantEditor.clean(); + eventEmitter.emit(EVENTS.CloseInstantTextEditor); }) .catch(error => console.error(error)); } else { this._htmlAssistantEditor.open(this.getSelectedContent(this.element)); + eventEmitter.emit(EVENTS.OpenInstantTextEditor); } callback(opened); } _bindEvents () { eventEmitter.on(EVENTS.ElementSelected, (elementId) => { - console.log("element selected", elementId); + console.log('element selected', elementId); this._model = appManager.getActiveDesignEditor().getModel(); this.selectedElementId = elementId; this.element = this._model.getElementWithoutId(this.selectedElementId); }); eventEmitter.on(EVENTS.ElementDeselected, () => { - console.log("element deselected"); - this.selectedElementId = null; + if (this._htmlAssistantEditor.isOpened()) { + console.log('element deselected'); + this.toggle(() => { + this.selectedElementId = null; + }); + } }); } } diff --git a/design-editor/src/panel/toolbar-element.js b/design-editor/src/panel/toolbar-element.js index 3e5386e7b..c5a48da94 100644 --- a/design-editor/src/panel/toolbar-element.js +++ b/design-editor/src/panel/toolbar-element.js @@ -23,6 +23,7 @@ class Toolbar extends DressElement { */ onCreated() { this._allButtonsDisabled = false; + this.htmlAssistantOpen = false; this._initialize(); this._create(); this.events = { @@ -40,6 +41,14 @@ class Toolbar extends DressElement { 'click .save-file': EVENTS.DocumentSave }; + eventEmitter.on(EVENTS.OpenInstantTextEditor, () => { + this.htmlAssistantOpen = true; + }); + + eventEmitter.on(EVENTS.OpenInstantTextEditor, () => { + this.htmlAssistantOpen = false; + }); + eventEmitter.on(EVENTS.ElementSelected, (elementId) => { this.setEnable(this.Controls.INSTANT_EDIT); if (this._assistantViewState) { @@ -48,6 +57,7 @@ class Toolbar extends DressElement { this._selectedElement = elementId; }); eventEmitter.on(EVENTS.ElementDeselected, () => { + this.turnOffControl(this.Controls.INSTANT_EDIT); this.setDisable(this.Controls.INSTANT_EDIT); this.setDisable(this.Controls.INSERT_CODE); this._selectedElement = null; diff --git a/design-editor/src/system/stage-manager.js b/design-editor/src/system/stage-manager.js index ae3b41119..9c4f1ab13 100644 --- a/design-editor/src/system/stage-manager.js +++ b/design-editor/src/system/stage-manager.js @@ -26,39 +26,39 @@ class StageManager { * Init * @returns {StageManager} */ - initialize() { - // initialize property container - this._propertyContainerElement = new PropertyContainerElement(); - // initialize animation container - this._animationContainerElement = new AnimationContainerElement(); + initialize() { + // initialize property container + this._propertyContainerElement = new PropertyContainerElement(); + // initialize animation container + this._animationContainerElement = new AnimationContainerElement(); - this._structureElement = new StructureElement(); + this._structureElement = new StructureElement(); - this._infoElement = new InfoElement(); + this._infoElement = new InfoElement(); - this._toolbarContainerElement = new ToolbarElement(); - this._toolbarContainerElementPanel = null; + this._htmlAssistant = new HTMLAssistant(); + this._toolbarContainerElement = new ToolbarElement(); + this._toolbarContainerElementPanel = null; - this._previewElementToolbar = new PreviewToolbarElement(); - this._previewElementToolbarPanel = null; + this._previewElementToolbar = new PreviewToolbarElement(); + this._previewElementToolbarPanel = null; // this._interactionViewElementToolbar = new InteractionViewToolbarElement(); // this._interactionViewElementToolbarPanel = null; - // this._interactionView = new InteractionViewElement(); + // this._interactionView = new InteractionViewElement(); - this._htmlAssistant = new HTMLAssistant(); - this._assistantManager = new AssistantManager(); - panelManager.openPanel({type: 'left', item: this._toolbarContainerElement, priority: 110}); + this._assistantManager = new AssistantManager(); + panelManager.openPanel({ type: 'left', item: this._toolbarContainerElement, priority: 110 }); - this._toolbarControls = this._toolbarContainerElement.Controls; + this._toolbarControls = this._toolbarContainerElement.Controls; - this._subscriptions = null; - this._lastClosetEditor = null; - this._lastClosetPath = null; + this._subscriptions = null; + this._lastClosetEditor = null; + this._lastClosetPath = null; - this._bindClosetEvent(); - this._registerCommands(); - return this; - } + this._bindClosetEvent(); + this._registerCommands(); + return this; + } /** * Bind closet events