@aurigma/design-atoms/InPlace/Ctx2dTextRenderer.js

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

import { EqualsOfFloatNumbers, Transform, PointF, Path } from "@aurigma/design-atoms-model/Math";
import { TextRenderer } from "./TextRenderer";
import { Graphics } from "../Graphics";
import { TextWhizzWrapper } from "@aurigma/design-atoms-text/TextEditor";
import { Size } from "@aurigma/design-atoms-model/Product/Items";
export class Ctx2dTextRenderer extends TextRenderer {
    drawText(handler, transform, center, previewScale, opacity, clippingPath) {
        const ctx = this._getScaledContext(transform, center, previewScale);
        ctx.globalAlpha = opacity !== null && opacity !== void 0 ? opacity : 1;
        const fullClippingPath = this._getFullClippingPath(transform, previewScale, clippingPath);
        if (fullClippingPath)
            Graphics.clipPath(ctx, fullClippingPath);
        try {
            handler.draw(ctx);
        }
        catch (e) {
            throw TextWhizzWrapper.createException(this._textWhizz, e);
        }
        finally {
            ctx.restore();
        }
    }
    transformText(handler, transform, center, previewScale, opacity, clippingPath) {
        this.drawText(handler, transform, center, previewScale, opacity, clippingPath);
    }
    clearText() {
        const ctx = this._activeCanvas.getContext("2d");
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    }
    drawSelection(handler, selection, transform, center, previewScale) {
        const ctx = this._getScaledContext(transform, center, previewScale);
        try {
            const fullClippingPath = this._getFullClippingPath(transform, previewScale, null);
            Graphics.clipPath(ctx, fullClippingPath);
            const rectangles = selection.getArea();
            rectangles.addToContext(ctx);
            ctx.fillStyle = this._selectionStyle.color;
            ctx.fill();
            handler.draw(ctx);
            let selectionTextColor = this._colorToTextWhizz(this._rgbColorParser.parse(this._selectionStyle.textColor));
            selection.draw(ctx, selectionTextColor);
        }
        catch (e) {
            throw TextWhizzWrapper.createException(this._textWhizz, e);
        }
        finally {
            ctx.restore();
        }
    }
    getTextImage(handler, bounds, previewScale) {
        if (EqualsOfFloatNumbers(0, bounds.width) || EqualsOfFloatNumbers(0, bounds.height))
            return null;
        const scale = this._scale;
        const scaledBounds = this._getScaledBounds(bounds);
        const scaledBoundsWithoutRound = this._getScaledBoundsWithoutRound(bounds);
        const cx = Math.round(scaledBoundsWithoutRound.left - scaledBounds.left);
        const cy = Math.round(scaledBoundsWithoutRound.top - scaledBounds.top);
        const staticCanvasMargin = TextRenderer.staticCanvasMargin;
        const size = new Size(scaledBounds.width + staticCanvasMargin * 2, scaledBounds.height + staticCanvasMargin * 2);
        const canvas = this._createCanvas(size);
        const ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.save();
        ctx.translate(-scaledBounds.left - cx + staticCanvasMargin, -scaledBounds.top - cy + staticCanvasMargin);
        ctx.scale(scale * previewScale, scale * previewScale);
        try {
            handler.draw(ctx);
        }
        catch (e) {
            throw TextWhizzWrapper.createException(this._textWhizz, e);
        }
        finally {
            ctx.restore();
        }
        try {
            return canvas;
        }
        catch (e) {
            console.warn(`Cannot get base64 image for text. Reason: ${e}`);
            return null;
        }
    }
    _getFullClippingPath(transform, previewScale, clippingPath) {
        const clippingPaths = [];
        const surfaceClippingPath = this._getSurfaceClippingPath(transform, previewScale);
        if (surfaceClippingPath)
            clippingPaths.push(surfaceClippingPath);
        if (clippingPath != null) {
            const path = clippingPath.clone();
            path.transform(new Transform(1 / previewScale, 1 / previewScale, 0, 0, 0), new PointF(0, 0));
            clippingPaths.push(path);
        }
        if (clippingPaths.length == 0)
            return null;
        let current = null;
        clippingPaths.forEach(element => {
            current = current == null
                ? element
                : current.addPath(element);
        });
        return current;
    }
    _getSurfaceClippingPath(transform, previewScale) {
        if (this._workspaceWidth == null || this._workspaceHeight == null)
            return null;
        const left = this.offset != null ? -this.offset.x : 0;
        const top = this.offset != null ? -this.offset.y : 0;
        let clippingPath = Path.rectangle(left, top, this._workspaceWidth, this._workspaceHeight);
        clippingPath.translate(-transform.translateX, -transform.translateY);
        clippingPath.scale(1 / previewScale, 1 / previewScale);
        return clippingPath;
    }
    _getScaledContext(transform, center, previewScale) {
        const ctx = this._activeCanvas.getContext("2d");
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.save();
        this._viewportHandler.applyViewportTransformTo2dContext(ctx, this._activeCanvas);
        const scale = this._scale;
        ctx.scale(scale, scale);
        ctx.translate(this._offset.x, this._offset.y);
        const matrix = transform.toMatrix();
        ctx.translate(center.x, center.y);
        ctx.transform(matrix.m00, matrix.m10, matrix.m01, matrix.m11, matrix.m02, matrix.m12);
        ctx.translate(-center.x, -center.y);
        ctx.scale(previewScale, previewScale);
        return ctx;
    }
}
//# sourceMappingURL=Ctx2dTextRenderer.js.map