@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
237 lines • 9.74 kB
JavaScript
import { ContentItemHandler } from "./ContentItemHandler";
import { BarcodeFormat } from "@aurigma/design-atoms-model/Product/Items";
import { BarcodeHandlerData } from "./BarcodeHandlerData";
import { ImageUtils } from "../Utils/ImageUtils";
import { ImageContainer } from "./ImageContainer";
import { Graphics } from "../Graphics";
import { Path, PointF, Transform } from "@aurigma/design-atoms-model/Math";
import Environment from "@aurigma/design-atoms-model/Utils/Environment";
// ReSharper disable InconsistentNaming
export class BarcodeItemHandler extends ContentItemHandler {
constructor(item, textWhizz = null, apiClient, colorPreviewService) {
super(item, textWhizz, apiClient, colorPreviewService);
this._currentFileId = null;
this._stubTextImageFileId = null;
this._errorTextImageFileId = null;
this._errorMessage = null;
this._maxImageSize = 2000 * 2000;
this._fallbackFileId = null;
this._stubImageContainer = new ImageContainer(this._onStubImageLoaded.bind(this));
}
get item() {
return this._getItem();
}
set item(item) {
super._setItem(item);
}
get currentFileId() {
return this._currentFileId;
}
set currentFileId(value) {
this._currentFileId = value;
}
get stubTextImageFileId() {
return this._stubTextImageFileId;
}
set stubTextImageFileId(value) {
this._stubTextImageFileId = value;
}
get errorTextImageFileId() {
return this._errorTextImageFileId;
}
set errorTextImageFileId(value) {
this._errorTextImageFileId = value;
}
get errorMessage() {
return this._errorMessage;
}
set errorMessage(value) {
this._errorMessage = value;
}
quickUpdate() {
if (this.isVisible() &&
this.canvas &&
!this.canvas.service.imageLoaderService.hasImageContainerFor(this._fileId)) {
super.quickUpdate();
}
}
drawItemHandler(itemHandlerCtx) {
if (itemHandlerCtx == null) {
return;
}
if (!this._isReadyToDraw) {
this.canvas.drawWaitClock(itemHandlerCtx, this.rectangle.center);
return;
}
const placeholder = this.parentPlaceholder != null ? this.parentPlaceholder.rectangle : this.rectangle;
const content = this.rectangle;
const opacity = this.isNormalRenderingType ? this.item.opacity : 1;
const { fillColorPreview, borderColorPreview, altBorderColorPreview } = this._getItemColorPreviews();
Graphics.fillRectangle(itemHandlerCtx, content, fillColorPreview === null || fillColorPreview === void 0 ? void 0 : fillColorPreview.toString(), opacity);
if (this._imageContainer.isLoaded)
this._drawImage(itemHandlerCtx, this.canvas.disableSmoothing);
if (this._stubImageContainer.isLoaded)
this._drawImage(itemHandlerCtx, this.canvas.disableSmoothing, 1, this._stubImageContainer.image);
if (this._imageContainer.isLoading || this._stubImageContainer.isLoading)
this.canvas.drawWaitClock(itemHandlerCtx, new PointF(placeholder.centerX, placeholder.centerY));
const borderWidth = this._getActualBorderWidth();
content.width += borderWidth;
content.height += borderWidth;
const path = Path.rotatedRectangle(content);
Graphics.drawStroke(itemHandlerCtx, path, content.center, new Transform(), borderWidth, borderColorPreview === null || borderColorPreview === void 0 ? void 0 : borderColorPreview.toString(), altBorderColorPreview === null || altBorderColorPreview === void 0 ? void 0 : altBorderColorPreview.toString(), this.item.opacity, this.item.dash);
}
onResized() {
this.update();
return super.onResized();
}
dispose() {
super.dispose();
this._stubImageContainer.dispose();
}
_isReady() {
return super._isReady() && !(this._showStubImage && !this._stubImageContainer.isLoaded);
}
async _updateImpl(beforeUpdate, afterUpdate) {
if (!this.isVisible())
return;
if (this.currentFileId == null && this.errorMessage == null || !this._isSquareBarcodeFormat() && this.item.barcodeOptions.pureBarcode === false) {
const postUpdate = () => {
var _a;
if (typeof afterUpdate == "function")
afterUpdate();
(_a = this.canvas) === null || _a === void 0 ? void 0 : _a.updateSelection();
};
super._update(null, beforeUpdate, postUpdate);
}
else {
this.quickUpdate();
}
}
_createDataInstance(handler) {
return new BarcodeHandlerData(handler);
}
_onItemPropertyChanged(sender, propertyName) {
this._fallbackFileId = this._fileId;
switch (propertyName) {
case "barcodeFormat":
case "barcodeOptions":
case "barcodeContent":
case "color":
if (propertyName == "barcodeFormat" || propertyName == "barcodeOptions") {
this._fallbackFileId = null;
}
this.currentFileId = null;
this.stubTextImageFileId = null;
this.errorTextImageFileId = null;
this.errorMessage = null;
this.update(null, () => {
if (this.errorMessage == null)
this._fallbackFileId = null;
});
break;
default:
}
super._onItemPropertyChanged(sender, propertyName);
}
_getDefaultPermissions() {
const permissions = super._getDefaultPermissions();
permissions.manipulation.resizeGrips.setCornerArbitrary(false);
permissions.manipulation.resizeGrips.edge = false;
return permissions;
}
_createImageUrl() {
if (this._fileId == null || this.canvas == null)
return null;
let pixelWidth, pixelHeight;
const zoom = this.canvas.zoom;
const XDpi = Environment.screenDpi;
const YDpi = Environment.screenDpi;
const pttopx_x = zoom * XDpi / 72;
const pttopx_y = zoom * YDpi / 72;
pixelWidth = this.rectangle.width * pttopx_x;
pixelHeight = this.rectangle.height * pttopx_y;
let f = this._maxImageSize / pixelWidth / pixelHeight;
if (f < 1) {
f = Math.sqrt(f);
pixelWidth = pixelWidth * f;
pixelHeight = pixelHeight * f;
}
pixelWidth = Math.round(pixelWidth);
pixelHeight = Math.round(pixelHeight);
this._pixelWidth = pixelWidth;
this._pixelHeight = pixelHeight;
return ImageUtils.getImageUrl(this.canvas.renderingConfigProvider, this.canvas.designAtomsApiClient, this._fileId, this._pixelWidth, this._pixelHeight, false);
}
_isLoadingImage() {
return this._imageContainer.isLoading || !(this._showStubImage && !this._stubImageContainer.isLoading);
}
_setIsLoadingImage(value) {
this._imageContainer.isLoading = value;
if (this._showStubImage)
this._stubImageContainer.isLoading = value;
}
_updateImageUrl() {
super._updateImageUrl();
this._updateStubImageUrl();
}
_shouldRequest(prevSize, nextSize, config) {
return true;
}
_updateStubImageUrl() {
if (!this.isVisible())
return;
const cv = this.canvas;
if (cv == null || !cv.isInitialized)
return;
const url = this._createStubImageUrl();
if (url === this._stubImageContainer.source)
return;
if (url == null) {
this._stubImageContainer.clear();
cv.redraw();
}
else
this._stubImageContainer.updateUrl(url);
}
_onImageLoaded(e, target) {
this._imageContainer.isLoading = false;
if (this._stubImageContainer.isLoading)
return;
if (this.canvas != null) {
this.canvas.redraw();
this.canvas.updateSelection();
}
this._dispatchReadyEvent();
}
get _fileId() {
var _a;
return (_a = this.currentFileId) !== null && _a !== void 0 ? _a : this._fallbackFileId;
}
get _showStubImage() {
return this.item.barcodeData.isEmpty || this.errorMessage != null;
}
_createStubImageUrl() {
const stubImageFileId = this.item.barcodeData.isEmpty ? this.stubTextImageFileId : this.errorTextImageFileId;
if (stubImageFileId == null)
return;
return ImageUtils.getImageUrl(this.canvas.renderingConfigProvider, this.canvas.designAtomsApiClient, stubImageFileId, this._pixelWidth, this._pixelHeight, false);
}
_onStubImageLoaded(e, target) {
this._stubImageContainer.isLoading = false;
if (this._imageContainer.isLoading)
return;
if (this.canvas != null) {
this.canvas.redraw();
this.canvas.updateSelection();
}
this._dispatchReadyEvent();
}
_isSquareBarcodeFormat() {
const format = this.item.barcodeFormat;
return format == BarcodeFormat.QR_CODE ||
format == BarcodeFormat.AZTEC ||
format == BarcodeFormat.DATA_MATRIX;
}
}
BarcodeItemHandler.typeName = "BarcodeItemHandler";
//# sourceMappingURL=BarcodeItemHandler.js.map