isolating transformations into a dedicated class

src/editor-view/editor-view.ts

@@ -24,7 +24,7 @@ export class EditorView extends Widget {
 		Editor.data.onSelectedObjectChanged.add(this.selectObject, this);
 		Editor.actions.addContainer(ComponentTags.EditorView, this);
 		this.createElements();
-		this.gameContainer.init(config);
+		this.gameContainer.init(game, config);
 		this.panels.forEach(panel => panel.init(game));
 	}
 
@@ -67,7 +67,7 @@ export class EditorView extends Widget {
 		this._enabled = true;
 
 		this.panels.forEach(panel => panel.enable(config));
-		this.gameContainer.addGame(this.game);
+		this.gameContainer.enable();
 		this.actions.enable();
 		document.body.appendChild(this);
 	}
@@ -76,7 +76,7 @@ export class EditorView extends Widget {
 		if (!this._enabled) return;
 		this._enabled = false;
 		this.actions.disable();
-		this.gameContainer.returnGameToItsParent();
+		this.gameContainer.disable();
 		this.panels.forEach(panel => panel.disable());
 		this.remove()
 	}

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

@@ -18,7 +18,8 @@ export class GameContainer extends HTMLElement {
 
 	private _zoom = 1;
 
-	public init(config:PluginConfig) {
+	public init(game: Phaser.Game, config: PluginConfig) {
+		this.game = game;
 		this._onInputUpFn = this.onInputUp.bind(this);
 		const gp = this.gameEditorParentElement = document.createElement('div');
 		gp.id = 'phred-game-parent';
@@ -27,7 +28,7 @@ export class GameContainer extends HTMLElement {
 		const sa = document.createElement('phred-selection-area') as SelectionArea;
 		this.selectionArea = this.gameEditorParentElement.appendChild(sa);
 		sa.id = 'selection-area';
-		sa.init(config);
+		sa.init(game, config);
 	}
 
 	public setupActions(actions: ActionHandler) {
@@ -53,16 +54,15 @@ export class GameContainer extends HTMLElement {
 		if (key === 'responsive') this.setResponsive(value);
 	}
 
-	public addGame(game: Phaser.Game) {
-		this.game = game;
-		const el = game.canvas.parentElement;
+	public enable() {
+		const el = this.game.canvas.parentElement;
 		this.gameOriginalParentElement = el.parentElement;
 		el.classList.add('phred-game');
 		this.gameEditorParentElement.appendChild(el);
-		this.selectionArea.game = game;
 	}
 
-	public returnGameToItsParent() {
+	// returns the game to its original parent
+	public disable() {
 		const el = this.game.canvas.parentElement;
 		el.classList.remove('phred-game');
 		this.gameOriginalParentElement.appendChild(el);

src/editor-view/selectors/object-selector.ts

@@ -5,20 +5,20 @@ export class ObjectSelector {
 		this.root = root;
 	}
 
-	public trySelectOver(pointer: Phaser.Pointer) {
+	public getObjectAt(x: number, y: number) {
 		const objects: PIXI.DisplayObject[] = [];
-		this.getObjectsUnderPoint(pointer.x, pointer.y, this.root.children, objects);
+		this.getObjectsUnderPoint(x, y, this.root.children, objects);
 
 		const obj = this.setSelectionTree(objects);
-		this.selectObject(obj, true);
-		return obj !== null;
+		// this.selectObject(obj, true);
+		return obj;
 	}
 
-	private selectObject(obj: PIXI.DisplayObject, dispatch: boolean) {
-		console.log(obj);
-		// this.selection.select(obj);
-		// if (dispatch) Editor.data.selectObject(obj, DataOrigin.SCENE);
-	}
+	// private selectObject(obj: PIXI.DisplayObject, dispatch: boolean) {
+	// 	console.log(obj?.name);
+	// 	// this.selection.select(obj);
+	// 	// if (dispatch) Editor.data.selectObject(obj, DataOrigin.SCENE);
+	// }
 
 	private getObjectsUnderPoint(x: number, y: number, children: PIXI.DisplayObject[], objects: PIXI.DisplayObject[]) {
 		for (let i = children.length - 1; i >= 0; i--) {
@@ -30,10 +30,13 @@ export class ObjectSelector {
 		}
 	}
 
+
+	/// ----
+
 	private _lastSelectionTree: PIXI.DisplayObject[];
 	private _lastSelectionTreeIndex = -1;
 
-	public setSelectionTree(selectionTree: PIXI.DisplayObject[]) {
+	private setSelectionTree(selectionTree: PIXI.DisplayObject[]) {
 		if (!selectionTree) {
 			this._lastSelectionTree = null;
 			this._lastSelectionTreeIndex = - 1;

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

@@ -1,16 +1,21 @@
-import { PluginConfig } from 'plugin.model';
+import { PluginConfig, Point } from 'plugin.model';
 import { ObjectSelector } from './object-selector';
 import './selection-area.scss';
+import { SelectionUtil } from './selection.util';
 import { NewSelection } from './selection/new-selection';
 
 export class SelectionArea extends HTMLElement {
-	public game: Phaser.Game;
+	private game: Phaser.Game;
 	private selection: NewSelection;
 	private selector: ObjectSelector;
+	private _touchPoint: Point = { x: 0, y: 0 };
 
-	public init(config: PluginConfig) {
+	public init(game: Phaser.Game, config: PluginConfig) {
+		this.game = game;
+		SelectionUtil.init(game, this);
 		this.selector = new ObjectSelector(config.root);
 		this.selection = document.createElement('phred-selection') as NewSelection;
+		this.selection.init();
 	}
 
 	// TODO move it to init / enable
@@ -21,11 +26,14 @@ export class SelectionArea extends HTMLElement {
 
 	private onClick(e: PointerEvent) {
 		const game = this.game;
-		const gx = game.width * e.offsetX / this.clientWidth;
-		const gy = game.height * e.offsetY / this.clientHeight;
+		const p = this._touchPoint;
+		SelectionUtil.pointFromAreaToGame(e.offsetX, e.offsetY, p);
 
-		game.add.graphics(gx, gy)
+		game.add.graphics(p.x, p.y)
 			.beginFill(0xFFFF00).drawCircle(0, 0, 20);
+
+		const obj = this.selector.getObjectAt(p.x, p.y);
+		this.selection.object = obj;
 	}
 }
 

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

@@ -0,0 +1,18 @@
+import { Point } from 'plugin.model';
+
+class SelectionUtilClass {
+	private game: Phaser.Game;
+	private selectionArea: HTMLElement;
+
+	public init(game: Phaser.Game, selectionArea: HTMLElement) {
+		this.game = game;
+		this.selectionArea = selectionArea;
+	}
+
+	public pointFromAreaToGame(x: number, y: number, out: Point) {
+		out.x = this.game.width * x / this.selectionArea.clientWidth;
+		out.y = this.game.height * y / this.selectionArea.clientHeight;
+	}
+}
+
+export const SelectionUtil = new SelectionUtilClass();

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

@@ -1,9 +1,21 @@
 import './selection.scss';
 
 export class NewSelection extends HTMLElement {
-	connectedCallback() {
+	private _object: PIXI.DisplayObject;
+
+	public init() {
 		this.classList.add('selector');
 	}
+
+	public set object(obj: PIXI.DisplayObject) {
+		if (!obj) {
+			this._object = null;
+			this.style.display = 'none';
+			return;
+		}
+		console.log(obj.name);
+		this.style.display = 'block';
+	}
 }
 
 customElements.define('phred-selection', NewSelection);

src/plugin.model.ts

@@ -4,3 +4,8 @@ export interface PluginConfig {
 	pauseGame: boolean;
 	clearPrefs: boolean;
 }
+
+export interface Point {
+	x: number;
+	y: number
+}