added toggle lock selection

example/game.js

@@ -50,7 +50,7 @@ function create() {
 	for (let i = 0; i < game.width; i += 100) grid.moveTo(i, 0).lineTo(i, game.height);
 	for (let i = 0; i < game.height; i += 100) grid.moveTo(0, i).lineTo(game.width, i);
 
-	grid.__skip = true;
+	grid.__locked = true;
 	game.world.add(grid);
 
 	const SIZE = 200;

src/core/actions.ts

@@ -27,4 +27,5 @@ export class Actions {
 	public static readonly TOGGLE_RIGHT_PANEL = 'TOGGLE_RIGHT_PANEL';
 	public static readonly HELP = 'HELP';
 	public static readonly SELECT_PARENT = 'SELECT_PARENT';
+	public static readonly LOCK_SELECTION = 'LOCK_SELECTION';
 }

src/core/editor.ts

@@ -361,10 +361,17 @@ class EditorClass {
 				category: 'general',
 			},
 
+			{
+				id: Actions.LOCK_SELECTION,
+				tooltip: 'Toggle lock selection',
+				icon: 'fa-lock',
+				category: 'object-tree',
+			},
 			{
 				id: Actions.SELECT_PARENT,
 				tooltip: 'Select parent',
 				icon: 'fa-level-up-alt',
+				toggle: true,
 				category: 'object-tree',
 			}
 		);

src/data/editor-data.ts

@@ -41,6 +41,8 @@ export class EditorData {
 	private _hasScheduledEvents = false;
 	private _scheduledEvents: { [id: string]: { value: any, from: DataOrigin } } = {};
 
+	public readonly onObjectLocked = new Phaser.Signal();
+
 	public dispatchScheduledEvents() {
 		if (!this._hasScheduledEvents) return;
 		this._hasScheduledEvents = false;
@@ -59,7 +61,14 @@ export class EditorData {
 		});
 
 		actions.setActionCommand(Actions.SELECT_PARENT, () => {
-			if (this.selectedObject) this.selectObject(this.selectedObject.parent, DataOrigin.ACTION);
+			if (this._selectedObject) this.selectObject(this._selectedObject.parent, DataOrigin.ACTION);
 		});
+
+		actions.setActionCommand(Actions.LOCK_SELECTION, () => {
+			if (this._selectedObject) {
+				this._selectedObject.__locked = !this._selectedObject.__locked;
+				this.onObjectLocked.dispatch(this._selectedObject);
+			}
+		}, () => this._selectedObject?.__locked);
 	}
 }

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

@@ -23,7 +23,9 @@ export class ObjectTreeInspector extends Inspector {
 		el.onClear = this.onFilterClear.bind(this);
 
 		Editor.data.onPropertyChanged.add(this.onPropertyChanged, this);
+		Editor.data.onObjectLocked.add(this.onObjectLocked, this);
 
+		this.addAction(Editor.actions.getAction(Actions.LOCK_SELECTION), 'right');
 		this.addAction(Editor.actions.getAction(Actions.SELECT_PARENT), 'right');
 	}
 
@@ -45,12 +47,13 @@ export class ObjectTreeInspector extends Inspector {
 	}
 
 	private createNode(obj: PIXI.DisplayObject, parent: HTMLElement, model: ObjectTreeModel) {
-		if (obj.__skip) return;
+		// if (obj.__locked) return;
 		const m = model.getById(obj.__instanceId);
 		if (!m) throw new Error(`Model not found for ${obj.__instanceId}`);
 
 		const node = parent.appendChild(document.createElement(ObjectTreeNode.tagName)) as ObjectTreeNode;
 		node.classList.add(`level-${m.level}`);
+
 		node.onNodeSelect = this.onNodeSelected.bind(this);
 		node.onCollapseStateChanged = this.onNodeCollapseStateChanged.bind(this);
 		node.setContent(m);
@@ -75,23 +78,11 @@ export class ObjectTreeInspector extends Inspector {
 		}
 	}
 
