@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 _ZoomLevel_zoomChangedEvent, _ZoomLevel_positionChangedEvent;
import { Camera, Canvas, ComputedBounds, ComputedCamera, System, Transform, toDomPrecision, } from '@infinite-canvas-tutorial/ecs';
import { Event } from '../event';
export class ZoomLevel extends System {
    constructor() {
        super();
        _ZoomLevel_zoomChangedEvent.set(this, void 0);
        _ZoomLevel_positionChangedEvent.set(this, void 0);
        this.cameras = this.query((q) => q.changed.with(ComputedCamera).trackWrites);
        this.query((q) => q.using(Camera, Transform).write.and.using(Canvas, ComputedBounds).read);
    }
    initialize() {
        __classPrivateFieldSet(this, _ZoomLevel_zoomChangedEvent, new CustomEvent(Event.CAMERA_ZOOM_CHANGED, {
            detail: {
                zoom: undefined,
            },
            bubbles: true,
            composed: true,
        }), "f");
        __classPrivateFieldSet(this, _ZoomLevel_positionChangedEvent, new CustomEvent(Event.CAMERA_POSITION_CHANGED, {
            detail: {
                x: undefined,
                y: undefined,
            },
            bubbles: true,
            composed: true,
        }), "f");
    }
    execute() {
        this.cameras.changed.forEach((camera) => {
            const { canvas } = camera.read(Camera);
            const api = canvas.read(Canvas).api;
            const { zoom, x, y, rotation } = camera.read(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 = toDomPrecision(zoom * cosR);
            const b = toDomPrecision(-zoom * sinR);
            const c = toDomPrecision(zoom * sinR);
            const d = toDomPrecision(zoom * cosR);
            const e = toDomPrecision(-zoom * (cosR * x + sinR * y));
            const f = 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"));
            }
        });
    }
}
_ZoomLevel_zoomChangedEvent = new WeakMap(), _ZoomLevel_positionChangedEvent = new WeakMap();
//# sourceMappingURL=ZoomLevel.js.map