@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
330 lines • 13.3 kB
JavaScript
/** The layer representing a design element on the canvas. */
/** imports */
import { LayerData } from "./LayerData";
import { ItemHandlersCollection } from "./ItemHandlers/ItemHandlersCollection";
import { TextureContainer, SpotColorContainer } from "@aurigma/design-atoms-model/Product/Container";
import { EventObject } from "@aurigma/design-atoms-model/EventObject";
import { ColorLessContainer, SurfaceContainer } from "@aurigma/design-atoms-model/Product";
import { ImageUtils } from "./Utils/ImageUtils";
import { Collection } from "@aurigma/design-atoms-model";
import { GroupItemHandler, ImageItemHandler, PlaceholderItemHandler } from "./ItemHandlers";
import { ColorContainerVisualization, TextureContainerVisualization } from "@aurigma/design-atoms-model/Product/ContainerVisualization";
/**
* Represents a design element on the canvas.
*
* This client-side class corresponds to the server-side class `Canvas` and provides access to its primary members in TypeScript.
*/
export class Layer {
/** @internal */
constructor(_container, canvas) {
this._container = _container;
this._disposeEvent = new EventObject();
this._itemHandlers = new ItemHandlersCollection(this);
this._canvas = null;
this._uniqueId = ("l" + new Date().getTime()) + Math.round(Math.random() * 1000);
this._visible = true;
this._locked = false;
this._textureSizeMultiplier = null;
this._textureUrl = null;
this._isTextureLoaded = false;
this.textureImage = null;
this.updateTexture = (forceUpdate) => {
if (this._canvas == null || this.locked)
return;
if (this.previewColor != null) {
if (this.textureImage == null || forceUpdate) {
this.textureImage = this._createColorTexture(this.previewColor);
return;
}
}
if (this.textureStorageId != null && this.textureSourceWidth != null && this.textureSourceHeight != null) {
this._updateImageTexture(forceUpdate);
}
};
this._createItemHandlersCollection = () => {
const handlers = [];
for (let item of this._container.items) {
handlers.push(this._canvas.getItemHandler(item));
}
this.itemHandlers.setRange(handlers);
this._canvas.redraw();
};
this._onContainerPropertyChanged = (sender, propertyName) => {
switch (propertyName) {
case "visible":
case "locked":
this._updateState();
break;
case "dither":
case "amount":
this._refreshImageItems();
break;
case "previewTextureSource":
this.updateTexture(true);
break;
}
};
this._onZoomChanged = (args) => {
if (!args.fullUpdate)
return;
this.updateTexture();
};
if (canvas != null)
this._canvas = canvas;
if (this._container == null)
return;
this._container.addPropertyChanged(this._onContainerPropertyChanged);
const onItemAddedDelegate = (data) => {
if (data != null) {
this.itemHandlers.insertAt(data.index, this._canvas.getItemHandler(data.item));
this._canvas.updateTexts();
}
};
const onItemRemovedDelegate = (data) => {
if (data != null)
this.itemHandlers.removeAt(data.index);
};
const onItemMovedDelegate = (data) => {
if (data != null)
this.itemHandlers.move(data.oldIndex, data.newIndex);
};
this._container.items.add_itemAdded(onItemAddedDelegate);
this._container.items.add_itemRemoved(onItemRemovedDelegate);
this._container.items.add_itemMoved(onItemMovedDelegate);
this._disposeEvent.add(() => {
this._container.items.remove_itemAdded(onItemAddedDelegate);
this._container.items.remove_itemRemoved(onItemRemovedDelegate);
this._container.items.remove_itemMoved(onItemMovedDelegate);
});
this._createItemHandlersCollection();
}
/** Gets a unique ID used for deserialization. */
get uniqueId() {
return this._uniqueId;
}
/** Sets a unique ID used for deserialization. */
set uniqueId(v) {
this._uniqueId = v;
}
get canvas() {
return this._canvas;
}
set canvas(value) {
this._canvas = value;
}
get data() {
/// <summary>Gets or sets serialized data of this layer.</summary>
var data = new LayerData(this);
return JSON.stringify(data);
}
set data(v) {
if (v && v != "") {
var data = JSON.parse(v);
LayerData.applyState(data, this);
}
}
/** Gets or sets the rectangle region on the layer surface in which v-objects can be placed. */
get region() {
return this._container.region;
}
set region(region) {
this._container.region = region;
}
get itemHandlers() {
return this._itemHandlers;
}
get name() {
return this._container.name;
}
set name(v) {
this.container.name = v;
}
get visible() {
var _a, _b;
return this._isIgnorePermissionsMode() && this._isSurfaceLayer() ? this._visible : (_b = (_a = this._container) === null || _a === void 0 ? void 0 : _a.visible) !== null && _b !== void 0 ? _b : this._visible;
}
set visible(v) {
if (this._visible !== v) {
this._visible = v;
this._updateState();
}
}
get locked() {
var _a, _b;
return this._isIgnorePermissionsMode() && this._isSurfaceLayer() ? this._locked : (_b = (_a = this._container) === null || _a === void 0 ? void 0 : _a.locked) !== null && _b !== void 0 ? _b : this._locked;
}
set locked(v) {
if (this._locked !== v) {
this._locked = v;
this._updateState();
}
}
get container() {
return this._container;
}
get textureStorageId() {
var _a;
return (_a = this._getTextureSource()) === null || _a === void 0 ? void 0 : _a.id;
}
set textureStorageId(v) {
const source = this._getTextureSource();
if (source != null) {
source.id = v;
}
}
get textureSourceWidth() {
var _a;
return (_a = this._getTextureSource()) === null || _a === void 0 ? void 0 : _a.width;
}
set textureSourceWidth(v) {
const source = this._getTextureSource();
if (source != null) {
source.width = v;
}
}
get textureSourceHeight() {
var _a;
return (_a = this._getTextureSource()) === null || _a === void 0 ? void 0 : _a.height;
}
set textureSourceHeight(v) {
const source = this._getTextureSource();
if (source != null) {
source.height = v;
}
}
get previewColor() {
return this._getPreviewColor();
}
set previewColor(value) {
if (this._container instanceof SpotColorContainer) {
this._container.previewColor = value;
}
else if (this._container instanceof ColorLessContainer) {
const { visualization } = this._container;
if (visualization instanceof ColorContainerVisualization) {
visualization.color = value;
}
}
}
get ditherType() {
if (!(this._container instanceof ColorLessContainer))
return null;
const colorlessContainer = this._container;
return colorlessContainer.dither;
}
get ditherAmount() {
if (!(this._container instanceof ColorLessContainer))
return null;
const colorlessContainer = this._container;
return colorlessContainer.amount;
}
get renderingType() {
return this._container.renderingType;
}
get flatItemHandlers() {
const itemHandlersCollection = this.itemHandlers.toArray();
return new Collection(itemHandlersCollection.reduce((allItemHandlers, itemHandler) => allItemHandlers.concat(itemHandler instanceof GroupItemHandler
? [itemHandler, ...itemHandler.getNestedItemHandlers(true)]
: itemHandler), []));
}
onLayerAdded() {
this.updateTexture();
this._canvas.add_zoomChanged(this._onZoomChanged);
}
_refreshImageItems() {
const imageRelatedHandlers = [ImageItemHandler, PlaceholderItemHandler, GroupItemHandler];
this.canvas
.getAllItemHandlers()
.filter(h => imageRelatedHandlers.some(handlerClass => h instanceof handlerClass))
.map(h => h.quickUpdate());
this.canvas.redraw();
}
async _updateImageTexture(forceUpdate) {
const { width: canvasWidth, height: canvasHeight } = this._canvas;
let multiplier = Math.max(canvasWidth / this.textureSourceWidth, canvasHeight / this.textureSourceHeight);
multiplier = Math.min(1, multiplier);
if (!forceUpdate && this._textureSizeMultiplier != null && this._textureSizeMultiplier > multiplier)
return;
this._textureSizeMultiplier = multiplier;
const oldUrl = this._textureUrl;
const textureImageWidth = parseInt((this.textureSourceWidth * multiplier).toString());
const textureImageHeight = parseInt((this.textureSourceHeight * multiplier).toString());
this._textureUrl = ImageUtils.getImageUrl(this._canvas.renderingConfigProvider, this._canvas.designAtomsApiClient, this.textureStorageId, textureImageWidth, textureImageHeight, false /* squared */, null /* effect */, true /* keepProportions */, null /* overlayEffect */, null /* pageIndex */, null /* alphaMask */, null /* colorizeColor */, null /* isBackendEffect */, null /* rectWidth */, null /* rectHeight */, null /* ditherType */, null /* ditherAmount */);
if (oldUrl === this._textureUrl)
return;
this.textureImage = await this._loadImageTexture({
width: textureImageWidth,
height: textureImageHeight
}, this._textureUrl);
this._isTextureLoaded = true;
this._canvas.onLayerTextureLoaded();
}
_createColorTexture(color) {
const canvas = document.createElement("canvas");
canvas.width = 10;
canvas.height = 10;
const ctx = canvas.getContext("2d");
ctx.fillStyle = color.toString();
ctx.fillRect(0, 0, 10, 10);
return canvas;
}
async _loadImageTexture(size, url) {
const textureImage = new Image(size.width, size.height);
textureImage.crossOrigin = "anonymous";
textureImage.src = url;
return new Promise((resolve) => textureImage.onload = () => resolve(textureImage));
}
isTextureLoadedOrNotExists() {
return this.textureStorageId == null || this._isTextureLoaded;
}
dispose() {
this.textureImage = null;
this._disposeEvent.notify();
}
_isIgnorePermissionsMode() {
var _a, _b;
return (_b = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.ignorePermissionsMode) !== null && _b !== void 0 ? _b : false;
}
_isSurfaceLayer() {
return this.container instanceof SurfaceContainer && this.container.parentComponent != null;
}
_updateState() {
if (this.canvas != null) {
if (!this.visible || this.locked) {
this.canvas.clearSelectedItemHandlers();
}
this.canvas.updatePlaceholderButtonGroups();
this.canvas.updateViolationContainers();
this.canvas.redraw();
}
}
_getTextureSource() {
if (this._container instanceof TextureContainer) {
return this._container.previewTextureSource;
}
else if (this._container instanceof ColorLessContainer) {
const { visualization } = this._container;
if (visualization instanceof TextureContainerVisualization) {
return visualization.textureSource;
}
}
else {
return null;
}
}
_getPreviewColor() {
if (this._container instanceof SpotColorContainer) {
return this._container.previewColor;
}
else if (this._container instanceof ColorLessContainer) {
const { visualization } = this._container;
if (visualization instanceof ColorContainerVisualization) {
return visualization.color;
}
}
else {
return null;
}
}
}
//# sourceMappingURL=Layer.js.map