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

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

import { Collection } from "@aurigma/design-atoms-model/Collection";
import { Container } from "@aurigma/design-atoms-model/Product/Container";
import { GridItem } from "@aurigma/design-atoms-model/Product/Items/GridItem";
import { EventObject } from "@aurigma/design-atoms-model/EventObject";
import { getUnitScale } from "./Interfaces";
export class GridHandler {
    constructor(colorParser) {
        this._visible = false;
        this._changedEvent = new EventObject();
        this._onBleedChange = (sender, propertyName) => {
            switch (propertyName) {
                case "bleed":
                case "slug":
                    this._reCreateItem();
                    break;
            }
        };
        this._onSurfacePropertyChanged = (sender, propertyName) => {
            switch (propertyName) {
                case "width":
                case "height":
                    this._updateGrid();
                    break;
            }
        };
        this._colorParser = colorParser;
    }
    get surface() {
        return this._surface;
    }
    set surface(value) {
        if (this._surface === value)
            return;
        if (this._surface != null) {
            this.surface.removePropertyChanged(this._onSurfacePropertyChanged);
            this.removeBleedListener();
        }
        this._surface = value;
        if (this._surface != null) {
            this.surface.addPropertyChanged(this._onSurfacePropertyChanged);
            this.addBleedListener();
        }
        this._updateGrid();
    }
    setConfig(config, rulersConfig) {
        this._config = config;
        this._rulersConfig = rulersConfig;
        if (!this.gridContainer)
            return;
        this._reCreateItem();
    }
    removeBleedListener() {
        this.surface.printAreas.forEach((pa) => pa.removePropertyChanged(this._onBleedChange));
    }
    addBleedListener() {
        this.surface.printAreas.forEach((pa) => pa.addPropertyChanged(this._onBleedChange));
    }
    get gridContainers() {
        const result = new Collection();
        if (this._gridContainer != null)
            result.add(this._gridContainer);
        return result;
    }
    get gridContainer() {
        return this._gridContainer;
    }
    get visible() {
        return this._visible;
    }
    set visible(value) {
        if (this._visible === value)
            return;
        this._visible = value;
        this._updateGrid();
    }
    getGridParameters() {
        const grid = this._gridContainer.items.get(0);
        if (grid == null)
            return null;
        return {
            location: grid.location,
            cols: grid.cols,
            stepX: grid.stepX,
            rows: grid.rows,
            stepY: grid.stepY
        };
    }
    addChanged(listener) {
        this._changedEvent.add(listener);
    }
    removeChanged(listener) {
        this._changedEvent.remove(listener);
    }
    _updateGrid() {
        if (this._gridContainer == null || this._width != this.surface.width || this._height != this.surface.height)
            this._gridContainer = this._createGrid();
        if (this._gridContainer != null && this._gridContainer.visible !== this._visible) {
            this._gridContainer.visible = this._visible;
            this._changedEvent.fire();
        }
    }
    _createGrid() {
        if (this.surface == null)
            return null;
        this._width = this.surface.width;
        this._height = this.surface.height;
        if (this.surface.width === 0 || this.surface.height === 0)
            return null;
        if (this._config == null)
            return null;
        const container = new Container();
        container.locked = true;
        container.visible = false;
        container.name = "Grid";
        this._createGridItem(container);
        return container;
    }
    _getSteps() {
        const scale = getUnitScale(this._rulersConfig);
        const stepX = this._config.stepX / scale;
        const stepY = this._config.stepY / scale;
        return [stepX, stepY];
    }
    _createGridItem(container) {
        const mainPrintArea = this._getMainPrintArea();
        const bleed = mainPrintArea.bleed;
        const slug = mainPrintArea.slug;
        const left = (bleed.left || 0) + (slug.left || 0);
        const right = (bleed.right || 0) + (slug.right || 0);
        const top = (bleed.top || 0) + (slug.top || 0);
        const bottom = (bleed.bottom || 0) + (slug.bottom || 0);
        const [stepX, stepY] = this._getSteps();
        if (stepX > 0 && stepY > 0) {
            const colsNumber = Math.round((this._width + left + right + stepX) / stepX) + 1;
            const rowsNumber = Math.round((this._height + top + bottom + stepY) / stepY) + 1;
            const offsetX = left > stepX ? stepX - (left % stepX) : stepX - left;
            const offsetY = top > stepY ? stepY - (top % stepY) : stepY - top;
            if (colsNumber > 0 && colsNumber !== Number.POSITIVE_INFINITY && rowsNumber > 0 && rowsNumber !== Number.POSITIVE_INFINITY) {
                const gridItem = new GridItem(-1 * (left + offsetX), -1 * (top + offsetY), colsNumber, rowsNumber, stepX, stepY);
                gridItem.horizontalLineColor = this._colorParser.parse(this._config.horizontalColor);
                gridItem.verticalLineColor = this._colorParser.parse(this._config.verticalColor);
                gridItem.lineWidth = this._config.lineWidthPx;
                gridItem.fixedLineWidth = true;
                container.items.add(gridItem);
            }
        }
    }
    _getMainPrintArea() {
        let main = this.surface.printAreas.get(0);
        this.surface.printAreas.toArray().forEach((pa) => {
            const { top, left } = pa.bounds;
            const mainBounds = main.bounds;
            if (left < mainBounds.left && top < mainBounds.top) {
                main = pa;
            }
        });
        return main;
    }
    _reCreateItem() {
        this.gridContainer.items.clear();
        this._createGridItem(this.gridContainer);
        this._changedEvent.fire();
    }
}
//# sourceMappingURL=GridHandler.js.map