horizontal scale (WIP)

Author: kleber-swf

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

@@ -1,27 +1,41 @@
 import { Gizmo, GIZMO_SCALE } from './gizmo';
 import './scale-gizmo.scss';
 
-export enum Corner {
-	TopLeft,
-	TopRight,
-	BottomLeft,
-	BottomRight,
+export enum HSide {
+	Left = 0,
+	Center = 0.5,
+	Right = 1,
+}
+
+export enum VSide {
+	Top = 0,
+	Middle = 0.5,
+	Bottom = 1,
 }
 
 export class ScaleGizmo extends HTMLElement implements Gizmo {
 	public static readonly tagName = 'phred-scale-gizmo';
 	public readonly type = GIZMO_SCALE;
-	public corner: Corner;
+	public hside: HSide;
+	public vside: VSide;
 
-	public init(corner: Corner) {
-		this.corner = corner ?? 0;
+	public init(vside: VSide, hside: HSide) {
+		this.hside = hside ?? 0;
+		this.vside = vside ?? 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';
+
+		switch (vside) {
+			case VSide.Top: clazz = 'top'; break;
+			case VSide.Bottom: clazz += 'bottom'; break;
+			default: clazz = 'middle'; break;
 		}
+
+		switch (hside) {
+			case HSide.Right: clazz += '-right'; break;
+			case HSide.Left: clazz += '-left'; break;
+			default: clazz = '-center'; break;
+		}
+
 		this.classList.add(clazz);
 		this.appendChild(document.createElement('div')).classList.add('handle');
 	}

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

@@ -1,8 +1,9 @@
+import { HSide, VSide } from 'index';
 import { Rect } from 'plugin.model';
 import { Selection, SelectionChangedEvent } from '../selection';
 import { SelectionUtil } from '../selection.util';
 import { Gizmo, GIZMO_MOVE } from './gizmo';
-import { Corner, ScaleGizmo } from './scale-gizmo';
+import { ScaleGizmo } from './scale-gizmo';
 import './selection-gizmo.scss';
 
 // interface PropertiesCache {
@@ -40,19 +41,19 @@ export class SelectionGizmo extends HTMLElement implements Gizmo {
 
 	private createResizeHandlers(handlers: HTMLElement[]) {
 		const tl = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
-		tl.init(Corner.TopLeft);
+		tl.init(VSide.Top, HSide.Left);
 		handlers.push(tl);
 
 		const tr = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
-		tr.init(Corner.TopRight);
+		tr.init(VSide.Top, HSide.Right);
 		handlers.push(tr);
 
 		const bl = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
-		bl.init(Corner.BottomLeft);
+		bl.init(VSide.Bottom, HSide.Left);
 		handlers.push(bl);
 
 		const br = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
-		br.init(Corner.BottomRight);
+		br.init(VSide.Bottom, HSide.Right);
 		handlers.push(br);
 	}
 
@@ -84,7 +85,7 @@ export class SelectionGizmo extends HTMLElement implements Gizmo {
 		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');

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

@@ -1,27 +1,60 @@
 import { Point } from 'plugin.model';
-import { ScaleGizmo } from '../gizmos/scale-gizmo';
+import { HSide, ScaleGizmo, VSide } from '../gizmos/scale-gizmo';
 import { SelectionUtil } from '../selection.util';
 import { DraggingHandler } from './dragging-handler';
 
 export class ScaleHandler implements DraggingHandler {
 	private _point: Point;
 	private _object: PIXI.DisplayObject;
+	private _vside: VSide;
+	private _hside: HSide;
+
 	private _isGroup: boolean;
 	private _top: number;
 	private _left: number;
 
 	public startHandling(e: MouseEvent, object: PIXI.DisplayObject): void {
-		const corner = (e.target as ScaleGizmo).corner;
+		const gizmo = e.target as ScaleGizmo;
+		let hside = gizmo.hside;
+		let vside = gizmo.vside;
 		this._object = object;
 
-		object.position.set(object.x - object.pivot.x, object.y - object.pivot.y);
-		object.pivot.set(0, 0);
+		// inverting axis
+		if (object.scale.x < 0) {
+			if (hside == HSide.Left) hside = HSide.Right;
+			else if (hside == HSide.Right) hside = HSide.Left;
+		}
 
-		this._isGroup = !object.anchor;
-		if (this._isGroup) {
-			this._top = object.top;
-			this._left = object.left;
+		this._vside = vside;
+		this._hside = hside;
+
+		object.updateTransform();
+
+		if (hside === HSide.Right) {
+			object.position.set(
+				object.x - object.pivot.x * object.scale.x,
+				object.y - object.pivot.y);
+			object.pivot.set(0, 0);
+
+
+		} else if (hside === HSide.Left) {
+			const originalWidth = object.width / object.scale.x;
+			object.position.set(
+				object.x + object.width - object.pivot.x * object.scale.x,
+				object.y - object.pivot.y);
+			
+			object.pivot.set(Math.abs(originalWidth), 0);
+			console.log(originalWidth)
 		}
+
+
+		// this._isGroup = !object.anchor;
+		// if (this._isGroup) {
+		// 	this._top = object.top;
+		// 	this._left = object.left;
+		// }
+
+		object.updateTransform();
 	}
 
 	public handle(e: MouseEvent): void {
@@ -32,8 +65,14 @@ export class ScaleHandler implements DraggingHandler {
 		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
+		let dx = 0;
+		if (this._hside === HSide.Left) dx = lastPoint.x - newPoint.x;
+		else if (this._hside === HSide.Right) dx = newPoint.x - lastPoint.x;
+		// if (this._corner == Corner.BottomRight) dx = newPoint.x - lastPoint.x;
+		// else if (this._corner === Corner.BottomLeft) dx = lastPoint.x - newPoint.x;
+		// const dx = newPoint.x - lastPoint.x; // bottom right
+		// const dx = lastPoint.x - newPoint.x; // bottom left
+		const dy = newPoint.y - lastPoint.y;
 		this._point = newPoint;
 
 		this._object.updateTransform();

src/global.d.ts

@@ -9,14 +9,15 @@ declare namespace PIXI {
 		name?: string;
 		anchor?: Point;
 		inputEnabled?: boolean;
-		getBounds?(): Rectangle;
-		children?: DisplayObject[];
 		top: number;
 		left: number;
 		bottom: number;
 		right: number;
 		width: number;
 		height: number;
+		children?: DisplayObject[];
+		getBounds?(): Rectangle;
+		getLocalBounds(): Rectangle;
 	}
 }