+ Room - onBackgroundClick

src/objects/events/EventManager.ts

@@ -19,6 +19,11 @@ export class EventManager {
   private _bush = new RBush<EventManagerNode>();
   private _currentOverElements: Set<EventManagerNode> = new Set();
   private _pointerDownElements: Set<EventManagerNode> = new Set();
+  private _onBackgroundClick: ((event: InteractionEvent) => void) | undefined = undefined;
+
+  public set onBackgroundClick(value: ((event: InteractionEvent) => void) | undefined) {
+    this._onBackgroundClick = value;
+  }
 
   click(event: InteractionEvent, x: number, y: number) {
     const elements = this._performHitTest(x, y);
@@ -48,6 +53,10 @@ export class EventManager {
       }
     });
 
+    if (elements.activeNodes.length === 0 && clickedNodes.size === 0 && this._onBackgroundClick) {
+      this._onBackgroundClick(event);
+    }
+
     new Propagation(event, elements.activeNodes, (target, event) =>
       target.triggerPointerUp(event)
     );

src/objects/room/Room.ts

@@ -18,6 +18,7 @@ import { RoomModelVisualization } from "./RoomModelVisualization";
 import { ParsedTileMap } from "./ParsedTileMap";
 import { getTileColors, getWallColors } from "./util/getTileColors";
 import { EventManager } from "../events/EventManager";
+import { InteractionEvent } from "pixi.js";
 
 export interface Dependencies {
   animationTicker: IAnimationTicker;
@@ -330,6 +331,10 @@ export class Room
     this._visualization.destroy();
   }
 
+  public set onBackgroundClick(value: ((event: InteractionEvent) => void) | undefined) {
+    this._eventManager.onBackgroundClick = value;
+  }
+
   private _getObjectPositionWithOffset(roomX: number, roomY: number) {
     return {
       x: roomX,