@aurigma/design-atoms-model
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
549 lines • 23.4 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { ContentItem } from "./ContentItem";
import { ImagePermissions } from "./ImagePermissions";
import { ResizeGripsPermissions } from "./ResizeGripsPermissions";
import { RectangleF } from "../../Math/RectangleF";
import { ArgumentException, NotImplementedException, Exception } from "../../Exception";
import { EventWithSenderArg } from "../../EventObject";
import { ImageEffect } from "./ImageEffect";
import { pixelsToPoints } from "../../Utils/Convert";
import { OverlayEffect } from "./OverlayEffect";
import { equals, isString } from "../../Utils/Utils";
import { Size } from "./Size";
import { Property } from "../Decorators/Property";
import { BlendMode } from "./BlendMode";
import { CmykColor } from "../../Colors";
import { ImageViolationSettings } from "./ImageViolationSettings";
import { CollectionPropertyFactory, ObjectPropertyFactory, SimplePropertyFactory } from "../Decorators/Factory";
import { NDEffects } from "../Effects/NDEffects";
import { arraysIsEqual } from "@aurigma/utils-js/algorithms/array";
export class ImageItem extends ContentItem {
constructor(sourceStorageId, location, width, height, ratioWidthToHeight) {
super();
this.ndEffects = new NDEffects();
this._effect = ImageEffect.None;
this._overlayEffect = null;
this.type = ImageItem.type;
this.mviKeepTemplateTransform = false;
this.values = [];
this.allowedSubfolder = null;
this.allowedTabs = null;
this.ratioWidthToHeight = null;
this.isUserImage = false;
this.unconvertedSource = null;
this._onSourcePropertyChanged = (sender, property) => {
switch (property) {
case "url":
case "id":
case "pageIndex":
this._propertyChanged.notify(this, "source");
break;
case "isVector":
this.applyPermissionsConstrain();
this._propertyChanged.notify(this, "source");
break;
default:
}
};
this._onOverlayEffectPropertyChanged = (s, p) => {
this._propertyChanged.notify(this, "overlayEffect");
};
this.imagePermissions = new ImagePermissions();
this._setViolationSettings(new ImageViolationSettings(), true);
this.manipulationPermissions.resizeGrips = new ResizeGripsPermissions(true, false);
this.shapePermissions.allowChangeFillColor = false;
this.imagePermissions.allowKeepOverlayColor = false;
this.itemPermissions.itemToolbarPermissions.showSelectButton = true;
if (sourceStorageId != null) {
this.source = new ImageItem.ImageSource(sourceStorageId);
}
else {
this.source = new ImageItem.ImageSource();
}
if (ratioWidthToHeight != null)
this.ratioWidthToHeight = ratioWidthToHeight;
if (width != null && height != null) {
this.sourceRectangle = new RectangleF(0, 0, width, height);
}
else {
if (width != null)
this.SetWidth(width);
if (height != null)
this.SetHeight(height);
}
if (location != null) {
this.sourceRectangle.left = location.x;
this.sourceRectangle.top = location.y;
}
}
_copy(source, destination, generateNewIds, appropriateParentContainer) {
var _a;
super._copy(source, destination, generateNewIds, appropriateParentContainer);
destination.imagePermissions = source._imagePermissions != null ? source._imagePermissions.clone() : null;
destination.effect = source._effect;
destination.overlayEffect = source.overlayEffect != null ? source.overlayEffect.clone() : null;
destination.source = source._source.clone();
destination.unconvertedSource = source.unconvertedSource != null ? source.unconvertedSource.clone() : null;
destination.mviKeepTemplateTransform = source.mviKeepTemplateTransform;
if (source.values != null) {
destination.values = [];
for (var i of source.values)
destination.values.push(i.clone());
}
destination.originalImageSource = (_a = source.originalImageSource) === null || _a === void 0 ? void 0 : _a.clone();
destination.ndEffects = source.ndEffects.clone();
destination.allowedSubfolder = source.allowedSubfolder;
destination.allowedTabs = structuredClone(source.allowedTabs);
destination.ratioWidthToHeight = source.ratioWidthToHeight;
destination.isUserImage = source.isUserImage;
destination.displayName = source.displayName;
}
equals(other) {
return super.equals(other) &&
equals(this._imagePermissions, other._imagePermissions) &&
equals(this._effect, other._effect) &&
equals(this.unconvertedSource, other.unconvertedSource) &&
equals(this._source, other._source) &&
equals(this.mviKeepTemplateTransform, other.mviKeepTemplateTransform) &&
equals(this.overlayEffect, other.overlayEffect) &&
arraysIsEqual(this.values, other.values, equals) &&
equals(this.allowedSubfolder, other.allowedSubfolder) &&
arraysIsEqual(this.allowedTabs, other.allowedTabs) &&
equals(this.ratioWidthToHeight, other.ratioWidthToHeight) &&
equals(this.isUserImage, other.isUserImage) &&
equals(this.originalImageSource, other.originalImageSource) &&
equals(this.ndEffects, other.ndEffects);
}
clone(generateNewIds = false, appropriateParentContainer = false) {
const item = new ImageItem();
this._copy(this, item, generateNewIds, appropriateParentContainer);
return item;
}
get imagePermissions() {
return this._imagePermissions;
}
set imagePermissions(value) {
if (value == null)
throw new ArgumentException("imagePermissions cannot be null");
if (equals(this._imagePermissions, value))
return;
if (this._imagePermissions != null)
this._imagePermissions.propertyChanged.remove(this._onPermissionsChanged);
this._imagePermissions = value;
this.applyPermissionsConstrain();
this._imagePermissions.propertyChanged.add(this._onPermissionsChanged);
this._propertyChanged.notify(this, "imagePermissions");
}
get violationSettings() {
return this._violationSettings;
}
set violationSettings(value) {
this._setViolationSettings(value);
}
_setViolationSettings(value, skipTypeCheck = false) {
if (!skipTypeCheck && !(value instanceof ImageViolationSettings))
throw new ArgumentException("Shape ViolationSettings property must has ImageViolationSettings type!");
super._setViolationSettings(value, skipTypeCheck);
}
applyPermissionsConstrain() {
super.applyPermissionsConstrain();
if (this.imagePermissions != null && !this.imagePermissions.allowEditImage)
this.itemPermissions.itemToolbarPermissions.showEditButtonConstraint = false;
else if (this.source != null && this.source.isVector)
this.itemPermissions.itemToolbarPermissions.showEditButtonConstraint = false;
else
this.itemPermissions.itemToolbarPermissions.showEditButtonConstraint = null;
if (this.imagePermissions != null && !this.imagePermissions.allowChangeImage)
this.itemPermissions.itemToolbarPermissions.showSelectButtonConstraint = false;
else
this.itemPermissions.itemToolbarPermissions.showSelectButtonConstraint = null;
}
get displayName() {
if (this._displayName == null && this.values != null && this.values.length > 0) {
const selectedValue = this.values.find((imageItemValue) => imageItemValue.value.id === this.source.id);
if (selectedValue != null)
this.displayName = selectedValue.name;
}
return this._displayName;
}
set displayName(value) {
if (value != this._displayName)
this._displayName = value;
}
get source() {
return this._source;
}
set source(value) {
if (this._source === value || this._source != null && this._source.equals(value))
return;
if (this._source != null)
this._source.removePropertyChanged(this._onSourcePropertyChanged);
this._source = value;
if (this._source != null)
this._source.addPropertyChanged(this._onSourcePropertyChanged);
this._propertyChanged.notify(this, "source");
}
get effect() {
return this._effect;
}
set effect(value) {
if (this._effect !== value) {
this._effect = value;
this._propertyChanged.notify(this, "effect");
}
}
get overlayEffect() {
return this._overlayEffect;
}
set overlayEffect(value) {
if (OverlayEffect.equals(this.overlayEffect, value))
return;
this._unsubscribeOverlayEffectPropertyChanged();
this._overlayEffect = value;
this._subscribeOverlayEffectPropertyChanged();
this._propertyChanged.notify(this, "overlayEffect");
}
_subscribeOverlayEffectPropertyChanged() {
if (this.overlayEffect != null)
this.overlayEffect.addPropertyChanged(this._onOverlayEffectPropertyChanged);
}
_unsubscribeOverlayEffectPropertyChanged() {
if (this.overlayEffect != null)
this.overlayEffect.removePropertyChanged(this._onOverlayEffectPropertyChanged);
}
SetWidth(value, calculateHeight) {
this.sourceRectangle.width = value;
if (calculateHeight != null)
calculateHeight = true;
if (this.source.id != null && calculateHeight)
this.sourceRectangle.height = this._calculateHeight(value);
}
SetHeight(value, calculateWidth) {
this.sourceRectangle.height = value;
if (calculateWidth != null)
calculateWidth = true;
if (this.source.id != null && calculateWidth)
this.sourceRectangle.width = this._calculateWidth(value);
}
getSource() {
throw new NotImplementedException();
}
_calculateHeight(width) {
if (this.ratioWidthToHeight == null)
throw new Exception("Field ratioWidthToHeight is not set!");
return width / this.ratioWidthToHeight;
}
_calculateWidth(height) {
if (this.ratioWidthToHeight == null)
throw new Exception("Field ratioWidthToHeight is not set!");
return height * this.ratioWidthToHeight;
}
getSimplifiedObject(omitProperties) {
var _a, _b;
if (!Array.isArray(omitProperties) && !isString(omitProperties))
omitProperties = [];
const simplified = super.getSimplifiedObject(["imagePermissions"].concat(omitProperties));
simplified["source"] = this.source.toJSON();
simplified["originalImageSource"] = (_a = this.originalImageSource) === null || _a === void 0 ? void 0 : _a.toJSON();
simplified["unconvertedSource"] = (_b = this.unconvertedSource) === null || _b === void 0 ? void 0 : _b.toJSON();
simplified["ndEffects"] = this.ndEffects.toJSON();
simplified["imagePermissions"] = this.imagePermissions.getSimplifiedObject();
return simplified;
}
getOriginalImageSize() {
return {
width: pixelsToPoints(this.source.width, this.source.dpiX || 72),
height: pixelsToPoints(this.source.height, this.source.dpiY || 72)
};
}
}
ImageItem.type = "ImageItem";
__decorate([
Property({ factory: new SimplePropertyFactory("subfolder"), displayName: "Allowed subfolder" }),
__metadata("design:type", String)
], ImageItem.prototype, "allowedSubfolder", void 0);
__decorate([
Property({ factory: new CollectionPropertyFactory(Array), displayName: "Allowed tabs", }),
__metadata("design:type", Array)
], ImageItem.prototype, "allowedTabs", void 0);
__decorate([
Property({ factory: new SimplePropertyFactory("Image"), displayName: "Display name" }),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], ImageItem.prototype, "displayName", null);
__decorate([
Property({ ignore: true }),
__metadata("design:type", ImageItem.ImageSource)
], ImageItem.prototype, "unconvertedSource", void 0);
__decorate([
Property({ enumObject: ImageEffect }),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], ImageItem.prototype, "effect", null);
__decorate([
Property({
factory: new ObjectPropertyFactory(OverlayEffect, {
color: new CmykColor(0, 0, 0, 0, 255),
opacity: 1,
blendMode: BlendMode.Normal
}),
displayName: "Overlay effect"
}),
__metadata("design:type", OverlayEffect),
__metadata("design:paramtypes", [OverlayEffect])
], ImageItem.prototype, "overlayEffect", null);
(function (ImageItem) {
class ImageMetaData {
constructor(rawData) {
Object.assign(this, rawData);
}
clone() {
return new ImageMetaData(this);
}
equals(other) {
return other != null &&
equals(this.id, other.id) &&
equals(this.width, other.width) &&
equals(this.height, other.height) &&
equals(this.isVector, other.isVector);
}
}
ImageItem.ImageMetaData = ImageMetaData;
class ImageItemValue {
constructor(name, value, transformedRectangle) {
this.name = name;
this.value = value;
this.transformedRectangle = transformedRectangle;
}
clone() {
return new ImageItemValue(this.name, this.value.clone(), this.transformedRectangle.clone());
}
equals(other) {
return other != null &&
equals(this.name, other.name) &&
equals(this.value, other.value) &&
equals(this.transformedRectangle, other.transformedRectangle);
}
}
ImageItem.ImageItemValue = ImageItemValue;
let ImageSourceType;
(function (ImageSourceType) {
ImageSourceType[ImageSourceType["None"] = 0] = "None";
ImageSourceType[ImageSourceType["File"] = 1] = "File";
ImageSourceType[ImageSourceType["StorageId"] = 3] = "StorageId";
ImageSourceType[ImageSourceType["Url"] = 4] = "Url";
ImageSourceType[ImageSourceType["PublicImage"] = 5] = "PublicImage";
ImageSourceType[ImageSourceType["UserImage"] = 6] = "UserImage";
})(ImageSourceType = ImageItem.ImageSourceType || (ImageItem.ImageSourceType = {}));
class ImageSource {
constructor(storageId, url, sourcePageIndex = 0, actualSize = false, saveAspectRatio = true, origin) {
this._storageId = null;
this._url = null;
this._type = ImageSourceType.None;
this._isVector = false;
this._containsOnlyVectorElements = false;
this._pageIndex = 0;
this._origin = null;
this._actualSize = false;
this._saveAspectRatio = true;
this._dpiX = 72;
this._dpiY = 72;
this._propertyChanged = new EventWithSenderArg();
this._storageId = storageId;
if (storageId != null) {
this._type = ImageSourceType.StorageId;
this._origin = origin;
}
this._url = url;
if (url != null) {
this._type = ImageSourceType.Url;
this._actualSize = actualSize;
this._saveAspectRatio = saveAspectRatio;
}
}
clone() {
const clonedItem = new ImageSource();
clonedItem.id = this.id;
clonedItem.url = this.url;
clonedItem._type = this._type;
clonedItem._width = this._width;
clonedItem._height = this._height;
clonedItem._isVector = this._isVector;
clonedItem._containsOnlyVectorElements = this._containsOnlyVectorElements;
clonedItem._pageIndex = this._pageIndex;
clonedItem._origin = this._origin != null ? this._origin.clone() : null;
clonedItem._actualSize = this._actualSize;
clonedItem._saveAspectRatio = this._saveAspectRatio;
clonedItem._dpiX = this._dpiX;
clonedItem._dpiY = this._dpiY;
return clonedItem;
}
equals(other) {
return equals(this.id, other.id) &&
equals(this.url, other.url) &&
equals(this._type, other._type) &&
equals(this._width, other._width) &&
equals(this._height, other._height) &&
equals(this._origin, other._origin) &&
equals(this._saveAspectRatio, other._saveAspectRatio) &&
other._pageIndex === this._pageIndex &&
JSON.stringify(other._origin) === JSON.stringify(this._origin) &&
other._actualSize === this._actualSize &&
other._saveAspectRatio === this._saveAspectRatio;
}
get id() {
return this._storageId;
}
set id(value) {
if (this._storageId === value)
return;
this._storageId = value;
this._propertyChanged.notify(this, "id");
}
setIdWithOrigin(id, origin) {
this.id = id;
this._setOrigin(origin);
}
get url() {
return this._url;
}
set url(value) {
if (this._url === value)
return;
this._url = value;
this._propertyChanged.notify(this, "url");
}
get width() {
return this._width;
}
set width(value) {
if (this._width === value)
return;
this._width = value;
this._propertyChanged.notify(this, "width");
}
get height() {
return this._height;
}
set height(value) {
if (this._height === value)
return;
this._height = value;
this._propertyChanged.notify(this, "height");
}
get isVector() {
return this._isVector;
}
set isVector(value) {
if (this._isVector === value)
return;
this._isVector = value;
this._propertyChanged.notify(this, "isVector");
}
get containsOnlyVectorElements() {
return this._containsOnlyVectorElements;
}
set containsOnlyVectorElements(value) {
if (this._containsOnlyVectorElements === value)
return;
this._containsOnlyVectorElements = value;
this._propertyChanged.notify(this, "containsOnlyVectorElements");
}
get pageIndex() {
return this._pageIndex;
}
set pageIndex(value) {
if (value === this._pageIndex)
return;
this._pageIndex = value;
this._propertyChanged.notify(this, "pageIndex");
}
get origin() {
return this._origin;
}
_setOrigin(value) {
if (value === this._origin)
return;
this._origin = value;
this._propertyChanged.notify(this, "origin");
}
get type() {
return this._type;
}
get actualSize() {
return this._actualSize;
}
set actualSize(value) {
this._actualSize = value;
}
get saveAspectRatio() {
return this._saveAspectRatio;
}
set saveAspectRatio(value) {
this._saveAspectRatio = value;
}
get dpiX() {
return this._dpiX;
}
set dpiX(dpi) {
if (dpi > 0)
this._dpiX = dpi;
}
get dpiY() {
return this._dpiY;
}
set dpiY(dpi) {
if (dpi > 0)
this._dpiY = dpi;
}
addPropertyChanged(listener) {
this._propertyChanged.add(listener);
}
removePropertyChanged(listener) {
this._propertyChanged.remove(listener);
}
toJSON() {
return {
"id": this.id,
"width": this.width,
"height": this.height,
"isVector": this.isVector,
"containsOnlyVectorElements": this.containsOnlyVectorElements,
"pageIndex": this.pageIndex,
"url": this.url,
"actualSize": this.actualSize,
"saveAspectRatio": this.saveAspectRatio,
"origin": this.origin
};
}
}
ImageItem.ImageSource = ImageSource;
(function (ImageSource) {
class Origin {
constructor(rawData) {
Object.assign(this, rawData || {});
if (rawData != null && rawData["originalSize"] != null)
this.originalSize = new Size(rawData["originalSize"]["width"], rawData["originalSize"]["height"]);
}
equals(other) {
return other == null &&
equals(this.type, other.type) &&
equals(this.data, other.data) &&
equals(this.originalSize, other.originalSize);
}
clone() {
return new Origin(this);
}
}
ImageSource.Origin = Origin;
})(ImageSource = ImageItem.ImageSource || (ImageItem.ImageSource = {}));
})(ImageItem || (ImageItem = {}));
//# sourceMappingURL=ImageItem.js.map