scaling from bottom right corner

Author: kleber-swf

example/game.js

@@ -1,6 +1,6 @@
 const game = new Phaser.Game({
 	width: 1920,
-	height: 1080,
+	height: 1920,
 	renderer: Phaser.CANVAS,
 	parent: 'game',
 	scaleMode: Phaser.ScaleManager.USER_SCALE,
@@ -44,8 +44,21 @@ function create() {
 	const DIST = 400;
 
 	const parent = new Phaser.Group(game, game.world);
-	parent.position.set(100, 300)
-
+	parent.position.set(100, 300);
+
+	// parent.top = 0;
+	// game.tweens.create(parent.scale)
+	// 	.to({ x: 0.5, y: 0.5 }, 2000)
+	// 	.to({ x: 1, y: 1 }, 2000)
+	// 	.repeatAll(-1)
+	// 	.start();
+	
+	// game.tweens.create(parent)
+	// 	.to({ top: 0 }, 2000)
+	// 	.to({ top: 0 }, 2000)
+	// 	.repeatAll(-1)
+	// 	.start();
+	
 	// 0   0
 	let child = el(DIST * 0, DIST * 0, SIZE, SIZE, parent, 'child-a0-p0 child-a0-p0 child-a0-p0 child-a0-p0');
 
@@ -86,16 +99,24 @@ function create() {
 	child = el(DIST * 2, DIST * 2, SIZE, SIZE, parent, 'child-a1-p1');
 	child.anchor.set(1, 1);
 	child.pivot.set(SIZE, SIZE);
-
-
+	
+	
 	child = el(DIST * 3, 100, SIZE * 2, SIZE * 2, parent, 'child');
+	parent.setChildIndex(child, 0)
+	child.anchor.set(1, 1);
 	child.pivot.set(SIZE * 1.5, SIZE * 1.5);
+	// game.tweens.create(child.scale)
+	// 	.to({ x: 0.5, y: 0.5 }, 2000)
+	// 	.to({ x: 1, y: 1 }, 2000)
+	// 	.repeatAll(-1)
+	// 	.start();
+
 
 	child = el(DIST * 3, 500, SIZE, SIZE, parent, 'child');
 	child.scale.set(-1, -1);
 
 
-	child = game.add.sprite(1180, 925, 'phaser');
+	child = game.add.sprite(900, 600, 'phaser');
 	child.name = 'sprite';
 	child.scale.set(2, 2);
 

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

@@ -1,12 +1,28 @@
 import { Gizmo, GIZMO_SCALE } from './gizmo';
 import './scale-gizmo.scss';
 
+export enum Corner {
+	TopLeft,
+	TopRight,
+	BottomLeft,
+	BottomRight,
+}
+
 export class ScaleGizmo extends HTMLElement implements Gizmo {
 	public static readonly tagName = 'phred-scale-gizmo';
 	public readonly type = GIZMO_SCALE;
+	public corner: Corner;
 
-	public init(corner: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right') {
-		this.classList.add(corner);
+	public init(corner: Corner) {
+		this.corner = corner ?? 0;
+		let clazz = '';
+		switch (corner) {
+			case Corner.TopRight: clazz = 'top-right'; break;
+			case Corner.BottomLeft: clazz = 'bottom-left'; break;
+			case Corner.BottomRight: clazz = 'bottom-right'; break;
+			default: clazz = 'top-left';
+		}
+		this.classList.add(clazz);
 		this.appendChild(document.createElement('div')).classList.add('handle');
 	}
 }

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

@@ -2,7 +2,7 @@ import { Rect } from 'plugin.model';
 import { Selection, SelectionChangedEvent } from '../selection';
 import { SelectionUtil } from '../selection.util';
 import { Gizmo, GIZMO_MOVE } from './gizmo';
-import { ScaleGizmo } from './scale-gizmo';
+import { Corner, ScaleGizmo } from './scale-gizmo';
 import './selection-gizmo.scss';
 
 // interface PropertiesCache {
@@ -18,9 +18,12 @@ export class SelectionGizmo extends HTMLElement implements Gizmo {
 	public static readonly tagName = 'phred-selection-gizmo';
 	public readonly type = GIZMO_MOVE;
 
+	private _isOver = false;
 	private _rect: Rect = { x: 0, y: 0, width: 0, height: 0 };
 	private handlers: HTMLElement[] = [];
 
+	public get isOver() { return this._isOver; }
+
 	// private _selectionPropertiesCache: PropertiesCache = {
 	// 	x: 0, y: 0, width: 0, height: 0, scaleX: 0, scaleY: 0
 	// }
@@ -29,24 +32,27 @@ export class SelectionGizmo extends HTMLElement implements Gizmo {
 		selection.addEventListener('changed', this.onSelectionChanged.bind(this));
 		this.classList.add('selector');
 
+		this.addEventListener('mouseover', this.onMouseOver.bind(this));
+		this.addEventListener('mouseout', this.onMouseOut.bind(this));
+
 		this.createResizeHandlers(this.handlers);
 	}
 
 	private createResizeHandlers(handlers: HTMLElement[]) {
 		const tl = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
-		tl.init('top-left');
+		tl.init(Corner.TopLeft);
 		handlers.push(tl);
 
 		const tr = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
-		tr.init('top-right');
+		tr.init(Corner.TopRight);
 		handlers.push(tr);
 
 		const bl = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
-		bl.init('bottom-left');
+		bl.init(Corner.BottomLeft);
 		handlers.push(bl);
 
 		const br = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
-		br.init('bottom-right');
+		br.init(Corner.BottomRight);
 		handlers.push(br);
 	}
 
@@ -75,16 +81,26 @@ export class SelectionGizmo extends HTMLElement implements Gizmo {
 	}
 
 	public startMoving() {
+		this.style.pointerEvents = 'none';
 		this.handlers.forEach(h => h.style.pointerEvents = 'none');
 	}
-
+	
 	public stopMoving() {
+		this.style.pointerEvents = 'all';
 		this.handlers.forEach(h => h.style.pointerEvents = 'all');
 	}
 
+
+	// #region Event Listeners
+
 	public onSelectionChanged(event: SelectionChangedEvent) {
 		this.style.display = event.detail ? 'block' : 'none';
 	}
+
+	public onMouseOver() { this._isOver = true; }
+	public onMouseOut() { this._isOver = false; }
+
+	// #endregion
 }
 
 customElements.define(SelectionGizmo.tagName, SelectionGizmo);

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

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

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

@@ -1,17 +1,13 @@
 import { Point } from 'plugin.model';
-import { Selection } from '../selection';
 import { SelectionUtil } from '../selection.util';
 import { DraggingHandler } from './dragging-handler';
 
 export class MoveHandler implements DraggingHandler {
-	private readonly selection: Selection;
 	private _point: Point = { x: 0, y: 0 };
+	private _object: PIXI.DisplayObject;
 
-	public constructor(selection: Selection) {
-		this.selection = selection;
-	}
-
-	public startHandling(e: MouseEvent) {
+	public startHandling(e: MouseEvent, object: PIXI.DisplayObject) {
+		this._object = object;
 		SelectionUtil.mouseEventToGamePoint(e, this._point);
 	}
 
@@ -23,9 +19,8 @@ export class MoveHandler implements DraggingHandler {
 		const dy = newPoint.y - lastPoint.y
 		this._point = newPoint;
 
-		const object = this.selection.object;
-		object.position.set(object.x + dx, object.y + dy);
+		this._object.position.set(this._object.x + dx, this._object.y + dy);
 	}
 
-	public stopHandling() { }
+	public stopHandling() { this._object = null; }
 }

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

@@ -1,12 +1,55 @@
+import { Point } from 'plugin.model';
+import { ScaleGizmo } from '../gizmos/scale-gizmo';
+import { SelectionUtil } from '../selection.util';
 import { DraggingHandler } from './dragging-handler';
 
 export class ScaleHandler implements DraggingHandler {
-	public startHandling(e: MouseEvent): void {
+	private _point: Point;
+	private _object: PIXI.DisplayObject;
+	private _isGroup: boolean;
+	private _top: number;
+	private _left: number;
+
+	public startHandling(e: MouseEvent, object: PIXI.DisplayObject): void {
+		const corner = (e.target as ScaleGizmo).corner;
+		this._object = object;
+
+		object.position.set(object.x - object.pivot.x, object.y - object.pivot.y);
+		object.pivot.set(0, 0);
+
+		this._isGroup = !object.anchor;
+		if (this._isGroup) {
+			this._top = object.top;
+			this._left = object.left;
+		}
 	}
 
 	public handle(e: MouseEvent): void {
+		if (!this._point) {
+			this._point = SelectionUtil.mouseEventToGamePoint(e, { x: 0, y: 0 });
+		}
+
+		const lastPoint = this._point;
+		const newPoint = SelectionUtil.mouseEventToGamePoint(e, { x: 0, y: 0 });
+
+		const dx = newPoint.x - lastPoint.x
+		const dy = newPoint.y - lastPoint.y
+		this._point = newPoint;
+
+		this._object.updateTransform();
+		this._object.width = this._object.width + dx;
+		this._object.height = this._object.height + dy;
+
+		if (this._isGroup) {
+			this._object.top = this._top;
+			this._object.left = this._left;
+		}
+		this._object.updateTransform();
 	}
 
 	public stopHandling(e: MouseEvent): void {
+		this._point = null;
+		if (!this._object) return;
+		// TODO reset object
 	}
 }

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

@@ -47,7 +47,7 @@ export class SelectionArea extends HTMLElement {
 
 	private createHandlers(selection: Selection) {
 		this.selectionHandler = new SelectionHandler(selection);
-		this.moveHandler = new MoveHandler(selection);
+		this.moveHandler = new MoveHandler();
 		this.scaleHandler = new ScaleHandler();
 	}
 
@@ -76,7 +76,7 @@ export class SelectionArea extends HTMLElement {
 		if (e.button !== 0) return;
 		this._mouseIsDown = true;
 		this._isDragging = false;
-		this._hasSelection = this.selectionHandler.isOverSelection(e);
+		this._hasSelection = this.gizmo.isOver;
 		this._handler = (e.target as Gizmo).type === GIZMO_SCALE
 			? this.scaleHandler : this.moveHandler;
 	}
@@ -86,6 +86,7 @@ export class SelectionArea extends HTMLElement {
 		this._mouseIsDown = false;
 		this._handler?.stopHandling(e);
 		this._handler = null;
+		this.gizmo.stopMoving();
 		if (!(this._hasSelection && this._isDragging)) {
 			this._hasSelection = this.selectionHandler.selectAt(e);
 		}
@@ -99,9 +100,11 @@ export class SelectionArea extends HTMLElement {
 			if (!this._hasSelection) {
 				this._hasSelection = this.selectionHandler.selectAt(e);
 			}
-			console.log(this._handler);
-			this._handler.startHandling(e);
-			this.gizmo.startMoving();
+			if (this._hasSelection) {
+				this._handler.startHandling(e, this.selection.object);
+				this.gizmo.startMoving();
+				return;
+			}
 		}
 		this._handler.handle(e);
 	}

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

@@ -10,6 +10,7 @@ class SelectionUtilClass {
 	}
 
 	public mouseEventToGamePoint(e: MouseEvent, out: Point) {
+		// TODO test if offsetLeft/offsetRight is different than 0
 		return SelectionUtil.pointFromAreaToGame(
 			(e.target as HTMLElement).offsetLeft + e.offsetX,
 			(e.target as HTMLElement).offsetTop + e.offsetY,

src/global.d.ts

@@ -11,6 +11,12 @@ declare namespace PIXI {
 		inputEnabled?: boolean;
 		getBounds?(): Rectangle;
 		children?: DisplayObject[];
+		top: number;
+		left: number;
+		bottom: number;
+		right: number;
+		width: number;
+		height: number;
 	}
 }