Added: pass throu action

example/game.js

@@ -139,6 +139,9 @@ function create() {
 	sprite.anchor.set(0.5, 0.5);
 	sprite.inputEnabled = true;
 	sprite.pivot.set(0, 20);
+	sprite.events.onInputOver.add(() => sprite.alpha = 0.8);
+	sprite.events.onInputOut.add(() => sprite.alpha = 1);
+	sprite.events.onInputDown.add(() => console.log('INPUT DOWN ON SPRITE'));
 
 	// const emitter = game.add.emitter(game.world.centerX, game.world.centerY + 500, 200);
 	// emitter.makeParticles('particle');

src/core/actions.ts

@@ -19,6 +19,7 @@ export class Actions {
 	public static readonly TOGGLE_ENABLED = 'TOGGLE_ENABLED';
 	public static readonly PRINT_OBJECT = 'PRINT_OBJECT';
 	public static readonly CLEAR_SELECTION = 'CLEAR_SELECTION';
+	public static readonly TOGGLE_PASS_THRU = 'PASS_THRU';
 	public static readonly ZOOM = 'ZOOM';
 	public static readonly ZOOM_IN = 'ZOOM_IN';
 	public static readonly ZOOM_OUT = 'ZOOM_OUT';

src/core/editor.ts

@@ -344,6 +344,12 @@ class EditorClass {
 				category: 'scene',
 				description: 'Move selected object right by 10px',
 			},
+			{
+				id: Actions.TOGGLE_PASS_THRU,
+				shortcuts: ['ctrl+1'],
+				toggle: true,
+				category: 'scene',
+			},
 
 			{
 				id: Actions.ZOOM,

src/scene-view/game-container/game-container.scss

@@ -6,6 +6,16 @@ phred-game-container {
 	overflow: auto;
 	position: relative;
 
+	&.passthru {
+		pointer-events: none;
+		* {
+			pointer-events: none;
+		}
+		.phred-game * {
+			pointer-events: all !important;
+		}
+	}
+
 	&.responsive {
 		display: flex;
 		align-items: center;
@@ -26,6 +36,7 @@ phred-game-container {
 		position: absolute;
 		.phred-game,
 		.phred-game * {
+			pointer-events: none;
 			max-width: 100% !important;
 			width: 100% !important;
 			height: 100% !important;

src/scene-view/game-container/game-container.ts

@@ -1,7 +1,9 @@
 import { ActionHandler } from 'core/action-handler';
+import { Actions } from 'core/actions';
 import { Editor } from 'core/editor';
 import { PreferenceKey } from 'core/preferences/preferences.model';
 import { PreferencesUtil } from 'core/preferences/preferences.util';
+import { DataOrigin } from 'data/editor-data';
 import { PluginConfig, Size } from 'plugin.model';
 import { GameParent } from 'scene-view/game-parent/game-parent';
 import { SelectionArea } from 'scene-view/selection-area/selection-area';
@@ -16,6 +18,18 @@ export class GameContainer extends HTMLElement {
 	private gameParent: GameParent;
 	private selectionArea: SelectionArea;
 
+	private passThru = false;
+
+	private setPassThru(value: boolean) {
+		this.passThru = value;
+		if (value) {
+			this.classList.add('passthru');
+			Editor.data.selectObject(null, DataOrigin.ACTION);
+		} else {
+			this.classList.remove('passthru');
+		}
+	}
+
 	public init(game: Phaser.Game) {
 		this.game = game;
 		this._onInputUpFn = this.onInputUp.bind(this);
@@ -35,6 +49,12 @@ export class GameContainer extends HTMLElement {
 		this.onmousedown = this.onInputDown;
 		this.onmousemove = this.onInputMove;
 		this.onmouseup = this.onInputUp;
+
+		actions.setActionCommand(
+			Actions.TOGGLE_PASS_THRU,
+			() => this.setPassThru(!this.passThru),
+			() => this.passThru
+		);
 	}
 
 	public enable(config: PluginConfig) {

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

@@ -41,7 +41,6 @@ export class SelectionArea extends HTMLElement {
 		this.addEventListener('mousedown', this.onMouseDown.bind(this));
 		this.addEventListener('mouseup', this.onMouseUp.bind(this));
 		this.addEventListener('mousemove', this.onMouseMove.bind(this));
-
 		Editor.data.onSelectedObjectChanged.add(this.onSelectedObjectChanged, this);
 		PreferencesUtil.setupPreferences(
 			['gizmos', 'snap', 'guides', 'hitArea'],