From df2beb32bfc18a1ffb4e21fd045ebd0e77c1aa54 Mon Sep 17 00:00:00 2001 From: Kleber Silva Date: Sun, 12 Dec 2021 11:10:20 -0300 Subject: [PATCH] added action view --- src/core/reference-image.controller.ts | 10 ++----- src/editor-view/actions/action-view.ts | 3 ++ src/editor-view/actions/actions-toolbar.ts | 11 +++---- .../actions/button/action-button.ts | 3 +- .../group/reference-image-group.ts | 30 ++++++++++++------- .../actions/responsive/responsive-group.ts | 12 ++++++-- 6 files changed, 42 insertions(+), 27 deletions(-) create mode 100644 src/editor-view/actions/action-view.ts diff --git a/src/core/reference-image.controller.ts b/src/core/reference-image.controller.ts index 60d95d9..0e15baa 100644 --- a/src/core/reference-image.controller.ts +++ b/src/core/reference-image.controller.ts @@ -1,4 +1,3 @@ -import { ReferenceImageOptions } from 'editor-view/actions/reference-image/reference-image.options'; import { PluginConfig, Size } from 'plugin.model'; import { ReferenceImage } from 'scene-view/reference-image/reference-image'; import { Preferences } from './preferences/preferences'; @@ -7,9 +6,10 @@ import { PreferenceKey } from './preferences/preferences.model'; export class ReferenceImageController { private game: Phaser.Game; private prefs: Preferences; - private image: ReferenceImage; private config: PluginConfig; + public image: ReferenceImage; + public createImage(parent: HTMLElement) { this.image = document.createElement(ReferenceImage.tagName) as ReferenceImage; this.image.init(); @@ -30,12 +30,6 @@ export class ReferenceImageController { this.image.enable(this.prefs.get('referenceImageFilters')); } - public openOptionsPanel(opener: HTMLElement) { - const p = (document.createElement(ReferenceImageOptions.tagName) as ReferenceImageOptions); - p.openPopup('Reference Image Options', opener, this.image); - p.addEventListener('closed', () => this.prefs.set('referenceImageFilters', this.image.getFilters())); - } - private onPreferencesChanged(key: PreferenceKey, value: any) { switch (key) { case 'referenceImageVisible': diff --git a/src/editor-view/actions/action-view.ts b/src/editor-view/actions/action-view.ts new file mode 100644 index 0000000..d58e16c --- /dev/null +++ b/src/editor-view/actions/action-view.ts @@ -0,0 +1,3 @@ +export interface ActionView extends HTMLElement { + updateState(): void; +} diff --git a/src/editor-view/actions/actions-toolbar.ts b/src/editor-view/actions/actions-toolbar.ts index 4f4dd9d..bf7b147 100644 --- a/src/editor-view/actions/actions-toolbar.ts +++ b/src/editor-view/actions/actions-toolbar.ts @@ -3,6 +3,7 @@ import { Actions } from 'core/actions'; import { PreferenceKey } from 'core/preferences/preferences.model'; import { PreferencesUtil } from 'core/preferences/preferences.util'; import { Widget } from 'editor-view/widget/widget'; +import { ActionView } from './action-view'; import './actions-toolbar.scss'; import { ActionButton } from './button/action-button'; import { ReferenceImageGroup } from './reference-image/group/reference-image-group'; @@ -11,7 +12,7 @@ import { ResponsiveGroup } from './responsive/responsive-group'; export class ActionsToolbar extends Widget { public static readonly tagName = 'phred-actions-toolbar'; - private readonly buttons: ActionButton[] = []; + private readonly views: ActionView[] = []; private leftPanelToggle: HTMLElement; private rightPanelToggle: HTMLElement; @@ -61,7 +62,7 @@ export class ActionsToolbar extends Widget { ); } - public enable() { this.buttons.forEach(e => e.updateState()); } + public enable() { this.views.forEach(e => e.updateState()); } public disable() { } @@ -70,7 +71,7 @@ export class ActionsToolbar extends Widget { const btn = document.createElement(ActionButton.tagName) as ActionButton; btn.setAction(action); (parent ?? this).appendChild(btn); - this.buttons.push(btn); + this.views.push(btn); return btn; } @@ -87,14 +88,14 @@ export class ActionsToolbar extends Widget { private createResponsiveGroup(actions: ActionHandler) { const group = document.createElement(ResponsiveGroup.tagName) as ResponsiveGroup; group.init(actions); - // this.buttons.push(group); + this.views.push(group); this.appendChild(group); } private createReferenceImageGroup(actions: ActionHandler) { const group = document.createElement(ReferenceImageGroup.tagName) as ReferenceImageGroup; group.init(actions); - // this.buttons.push(group); + this.views.push(group); this.appendChild(group); } diff --git a/src/editor-view/actions/button/action-button.ts b/src/editor-view/actions/button/action-button.ts index d5fb5bf..6382f3e 100644 --- a/src/editor-view/actions/button/action-button.ts +++ b/src/editor-view/actions/button/action-button.ts @@ -1,7 +1,8 @@ import { Action } from 'core/action-handler'; +import { ActionView } from '../action-view'; import './action-button.scss'; -export class ActionButton extends HTMLElement { +export class ActionButton extends HTMLElement implements ActionView { public static readonly tagName = 'phred-action-button'; private action: Action; diff --git a/src/editor-view/actions/reference-image/group/reference-image-group.ts b/src/editor-view/actions/reference-image/group/reference-image-group.ts index 80b28a7..1386f4b 100644 --- a/src/editor-view/actions/reference-image/group/reference-image-group.ts +++ b/src/editor-view/actions/reference-image/group/reference-image-group.ts @@ -1,20 +1,22 @@ -import { Action, ActionHandler } from 'core/action-handler'; +import { ActionHandler } from 'core/action-handler'; import { Actions } from 'core/actions'; import { Editor } from 'core/editor'; import { PreferenceKey } from 'core/preferences/preferences.model'; import { PreferencesUtil } from 'core/preferences/preferences.util'; +import { ActionView } from 'editor-view/actions/action-view'; import { ActionButton } from 'editor-view/actions/button/action-button'; +import { ReferenceImageOptions } from '../options/reference-image.options'; import './reference-image-group.scss'; -export class ReferenceImageGroup extends HTMLElement { +export class ReferenceImageGroup extends HTMLElement implements ActionView { public static readonly tagName = 'phred-reference-image-group'; + private button: ActionButton; private optionsButton: HTMLElement; public init(actions: ActionHandler) { this.classList.add('reference-image-group'); - - this.createButton(actions.getAction(Actions.TOGGLE_REF_IMAGE)); + this.button = this.createButton(actions); const optionsButton = this.appendChild(document.createElement('div')); optionsButton.classList.add('open-options-button', 'button', 'action-button'); @@ -22,9 +24,7 @@ export class ReferenceImageGroup extends HTMLElement { optionsButton.appendChild(document.createElement('i')) .classList.add('fas', 'fa-caret-down'); - optionsButton.addEventListener('click', () => { - Editor.referenceImageController.openOptionsPanel(optionsButton); - }); + optionsButton.addEventListener('click', this.openOptions.bind(this)); this.optionsButton = optionsButton; @@ -35,14 +35,24 @@ export class ReferenceImageGroup extends HTMLElement { ); } - private createButton(action: Action) { - if (!action) return null; + private createButton(actions: ActionHandler) { const btn = document.createElement(ActionButton.tagName) as ActionButton; - btn.setAction(action); + btn.setAction(actions.getAction(Actions.TOGGLE_REF_IMAGE)); this.appendChild(btn); return btn; } + public updateState() { + this.button.updateState(); + } + + private openOptions() { + const image = Editor.referenceImageController.image; + const p = (document.createElement(ReferenceImageOptions.tagName) as ReferenceImageOptions); + p.openPopup('Reference Image Options', this.optionsButton, image); + p.addEventListener('closed', () => Editor.prefs.set('referenceImageFilters', image.getFilters())); + } + private onPreferencesChanged(pref: PreferenceKey, value: any) { if (pref === 'referenceImageEnabled') { this.classList.addOrRemove('disabled', value !== true); diff --git a/src/editor-view/actions/responsive/responsive-group.ts b/src/editor-view/actions/responsive/responsive-group.ts index 92d92a3..7ebfd0d 100644 --- a/src/editor-view/actions/responsive/responsive-group.ts +++ b/src/editor-view/actions/responsive/responsive-group.ts @@ -2,18 +2,20 @@ import { Action, ActionHandler } from 'core/action-handler'; import { Actions } from 'core/actions'; import { PreferenceKey } from 'core/preferences/preferences.model'; import { PreferencesUtil } from 'core/preferences/preferences.util'; +import { ActionView } from '../action-view'; import { ActionButton } from '../button/action-button'; import { SizeTemplatesPanel } from '../size-templates/size-templates-panel'; import './responsive-group.scss'; -export class ResponsiveGroup extends HTMLElement { +export class ResponsiveGroup extends HTMLElement implements ActionView { public static readonly tagName = 'phred-responsive-group'; + private toggleButton: ActionButton; private orientationButton: ActionButton; private orientationTemplates: SizeTemplatesPanel; public init(actions: ActionHandler) { - this.createButton(actions.getAction(Actions.TOGGLE_RESPONSIVE)); + this.toggleButton = this.createButton(actions.getAction(Actions.TOGGLE_RESPONSIVE)); this.orientationButton = this.createButton(actions.getAction(Actions.TOGGLE_ORIENTATION)); this.orientationTemplates = this.appendChild(document.createElement(SizeTemplatesPanel.tagName)) as SizeTemplatesPanel; this.orientationTemplates.init(); @@ -21,7 +23,6 @@ export class ResponsiveGroup extends HTMLElement { } private createButton(action: Action) { - if (!action) return null; const btn = document.createElement(ActionButton.tagName) as ActionButton; btn.setAction(action); this.appendChild(btn); @@ -34,6 +35,11 @@ export class ResponsiveGroup extends HTMLElement { this.orientationTemplates.interactable = value === true; } } + + public updateState(): void { + this.toggleButton.updateState(); + this.orientationButton.updateState(); + } } customElements.define(ResponsiveGroup.tagName, ResponsiveGroup);