@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.
619 lines • 29.5 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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);
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spread = (this && this.__spread) || function () {
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
return ar;
};
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, arrayEquals } from "../../Utils/Utils";
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 = {}));
var PlaceholderItem = /** @class */ (function (_super) {
__extends(PlaceholderItem, _super);
//TODO: return ctor signature constructor(sourcePath?: VectorObjects.Math.Path) after fix 0021990
function PlaceholderItem(sourceRec) {
var _this = _super.call(this, sourceRec != null ? Path.rectangle(sourceRec.left, sourceRec.top, sourceRec.width, sourceRec.height) : null) || this;
_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 = function (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;
return _this;
}
Object.defineProperty(PlaceholderItem.prototype, "contentEffect", {
get: function () {
return this._contentEffect;
},
set: function (value) {
if (this._contentEffect === value)
return;
this._contentEffect = value;
this._propertyChanged.notify(this, "contentEffect");
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItem.prototype, "contentFillColor", {
get: function () {
return this._contentFillColor;
},
set: function (value) {
if (this._contentFillColor === value)
return;
this._contentFillColor = value;
this._propertyChanged.notify(this, "contentFillColor");
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItem.prototype, "isStubContent", {
get: function () {
return this._isStubContent;
},
set: function (value) {
if (this._isStubContent === value)
return;
this._isStubContent = value;
this._setStubStorageMeta();
this.applyPermissionsConstrain();
this._propertyChanged.notify(this, "isStubContent");
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItem.prototype, "contentResizeMode", {
get: function () {
if (this.isCoverMode)
return ResizeMode.Fill;
if (this.isBarcodePlaceholder)
return ResizeMode.Fit;
return this._contentResizeMode;
},
set: function (value) {
if (this._contentResizeMode === value)
return;
this._contentResizeMode = value;
this._propertyChanged.notify(this, "contentResizeMode");
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItem.prototype, "contentOverlayEffect", {
get: function () {
return this._contentOverlayEffect;
},
set: function (value) {
if (OverlayEffect.equals(this.contentOverlayEffect, value))
return;
this._unsubscribeContentOverlayEffectPropertyChanged();
this._contentOverlayEffect = value;
this._subscribeContentOverlayEffectPropertyChanged();
this._propertyChanged.notify(this, "contentOverlayEffect");
},
enumerable: true,
configurable: true
});
PlaceholderItem.prototype._subscribeContentOverlayEffectPropertyChanged = function () {
if (this.contentOverlayEffect != null)
this.contentOverlayEffect.addPropertyChanged(this._onContentOverlayEffectPropertyChanged);
};
PlaceholderItem.prototype._unsubscribeContentOverlayEffectPropertyChanged = function () {
if (this.contentOverlayEffect != null)
this.contentOverlayEffect.removePropertyChanged(this._onContentOverlayEffectPropertyChanged);
};
Object.defineProperty(PlaceholderItem.prototype, "isCoverMode", {
//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: function () {
return this.barcodeFormat == null
&& this._isCoverMode;
},
set: function (value) {
if (this._isCoverMode === value)
return;
this._isCoverMode = value;
if (!this.isEmptyContent) {
this.content.applyPermissionsConstrain();
}
this._propertyChanged.notify(this, "isCoverMode");
},
enumerable: true,
configurable: true
});
PlaceholderItem.prototype.getImagePermissions = function () {
if (this.contentPermissions != null)
return this.contentPermissions.imagePermissions;
if (this.content instanceof ImageItem)
return this.content.imagePermissions;
return null;
};
PlaceholderItem.prototype.applyPermissionsConstrain = function () {
var itemTlbrPerms = this.itemPermissions.itemToolbarPermissions;
var imagePermissions = this.getImagePermissions();
var allowChangeImage = imagePermissions != null ? imagePermissions.allowChangeImage : true;
var allowEditImage = imagePermissions != null ? imagePermissions.allowEditImage : false;
var 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;
}
}
}
};
Object.defineProperty(PlaceholderItem.prototype, "contentPermissions", {
get: function () {
return this._contentPermissions;
},
set: function (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();
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItem.prototype, "placeholderPermissions", {
get: function () {
return this._placeholderPermissions;
},
set: function (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");
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItem.prototype, "violationSettings", {
get: function () {
return this._violationSettings;
},
set: function (value) {
this._setViolationSettings(value);
},
enumerable: true,
configurable: true
});
PlaceholderItem.prototype._setViolationSettings = function (value, skipTypeCheck) {
if (skipTypeCheck === void 0) { skipTypeCheck = false; }
if (!skipTypeCheck && !(value instanceof ImageViolationSettings))
throw new ArgumentException("Shape ViolationSettings property must has ImageViolationSettings type!");
_super.prototype._setViolationSettings.call(this, value, skipTypeCheck);
};
Object.defineProperty(PlaceholderItem.prototype, "isFrame", {
get: function () {
return (this._topFrames != null && this._topFrames.length > 0)
|| (this._bottomFrames != null && this._bottomFrames.length > 0);
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItem.prototype, "content", {
get: function () {
return this._content;
},
set: function (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");
},
enumerable: true,
configurable: true
});
PlaceholderItem.prototype._setStubStorageMeta = function () {
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;
}
};
;
Object.defineProperty(PlaceholderItem.prototype, "topFrames", {
get: function () {
return this._topFrames;
},
set: function (value) {
var _this = this;
if (value == null)
throw new ArgumentException();
this._topFrames = value;
this._topFrames.forEach(function (contentItem) {
contentItem.parentPlaceholder = _this;
contentItem.parentContainer = null;
});
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItem.prototype, "bottomFrames", {
get: function () {
return this._bottomFrames;
},
set: function (value) {
var _this = this;
if (value == null)
throw new ArgumentException();
this._bottomFrames = value;
this._bottomFrames.forEach(function (contentItem) {
contentItem.parentPlaceholder = _this;
contentItem.parentContainer = null;
});
},
enumerable: true,
configurable: true
});
PlaceholderItem.prototype.updateContentAndFrames = function (func) {
if (this.content != null)
func(this.content);
if (this.topFrames != null) {
this.topFrames.forEach(function (contentItem) {
func(contentItem);
});
}
if (this.bottomFrames != null) {
this.bottomFrames.forEach(function (contentItem) {
func(contentItem);
});
}
};
Object.defineProperty(PlaceholderItem.prototype, "imageContent", {
get: function () {
if (!this.isEmptyContent && this.content instanceof ImageItem) {
return this._content;
}
else {
return null;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItem.prototype, "isEmptyContent", {
get: function () {
return this._content == null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItem.prototype, "isStubOrEmpty", {
get: function () {
return this.isStubContent || this.isEmptyContent;
},
enumerable: true,
configurable: true
});
PlaceholderItem.prototype._canSetIsVariable = function () {
return true;
};
Object.defineProperty(PlaceholderItem.prototype, "isBarcodePlaceholder", {
get: function () {
return this.barcodeFormat != null;
},
enumerable: true,
configurable: true
});
PlaceholderItem.prototype.getSimplifiedObject = function () {
var simplified = _super.prototype.getSimplifiedObject.call(this, [
"_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;
};
PlaceholderItem.prototype._copy = function (source, destination, generateNewIds, appropriateParentContainer) {
_super.prototype._copy.call(this, source, destination, generateNewIds, appropriateParentContainer);
destination.linkId = source.linkId;
destination.allowedSubfolder = source.allowedSubfolder;
destination.allowedTabs = source.allowedTabs != null ? source.allowedTabs.map(function (i) { return 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 (var 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(function (i) {
var cloned = i.clone(generateNewIds, appropriateParentContainer);
cloned.parentPlaceholder = destination;
return cloned;
});
}
if (source.bottomFrames.length === destination.bottomFrames.length) {
for (var 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(function (i) {
var 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;
};
PlaceholderItem.prototype.equals = function (other) {
return _super.prototype.equals.call(this, other) &&
arrayEquals(__spread([this._content], this._topFrames, this._bottomFrames), __spread([other._content], other._topFrames, other._bottomFrames)) &&
equals(this.linkId, other.linkId) &&
equals(this.allowedSubfolder, other.allowedSubfolder) &&
arrayEquals(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);
};
PlaceholderItem.prototype.clone = function (generateNewIds, appropriateParentContainer) {
if (generateNewIds === void 0) { generateNewIds = false; }
if (appropriateParentContainer === void 0) { appropriateParentContainer = false; }
var 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);
return PlaceholderItem;
}(ShapeItem));
export { PlaceholderItem };
//# sourceMappingURL=PlaceholderItem.js.map