@aurigma/design-atoms/Serialization/ProductParser.js

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

import { Product } from "@aurigma/design-atoms-model/Product/Product";
import { Surface } from "@aurigma/design-atoms-model/Product/Surface";
import { SurfaceMockup } from "@aurigma/design-atoms-model/Product/SurfaceMockup";
import { MockupContainer, Container, SurfaceContainer, SpotColorContainer, TextureContainer, ColorLessContainer, FullColorContainer, LimitedColorContainer } from "@aurigma/design-atoms-model/Product/Container";
import { ColorContainerVisualization, TextureContainerVisualization } from "@aurigma/design-atoms-model/Product/ContainerVisualization";
import { SizeF, RectangleF, PointF, Path, RotatedRectangleF } from "@aurigma/design-atoms-model/Math";
import { SafetyLine } from "@aurigma/design-atoms-model/Product/SafetyLine";
import { CropMark, CropMarkText } from "@aurigma/design-atoms-model/Product/CropMark";
import { PrintArea } from "@aurigma/design-atoms-model/Product/PrintArea";
import { ItemMask } from "@aurigma/design-atoms-model/Product/ItemMask";
import { RectangleItem, EllipseItem, ShapeItem, BaseTextItem, PlainTextItem, ImageItem, BoundedTextItem, CurvedTextItem, PathBoundedTextItem, BarcodeItem, PlaceholderItem, LineItem, DashedLineItem, AutoScaledTextItem, ThemeBinding, SmartItem, InStringPlaceholder, ImageMetaData, OverlayEffect, GroupItem, ArchedTextItem, EncodingOptions, LayoutItem } from "@aurigma/design-atoms-model/Product/Items";
import { NotImplementedException, Exception } from "@aurigma/design-atoms-model/Exception";
import { Transform } from "@aurigma/design-atoms-model/Math/Transform";
import { ManipulationPermissions, ContentPermissions, BarcodePermissions, TextPermissions, ImagePermissions, ItemPermissions, ItemToolbarPermissions, FrontendPermissions, ResizeGripsPermissions, ShapePermissions, PathBoundedTextPermissions, PlaceholderPermissions, VisualizationPermissions, LinePermissions } from "@aurigma/design-atoms-model/Product/Items";
import { ParagraphSettings } from "@aurigma/design-atoms-model/Product/Items/ParagraphSettings";
import { StrokeSettings, LineJoin } from "@aurigma/design-atoms-model/Product/Items/StrokeSettings";
import { ShadowSettings } from "@aurigma/design-atoms-model/Product/Items/ShadowSettings";
import { MODELVERSION } from "@aurigma/design-atoms-model/Version";
import { Collection } from "@aurigma/design-atoms-model/Collection";
import { WatermarkConfig, WatermarkTextConfig, WatermarkImageConfig, WatermarkVisibilityConfig } from "@aurigma/design-atoms-model/Configuration/WatermarkConfig";
import { InteractiveZone, Watermark } from "@aurigma/design-atoms-model/Product";
import { GroupItemPermissions } from "@aurigma/design-atoms-model/Product/Items/GroupItemPermissions";
import { ClipartItem, ColorGroup } from "@aurigma/design-atoms-model/Product/Items/ClipartItem";
import { Margin } from "@aurigma/design-atoms-model/Math/Margin";
import { DefaultLayoutSettings, AutoLayoutSettings } from "@aurigma/design-atoms-model/Product/Items/LayoutItem";
import { ViolationSettings } from "@aurigma/design-atoms-model/Product/Items/ViolationSettings";
import { ShapeViolationSettings } from "@aurigma/design-atoms-model/Product/Items/ShapeViolationSettings";
import { ImageViolationSettings } from "@aurigma/design-atoms-model/Product/Items/ImageViolationSettings";
import { TextViolationSettings } from "@aurigma/design-atoms-model/Product/Items/TextViolationSettings";
import { Palette } from "@aurigma/design-atoms-model/Colors/Palette";
import { Swatch } from "@aurigma/design-atoms-model/Colors/Swatch";
import { JsonColorParser } from "./JsonColorParser";
import { Version } from "./Version";
import { isObject, isString } from "@aurigma/design-atoms-model/Utils/Utils";
import { NDEffectType, NDEffects, RecolorEffectParameters } from "@aurigma/design-atoms-model/Product/Effects";
import { PrintingTechniqueConstraints } from "@aurigma/design-atoms-model/Product/Constraints/PrintingTechniqueConstraints";
import { ContainerConstraints } from "@aurigma/design-atoms-model/Product/Constraints/ContainerConstraints";
import { MaxArtworkSizeConstraints } from "@aurigma/design-atoms-model/Product/Constraints/MaxArtworkSizeConstraints";
const modelVersion = Version.fromString(MODELVERSION);
export class ProductParser {
    constructor(additionalConverters) {
        this.parsePalette = (rawPalette) => {
            var palette = new Palette();
            this.parseCollection(rawPalette, this.parseSwatch, palette);
            return palette;
        };
        this.parseSwatch = (rawSwatch) => {
            var swatch = new Swatch();
            this._parseModelComponent(rawSwatch, swatch, [
                new PropertyConverter("color", this.parseColor),
            ]);
            return swatch;
        };
        this.parseSurface = (rawSurface) => {
            var surface = new Surface();
            this._parseModelComponent(rawSurface, surface, [
                new PropertyConverter("mockup", this.parseMockup.bind(this)),
                new PropertyConverter("printAreas", rawContainers => this.parseCollection(rawContainers, this.parsePrintArea, surface.printAreas), true),
                new PropertyConverter("containers", rawContainers => this.parseCollection(rawContainers, this.parseSurfaceContainer, surface.containers), true),
                new PropertyConverter("previewMockups", rawContainers => this.parseCollection(rawContainers, this.parseMockup.bind(this), surface.previewMockups), true),
                new PropertyConverter("interactiveZones", rawContainers => this.parseCollection(rawContainers, this.parseInteractiveZone.bind(this), surface.interactiveZones), true),
                new PropertyConverter("watermark", this.parseWatermark.bind(this)),
            ]);
            return surface;
        };
        this.parseMockupContainer = (rawContainer) => {
            var container = new MockupContainer();
            this.parseContainer(rawContainer, container);
            return container;
        };
        this.parseInteractiveZone = (rawActivityZone) => {
            const activityZone = new InteractiveZone();
            const converters = [
                new PropertyConverter("path", this.parsePath.bind(this)),
            ];
            delete rawActivityZone["version"];
            this._parseObject(rawActivityZone, activityZone, converters);
            return activityZone;
        };
        this.parseSurfaceContainer = (rawContainer) => {
            const printingTechniqueConstraintsConverter = new PropertyConverter("printingTechniqueConstraints", this._parsePrintingTechniqueConstraints);
            const containerConstraintsConverter = new PropertyConverter("constraints", this._parseContainerConstraints);
            const type = rawContainer["type"];
            delete rawContainer["type"];
            delete rawContainer["renderingType"];
            switch (type) {
                case SpotColorContainer.type: {
                    const converters = [
                        printingTechniqueConstraintsConverter,
                        containerConstraintsConverter,
                        (new PropertyConverter("outputColor", this.parseColor.bind(this))),
                        (new PropertyConverter("previewColor", this.parseRgbColor.bind(this))),
                        // property renderingType is get-only property and cannot be set
                        (new PropertyConverter("renderingType", () => { }, true))
                    ];
                    const container = new SpotColorContainer();
                    this.parseContainer(rawContainer, container, converters);
                    delete rawContainer["previewColor"];
                    delete rawContainer["outputColor"];
                    delete rawContainer["version"];
                    delete rawContainer["items"];
                    delete rawContainer["region"];
                    delete rawContainer["printingTechniqueConstraints"];
                    delete rawContainer["constraints"];
                    Object.assign(container, rawContainer);
                    return container;
                }
                case TextureContainer.type: {
                    const container = new TextureContainer();
                    const converters = [
                        printingTechniqueConstraintsConverter,
                        containerConstraintsConverter,
                        new PropertyConverter("outputColor", this.parseColor.bind(this)),
                        // property renderingType is get-only property and cannot be set
                        new PropertyConverter("renderingType", () => { }, true)
                    ];
                    this.parseContainer(rawContainer, container, converters);
                    container.previewTextureSource = this.parseImageSource(rawContainer["previewTextureSource"]);
                    delete rawContainer["previewTextureSource"];
                    delete rawContainer["outputColor"];
                    delete rawContainer["version"];
                    delete rawContainer["items"];
                    delete rawContainer["region"];
                    delete rawContainer["printingTechniqueConstraints"];
                    delete rawContainer["constraints"];
                    Object.assign(container, rawContainer);
                    return container;
                }
                case FullColorContainer.type: {
                    const container = new FullColorContainer();
                    container.colorSpace = rawContainer["colorSpace"];
                    container.colorProfile = rawContainer["colorProfile"];
                    this.parseContainer(rawContainer, container, [printingTechniqueConstraintsConverter, containerConstraintsConverter]);
                    return container;
                }
                case ColorLessContainer.type: {
                    const container = new ColorLessContainer();
                    container.opaque = rawContainer["opaque"];
                    container.dpi = rawContainer["dpi"];
                    container.format = rawContainer["format"];
                    container.dither = rawContainer["dither"];
                    container.amount = rawContainer["amount"];
                    this.parseContainer(rawContainer, container, [
                        new PropertyConverter("outputColor", this.parseColor.bind(this)),
                        printingTechniqueConstraintsConverter,
                        containerConstraintsConverter,
                        new PropertyConverter("visualization", this._parseVisualization)
                    ]);
                    return container;
                }
                case LimitedColorContainer.type: {
                    const container = new LimitedColorContainer();
                    container.maxColorNumber = rawContainer["maxColorNumber"];
                    container.paletteUId = rawContainer["paletteUId"];
                    this.parseContainer(rawContainer, container, [printingTechniqueConstraintsConverter, containerConstraintsConverter]);
                    return container;
                }
                default: {
                    const container = new SurfaceContainer();
                    this.parseContainer(rawContainer, container, [printingTechniqueConstraintsConverter, containerConstraintsConverter]);
                    return container;
                }
            }
        };
        this._parseVisualization = (rawObject) => {
            if (rawObject["type"] === TextureContainerVisualization.type) {
                return this._parseTextureContainerVisualization(rawObject);
            }
            else if (rawObject["type"] === ColorContainerVisualization.type) {
                return this._parseColorContainerVisualization(rawObject);
            }
        };
        this._parseTextureContainerVisualization = (rawObject) => {
            const textureVisualization = new TextureContainerVisualization();
            textureVisualization.textureName = rawObject["textureName"];
            textureVisualization.opacity = rawObject["opacity"];
            textureVisualization.enableGlareEffect = rawObject["enableGlareEffect"];
            textureVisualization.textureSource = this.parseImageSource(rawObject["textureSource"]);
            return textureVisualization;
        };
        this._parseColorContainerVisualization = (rawObject) => {
            const colorVisualization = new ColorContainerVisualization();
            colorVisualization.color = this.parseColor(rawObject["color"]);
            colorVisualization.opacity = rawObject["opacity"];
            colorVisualization.enableGlareEffect = rawObject["enableGlareEffect"];
            return colorVisualization;
        };
        this._parsePrintingTechniqueConstraints = (rawObject) => {
            const constraints = new PrintingTechniqueConstraints();
            constraints.allowRasterElements = rawObject["allowRasterElements"];
            constraints.minWidth = rawObject["minWidth"];
            constraints.minFontSize = rawObject["minFontSize"];
            constraints.targetDpi = rawObject["targetDpi"];
            return constraints;
        };
        this._parseContainerConstraints = (rawObject) => {
            if (rawObject == null)
                return null;
            const constraints = new ContainerConstraints();
            const rawMaxArtworkSize = rawObject["maxArtworkSize"];
            if (rawMaxArtworkSize != null) {
                const maxArtworkSize = new MaxArtworkSizeConstraints();
                maxArtworkSize.width = rawMaxArtworkSize["width"];
                maxArtworkSize.height = rawMaxArtworkSize["height"];
                maxArtworkSize.shapeType = rawMaxArtworkSize["shapeType"];
                constraints.maxArtworkSize = maxArtworkSize;
            }
            return constraints;
        };
        this.parseContainer = (rawContainer, emptyContainer = new Container(), converters = []) => {
            this._parseModelComponent(rawContainer, emptyContainer, [
                new PropertyConverter("region", this.parseRectangleF.bind(this)),
                new PropertyConverter("size", this.parseSizeF.bind(this)),
                new PropertyConverter("items", rawItems => this.parseCollection(rawItems, this.parseItem, emptyContainer.items), true),
                // property renderingType is get-only property and cannot be set
                new PropertyConverter("renderingType", () => { }, true),
                ...converters
            ]);
            return emptyContainer;
        };
        this.parseSafetyLine = (rawSafetyLine) => {
            const safetyLine = new SafetyLine();
            const converters = [
                new PropertyConverter("color", this.parseColor.bind(this)),
                new PropertyConverter("altColor", this.parseColor.bind(this)),
                new PropertyConverter("margin", this._parseMargin)
            ];
            this._parseObject(rawSafetyLine, safetyLine, converters);
            return safetyLine;
        };
        this.parseCropMark = (rawCropMark) => {
            const cropMark = new CropMark();
            const converters = [
                new PropertyConverter("color", this.parseColor.bind(this)),
                new PropertyConverter("leftNotes", this._setConvertedArray.bind(this, this.parseCropMarkText, (obj) => { cropMark.leftNotes = obj; }), true),
                new PropertyConverter("rightNotes", this._setConvertedArray.bind(this, this.parseCropMarkText, (obj) => { cropMark.rightNotes = obj; }), true),
                new PropertyConverter("topNotes", this._setConvertedArray.bind(this, this.parseCropMarkText, (obj) => { cropMark.topNotes = obj; }), true),
                new PropertyConverter("bottomNotes", this._setConvertedArray.bind(this, this.parseCropMarkText, (obj) => { cropMark.bottomNotes = obj; }), true),
            ];
            this._parseObject(rawCropMark, cropMark, converters);
            return cropMark;
        };
        this.parseCropMarkText = (rawCropMarkText) => {
            const cropMarkText = new CropMarkText();
            this._parseObject(rawCropMarkText, cropMarkText, []);
            return cropMarkText;
        };
        this.parsePrintArea = (rawPrintArea) => {
            var printArea = new PrintArea();
            this._parseModelComponent(rawPrintArea, printArea, [
                new PropertyConverter("bounds", this.parseRectangleF.bind(this)),
                new PropertyConverter("shape", this.parsePath.bind(this)),
                new PropertyConverter("safetyLines", rawLines => this.parseCollection(rawLines, this.parseSafetyLine, printArea.safetyLines), true),
                new PropertyConverter("cropMarks", (rawMarks) => new Collection(rawMarks.map(this.parseCropMark))),
                new PropertyConverter("slug", this._parseMargin),
                new PropertyConverter("bleed", this._parseMargin),
                //TODO next release
                //new PropertyConverter("bgContainer", this.parsePrintAreaContainer),
                //new PropertyConverter("fgContainer", this.parsePrintAreaContainer),
            ]);
            return printArea;
        };
        this._parseMargin = (rawMargin) => {
            if (rawMargin == null)
                return new Margin(0);
            return new Margin({
                left: rawMargin["left"], top: rawMargin["top"], right: rawMargin["right"], bottom: rawMargin["bottom"]
            });
        };
        this.parseItem = (rawItem) => {
            if (rawItem == null)
                return null;
            var type = rawItem["$type"];
            delete rawItem["$type"];
            var converters = [
                new PropertyConverter("pathBoundedTextPermissions", this.parsePathBoundedTextPermissions.bind(this)),
                new PropertyConverter("manipulationPermissions", this.parseManipulationPermissions.bind(this)),
                new PropertyConverter("frontendPermissions", this.parseFrontendPermissions.bind(this)),
                new PropertyConverter("visualizationPermissions", this.parseVisualizationPermissions.bind(this)),
                new PropertyConverter("violationSettings", this.parseViolationSettings),
                new PropertyConverter("itemPermissions", this.parseItemPermissions.bind(this)),
                new PropertyConverter("transform", this.parseTransform.bind(this)),
                new PropertyConverter("color", this.parseColor.bind(this)),
                new PropertyConverter("themeBinding", this.parseThemeBinding.bind(this)),
                new PropertyConverter("mask", this.parseMask.bind(this))
            ];
            var item = null;
            const textConverters = converters.concat([
                new PropertyConverter("textPermissions", this.parseTextPermissions.bind(this)),
                new PropertyConverter("font", this.parseFontSettings.bind(this), true),
                new PropertyConverter("stroke", this.parseStrokeSettings.bind(this)),
                new PropertyConverter("shadow", this.parseShadowSettings.bind(this))
            ]);
            if (type == null)
                throw new Exception("Serialized data seems to be corrupted.");
            switch (type) {
                case SmartItem.type:
                    item = this.parseSmartItem(rawItem);
                    break;
                case RectangleItem.type:
                    item = this.parseRectangleItem(rawItem, converters);
                    break;
                case ShapeItem.type:
                    item = this.parseShapeItem(rawItem, converters);
                    break;
                case LineItem.type:
                    item = this.parseLineItem(rawItem, converters);
                    break;
                case DashedLineItem.type:
                    item = this.parseDashedLineItem(rawItem, converters);
                    break;
                case EllipseItem.type:
                    item = this.parseEllipseItem(rawItem, converters);
                    break;
                case ImageItem.type:
                    item = this.parseImageItem(rawItem, converters);
                    break;
                case BarcodeItem.type:
                    item = this.parseBarcodeItem(rawItem, converters);
                    break;
                case PlainTextItem.type:
                    item = this.parsePlainTextItem(rawItem, textConverters);
                    break;
                case BoundedTextItem.type:
                    item = this.parseBoundedTextItem(rawItem, textConverters);
                    break;
                case PathBoundedTextItem.type:
                    item = this.parsePathBoundedTextItem(rawItem, textConverters);
                    break;
                case CurvedTextItem.type:
                    item = this.parseCurvedTextItem(rawItem, textConverters);
                    break;
                case AutoScaledTextItem.type:
                    item = this.parseAutoScaledTextItem(rawItem, textConverters);
                    break;
                case ArchedTextItem.type:
                    item = this.parseArchedTextItem(rawItem, textConverters);
                    break;
                case PlaceholderItem.type:
                    item = this.parsePlaceholderItem(rawItem, converters);
                    break;
                case GroupItem.type:
                    item = this.parseGroupItem(rawItem, converters);
                    break;
                case ClipartItem.type:
                    item = this.parseClipartItem(rawItem, converters);
                    break;
                case LayoutItem.type:
                    item = this.parseLayoutItem(rawItem, converters);
                    break;
                default:
                    throw new NotImplementedException("Deserializing of item with type - " + type + " is not implemented");
            }
            return item;
        };
        this.parseNDEffects = (rawNDEffects) => {
            const ndEffects = new NDEffects();
            Object.keys(rawNDEffects).forEach((key) => {
                switch (key) {
                    case NDEffectType.None: {
                        ndEffects[key] = {};
                        break;
                    }
                    case NDEffectType.Recolor: {
                        const recolorEffectParameters = new RecolorEffectParameters();
                        const rawRecolorEffectsParams = rawNDEffects[key];
                        recolorEffectParameters.reducedColorImageSource = this.parseImageSource(rawRecolorEffectsParams.reducedColorImageSource);
                        recolorEffectParameters.defaultColorReplacements = this.parseColorEntries(rawRecolorEffectsParams.defaultColorReplacements);
                        recolorEffectParameters.currentColorReplacements = this.parseColorEntries(rawRecolorEffectsParams.currentColorReplacements);
                        ndEffects[key] = recolorEffectParameters;
                        break;
                    }
                    default: {
                        console.warn("Unknown NDEffectType!");
                    }
                }
            });
            return ndEffects;
        };
        this.parseEncodingOptions = (raw) => {
            const result = new EncodingOptions();
            this._parseModelComponent(raw, result, []);
            return result;
        };
        this.parseLineItem = (rawLine, baseConverters) => {
            var line = new LineItem();
            var converters = [
                ...baseConverters,
                ...this._getLineConverters()
            ];
            this._parseModelComponent(rawLine, line, converters);
            return line;
        };
        this.parseRotatedRectangle = (rawRectangle) => {
            return new RotatedRectangleF(rawRectangle["centerX"], rawRectangle["centerY"], rawRectangle["width"], rawRectangle["height"], rawRectangle["angle"]);
        };
        this.parseViolationSettings = (rawPerms) => {
            delete rawPerms["version"];
            switch (rawPerms["type"]) {
                case ViolationSettings.type:
                    return Object.assign(new ViolationSettings(), rawPerms);
                case ShapeViolationSettings.type:
                    return Object.assign(new ShapeViolationSettings(), rawPerms);
                case ImageViolationSettings.type:
                    return Object.assign(new ImageViolationSettings(), rawPerms);
                case TextViolationSettings.type:
                    return Object.assign(new TextViolationSettings(), rawPerms);
                default:
                    throw new NotImplementedException(`Deserializing of item with type - ${rawPerms["type"]} is not implemented`);
            }
        };
        this.parsePlaceholderPermissions = (rawPerms) => {
            return Object.assign(new PlaceholderPermissions(), rawPerms);
        };
        this.parseLayoutSettings = (rawPerms) => {
            let layoutSettings;
            switch (rawPerms["type"]) {
                case AutoLayoutSettings.type:
                    layoutSettings = new AutoLayoutSettings();
                    break;
                default:
                    layoutSettings = new DefaultLayoutSettings();
                    break;
            }
            return Object.assign(layoutSettings, rawPerms);
        };
        this.parseGroupItemPermissions = (rawPerms) => {
            return Object.assign(new GroupItemPermissions(), rawPerms);
        };
        this.parseLinePermissions = (rawPerms) => {
            return Object.assign(new LinePermissions(), rawPerms);
        };
        this.parseBarcodePermissions = (rawPerms) => {
            return Object.assign(new BarcodePermissions(), rawPerms);
        };
        this._parseOverlayEffect = (value) => {
            if (value != null)
                return new OverlayEffect({
                    color: value["color"] != null ? this.parseColor(value["color"]) : null,
                    opacity: value["opacity"] != null ? value["opacity"] : null,
                    blendMode: value["blendMode"] != null ? value["blendMode"] : null
                });
        };
        this._parseImageItemValue = (value) => {
            return new ImageItem.ImageItemValue(value["name"], new ImageItem.ImageMetaData(value["value"]), this.parseRotatedRectangle(value["transformedRectangle"]));
        };
        this._parseTextItemValue = (value) => {
            return new BaseTextItem.BaseTextValue(value["name"], value["text"]);
        };
        this._parseObject = (rawObject, destObject, converters) => {
            for (var propertyName in rawObject) {
                if (!rawObject.hasOwnProperty(propertyName)) {
                    continue;
                }
                const converter = converters.find(c => c.property === propertyName);
                const rawValue = rawObject[propertyName];
                if (converter == null) {
                    if (isObject(rawValue)) {
                        var type = rawValue["$type"];
                        delete rawValue["$type"];
                        if (isString(type)) {
                            var typeConverter = this._additionalConverters.find(converterBound => (converterBound.type === type));
                            if (typeConverter != null) {
                                destObject[propertyName] = typeConverter.parseRawValue(rawValue);
                                continue;
                            }
                            else
                                console.warn(`Unknown type ${type}`);
                        }
                    }
                    destObject[propertyName] = rawValue;
                    continue;
                }
                if (converter.setByConverter) {
                    try {
                        converter.convert(rawValue, destObject);
                    }
                    catch (ex) {
                        console.error(`Error while parsing property ${propertyName} with converter `, converter, ex);
                        throw ex;
                    }
                }
                else {
                    if (propertyName === "manipulationPermissions" && destObject instanceof GroupItem) {
                        destObject["groupManipulationPermissions"] = converter.convert(rawValue);
                        continue;
                    }
                    destObject[propertyName] = converter.convert(rawValue);
                }
            }
        };
        this._additionalConverters = additionalConverters != null ? additionalConverters : [];
    }
    //#region public methods
    parseProduct(rawProduct) {
        var product = new Product();
        var productConverters = [
            new PropertyConverter("surfaces", rawSurfaces => this.parseCollection(rawSurfaces, this.parseSurface, product.surfaces), true),
            new PropertyConverter("watermarkConfig", this.parseWatermarkConfig.bind(this)),
            new PropertyConverter("defaultSafetyLines", rawLines => this.parseCollection(rawLines, this.parseSafetyLine, product.defaultSafetyLines), true),
            new PropertyConverter("defaultCropMarks", rawMarks => this.parseCollection(rawMarks, this.parseCropMark, product.defaultCropMarks), true),
            new PropertyConverter("defaultDesignLocation", this.parsePointF.bind(this)),
            new PropertyConverter("palette", rawPalette => this.parsePalette(rawPalette))
        ];
        this._parseModelComponent(rawProduct, product, productConverters);
        return product;
    }
    parseColor(rawColor) {
        return JsonColorParser.parse(rawColor);
    }
    parseRgbColor(rawColor) {
        return JsonColorParser.parseRgbColor(rawColor);
    }
    parseWatermarkConfig(rawConfig) {
        if (rawConfig == null)
            return null;
        const config = new WatermarkConfig();
        const parseFontSettings = new PropertyConverter("fontSettings", (rawFontSettings => {
            if (rawFontSettings == null)
                return null;
            const fontSettings = new BaseTextItem.FontSettings(null);
            this._parseObject(rawFontSettings, fontSettings, []);
            return fontSettings;
        }));
        const parseWatermarkTextConfig = new PropertyConverter("text", (rawText => {
            if (rawText == null)
                return null;
            const text = new WatermarkTextConfig();
            this._parseObject(rawText, text, [parseFontSettings]);
            return text;
        }));
        const parseWatermarkImageConfig = new PropertyConverter("image", (rawImage => {
            if (rawImage == null)
                return null;
            const image = new WatermarkImageConfig();
            this._parseObject(rawImage, image, []);
            return image;
        }));
        const parseWatermarkVisibilityConfig = new PropertyConverter("visibility", (rawVisibility => {
            if (rawVisibility == null)
                return null;
            const visibility = new WatermarkVisibilityConfig();
            this._parseObject(rawVisibility, visibility, []);
            return visibility;
        }));
        this._parseObject(rawConfig, config, [parseWatermarkTextConfig, parseWatermarkImageConfig, parseWatermarkVisibilityConfig]);
        return config;
    }
    parseWatermark(rawWatermark) {
        if (rawWatermark == null)
            return null;
        const watermark = new Watermark();
        this._parseObject(rawWatermark, watermark, []);
        return watermark;
    }
    parseMockup(rawMockup) {
        var mockup = new SurfaceMockup();
        this._parseModelComponent(rawMockup, mockup, [
            new PropertyConverter("underContainers", (rawContainers) => this.parseCollection(rawContainers, this.parseMockupContainer, mockup.underContainers), true),
            new PropertyConverter("overContainers", (rawContainers) => this.parseCollection(rawContainers, this.parseMockupContainer, mockup.overContainers), true)
        ]);
        return mockup;
    }
    parseCollection(rawCollection, parseCollectionItem, targetCollection) {
        if (rawCollection != null)
            targetCollection.setRange(rawCollection.map(rawColItem => parseCollectionItem(rawColItem)));
    }
    parseRectangleF(rawRectangle) {
        if (rawRectangle == null)
            return null;
        return new RectangleF(rawRectangle["left"], rawRectangle["top"], rawRectangle["width"], rawRectangle["height"]);
    }
    parsePointF(rawPoint) {
        if (rawPoint == null)
            return null;
        var pointF = new PointF();
        Object.assign(pointF, rawPoint);
        return pointF;
    }
    parseSizeF(rawSize) {
        if (rawSize == null)
            return null;
        //TODO: use server-side JsonConverter
        if (isString(rawSize)) {
            const values = rawSize.split(",");
            return new SizeF(parseFloat(values[0].trim()), parseFloat(values[1].trim()));
        }
        else
            return Object.assign(new SizeF(), rawSize);
    }
    parsePath(rawPath) {
        if (rawPath == null)
            return null;
        if (typeof rawPath === "string")
            return new Path(rawPath);
        return new Path(rawPath["path"]);
    }
    parsePaths(rawPaths) {
        if (rawPaths == null || !Array.isArray(rawPaths))
            return null;
        const paths = [];
        rawPaths.forEach(v => paths.push(this.parsePath(v)));
        return paths;
    }
    parseSmartItem(rawSmartItem) {
        const smartItem = new SmartItem();
        this._parseModelComponent(rawSmartItem, smartItem, []);
        return smartItem;
    }
    parsePlainTextItem(rawPlainText, baseConverters) {
        var plainTextItem = new PlainTextItem();
        var converters = baseConverters.concat(this._getShapeConverters(), this._getBaseTextItemConverters(plainTextItem), [new PropertyConverter("baselineLocation", this.parsePointF.bind(this))]);
        this._parseModelComponent(rawPlainText, plainTextItem, converters);
        return plainTextItem;
    }
    parseArchedTextItem(rawArchedText, baseConverters) {
        var archedTextItem = new ArchedTextItem();
        var converters = baseConverters.concat(this._getShapeConverters(), this._getBaseTextItemConverters(archedTextItem), [new PropertyConverter("center", this.parsePointF.bind(this))]);
        this._parseModelComponent(rawArchedText, archedTextItem, converters);
        return archedTextItem;
    }
    parseAutoScaledTextItem(rawAutoScaledText, baseConverters) {
        var autoScaledTextItem = new AutoScaledTextItem();
        var converters = baseConverters.concat(this._getShapeConverters(), this._getBaseTextItemConverters(autoScaledTextItem), [new PropertyConverter("textRectangle", this.parseRectangleF.bind(this))]);
        this._parseModelComponent(rawAutoScaledText, autoScaledTextItem, converters);
        return autoScaledTextItem;
    }
    parseBoundedTextItem(rawBoundedText, baseConverters) {
        var boundedTextItem = new BoundedTextItem();
        var converters = baseConverters.concat(this._getShapeConverters(), this._getBaseTextItemConverters(boundedTextItem), [
            new PropertyConverter("paragraphSettings", this.parseParagraphSettings.bind(this)),
            new PropertyConverter("textRectangle", this.parseRectangleF.bind(this)),
            new PropertyConverter("wrappingPath", this.parsePath.bind(this))
        ]);
        this._parseModelComponent(rawBoundedText, boundedTextItem, converters);
        return boundedTextItem;
    }
    parsePathBoundedTextItem(rawBoundedText, baseConverters) {
        const pathBoundedTextItem = new PathBoundedTextItem();
        const converters = baseConverters.concat(this._getShapeConverters(), this._getBaseTextItemConverters(pathBoundedTextItem), [
            new PropertyConverter("pathBoundedTextPermissions", this.parsePathBoundedTextPermissions.bind(this)),
            new PropertyConverter("boundingPaths", this.parsePaths.bind(this)),
            new PropertyConverter("paragraphSettings", this.parseParagraphSettings.bind(this)),
            new PropertyConverter("wrappingPath", this.parsePath.bind(this))
        ]);
        this._parseModelComponent(rawBoundedText, pathBoundedTextItem, converters);
        return pathBoundedTextItem;
    }
    parseCurvedTextItem(rawCurvedText, baseConverters) {
        var curvedTextItem = new CurvedTextItem();
        var converters = baseConverters.concat(this._getShapeConverters(), this._getBaseTextItemConverters(curvedTextItem), [new PropertyConverter("textPath", this.parsePath.bind(this))]);
        this._parseModelComponent(rawCurvedText, curvedTextItem, converters);
        return curvedTextItem;
    }
    _getBaseTextItemConverters(item) {
        return [
            new PropertyConverter("values", this._setConvertedArray.bind(this, this._parseTextItemValue, (obj) => { item.values = obj; }), true),
            new PropertyConverter("placeholders", rawPlaceholders => this.parseCollection(rawPlaceholders, this.parseInStringPlaceholder, item.placeholders), true),
            new PropertyConverter("colorPalette", rawPalette => this.parseCollection(rawPalette, this.parseColor, item.colorPalette), true)
        ];
    }
    parseImageItem(rawImage, baseConverters) {
        const image = new ImageItem();
        const converters = baseConverters.concat(this._getShapeConverters(), this._getImageConverters(image));
        this._parseModelComponent(rawImage, image, converters);
        return image;
    }
    parseColorEntries(rawColorEntries) {
        const colorMap = new Map();
        if (!rawColorEntries)
            return colorMap;
        rawColorEntries
            .forEach(entry => {
            const keyColor = this.parseColor(entry.keyColor);
            const valueColor = this.parseColor(entry.valueColor);
            colorMap.set(keyColor, valueColor);
        });
        return colorMap;
    }
    parseBarcodeItem(rawBarcode, baseConverters) {
        var barcode = new BarcodeItem();
        var converters = baseConverters.concat(this._getShapeConverters(), this._getImageConverters(barcode), [
            new PropertyConverter("barcodePermissions", this.parseBarcodePermissions.bind(this)),
            new PropertyConverter("color", this.parseColor.bind(this)),
            new PropertyConverter("barcodeOptions", this.parseEncodingOptions)
        ]);
        this._parseModelComponent(rawBarcode, barcode, converters);
        return barcode;
    }
    parsePlaceholderItem(rawPlaceholder, baseConverters) {
        const self = this;
        var placeholder = new PlaceholderItem();
        var converters = [
            ...baseConverters,
            ...this._getShapeConverters(),
            new PropertyConverter("placeholderPermissions", this.parsePlaceholderPermissions),
            new PropertyConverter("contentPermissions", this.parseContentPermissions.bind(this)),
            new PropertyConverter("content", this.parseItem),
            new PropertyConverter("topFrames", parseRawFrames),
            new PropertyConverter("bottomFrames", parseRawFrames),
            new PropertyConverter("stubStorageMeta", rawObject => new ImageMetaData(rawObject)),
            new PropertyConverter("contentFillColor", this.parseColor.bind(this)),
            new PropertyConverter("contentOverlayEffect", this._parseOverlayEffect.bind(this))
        ];
        this._parseModelComponent(rawPlaceholder, placeholder, converters);
        return placeholder;
        function parseRawFrames(rawFrames) {
            return rawFrames.map(self.parseItem);
        }
    }
    parseGroupItem(rawGroupItem, baseConverters) {
        var groupItem = new GroupItem();
        var converters = [
            ...baseConverters,
            ...this._getShapeConverters(),
            ...this._getGroupConverters(groupItem)
        ];
        this._parseModelComponent(rawGroupItem, groupItem, converters);
        return groupItem;
    }
    parseClipartItem(rawClipartItem, baseConverters) {
        var clipartItem = new ClipartItem();
        var converters = [
            ...baseConverters,
            ...this._getShapeConverters(),
            ...this._getGroupConverters(clipartItem),
            new PropertyConverter("colorGroups", this._setConvertedArray.bind(this, this.parseColorGroup.bind(this), (colorGroups) => clipartItem.colorGroups = colorGroups), true),
        ];
        this._parseModelComponent(rawClipartItem, clipartItem, converters);
        return clipartItem;
    }
    parseLayoutItem(rawLayoutItem, baseConverters) {
        var layoutItem = new LayoutItem();
        var converters = [
            ...baseConverters,
            ...this._getShapeConverters(),
            ...this._getGroupConverters(layoutItem),
            new PropertyConverter("layoutSettings", this.parseLayoutSettings),
            new PropertyConverter("sourceRectangle", this.parseRotatedRectangle)
        ];
        this._parseModelComponent(rawLayoutItem, layoutItem, converters);
        return layoutItem;
    }
    parseContentPermissions(rawContentPermissions, baseConverters) {
        var contentPermissions = new ContentPermissions();
        contentPermissions.barcodePermissions = this.parseBarcodePermissions(rawContentPermissions["barcodePermissions"]);
        contentPermissions.imagePermissions = this.parseImagePermissions(rawContentPermissions["imagePermissions"]);
        return contentPermissions;
    }
    parseEllipseItem(rawEllipse, baseConverters) {
        var ellipse = new EllipseItem();
        var converters = baseConverters.concat(this._getShapeConverters());
        this._parseModelComponent(rawEllipse, ellipse, converters);
        return ellipse;
    }
    parseRectangleItem(rawRectangle, baseConverters) {
        var rectangle = new RectangleItem();
        var converters = baseConverters.concat(this._getShapeConverters());
        this._parseModelComponent(rawRectangle, rectangle, converters);
        return rectangle;
    }
    parseShapeItem(rawShape, baseConverters) {
        var shape = new ShapeItem();
        var converters = baseConverters.concat(this._getShapeConverters());
        this._parseModelComponent(rawShape, shape, converters);
        return shape;
    }
    parseDashedLineItem(rawLine, baseConverters) {
        const line = new DashedLineItem();
        const converters = [
            ...baseConverters,
            ...this._getLineConverters(),
            ...this._getDashedLineConverters()
        ];
        this._parseModelComponent(rawLine, line, converters);
        return line;
    }
    parseThemeBinding(rawThemeBinding) {
        return rawThemeBinding != null ? ThemeBinding.fromRaw(rawThemeBinding) : null;
    }
    parseMask(rawMask) {
        if (rawMask == null)
            return null;
        const mask = new ItemMask();
        if (rawMask.vectorMask != null)
            mask.vectorMask = this.parsePath(rawMask.vectorMask);
        return mask;
    }
    parseTransform(rawTransform) {
        return new Transform(rawTransform["scaleX"], rawTransform["scaleY"], rawTransform["translateX"], rawTransform["translateY"], rawTransform["angle"]);
    }
    parseFontSettings(rawSettings, destTextItem) {
        const font = new BaseTextItem.FontSettings(null);
        Object.assign(font, rawSettings);
        destTextItem.font = font;
        return destTextItem.font;
    }
    parseManipulationPermissions(rawPerms) {
        const result = Object.assign(new ManipulationPermissions(), rawPerms);
        result.resizeGrips = Object.assign(new ResizeGripsPermissions(false, false), rawPerms["resizeGrips"]);
        return result;
    }
    parseFrontendPermissions(rawPerms) {
        return Object.assign(new FrontendPermissions(), rawPerms);
    }
    parseVisualizationPermissions(rawPerms) {
        return Object.assign(new VisualizationPermissions(), rawPerms);
    }
    parseColorGroup(rawPerms) {
        return new ColorGroup(this.parseColor(rawPerms["color"]), rawPerms["targets"]);
    }
    parseItemPermissions(rawPerms) {
        const result = Object.assign(new ItemPermissions(), rawPerms);
        result.itemToolbarPermissions = Object.assign(new ItemToolbarPermissions(false), rawPerms["itemToolbarPermissions"]);
        return result;
    }
    parseTextPermissions(rawPerms) {
        return Object.assign(new TextPermissions(), rawPerms);
    }
    parsePathBoundedTextPermissions(rawPerms) {
        return Object.assign(new PathBoundedTextPermissions(), rawPerms);
    }
    parseShapePermissions(rawPerms) {
        return Object.assign(new ShapePermissions(), rawPerms);
    }
    parseImagePermissions(rawPerms) {
        return Object.assign(new ImagePermissions(), rawPerms);
    }
    parseImageSource(rawImageSource) {
        if (rawImageSource == null)
            return null;
        // TODO: Remove after implementing Issue #29923: Add Public/User ImageSource support
        const unsupportedTypes = [
            ImageItem.ImageSourceType.PublicImage,
            ImageItem.ImageSourceType.UserImage,
            ImageItem.ImageSourceType.File
        ];
        const sourceType = rawImageSource["type"];
        if (unsupportedTypes.includes(sourceType)) {
            throw new Error(`ImageSource type ${sourceType} is not supported. ` +
                `Type ${sourceType} corresponds to ${this.getTypeName(sourceType)}.`);
        }
        let origin = null;
        if (rawImageSource["origin"] != null)
            origin = new ImageItem.ImageSource.Origin(rawImageSource["origin"]);
        if (rawImageSource["origin"] !== undefined)
            delete rawImageSource["origin"];
        return Object.assign(new ImageItem.ImageSource(rawImageSource["id"], rawImageSource["url"], 0, false, true, origin), rawImageSource);
    }
    parseParagraphSettings(rawSettings) {
        return new ParagraphSettings(rawSettings);
    }
    parseStrokeSettings(rawSettings) {
        if (rawSettings == null) {
            return null;
        }
        return new StrokeSettings({
            color: JsonColorParser.parse(rawSettings["color"]),
            size: (typeof rawSettings["size"] == "number") ? rawSettings["size"] : 0,
            lineJoin: (typeof rawSettings["lineJoin"] == "string") ? LineJoin[rawSettings["lineJoin"]] : LineJoin.Miter
        });
    }
    parseShadowSettings(rawSettings) {
        if (rawSettings == null) {
            return null;
        }
        return new ShadowSettings({
            color: JsonColorParser.parse(rawSettings["color"]),
            angle: (typeof rawSettings["angle"] == "number") ? rawSettings["angle"] : 0,
            distance: (typeof rawSettings["distance"] == "number") ? rawSettings["distance"] : 0,
            size: (typeof rawSettings["size"] == "number") ? rawSettings["size"] : 0
        });
    }
    parseInStringPlaceholder(rawSettings) {
        return new InStringPlaceholder(rawSettings["id"], rawSettings["name"], rawSettings["mask"], rawSettings["value"], rawSettings["values"]);
    }
    //#endregion
    //#region private members
    _setConvertedArray(convertFunc, setFunc, rawArray) {
        if (!Array.isArray(rawArray))
            return;
        setFunc(rawArray.map(rawValue => convertFunc(rawValue)));
    }
    _getImageConverters(imageItem /*: ImageItem*/) {
        return [
            new PropertyConverter("source", this.parseImageSource.bind(this)),
            new PropertyConverter("originalImageSource", this.parseImageSource.bind(this)),
            new PropertyConverter("unconvertedSource", this.parseImageSource.bind(this)),
            new PropertyConverter("imagePermissions", this.parseImagePermissions.bind(this)),
            new PropertyConverter("values", this._setConvertedArray.bind(this, this._parseImageItemValue, (obj) => { imageItem.values = obj; }), true),
            new PropertyConverter("ndEffects", this.parseNDEffects),
            new PropertyConverter("overlayEffect", this._parseOverlayEffect.bind(this))
        ];
    }
    _getShapeConverters() {
        return [
            new PropertyConverter("fillColor", this.parseColor.bind(this)),
            new PropertyConverter("borderColor", this.parseColor.bind(this)),
            new PropertyConverter("altBorderColor", this.parseColor.bind(this)),
            new PropertyConverter("sourceRectangle", this.parseRectangleF.bind(this)),
            new PropertyConverter("sourcePath", this.parsePath.bind(this)),
            new PropertyConverter("shapePermissions", this.parseShapePermissions.bind(this))
        ];
    }
    _getGroupConverters(groupItem) {
        return [
            new PropertyConverter("items", this._setConvertedArray.bind(this, this.parseItem, (items) => groupItem.items.addRange(items)), true),