@wiredsnippets/wsproom 0.0.0-stage → 2.0.0

package/dist-esm/objects/room/RoomCamera.js

@@ -0,0 +1,321 @@
+import * as PIXI from "pixi.js";
+import TWEEN, { Group, Tween } from '@tweenjs/tween.js';
+const ZOOM_LEVELS = [0.5, 1, 2, 4, 8];
+const ZOOM_DURATION = 180;
+export class RoomCamera extends PIXI.Container {
+    constructor(_room, _parentBounds, _options) {
+        var _a, _b, _c;
+        var _d;
+        super();
+        this._room = _room;
+        this._parentBounds = _parentBounds;
+        this._options = _options;
+        this._state = { type: "WAITING" };
+        this._enabled = true;
+        this._offsets = { x: 0, y: 0 };
+        this._animatedOffsets = { x: 0, y: 0 };
+        this.isMobile = false;
+        this._zoom = 1;
+        this._updateTweens = () => {
+            this._tweenGroup.update(TWEEN.now(), false);
+        };
+        this._handleWheel = (event) => {
+            var _a, _b;
+            if (!this._enabled || !((_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.zoom) === null || _b === void 0 ? void 0 : _b.enabled))
+                return;
+            event.preventDefault();
+            const levels = this._zoomLevels;
+            const index = levels.indexOf(this._zoom);
+            const current = index >= 0
+                ? index
+                : levels.reduce((best, level, i) => Math.abs(level - this._zoom) < Math.abs(levels[best] - this._zoom) ? i : best, 0);
+            const next = event.deltaY < 0 ? current + 1 : current - 1;
+            if (next < 0 || next >= levels.length)
+                return;
+            const box = this._room.application.canvas.getBoundingClientRect();
+            this._zoomTo(levels[next], {
+                x: event.clientX - box.x - this.parent.worldTransform.tx,
+                y: event.clientY - box.y - this.parent.worldTransform.ty,
+            });
+        };
+        this._handlePointerUp = (event) => {
+            if (event.altKey || event.shiftKey || event.ctrlKey)
+                return; // Block all modifier keys.
+            if (this._state.type === "WAITING" || this._state.type === "ANIMATE_ZERO")
+                return;
+            if (this._state.pointerId !== event.pointerId)
+                return;
+            let animatingBack = false;
+            if (this._state.type === "DRAGGING") {
+                animatingBack = this._stopDragging(this._state);
+            }
+            if (!animatingBack) {
+                this._resetDrag();
+            }
+        };
+        this._handlePointerDown = (event) => {
+            if (!this._enabled)
+                return;
+            if (event.nativeEvent.altKey ||
+                event.nativeEvent.shiftKey ||
+                event.nativeEvent.ctrlKey)
+                return; // Block all modifier keys.
+            const position = event.getLocalPosition(this.parent);
+            if (this._state.type === "WAITING") {
+                this._enterWaitingForDistance(position, event.pointerId);
+            }
+            else if (this._state.type === "ANIMATE_ZERO") {
+                this._changingDragWhileAnimating(position, event.pointerId);
+            }
+        };
+        this._handlePointerMove = (event) => {
+            if (!this._enabled)
+                return;
+            const application = this._room.application;
+            if (!application)
+                return;
+            const view = application.canvas;
+            if (!view)
+                return;
+            const box = view.getBoundingClientRect();
+            const position = new PIXI.Point(event.clientX - box.x - this.parent.worldTransform.tx, event.clientY - box.y - this.parent.worldTransform.ty);
+            switch (this._state.type) {
+                case "WAIT_FOR_DISTANCE": {
+                    this._tryUpgradeWaitForDistance(this._state, position, event.pointerId);
+                    break;
+                }
+                case "DRAGGING": {
+                    this._updateDragging(this._state, position, event.pointerId);
+                    break;
+                }
+            }
+        };
+        const target = (_d = (_a = this._options) === null || _a === void 0 ? void 0 : _a.target) !== null && _d !== void 0 ? _d : window;
+        this._target = target;
+        this.isMobile = screen.width < 600;
+        this._parentContainer = new PIXI.Container();
+        this._parentContainer.hitArea = this._parentBounds();
+        this._parentContainer.eventMode = "static";
+        this._container = new PIXI.Container({ isRenderGroup: true });
+        this._container.addChild(this._room);
+        this._parentContainer.addChild(this._container);
+        this.addChild(this._parentContainer);
+        // Activation of the camera is only triggered by a down event on the parent container.
+        this._parentContainer.addListener("pointerdown", this._handlePointerDown);
+        this._target.addEventListener("pointermove", this._handlePointerMove);
+        this._target.addEventListener("pointerup", this._handlePointerUp);
+        if ((_c = (_b = this._options) === null || _b === void 0 ? void 0 : _b.zoom) === null || _c === void 0 ? void 0 : _c.enabled) {
+            this._room.application.canvas.addEventListener("wheel", this._handleWheel, { passive: false });
+        }
+        this._tweenGroup = new Group();
+        this._room.application.ticker.add(this._updateTweens);
+    }
+    static forScreen(room, options) {
+        return new RoomCamera(room, () => room.application.screen, options);
+    }
+    setEnabled(enabled) {
+        this._enabled = enabled;
+        this._parentContainer.eventMode = enabled ? "static" : "none";
+        if (!enabled) {
+            this._state = { type: "WAITING" };
+            this._updatePosition();
+        }
+    }
+    destroy() {
+        var _a;
+        this._parentContainer.removeListener("pointerdown", this._handlePointerDown);
+        this._target.removeEventListener("pointermove", this._handlePointerMove);
+        this._target.removeEventListener("pointerup", this._handlePointerUp);
+        this._room.application.canvas.removeEventListener("wheel", this._handleWheel);
+        (_a = this._zoomTween) === null || _a === void 0 ? void 0 : _a.stop();
+        this._tweenGroup.removeAll();
+        this._room.application.ticker.remove(this._updateTweens);
+    }
+    get container() {
+        return this._container;
+    }
+    get zoom() {
+        return this._zoom;
+    }
+    setZoom(value, anchor) {
+        const bounds = this._parentBounds();
+        this._zoomTo(value, anchor !== null && anchor !== void 0 ? anchor : { x: bounds.width / 2, y: bounds.height / 2 });
+    }
+    get _zoomLevels() {
+        var _a, _b;
+        var _c;
+        return (_c = (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.zoom) === null || _b === void 0 ? void 0 : _b.levels) !== null && _c !== void 0 ? _c : ZOOM_LEVELS;
+    }
+    _zoomTo(target, anchor) {
+        var _a, _b, _c;
+        var _d;
+        if (target === this._zoom)
+            return;
+        const roomX = (anchor.x - this._offsets.x) / this._zoom;
+        const roomY = (anchor.y - this._offsets.y) / this._zoom;
+        const previousZoom = this._zoom;
+        this._zoom = target;
+        const targetOffsets = this._clampOffsets({
+            x: anchor.x - roomX * target,
+            y: anchor.y - roomY * target,
+        });
+        this._zoom = previousZoom;
+        (_a = this._zoomTween) === null || _a === void 0 ? void 0 : _a.stop();
+        const from = {
+            zoom: this._zoom,
+            x: this._offsets.x,
+            y: this._offsets.y,
+        };
+        this._zoomTween = new Tween(from, this._tweenGroup)
+            .to({ zoom: target, x: targetOffsets.x, y: targetOffsets.y }, (_d = (_c = (_b = this._options) === null || _b === void 0 ? void 0 : _b.zoom) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : ZOOM_DURATION)
+            .easing(TWEEN.Easing.Cubic.Out)
+            .onUpdate((object) => {
+            this._zoom = object.zoom;
+            this._offsets = { x: object.x, y: object.y };
+            this._container.scale.set(object.zoom);
+            this._updatePosition();
+        })
+            .onComplete(() => {
+            this._zoom = target;
+            this._offsets = targetOffsets;
+            this._container.scale.set(target);
+            this._updatePosition();
+        })
+            .start();
+    }
+    _updatePosition() {
+        switch (this._state.type) {
+            case "DRAGGING": {
+                // When dragging, the current position consists of the current offset of the camera
+                // and the drag difference.
+                const diffX = this._state.currentX - this._state.startX;
+                const diffY = this._state.currentY - this._state.startY;
+                this._container.x = this._offsets.x + diffX;
+                this._container.y = this._offsets.y + diffY;
+                break;
+            }
+            case "ANIMATE_ZERO": {
+                // When animating back to the zero point, we use the animatedOffsets of the camera.
+                this._container.x = this._animatedOffsets.x;
+                this._container.y = this._animatedOffsets.y;
+                break;
+            }
+            default: {
+                // Default behavior: Use the set offsets of the camera.
+                this._container.x = this._offsets.x;
+                this._container.y = this._offsets.y;
+            }
+        }
+    }
+    _clampOffsets(offsets) {
+        var _a;
+        if (!((_a = this._options) === null || _a === void 0 ? void 0 : _a.bounded))
+            return offsets;
+        const bounds = this._parentBounds();
+        const roomX = this.parent.position.x + this._room.x * this._zoom;
+        const roomY = this.parent.position.y + this._room.y * this._zoom;
+        const roomWidth = this._room.roomWidth * this._zoom;
+        const roomHeight = this._room.roomHeight * this._zoom;
+        const margin = Math.min(roomWidth, bounds.width) / 2;
+        const marginY = Math.min(roomHeight, bounds.height) / 2;
+        return {
+            x: Math.min(Math.max(offsets.x, margin - roomX - roomWidth), bounds.width - roomX - margin),
+            y: Math.min(Math.max(offsets.y, marginY - roomY - roomHeight), bounds.height - roomY - marginY),
+        };
+    }
+    _returnToZero(state, current) {
+        var _a;
+        var _b;
+        this._state = {
+            ...state,
+            type: "ANIMATE_ZERO",
+        };
+        const duration = (_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 500;
+        const target = this._clampOffsets(current);
+        this._animatedOffsets = current;
+        this._offsets = target;
+        const newPos = { ...this._animatedOffsets };
+        const tween = new Tween(newPos, this._tweenGroup)
+            .to({ x: target.x, y: target.y }, duration)
+            .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
+            .onUpdate((object, elapsed) => {
+            this._animatedOffsets = object;
+            if (elapsed >= 1) {
+                this._state = { type: "WAITING" };
+            }
+            this._updatePosition();
+        })
+            .start();
+        this._tween = tween;
+        this._updatePosition();
+    }
+    _stopDragging(state) {
+        const diffX = state.currentX - state.startX;
+        const diffY = state.currentY - state.startY;
+        const currentOffsets = {
+            x: this._offsets.x + diffX,
+            y: this._offsets.y + diffY,
+        };
+        const clamped = this._clampOffsets(currentOffsets);
+        if (clamped.x !== currentOffsets.x || clamped.y !== currentOffsets.y) {
+            this._returnToZero(state, currentOffsets);
+            return true;
+        }
+        this._offsets = currentOffsets;
+        return false;
+    }
+    _resetDrag() {
+        this._state = { type: "WAITING" };
+        this._updatePosition();
+    }
+    _changingDragWhileAnimating(position, pointerId) {
+        this._offsets = this._animatedOffsets;
+        this._animatedOffsets = { x: 0, y: 0 };
+        this._tween.stop();
+        this._state = {
+            currentX: position.x,
+            currentY: position.y,
+            startX: position.x,
+            startY: position.y,
+            pointerId: pointerId,
+            type: "DRAGGING",
+            skipBoundsCheck: true,
+        };
+        this._updatePosition();
+    }
+    _enterWaitingForDistance(position, pointerId) {
+        this._state = {
+            type: "WAIT_FOR_DISTANCE",
+            pointerId: pointerId,
+            startX: position.x,
+            startY: position.y,
+        };
+    }
+    _tryUpgradeWaitForDistance(state, position, pointerId) {
+        if (state.pointerId !== pointerId && !this.isMobile)
+            return;
+        const distance = Math.sqrt((position.x - state.startX) ** 2 + (position.y - state.startY) ** 2);
+        // When the distance of the pointer travelled more than 10px, start dragging.
+        if (distance >= 10) {
+            this._state = {
+                currentX: position.x,
+                currentY: position.y,
+                startX: position.x,
+                startY: position.y,
+                pointerId: pointerId,
+                type: "DRAGGING",
+            };
+            this._updatePosition();
+        }
+    }
+    _updateDragging(state, position, pointerId) {
+        if (state.pointerId !== pointerId)
+            return;
+        this._state = {
+            ...state,
+            currentX: position.x,
+            currentY: position.y,
+        };
+        this._updatePosition();
+    }
+}

package/dist-esm/objects/room/RoomLandscapeMaskSprite.js

@@ -0,0 +1,63 @@
+import * as PIXI from "pixi.js";
+const negativeFilter = new PIXI.ColorMatrixFilter();
+negativeFilter.negative(false);
+/**
+ * This class enables us to create a mask which
+ * consists of multiple different sprites.
+ *
+ * This is important for correctly displaying
+ * window furniture with landscapes.
+ *
+ * Windows usually provide a black mask image. This mask image is used
+ * to only display the landscape in the area of the mask image.
+ *
+ * Since there can be multiple windows, and because of that multiple masks,
+ * we need a sprite which is able to combine multiple sprites into a single
+ * sprite.
+ *
+ * This Sprite renders its sub-sprites through `PIXI.RenderTexture`
+ * into a single texture, and uses that as a texture for itself.
+ */
+export class RoomLandscapeMaskSprite extends PIXI.Sprite {
+    constructor({ roomBounds, renderer, }) {
+        super();
+        this._sprites = new Set();
+        this._roomBounds = roomBounds;
+        this._roomWidth = roomBounds.maxX - roomBounds.minX;
+        this._roomHeight = roomBounds.maxY - roomBounds.minY;
+        this._renderer = renderer;
+    }
+    addSprite(element) {
+        this._sprites.add(element);
+        this._updateTexture();
+    }
+    updateSprite(element) {
+        if (!this._sprites.has(element))
+            return;
+        this._updateTexture();
+    }
+    removeSprite(element) {
+        this._sprites.delete(element);
+        this._updateTexture();
+    }
+    _updateTexture() {
+        const texture = PIXI.RenderTexture.create({
+            width: this._roomWidth * 2,
+            height: this._roomHeight,
+        });
+        const container = new PIXI.Container();
+        this._sprites.forEach((sprite) => {
+            // We apply a negative filter to the mask sprite, because the mask assets
+            // of the furniture are usually completly black. `pixi.js` requires white
+            // images to mask an image.
+            sprite.filters = [negativeFilter];
+            container.addChild(sprite);
+        });
+        container.y = -this._roomBounds.minY;
+        this.y = this._roomBounds.minY;
+        container.x = -this._roomBounds.minX;
+        this.x = this._roomBounds.minX;
+        this._renderer.render({ container, target: texture });
+        this.texture = texture;
+    }
+}