@aurigma/design-atoms/Viewer/ViewportHandler.js

Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.

import { SizeF } from "@aurigma/design-atoms-model/Math";
import Environment from "@aurigma/design-atoms-model/Utils/Environment";
export class ViewportHandler {
    constructor(_canvas, _viewer) {
        this._canvas = _canvas;
        this._viewer = _viewer;
    }
    _getDesignTranslate(canvas) {
        const size = this._canvas.canvasElementSize;
        const designWidth = size.width; // / Environment.devicePixelRatio;
        const designHeight = size.height; // / Environment.devicePixelRatio;
        let { width: canvasWidth, height: canvasHeight } = canvas.getBoundingClientRect();
        canvasHeight *= Environment.devicePixelRatio;
        canvasWidth *= Environment.devicePixelRatio;
        const dx = (canvasWidth - designWidth) / 2;
        const dy = (canvasHeight - designHeight) / 2;
        return new SizeF(dx, dy);
    }
    _getScrollTranslate() {
        const sp = this._viewer.scrollingPosition;
        const ss = this._viewer.scrollingSize;
        let dx = (ss.x / 2 - sp.x) * Environment.devicePixelRatio;
        let dy = (ss.y / 2 - sp.y) * Environment.devicePixelRatio;
        return new SizeF(dx, dy);
    }
    _getViewportRotateAngle() {
        return this._viewer.contentAngle;
    }
    _getDesignSize() {
        const size = this._canvas.canvasElementSize;
        return new SizeF(size.width, size.height);
    }
    applyViewportTransformTo2dContext(context, canvas) {
        const scrollTranslate = this._getScrollTranslate();
        const designTranslate = this._getDesignTranslate(canvas);
        let { width: canvasWidth, height: canvasHeight } = canvas.getBoundingClientRect();
        canvasHeight *= Environment.devicePixelRatio;
        canvasWidth *= Environment.devicePixelRatio;
        const rotateTransform = this._getViewportRotateAngle();
        if (rotateTransform !== 0) {
            const angleRad = rotateTransform * Math.PI / 180;
            context.rotate(angleRad);
            let bdx = 0;
            let bdy = 0;
            let d = (canvasHeight - canvasWidth) / 2;
            if (rotateTransform == 90) {
                bdx = d;
                bdy = -(canvasHeight - d);
            }
            if (rotateTransform == 180) {
                bdx = -canvasWidth;
                bdy = -canvasHeight;
            }
            if (rotateTransform == 270) {
                bdx = -(canvasHeight - d);
                bdy = -d;
            }
            context.translate(bdx, bdy);
        }
        context.translate(designTranslate.width, designTranslate.height);
        switch (rotateTransform) {
            case 90:
                context.translate(scrollTranslate.height, -scrollTranslate.width);
                break;
            case 180:
                context.translate(-scrollTranslate.width, -scrollTranslate.height);
                break;
            case 270:
                context.translate(-scrollTranslate.height, scrollTranslate.width);
                break;
            default:
                context.translate(scrollTranslate.width, scrollTranslate.height);
        }
    }
    applyViewportTransformToTwMatrix(matrix, canvas) {
        const size = this._getDesignSize();
        const designWidth = size.width;
        const designHeight = size.height;
        const rotateTransform = this._getViewportRotateAngle();
        const angleRad = rotateTransform * Math.PI / 180;
        matrix.rotate(angleRad);
        let bdx = 0;
        let bdy = 0;
        let d = (designHeight - designWidth) / 2;
        if (rotateTransform == 90) {
            bdx = designWidth + d;
            bdy = d;
        }
        if (rotateTransform == 180) {
            bdx = designWidth;
            bdy = designHeight;
        }
        if (rotateTransform == 270) {
            bdx = -d;
            bdy = designHeight - d;
        }
        matrix.translate(bdx, bdy);
        const scrollTranslate = this._getScrollTranslate();
        const designTranslate = this._getDesignTranslate(canvas);
        matrix.translate(scrollTranslate.width, scrollTranslate.height);
        matrix.translate(designTranslate.width, designTranslate.height);
    }
}
//# sourceMappingURL=ViewportHandler.js.map