selection transform from html to canvas

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

@@ -1,6 +1,7 @@
 import { ComponentTags } from 'component-tags';
 import { ActionHandler } from 'core/action-handler';
 import { Actions } from 'core/actions';
+import { SelectionArea } from 'editor-view/selectors/selection-area';
 import './game-container.scss';
 
 const MIN_SCALE = 0.5;
@@ -9,8 +10,11 @@ const MAX_SCALE = 5;
 export class GameContainer extends HTMLElement {
 	private gameOriginalParentElement: HTMLElement;
 	private gameEditorParentElement: HTMLElement;
+	private selectionArea: SelectionArea;
 	private game: Phaser.Game;
 
+	private _zoom = 1;
+
 	public init() {
 		this._onInputUpFn = this.onInputUp.bind(this);
 		const el = this.gameEditorParentElement = document.createElement('div');
@@ -19,7 +23,13 @@ export class GameContainer extends HTMLElement {
 	}
 
 	public setupActions(actions: ActionHandler) {
-		actions.setActionCommand(Actions.ZOOM, (e) => this.zoom(-(e as WheelEvent).deltaY));
+		actions.setActionCommand(Actions.ZOOM, (e) => {
+			const w = e as WheelEvent;
+			// TODO scale anchor
+			// this.zoom(-w.deltaY, w.offsetX, w.offsetY);
+			this.zoom(-w.deltaY);
+		});
+
 		actions.setActionCommand(Actions.ZOOM_IN, () => this.zoom(100));
 		actions.setActionCommand(Actions.ZOOM_OUT, () => this.zoom(-100));
 
@@ -35,7 +45,8 @@ export class GameContainer extends HTMLElement {
 		el.classList.add('phred-game');
 		this.gameEditorParentElement.appendChild(el);
 
-		this.gameEditorParentElement.appendChild(document.createElement('phred-selection-area'));
+		this.selectionArea = this.gameEditorParentElement.appendChild(document.createElement('phred-selection-area')) as SelectionArea;
+		this.selectionArea.game = this.game;
 	}
 
 	public returnGameToItsParent() {
@@ -46,11 +57,12 @@ export class GameContainer extends HTMLElement {
 		this.game = null;
 	}
 
-	private _currentScale = 1;
-	private zoom(amount: number) {
+	private zoom(amount: number, ox = 0, oy = 0) {
 		const el = this.gameEditorParentElement;
-		this._currentScale = Phaser.Math.clamp(this._currentScale + amount * 0.001, MIN_SCALE, MAX_SCALE);
-		el.style.transform = `scale(${this._currentScale * 100}%)`; // TODO pivot
+		this._zoom = Phaser.Math.clamp(this._zoom + amount * 0.001, MIN_SCALE, MAX_SCALE);
+		el.style.transform = `scale(${this._zoom * 100}%)`;
+		el.style.transformOrigin = `${ox}px ${oy}px`;
+		this.selectionArea.zoom = this._zoom;
 		// this.game.scale.refresh();
 	}
 

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

@@ -2,11 +2,36 @@ import './selection-area.scss';
 import { NewSelection } from './selection/selection';
 
 export class SelectionArea extends HTMLElement {
-	selection: NewSelection;
+	public zoom = 1;
+	private selection: NewSelection;
+
+	private _game: Phaser.Game;
+	private _scaleFactor: { x: number, y: number };
+
+	public set game(value: Phaser.Game) {
+		this._game = value;
+		// TODO investigate why this needed
+		setTimeout(() => {
+			const sf = value.scale.scaleFactor;
+			this._scaleFactor = { x: sf.x, y: sf.y };
+		}, 100);
+	}
 
 	connectedCallback() {
 		this.selection = document.createElement('phred-selection') as NewSelection;
 		this.appendChild(this.selection);
+		this.addEventListener('click', this.onClick.bind(this))
+	}
+
+	private onClick(e: PointerEvent) {
+		const game = this._game;
+
+		console.log(e.offsetX, e.offsetY, this.zoom);
+		const sf = this._scaleFactor;
+
+		// TODO there is a slight difference with zoom >= ~2.5x. Why?
+		game.add.graphics(e.offsetX * sf.x, e.offsetY * sf.y)
+			.beginFill(0xFFFF00).drawCircle(0, 0, 20);
 	}
 }