@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";
var ViewportHandler = /** @class */ (function () {
    function ViewportHandler(_canvas, _viewer) {
        this._canvas = _canvas;
        this._viewer = _viewer;
    }
    ViewportHandler.prototype._getDesignTranslate = function (canvas) {
        var size = this._canvas.canvasElementSize;
        var designWidth = size.width; // / Environment.devicePixelRatio;
        var designHeight = size.height; // / Environment.devicePixelRatio;
        var _a = canvas.getBoundingClientRect(), canvasWidth = _a.width, canvasHeight = _a.height;
        canvasHeight *= Environment.devicePixelRatio;
        canvasWidth *= Environment.devicePixelRatio;
        var dx = (canvasWidth - designWidth) / 2;
        var dy = (canvasHeight - designHeight) / 2;
        return new SizeF(dx, dy);
    };
    ViewportHandler.prototype._getScrollTranslate = function () {
        var sp = this._viewer.scrollingPosition;
        var ss = this._viewer.scrollingSize;
        var dx = (ss.x / 2 - sp.x) * Environment.devicePixelRatio;
        var dy = (ss.y / 2 - sp.y) * Environment.devicePixelRatio;
        return new SizeF(dx, dy);
    };
    ViewportHandler.prototype._getViewportRotateAngle = function () {
        return this._viewer.contentAngle;
    };
    ViewportHandler.prototype._getDesignSize = function () {
        var size = this._canvas.canvasElementSize;
        return new SizeF(size.width, size.height);
    };
    ViewportHandler.prototype.applyViewportTransformTo2dContext = function (context, canvas) {
        var scrollTranslate = this._getScrollTranslate();
        var designTranslate = this._getDesignTranslate(canvas);
        var _a = canvas.getBoundingClientRect(), canvasWidth = _a.width, canvasHeight = _a.height;
        canvasHeight *= Environment.devicePixelRatio;
        canvasWidth *= Environment.devicePixelRatio;
        var rotateTransform = this._getViewportRotateAngle();
        if (rotateTransform !== 0) {
            var angleRad = rotateTransform * Math.PI / 180;
            context.rotate(angleRad);
            var bdx = 0;
            var bdy = 0;
            var 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);
        }
    };
    ViewportHandler.prototype.applyViewportTransformToTwMatrix = function (matrix, canvas) {
        var size = this._getDesignSize();
        var designWidth = size.width;
        var designHeight = size.height;
        //let { width: canvasWidth, height: canvasHeight } = canvas.getBoundingClientRect();
        //canvasHeight *= Environment.devicePixelRatio;
        //canvasWidth *= Environment.devicePixelRatio;
        var rotateTransform = this._getViewportRotateAngle();
        var angleRad = rotateTransform * Math.PI / 180;
        matrix.rotate(angleRad);
        var bdx = 0;
        var bdy = 0;
        var 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);
        var scrollTranslate = this._getScrollTranslate();
        var designTranslate = this._getDesignTranslate(canvas);
        matrix.translate(scrollTranslate.width, scrollTranslate.height);
        matrix.translate(designTranslate.width, designTranslate.height);
    };
    return ViewportHandler;
}());
export { ViewportHandler };
//# sourceMappingURL=ViewportHandler.js.map