@wiredsnippets/wsproom 0.0.0-stage → 2.0.0

package/dist-esm/objects/events/EventManager.js

@@ -0,0 +1,241 @@
+import { EventManagerNode } from "./EventManagerNode";
+import RBush from "rbush";
+import { TILE_CURSOR, } from "./interfaces/IEventGroup";
+const DRAG_THRESHOLD = 10;
+export class EventManager {
+    constructor() {
+        this._nodes = new Map();
+        this._bush = new RBush();
+        this._currentOverElements = new Set();
+        this._pointerDownElements = new Set();
+        this._pointerDownPosition = undefined;
+        this._onBackgroundClick = undefined;
+        this._targets = new Set();
+    }
+    set onBackgroundClick(value) {
+        this._onBackgroundClick = value;
+    }
+    reset() {
+        this._targets.forEach(target => this.remove(target));
+        this._targets.clear();
+        this._currentTarget = undefined;
+    }
+    click(event, x, y) {
+        if (this._exceededDragThreshold(x, y))
+            return;
+        const elements = this._performHitTest(x, y);
+        let nodes = elements.activeNodes;
+        if (nodes.length === 0 && this._pointerDownElements.size > 0) {
+            nodes = Array.from(this._pointerDownElements);
+        }
+        new Propagation(event, nodes, (target, event) => target.triggerClick(event));
+    }
+    pointerDown(event, x, y) {
+        const elements = this._performHitTest(x, y);
+        this._pointerDownElements = new Set(elements.activeNodes);
+        this._pointerDownPosition = { x, y };
+        new Propagation(event, elements.activeNodes, (target, event) => target.triggerPointerDown(event));
+    }
+    pointerUp(event, x, y) {
+        const dragged = this._exceededDragThreshold(x, y);
+        const elements = this._performHitTest(x, y);
+        const elementsSet = new Set(elements.activeNodes);
+        const downGroups = new Set();
+        this._pointerDownElements.forEach((node) => {
+            downGroups.add(node.target.getGroup());
+        });
+        let clickedNodes = new Set();
+        elements.activeNodes.forEach((node) => {
+            if (downGroups.has(node.target.getGroup())) {
+                clickedNodes.add(node);
+            }
+        });
+        if (clickedNodes.size === 0 && this._pointerDownElements.size === 0 && this._pointerDownPosition) {
+            const downElements = this._performHitTest(this._pointerDownPosition.x, this._pointerDownPosition.y);
+            downElements.activeNodes.forEach((node) => clickedNodes.add(node));
+        }
+        if (dragged) {
+            clickedNodes = new Set();
+        }
+        if (!dragged &&
+            elements.activeNodes.length === 0 &&
+            clickedNodes.size === 0 &&
+            this._onBackgroundClick) {
+            this._onBackgroundClick(event);
+        }
+        new Propagation(event, elements.activeNodes, (target, event) => target.triggerPointerUp(event));
+        new Propagation(event, Array.from(clickedNodes), (target, event) => {
+            target.triggerClick(event);
+        });
+        this._pointerDownPosition = undefined;
+    }
+    _exceededDragThreshold(x, y) {
+        const start = this._pointerDownPosition;
+        if (start == null)
+            return false;
+        const distance = Math.sqrt((x - start.x) ** 2 + (y - start.y) ** 2);
+        return distance >= DRAG_THRESHOLD;
+    }
+    move(event, x, y) {
+        const elements = this._performHitTest(x, y);
+        const current = new Set(elements.activeNodes.filter((node, index) => 
+        // Only interested in the top most element
+        index === 0 ||
+            // or the tile cursor
+            node.target.getGroup().getEventGroupIdentifier() === TILE_CURSOR));
+        const previous = this._currentOverElements;
+        const added = new Set();
+        current.forEach((node) => {
+            if (!previous.has(node)) {
+                added.add(node);
+            }
+        });
+        const removed = new Set();
+        previous.forEach((node) => {
+            if (!current.has(node)) {
+                removed.add(node);
+            }
+        });
+        const addedGroups = new Set();
+        added.forEach((node) => {
+            addedGroups.add(node.target.getGroup());
+        });
+        const removedButGroupPresent = new Set();
+        const actualRemoved = new Set();
+        removed.forEach((node) => {
+            if (addedGroups.has(node.target.getGroup())) {
+                removedButGroupPresent.add(node);
+            }
+            actualRemoved.add(node);
+        });
+        this._currentOverElements = current;
+        new Propagation(event, Array.from(removedButGroupPresent), (target, event) => {
+            target.triggerPointerTargetChanged(event);
+        });
+        new Propagation(event, Array.from(actualRemoved), (target, event) => target.triggerPointerOut(event));
+        new Propagation(event, Array.from(added), (target, event) => target.triggerPointerOver(event));
+    }
+    register(target) {
+        if (this._nodes.has(target))
+            throw new Error("Target already registered");
+        const node = new EventManagerNode(target, this._bush);
+        this._nodes.set(target, node);
+        this._targets.add(target);
+        return node;
+    }
+    remove(target) {
+        const current = this._nodes.get(target);
+        if (current == null)
+            throw new Error("Target isn't in the event manager");
+        current.destroy();
+        this._targets.delete(target);
+    }
+    getCoordinateRootMatrix() {
+        var _a;
+        return (_a = this.coordinateRoot) === null || _a === void 0 ? void 0 : _a.worldTransform;
+    }
+    _performHitTest(x, y) {
+        let indexX = x;
+        let indexY = y;
+        const m = this.getCoordinateRootMatrix();
+        if (m != null) {
+            indexX = (x - m.tx) / m.a;
+            indexY = (y - m.ty) / m.d;
+        }
+        const qualifyingElements = this._bush.search({
+            minX: indexX,
+            minY: indexY,
+            maxX: indexX,
+            maxY: indexY,
+        });
+        const sortedElements = qualifyingElements
+            .sort((a, b) => b.target.getEventZOrder() - a.target.getEventZOrder())
+            .filter((node) => node.target.hits(x, y));
+        const groups = new Map();
+        const groupElements = [];
+        sortedElements.forEach((node) => {
+            const group = node.target.getGroup();
+            if (group != null && groups.has(group))
+                return;
+            groupElements.push(node);
+            if (group != null) {
+                groups.set(group, node);
+            }
+        });
+        return {
+            activeNodes: groupElements,
+            activeGroups: groups,
+        };
+    }
+}
+class Propagation {
+    constructor(event, path, _trigger) {
+        this.event = event;
+        this.path = path;
+        this._trigger = _trigger;
+        this._skip = new Set();
+        this._allow = new Set();
+        this._stopped = false;
+        this._propagate();
+    }
+    _propagate() {
+        const event = this._createEvent();
+        for (let i = 0; i < this.path.length; i++) {
+            if (this._stopped)
+                return;
+            const node = this.path[i];
+            if (this._skip.has(node.target.getGroup().getEventGroupIdentifier()) &&
+                !this._allow.has(node.target.getGroup().getEventGroupIdentifier())) {
+                continue;
+            }
+            if (this._allow.size > 0 &&
+                !this._allow.has(node.target.getGroup().getEventGroupIdentifier())) {
+                continue;
+            }
+            this._trigger(this.path[i].target, event);
+        }
+    }
+    _createEvent() {
+        return {
+            interactionEvent: this.event,
+            mouseEvent: this.event.nativeEvent,
+            stopPropagation: () => {
+                this._stopped = true;
+            },
+            skip: (...identifiers) => {
+                const add = (identifier) => {
+                    if (Array.isArray(identifier)) {
+                        identifier.forEach((value) => add(value));
+                    }
+                    else {
+                        this._skip.add(identifier);
+                    }
+                };
+                add(identifiers);
+            },
+            skipExcept: (...identifiers) => {
+                const add = (identifier) => {
+                    if (Array.isArray(identifier)) {
+                        identifier.forEach((value) => add(value));
+                    }
+                    else {
+                        this._allow.add(identifier);
+                    }
+                };
+                add(identifiers);
+            },
+        };
+    }
+}
+export const NOOP_EVENT_MANAGER = {
+    register: () => {
+        return {
+            destroy: () => {
+                // Do nothing
+            },
+        };
+    },
+    remove: () => {
+        // Do nothing
+    },
+};

