@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
555 lines • 26 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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
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 { TextAlignment } from "@aurigma/design-atoms-model/Product/Items";
import { RectangleItemHandler } from "./RectangleItemHandler";
import { BaseTextHandlerData } from "./BaseTextHandlerData";
import { ImageContainer } from "./ImageContainer";
import { Graphics } from "../Graphics";
import { TextRenderer } from "../InPlace/TextRenderer";
import * as Utils from "@aurigma/design-atoms-model/Utils/Utils";
import { Path, Transform } from "@aurigma/design-atoms-model";
var BaseTextItemHandler = /** @class */ (function (_super) {
__extends(BaseTextItemHandler, _super);
function BaseTextItemHandler(item, textWhizz, apiClient, colorPreviewService) {
if (textWhizz === void 0) { textWhizz = null; }
var _this = _super.call(this, item, textWhizz, apiClient, colorPreviewService) || this;
_this._defaultWidth = 10;
_this._currentTextImage = null;
_this._onCanvasChangedDelegate = null;
_this._updatedFromServer = false;
_this._isLegacyTextEditor = false;
_this._isUpdatingAfterResize = false;
_this._height = 0;
_this._updateTextsFunc = function () {
if (_this.canvas != null)
_this.canvas.updateTexts();
};
_this._imageContainer = new ImageContainer(_this._onImageLoaded.bind(_this));
_this._allowNegativeResize = false;
return _this;
}
Object.defineProperty(BaseTextItemHandler.prototype, "item", {
get: function () {
return this._getItem();
},
set: function (item) {
_super.prototype._setItem.call(this, item);
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseTextItemHandler.prototype, "isLegacyTextEditor", {
get: function () {
return this._isLegacyTextEditor;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseTextItemHandler.prototype, "currentTextImage", {
get: function () {
return this._currentTextImage != null
? this._currentTextImage
: (this._currentTextImage = new TextImageData());
},
set: function (value) {
var _a, _b, _c;
var oldCacheFileId = (_a = this._currentTextImage) === null || _a === void 0 ? void 0 : _a.cacheFileId;
var newCacheFileId = value === null || value === void 0 ? void 0 : value.cacheFileId;
if (oldCacheFileId && oldCacheFileId != newCacheFileId)
(_b = this.imageLoaderService) === null || _b === void 0 ? void 0 : _b.releaseImageContainerFor(oldCacheFileId, this.uniqueId);
this._currentTextImage = value;
if (newCacheFileId && oldCacheFileId != newCacheFileId)
(_c = this.imageLoaderService) === null || _c === void 0 ? void 0 : _c.lockImageContainerFor(newCacheFileId, this.uniqueId);
this._height = this.rectangle.height;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseTextItemHandler.prototype, "textCropped", {
get: function () {
if (!this.item.checkTextCrop)
return null;
return this.currentTextImage != null && this.currentTextImage.textCropped;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseTextItemHandler.prototype, "isUpdatingAfterResize", {
get: function () {
return this._isUpdatingAfterResize;
},
set: function (value) {
this._isUpdatingAfterResize = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(BaseTextItemHandler.prototype, "colorSettings", {
get: function () {
var _a, _b, _c, _d, _e, _f, _g, _h;
return {
rgbColorProfileName: (_b = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.renderingConfigProvider.getRgbColorProfileName()) !== null && _b !== void 0 ? _b : '',
cmykColorProfileName: (_d = (_c = this.canvas) === null || _c === void 0 ? void 0 : _c.renderingConfigProvider.getCmykColorProfileName()) !== null && _d !== void 0 ? _d : '',
grayscaleColorProfileName: (_f = (_e = this.canvas) === null || _e === void 0 ? void 0 : _e.renderingConfigProvider.getGrayscaleColorProfileName()) !== null && _f !== void 0 ? _f : '',
hiResDestinationColorProfileName: (_h = (_g = this.canvas) === null || _g === void 0 ? void 0 : _g.renderingConfigProvider.getHiResDestinationColorProfileName()) !== null && _h !== void 0 ? _h : ''
};
},
enumerable: true,
configurable: true
});
BaseTextItemHandler.prototype.isEmptyTextPlaceholder = function () {
return this.item.isTextPlaceholder && this.item.text === "";
};
BaseTextItemHandler.prototype._cropTextLimits = function () {
var _a, _b;
var text = this._getText();
var updatedText = text;
var maxLineCount = (_a = this.item.maxLineCount) !== null && _a !== void 0 ? _a : 0;
var maxLineLength = (_b = this.item.maxLineLength) !== null && _b !== void 0 ? _b : 0;
if (maxLineCount > 0 || maxLineLength > 0) {
if (Utils.isValidXml(updatedText))
updatedText = Utils.getTextFromXml(text, "\n");
var textLines = updatedText.split("\n");
if (maxLineCount > 0) {
if (textLines.length > maxLineCount) {
textLines = textLines.splice(0, maxLineCount);
}
}
if (maxLineLength > 0) {
for (var i = 0; i < textLines.length; i++) {
if (textLines[i].length > maxLineLength) {
textLines[i] = textLines[i].substr(0, maxLineLength);
}
}
}
var result = textLines.join("\n");
if (text != result)
this.item.text = result;
}
};
BaseTextItemHandler.prototype.drawItemHandler = function (itemHandlerCtx) {
if (itemHandlerCtx == null || this.canvas == null)
return;
if (this._getText() === "")
return;
if (!this._isReadyToDraw) {
this.canvas.drawWaitClock(itemHandlerCtx, this.rectangle.center);
return;
}
if (this._hasVectorMask()) {
itemHandlerCtx.save();
this._clip(itemHandlerCtx);
}
var item = this.item;
var rectangle = this.rectangle;
var opacityMultiplier = this.isEmptyTextPlaceholder() ? 0.5 : 1;
var _a = this._getItemColorPreviews(), fillColorPreview = _a.fillColorPreview, borderColorPreview = _a.borderColorPreview, altBorderColorPreview = _a.altBorderColorPreview;
Graphics.fillRectangle(itemHandlerCtx, rectangle, fillColorPreview === null || fillColorPreview === void 0 ? void 0 : fillColorPreview.toString(), item.opacity * opacityMultiplier);
if (this._updatedFromServer === true) {
try {
var combinedImageContainer = this.canvas.service.imageLoaderService.getImageContainerFor(this.currentTextImage.cacheFileId);
if (combinedImageContainer != null) {
var combinedImageRectangle = this.canvas.service.imageLoaderService.getImageContainerRectangleFor(this.currentTextImage.cacheFileId);
TextRenderer.renderTextImage(this, combinedImageContainer, combinedImageRectangle, itemHandlerCtx, opacityMultiplier, 0);
}
else {
TextRenderer.renderTextImage(this, this._imageContainer, null, itemHandlerCtx, opacityMultiplier, 0);
}
}
catch (e) {
console.error(e);
this.update();
}
}
var borderWidth = this._getActualBorderWidth();
if (borderWidth > 0) {
rectangle.width += borderWidth;
rectangle.height += borderWidth;
var path = Path.rotatedRectangle(rectangle);
Graphics.drawStroke(itemHandlerCtx, path, rectangle.center, new Transform(), borderWidth, borderColorPreview === null || borderColorPreview === void 0 ? void 0 : borderColorPreview.toString(), altBorderColorPreview === null || altBorderColorPreview === void 0 ? void 0 : altBorderColorPreview.toString(), item.opacity * opacityMultiplier, item.dash);
}
if (this._hasVectorMask())
itemHandlerCtx.restore();
};
BaseTextItemHandler.prototype.onResized = function () {
if (this.canvas != null)
this.isUpdatingAfterResize = true;
return _super.prototype.onResized.call(this);
};
BaseTextItemHandler.prototype.isEmpty = function () {
return this.item.isEmpty();
};
BaseTextItemHandler.prototype.isVisible = function () {
var p1 = this.item.parentGroupItem == null;
var fromParentVisibility = p1 || this.item.parentGroupItem.isChildVisible(this.item);
return _super.prototype.isVisible.call(this) && fromParentVisibility;
};
BaseTextItemHandler.prototype.quickUpdate = function () {
this._updateImageUrl();
if (this.isVisible() &&
!this._imageContainer.source &&
this.canvas &&
!this.canvas.service.imageLoaderService.hasImageContainerFor(this.currentTextImage.cacheFileId)) {
this.update();
}
};
BaseTextItemHandler.prototype.transformChanged = function () {
var _this = this;
_super.prototype.transformChanged.call(this);
if (this.isUpdating && this._callbacks) {
var t = this.item.transform.clone();
var beforeUpdate = function () {
_this.item.setTransform(t, true);
};
this._callbacks.push(beforeUpdate);
}
};
BaseTextItemHandler.prototype._endTransform = function (changed, resized) {
_super.prototype._endTransform.call(this, changed, resized);
if (!changed)
return;
if (resized)
this.update();
};
BaseTextItemHandler.prototype._getColors = function () {
var _a;
return __spread([this.item.color], (_a = this.item.colorPalette) === null || _a === void 0 ? void 0 : _a.toArray(), _super.prototype._getColors.call(this));
};
BaseTextItemHandler.prototype.dispose = function () {
this._imageContainer.dispose();
if (this._onCanvasChangedDelegate != null) {
if (this.canvas != null)
this.canvas.remove_zoomChanged(this._onCanvasChangedDelegate);
delete this._onCanvasChangedDelegate;
}
this.currentTextImage = null;
_super.prototype.dispose.call(this);
};
BaseTextItemHandler.prototype._isReady = function () {
return _super.prototype._isReady.call(this) && this._imageContainer.isLoaded;
};
BaseTextItemHandler.prototype._updateImpl = function (beforeUpdate, afterUpdate) {
return __awaiter(this, void 0, void 0, function () {
var afterTextUpdate;
var _this = this;
return __generator(this, function (_a) {
if (this.isVisible()) {
afterTextUpdate = function () { _this._afterUpdate(afterUpdate); };
this._update(null, beforeUpdate, afterTextUpdate);
}
else if (typeof beforeUpdate == "function") {
beforeUpdate();
}
return [2 /*return*/];
});
});
};
BaseTextItemHandler.prototype._validateBeforeCallService = function () {
return this._getText() !== "";
};
BaseTextItemHandler.prototype._onValidateBeforeCallServiceFailed = function () {
if (!this._getSrc())
this._updateEmptyTextControlPoints();
else
this._setDefaultTextControlPoints();
};
BaseTextItemHandler.prototype._updateEmptyTextControlPoints = function () {
var _this = this;
var originalText = null;
var success = function (data) {
if (_this.item == null)
return;
var item = null;
if (typeof data == "object") {
item = data.item;
data = data.itemHandlerData;
}
if (item != null) {
item.text = originalText;
_this._applyDataItem(item, data);
}
_this.setData(data);
var canvas = _this.canvas;
if (canvas != null) {
canvas.updateSelection();
canvas.redraw();
}
_this.onSuccessResponse();
_this._setIsImageLoaded(true);
};
var failure = function (error) {
_this.onErrorResponse(error);
};
var itemHandlerData = this._createDataInstance(this);
var serializedItem = JSON.parse(this._getDataItem());
originalText = serializedItem.text;
//Send some text to the server to define controlPoints.
serializedItem.text = 'a';
var data = [JSON.stringify(itemHandlerData), serializedItem, this.colorSettings];
_super.prototype._callService.call(this, "Update" + this.getTypeName(), data, success, failure, null);
};
BaseTextItemHandler.prototype._setDefaultTextControlPoints = function () {
var alignment = this.item.alignment;
if (alignment === TextAlignment.Center) {
this._controlPoints[0].x += (this._controlPoints[1].x - this._controlPoints[0].x) / 2 - (this._defaultWidth / 2);
}
else if (alignment === TextAlignment.Right) {
this._controlPoints[0].x = this._controlPoints[1].x - this._defaultWidth;
}
this._controlPoints[1].x = this._controlPoints[0].x + this._defaultWidth;
this.raiseChanged();
var canvas = this.canvas;
if (canvas != null) {
canvas.updateSelection();
canvas.redraw();
}
this.onSuccessResponse();
};
BaseTextItemHandler.prototype._isLoadingImage = function () {
return this._imageContainer.isLoading;
};
BaseTextItemHandler.prototype._setIsLoadingImage = function (value) {
this._imageContainer.isLoading = value;
};
BaseTextItemHandler.prototype._setIsImageLoaded = function (value) {
this._imageContainer.isLoaded = value;
};
BaseTextItemHandler.prototype._getBoundsMargin = function () {
return this._getActualBorderWidth() * 2;
};
BaseTextItemHandler.prototype._createDataInstance = function (itemHandler) {
return new BaseTextHandlerData(itemHandler);
};
BaseTextItemHandler.prototype._onItemPropertyChanged = function (sender, propertyName) {
switch (propertyName) {
case "text":
if (this._isLegacyTextEditor)
this._cropTextLimits();
this.update(null, this._updateTextsFunc);
break;
case "font":
this.update(null, this._updateTextsFunc);
break;
case "underline":
case "color":
case "alignment":
case "leading":
case "tracking":
case "verticalScale":
case "horizontalScale":
case "previewScale":
case "stroke":
case "shadow":
case "baselineShift":
case "overlapLinesEnabled":
case "characterLimit":
case "maxLineCount":
case "maxLineLength":
this.update();
break;
case "checkTextCrop":
if (sender.checkTextCrop)
this.update();
break;
default:
}
_super.prototype._onItemPropertyChanged.call(this, sender, propertyName);
};
BaseTextItemHandler.prototype._setDataItem = function (itemData, itemHandlerData) {
_super.prototype._setDataItem.call(this, itemData, itemHandlerData);
this.item.text = itemData.text;
this.item.font = itemData.font;
this.item.leading = itemData.leading;
this.item.color = itemData.color;
this.item.stroke = itemData.stroke;
this.item.shadow = itemData.shadow;
this.item.verticalScale = itemData.verticalScale;
this.item.horizontalScale = itemData.horizontalScale;
this.item.previewScale = itemData.previewScale;
this.item.mask = itemData.mask;
this.item.baselineShift = itemData.baselineShift;
this._updateVectorMaskCenter();
};
BaseTextItemHandler.prototype._getSrc = function () {
var src = this._imageContainer.source;
return !Utils.isNullOrEmptyOrWhiteSpace(src) ? src : this._createImageUrl();
};
BaseTextItemHandler.prototype._onAddedOnCanvas = function (canvas, supressUpdate) {
_super.prototype._onAddedOnCanvas.call(this, canvas, supressUpdate);
if (canvas.textEditor == null) {
this._isLegacyTextEditor = true;
this._cropTextLimits();
}
if (this.canvas != null && !this._onCanvasChangedDelegate) {
this._onCanvasChangedDelegate = this._onCanvasChanged.bind(this);
this.canvas.add_zoomChanged(this._onCanvasChangedDelegate);
}
};
BaseTextItemHandler.prototype._onRemovedFromCanvas = function (canvas) {
_super.prototype._onRemovedFromCanvas.call(this, canvas);
if (canvas && this._onCanvasChangedDelegate != null) {
canvas.remove_zoomChanged(this._onCanvasChangedDelegate);
delete this._onCanvasChangedDelegate;
}
};
BaseTextItemHandler.prototype._getText = function () {
var text = this.isEmptyTextPlaceholder() ? this.item.originalText : this.item.text;
return Utils.isValidXml(text) ? this._xmlToHtml(text).textContent.trim() : text.trim();
};
BaseTextItemHandler.prototype._createImageUrl = function () {
var cv = this.canvas;
if (cv == null)
return null;
if (this.canvas.service.imageLoaderService.hasImageContainerFor(this.currentTextImage.cacheFileId))
return null;
if ((this.currentTextImage.cacheFileId == null || this.currentTextImage.cacheFileId.length === 0)
&& (this.currentTextImage.base64Image == null || this.currentTextImage.base64Image.length === 0))
return null;
if (this.currentTextImage && this.currentTextImage.base64Image) {
return 'data:image/png;base64,' + this.currentTextImage.base64Image;
}
return this._apiClient.serviceEndpoint + "/txt?" + "f=" + encodeURIComponent(this.currentTextImage.cacheFileId);
};
BaseTextItemHandler.prototype._updateImageUrl = function () {
if (this._getText() === "")
return;
if (!this.isVisible())
return;
var cv = this.canvas;
if (cv == null || !cv.isInitialized)
return;
var url = this._createImageUrl();
//console.trace(`_updateImageUrl _createImageUrl ${url}`);
if (this._imageContainer.source != null && url === this._imageContainer.source) {
if (this.isUpdatingAfterResize === true) {
this.isUpdatingAfterResize = false;
cv.redraw();
}
return;
}
if (url === null) {
this._imageContainer.clear();
cv.redraw();
}
else {
this._imageContainer.updateUrl(url);
}
};
BaseTextItemHandler.prototype._afterUpdate = function (afterUpdate) {
var _a;
if (typeof afterUpdate == "function")
afterUpdate();
if (!this._updatedFromServer)
(_a = this.canvas) === null || _a === void 0 ? void 0 : _a.updateViolationContainerPosition(this);
this._updatedFromServer = true;
if (this.canvas != null) {
this.canvas.updateSelection();
this.canvas.redrawDesign();
}
};
BaseTextItemHandler.prototype._xmlToHtml = function (xml) {
var body = new DOMParser()
.parseFromString("<body>" + xml + "</body>", "text/html")
.getElementsByTagName("body")[0];
return body;
};
BaseTextItemHandler.prototype._onImageLoaded = function () {
this.isUpdatingAfterResize = false;
this._height = this.rectangle.height;
if (this.canvas != null)
this.canvas.redraw();
this._dispatchReadyEvent();
};
BaseTextItemHandler.prototype._onCanvasChanged = function (args) {
if (args.fullUpdate)
this.update();
};
Object.defineProperty(BaseTextItemHandler.prototype, "imageLoaderService", {
get: function () {
var _a, _b;
return (_b = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.service) === null || _b === void 0 ? void 0 : _b.imageLoaderService;
},
enumerable: true,
configurable: true
});
BaseTextItemHandler.typeName = "BaseTextItemHandler";
return BaseTextItemHandler;
}(RectangleItemHandler));
export { BaseTextItemHandler };
var TextImageData = /** @class */ (function () {
function TextImageData() {
this.cacheFileId = null;
this.base64Image = null;
this.textCropped = null;
}
return TextImageData;
}());
export { TextImageData };
//# sourceMappingURL=BaseTextItemHandler.js.map