several real-world changes

TODO.todo

@@ -3,6 +3,8 @@ BASIC:
 		[x] natural parent selection
 		[x] global scale
 		[x] skip invisible objects
+		[ ] when coming from editor ui, do not change selection on click
+		[ ] check the bug with bounds when selecting
 
 	Translation:
 		[x] translation
@@ -29,6 +31,7 @@ BASIC:
 			[x] Point
 		[x] look for basic properties to inspect
 		[x] copy property value to clipboard
+		[ ] bounds
 
 	Object Tree:
 		[x] panel
@@ -40,6 +43,9 @@ BASIC:
 		[x] expand / collapse sub-trees
 			[x] automatic expand when selecting
 			[x] expand / collapse all with alt key
+		[x] vertical scroll
+		[ ] horizontal scroll
+		[ ] scroll to selection
 
 	General Features:
 		[x] editor layout
@@ -53,6 +59,10 @@ BASIC:
 		[x] reference image
 			[x] toggle ref image
 			[x] set alpha
+		[ ] global shortcuts
+			[ ] toggle gizmos
+			[ ] navigation (arrows)
+		[ ] find another shortcut to toggle gizmos
 
 	Refactors:
 		[x] create a centralized class for all the singletons
@@ -62,6 +72,8 @@ BASIC:
 ADVANCED:
 	Translation:
 		[x] snapping (1px)
+			[ ] snap the current position on enabling snap
+		[ ] lock axis
 		[x] keyboard shortcuts
 			[x] use arrows to move 1px
 			[x] use shift+arrows to move 10px
@@ -103,14 +115,24 @@ ADVANCED:
 		[ ] update tree content
 			[ ] update with a button
 			[ ] update automatically
+		[ ] filter
+		[ ] ignore bitmap text letters
+
+	UI:
+		[ ] show panel scroll
+		[ ] hide panels
+		[ ] resize panels
+		[ ] status bar
+		[ ] ruler
 
 	General Features:
 		[ ] copy selected properties to clipboard
 		[ ] show grid
 		[ ] help: keyboard shorcuts
-		[ ] status bar
-		[ ] hide panels
 		[ ] redo
+		[ ] zoom
+		[x] print object
+		[ ] enabling/disabling actions
 
 	Plugins Support:
 		[ ] add plugin

src/actions.ts

@@ -12,4 +12,6 @@ export class Actions {
 	public static readonly TOGGLE_GIZMOS = 'TOGGLE_GIZMOS';
 	public static readonly TOGGLE_REF_IMAGE = 'TOGGLE_REF_IMAGE';
 	public static readonly TOGGLE_ENABLED = 'TOGGLE_ENABLED';
+	public static readonly PRINT_OBJECT = 'PRINT_OBJECT';
+	public static readonly DESELECT = 'DESELECT';
 }

src/core/action-handler.ts

@@ -39,6 +39,7 @@ export class ActionHandler {
 	private onKeyDown(e: KeyboardEvent) {
 		const k = (e.ctrlKey ? 'ctrl+' : '')
 			+ (e.shiftKey ? 'shift+' : '')
+			+ (e.altKey ? 'alt+' : '')
 			+ e.key;
 		if (k in this.actions) {
 			const action = this.actions[k];

src/core/history.ts

@@ -40,7 +40,7 @@ export class History {
 	}
 
 	private apply(entry: HistoryEntry) {
-		this.data.selectObject(entry.obj, DataOrigin.HISTORY);
+		this.data.selectObject(entry.obj, DataOrigin.ACTION);
 
 		const obj = entry.obj;
 		// TODO make this recursive (if necessary)
@@ -54,7 +54,7 @@ export class History {
 					});
 				} else
 					obj[pk] = prop;
-				this.data.propertyChanged(pk, obj[pk], DataOrigin.HISTORY);
+				this.data.propertyChanged(pk, obj[pk], DataOrigin.ACTION);
 			});
 
 		obj.updateTransform();

src/core/preferences.ts

