image panel state

src/core/reference-image.controller.ts

@@ -26,6 +26,7 @@ export class ReferenceImageController {
 	public enable(config: PluginConfig) {
 		this.config = config;
 		this.onPreferencesChanged('responsive', this.prefs.get('responsive'));
+		this.onPreferencesChanged('referenceImageVisible', this.prefs.get('referenceImageVisible'));
 		this.image.enable(this.prefs.get('referenceImageFilters'));
 	}
 
@@ -36,12 +37,20 @@ export class ReferenceImageController {
 	}
 
 	private onPreferencesChanged(key: PreferenceKey, value: any) {
-		if (key === 'responsive') {
-			const size = value ? this.prefs.get('responsiveSize') as Size
-				: { width: this.game.width, height: this.game.height };
-			this.image.source = this.config.referenceImageUrl(size.width, size.height);
-		} else if (key === 'responsiveSize') {
-			this.image.source = this.config.referenceImageUrl(value.width, value.height);
+		switch (key) {
+			case 'referenceImageVisible':
+				this.image.visible = value === true;
+				break;
+			case 'responsive':
+				{
+					const size = value ? this.prefs.get('responsiveSize') as Size
+						: { width: this.game.width, height: this.game.height };
+					this.image.source = this.config.referenceImageUrl(size.width, size.height);
+				}
+				break;
+			case 'responsiveSize':
+				this.image.source = this.config.referenceImageUrl(value.width, value.height);
+				break;
 		}
 	}
 

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

@@ -12,10 +12,15 @@ export class ActionsToolbar extends Widget {
 	public static readonly tagName = 'phred-actions-toolbar';
 
 	private readonly buttons: ActionButton[] = [];
+
+	// TODO add these to a dedicated HTMLElement
 	private orientationBtn: ActionButton;
 	private orientationTemplates: SizeTemplatesPanel;
 
+	// TODO add these to a dedicated HTMLElement
 	private referenceImageGroup: HTMLElement;
+	private referenceImageGroupButton: HTMLElement;
+
 	private leftPanelToggle: HTMLElement;
 	private rightPanelToggle: HTMLElement;
 
@@ -32,6 +37,7 @@ export class ActionsToolbar extends Widget {
 		this.createSeparator();
 
 		this.createButton(actions.getAction(Actions.TOGGLE_RESPONSIVE));
+
 		this.orientationBtn = this.createButton(actions.getAction(Actions.TOGGLE_ORIENTATION));
 		this.orientationTemplates = this.appendChild(document.createElement(SizeTemplatesPanel.tagName)) as SizeTemplatesPanel;
 
@@ -99,6 +105,7 @@ export class ActionsToolbar extends Widget {
 			Editor.referenceImageController.openOptionsPanel(optionsButton);
 		});
 
+		this.referenceImageGroupButton = optionsButton;
 		this.referenceImageGroup = panel;
 	}
 
@@ -128,6 +135,10 @@ export class ActionsToolbar extends Widget {
 				this.referenceImageGroup.classList
 					.addOrRemove('disabled', value !== true);
 				break;
+			case 'referenceImageVisible':
+				this.referenceImageGroupButton.classList
+					.addOrRemove('disabled', value !== true);
+				break;
 		}
 	}
 }

src/scene-view/reference-image/reference-image.scss

@@ -6,7 +6,8 @@ phred-reference-image {
 	bottom: 0;
 	pointer-events: none;
 
-	&.invisible {
+	&.invisible,
+	&.invalid {
 		display: none;
 	}
 

src/scene-view/reference-image/reference-image.ts

@@ -29,10 +29,14 @@ export class ReferenceImage extends HTMLElement implements ReferenceImageFilters
 		if (this._src === value) return;
 		this._src = value;
 		this.image.src = value ?? '';
-		this.classList.addOrRemove('invisible', !value);
+		this.classList.addOrRemove('invalid', !value);
 		if (!value) this.dispatchEvent(new CustomEvent('imageLoaded', { detail: false }));
 	}
 
+	public set visible(value: boolean) {
+		if (this._src) this.classList.addOrRemove('invisible', !value);
+	}
+
 	public set opacity(value: number) {
 		this.filters.opacity = Phaser.Math.clamp(value, 0, 1);
 		this.applyFilters();
@@ -90,12 +94,13 @@ export class ReferenceImage extends HTMLElement implements ReferenceImageFilters
 	}
 
 	private onImageLoadComplete() {
-		this.classList.remove('invisible');
+		this.classList.remove('invalid');
 		this.dispatchEvent(new CustomEvent('imageLoaded', { detail: true }));
 	}
 
 	private onImageLoadError() {
-		this.classList.add('invisible');
+		this._src = null;
+		this.classList.add('invalid');
 		this.dispatchEvent(new CustomEvent('imageLoaded', { detail: false }));
 	}
 }