@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
518 lines • 26.1 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 };
}
};
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;
};
import { BaseRectangleItemHandler } from "./BaseRectangleItemHandler";
import { RotatedRectangleF, Transform, EqualsOfFloatNumbers } from "@aurigma/design-atoms-model/Math";
import { PlaceholderItemHandler } from "./PlaceholderItemHandler";
import { PlaceholderItem } from "@aurigma/design-atoms-model/Product/Items";
import { Collection } from "@aurigma/design-atoms-model/Collection";
import { Exception } from "@aurigma/design-atoms-model/Exception";
import { PlaceholderEditingViewMode } from "../Viewer/Interfaces";
export function isIContainerItemHandler(object) {
return 'updateNestedItemHandlers' in object;
}
var GroupItemHandler = /** @class */ (function (_super) {
__extends(GroupItemHandler, _super);
function GroupItemHandler(item, itemHandlers, textWhizz) {
if (textWhizz === void 0) { textWhizz = null; }
var _this = _super.call(this, null, null, null, null, item, textWhizz) || this;
_this._itemHandlers = new Collection();
_this._onChildItemHandlerChanging = function (sender) { return _this.raiseChanging(_this.item); };
if (Array.isArray(itemHandlers))
_this.itemHandlers = new Collection(itemHandlers);
_this.item.items.add_itemAdded(_this._onItemAdded.bind(_this));
_this.item.items.add_itemRemoved(_this._onItemRemoved.bind(_this));
_this._subscribeItemHandlers();
return _this;
}
GroupItemHandler.prototype.isHighlightNeeded = function () {
return true;
};
GroupItemHandler.prototype._getColors = function () {
var e_1, _a;
var result = [];
if (this.itemHandlers != null) {
try {
for (var _b = __values(this.itemHandlers), _c = _b.next(); !_c.done; _c = _b.next()) {
var handler = _c.value;
result.push.apply(result, __spread(handler.getColors()));
}
}
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; }
}
}
result.push.apply(result, __spread(_super.prototype._getColors.call(this)));
return result;
};
GroupItemHandler.prototype._unsubscribeItemHandlers = function () {
var _this = this;
if (this.itemHandlers != null) {
this.itemHandlers.remove_itemAdded(this._onItemHandlerAdded.bind(this));
this.itemHandlers.remove_itemRemoved(this._onItemHandlerRemoved.bind(this));
this.itemHandlers.forEach(function (itemHandler) { return itemHandler.getChangingEvent().remove(_this._onChildItemHandlerChanging); });
}
};
GroupItemHandler.prototype._subscribeItemHandlers = function () {
var _this = this;
if (this.itemHandlers != null) {
this.itemHandlers.add_itemAdded(this._onItemHandlerAdded.bind(this));
this.itemHandlers.add_itemRemoved(this._onItemHandlerRemoved.bind(this));
this.itemHandlers.forEach(function (itemHandler) { return itemHandler.getChangingEvent().add(_this._onChildItemHandlerChanging); });
}
};
GroupItemHandler.prototype.setItemHandlers = function (itemHandlers) {
this._unsubscribeItemHandlers();
if (Array.isArray(itemHandlers))
this.itemHandlers = new Collection(itemHandlers);
this._subscribeItemEvents();
};
Object.defineProperty(GroupItemHandler.prototype, "itemHandlers", {
get: function () { return this._itemHandlers; },
set: function (value) {
if (value == null)
throw new Error("ItemHandlers can't be null");
this._itemHandlers.clear();
this._itemHandlers.addRange(value);
},
enumerable: true,
configurable: true
});
GroupItemHandler.prototype.drawItemHandler = function (itemHandlerCtx) {
var _this = this;
this.getNestedItemHandlers(true, false, true).forEach(function (itemHandler) {
var _a, _b;
var isNormalPlaceholderViewMode = ((_b = (_a = _this.canvas.viewerConfiguration) === null || _a === void 0 ? void 0 : _a.handlers) === null || _b === void 0 ? void 0 : _b.placeholderEditingViewMode) === PlaceholderEditingViewMode.Normal;
if (itemHandler.canvas != null && (isNormalPlaceholderViewMode || !(itemHandler instanceof PlaceholderItemHandler && itemHandler.editing)))
itemHandler.drawItemHandler(itemHandlerCtx);
});
};
GroupItemHandler.prototype._getChildrenHighlights = function () {
var result = [];
this.itemHandlers
.where(function (x) { return x.isVisible(); })
.forEach(function (x) {
var rects = x.getHighlightRectangles();
result.push.apply(result, __spread(rects));
});
return result;
};
GroupItemHandler.prototype.getHighlightRectangles = function (options) {
if (options === void 0) { options = { includeChildren: true, includeParent: false }; }
var result = [];
if (options.includeChildren)
result = __spread(this._getChildrenHighlights());
if (options.includeParent && this.item.groupItemPermissions)
result.push.apply(result, __spread(_super.prototype.getHighlightRectangles.call(this, options)));
return result;
};
GroupItemHandler.prototype.getOrderedItems = function () {
return this.item.items.toArray();
};
GroupItemHandler.prototype._onItemPropertyChanged = function (sender, propertyName) {
switch (propertyName) {
case "opacity":
var newOpacity_1 = sender.opacity;
var updateOpacity = function (item) {
if (!EqualsOfFloatNumbers(item.opacity, newOpacity_1))
item.opacity = newOpacity_1;
if (item instanceof PlaceholderItem && !EqualsOfFloatNumbers(item.content.opacity, newOpacity_1))
item.updateContentAndFrames(function (i) { return i.opacity = newOpacity_1; });
};
this.item.applyToItems(updateOpacity);
break;
}
if (this._isPermissionsProperty(propertyName))
this._resetPermissionsCache();
_super.prototype._onItemPropertyChanged.call(this, sender, propertyName);
};
GroupItemHandler.prototype._onItemAdded = function (data) {
var item = data.item, index = data.index;
item.addPropertyChanged(this._onChildItemPropertyChanged.bind(this));
if (this.canvas == null)
return;
if (index != null)
this.itemHandlers.insertAt(index, this.canvas.getItemHandler(item));
else
this.itemHandlers.add(this.canvas.getItemHandler(item));
};
;
GroupItemHandler.prototype._onItemRemoved = function (data) {
if (this.canvas == null)
return;
var itemHandler = this.itemHandlers.firstOrDefault(function (x) { return x.item == data.item; });
if (this.canvas.isItemHandlerSelected(itemHandler))
this.canvas.removeSelectedItemHandler(itemHandler);
this.itemHandlers.remove(itemHandler);
};
GroupItemHandler.prototype._isPermissionsProperty = function (property) {
switch (property) {
case "itemPermissions":
case "manipulationPermissions":
case "visualizationPermissions":
case "placeholderPermissions":
return true;
default:
return false;
}
};
GroupItemHandler.prototype._onChildItemPropertyChanged = function (sender, property) {
if (this._isPermissionsProperty(property))
this._resetPermissionsCache();
};
GroupItemHandler.prototype._onItemHandlerAdded = function (data) {
var _this = this;
var itemHandler = data.item;
itemHandler.getChangingEvent().add(this._onChildItemHandlerChanging);
var updateLayerAndCanvas = function (itemHandler) {
itemHandler.layer = _this.layer;
itemHandler.canvas = _this.canvas;
if (itemHandler instanceof GroupItemHandler)
itemHandler.applyToItems(function (itemHandler) { return updateLayerAndCanvas(itemHandler); });
};
updateLayerAndCanvas(itemHandler);
this._resetPermissionsCache();
};
GroupItemHandler.prototype._onItemHandlerRemoved = function (data) {
var itemHandler = data.item;
itemHandler.getChangingEvent().remove(this._onChildItemHandlerChanging);
if (this.canvas.isItemHandlerSelected(data.item))
this.canvas.removeSelectedItemHandler(data.item);
itemHandler.canvas = null;
itemHandler.layer = null;
itemHandler.item.parentContainer = null;
this._resetPermissionsCache();
};
;
GroupItemHandler.prototype.replaceItemHandler = function (oldHandler, newHandler) {
var index = this.itemHandlers.indexOf(oldHandler);
if (index == -1)
throw new Exception("ItemHandler not found");
this.itemHandlers.replaceAt(newHandler, index);
newHandler.layer = this.layer;
this._onItemHandlerRemoved({ item: oldHandler, index: index });
this._onItemHandlerAdded({ item: newHandler, index: index });
};
GroupItemHandler.prototype.getNestedItemHandlers = function (excludeGroupItems, reversedZorder, onlyVisible) {
if (excludeGroupItems === void 0) { excludeGroupItems = false; }
if (reversedZorder === void 0) { reversedZorder = false; }
if (onlyVisible === void 0) { onlyVisible = false; }
var allNestedHandlers = [];
var itemHandlers = reversedZorder ? this.itemHandlers.toArray().slice().reverse() : this.itemHandlers.toArray().slice();
while (itemHandlers.length > 0) {
var itemHandler = itemHandlers.shift();
if (onlyVisible && (!itemHandler.isVisible() || itemHandler.getPermissions().noShow))
continue;
if (itemHandler instanceof GroupItemHandler) {
var groupItemItemHandlers = reversedZorder ? itemHandler.itemHandlers.toArray().slice().reverse() : itemHandler.itemHandlers.toArray();
itemHandlers.unshift.apply(itemHandlers, __spread(groupItemItemHandlers));
if (excludeGroupItems)
continue;
}
allNestedHandlers.push(itemHandler);
}
return allNestedHandlers;
};
GroupItemHandler.prototype.updateNestedItemHandlers = function (updateFunc) {
var e_2, _a;
var result = false;
try {
for (var _b = __values(this.itemHandlers), _c = _b.next(); !_c.done; _c = _b.next()) {
var handler = _c.value;
var updateResult = updateFunc(handler);
result = result || updateResult;
if (isIContainerItemHandler(handler)) {
updateResult = handler.updateNestedItemHandlers(updateFunc);
result = result || updateResult;
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
return result;
};
GroupItemHandler.prototype._onTransformRectangle = function (startRectangle, endRectangle, highlightOnly) {
_super.prototype._onTransformRectangle.call(this, startRectangle, endRectangle, highlightOnly);
this.itemHandlers.forEach(function (itemHandler) { return itemHandler.transformRectangle(startRectangle, endRectangle, highlightOnly); });
};
GroupItemHandler.prototype._updateImpl = function () {
return __awaiter(this, void 0, void 0, function () {
var promises, _a, _b, itemHandler;
var e_3, _c;
return __generator(this, function (_d) {
switch (_d.label) {
case 0:
promises = [];
if (this.itemHandlers != null) {
try {
for (_a = __values(this.itemHandlers), _b = _a.next(); !_b.done; _b = _a.next()) {
itemHandler = _b.value;
promises.push(itemHandler.updateAsync());
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
}
finally { if (e_3) throw e_3.error; }
}
}
return [4 /*yield*/, Promise.all(promises)];
case 1:
_d.sent();
return [4 /*yield*/, _super.prototype._updateImpl.call(this)];
case 2:
_d.sent();
return [2 /*return*/];
}
});
});
};
GroupItemHandler.prototype.quickUpdate = function () {
this.applyToItems(function (itemHandler) { return itemHandler.quickUpdate(); });
_super.prototype.quickUpdate.call(this);
};
GroupItemHandler.prototype.onResized = function () {
this.applyToItems(function (itemHandler) { return itemHandler.onResized(); });
return _super.prototype.onResized.call(this);
};
GroupItemHandler.prototype.startTransform = function (operation) {
this.applyToItems(function (itemHandler) { return itemHandler.startTransform(operation); });
_super.prototype.startTransform.call(this, operation);
};
GroupItemHandler.prototype._endTransform = function (changed, resized, supressOnChanged) {
if (supressOnChanged === void 0) { supressOnChanged = false; }
this.applyToItems(function (itemHandler) { return itemHandler.endTransform(changed, resized, true); });
_super.prototype._endTransform.call(this, changed, resized, supressOnChanged);
};
GroupItemHandler.prototype.transformChanged = function () {
_super.prototype.transformChanged.call(this);
this.applyToItems(function (i) { return i.transformChanged(); });
};
GroupItemHandler.prototype.setRectangle = function (rectangle, supressOnChanged) {
var _a = rectangle.getTransform(this.rectangle), translateX = _a.translateX, translateY = _a.translateY, scaleX = _a.scaleX, scaleY = _a.scaleY, angle = _a.angle;
var positioning = function (itemHandler) {
var rect = itemHandler.rectangle;
rect.translate(translateX, translateY);
rect.rotateAt(angle, rectangle.center);
itemHandler.setRectangle(rect, true);
if (itemHandler instanceof PlaceholderItemHandler)
itemHandler.updateContentAndFrames(positioning);
};
this.itemHandlers.forEach(positioning);
var positionedRectangle = this.rectangle;
var scaling = function (itemHandler) {
var rect = itemHandler.rectangle;
var offsetX = rect.centerX - positionedRectangle.centerX;
var offsetY = rect.centerY - positionedRectangle.centerY;
rect.setTransform(new Transform(scaleX, scaleY, offsetX * (scaleX - 1), offsetY * (scaleY - 1)));
itemHandler.setRectangle(rect, true);
if (itemHandler instanceof PlaceholderItemHandler)
itemHandler.updateContentAndFrames(scaling);
};
this.itemHandlers.forEach(scaling);
_super.prototype.setRectangle.call(this, rectangle, supressOnChanged);
};
Object.defineProperty(GroupItemHandler.prototype, "_calculateRectangleFromChild", {
get: function () {
return true;
},
enumerable: true,
configurable: true
});
GroupItemHandler.prototype._getRectangle = function () {
if (!this._calculateRectangleFromChild)
return _super.prototype._getRectangle.call(this);
return this._getRectangleFromChildren();
};
GroupItemHandler.prototype._getRectangleFromChildren = function () {
var itemHandlers = this.itemHandlers.where(function (x) { return x.isVisible(); });
var rectangles = itemHandlers.toArray().map(function (itemHandler) { return itemHandler.getTransformedRectangle(false, true); });
if (rectangles.length < 1)
return rectangles[0] != null ? rectangles[0] : new RotatedRectangleF();
var angle = this.item.transform.angle;
var center = rectangles.reduce(function (a, b) { return RotatedRectangleF.union(a, b); }).center;
var _a = rectangles
.map(function (rectangle) { return rectangle.rotateAt(-angle, center).bounds; })
.reduce(function (a, b) { return ({
left: Math.min(a.left, b.left),
top: Math.min(a.top, b.top),
right: Math.max(a.right, b.right),
bottom: Math.max(a.bottom, b.bottom)
}); }), left = _a.left, top = _a.top, bottom = _a.bottom, right = _a.right;
return RotatedRectangleF.FromLTRB(left, top, right, bottom).rotateAt(angle, center);
};
GroupItemHandler.prototype._onAddedOnCanvas = function (canvas) {
_super.prototype._onAddedOnCanvas.call(this, canvas);
this.applyToItems(function (itemHandler) { return itemHandler.canvas = canvas; });
};
GroupItemHandler.prototype._onRemovedFromCanvas = function (canvas) {
_super.prototype._onRemovedFromCanvas.call(this, canvas);
this.applyToItems(function (itemHandler) { return itemHandler.canvas = null; });
};
GroupItemHandler.prototype.applyToItems = function (func) {
if (this.itemHandlers != null)
for (var i = 0; i < this.itemHandlers.length; i++)
func(this.itemHandlers.getItem([i]));
};
GroupItemHandler.prototype.getPermissions = function () {
var e_4, _a;
if (this._cachedPermissions != null)
return this._cachedPermissions;
var permissions = _super.prototype.getPermissions.call(this).clone();
try {
for (var _b = __values(this.itemHandlers), _c = _b.next(); !_c.done; _c = _b.next()) {
var itemHandler = _c.value;
var ihPermissions = itemHandler.getPermissions();
if (!ihPermissions.allowMoveHorizontal)
permissions.allowMoveHorizontal = false;
if (!ihPermissions.allowMoveVertical)
permissions.allowMoveVertical = false;
if (!ihPermissions.allowRotate)
permissions.allowRotate = false;
if (!ihPermissions.resizeGrips.edge)
permissions.resizeGrips.edge = false;
if (!ihPermissions.resizeGrips.getCornerProportional())
permissions.resizeGrips.setCornerProportional(false);
if (!ihPermissions.resizeGrips.getCornerArbitrary())
permissions.resizeGrips.setCornerArbitrary(false);
if ((this.item.transform.angle - itemHandler.angle) % 90 !== 0) {
permissions.resizeGrips.edge = false;
permissions.resizeGrips.setCornerArbitrary(false);
}
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_4) throw e_4.error; }
}
permissions.showSelectToolbarButton = this.item.groupItemPermissions.allowReplaceContent;
this._cachedPermissions = permissions;
return permissions;
};
GroupItemHandler.prototype.resetPermissions = function () {
var e_5, _a;
_super.prototype.resetPermissions.call(this);
try {
for (var _b = __values(this.itemHandlers), _c = _b.next(); !_c.done; _c = _b.next()) {
var itemHandler = _c.value;
itemHandler.resetPermissions();
}
}
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_5) throw e_5.error; }
}
this._resetPermissionsCache();
};
GroupItemHandler.prototype.isChildVisible = function (itemHandler) {
return true;
};
Object.defineProperty(GroupItemHandler.prototype, "item", {
get: function () {
return this._getItem();
},
enumerable: true,
configurable: true
});
GroupItemHandler.prototype._resetPermissionsCache = function () {
this._cachedPermissions = null;
};
GroupItemHandler.typeName = "GroupItemHandler";
return GroupItemHandler;
}(BaseRectangleItemHandler));
export { GroupItemHandler };
//# sourceMappingURL=GroupItemHandler.js.map