reference image panel alpha/saturation option view

src/old-ref-image/reference-image.controller.ts

@@ -2,17 +2,17 @@ import { ActionHandler } from 'core/action-handler';
 import { ActionsToolbar } from 'editor-view/actions/actions-toolbar';
 import { OldReferenceImagePanel } from 'old-ref-image/reference-image/reference-image-panel';
 import { PluginConfig } from 'plugin.model';
-import { ReferenceImage } from 'scene-view/reference-image';
+import { OldReferenceImage } from './reference-image';
 
 export class OldReferenceImageController {
-	private readonly referenceImage: ReferenceImage;
+	private readonly referenceImage: OldReferenceImage;
 	private readonly panel: OldReferenceImagePanel;
 	private actionsToolbar: ActionsToolbar;
 
 	private image: PIXI.Sprite;
 
 	constructor(game: Phaser.Game, config: PluginConfig) {
-		this.referenceImage = new ReferenceImage(game, config.root);
+		this.referenceImage = new OldReferenceImage(game, config.root);
 		this.panel = document.createElement(OldReferenceImagePanel.tagName) as OldReferenceImagePanel;
 		this.panel.init(this.referenceImage);
 	}

src/scene-view/reference-image.ts → src/old-ref-image/reference-image.ts

@@ -1,7 +1,7 @@
 import { Editor } from 'core/editor';
 import { PreferenceKey } from 'core/preferences';
 
-export class ReferenceImage extends Phaser.Group {
+export class OldReferenceImage extends Phaser.Group {
 	private _parent: PIXI.DisplayObjectContainer;
 
 	public set image(value: Phaser.Image | Phaser.Sprite) {

src/old-ref-image/reference-image/reference-image-panel.ts

@@ -2,7 +2,7 @@ import { ActionHandler } from 'core/action-handler';
 import { Actions } from 'core/actions';
 import { Editor } from 'core/editor';
 import { PreferenceKey } from 'core/preferences';
-import { ReferenceImage } from 'scene-view/reference-image';
+import { OldReferenceImage } from 'old-ref-image/reference-image';
 import { ActionButton } from '../../editor-view/actions/button/action-button';
 import './reference-image-panel.scss';
 
@@ -12,7 +12,7 @@ export class OldReferenceImagePanel extends HTMLElement {
 	private button: ActionButton;
 	private slider: HTMLInputElement;
 
-	public init(image: ReferenceImage) {
+	public init(image: OldReferenceImage) {
 		const btn = this.button = document.createElement(ActionButton.tagName) as ActionButton;
 		this.appendChild(btn);
 

src/reference-image/reference-image.panel.scss

@@ -6,14 +6,25 @@ phred-reference-image-panel.popup-container {
 	background-color: transparent;
 	phred-popup {
 		position: absolute;
-		width: 200px;
+		width: 220px;
 		height: 160px;
 		margin-left: -200px;
 		padding: 10px;
 
 		h1 {
 			font-size: 12px;
 			text-align: left;
+			margin-bottom: 16px;
+		}
+
+		.option {
+			font-size: 12px;
+			display: flex;
+			justify-content: stretch;
+			align-items: center;
+			.title {
+				width: 100px;
+			}
 		}
 	}
 }

src/reference-image/reference-image.panel.ts

@@ -8,33 +8,43 @@ export class ReferenceImagePanel extends PopupContainer {
 		this.classList.add('popup-container');
 	}
 
-	public openPopup(title:string, opener: HTMLElement) {
+	public openPopup(title: string, opener: HTMLElement) {
 		super.openPopup(title);
 		const b = opener.getBoundingClientRect();
 		this.popup.style.top = `${b.bottom}px`;
 		this.popup.style.left = `${b.right}px`;
 	}
 
-	// protected createPopup() {
-	// 	const popup = super.createPopup();
-	// 	popup.appendChild(document.createElement('h1')).innerHTML = 'Reference image';
+	protected createPopup(title: string) {
+		const popup = super.createPopup(title);
 
-	// 	// const content = popup.content;
-	// 	// content.appendChild(this.createLine('Alpha', this.createAlphaSlider()));
+		const content = popup.content;
+		content.appendChild(this.createOption('Alpha', this.createSlider(0, 1, 0.05, 1)));
+		content.appendChild(this.createOption('Saturation', this.createSlider(0, 1, 0.05, 1)));
 
-	// 	return popup;
-	// }
+		return popup;
+	}
+
+	private createOption(title: string, content: HTMLElement) {
+		const option = document.createElement('div');
+		option.classList.add('option');
+
+		const label = option.appendChild(document.createElement('label'));
+		label.classList.add('title');
+		label.innerText = title;
 
-	private createLine(title: string, content: HTMLElement) {
+		option.appendChild(content);
 
+		return option;
 	}
 
-	private createAlphaSlider() {
+	private createSlider(min: number, max: number, step: number, value: number) {
 		const slider = document.createElement('input');
 		slider.type = 'range';
-		slider.min = '0';
-		slider.max = '1';
-		slider.step = '0.05';
+		slider.min = min.toString();
+		slider.max = max.toString();
+		slider.step = step.toString();
+		slider.value = value.toString();
 		// slider.oninput = () => image.alpha = parseFloat(slider.value);
 		// slider.value = image.alpha.toString();
 		return slider;