@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
497 lines • 21.7 kB
JavaScript
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 __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 { 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.
*/
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)
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 = 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 "dither":
case "amount":
_this._refreshImageItems();
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 () {
var _a;
return (_a = this._getTextureSource()) === null || _a === void 0 ? void 0 : _a.id;
},
set: function (v) {
var source = this._getTextureSource();
if (source != null) {
source.id = v;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "textureSourceWidth", {
get: function () {
var _a;
return (_a = this._getTextureSource()) === null || _a === void 0 ? void 0 : _a.width;
},
set: function (v) {
var source = this._getTextureSource();
if (source != null) {
source.width = v;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "textureSourceHeight", {
get: function () {
var _a;
return (_a = this._getTextureSource()) === null || _a === void 0 ? void 0 : _a.height;
},
set: function (v) {
var source = this._getTextureSource();
if (source != null) {
source.height = v;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "previewColor", {
get: function () {
return this._getPreviewColor();
},
set: function (value) {
if (this._container instanceof SpotColorContainer) {
this._container.previewColor = value;
}
else if (this._container instanceof ColorLessContainer) {
var visualization = this._container.visualization;
if (visualization instanceof ColorContainerVisualization) {
visualization.color = value;
}
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "ditherType", {
get: function () {
if (!(this._container instanceof ColorLessContainer))
return null;
var colorlessContainer = this._container;
return colorlessContainer.dither;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "ditherAmount", {
get: function () {
if (!(this._container instanceof ColorLessContainer))
return null;
var colorlessContainer = this._container;
return colorlessContainer.amount;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Layer.prototype, "renderingType", {
get: function () {
return this._container.renderingType;
},
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._refreshImageItems = function () {
var imageRelatedHandlers = [ImageItemHandler, PlaceholderItemHandler, GroupItemHandler];
this.canvas
.getAllItemHandlers()
.filter(function (h) { return imageRelatedHandlers.some(function (handlerClass) { return h instanceof handlerClass; }); })
.map(function (h) { return h.quickUpdate(); });
this.canvas.redraw();
};
Layer.prototype._updateImageTexture = function (forceUpdate) {
return __awaiter(this, void 0, void 0, function () {
var _a, canvasWidth, canvasHeight, multiplier, oldUrl, textureImageWidth, textureImageHeight, _b;
return __generator(this, function (_c) {
switch (_c.label) {
case 0:
_a = this._canvas, canvasWidth = _a.width, canvasHeight = _a.height;
multiplier = Math.max(canvasWidth / this.textureSourceWidth, canvasHeight / this.textureSourceHeight);
multiplier = Math.min(1, multiplier);
if (!forceUpdate && this._textureSizeMultiplier != null && this._textureSizeMultiplier > multiplier)
return [2 /*return*/];
this._textureSizeMultiplier = multiplier;
oldUrl = this._textureUrl;
textureImageWidth = parseInt((this.textureSourceWidth * multiplier).toString());
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 [2 /*return*/];
_b = this;
return [4 /*yield*/, this._loadImageTexture({
width: textureImageWidth,
height: textureImageHeight
}, this._textureUrl)];
case 1:
_b.textureImage = _c.sent();
this._isTextureLoaded = true;
this._canvas.onLayerTextureLoaded();
return [2 /*return*/];
}
});
});
};
Layer.prototype._createColorTexture = function (color) {
var canvas = document.createElement("canvas");
canvas.width = 10;
canvas.height = 10;
var ctx = canvas.getContext("2d");
ctx.fillStyle = color.toString();
ctx.fillRect(0, 0, 10, 10);
return canvas;
};
Layer.prototype._loadImageTexture = function (size, url) {
return __awaiter(this, void 0, void 0, function () {
var textureImage;
return __generator(this, function (_a) {
textureImage = new Image(size.width, size.height);
textureImage.crossOrigin = "anonymous";
textureImage.src = url;
return [2 /*return*/, new Promise(function (resolve) { return textureImage.onload = function () { return resolve(textureImage); }; })];
});
});
};
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();
}
};
Layer.prototype._getTextureSource = function () {
if (this._container instanceof TextureContainer) {
return this._container.previewTextureSource;
}
else if (this._container instanceof ColorLessContainer) {
var visualization = this._container.visualization;
if (visualization instanceof TextureContainerVisualization) {
return visualization.textureSource;
}
}
else {
return null;
}
};
Layer.prototype._getPreviewColor = function () {
if (this._container instanceof SpotColorContainer) {
return this._container.previewColor;
}
else if (this._container instanceof ColorLessContainer) {
var visualization = this._container.visualization;
if (visualization instanceof ColorContainerVisualization) {
return visualization.color;
}
}
else {
return null;
}
};
return Layer;
}());
export { Layer };
//# sourceMappingURL=Layer.js.map