@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 _ZoomLevelSystem_zoomEvent;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ZoomLevelSystem = void 0;
const ecs_1 = require("@infinite-canvas-tutorial/ecs");
const event_1 = require("../event");
const components_1 = require("../components");
class ZoomLevelSystem extends ecs_1.System {
    constructor() {
        super();
        _ZoomLevelSystem_zoomEvent.set(this, void 0);
        this.cameraControl = this.attach(ecs_1.CameraControl);
        this.cameras = this.query((q) => q.changed.with(ecs_1.ComputedCamera).trackWrites);
        this.canvases = this.query((q) => q.added.with(ecs_1.Canvas));
        this.query((q) => q.using(ecs_1.Camera, ecs_1.Transform).write.and.using(components_1.Container).read);
    }
    initialize() {
        __classPrivateFieldSet(this, _ZoomLevelSystem_zoomEvent, new CustomEvent(event_1.Event.ZOOM_CHANGED, {
            detail: {
                zoom: undefined,
            },
            bubbles: true,
            composed: true,
        }), "f");
    }
    execute() {
        this.canvases.added.forEach((canvas) => {
            const { cameras, width, height } = canvas.read(ecs_1.Canvas);
            const container = canvas.read(components_1.Container);
            container.element.addEventListener(event_1.Event.ZOOM_TO, (e) => {
                const { zoom } = e.detail;
                cameras.forEach((camera) => {
                    const { x, y, rotation } = camera.read(ecs_1.ComputedCamera);
                    this.cameraControl.applyLandmark({
                        zoom,
                        x,
                        y,
                        rotation,
                        viewportX: width / 2,
                        viewportY: height / 2,
                    }, camera);
                });
            });
        });
        this.cameras.changed.forEach((camera) => {
            const { canvas } = camera.read(ecs_1.Camera);
            const container = canvas.read(components_1.Container);
            const { zoom } = camera.read(ecs_1.ComputedCamera);
            __classPrivateFieldGet(this, _ZoomLevelSystem_zoomEvent, "f").detail.zoom = zoom;
            container.element.dispatchEvent(__classPrivateFieldGet(this, _ZoomLevelSystem_zoomEvent, "f"));
        });
    }
}
exports.ZoomLevelSystem = ZoomLevelSystem;
_ZoomLevelSystem_zoomEvent = new WeakMap();
//# sourceMappingURL=ZoomLevel.js.map