@aurigma/design-atoms/Services/ProductPreview/ProductPreviewRenderer.js

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

import { Collection, Environment } from "@aurigma/design-atoms-model";
import { PreviewCanvas } from "./PreviewCanvas";
import { PlaceholderEditingViewMode } from "../../Viewer";
import { CanvasRenderer } from "../../CanvasRenderer";
export class ProductPreviewRenderer {
    constructor(product, previewContainersSourceFactory, designAtomsApiClient, colorPreviewService, service, viewerConfigurationContext, colorParser) {
        this._zoom = 1;
        this._updateSurfaces = () => {
            this._canvases.clear();
            const surfaces = this._product.surfaces.select(this._createSurfaceCanvas);
            this._canvases.addRange(surfaces);
        };
        this._createSurfaceCanvas = (surface) => {
            return new PreviewCanvas(surface, this._previewContainersSourceFactory, this._zoom, this._mul, this._renderer, this._designAtomsApiClient, this._colorPreviewService, this._service, this._viewerConfigurationContext, null //this._colorParser
            );
        };
        this._product = product;
        this._previewContainersSourceFactory = previewContainersSourceFactory;
        this._canvases = new Collection();
        this._designAtomsApiClient = designAtomsApiClient;
        this._colorPreviewService = colorPreviewService;
        this._service = service;
        this._viewerConfigurationContext = viewerConfigurationContext;
        this._colorParser = colorParser;
        this._renderer = new CanvasRenderer(null, null, { placeholderEditingViewMode: PlaceholderEditingViewMode.Normal }, null, {
            applyViewportTransformTo2dContext: () => void 0,
            applyViewportTransformToTwMatrix: () => void 0
        }, null, null, null, {
            viewportMemoryCanvas: document.createElement("canvas"),
            viewportTextureCanvas: document.createElement("canvas")
        }, null);
        this._stubInactiveCanvas = document.createElement("canvas");
        this._updateSurfaces();
    }
    get _margins() {
        return {
            leftMargin: 0,
            topMargin: 0,
            rightMargin: 0,
            bottomMargin: 0,
            marginColor: "",
            marginWidth: 0
        };
    }
    get _mul() {
        return this._zoom * 96 / 72;
    }
    render(canvas, surfaceIndex, containersFilter, previewSize, previewOffset) {
        const previewCanvas = this._canvases.get(surfaceIndex);
        const size = this._getPreviewSize(previewCanvas, previewSize);
        const offset = this._getPreviewOffset(previewOffset);
        canvas.width = size.width;
        canvas.height = size.height;
        this._renderer.redrawInactiveCanvas(this._getLayersToDraw(previewCanvas, containersFilter), canvas, this._stubInactiveCanvas, previewCanvas.workspace, this._margins, previewCanvas.mul, {
            isMasked: () => false
        }, previewCanvas.offset.clone().translate(offset.x, offset.y), false);
    }
    async waitUpdateAndExecute(surfaceIndex, callback) {
        await this._canvases.get(surfaceIndex).waitUpdateAndExecute(callback);
    }
    dispose() {
        for (const canvas of this._canvases) {
            canvas.dispose();
        }
    }
    _getLayersToDraw(canvas, containersFilter) {
        if (containersFilter == null) {
            return canvas.layers.toArray();
        }
        return canvas.layers
            .toArray()
            .filter(layer => containersFilter(layer.container));
    }
    _getPreviewSize(canvas, previewSize) {
        const sizeRatio = canvas.zoom * Environment.screenDpi / 72;
        return previewSize != null
            ? {
                width: previewSize.width * sizeRatio,
                height: previewSize.height * sizeRatio
            }
            : {
                width: canvas.width,
                height: canvas.height
            };
    }
    _getPreviewOffset(previewOffset) {
        return previewOffset !== null && previewOffset !== void 0 ? previewOffset : { x: 0, y: 0 };
    }
}
//# sourceMappingURL=ProductPreviewRenderer.js.map