diff --git a/example/game.js b/example/game.js index ae44cb8..62a0d72 100644 --- a/example/game.js +++ b/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; } diff --git a/src/editor-view/selectors/gizmos/selection-gizmo.scss b/src/editor-view/selectors/gizmos/selection-gizmo.scss index 7b4c84e..e12b147 100644 --- a/src/editor-view/selectors/gizmos/selection-gizmo.scss +++ b/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; diff --git a/src/editor-view/selectors/gizmos/selection-gizmo.ts b/src/editor-view/selectors/gizmos/selection-gizmo.ts index 2b911b9..40b88f6 100644 --- a/src/editor-view/selectors/gizmos/selection-gizmo.ts +++ b/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() { diff --git a/src/editor-view/selectors/handlers/move.handler.ts b/src/editor-view/selectors/handlers/move.handler.ts index affda5e..2a7a237 100644 --- a/src/editor-view/selectors/handlers/move.handler.ts +++ b/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); diff --git a/src/editor-view/selectors/handlers/scale.handler.ts b/src/editor-view/selectors/handlers/scale.handler.ts index af2e1ff..a46f51f 100644 --- a/src/editor-view/selectors/handlers/scale.handler.ts +++ b/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); diff --git a/src/global.d.ts b/src/global.d.ts index 3b13acb..ed5ed50 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -18,6 +18,7 @@ declare namespace PIXI { children?: DisplayObject[]; getBounds?(): Rectangle; getLocalBounds(): Rectangle; + readonly globalScale: Point; } } diff --git a/src/plugin.ts b/src/plugin.ts index f0f7fc0..55bc5a3 100644 --- a/src/plugin.ts +++ b/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); } +}) \ No newline at end of file diff --git a/src/scene-view/selection/selection.view.ts b/src/scene-view/selection/selection.view.ts index b34c812..e6e3fa7 100644 --- a/src/scene-view/selection/selection.view.ts +++ b/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);