added action view

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':

src/editor-view/actions/action-view.ts

@@ -0,0 +1,3 @@
+export interface ActionView extends HTMLElement {
+	updateState(): void;
+}

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

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;

src/editor-view/actions/reference-image/group/reference-image-group.ts

@@ -1,30 +1,30 @@
-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');
 
 		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);

src/editor-view/actions/responsive/responsive-group.ts

@@ -2,26 +2,27 @@ 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();
 		PreferencesUtil.setupPreferences(['responsive'], this.onPreferencesChanged, this);
 	}
 
 	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);