rotation handler and gizmos

src/editor/selection/rotation/rotation.gizmo.ts

@@ -0,0 +1,15 @@
+export class RotationGizmo extends Phaser.Graphics {
+	constructor(game: Phaser.Game) {
+		super(game);
+		this.__skip = true;
+		this
+			.beginFill(0, 0)
+			.drawCircle(0, 0, 18)
+			.endFill()
+			.lineStyle(2, 0xFFFFFF, 1)
+			.beginFill(0x1ABC9C, 1)
+			.drawCircle(0, 0, 14);
+
+		this.inputEnabled = true;
+	}
+}

src/editor/selection/rotation/rotation.handler.ts

@@ -0,0 +1,35 @@
+import { RotationGizmo } from './rotation.gizmo';
+
+export class RotationHandler extends Phaser.Group {
+	private gizmos: RotationGizmo[];
+
+	constructor(game: Phaser.Game) {
+		super(game);
+		this.gizmos = this.createGizmos(game);
+	}
+
+	private createGizmos(game: Phaser.Game) {
+		const gizmos: RotationGizmo[] = [
+			new RotationGizmo(game),		// top left
+			new RotationGizmo(game),		// top right
+			new RotationGizmo(game),		// bottom right
+			new RotationGizmo(game),		// bottom left
+		];
+
+		gizmos.forEach(gizmo => {
+			// gizmo.events.onInputDown.add(() => this.startScaling(gizmo), this);
+			// gizmo.events.onInputUp.add(this.stopScaling, this);
+			this.addChild(gizmo);
+		});
+
+		return gizmos;
+	}
+
+	public redraw(bounds: PIXI.Rectangle) {
+		const knobs = this.gizmos;
+		knobs[0].position.set(0, 0);											// top left
+		knobs[1].position.set(bounds.width, 0);							// top right
+		knobs[2].position.set(bounds.width, bounds.height);			// bottom right
+		knobs[3].position.set(0, bounds.height);							// bottom right
+	}
+}

src/editor/selection/scale/scale.knob.ts → src/editor/selection/scale/scale.gizmo.ts

@@ -1,4 +1,4 @@
-export class ScaleKnob extends Phaser.Graphics {
+export class ScaleGizmo extends Phaser.Graphics {
 	private readonly _cursor: string;
 
 	constructor(game: Phaser.Game, public readonly factorH: number, public readonly factorV: number) {

src/editor/selection/scale/scale.handler.ts

@@ -1,8 +1,8 @@
-import { ScaleKnob } from './scale.knob';
+import { ScaleGizmo } from './scale.gizmo';
 import { Scaler } from './scaler';
 
 export class ScaleHandler extends Phaser.Group {
-	private readonly knobs: ScaleKnob[];
+	private readonly gizmos: ScaleGizmo[];
 	private _scaling = false;
 
 	public readonly scaler: Scaler;
@@ -14,36 +14,36 @@ export class ScaleHandler extends Phaser.Group {
 		super(game);
 		this.__skip = true;
 		this.scaler = new Scaler();
-		this.knobs = this.createScaleKnobs(game);
+		this.gizmos = this.createGizmos(game);
 
 		this._tmpTransformPivotGizmo = new Phaser.Graphics(game);
 		this.addChild(this._tmpTransformPivotGizmo);
 	}
 
-	private createScaleKnobs(game: Phaser.Game) {
-		const knobs: ScaleKnob[] = [
-			new ScaleKnob(game, 1, 1),		// top left
-			new ScaleKnob(game, 0, 1),		// top right
-			new ScaleKnob(game, 0, 0),		// bottom right
-			new ScaleKnob(game, 1, 0),		// bottom left
-
-			new ScaleKnob(game, 0.5, 1),	// top
-			new ScaleKnob(game, 1, 0.5),	// right
-			new ScaleKnob(game, 0.5, 0),	// bottom
-			new ScaleKnob(game, 0, 0.5),	// left
+	private createGizmos(game: Phaser.Game) {
+		const gizmos: ScaleGizmo[] = [
+			new ScaleGizmo(game, 1, 1),		// top left
+			new ScaleGizmo(game, 0, 1),		// top right
+			new ScaleGizmo(game, 0, 0),		// bottom right
+			new ScaleGizmo(game, 1, 0),		// bottom left
+
+			new ScaleGizmo(game, 0.5, 1),	// top
+			new ScaleGizmo(game, 1, 0.5),	// right
+			new ScaleGizmo(game, 0.5, 0),	// bottom
+			new ScaleGizmo(game, 0, 0.5),	// left
 		];
 
-		knobs.forEach(k => {
-			k.events.onInputDown.add(() => this.startScaling(k), this);
-			k.events.onInputUp.add(this.stopScaling, this);
-			this.addChild(k);
+		gizmos.forEach(gizmo => {
+			gizmo.events.onInputDown.add(() => this.startScaling(gizmo), this);
+			gizmo.events.onInputUp.add(this.stopScaling, this);
+			this.addChild(gizmo);
 		});
 
-		return knobs;
+		return gizmos;
 	}
 
 	public redraw(bounds: PIXI.Rectangle) {
-		const knobs = this.knobs;
+		const knobs = this.gizmos;
 		knobs[0].position.set(0, 0);											// top left
 		knobs[1].position.set(bounds.width, 0);							// top right
 		knobs[2].position.set(bounds.width, bounds.height);			// bottom right
@@ -57,7 +57,7 @@ export class ScaleHandler extends Phaser.Group {
 		this._tmpDrawTransformPivot(this.scaler.transformPivot);
 	}
 
-	private startScaling(knob: ScaleKnob) {
+	private startScaling(knob: ScaleGizmo) {
 		this.scaler.startScaling(this.selectedObject, knob.factorH, knob.factorV);
 		this._scaling = true;
 	}

src/editor/selection/selection.ts

@@ -1,4 +1,5 @@
 import { ANCHOR_COLOR, ANCHOR_STROKE, BORDER_COLOR, BORDER_STROKE, PIVOT_COLOR, PIVOT_STROKE } from '../editor.colors';
+import { RotationHandler } from './rotation/rotation.handler';
 import { ScaleHandler } from './scale/scale.handler';
 
 export class Selection extends Phaser.Group {
@@ -7,6 +8,7 @@ export class Selection extends Phaser.Group {
 
 	private readonly view: Phaser.Graphics;
 	private readonly scaleHandler: ScaleHandler;
+	private readonly rotationHandler: RotationHandler;
 
 	constructor(game: Phaser.Game) {
 		super(game);
@@ -17,8 +19,13 @@ export class Selection extends Phaser.Group {
 		this.addChild(this.view);
 
 		this.scaleHandler = new ScaleHandler(game);
+		this.scaleHandler.visible = false;
 		this.addChild(this.scaleHandler);
 
+		this.rotationHandler = new RotationHandler(game);
+		this.rotationHandler.visible = true;
+		this.addChild(this.rotationHandler);
+
 		this.setSelection(null);
 	}
 
@@ -38,7 +45,8 @@ export class Selection extends Phaser.Group {
 			? this.scaleHandler.scaler.originalPivot
 			: this._obj.pivot);
 		this.drawAnchor(this._obj.anchor, bounds);
-		this.scaleHandler.redraw(bounds);
+		//this.scaleHandler.redraw(bounds);
+		this.rotationHandler.redraw(bounds);
 		this.position.set(bounds.x, bounds.y);
 	}