fixed worldScale with globalScale

example/game.js

@@ -162,7 +162,7 @@ function el(x, y, w, h, parent, name) {
 	g.addChild(t);
 
 	g.inputEnabled = true;
-	g.useHandCursor = true;
+	// g.useHandCursor = true;
 	return g;
 }
 

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

@@ -12,19 +12,18 @@ phred-selection-gizmo {
 	box-sizing: border-box;
 	box-shadow: inset $gizmo-shadow, $gizmo-shadow;
 
+	div {
+		box-sizing: content-box;
+		position: absolute;
+		padding: 0;
+		box-shadow: $gizmo-shadow;
+		pointer-events: none;
+	}
+
 	.handlers {
 		width: 100%;
 		height: 100%;
-		pointer-events: none;
-		position: absolute;
-
-		& > div {
-			box-sizing: content-box;
-			position: absolute;
-			padding: 0;
-			box-shadow: $gizmo-shadow;
-			pointer-events: none;
-		}
+		box-shadow: none;
 
 		.pivot {
 			width: 8px;

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

@@ -36,7 +36,9 @@ export class SelectionGizmo extends HTMLElement implements Gizmo {
 		this._showHitArea = value;
 		if (value) {
 			this.setupHitArea(this._object);
-			if (this._object) this.drawHitArea(this._object.worldScale);
+			if (this._object) {
+				this.drawHitArea(this._object.globalScale);
+			}
 		} else {
 			this.setupHitArea(null);
 		}
@@ -95,8 +97,9 @@ export class SelectionGizmo extends HTMLElement implements Gizmo {
 	public redraw() {
 		if (!this._object) return;
 		const object = this._object;
-		const bounds = this._object.getBounds();
-		const scale = object.worldScale;
+		object.updateTransform();
+		const scale = object.globalScale;
+		const bounds = object.getBounds();
 
 		const { style, _rectCache, _pointCache1 } = this;
 		SelectionUtil.rectFromGameToArea(bounds, _rectCache);
@@ -122,7 +125,9 @@ export class SelectionGizmo extends HTMLElement implements Gizmo {
 			this.anchor.style.left = _pointCache1.x + 'px';
 		}
 
-		if (this._objectHitArea) this.drawHitArea(scale);
+		if (this._objectHitArea) {
+			this.drawHitArea(scale);
+		}
 	}
 
 	private setupHitArea(object: PIXI.DisplayObject) {
@@ -133,35 +138,42 @@ export class SelectionGizmo extends HTMLElement implements Gizmo {
 		}
 
 		this.hitArea.style.display = 'block';
-		this._objectHitArea = object.hitArea as any
-			?? { x: 0, y: 0, width: object.width, height: object.height };
+		const b = object.getBounds();
+		this._objectHitArea = object.hitArea as any ?? {
+			x: 0, y: 0,
+			width: Math.abs(b.width / object.scale.x),
+			height: Math.abs(b.height / object.scale.y)
+		};
 		this.hitArea.style.borderRadius = this._objectHitArea.radius ? '50%' : '0';
 	}
 
 	private drawHitArea(scale: PIXI.Point) {
 		const { _pointCache1, _pointCache2 } = this;
 		const hitArea = this._objectHitArea;
+		const style = this.hitArea.style;
+
 		SelectionUtil.pointFromGameToArea(hitArea.x * scale.x, hitArea.y * scale.y, _pointCache1);
-		const haStyle = this.hitArea.style;
+
 		if (hitArea.radius) {
 			SelectionUtil.pointFromGameToArea(
 				hitArea.radius * 2 * scale.x,
 				hitArea.radius * 2 * scale.y,
 				_pointCache2
 			);
-			haStyle.left = (_pointCache1.x - _pointCache2.x * 0.5) + 'px';
-			haStyle.top = (_pointCache1.y - _pointCache2.y * 0.5) + 'px';
+			_pointCache1.x -= _pointCache2.x * 0.5;
+			_pointCache1.y -= _pointCache2.y * 0.5;
 		} else {
 			SelectionUtil.pointFromGameToArea(
 				hitArea.width * scale.x,
 				hitArea.height * scale.y,
 				_pointCache2
 			);
-			haStyle.left = _pointCache1.x + 'px';
-			haStyle.top = _pointCache1.y + 'px';
 		}
-		haStyle.width = _pointCache2.x + 'px';
-		haStyle.height = _pointCache2.y + 'px';
+
+		style.left = _pointCache1.x + 'px';
+		style.top = _pointCache1.y + 'px';
+		style.width = Math.abs(_pointCache2.x) + 'px';
+		style.height = Math.abs(_pointCache2.y) + 'px';
 	}
 
 	public startMoving() {

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

@@ -25,9 +25,8 @@ export class MoveHandler implements DraggingHandler {
 	public handle(e: MouseEvent) {
 		const lastPoint = this._point;
 		const newPoint = SelectionUtil.mouseEventToGamePoint(e, { x: 0, y: 0 });
-
 		const object = this._object;
-		const scale = object.worldScale.clone();
+		const scale = object.globalScale;
 
 		scale.x = Math.abs(scale.x / object.scale.x);
 		scale.y = Math.abs(scale.y / object.scale.y);

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

@@ -101,7 +101,7 @@ export class ScaleHandler implements DraggingHandler {
 			dscale = 1;
 		}
 
-		const scale = object.worldScale.clone();
+		const scale = object.globalScale;
 		scale.x = Math.abs(scale.x / object.scale.x);
 		scale.y = Math.abs(scale.y / object.scale.y);
 

src/global.d.ts

@@ -18,6 +18,7 @@ declare namespace PIXI {
 		children?: DisplayObject[];
 		getBounds?(): Rectangle;
 		getLocalBounds(): Rectangle;
+		readonly globalScale: Point;
 	}
 }
 

src/plugin.ts

@@ -120,3 +120,9 @@ export class Plugin extends Phaser.Plugin {
 }
 
 (Phaser.Plugin as any).RuntimeEditor = Plugin;
+
+Object.defineProperty(PIXI.DisplayObject.prototype, 'globalScale', {
+	enumerable: true,
+	configurable: true,
+	get() { return new PIXI.Point(this.worldTransform.a, this.worldTransform.d); }
+})

src/scene-view/selection/selection.view.ts

@@ -141,7 +141,7 @@ export class SelectionView extends Phaser.Group {
 
 	public move(deltaX: number, deltaY: number) {
 		const pos = this._selectedObject.position;
-		const scale = this._selectedObject.parent?.worldScale ?? PointUtil.one;
+		const scale = this._selectedObject.parent?.globalScale ?? PointUtil.one;
 		this.moveFn(pos, scale, deltaX, deltaY);
 		this.redraw();
 		Editor.data.propertyChanged('position', pos, DataOrigin.SCENE);