@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.
510 lines • 24 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 { ShapeItem } from "./ShapeItem";
import { ImageItem } from "./ImageItem";
import { ImageMetaData } from "./ImageMetaData";
import { Color, CmykColor, RgbColors } from "../../Colors";
import { PlaceholderPermissions } from "./PlaceholderPermissions";
import { ResizeGripsPermissions } from "./ResizeGripsPermissions";
import { ContentPermissions } from "./ContentPermissions";
import { RectangleF } from "../../Math/RectangleF";
import { Path } from "../../Math/Path";
import { ArgumentException } from "../../Exception";
import { BarcodeFormat } from "./BarcodeFormat";
import { equals } from "../../Utils/Utils";
import { arraysIsEqual } from "@aurigma/utils-js/algorithms/array";
import { OverlayEffect } from "./OverlayEffect";
import { Property } from "../Decorators/Property";
import { BlendMode } from "./BlendMode";
import { ImageEffect } from "./ImageEffect";
import { ImageViolationSettings } from "./ImageViolationSettings";
import { CollectionPropertyFactory, ColorPropertyFactory, ObjectPropertyFactory, SimplePropertyFactory } from "../Decorators/Factory";
export var VerticalContentAlignment;
(function (VerticalContentAlignment) {
VerticalContentAlignment[VerticalContentAlignment["None"] = 0] = "None";
VerticalContentAlignment[VerticalContentAlignment["Center"] = 1] = "Center";
VerticalContentAlignment[VerticalContentAlignment["Top"] = 2] = "Top";
VerticalContentAlignment[VerticalContentAlignment["Bottom"] = 3] = "Bottom";
})(VerticalContentAlignment || (VerticalContentAlignment = {}));
;
export var HorizontalContentAlignment;
(function (HorizontalContentAlignment) {
HorizontalContentAlignment[HorizontalContentAlignment["None"] = 0] = "None";
HorizontalContentAlignment[HorizontalContentAlignment["Center"] = 1] = "Center";
HorizontalContentAlignment[HorizontalContentAlignment["Right"] = 2] = "Right";
HorizontalContentAlignment[HorizontalContentAlignment["Left"] = 3] = "Left";
})(HorizontalContentAlignment || (HorizontalContentAlignment = {}));
export var ResizeMode;
(function (ResizeMode) {
ResizeMode[ResizeMode["Fit"] = 0] = "Fit";
ResizeMode[ResizeMode["Fill"] = 1] = "Fill";
ResizeMode[ResizeMode["Original"] = 2] = "Original";
})(ResizeMode || (ResizeMode = {}));
export class PlaceholderItem extends ShapeItem {
//TODO: return ctor signature constructor(sourcePath?: VectorObjects.Math.Path) after fix 0021990
constructor(sourceRec) {
super(sourceRec != null ? Path.rectangle(sourceRec.left, sourceRec.top, sourceRec.width, sourceRec.height) : null);
this._isStubContent = false;
this._isCoverMode = false;
this._contentResizeMode = ResizeMode.Fill;
this._contentEffect = ImageEffect.None;
this._contentFillColor = null;
this._contentOverlayEffect = null;
this.stubStorageMeta = null;
this.linkId = null;
this.allowedSubfolder = null;
this.allowedTabs = null;
this.contentVerticalAlignment = VerticalContentAlignment.None;
this.contentHorizontalAlignment = HorizontalContentAlignment.None;
this.type = PlaceholderItem.type;
this._content = null;
this._topFrames = [];
this._bottomFrames = [];
this._onContentOverlayEffectPropertyChanged = (s, p) => {
this._propertyChanged.notify(this, "contentOverlayEffect");
};
this.fixedStubContentSize = false;
this.sourceRectangle = sourceRec != null ? sourceRec : new RectangleF(0, 0, 10, 10);
;
this.fillColor = RgbColors.transparent;
this.borderWidth = 0;
this.placeholderPermissions = new PlaceholderPermissions();
this._contentPermissions = new ContentPermissions();
this._contentPermissions.propertyChanged.add(this._onPermissionsChanged);
this._setViolationSettings(new ImageViolationSettings(), true);
this._ignorePermissionsChange = true;
this.manipulationPermissions.resizeGrips = new ResizeGripsPermissions(true, true, false);
this.shapePermissions.allowChangeFillColor = false;
this.itemPermissions.allowRemoveOnLayoutChange = true;
this.itemPermissions.itemToolbarPermissions.showEditButton = true;
this.itemPermissions.itemToolbarPermissions.showSelectButtonConstraint = null;
this.itemPermissions.itemToolbarPermissions.showSelectButton = true;
this.contentPermissions.imagePermissions.allowKeepOverlayColor = false;
this._ignorePermissionsChange = false;
}
get contentEffect() {
return this._contentEffect;
}
set contentEffect(value) {
if (this._contentEffect === value)
return;
this._contentEffect = value;
this._propertyChanged.notify(this, "contentEffect");
}
get contentFillColor() {
return this._contentFillColor;
}
set contentFillColor(value) {
if (this._contentFillColor === value)
return;
this._contentFillColor = value;
this._propertyChanged.notify(this, "contentFillColor");
}
get isStubContent() {
return this._isStubContent;
}
set isStubContent(value) {
if (this._isStubContent === value)
return;
this._isStubContent = value;
this._setStubStorageMeta();
this.applyPermissionsConstrain();
this._propertyChanged.notify(this, "isStubContent");
}
get contentResizeMode() {
if (this.isCoverMode)
return ResizeMode.Fill;
if (this.isBarcodePlaceholder)
return ResizeMode.Fit;
return this._contentResizeMode;
}
set contentResizeMode(value) {
if (this._contentResizeMode === value)
return;
this._contentResizeMode = value;
this._propertyChanged.notify(this, "contentResizeMode");
}
get contentOverlayEffect() {
return this._contentOverlayEffect;
}
set contentOverlayEffect(value) {
if (OverlayEffect.equals(this.contentOverlayEffect, value))
return;
this._unsubscribeContentOverlayEffectPropertyChanged();
this._contentOverlayEffect = value;
this._subscribeContentOverlayEffectPropertyChanged();
this._propertyChanged.notify(this, "contentOverlayEffect");
}
_subscribeContentOverlayEffectPropertyChanged() {
if (this.contentOverlayEffect != null)
this.contentOverlayEffect.addPropertyChanged(this._onContentOverlayEffectPropertyChanged);
}
_unsubscribeContentOverlayEffectPropertyChanged() {
if (this.contentOverlayEffect != null)
this.contentOverlayEffect.removePropertyChanged(this._onContentOverlayEffectPropertyChanged);
}
//Cover mode - the mode in which you can't place/move the content of placeholder so that empty space remains inside of the placeholder.
//Important!!! In this mode, you can't rotate the content. This is important because the algorithms in SelectionHandler.js are based on the fact
//that the placeholder and its content in this mode always have the same rotation angle and only a proportional resize of the content is allowed.
get isCoverMode() {
return this.barcodeFormat == null
&& this._isCoverMode;
}
set isCoverMode(value) {
if (this._isCoverMode === value)
return;
this._isCoverMode = value;
if (!this.isEmptyContent) {
this.content.applyPermissionsConstrain();
}
this._propertyChanged.notify(this, "isCoverMode");
}
getImagePermissions() {
if (this.contentPermissions != null)
return this.contentPermissions.imagePermissions;
if (this.content instanceof ImageItem)
return this.content.imagePermissions;
return null;
}
applyPermissionsConstrain() {
const itemTlbrPerms = this.itemPermissions.itemToolbarPermissions;
const imagePermissions = this.getImagePermissions();
const allowChangeImage = imagePermissions != null ? imagePermissions.allowChangeImage : true;
const allowEditImage = imagePermissions != null ? imagePermissions.allowEditImage : false;
const isVector = this.content != null && this.content instanceof ImageItem && this.content.source != null && this.content.source.isVector;
if (this.isStubOrEmpty || !allowEditImage || isVector) {
itemTlbrPerms.showEditButtonConstraint = false;
}
else {
itemTlbrPerms.showEditButtonConstraint = null;
}
itemTlbrPerms.showSelectButtonConstraint = (allowChangeImage && !this.isStubOrEmpty) ? null : false;
if (this.placeholderPermissions != null) {
this.placeholderPermissions.showSelectButtonConstraint = allowChangeImage ? null : false;
}
if (this.contentPermissions != null && this.contentPermissions.imagePermissions != null) {
if (this.barcodeFormat != null) {
this.contentPermissions.imagePermissions.allowEditImageConstraint = false;
}
else {
this.contentPermissions.imagePermissions.allowEditImageConstraint = null;
}
}
if (this.isBarcodePlaceholder) {
if (this.manipulationPermissions != null) {
this.manipulationPermissions.resizeGrips.edge = false;
this.manipulationPermissions.resizeGrips.setCornerArbitrary(false);
}
if (this.itemPermissions != null && itemTlbrPerms != null) {
itemTlbrPerms.showSelectButton = false;
itemTlbrPerms.showEditButtonConstraint = null;
}
if (this.placeholderPermissions != null) {
this.placeholderPermissions.allowEditContent = false;
this.placeholderPermissions.showHandleButton = false;
}
if (this.contentPermissions != null && this.contentPermissions.barcodePermissions != null) {
if (this.contentPermissions.barcodePermissions.allowChangeBarcodeContent)
this.placeholderPermissions.showSelectButtonConstraint = null;
else {
this.placeholderPermissions.showSelectButtonConstraint = false;
itemTlbrPerms.showEditButtonConstraint = this.contentPermissions.barcodePermissions.allowChangeBarcodeContent;
}
}
}
}
get contentPermissions() {
return this._contentPermissions;
}
set contentPermissions(value) {
if (value == null) {
throw new ArgumentException("ContentPermissions cannot be null");
}
if (equals(this._contentPermissions, value))
return;
this._contentPermissions.propertyChanged.remove(this._onPermissionsChanged);
this._contentPermissions = value;
this._contentPermissions.propertyChanged.add(this._onPermissionsChanged);
this._onPermissionsChanged();
}
get placeholderPermissions() {
return this._placeholderPermissions;
}
set placeholderPermissions(value) {
if (value == null)
throw new ArgumentException("placeholderPermissions cannot be null");
if (equals(this._placeholderPermissions, value))
return;
if (this._placeholderPermissions != null)
this._placeholderPermissions.propertyChanged.remove(this._onPermissionsChanged);
this._placeholderPermissions = value;
this.applyPermissionsConstrain();
this._placeholderPermissions.propertyChanged.add(this._onPermissionsChanged);
this._propertyChanged.notify(this, "placeholderPermissions");
}
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);
}
get isFrame() {
return (this._topFrames != null && this._topFrames.length > 0)
|| (this._bottomFrames != null && this._bottomFrames.length > 0);
}
get content() {
return this._content;
}
set content(value) {
this._content = value;
if (!this.isEmptyContent) {
this._content.parentPlaceholder = this;
this._content.parentContainer = null;
this._content.applyPermissionsConstrain();
}
this.applyPermissionsConstrain();
this._setStubStorageMeta();
this._propertyChanged.notify(this, "content");
}
_setStubStorageMeta() {
if (this.isStubContent && this._content instanceof ImageItem) {
this.stubStorageMeta = new ImageMetaData({
isUserImage: this._content.isUserImage,
isVector: this._content.source.isVector,
name: "Stub content",
size: { width: this._content.source.width, height: this._content.source.height },
storageId: this._content.source.id,
origin: this._content.source.origin
});
}
else {
this.stubStorageMeta = null;
}
}
;
get topFrames() {
return this._topFrames;
}
set topFrames(value) {
if (value == null)
throw new ArgumentException();
this._topFrames = value;
this._topFrames.forEach((contentItem) => {
contentItem.parentPlaceholder = this;
contentItem.parentContainer = null;
});
}
get bottomFrames() {
return this._bottomFrames;
}
set bottomFrames(value) {
if (value == null)
throw new ArgumentException();
this._bottomFrames = value;
this._bottomFrames.forEach((contentItem) => {
contentItem.parentPlaceholder = this;
contentItem.parentContainer = null;
});
}
updateContentAndFrames(func) {
if (this.content != null)
func(this.content);
if (this.topFrames != null) {
this.topFrames.forEach(contentItem => {
func(contentItem);
});
}
if (this.bottomFrames != null) {
this.bottomFrames.forEach(contentItem => {
func(contentItem);
});
}
}
get imageContent() {
if (!this.isEmptyContent && this.content instanceof ImageItem) {
return this._content;
}
else {
return null;
}
}
get isEmptyContent() {
return this._content == null;
}
get isStubOrEmpty() {
return this.isStubContent || this.isEmptyContent;
}
_canSetIsVariable() {
return true;
}
get isBarcodePlaceholder() {
return this.barcodeFormat != null;
}
getSimplifiedObject() {
const simplified = super.getSimplifiedObject([
"_content",
"imageContent",
"placeholderPermissions",
"contentPermissions",
"isFrame",
"isEmptyContent",
"isStubOrEmpty",
"isBarcodePlaceholder"
]);
simplified["content"] = this.content != null ? this.content.getSimplifiedObject() : null;
simplified["placeholderPermissions"] = this.placeholderPermissions.getSimplifiedObject();
simplified["contentPermissions"] = this.contentPermissions.getSimplifiedObject();
return simplified;
}
_copy(source, destination, generateNewIds, appropriateParentContainer) {
super._copy(source, destination, generateNewIds, appropriateParentContainer);
destination.linkId = source.linkId;
destination.allowedSubfolder = source.allowedSubfolder;
destination.allowedTabs = source.allowedTabs != null ? source.allowedTabs.map(i => i) : null;
destination.contentVerticalAlignment = source.contentVerticalAlignment;
destination.contentHorizontalAlignment = source.contentHorizontalAlignment;
destination.placeholderPermissions = source.placeholderPermissions.clone();
if (source.content != null) {
if (destination.content == null)
destination.content = source.content.clone(generateNewIds, appropriateParentContainer);
else
destination.content.update(source.content);
destination.content.parentPlaceholder = destination;
}
else
destination.content = null;
if (source.topFrames.length === destination.topFrames.length) {
for (let i = 0; i < source.topFrames.length; i++) {
destination.topFrames[i].update(source.topFrames[i]);
destination.topFrames[i].parentPlaceholder = destination;
}
}
else {
destination.topFrames = source.topFrames.map(i => {
const cloned = i.clone(generateNewIds, appropriateParentContainer);
cloned.parentPlaceholder = destination;
return cloned;
});
}
if (source.bottomFrames.length === destination.bottomFrames.length) {
for (let i = 0; i < source.bottomFrames.length; i++) {
destination.bottomFrames[i].update(source.bottomFrames[i]);
destination.bottomFrames[i].parentPlaceholder = destination;
}
}
else {
destination.bottomFrames = source.bottomFrames.map(i => {
const cloned = i.clone(generateNewIds, appropriateParentContainer);
cloned.parentPlaceholder = destination;
return cloned;
});
}
destination.stubStorageMeta = source.stubStorageMeta != null ? source.stubStorageMeta.clone() : null;
destination.isStubContent = source.isStubContent;
destination.isCoverMode = source.isCoverMode;
destination.contentResizeMode = source.contentResizeMode;
destination.contentEffect = source.contentEffect;
destination.contentFillColor = source._contentFillColor != null ? source._contentFillColor.clone() : null;
destination.contentOverlayEffect = source.contentOverlayEffect != null ? source.contentOverlayEffect.clone() : null;
destination.barcodeFormat = source.barcodeFormat;
destination.contentPermissions = source.contentPermissions.clone();
destination.isVariable = source.isVariable;
}
equals(other) {
return super.equals(other) &&
arraysIsEqual([this._content, ...this._topFrames, ...this._bottomFrames], [other._content, ...other._topFrames, ...other._bottomFrames], equals) &&
equals(this.linkId, other.linkId) &&
equals(this.allowedSubfolder, other.allowedSubfolder) &&
arraysIsEqual(this.allowedTabs, other.allowedTabs) &&
equals(this.contentVerticalAlignment, other.contentVerticalAlignment) &&
equals(this.contentHorizontalAlignment, other.contentHorizontalAlignment) &&
equals(this._placeholderPermissions, other._placeholderPermissions) &&
equals(this.stubStorageMeta, other.stubStorageMeta) &&
equals(this._isStubContent, other._isStubContent) &&
equals(this._isCoverMode, other._isCoverMode) &&
equals(this._contentResizeMode, other._contentResizeMode) &&
equals(this._contentEffect, other._contentEffect) &&
equals(this.barcodeFormat, other.barcodeFormat) &&
equals(this._contentPermissions, other._contentPermissions) &&
equals(this.isVariable, other.isVariable);
}
clone(generateNewIds = false, appropriateParentContainer = false) {
const item = new PlaceholderItem();
this._copy(this, item, generateNewIds, appropriateParentContainer);
return item;
}
}
PlaceholderItem.type = "PlaceholderItem";
__decorate([
Property({ factory: new ObjectPropertyFactory(ImageMetaData), displayName: "Stub storage meta" }),
__metadata("design:type", ImageMetaData)
], PlaceholderItem.prototype, "stubStorageMeta", void 0);
__decorate([
Property({ type: "string" }),
__metadata("design:type", String)
], PlaceholderItem.prototype, "linkId", void 0);
__decorate([
Property({ factory: new SimplePropertyFactory("subfolder"), displayName: "Allowed subfolder" }),
__metadata("design:type", String)
], PlaceholderItem.prototype, "allowedSubfolder", void 0);
__decorate([
Property({ factory: new CollectionPropertyFactory(Array), displayName: "Allowed tabs" }),
__metadata("design:type", Array)
], PlaceholderItem.prototype, "allowedTabs", void 0);
__decorate([
Property({ enumObject: VerticalContentAlignment }),
__metadata("design:type", Object)
], PlaceholderItem.prototype, "contentVerticalAlignment", void 0);
__decorate([
Property({ enumObject: HorizontalContentAlignment }),
__metadata("design:type", Object)
], PlaceholderItem.prototype, "contentHorizontalAlignment", void 0);
__decorate([
Property({ enumObject: ImageEffect }),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], PlaceholderItem.prototype, "contentEffect", null);
__decorate([
Property({ factory: new ColorPropertyFactory(), displayName: "Content fill color" }),
__metadata("design:type", Color),
__metadata("design:paramtypes", [Color])
], PlaceholderItem.prototype, "contentFillColor", null);
__decorate([
Property({ enumObject: ResizeMode }),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], PlaceholderItem.prototype, "contentResizeMode", null);
__decorate([
Property({ enumObject: BarcodeFormat, factory: new SimplePropertyFactory(BarcodeFormat.QR_CODE), displayName: "Barcode format" }),
__metadata("design:type", String)
], PlaceholderItem.prototype, "barcodeFormat", void 0);
__decorate([
Property({
factory: new ObjectPropertyFactory(OverlayEffect, {
color: new CmykColor(0, 0, 0, 0, 255),
opacity: 1,
blendMode: BlendMode.Normal
}),
displayName: "Content overlay effect"
}),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], PlaceholderItem.prototype, "contentOverlayEffect", null);
__decorate([
Property({ type: "item" }),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], PlaceholderItem.prototype, "content", null);
//# sourceMappingURL=PlaceholderItem.js.map