all scale handlers

Author: kleber-swf

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

@@ -26,27 +26,37 @@ phred-scale-gizmo {
 		padding: 0;
 	}
 
-	&.top-left {
+	&.top {
 		top: 0;
-		left: 0;
-		cursor: nwse-resize;
 	}
 
-	&.top-right {
-		top: 0;
-		right: 0;
-		cursor: nesw-resize;
+	&.left {
+		left: 0;
 	}
 
-	&.bottom-left {
+	&.bottom {
 		bottom: 0;
-		left: 0;
-		cursor: nesw-resize;
 	}
 
-	&.bottom-right {
-		bottom: 0;
+	&.right {
 		right: 0;
+	}
+
+	&.middle {
+		top: 50%;
+		cursor: ew-resize;
+	}
+
+	&.center {
+		left: 50%;
+		cursor: ns-resize;
+	}
+
+	&.top.left, &.bottom.right {
 		cursor: nwse-resize;
 	}
+
+	&.top.right, &.bottom.left {
+		cursor: nesw-resize;
+	}
 }

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

@@ -20,23 +20,9 @@ export class ScaleGizmo extends HTMLElement implements Gizmo {
 	public vside: VSide;
 
 	public init(vside: VSide, hside: HSide) {
-		this.hside = hside ?? 0;
-		this.vside = vside ?? 0;
-		let clazz = '';
-
-		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.hside = hside = hside ?? 0;
+		this.vside = vside = vside ?? 0;
+		this.classList.add(VSide[vside].toLowerCase(), HSide[hside].toLowerCase());
 		this.appendChild(document.createElement('div')).classList.add('handle');
 	}
 }

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

@@ -1,9 +1,8 @@
-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 { ScaleGizmo } from './scale-gizmo';
+import { HSide, ScaleGizmo, VSide } from './scale-gizmo';
 import './selection-gizmo.scss';
 
 // interface PropertiesCache {
@@ -40,21 +39,17 @@ export class SelectionGizmo extends HTMLElement implements Gizmo {
 	}
 
 	private createResizeHandlers(handlers: HTMLElement[]) {
-		const tl = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
-		tl.init(VSide.Top, HSide.Left);
-		handlers.push(tl);
-
-		const tr = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
-		tr.init(VSide.Top, HSide.Right);
-		handlers.push(tr);
-
-		const bl = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
-		bl.init(VSide.Bottom, HSide.Left);
-		handlers.push(bl);
-
-		const br = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
-		br.init(VSide.Bottom, HSide.Right);
-		handlers.push(br);
+		const vsides = [VSide.Top, VSide.Middle, VSide.Bottom];
+		const hsides = [HSide.Left, HSide.Center, HSide.Right];
+
+		vsides.forEach(v => {
+			hsides.forEach(h => {
+				if (v === VSide.Middle && h === HSide.Center) return;
+				const el = this.appendChild(document.createElement(ScaleGizmo.tagName)) as ScaleGizmo;
+				el.init(v, h);
+				handlers.push(el);
+			});
+		});
 	}
 
 	public redraw(object: PIXI.DisplayObject, checkCache = true) {

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

@@ -17,7 +17,6 @@ export class ScaleHandler implements DraggingHandler {
 		const gizmo = e.target as ScaleGizmo;
 		let hside = gizmo.hside;
 		let vside = gizmo.vside;
-		console.log(hside, object?.name)
 
 		if (hside === undefined || vside === undefined) {
 			this._object = null;
@@ -52,16 +51,21 @@ export class ScaleHandler implements DraggingHandler {
 			x = object.x - object.pivot.x * object.scale.x;
 		} else if (hside === HSide.Left) {
 			pivotx = Math.abs(object.width / object.scale.x);
-			x = object.x + object.width - object.pivot.x * object.scale.x;
+			x = object.x - object.pivot.x * object.scale.x + object.width;
+		} else {
+			pivotx = Math.abs(object.width / object.scale.x) * 0.5;
+			x = object.x - object.pivot.x * object.scale.x + object.width * 0.5;
 		}
 
 		if (vside === VSide.Bottom) {
 			pivoty = 0;
 			y = object.y - object.pivot.y * object.scale.y;
-
 		} else if (vside === VSide.Top) {
 			pivoty = Math.abs(object.height / object.scale.y);
-			y = object.y + object.height - object.pivot.y * object.scale.y;
+			y = object.y - object.pivot.y * object.scale.y + object.height;
+		} else {
+			pivoty = Math.abs(object.height / object.scale.y) * 0.5;
+			y = object.y - object.pivot.y * object.scale.y + object.height * 0.5;
 		}
 
 		object.pivot.set(pivotx, pivoty);

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

@@ -38,6 +38,7 @@ export class SelectionArea extends HTMLElement {
 
 	public enable(config: PluginConfig) {
 		this.selectionHandler.enable(config.root);
+		// TODO make it tied to the Phaser's update cycle
 		this.interval = setInterval(this.update.bind(this), INTERVAL);
 	}