@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
366 lines • 14.9 kB
JavaScript
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
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;
};
/** 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 { SurfaceContainer } from "@aurigma/design-atoms-model/Product";
import { ImageUtils } from "./Utils/ImageUtils";
import { Collection } from "@aurigma/design-atoms-model";
import { GroupItemHandler } from "./ItemHandlers";
/**
* 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.
*/
var Layer = /** @class */ (function () {
/** @internal */
function Layer(_container, canvas) {
var _this = this;
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 = function (forceUpdate) {
if (_this._canvas == null ||
_this.locked
|| (_this.textureStorageId == null || _this.textureSourceWidth == null || _this.textureSourceHeight == null)
&& !(_this.previewColor != null))
return;
var canvasWidth = _this._canvas.width;
var canvasHeight = _this._canvas.height;
if (_this.previewColor != null) {
if (_this.textureImage == null || forceUpdate) {
_this.textureImage = document.createElement("canvas");
_this.textureImage.width = 10;
_this.textureImage.height = 10;
var ctx = _this.textureImage.getContext("2d");
ctx.fillStyle = _this.previewColor;
ctx.fillRect(0, 0, 10, 10);
}
return;
}
var 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;
var oldUrl = _this._textureUrl;
var textureImageWidth = parseInt((_this.textureSourceWidth * multiplier).toString());
var textureImageHeight = parseInt((_this.textureSourceHeight * multiplier).toString());
_this._textureUrl = ImageUtils.getImageUrl(_this._canvas.renderingConfigProvider, _this._canvas.designAtomsApiClient, _this.textureStorageId, textureImageWidth, textureImageHeight, false, null, true);
if (oldUrl === _this._textureUrl)
return;
var textureImage = new Image(textureImageWidth, textureImageHeight);
textureImage.crossOrigin = "anonymous";
textureImage.src = _this._textureUrl;
var self = _this;
textureImage.onload = function () {
self.textureImage = textureImage;
self._isTextureLoaded = true;
self._canvas.onLayerTextureLoaded();
};
};
this._createItemHandlersCollection = function () {
var e_1, _a;
var handlers = [];
try {
for (var _b = __values(_this._container.items), _c = _b.next(); !_c.done; _c = _b.next()) {
var item = _c.value;
handlers.push(_this._canvas.getItemHandler(item));
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
_this.itemHandlers.setRange(handlers);
_this._canvas.redraw();
};
this._onContainerPropertyChanged = function (sender, propertyName) {
switch (propertyName) {
case "visible":
case "locked":
_this._updateState();
break;
case "previewTextureSource":
_this.updateTexture(true);
break;
}
};
this._onZoomChanged = function (args) {
if (!args.fullUpdate)
return;
_this.updateTexture();
};
if (canvas != null)
this._canvas = canvas;
if (this._container == null)
return;
this._container.addPropertyChanged(this._onContainerPropertyChanged);
var onItemAddedDelegate = function (data) {
if (data != null) {
_this.itemHandlers.insertAt(data.index, _this._canvas.getItemHandler(data.item));
_this._canvas.updateTexts();
}
};
var onItemRemovedDelegate = function (data) {
if (data != null)
_this.itemHandlers.removeAt(data.index);
};
var onItemMovedDelegate = function (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(function () {
_this._container.items.remove_itemAdded(onItemAddedDelegate);
_this._container.items.remove_itemRemoved(onItemRemovedDelegate);
_this._container.items.remove_itemMoved(onItemMovedDelegate);
});
this._createItemHandlersCollection();
}
Object.defineProperty(Layer.prototype, "uniqueId", {
/** Gets a unique ID used for deserialization. */
get: function () {
return this._uniqueId;
},
/** Sets a unique ID used for deserialization. */
set: function (v) {
this._uniqueId = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "canvas", {
get: function () {
return this._canvas;
},
set: function (value) {
this._canvas = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "data", {
get: function () {
/// <summary>Gets or sets serialized data of this layer.</summary>
var data = new LayerData(this);
return JSON.stringify(data);
},
set: function (v) {
if (v && v != "") {
var data = JSON.parse(v);
LayerData.applyState(data, this);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "region", {
/** Gets or sets the rectangle region on the layer surface in which v-objects can be placed. */
get: function () {
return this._container.region;
},
set: function (region) {
this._container.region = region;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "itemHandlers", {
get: function () {
return this._itemHandlers;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "name", {
get: function () {
return this._container.name;
},
set: function (v) {
this.container.name = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "visible", {
get: function () {
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: function (v) {
if (this._visible !== v) {
this._visible = v;
this._updateState();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "locked", {
get: function () {
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: function (v) {
if (this._locked !== v) {
this._locked = v;
this._updateState();
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "container", {
get: function () {
return this._container;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "textureStorageId", {
get: function () {
return this._container instanceof TextureContainer ? this._container.previewTextureSource.id : null;
},
set: function (v) {
if (this._container instanceof TextureContainer) {
this._container.previewTextureSource.id = v;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "textureSourceWidth", {
get: function () {
return this._container instanceof TextureContainer ? this._container.previewTextureSource.width : null;
},
set: function (v) {
if (this._container instanceof TextureContainer) {
this._container.previewTextureSource.width = v;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "textureSourceHeight", {
get: function () {
return this._container instanceof TextureContainer ? this._container.previewTextureSource.height : null;
},
set: function (v) {
if (this._container instanceof TextureContainer) {
this._container.previewTextureSource.height = v;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "previewColor", {
get: function () {
return this._container instanceof SpotColorContainer ? this._container.previewColor : null;
},
set: function (value) {
if (this._container instanceof SpotColorContainer) {
this._container.previewColor = value;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "renderingType", {
get: function () {
return this._container.renderingType;
},
set: function (v) {
this.container.renderingType = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "flatItemHandlers", {
get: function () {
var itemHandlersCollection = this.itemHandlers.toArray();
return new Collection(itemHandlersCollection.reduce(function (allItemHandlers, itemHandler) {
return allItemHandlers.concat(itemHandler instanceof GroupItemHandler
? __spread([itemHandler], itemHandler.getNestedItemHandlers(true)) : itemHandler);
}, []));
},
enumerable: true,
configurable: true
});
Layer.prototype.onLayerAdded = function () {
this.updateTexture();
this._canvas.add_zoomChanged(this._onZoomChanged);
};
Layer.prototype.isTextureLoadedOrNotExists = function () {
return this.textureStorageId == null || this._isTextureLoaded;
};
Layer.prototype.dispose = function () {
this.textureImage = null;
this._disposeEvent.notify();
};
Layer.prototype._isIgnorePermissionsMode = function () {
var _a, _b;
return (_b = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.ignorePermissionsMode) !== null && _b !== void 0 ? _b : false;
};
Layer.prototype._isSurfaceLayer = function () {
return this.container instanceof SurfaceContainer && this.container.parentComponent != null;
};
Layer.prototype._updateState = function () {
if (this.canvas != null) {
if (!this.visible || this.locked) {
this.canvas.clearSelectedItemHandlers();
}
this.canvas.updatePlaceholderButtonGroups();
this.canvas.updateViolationContainers();
this.canvas.redraw();
}
};
return Layer;
}());
export { Layer };
//# sourceMappingURL=Layer.js.map