gizmos interface

src/editor-view/game-container/game-container.ts

@@ -25,9 +25,8 @@ export class GameContainer extends HTMLElement {
 		gp.id = 'phred-game-parent';
 		this.appendChild(gp);
 
-		const sa = document.createElement('phred-selection-area') as SelectionArea;
+		const sa = document.createElement(SelectionArea.tagName) as SelectionArea;
 		this.selectionArea = this.gameEditorParentElement.appendChild(sa);
-		sa.id = 'selection-area';
 		sa.init(game);
 	}
 

src/editor-view/selectors/gizmos/gizmo.ts

@@ -0,0 +1,6 @@
+export const GIZMO_MOVE = 0;
+export const GIZMO_SCALE = 1;
+
+export interface Gizmo extends HTMLElement {
+	get type(): number;
+}

src/editor-view/selectors/gizmos/scale-gizmo.scss

@@ -0,0 +1,51 @@
+$handle-size: 15px;
+$size: 20px;
+$padding: $size - $handle-size;
+
+phred-scale-gizmo {
+	position: absolute;
+	display: block;
+	box-sizing: border-box;
+	width: $size;
+	height: $size;
+	margin: -($size + $handle-size * 0.5)/2;
+	background-color: transparent;
+	pointer-events: all;
+
+	.handle {
+		box-sizing: border-box;
+		width: $handle-size;
+		height: $handle-size;
+		background-color: chocolate;
+		border: 1px solid white;
+		pointer-events: none;
+	}
+
+	&.top-left {
+		padding: $padding 0 0 $padding;
+		top: 0;
+		left: 0;
+		cursor: nwse-resize;
+	}
+
+	&.top-right {
+		padding: $padding $padding 0 0;
+		top: 0;
+		right: 0;
+		cursor: nesw-resize;
+	}
+
+	&.bottom-left {
+		padding: 0 0 $padding $padding;
+		bottom: 0;
+		left: 0;
+		cursor: nesw-resize;
+	}
+
+	&.bottom-right {
+		padding: 0 $padding $padding 0;
+		bottom: 0;
+		right: 0;
+		cursor: nwse-resize;
+	}
+}

src/editor-view/selectors/gizmos/scale-gizmo.ts

@@ -0,0 +1,14 @@
+import { Gizmo, GIZMO_SCALE } from './gizmo';
+import './scale-gizmo.scss';
+
+export class ScaleGizmo extends HTMLElement implements Gizmo {
+	public static readonly tagName = 'phred-scale-gizmo';
+	public readonly type = GIZMO_SCALE;
+
+	public init(corner: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right') {
+		this.classList.add(corner);
+		this.appendChild(document.createElement('div')).classList.add('handle');
+	}
+}
+
+customElements.define(ScaleGizmo.tagName, ScaleGizmo);

src/editor-view/selectors/gizmos/selection-gizmo.scss

@@ -0,0 +1,8 @@
+phred-selection-gizmo {
+	position: absolute;
+	display: none;
+	padding: 0;
+	margin: 0;
+	border: 2px solid white;
+	box-sizing: border-box;
+}

src/editor-view/selectors/gizmo/gizmo.ts → src/editor-view/selectors/gizmos/selection-gizmo.ts

@@ -1,7 +1,9 @@
 import { Rect } from 'plugin.model';
 import { Selection, SelectionChangedEvent } from '../selection';
 import { SelectionUtil } from '../selection.util';
-import './gizmo.scss';
+import { Gizmo, GIZMO_MOVE } from './gizmo';
+import { ScaleGizmo } from './scale-gizmo';
+import './selection-gizmo.scss';
 
 // interface PropertiesCache {
 // 	x: number;
@@ -12,7 +14,10 @@ import './gizmo.scss';
 // 	scaleY: number;
 // };
 