-	private onNodeSelected(node: ObjectTreeNode) {
-		if (node?.model === this._lastSelectedModel) return;
-		if (this._lastSelectedModel) this._lastSelectedModel.node.clearSelection();
-		this._lastSelectedModel = node.model;
-		Editor.data.selectObject(node.model.obj, DataOrigin.INSPECTOR);
-	}
-
-	private onNodeCollapseStateChanged(node: ObjectTreeNode, collapsed: boolean, all: boolean) {
-		const m = node.model;
-		this.changeCollapseState(m, collapsed, all);
-	}
-
 	private changeCollapseState(model: ObjectTreeNodeModel, collapsed: boolean, all: boolean) {
 		model.collapsed = collapsed;
 		if (!(all && model.obj.children?.length)) return;
 		model.obj.children.forEach(child => {
-			if (child.__skip) return;
+			if (child.__locked) return;
 			const n = this.model.getById(child.__instanceId);
 			if (collapsed) n.node.collapse();
 			else n.node.expand();
@@ -126,6 +117,32 @@ export class ObjectTreeInspector extends Inspector {
 		this.model.filter(filter);
 	}
 
+	private onObjectLocked(object: PIXI.DisplayObject) {
+		if (!object) return;
+		let model: ObjectTreeNodeModel;
+
+		if (this._lastSelectedModel?.obj?.__instanceId === object.__instanceId) {
+			model = this._lastSelectedModel;
+		} else {
+			model = this.model.getById(object.__instanceId);
+		}
+
+		if (!model?.obj) return;
+		model.node.locked = object.__locked;
+	}
+
+	private onNodeSelected(node: ObjectTreeNode) {
+		if (node?.model === this._lastSelectedModel) return;
+		if (this._lastSelectedModel) this._lastSelectedModel.node.clearSelection();
+		this._lastSelectedModel = node.model;
+		Editor.data.selectObject(node.model.obj, DataOrigin.INSPECTOR);
+	}
+
+	private onNodeCollapseStateChanged(node: ObjectTreeNode, collapsed: boolean, all: boolean) {
+		const m = node.model;
+		this.changeCollapseState(m, collapsed, all);
+	}
+
 	private onFilterClear() {
 		if (this._lastSelectedModel?.parent) {
 			this.expandParents(this._lastSelectedModel.parent);

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

@@ -36,6 +36,13 @@ phred-object-tree-node {
 		}
 	}
 
+	&.locked {
+		font-style: italic;
+		.node-head i.fas.fa-lock {
+			display: flex;
+		}
+	}
+
 	.node-head {
 		height: 24px;
 		display: flex;
@@ -47,6 +54,11 @@ phred-object-tree-node {
 			display: flex;
 			align-items: center;
 			justify-content: center;
+
+			&.fa-lock {
+				font-size: 9px;
+				display: none;
+			}
 		}
 
 		.collapse-icon {

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

@@ -14,6 +14,10 @@ export class ObjectTreeNode extends HTMLElement {
 	public onNodeSelect: (node: ObjectTreeNode) => void;
 	public onCollapseStateChanged: (node: ObjectTreeNode, collapsed: boolean, all: boolean) => void;
 
+	public set locked(value: boolean) {
+		this.classList.addOrRemove('locked', value);
+	}
+
 	public updateTitle(type: PhaserObjectType, value: string) {
 		this.label.textContent = value?.length > 0 ? value : type.name;
 	}
@@ -42,6 +46,10 @@ export class ObjectTreeNode extends HTMLElement {
 
 		this.label = head.appendChild(document.createElement('div'));
 		this.label.classList.add('node-name');
+		this.locked = model.obj.__locked;
+
+		// head.appendChild(document.createElement('div')).classList.add('spacer');
+		head.appendChild(document.createElement('i')).classList.add('fas', 'fa-lock');
 
 		this.updateTitle(model.type, model.obj.name);
 		this.updateObjectVisibility(model.obj.visible);

src/global.d.ts

@@ -3,7 +3,7 @@ declare namespace PIXI {
 		__instanceId?: number;
 		__type?: string;
 		__baseType?: string;
-		__skip?: boolean;
+		__locked?: boolean;
 		__isLeaf?: boolean;
 		type?: number;
 		name?: string;

src/scene-view/selection-area/handlers/selection.handler.ts

@@ -30,7 +30,7 @@ export class SelectionHandler {
 	private getObjectsUnderPoint(x: number, y: number, children: PIXI.DisplayObject[], objects: PIXI.DisplayObject[]) {
 		for (let i = children.length - 1; i >= 0; i--) {
 			const child = children[i];
-			if (!child.visible || child.__skip || !('getBounds' in child)) continue;
+			if (!child.visible || child.__locked || !('getBounds' in child)) continue;
 			const bounds: PIXI.Rectangle = child.getBounds();
 			if (!child.__isLeaf) this.getObjectsUnderPoint(x, y, child.children, objects);
 			if (bounds.contains(x, y)) objects.push(child);