@aurigma/design-atoms-model/Product/Items/ClipartItem.js

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

import { GroupItem } from "./GroupItem";
import { Color } from "../../Colors";
import { ShapeItem } from "./ShapeItem";
export class ClipartItem extends GroupItem {
    constructor(items, colorGroups = null) {
        super(items);
        this.type = ClipartItem.type;
        this._colorGroups = [];
        this._onItemAdded = (data) => {
            const newColorGroups = ClipartItem._generateColorGroups([data.item]);
            newColorGroups.forEach(newColorGroup => {
                newColorGroup.targets = newColorGroup.targets.filter(newTarget => !this.colorGroups.some(({ targets }) => targets.some(({ itemId, prop }) => itemId === newTarget.itemId && prop === newTarget.prop)));
                if (newColorGroup.targets.length < 1)
                    return;
                const existingColorGroup = this.colorGroups.find(({ color }) => color.equals(newColorGroup.color));
                if (existingColorGroup != null)
                    existingColorGroup.targets.push(...newColorGroup.targets);
                else {
                    if (this.themeBinding.clipartColors == null)
                        this.themeBinding.clipartColors = new Array(this.colorGroups.length).fill(null);
                    this.colorGroups.push(newColorGroup);
                    this.themeBinding.clipartColors.push(null);
                }
            });
        };
        this._onItemRemoved = (data) => {
            const { id } = data.item;
            this.colorGroups.forEach(colorGroup => {
                if (!colorGroup.targets.some(({ itemId }) => itemId === id))
                    return;
                colorGroup.targets = colorGroup.targets.filter(({ itemId }) => itemId !== id);
            });
            if (this.colorGroups.some(colorGroup => colorGroup.targets.length === 0)) {
                const emptyColorGroupsIndexes = this.colorGroups
                    .filter(colorGroup => colorGroup.targets.length === 0)
                    .map(emptyColorGroup => this.colorGroups.indexOf(emptyColorGroup));
                emptyColorGroupsIndexes.forEach(emptyColorGroupIndex => {
                    this.colorGroups.splice(emptyColorGroupIndex, 1);
                    if (this.themeBinding.clipartColors != null)
                        this.themeBinding.clipartColors.splice(emptyColorGroupIndex, 1);
                });
            }
        };
        this._ignorePermissionsChange = true;
        this.groupItemPermissions.allowSelectNestedItems = false;
        this.groupItemPermissions.allowUngroup = false;
        this._ignorePermissionsChange = false;
        this.colorGroups = colorGroups != null
            ? colorGroups
            : ClipartItem._generateColorGroups(this.items.toArray());
        this.items.add_itemAdded(this._onItemAdded);
        this.items.add_itemRemoved(this._onItemRemoved);
    }
    getSimplifiedObject(omitProperties = []) {
        const simplified = super.getSimplifiedObject(omitProperties);
        return simplified;
    }
    clone(generateNewIds = false, appropriateParentContainer = false) {
        const item = new ClipartItem();
        this._copy(this, item, generateNewIds, appropriateParentContainer);
        return item;
    }
    applyPermissionsConstrain() {
        super.applyPermissionsConstrain();
        if (this.groupItemPermissions == null)
            return;
        this.groupItemPermissions.allowSelectNestedItemsContraint = false;
        this.groupItemPermissions.allowUngroupContraint = false;
    }
    get colorGroups() {
        return this._colorGroups;
    }
    set colorGroups(value) {
        this._colorGroups = value;
    }
    setColor(colorGroup, targetColor) {
        if (!this.colorGroups.includes(colorGroup))
            throw Error("Unexpected colorgroup");
        const newColor = (targetColor instanceof Color ? targetColor : targetColor.color);
        if (colorGroup.color.equals(newColor))
            return;
        if (!(targetColor instanceof Color)) {
            if (this.themeBinding.clipartColors == null)
                this.themeBinding.clipartColors = new Array(this.colorGroups.length).fill(null);
            this.themeBinding.clipartColors[this.colorGroups.indexOf(colorGroup)] = targetColor.title;
        }
        colorGroup.targets.forEach(({ prop, itemId }) => {
            const targetItem = this.items.first(({ id }) => id === itemId);
            if (targetItem instanceof ShapeItem)
                this._setShapeItemColor(prop, targetItem, newColor.clone());
            else
                throw new Error("Unexpected item in colorgroup");
        });
        colorGroup.color = newColor.clone();
        this._propertyChanged.notify(this, "colorGroups");
    }
    _copy(source, destination, generateNewIds, appropriateParentContainer) {
        super._copy(source, destination, generateNewIds, appropriateParentContainer);
        const colorGroups = source.colorGroups.map(colorGroup => colorGroup.clone());
        if (generateNewIds) {
            const newItemIds = destination.items.toArray().map(item => item.id);
            const oldItemIds = source.items.toArray().map(item => item.id);
            const allTargets = colorGroups.reduce((allTargets, colorGroup) => ([...allTargets, ...colorGroup.targets]), []);
            newItemIds.forEach((newItemId, i) => allTargets.filter(({ itemId }) => itemId === oldItemIds[i]).forEach(target => target.itemId = newItemId));
        }
        destination.colorGroups = colorGroups;
    }
    static _generateColorGroups(items) {
        const shapeItems = items.filter(item => item instanceof ShapeItem);
        const colorGroups = shapeItems.reduce((colorGroups, shapeItem) => {
            let fillColorGroup = colorGroups.find(({ color }) => color.equals(shapeItem.fillColor));
            if (fillColorGroup == null) {
                fillColorGroup = new ColorGroup(shapeItem.fillColor);
                colorGroups.push(fillColorGroup);
            }
            fillColorGroup.targets.push({ itemId: shapeItem.id, prop: ItemColorProperty.FillColor });
            if (shapeItem.borderWidth > 0) {
                let borderColorGroup = colorGroups.find(({ color }) => color.equals(shapeItem.borderColor));
                if (borderColorGroup == null) {
                    borderColorGroup = new ColorGroup(shapeItem.borderColor);
                    colorGroups.push(borderColorGroup);
                }
                borderColorGroup.targets.push({ itemId: shapeItem.id, prop: ItemColorProperty.BorderColor });
            }
            return colorGroups;
        }, []);
        return colorGroups;
    }
    _setShapeItemColor(prop, item, color) {
        switch (prop) {
            case ItemColorProperty.BorderColor:
                item.borderColor = color;
                break;
            case ItemColorProperty.FillColor:
                item.fillColor = color;
                break;
            default:
                break;
        }
    }
}
ClipartItem.type = "ClipartItem";
;
export class ColorGroup {
    constructor(color, targets = []) {
        this.color = color;
        this.targets = targets;
    }
    clone() {
        return new ColorGroup(this.color.clone(), [...(this.targets.map(target => (Object.assign({}, target))))]);
    }
}
export class ColorGroupTarget {
}
export var ItemColorProperty;
(function (ItemColorProperty) {
    ItemColorProperty[ItemColorProperty["BorderColor"] = 0] = "BorderColor";
    ItemColorProperty[ItemColorProperty["FillColor"] = 1] = "FillColor";
})(ItemColorProperty || (ItemColorProperty = {}));
//# sourceMappingURL=ClipartItem.js.map