-export class Gizmo extends HTMLElement {
+export class SelectionGizmo extends HTMLElement implements Gizmo {
+	public static readonly tagName = 'phred-selection-gizmo';
+	public readonly type = GIZMO_MOVE;
+
 	private _rect: Rect = { x: 0, y: 0, width: 0, height: 0 };
 	private handlers: HTMLElement[] = [];
 
@@ -28,24 +33,20 @@ export class Gizmo extends HTMLElement {
 	}
 
 	private createResizeHandlers(handlers: HTMLElement[]) {
-		const tl = this.appendChild(document.createElement('div'));
-		tl.appendChild(document.createElement('div')).classList.add('handle');
-		tl.classList.add('scale', 'top-left');
+		const tl = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
+		tl.init('top-left');
 		handlers.push(tl);
 
-		const tr = this.appendChild(document.createElement('div'));
-		tr.appendChild(document.createElement('div')).classList.add('handle');
-		tr.classList.add('scale', 'top-right');
+		const tr = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
+		tr.init('top-right');
 		handlers.push(tr);
 
-		const bl = this.appendChild(document.createElement('div'));
-		bl.appendChild(document.createElement('div')).classList.add('handle');
-		bl.classList.add('scale', 'bottom-left');
+		const bl = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
+		bl.init('bottom-left');
 		handlers.push(bl);
 
-		const br = this.appendChild(document.createElement('div'));
-		br.appendChild(document.createElement('div')).classList.add('handle');
-		br.classList.add('scale', 'bottom-right');
+		const br = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
+		br.init('bottom-right');
 		handlers.push(br);
 	}
 
@@ -86,4 +87,4 @@ export class Gizmo extends HTMLElement {
 	}
 }
 
-customElements.define('phred-gizmo', Gizmo);
+customElements.define(SelectionGizmo.tagName, SelectionGizmo);

src/editor-view/selectors/handlers/dragging-handler.ts

@@ -0,0 +1,5 @@
+export interface DraggingHandler {
+	startHandling(e: MouseEvent): void;
+	handle(e: MouseEvent): void;
+	stopHandling(e: MouseEvent): void;
+}

src/editor-view/selectors/handlers/move.handler.ts

@@ -1,20 +1,21 @@
 import { Point } from 'plugin.model';
 import { Selection } from '../selection';
 import { SelectionUtil } from '../selection.util';
+import { DraggingHandler } from './dragging-handler';
 
-export class MoveHandler {
+export class MoveHandler implements DraggingHandler {
 	private readonly selection: Selection;
 	private _point: Point = { x: 0, y: 0 };
 
 	public constructor(selection: Selection) {
 		this.selection = selection;
 	}
 
-	public startMoving(e: MouseEvent) {
+	public startHandling(e: MouseEvent) {
 		SelectionUtil.mouseEventToGamePoint(e, this._point);
 	}
 
-	public move(e: MouseEvent) {
+	public handle(e: MouseEvent) {
 		const lastPoint = this._point;
 		const newPoint = SelectionUtil.mouseEventToGamePoint(e, { x: 0, y: 0 });
 
@@ -25,4 +26,6 @@ export class MoveHandler {
 		const object = this.selection.object;
 		object.position.set(object.x + dx, object.y + dy);
 	}
+
+	public stopHandling() { }
 }

src/editor-view/selectors/handlers/scale.handler.ts

@@ -0,0 +1,12 @@
+import { DraggingHandler } from './dragging-handler';
+
+export class ScaleHandler implements DraggingHandler {
+	public startHandling(e: MouseEvent): void {
+	}
+
+	public handle(e: MouseEvent): void {
+	}
+
+	public stopHandling(e: MouseEvent): void {
+	}
+}

src/editor-view/selectors/handlers/selection.handler.ts

@@ -1,8 +1,6 @@
-import { Point } from 'plugin.model';
 import { Selection } from '../selection';
 import { SelectionUtil } from '../selection.util';
 
-
 export class SelectionHandler {
 	private readonly selection: Selection;
 	private root: Container;

src/editor-view/selectors/selection-area.ts

@@ -1,6 +1,9 @@
 import { PluginConfig } from 'plugin.model';
-import { Gizmo } from './gizmo/gizmo';
+import { Gizmo, GIZMO_SCALE } from './gizmos/gizmo';
+import { SelectionGizmo } from './gizmos/selection-gizmo';
+import { DraggingHandler } from './handlers/dragging-handler';
 import { MoveHandler } from './handlers/move.handler';
+import { ScaleHandler } from './handlers/scale.handler';
 import { SelectionHandler } from './handlers/selection.handler';
 import { Selection } from './selection';
 import './selection-area.scss';
@@ -9,12 +12,15 @@ import { SelectionUtil } from './selection.util';
 const INTERVAL = 1000 / 60;	// FPS
 
 export class SelectionArea extends HTMLElement {
-	private gizmo: Gizmo;
+	public static readonly tagName = 'phred-selection-area';
+
+	private gizmo: SelectionGizmo;
 	private interval: any;
 
 	private selection: Selection;
 	private selectionHandler: SelectionHandler;
 	private moveHandler: MoveHandler;
+	private scaleHandler: ScaleHandler;
 
 	// #region Initialization
 
@@ -42,10 +48,11 @@ export class SelectionArea extends HTMLElement {
 	private createHandlers(selection: Selection) {
 		this.selectionHandler = new SelectionHandler(selection);
 		this.moveHandler = new MoveHandler(selection);
+		this.scaleHandler = new ScaleHandler();
 	}
 
 	private createViews(selection: Selection) {
-		this.gizmo = document.createElement('phred-gizmo') as Gizmo;
+		this.gizmo = document.createElement(SelectionGizmo.tagName) as SelectionGizmo;
 		this.appendChild(this.gizmo);
 		this.gizmo.init(selection);
 	}
@@ -63,18 +70,22 @@ export class SelectionArea extends HTMLElement {
 	private _mouseIsDown = false;
 	private _isDragging = false;
 	private _hasSelection = false;
+	private _handler: DraggingHandler;
 
 	private onMouseDown(e: MouseEvent) {
 		if (e.button !== 0) return;
 		this._mouseIsDown = true;
 		this._isDragging = false;
 		this._hasSelection = this.selectionHandler.isOverSelection(e);
+		this._handler = (e.target as Gizmo).type === GIZMO_SCALE
+			? this.scaleHandler : this.moveHandler;
 	}
 
 	private onMouseUp(e: MouseEvent) {
 		if (e.button !== 0) return;
 		this._mouseIsDown = false;
-		this.gizmo.stopMoving();
+		this._handler?.stopHandling(e);
+		this._handler = null;
 		if (!(this._hasSelection && this._isDragging)) {
 			this._hasSelection = this.selectionHandler.selectAt(e);
 		}
@@ -88,13 +99,14 @@ export class SelectionArea extends HTMLElement {
 			if (!this._hasSelection) {
 				this._hasSelection = this.selectionHandler.selectAt(e);
 			}
-			this.moveHandler.startMoving(e);
+			console.log(this._handler);
+			this._handler.startHandling(e);
 			this.gizmo.startMoving();
 		}
-		this.moveHandler.move(e);
+		this._handler.handle(e);
 	}
 
 	// #endregion
 }
 
-customElements.define('phred-selection-area', SelectionArea);
+customElements.define(SelectionArea.tagName, SelectionArea);

src/scene-view/selection/scale/scale.gizmo.ts

@@ -1,4 +1,4 @@
-export class ScaleGizmo extends Phaser.Graphics {
+export class OldScaleGizmo extends Phaser.Graphics {
 	private readonly _cursor: string;
 
 	constructor(game: Phaser.Game, public readonly factorH: number, public readonly factorV: number) {