@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.
595 lines • 26.1 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 { RectangleItem } from "./RectangleItem";
import { Color, RgbColors } from "../../Colors";
import { StrokeSettings } from "./StrokeSettings";
import { ShadowSettings } from "./ShadowSettings";
import { TextPermissions } from "./TextPermissions";
import { ArgumentException } from "../../Exception";
import { EqualsOfFloatNumbers } from "../../Math/index";
import { TextAlignment } from "./TextEnums";
import { EventWithSenderArg } from "../../EventObject";
import { Collection } from "../../Collection";
import { equals, isValidXml, isEqual } from "../../Utils/Utils";
import { Property } from "../Decorators/Property";
import { SimplePropertyFactory, ObjectPropertyFactory } from "../Decorators/Factory";
import { ModelComponent } from "../ModelComponent";
import { TextViolationSettings } from "./TextViolationSettings";
import { arraysIsEqual } from "@aurigma/utils-js/algorithms/array";
export class BaseTextItem extends RectangleItem {
constructor(text, fontPostScriptName, fontSize) {
super();
this._text = "";
this._originalText = "";
this._underline = false;
this._color = RgbColors.black;
this._alignment = TextAlignment.Left;
this._tracking = 0;
this._leading = 0;
this._checkTextCrop = true;
this._overlapLinesEnabled = false;
this._verticalScale = 1;
this._horizontalScale = 1;
this._stroke = null;
this._shadow = null;
this._previewScale = 1;
this._placeholders = new Collection();
this._displayText = null;
this._colorPalette = new Collection();
this._baselineShift = 0;
this._overprintText = false;
this.values = [];
this._characterLimit = null;
this._maxLineLength = null;
this._maxLineCount = null;
this.isTextPlaceholder = false;
this.textColorForAbnormalRendering = RgbColors.black;
this.type = BaseTextItem.type;
this._onFontPropertyChanged = (s, p) => {
this._propertyChanged.notify(this, "font");
};
this._onShadowPropertyChanged = (s, p) => {
this._propertyChanged.notify(this, "shadow");
};
this._onStrokePropertyChanged = (s, p) => {
this._propertyChanged.notify(this, "stroke");
};
this.borderWidth = 0;
this.fillColor = RgbColors.transparent;
this.text = (text != null) ? text : "";
this._font = new BaseTextItem.FontSettings(fontPostScriptName, (fontSize != null) ? fontSize : 10);
this._subscribeFontPropertyChanged();
this.textPermissions = new TextPermissions();
this._setViolationSettings(new TextViolationSettings(), true);
var textUpdatedFunc = () => {
this._displayText = null;
this._propertyChanged.notify(this, "text");
};
this._placeholders.add_itemAdded(data => data.item.addPropertyChanged(textUpdatedFunc));
this._placeholders.add_itemRemoved(data => data.item.removePropertyChanged(textUpdatedFunc));
this._ignorePermissionsChange = true;
this.itemPermissions.allowRemoveOnLayoutChange = true;
this.itemPermissions.itemToolbarPermissions.showEditButton = true;
this._ignorePermissionsChange = false;
}
get characterLimit() {
return this._characterLimit;
}
set characterLimit(value) {
if (EqualsOfFloatNumbers(this._characterLimit, value))
return;
this._characterLimit = value;
if (value != null)
this._propertyChanged.notify(this, "characterLimit");
}
get maxLineCount() {
return this._maxLineCount;
}
set maxLineCount(value) {
if (this._maxLineCount === value)
return;
this._maxLineCount = value;
this._displayText = null;
this._propertyChanged.notify(this, "maxLineCount");
}
get maxLineLength() {
return this._maxLineLength;
}
set maxLineLength(value) {
if (this._maxLineLength === value)
return;
this._maxLineLength = value;
this._displayText = null;
this._propertyChanged.notify(this, "maxLineLength");
}
get previewScale() { return this._previewScale; }
set previewScale(value) {
if (EqualsOfFloatNumbers(this._previewScale, value))
return;
this._previewScale = value;
this._propertyChanged.notify(this, "previewScale");
}
get stroke() {
return this._stroke;
}
set stroke(value) {
if (StrokeSettings.equals(this._stroke, value))
return;
this._unsubscribeStrokePropertyChanged();
this._stroke = value;
this._subscribeStrokePropertyChanged();
this._propertyChanged.notify(this, "stroke");
}
get shadow() {
return this._shadow;
}
set shadow(value) {
if (this._shadow == null && value == null || (value != null && value.equals(this._shadow)))
return;
this._unsubscribeShadowPropertyChanged();
this._shadow = value;
this._subscribeShadowPropertyChanged();
this._propertyChanged.notify(this, "shadow");
}
get horizontalScale() { return this._horizontalScale; }
set horizontalScale(value) {
if (EqualsOfFloatNumbers(this._horizontalScale, value))
return;
this._horizontalScale = value;
this._propertyChanged.notify(this, "horizontalScale");
}
get verticalScale() { return this._verticalScale; }
set verticalScale(value) {
if (EqualsOfFloatNumbers(this._verticalScale, value))
return;
this._verticalScale = value;
this._propertyChanged.notify(this, "verticalScale");
}
get checkTextCrop() { return this._checkTextCrop; }
set checkTextCrop(value) {
if (this._checkTextCrop === value)
return;
this._checkTextCrop = value;
this._propertyChanged.notify(this, "checkTextCrop");
}
get overlapLinesEnabled() { return this._overlapLinesEnabled; }
set overlapLinesEnabled(value) {
if (this._overlapLinesEnabled === value)
return;
this._overlapLinesEnabled = value;
this._propertyChanged.notify(this, "overlapLinesEnabled");
}
get alignment() { return this._alignment; }
set alignment(value) {
if (this._alignment === value)
return;
this._alignment = value;
this._propertyChanged.notify(this, "alignment");
}
get tracking() { return this._tracking; }
set tracking(value) {
if (EqualsOfFloatNumbers(this._tracking, value))
return;
this._tracking = value;
this._propertyChanged.notify(this, "tracking");
}
get leading() { return this._leading; }
set leading(value) {
if (EqualsOfFloatNumbers(this._leading, value))
return;
this._leading = value;
this._propertyChanged.notify(this, "leading");
}
get originalText() {
return this._originalText != null ? this._originalText : "";
}
set originalText(value) {
this._originalText = value;
}
get underline() { return this._underline; }
set underline(value) {
if (this._underline === value)
return;
this._underline = value;
this._propertyChanged.notify(this, "underline");
}
get font() {
return this._font;
}
set font(value) {
if (BaseTextItem.FontSettings.equals(this._font, value))
return;
this._unsubscribeFontPropertyChanged();
this._font = value;
this._subscribeFontPropertyChanged();
this._propertyChanged.notify(this, "font");
}
get text() {
if (this._displayText == null)
this._displayText = this.getUpdatedText(this._text);
this._text = this._displayText;
return this._text;
}
set text(value) {
if (this._text === value)
return;
this._text = value;
this._displayText = null;
this._propertyChanged.notify(this, "text");
}
get color() { return this._color; }
set color(value) {
if (Color.equals(this._color, value))
return;
this._color = value;
this._propertyChanged.notify(this, "color");
}
get baselineShift() { return this._baselineShift; }
set baselineShift(value) {
if (EqualsOfFloatNumbers(this._baselineShift, value))
return;
this._baselineShift = value;
this._propertyChanged.notify(this, "baselineShift");
}
get overprintText() { return this._overprintText; }
set overprintText(value) {
if (value == this._overprintText)
return;
this._overprintText = value;
this._propertyChanged.notify(this, "overprintText");
}
getUpdatedText(text) {
let updatedText = text;
if (this.placeholders.length > 0)
updatedText = this._replaceInStringPlaceholders();
return updatedText;
}
get placeholders() {
return this._placeholders;
}
get colorPalette() {
return this._colorPalette;
}
_canSetIsVariable() {
return true;
}
get previewFontSize() {
return this.font.size * this.previewScale;
}
set previewFontSize(value) {
this.font.size = value / this.previewScale;
}
get previewLeading() {
return this.leading * this.previewScale;
}
set previewLeading(value) {
this.leading = value / this.previewScale;
}
applyPermissionsConstrain() {
super.applyPermissionsConstrain();
this.itemPermissions.itemToolbarPermissions.showSelectButton = false;
if (this.textPermissions != null && !this.textPermissions.allowChangeText)
this.itemPermissions.itemToolbarPermissions.showEditButtonConstraint = false;
else
this.itemPermissions.itemToolbarPermissions.showEditButtonConstraint = null;
if (this.isRenderTypeIsNormal)
return;
this.textPermissions.allowChangeFontColor = false;
this.textPermissions.allowChangeShadow = false;
this.textPermissions.allowChangeStroke = false;
}
get textPermissions() { return this._textPermissions; }
set textPermissions(value) {
if (value == null)
throw new ArgumentException("textPermissions cannot be null");
if (equals(this._textPermissions, value))
return;
if (this._textPermissions != null)
this._textPermissions.propertyChanged.remove(this._onPermissionsChanged);
this._textPermissions = value;
this.applyPermissionsConstrain();
this._textPermissions.propertyChanged.add(this._onPermissionsChanged);
this._propertyChanged.notify(this, "textPermissions");
}
get violationSettings() { return this._violationSettings; }
set violationSettings(value) {
this._setViolationSettings(value);
}
_setViolationSettings(value, skipTypeCheck = false) {
if (!skipTypeCheck && !(value instanceof TextViolationSettings))
throw new ArgumentException("Shape ViolationSettings property must has TextViolationSettings type!");
super._setViolationSettings(value, skipTypeCheck);
}
_subscribeFontPropertyChanged() {
if (this._font != null)
this._font.addPropertyChanged(this._onFontPropertyChanged);
}
_unsubscribeFontPropertyChanged() {
if (this._font != null)
this._font.removePropertyChanged(this._onFontPropertyChanged);
}
_subscribeShadowPropertyChanged() {
if (this._shadow != null)
this._shadow.addPropertyChanged(this._onShadowPropertyChanged);
}
_unsubscribeShadowPropertyChanged() {
if (this._shadow != null)
this._shadow.removePropertyChanged(this._onShadowPropertyChanged);
}
_subscribeStrokePropertyChanged() {
if (this._stroke != null)
this._stroke.addPropertyChanged(this._onStrokePropertyChanged);
}
_unsubscribeStrokePropertyChanged() {
if (this._stroke != null)
this._stroke.removePropertyChanged(this._onStrokePropertyChanged);
}
getSimplifiedObject(omitProperties) {
var simplified = super.getSimplifiedObject(["_placeholders", "currentTextImage", "textPermissions", "textForTextWhizz", "shadow", "stroke"].concat(omitProperties));
simplified["placeholders"] = this.placeholders.toArray();
simplified["textPermissions"] = this.textPermissions.getSimplifiedObject();
simplified["font"] = this.font.getSimplifiedObject();
simplified["shadow"] = this.shadow != null ? this.shadow.getSimplifiedObject() : null;
simplified["stroke"] = this.stroke != null ? this.stroke.getSimplifiedObject() : null;
return simplified;
}
_replaceInStringPlaceholders() {
return isValidXml(this.originalText)
? this._replaceInStringPlaceholdersValueInRichText()
: this._replaceInStringPlaceholdersValueInPlainText();
}
_replaceInStringPlaceholdersValueInPlainText() {
var value = this.originalText;
this.placeholders.forEach((p) => {
value = value.replace(p.id, p.value === "" ? p.name : p.value);
});
return value;
}
_replaceInStringPlaceholdersValueInRichText() {
if (this._originalTextDom == null) {
const domParser = new DOMParser();
this._originalTextDom = domParser.parseFromString(`<xml>${this.originalText}</xml>`, "text/xml");
}
const xmlDom = this._originalTextDom.cloneNode(true);
var spans = xmlDom.getElementsByTagName("span");
this.placeholders.forEach((p) => {
if (spans != null && spans.length) {
for (let i = 0; i < spans.length; i++) {
const span = spans[i];
if (span.textContent != null) {
span.textContent = span.textContent.replace(p.id, p.value === "" ? p.name : p.value);
}
}
}
});
const serializer = new XMLSerializer();
const str = serializer.serializeToString(xmlDom);
return str.substr(0, str.length - 6).substr(5); // without <xml> and </xml>
}
_copy(source, destination, generateNewIds, appropriateParentContainer) {
super._copy(source, destination, generateNewIds, appropriateParentContainer);
destination.textPermissions = source._textPermissions.clone();
destination.placeholders.setRange(source.placeholders.toArray().map(p => p.clone()));
destination.color = source._color.clone();
destination.text = source._text;
destination.font = source._font.clone();
destination.underline = source._underline;
destination.originalText = source._originalText;
destination.leading = source._leading;
destination.tracking = source._tracking;
destination.alignment = source._alignment;
destination.checkTextCrop = source._checkTextCrop;
destination.verticalScale = source._verticalScale;
destination.horizontalScale = source._horizontalScale;
destination.shadow = source._shadow != null ? source._shadow.clone() : null;
destination.stroke = source._stroke != null ? source._stroke.clone() : null;
destination.previewScale = source._previewScale;
destination._maxLineCount = source._maxLineCount;
destination.isTextPlaceholder = source.isTextPlaceholder;
destination.maxLineLength = source.maxLineLength;
destination.overlapLinesEnabled = source.overlapLinesEnabled;
destination.colorPalette.setRange(source.colorPalette.toArray().map(c => c.clone()));
destination.baselineShift = source.baselineShift;
destination.overprintText = source.overprintText;
destination.listStyles = source.listStyles;
destination.characterLimit = source.characterLimit;
if (source.values != null) {
destination.values = [];
for (var i of source.values) {
destination.values.push(i.clone());
}
}
}
equals(other) {
const superEq = super.equals(other);
const textPermissionsEq = equals(this._textPermissions, other._textPermissions);
const placeholdersEq = arraysIsEqual(this._placeholders.toArray(), other._placeholders.toArray(), equals);
const colorEq = equals(this._color, other._color);
const textEq = equals(this._text, other._text);
const fontEq = equals(this._font, other._font);
const underlineEq = equals(this._underline, other._underline);
const originalTextEq = equals(this._originalText, other._originalText);
const leadingEq = equals(this._leading, other._leading);
const trackingEq = equals(this._tracking, other._tracking);
const alignmentEq = equals(this._alignment, other._alignment);
const checkTextCropEq = equals(this._checkTextCrop, other._checkTextCrop);
const verticalScaleEq = equals(this._verticalScale, other._verticalScale);
const previewScaleEq = equals(this._previewScale, other._previewScale);
const maxLineCountEq = equals(this._maxLineCount, other._maxLineCount);
const isTextPlaceholderEq = equals(this.isTextPlaceholder, other.isTextPlaceholder);
const maxLineLengthEq = equals(this._maxLineLength, other._maxLineLength);
const overlapLinesEnabledEq = equals(this._overlapLinesEnabled, other._overlapLinesEnabled);
const strokeEq = equals(this._stroke, other._stroke);
const valuesEq = arraysIsEqual(this.values, other.values, equals);
const colorPaletteEq = arraysIsEqual(this._colorPalette.toArray(), other._colorPalette.toArray(), equals);
const baselineShiftEq = equals(this._baselineShift, other._baselineShift);
const overprintTextEq = equals(this._overprintText, other._overprintText);
const listStylesEq = equals(this.listStyles, other.listStyles);
const characterLimitEq = equals(this.characterLimit, other.characterLimit);
return superEq && textPermissionsEq && placeholdersEq && colorEq && textEq && fontEq && underlineEq && originalTextEq && leadingEq
&& trackingEq && alignmentEq && checkTextCropEq && verticalScaleEq && previewScaleEq && maxLineCountEq && isTextPlaceholderEq
&& maxLineLengthEq && overlapLinesEnabledEq && strokeEq && valuesEq && colorPaletteEq && baselineShiftEq && overprintTextEq
&& listStylesEq && characterLimitEq;
}
isEmptyText() {
return this.text === "";
}
isEmptyXmlText() {
return this.text === "<p></p>" || this.text === "<p><span></span></p>";
}
isEmpty() {
return !this.isTextPlaceholder && (this.isEmptyText() || this.isEmptyXmlText());
}
}
BaseTextItem.type = "baseText";
__decorate([
Property({ factory: new SimplePropertyFactory(50), displayName: "Character Limit" }),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], BaseTextItem.prototype, "characterLimit", null);
__decorate([
Property({ factory: new SimplePropertyFactory(1), displayName: "Max line count" }),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], BaseTextItem.prototype, "maxLineCount", null);
__decorate([
Property({ factory: new SimplePropertyFactory(50), displayName: "Max line length" }),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], BaseTextItem.prototype, "maxLineLength", null);
__decorate([
Property({ factory: new ObjectPropertyFactory(StrokeSettings), displayName: "Stroke" }),
__metadata("design:type", StrokeSettings),
__metadata("design:paramtypes", [StrokeSettings])
], BaseTextItem.prototype, "stroke", null);
__decorate([
Property({ factory: new ObjectPropertyFactory(ShadowSettings), displayName: "Shadow" }),
__metadata("design:type", ShadowSettings),
__metadata("design:paramtypes", [ShadowSettings])
], BaseTextItem.prototype, "shadow", null);
__decorate([
Property({ enumObject: TextAlignment }),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], BaseTextItem.prototype, "alignment", null);
__decorate([
Property({ type: "string" }),
__metadata("design:type", String)
], BaseTextItem.prototype, "listStyles", void 0);
(function (BaseTextItem) {
class FontSettings extends ModelComponent {
constructor(postScriptName, size = 10) {
super();
this._fauxBold = false;
this._fauxItalic = false;
this._allCaps = false;
this._openTypeFeatures = [];
this.$_propertyChanged = new EventWithSenderArg();
this._postScriptName = postScriptName;
this._size = size;
}
clone() {
const cloneSettings = new FontSettings(this._postScriptName, this._size);
cloneSettings._openTypeFeatures = structuredClone(this._openTypeFeatures);
cloneSettings.allCaps = this._allCaps;
cloneSettings.fauxItalic = this._fauxItalic;
cloneSettings.fauxBold = this._fauxBold;
return cloneSettings;
}
get fauxBold() { return this._fauxBold; }
set fauxBold(value) {
if (this._fauxBold === value)
return;
this._fauxBold = value;
this.$_propertyChanged.notify(this, "fauxBold");
}
get fauxItalic() { return this._fauxItalic; }
set fauxItalic(value) {
if (this._fauxItalic === value)
return;
this._fauxItalic = value;
this.$_propertyChanged.notify(this, "fauxItalic");
}
get allCaps() { return this._allCaps; }
set allCaps(value) {
if (this._allCaps === value)
return;
this._allCaps = value;
this.$_propertyChanged.notify(this, "allCaps");
}
get openTypeFeatures() { return this._openTypeFeatures; }
set openTypeFeatures(value) {
if (this._openTypeFeatures === value)
return;
this._openTypeFeatures = value;
this.$_propertyChanged.notify(this, "openTypeFeatures");
}
get postScriptName() { return this._postScriptName; }
set postScriptName(value) {
if (this._postScriptName === value)
return;
this._postScriptName = value;
this.$_propertyChanged.notify(this, "postScriptName");
}
get size() { return this._size; }
set size(value) {
if (EqualsOfFloatNumbers(this._size, value))
return;
this._size = value;
this.$_propertyChanged.notify(this, "size");
}
addPropertyChanged(listener) {
this.$_propertyChanged.add(listener);
}
removePropertyChanged(listener) {
this.$_propertyChanged.remove(listener);
}
static equals(a, b) {
if (a == null && b == null)
return true;
if (a == null || b == null)
return false;
return a.equals(b);
}
equals(other) {
return this.postScriptName === other.postScriptName &&
this.size === other.size &&
this.fauxBold === other.fauxBold &&
this.fauxItalic === other.fauxItalic &&
this.allCaps === other.allCaps &&
isEqual(this.openTypeFeatures, other.openTypeFeatures);
}
getSimplifiedObject() {
return {
"allCaps": this.allCaps,
"fauxBold": this.fauxBold,
"fauxItalic": this.fauxItalic,
"openTypeFeatures": this.openTypeFeatures,
"postScriptName": this.postScriptName,
"size": this.size
};
}
}
BaseTextItem.FontSettings = FontSettings;
class BaseTextValue {
constructor(name, text) {
this.name = name;
this.text = text;
}
equals(other) {
return other != null &&
equals(this.name, other.name) &&
equals(this.text, other.text);
}
clone() { return new BaseTextValue(this.name, this.text); }
}
BaseTextItem.BaseTextValue = BaseTextValue;
})(BaseTextItem || (BaseTextItem = {}));
//# sourceMappingURL=BaseTextItem.js.map