tranform from game to area

example/game.js

@@ -96,9 +96,11 @@ function create() {
 
 
 	child = game.add.sprite(1180, 925, 'phaser');
+	child.name = 'sprite';
 	child.scale.set(2, 2);
 
-	game.add.bitmapText(50, 50, 'font', 'This is a bitmap text', 30);
+	game.add.bitmapText(50, 50, 'font', 'This is a bitmap text', 30)
+		.name = 'bitmap text';
 
 	// game.add.text(0, 0, 'this text scrolls\nwith the background', { font: '32px Arial', fill: '#f26c4f', align: 'center' });
 
@@ -142,6 +144,7 @@ function el(x, y, w, h, parent, name) {
 		fontSize: 14,
 	});
 
+	t.name = name + '_text';
 	g.addChild(t);
 
 	return g;

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

@@ -6,4 +6,5 @@ phred-selection-area {
 	right: 0;
 	padding: 0;
 	margin: 0;
+	overflow: hidden;
 }

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

@@ -29,8 +29,9 @@ export class SelectionArea extends HTMLElement {
 		const p = this._touchPoint;
 		SelectionUtil.pointFromAreaToGame(e.offsetX, e.offsetY, p);
 
-		game.add.graphics(p.x, p.y)
-			.beginFill(0xFFFF00).drawCircle(0, 0, 20);
+		game.add.graphics(p.x, p.y, this.game.world)
+			.beginFill(0xFFFF00).drawCircle(0, 0, 20)
+			.__skip = true;
 
 		const obj = this.selector.getObjectAt(p.x, p.y);
 		this.selection.object = obj;

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

@@ -1,4 +1,4 @@
-import { Point } from 'plugin.model';
+import { Point, Rect } from 'plugin.model';
 
 class SelectionUtilClass {
 	private game: Phaser.Game;
@@ -10,8 +10,20 @@ class SelectionUtilClass {
 	}
 
 	public pointFromAreaToGame(x: number, y: number, out: Point) {
-		out.x = this.game.width * x / this.selectionArea.clientWidth;
-		out.y = this.game.height * y / this.selectionArea.clientHeight;
+		// gx = ax * gw/aw;
+		out.x = x * this.game.width / this.selectionArea.clientWidth;
+		out.y = y * this.game.height / this.selectionArea.clientHeight;
+	}
+
+	public rectFromGameToArea(g: PIXI.Rectangle, a: Rect) {
+		// ax = gx * aw/gw
+		const hr = this.selectionArea.clientWidth / this.game.width;
+		const vr = this.selectionArea.clientHeight / this.game.height;
+
+		a.x = g.x * hr;
+		a.y = g.y * vr;
+		a.width = g.width * hr;
+		a.height = g.height * vr;
 	}
 }
 

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

@@ -1,7 +1,10 @@
+import { Rect } from 'plugin.model';
+import { SelectionUtil } from '../selection.util';
 import './selection.scss';
 
 export class NewSelection extends HTMLElement {
 	private _object: PIXI.DisplayObject;
+	private _rect: Rect = { x: 0, y: 0, width: 0, height: 0 };
 
 	public init() {
 		this.classList.add('selector');
@@ -15,6 +18,19 @@ export class NewSelection extends HTMLElement {
 		}
 		console.log(obj.name);
 		this.style.display = 'block';
+
+		const bounds = obj.getBounds();
+		this.redraw(bounds);
+	}
+
+	private redraw(bounds: PIXI.Rectangle) {
+		SelectionUtil.rectFromGameToArea(bounds, this._rect);
+		const { style, _rect } = this;
+		style.left = `${_rect.x}px`;
+		style.top = `${_rect.y}px`;
+		style.width = `${_rect.width}px`;
+		style.height = `${_rect.height}px`;
+		console.log(bounds, this._rect);
 	}
 }
 

src/plugin.model.ts

@@ -8,4 +8,11 @@ export interface PluginConfig {
 export interface Point {
 	x: number;
 	y: number
+}
+
+export interface Rect{
+	x: number;
+	y: number
+	width: number;
+	height: number;
 }