reference image fix

.vscode/tasks.json

@@ -0,0 +1,16 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "build",
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			},
+			"problemMatcher": [],
+			"label": "npm: build",
+			"detail": "rollup -c ./config/rollup.config.js"
+		}
+	]
+}

TODO.todo

@@ -44,10 +44,6 @@ BASIC:
 		[x] vertical scroll
 		[x] horizontal scroll
 		[x] scroll to selection
-
-	General Features:
-		[x] editor layout
-		[x] test inside a real game
 
 	Actions:
 		[x] actions handler
@@ -63,6 +59,13 @@ BASIC:
 			[x] undo
 		[ ] find another shortcut schema
 
+	General Features:
+		[x] editor layout
+		[x] test inside a real game
+		[ ] config
+			[ ] getter for root container and ref image
+			[ ] onShow/onHide callbacks
+
 	Refactors:
 		[x] create a centralized class for all the singletons
 
@@ -106,6 +109,7 @@ ADVANCED:
 				[ ] fillAlpha
 				[ ] fillColor
 				[ ] etc
+			[ ] Phaser.BitmapFont
 			[ ] show them separated from the basic properties
 		[ ] optimization: shold I create a object pool for PropertyEditors?
 

src/editor.window.ts

@@ -47,7 +47,7 @@ export class EditorWindow {
 		const scene = this.sceneView = new SceneView(this.game);
 		this.setupActions(scene);
 
-		if (this.refImage) this.setupRefImage(this.refImage);
+		if (this.refImage) this.setupRefImage(this.refImage, this.root);
 
 		this.editorView = document.createElement(EditorView.tagName) as EditorView;
 		Editor.actions.addContainer('body', document.body);
@@ -163,7 +163,15 @@ export class EditorWindow {
 				id: Actions.TOGGLE_GIZMOS,
 				toggle: true,
 				hold: true,
-				shortcut: 'shift+Shift',
+				shortcut: 'ctrl+shift+Shift',
+				command: () => prefs.gizmos = !prefs.gizmos,
+				state: () => prefs.gizmos,
+			},
+			{
+				id: Actions.TOGGLE_GIZMOS,
+				toggle: true,
+				hold: true,
+				shortcut: 'ctrl+shift+Control',
 				command: () => prefs.gizmos = !prefs.gizmos,
 				state: () => prefs.gizmos,
 			},
@@ -193,8 +201,8 @@ export class EditorWindow {
 		);
 	}
 
-	private setupRefImage(refImage: PIXI.Sprite) {
-		Editor.referenceImage = new ReferenceImage(this.game, refImage);
+	private setupRefImage(refImage: PIXI.Sprite, root: Container) {
+		Editor.referenceImage = new ReferenceImage(this.game, refImage, root);
 		Editor.actions.add({
 			id: Actions.TOGGLE_REF_IMAGE,
 			label: 'reference',

src/scene-view/reference-image.ts

@@ -2,14 +2,17 @@ import { Editor } from 'core/editor';
 import { PreferenceKey } from 'core/preferences';
 
 export class ReferenceImage extends Phaser.Group {
-	constructor(game: Phaser.Game, image: PIXI.Sprite) {
+	private _parent: PIXI.DisplayObjectContainer;
+
+	constructor(game: Phaser.Game, image: PIXI.Sprite, root: Container) {
 		super(game, null, '__ref_image');
 		this.__skip = true;
+		image.__skip = true;
 		this.addChild(image);
-		image.width = this.game.width;
-		image.height = this.game.height;
 		this.alpha = 0.3;
 
+		this._parent = root;
+
 		Editor.prefs.onPreferenceChanged.add(this.onPreferenceChanged, this);
 		this.onPreferenceChanged('referenceImage', Editor.prefs.referenceImage);
 	}
@@ -21,7 +24,7 @@ export class ReferenceImage extends Phaser.Group {
 	}
 
 	public show() {
-		if (!this.parent) this.game.stage.add(this);
+		if (!this.parent) this._parent.addChild(this);
 	}
 
 	public hide() {