package/dist-esm/objects/events/EventManagerContainer.js

@@ -0,0 +1,32 @@
+export class EventManagerContainer {
+    constructor(_application, _eventManager) {
+        this._application = _application;
+        this._eventManager = _eventManager;
+        const stage = this._application.stage;
+        stage.eventMode = "static";
+        stage.hitArea = this._application.screen;
+        this._onPointerMove = (event) => {
+            const position = stage.toLocal(event.global);
+            this._eventManager.move(event, position.x, position.y);
+        };
+        this._onPointerUp = (event) => {
+            const position = stage.toLocal(event.global);
+            this._eventManager.pointerUp(event, position.x, position.y);
+        };
+        this._onPointerDown = (event) => {
+            const position = stage.toLocal(event.global);
+            this._eventManager.pointerDown(event, position.x, position.y);
+        };
+        stage.on("pointermove", this._onPointerMove);
+        stage.on("pointerup", this._onPointerUp);
+        stage.on("pointerdown", this._onPointerDown);
+    }
+    destroy() {
+        const stage = this._application.stage;
+        if (stage != null) {
+            stage.off("pointermove", this._onPointerMove);
+            stage.off("pointerup", this._onPointerUp);
+            stage.off("pointerdown", this._onPointerDown);
+        }
+    }
+}