@@ -1,7 +1,7 @@
 export type PreferenceKey = keyof Preferences;
 
 export class Preferences {
-	private _snap = false;
+	private _snap = true;
 
 	public get snap() { return this._snap; }
 

src/data/editor-data.ts

@@ -1,5 +1,5 @@
 export enum DataOrigin {
-	HISTORY = 0,
+	ACTION = 0,
 	SCENE = 1,
 	INSPECTOR = 2,
 };

src/editor-view/actions/actions-toolbar.ts

@@ -11,7 +11,10 @@ export class ActionsToolbar extends Widget {
 	public connectedCallback() {
 		super.connectedCallback();
 		this.createButton(Actions.TOGGLE_ENABLED);
+		this.createSeparator();
 		this.createButton(Actions.TOGGLE_SNAP);
+		this.createButton(Actions.PRINT_OBJECT);
+		this.createSeparator();
 		this.createButton(Actions.UNDO);
 		this.createSeparator();
 		this.createSpacer();

src/editor-view/object-tree/tree-node/tree-node.ts

@@ -71,7 +71,6 @@ export class TreeNode extends HTMLElement {
 	}
 
 	public expand() {
-		console.trace('EXPAND');
 		this.model.collapsed = false;
 		this.classList.remove(COLLAPSED_CLASS);
 	}

src/editor-view/panel/panel.scss

@@ -6,6 +6,7 @@ phred-panel {
 	align-items: stretch;
 	justify-content: stretch;
 	z-index: 2;
+	overflow: auto;
 
 	&.large {
 		width: 300px;

src/editor.window.ts

@@ -1,5 +1,6 @@
 import { Actions } from 'actions';
 import { Editor } from 'core/editor';
+import { DataOrigin } from 'data/editor-data';
 import { EditorView } from 'editor-view/editor-view';
 import { BooleanPropertyEditor } from 'editor-view/properties/editors/boolean/boolean-property-editor';
 import { NumberPropertyEditor } from 'editor-view/properties/editors/number/number-property-editor';
@@ -15,23 +16,23 @@ export class EditorWindow {
 
 	constructor(plugin: Phaser.Plugin) { this.plugin = plugin; }
 
-	public show(group?: Container, refImage?: PIXI.Sprite) {
+	public show(root?: Container, refImage?: PIXI.Sprite) {
 		if (!this._initialized) {
-			this.init(group, refImage);
+			this.init(root, refImage);
 			return;
 		}
 		// TODO just re-enable everything
 	}
 
-	private init(group?: Container, refImage?: PIXI.Sprite) {
+	private init(root?: Container, refImage?: PIXI.Sprite) {
 		const plugin = this.plugin;
 		const game = plugin.game;
-		group = group ?? game.world;
+		root = root ?? game.world;
 
 		Editor.init();
 		this.setupInspectorData();
 
-		const scene = new SceneView(game, group, game.stage);
+		const scene = new SceneView(game, root, game.stage);
 		this.setupActions(scene);
 		if (refImage) this.setupRefImage(game, refImage);
 
@@ -41,9 +42,9 @@ export class EditorWindow {
 		// TODO remove this when the object tree updates itself
 		const update = plugin.update.bind(plugin);
 		plugin.update = () => {
-			if (group.children.length === 0) return;
+			if (root.children.length === 0) return;
 			plugin.update = update;
-			editorView.setup(game, group);
+			editorView.setup(game, root);
 			plugin.hasPostUpdate = true;
 			plugin['postUpdate'] = () => Editor.data.dispatchScheduledEvents();
 		}
@@ -157,6 +158,21 @@ export class EditorWindow {
 				command: this.hide.bind(this),
 				state: () => true,
 			},
+			{
+				id: Actions.PRINT_OBJECT,
+				label: 'print',
+				icon: 'fa-terminal',
+				shortcut: 'ctrl+alt+p',
+				command: () => {
+					if (Editor.data.selectedObject)
+						console.info(Editor.data.selectedObject);
+				}
+			},
+			{
+				id: Actions.DESELECT,
+				shortcut: 'Escape',
+				command: () => Editor.data.selectObject(null, DataOrigin.ACTION)
+			},
 		);
 	}
 

src/plugin.ts

@@ -6,8 +6,13 @@ export class Plugin extends Phaser.Plugin {
 	private readonly disabledUI: DisabledUI;
 	private readonly editorWindow: EditorWindow;
 
-	public constructor(game: Phaser.Game) {
+	private root: Container;
+	private refImage?: PIXI.Sprite;
+
+	public constructor(game: Phaser.Game, root?: Container, refImage?: PIXI.Sprite) {
 		super(game, game.plugins);
+		this.root = root;
+		this.refImage = refImage
 		this.insertHead();
 
 		this.editorWindow = new EditorWindow(this);
@@ -37,7 +42,7 @@ export class Plugin extends Phaser.Plugin {
 	}
 
 	private enableEditor() {
-		this.editorWindow.show();
+		this.editorWindow.show(this.root, this.refImage);
 	}
 }
 

src/scene-view/reference-image.ts

@@ -2,15 +2,14 @@ import { Editor } from 'core/editor';
 import { PreferenceKey } from 'index';
 
 export class ReferenceImage extends Phaser.Group {
-	private image: PIXI.Sprite;
-
 	constructor(game: Phaser.Game, image: PIXI.Sprite) {
 		super(game, null, '__ref_image');
 		this.__skip = true;
 		this.addChild(image);
-		this.image = image;
+		image.width = this.game.width;
+		image.height = this.game.height;
 		this.alpha = 0.3;
-		image.blendMode = PIXI.blendModes.DARKEN;
+
 		Editor.prefs.onPreferenceChanged.add(this.onPreferenceChanged, this);
 		this.onPreferenceChanged('referenceImage', Editor.prefs.referenceImage);
 	}