@infinite-canvas-tutorial/webcomponents/lib/systems/ZoomLevel.js

WebComponents UI implementation

"use strict";
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m") throw new TypeError("Private method is not writable");
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _ZoomLevel_zoomChangedEvent, _ZoomLevel_positionChangedEvent;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ZoomLevel = void 0;
const ecs_1 = require("@infinite-canvas-tutorial/ecs");
const event_1 = require("../event");
class ZoomLevel extends ecs_1.System {
    constructor() {
        super();
        _ZoomLevel_zoomChangedEvent.set(this, void 0);
        _ZoomLevel_positionChangedEvent.set(this, void 0);
        this.cameras = this.query((q) => q.changed.with(ecs_1.ComputedCamera).trackWrites);
        this.query((q) => q.using(ecs_1.Camera, ecs_1.Transform).write.and.using(ecs_1.Canvas, ecs_1.ComputedBounds).read);
    }
    initialize() {
        __classPrivateFieldSet(this, _ZoomLevel_zoomChangedEvent, new CustomEvent(event_1.Event.CAMERA_ZOOM_CHANGED, {
            detail: {
                zoom: undefined,
            },
            bubbles: true,
            composed: true,
        }), "f");
        __classPrivateFieldSet(this, _ZoomLevel_positionChangedEvent, new CustomEvent(event_1.Event.CAMERA_POSITION_CHANGED, {
            detail: {
                x: undefined,
                y: undefined,
            },
            bubbles: true,
            composed: true,
        }), "f");
    }
    execute() {
        this.cameras.changed.forEach((camera) => {
            const { canvas } = camera.read(ecs_1.Camera);
            const api = canvas.read(ecs_1.Canvas).api;
            const { zoom, x, y, rotation } = camera.read(ecs_1.ComputedCamera);
            api.setAppState(Object.assign(Object.assign({}, api.getAppState()), { cameraZoom: zoom, cameraX: x, cameraY: y, cameraRotation: rotation }));
            const cosR = Math.cos(rotation);
            const sinR = Math.sin(rotation);
            const a = (0, ecs_1.toDomPrecision)(zoom * cosR);
            const b = (0, ecs_1.toDomPrecision)(-zoom * sinR);
            const c = (0, ecs_1.toDomPrecision)(zoom * sinR);
            const d = (0, ecs_1.toDomPrecision)(zoom * cosR);
            const e = (0, ecs_1.toDomPrecision)(-zoom * (cosR * x + sinR * y));
            const f = (0, ecs_1.toDomPrecision)(zoom * (sinR * x - cosR * y));
            api.getHtmlLayer().style.transform = `matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`;
            if (zoom !== __classPrivateFieldGet(this, _ZoomLevel_zoomChangedEvent, "f").detail.zoom) {
                __classPrivateFieldGet(this, _ZoomLevel_zoomChangedEvent, "f").detail.zoom = zoom;
                api.element.dispatchEvent(__classPrivateFieldGet(this, _ZoomLevel_zoomChangedEvent, "f"));
            }
            else if (x !== __classPrivateFieldGet(this, _ZoomLevel_positionChangedEvent, "f").detail.x || y !== __classPrivateFieldGet(this, _ZoomLevel_positionChangedEvent, "f").detail.y) {
                __classPrivateFieldGet(this, _ZoomLevel_positionChangedEvent, "f").detail.x = x;
                __classPrivateFieldGet(this, _ZoomLevel_positionChangedEvent, "f").detail.y = y;
                api.element.dispatchEvent(__classPrivateFieldGet(this, _ZoomLevel_positionChangedEvent, "f"));
            }
        });
    }
}
exports.ZoomLevel = ZoomLevel;
_ZoomLevel_zoomChangedEvent = new WeakMap(), _ZoomLevel_positionChangedEvent = new WeakMap();
//# sourceMappingURL=ZoomLevel.js.map