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

WebComponents UI implementation

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