@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
490 lines • 25.6 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 };
}
};
import { EventWithSenderArg } from "@aurigma/design-atoms-model/EventObject";
import { ContentItemHandler } from "./ContentItemHandler";
import { ImageHandlerData } from "./ImageHandlerData";
import { ImageItem, ImageEffect, ResizeGripsPermissions } from "@aurigma/design-atoms-model/Product/Items";
import { ImageUtils } from "../Utils/ImageUtils";
import Environment from "@aurigma/design-atoms-model/Utils/Environment";
import { ColorLessContainer, RgbColors } from "@aurigma/design-atoms-model";
import { EffectHandler } from "./EffectHandler";
export { ImageEffect };
var ImageItemHandler = /** @class */ (function (_super) {
__extends(ImageItemHandler, _super);
function ImageItemHandler(item, textWhizz, apiClient, colorPreviewService) {
if (textWhizz === void 0) { textWhizz = null; }
var _this = _super.call(this, item, textWhizz, apiClient, colorPreviewService) || this;
_this._maxImageSize = 2000 * 2000;
_this._imageResizedEvent = new EventWithSenderArg();
_this._qualityChangeContainer = null;
_this._qualityChangeScaleBar = null;
_this._qualityChangeInfoBar = null;
if (_this.item.source.type === ImageItem.ImageSourceType.Url)
_this.loadImage(null, { downloadToServerCache: true, actualSize: _this.item.source.actualSize, saveAspectRatio: _this.item.source.saveAspectRatio });
return _this;
}
Object.defineProperty(ImageItemHandler.prototype, "item", {
get: function () {
return this._getItem();
},
set: function (item) {
_super.prototype._setItem.call(this, item);
},
enumerable: true,
configurable: true
});
Object.defineProperty(ImageItemHandler.prototype, "needToDownloadImage", {
get: function () {
return this._needToDownloadImage;
},
set: function (v) {
this._needToDownloadImage = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ImageItemHandler.prototype, "takeIntoAccountImageDpi", {
get: function () {
return this._takeIntoAccountImageDpi;
},
set: function (v) {
this._takeIntoAccountImageDpi = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ImageItemHandler.prototype, "sourceImageHorizontalResolution", {
get: function () {
return this._sourceImageHorizontalResolution;
},
set: function (value) {
this._sourceImageHorizontalResolution = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ImageItemHandler.prototype, "sourceImageVerticalResolution", {
get: function () {
return this._sourceImageVerticalResolution;
},
set: function (value) {
this._sourceImageVerticalResolution = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ImageItemHandler.prototype, "qualityChangeScaleBar", {
get: function () {
return this._qualityChangeScaleBar;
},
set: function (v) {
this._qualityChangeScaleBar = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ImageItemHandler.prototype, "qualityChangeInfoBar", {
get: function () {
return this._qualityChangeInfoBar;
},
set: function (v) {
this._qualityChangeInfoBar = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ImageItemHandler.prototype, "qualityChangeContainer", {
get: function () {
return this._qualityChangeContainer;
},
set: function (v) {
this._qualityChangeContainer = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(ImageItemHandler.prototype, "isQualityChangeBarEmpty", {
get: function () {
var canvas = this.canvas;
if (this._qualityChangeScaleBar == null || canvas == null)
return true;
if (this._qualityChangeScaleBar.className === this.canvas.qualityChangeScaleBarCssClass)
return true;
return false;
},
enumerable: true,
configurable: true
});
/**
* Loads an image from the external source using the specified parameters.
* @param sourceUrl The URL to load image from.
* @param options.actualSize specifies whether a size of the image item should be same as a size of loaded image
* @param options.saveAspectRatio specifies whether to decrease width or height of the ImageItemHandler to save aspect ratio of loaded image.
* @param options.downloadToServerCache specifies whether the bitmap should be loaded to the private cache
* @returns storage id of loaded image
*/
ImageItemHandler.prototype.loadImage = function (sourceUrl, options) {
if (options === void 0) { options = {}; }
return __awaiter(this, void 0, void 0, function () {
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (typeof sourceUrl != "string" && this.item.source.type !== ImageItem.ImageSourceType.Url)
console.error("Invalid sourceUrl: " + sourceUrl);
if (!options.downloadToServerCache) return [3 /*break*/, 2];
this._needToDownloadImage = true;
this._actualSize = options.actualSize != null ? options.actualSize : false;
this._saveAspectRatio = options.saveAspectRatio != null ? options.saveAspectRatio : true;
this._sourceUrl = sourceUrl;
if (sourceUrl == null) {
this._sourceUrl = this.item.source.url;
}
return [4 /*yield*/, new Promise(function (resolve) { return _this.update(null, resolve); })];
case 1:
_a.sent();
return [3 /*break*/, 3];
case 2:
this._needToDownloadImage = false;
this._setSrc(sourceUrl);
_a.label = 3;
case 3: return [2 /*return*/, this.item.source.id];
}
});
});
};
ImageItemHandler.prototype.loadImageFromRemoteUrl = function (remoteUrl, appDomainUrl) {
if (appDomainUrl === void 0) { appDomainUrl = undefined; }
return __awaiter(this, void 0, void 0, function () {
var imageData;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this._apiClient.getImageMetaDataFromRemoteUrl(remoteUrl, appDomainUrl)];
case 1:
imageData = _a.sent();
this.item.source.id = imageData.storageId;
this.item.source.width = imageData.size.width;
this.item.source.height = imageData.size.height;
this.item.source.isVector = imageData.isVector;
this.item.name = imageData.name;
this.item.sourceRectangle.width = this.item.source.width;
this.item.sourceRectangle.height = this.item.source.height;
return [2 /*return*/];
}
});
});
};
ImageItemHandler.prototype.showEditButton = function () {
var baseValue = _super.prototype.showEditToolbarButton.call(this);
return baseValue && !this.item.source.isVector;
};
ImageItemHandler.prototype.addImageResized = function (handler) {
this._imageResizedEvent.add(handler);
};
ImageItemHandler.prototype.removeImageResized = function (handler) {
this._imageResizedEvent.remove(handler);
};
ImageItemHandler.prototype.onResized = function () {
var r = this.rectangle;
this._imageResizedEvent.notify(this, { Width: r.width, Height: r.height });
this.update();
return _super.prototype.onResized.call(this);
};
ImageItemHandler.prototype.setQualityChangeScaleBarWidth = function (progress) {
if (this._qualityChangeScaleBar == null)
return;
progress = Math.max(0, progress);
progress = Math.min(100, progress);
this._qualityChangeScaleBar.style.width = progress + "%";
};
ImageItemHandler.prototype.setQualityChangeInfoBarText = function (value) {
if (this._qualityChangeInfoBar == null)
return;
this._qualityChangeInfoBar.innerText = value;
};
ImageItemHandler.prototype.setBadToWarningChangeScaleBarClass = function () {
var canvas = this.canvas;
if (this._qualityChangeScaleBar == null || canvas == null)
return;
var oldClass = this._qualityChangeScaleBar.getAttribute("class");
var btwClassName = canvas.qualityBadToWarningChangeScaleBarCssClass;
if (btwClassName != null && btwClassName !== "")
this._qualityChangeScaleBar.classList.toggle(btwClassName, true);
var wtgClassName = canvas.qualityWarningToGoodChangeScaleBarCssClass;
if (wtgClassName != null && wtgClassName !== "")
this._qualityChangeScaleBar.classList.toggle(wtgClassName, false);
var btgwtgClassName = canvas.qualityBadToGoodChangeScaleBarCssClass;
if (btgwtgClassName != null && btgwtgClassName !== "")
this._qualityChangeScaleBar.classList.toggle(btgwtgClassName, false);
var naClassName = canvas.qualityNoAnimationChangeScaleBarCssClass;
if (naClassName != null && naClassName !== "")
this._qualityChangeScaleBar.classList.toggle(naClassName, this._qualityChangeScaleBar.getAttribute("class") !== oldClass);
this.canvas.updateViolationContainer(this);
};
ImageItemHandler.prototype.setWarningToGoodChangeScaleBarClass = function () {
var canvas = this.canvas;
if (this._qualityChangeScaleBar == null || canvas == null)
return;
var oldClass = this._qualityChangeScaleBar.getAttribute("class");
var wtgClassName = canvas.qualityWarningToGoodChangeScaleBarCssClass;
if (wtgClassName != null && wtgClassName !== "")
this._qualityChangeScaleBar.classList.toggle(wtgClassName, true);
var btwClassName = canvas.qualityBadToWarningChangeScaleBarCssClass;
if (btwClassName != null && btwClassName !== "")
this._qualityChangeScaleBar.classList.toggle(btwClassName, false);
var btgwtgClassName = canvas.qualityBadToGoodChangeScaleBarCssClass;
if (btgwtgClassName != null && btgwtgClassName !== "")
this._qualityChangeScaleBar.classList.toggle(btgwtgClassName, false);
var naClassName = canvas.qualityNoAnimationChangeScaleBarCssClass;
if (naClassName != null && naClassName !== "")
this._qualityChangeScaleBar.classList.toggle(naClassName, this._qualityChangeScaleBar.getAttribute("class") !== oldClass);
this.canvas.updateViolationContainer(this);
};
ImageItemHandler.prototype.setBadToGoodChangeScaleBarClass = function () {
var canvas = this.canvas;
if (this._qualityChangeScaleBar == null || canvas == null)
return;
var oldClass = this._qualityChangeScaleBar.getAttribute("class");
var btgwtgClassName = canvas.qualityBadToGoodChangeScaleBarCssClass;
if (btgwtgClassName != null && btgwtgClassName !== "")
this._qualityChangeScaleBar.classList.toggle(btgwtgClassName, true);
var btwClassName = canvas.qualityBadToWarningChangeScaleBarCssClass;
if (btwClassName != null && btwClassName !== "")
this._qualityChangeScaleBar.classList.toggle(btwClassName, false);
var wtgClassName = canvas.qualityWarningToGoodChangeScaleBarCssClass;
if (wtgClassName != null && wtgClassName !== "")
this._qualityChangeScaleBar.classList.toggle(wtgClassName, false);
var naClassName = canvas.qualityNoAnimationChangeScaleBarCssClass;
if (naClassName != null && naClassName !== "")
this._qualityChangeScaleBar.classList.toggle(naClassName, this._qualityChangeScaleBar.getAttribute("class") !== oldClass);
this.canvas.updateViolationContainer(this);
};
ImageItemHandler.prototype.updateRectangle = function (keepLocation, resizeMode, parentPlaceholder, hiResOutputDpi) {
_super.prototype.updateRectangle.call(this, keepLocation, resizeMode, parentPlaceholder, this.item.source.width, this.item.source.height, hiResOutputDpi);
};
ImageItemHandler.prototype._updateImpl = function (beforeUpdate, afterUpdate) {
return __awaiter(this, void 0, void 0, function () {
var canvas;
var _this = this;
return __generator(this, function (_a) {
if (this._sourceUrl != undefined && this._sourceUrl != null) {
this._update([this._actualSize, this._saveAspectRatio, this._sourceUrl], beforeUpdate, afterUpdate);
if (this.item.source.id == null && this.item.source.url != null) {
this.updateRectangle(false, this.item.parentPlaceholder != null ? this.item.parentPlaceholder.contentResizeMode : null, this.parentPlaceholder);
}
}
else if (this.item.source.type === ImageItem.ImageSourceType.Url) {
this.loadImage(null, { downloadToServerCache: true, actualSize: this.item.source.actualSize, saveAspectRatio: this.item.source.saveAspectRatio }).then(function () {
if (_this.canvas != null)
_this.canvas.updateSelection();
});
}
else {
this.quickUpdate();
canvas = this.canvas;
if (canvas != null)
canvas.updateSelection();
}
return [2 /*return*/];
});
});
};
ImageItemHandler.prototype._getDrawingFillColor = function () {
return this.item.effect === ImageEffect.Colorize
? RgbColors.transparent
: this.item.fillColor;
};
ImageItemHandler.prototype._setDataItem = function (item, itemHandlerData) {
_super.prototype._setDataItem.call(this, item, itemHandlerData);
var needUpdateRectangle = this.item.source.id == null && this.item.source.url != null;
this.item.source.id = item.source.id;
this.item.source.width = item.source.width;
this.item.source.height = item.source.height;
this.item.source.isVector = item.source.isVector;
this.item.source.pageIndex = item.source.pageIndex;
this.item.source.url = item.source.url;
if (needUpdateRectangle) {
this.updateRectangle(false, this.item.parentPlaceholder != null ? this.item.parentPlaceholder.contentResizeMode : null, this.parentPlaceholder);
this.update();
}
};
ImageItemHandler.prototype._onItemPropertyChanged = function (sender, propertyName) {
switch (propertyName) {
case "source":
this._sourceUrl = null;
this.update();
if (this.item.source.id == null && this.item.source.url != null) {
this.updateRectangle(false, this.item.parentPlaceholder != null ? this.item.parentPlaceholder.contentResizeMode : null, this.parentPlaceholder);
}
break;
case "fillColor":
if (this.item.effect === ImageEffect.Colorize)
this.update();
break;
case "effect":
case "overlayEffect":
this.update();
break;
default:
}
_super.prototype._onItemPropertyChanged.call(this, sender, propertyName);
};
ImageItemHandler.prototype._getDefaultPermissions = function () {
var permissions = _super.prototype._getDefaultPermissions.call(this);
permissions.manipulation.resizeGrips = new ResizeGripsPermissions(true, false);
return permissions;
};
ImageItemHandler.prototype._createDataInstance = function (itemHandler) {
return new ImageHandlerData(itemHandler);
};
ImageItemHandler.prototype._updateImageUrl = function () {
var _this = this;
var canvas = this.canvas;
if (canvas == null)
return;
if (this.isVisible()) {
if (this.item.source.id == null || (this.item.source.width != null && this.item.source.height != null)) {
_super.prototype._updateImageUrl.call(this);
return;
}
var onImageSizeUpdated = function (data) {
_this.item.source.width = data.width;
_this.item.source.height = data.height;
if (_this._saveAspectRatio) {
var imageRatioWtoH = _this.item.source.width / _this.item.source.height;
if (_this.width < _this.height)
_this.height = _this.width / imageRatioWtoH;
else
_this.width = _this.height * imageRatioWtoH;
}
_super.prototype._updateImageUrl.call(_this);
};
var onFailureImageSizeUpdate = function (errData) {
if (window.console) {
console.error("Unable GetimageSize of image with id " + _this.item.source.id);
console.error(errData);
}
};
canvas.service.GetImageSize(this.item.source.id, this.item.source.pageIndex, onImageSizeUpdated, onFailureImageSizeUpdate);
}
};
ImageItemHandler.prototype._createImageUrl = function () {
var sourceId = this.item.source.id;
if (sourceId == null)
return null;
if (this.canvas == null)
return null;
var pixelWidth;
var pixelHeight;
var zoom = this.canvas.zoom;
var xDpi = Environment.screenDpi;
var yDpi = Environment.screenDpi;
var pttopxX = zoom * xDpi / 72;
var pttopxY = zoom * yDpi / 72;
var rect = this.rectangle;
pixelWidth = rect.width * pttopxX;
pixelHeight = rect.height * pttopxY;
var isUpscaleRequired = EffectHandler.isUpscaleRequired(this.item.effect);
var isBackendEffect = EffectHandler.isBackendEffect(this.item.effect);
// TODO: Temporary fix - Image source for PDF files can be small, the preview in viewer is of low quality
// TODO: If `isVectorFormat` check is removed, previews for small raster images will not be cached, leading to their re-generation each time
var isVectorFormat = this.item.source.id.includes(".pdf") || this.item.source.id.includes(".ai");
if (!this.item.source.isVector && !isVectorFormat) {
if (isUpscaleRequired) {
var hiresDpi = 300; // TODO: must use hires dpi from rendering config
var hiresW = rect.width * hiresDpi / 72;
var hiresH = rect.height * hiresDpi / 72;
if (pixelWidth > hiresW || pixelHeight > hiresH) {
pixelWidth = Math.min(pixelWidth, hiresW);
pixelHeight = Math.min(pixelHeight, hiresH);
}
}
else {
pixelWidth = Math.min(pixelWidth, this.item.source.width);
pixelHeight = Math.min(pixelHeight, this.item.source.height);
}
}
var f = this._maxImageSize / pixelWidth / pixelHeight;
if (f < 1) {
f = Math.sqrt(f);
pixelWidth = pixelWidth * f;
pixelHeight = pixelHeight * f;
}
pixelWidth = Math.max(1, Math.round(pixelWidth));
pixelHeight = Math.max(1, Math.round(pixelHeight));
this._pixelWidth = pixelWidth;
this._pixelHeight = pixelHeight;
var ditherSettings = this._getDitherSettings();
var ditherType = ditherSettings.ditherType;
var ditherAmount = ditherSettings.ditherAmount;
return ImageUtils.getImageUrl(this.canvas.renderingConfigProvider, this.canvas.designAtomsApiClient, sourceId, pixelWidth, pixelHeight, false, this.item.effect, false, this.item.overlayEffect, this.item.source.pageIndex, !this.isNormalRenderingType, this.item.fillColor, isBackendEffect, rect.width, rect.height, ditherType, ditherAmount);
};
ImageItemHandler.prototype._getColorLessContainer = function () {
var _a;
if (this.item.parentContainer instanceof ColorLessContainer)
return this.item.parentContainer;
if (((_a = this.item.parentPlaceholder) === null || _a === void 0 ? void 0 : _a.parentContainer) instanceof ColorLessContainer)
return this.item.parentPlaceholder.parentContainer;
return null;
};
ImageItemHandler.prototype._getDitherSettings = function () {
var container = this._getColorLessContainer();
if (!container)
return { ditherType: null, ditherAmount: null };
return {
ditherType: container.dither != null ? container.dither.toString() : null,
ditherAmount: container.amount != null ? container.amount : null
};
};
ImageItemHandler.typeName = "ImageItemHandler";
return ImageItemHandler;
}(ContentItemHandler));
export { ImageItemHandler };
//# sourceMappingURL=ImageItemHandler.js.map