package/dist-esm/objects/events/EventManagerNode.js

@@ -0,0 +1,51 @@
+export class EventManagerNode {
+    get minX() {
+        if (this._rectangle == null)
+            throw new Error("Rectangle wasn't set");
+        return this._rectangle.x;
+    }
+    get maxX() {
+        if (this._rectangle == null)
+            throw new Error("Rectangle wasn't set");
+        return this._rectangle.x + this._rectangle.width;
+    }
+    get minY() {
+        if (this._rectangle == null)
+            throw new Error("Rectangle wasn't set");
+        return this._rectangle.y;
+    }
+    get maxY() {
+        if (this._rectangle == null)
+            throw new Error("Rectangle wasn't set");
+        return this._rectangle.y + this._rectangle.height;
+    }
+    constructor(target, _bush) {
+        this.target = target;
+        this._bush = _bush;
+        this._subscription = target.getRectangleObservable().subscribe((value) => {
+            // avoid updating for no reason as it lowers FPS in more than half
+            const current = this._rectangle;
+            if ((current === null || current === void 0 ? void 0 : current.height) != (value === null || value === void 0 ? void 0 : value.height) ||
+                (current === null || current === void 0 ? void 0 : current.width) != (value === null || value === void 0 ? void 0 : value.width) ||
+                (current === null || current === void 0 ? void 0 : current.x) != (value === null || value === void 0 ? void 0 : value.x) ||
+                (current === null || current === void 0 ? void 0 : current.y) != (value === null || value === void 0 ? void 0 : value.y)) {
+                this._updateRectangle(value);
+            }
+        });
+    }
+    destroy() {
+        if (this._rectangle != null) {
+            this._bush.remove(this);
+        }
+        this._subscription.unsubscribe();
+    }
+    _updateRectangle(rectangle) {
+        if (this._rectangle != null) {
+            this._bush.remove(this);
+        }
+        this._rectangle = rectangle;
+        if (rectangle != null) {
+            this._bush.insert(this);
+        }
+    }
+}

package/dist-esm/objects/events/EventOverOutHandler.js

@@ -0,0 +1,86 @@
+export class EventOverOutHandler {
+    constructor() {
+        this._eventEmitters = new Map();
+        this._overElements = new Set();
+        this._hover = false;
+        this._targetChanged = false;
+        this._onOver = (emitter, event) => {
+            this._overElements.add(emitter);
+            this._update(event);
+        };
+        this._onOut = (emitter, event) => {
+            this._overElements.delete(emitter);
+            this._update(event);
+        };
+        this._onTargetChanged = (emitter, event) => {
+            this._overElements.delete(emitter);
+            this._targetChanged = true;
+            this._update(event);
+        };
+    }
+    get onOver() {
+        return this._onOverCallback;
+    }
+    set onOver(value) {
+        this._onOverCallback = value;
+    }
+    get onOut() {
+        return this._onOutCallback;
+    }
+    set onOut(value) {
+        this._onOutCallback = value;
+    }
+    register(emitter) {
+        if (this._eventEmitters.has(emitter))
+            return;
+        this._eventEmitters.set(emitter, new RegisteredOverOutHandler(emitter, this._onOver, this._onOut, this._onTargetChanged));
+    }
+    remove(emitter) {
+        const handler = this._eventEmitters.get(emitter);
+        if (handler == null)
+            return;
+        this._eventEmitters.delete(emitter);
+        this._overElements.delete(emitter);
+        handler.destroy();
+    }
+    _update(event) {
+        if (this._overElements.size > 0 && !this._hover) {
+            this._hover = true;
+            if (!this._targetChanged) {
+                this.onOver && this.onOver(event);
+            }
+            this._targetChanged = false;
+        }
+        if (this._overElements.size < 1 && this._hover) {
+            this._hover = false;
+            if (!this._targetChanged) {
+                this.onOut && this.onOut(event);
+            }
+        }
+    }
+}
+class RegisteredOverOutHandler {
+    constructor(emitter, onOver, onOut, onTargetChanged) {
+        this.emitter = emitter;
+        this.onOver = onOver;
+        this.onOut = onOut;
+        this.onTargetChanged = onTargetChanged;
+        this._handlePointerOut = (event) => {
+            this.onOut(this.emitter, event);
+        };
+        this._handlePointerOver = (event) => {
+            this.onOver(this.emitter, event);
+        };
+        this._handlePointerTargetChanged = (event) => {
+            this.onTargetChanged(this.emitter, event);
+        };
+        emitter.addEventListener("pointerout", this._handlePointerOut);
+        emitter.addEventListener("pointerover", this._handlePointerOver);
+        emitter.addEventListener("pointertargetchanged", this._handlePointerTargetChanged);
+    }
+    destroy() {
+        this.emitter.removeEventListener("pointerout", this._handlePointerOut);
+        this.emitter.removeEventListener("pointerover", this._handlePointerOver);
+        this.emitter.removeEventListener("pointertargetchanged", this._handlePointerTargetChanged);
+    }
+}

package/dist-esm/objects/events/interfaces/IEventGroup.js

@@ -0,0 +1,3 @@
+export const FURNITURE = Symbol("FURNITURE");
+export const AVATAR = Symbol("AVATAR");
+export const TILE_CURSOR = Symbol("TILE_CURSOR");

package/dist-esm/objects/events/interfaces/IEventHandler.js

@@ -0,0 +1 @@
+export {};

package/dist-esm/objects/events/interfaces/IEventHittable.js

@@ -0,0 +1 @@
+export {};

package/dist-esm/objects/events/interfaces/IEventManager.js

@@ -0,0 +1 @@
+export {};

package/dist-esm/objects/events/interfaces/IEventManagerEvent.js

@@ -0,0 +1 @@
+export {};

package/dist-esm/objects/events/interfaces/IEventManagerNode.js

@@ -0,0 +1 @@
+export {};

package/dist-esm/objects/events/interfaces/IEventTarget.js

@@ -0,0 +1 @@
+export {};