UNPKG

@aurigma/design-atoms

Version:

Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.

572 lines 30.1 kB
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."); }; import { NotImplementedException } from "@aurigma/design-atoms-model/Exception"; import { BaseItemsCommand } from "./BaseItemsCommand"; import { BaseRectangleItemHandler, LayoutItemHandler, PlaceholderItemHandler } from "../../ItemHandlers"; var AlignItemsCommand = /** @class */ (function (_super) { __extends(AlignItemsCommand, _super); function AlignItemsCommand(productHandler, historyArgs, args, _canvas) { var _this = _super.call(this, productHandler, historyArgs, args) || this; _this._canvas = _canvas; _this._alignByPrintArea = function (items, align, targetPrintArea) { var rotateAngle = _this._productHandler.currentSurface.rotateAngle; var itemHandlerForFirstItem = _this._itemToItemHandler(items[0]); var boundsForFirstItem = _this._getItemBounds(itemHandlerForFirstItem, align); var printAreaBounds = _this._getPrintArea(boundsForFirstItem, targetPrintArea).bounds; var changedItems = []; items.forEach(function (item) { var itemHandler = _this._itemToItemHandler(item); var itemBounds = _this._getItemBounds(itemHandler, align); var originalRectangle = itemHandler.rectangle.clone(); var alignedRectangle; var adjustedAlign = _this._adjustAlignParameterByRotateAngle(rotateAngle, align); var regionExists = itemHandler.layer.region != null; if (regionExists) alignedRectangle = _this._getRectangleAlignedToRegion(itemBounds, itemHandler, adjustedAlign); else alignedRectangle = _this._getRectangleAlignedToPrintArea(itemBounds, itemHandler, adjustedAlign, printAreaBounds); alignedRectangle = _this._adjustAlignedRectangleForInteractiveItem(alignedRectangle, originalRectangle, itemBounds, itemHandler, adjustedAlign); var applyAlignmentToItemHandlerFunc = _this._getApplyAlignStrategy(itemHandler, alignedRectangle, originalRectangle); applyAlignmentToItemHandlerFunc(); var hasChanged = !originalRectangle.equals(alignedRectangle); if (hasChanged) changedItems.push(item); }); return changedItems; }; _this._alignBySelectionBounds = function (items, align) { var rotateAngle = _this._productHandler.currentSurface.rotateAngle; var baseRect = _this._canvas.selection.visibleRectangle; var changedItems = []; items.forEach(function (item) { var itemHandler = _this._itemToItemHandler(item); var bounds = _this._getItemBounds(itemHandler, align); var originalRectangle = itemHandler.rectangle.clone(); var alignedRectangle; var adjustedAlign = _this._adjustAlignParameterByRotateAngle(rotateAngle, align); alignedRectangle = _this._getRectangleAlignedToBoundBox(baseRect, bounds, itemHandler, adjustedAlign); itemHandler.setRectangle(alignedRectangle); var applyAlignmentToItemHandlerFunc = _this._getApplyAlignStrategy(itemHandler, alignedRectangle, originalRectangle); applyAlignmentToItemHandlerFunc(); var hasChanged = !originalRectangle.equals(alignedRectangle); if (hasChanged) changedItems.push(item); }); return changedItems; }; _this._alignBySafeArea = function (items, align, targetSafeArea) { var rotateAngle = _this._productHandler.currentSurface.rotateAngle; var itemHandlerForFirstItem = _this._itemToItemHandler(items[0]); var boundsForFirstItem = _this._getItemBounds(itemHandlerForFirstItem, align); var safeArea = _this._getSafeArea(targetSafeArea, boundsForFirstItem); var safeAreaMargin = safeArea.getMargin(); var printAreaBounds = _this._findPrintAreaBySafeArea(safeArea).bounds; var changedItems = []; items.forEach(function (item) { var itemHandler = _this._itemToItemHandler(item); var bounds = _this._getItemBounds(itemHandler, align); var originalRectangle = itemHandler.rectangle.clone(); var alignedRectangle; var adjustedAlign = _this._adjustAlignParameterByRotateAngle(rotateAngle, align); var regionExists = itemHandler.layer.region != null; if (regionExists) alignedRectangle = _this._getRectangleAlignedToRegion(bounds, itemHandler, adjustedAlign); else alignedRectangle = _this._getRectangleAlignedToSafeArea(bounds, itemHandler, adjustedAlign, safeAreaMargin, printAreaBounds); alignedRectangle = _this._adjustAlignedRectangleForInteractiveItem(alignedRectangle, originalRectangle, bounds, itemHandler, adjustedAlign); var applyAlignmentToItemHandlerFunc = _this._getApplyAlignStrategy(itemHandler, alignedRectangle, originalRectangle); applyAlignmentToItemHandlerFunc(); var hasChanged = !originalRectangle.equals(alignedRectangle); if (hasChanged) changedItems.push(item); }); return changedItems; }; _this._alignByGroup = function (items, align) { var rotateAngle = _this._productHandler.currentSurface.rotateAngle; var baseRect = _this._canvas.selection.parentRectangle.toRectangleF(); var changedItems = []; items.forEach(function (item) { var itemHandler = _this._itemToItemHandler(item); var bounds = _this._getItemBounds(itemHandler, align); var originalRectangle = itemHandler.rectangle.clone(); var alignedRectangle; var adjustedAlign = _this._adjustAlignParameterByRotateAngle(rotateAngle, align); alignedRectangle = _this._getRectangleAlignedToGroup(baseRect, bounds, itemHandler, adjustedAlign); itemHandler.setRectangle(alignedRectangle); alignedRectangle = _this._adjustAlignedRectangleForInteractiveItem(alignedRectangle, originalRectangle, bounds, itemHandler, adjustedAlign); var applyAlignmentToItemHandlerFunc = _this._getApplyAlignStrategy(itemHandler, alignedRectangle, originalRectangle); applyAlignmentToItemHandlerFunc(); var hasChanged = !originalRectangle.equals(alignedRectangle); if (hasChanged) changedItems.push(item); }); return changedItems; }; return _this; } AlignItemsCommand.prototype._executeCommandBody = function () { return __awaiter(this, void 0, void 0, function () { var alignStrategyFunc, changedItems; return __generator(this, function (_a) { if (this._canvas != null) this._canvas.pauseRedraw(); try { alignStrategyFunc = this._getAlignStrategy(this._args); changedItems = alignStrategyFunc(); changedItems.forEach(function (item) { return item.getItemChangedEvent().fire(); }); } finally { if (this._canvas != null) { this._canvas.continueRedraw(); this._canvas.updateTexts(); this._canvas.selection.update(); this._canvas.redraw(); } } return [2 /*return*/]; }); }); }; AlignItemsCommand.prototype._getAlignStrategy = function (args) { var items = this._getTargetItems(args.items, args.query, args.queryOptions); switch (args.target) { case "auto": if (items.length == 1) { if (!items[0].parentGroupItem) { return this._alignByPrintArea.bind(this, items, args.align, args.targetPrintArea); } else { return this._alignByGroup.bind(this, items, args.align); } } else { return this._alignBySelectionBounds.bind(this, items, args.align); } case "printArea": return this._alignByPrintArea.bind(this, items, args.align, args.targetPrintArea); case "safeArea": return this._alignBySafeArea.bind(this, items, args.align, args.targetSafeArea); default: throw "Unsupported alignment context: " + args.target; } }; AlignItemsCommand.prototype._itemToItemHandler = function (item) { var itemHandler = this._productHandler.getHandler(item); if (!(itemHandler instanceof BaseRectangleItemHandler)) throw "A BaseRectangleItemHandler expected in alignment command."; return itemHandler; }; AlignItemsCommand.prototype._adjustAlignedRectangleForInteractiveItem = function (alignedRectangle, originalRectangle, bounds, itemHandler, align) { var adjustedRectangle = alignedRectangle.clone(); var permissions = itemHandler.getPermissions(); var allowMoveHorizontal = permissions.allowMoveHorizontal; var allowMoveVertical = permissions.allowMoveVertical; if (this._itemRequiresFrameConsideration(itemHandler, align) && !itemHandler.isLocked() && this._isItemInteractive(itemHandler.item)) { if ((align === "bottom" || align === "top") && allowMoveVertical) { adjustedRectangle.centerY -= bounds.top + (bounds.height / 2) - originalRectangle.centerY; } if ((align === "left" || align === "right") && allowMoveHorizontal) { adjustedRectangle.centerX -= bounds.left + (bounds.width / 2) - originalRectangle.centerX; } } return adjustedRectangle; }; AlignItemsCommand.prototype._adjustAlignParameterByRotateAngle = function (angle, align) { var noRotationMap = new Map([ ['left', 'left'], ['horizontalCenter', 'horizontalCenter'], ['right', 'right'], ['top', 'top'], ['verticalCenter', 'verticalCenter'], ['bottom', 'bottom'] ]); var clockwiseRotationMap = new Map([ ['left', 'bottom'], ['horizontalCenter', 'verticalCenter'], ['right', 'top'], ['top', 'left'], ['verticalCenter', 'horizontalCenter'], ['bottom', 'right'] ]); var doubleClockwiseRotationMap = new Map([ ['left', 'right'], ['horizontalCenter', 'horizontalCenter'], ['right', 'left'], ['top', 'bottom'], ['verticalCenter', 'verticalCenter'], ['bottom', 'top'] ]); var counterClockwiseRotationMap = new Map([ ['left', 'top'], ['horizontalCenter', 'verticalCenter'], ['right', 'bottom'], ['top', 'right'], ['verticalCenter', 'horizontalCenter'], ['bottom', 'left'] ]); switch (angle) { case 0: return noRotationMap.get(align); case 90: return clockwiseRotationMap.get(align); case 180: return doubleClockwiseRotationMap.get(align); case 270: return counterClockwiseRotationMap.get(align); default: throw new Error("Cannot align when the rotation angle is " + angle + ". Use angles aliquot to 90 degrees."); } }; AlignItemsCommand.prototype._getRectangleAlignedToBoundBox = function (baseRect, bounds, itemHandler, align) { var rectangle = itemHandler.rectangle; var permissions = itemHandler.getPermissions(); var allowMoveHorizontal = permissions.allowMoveHorizontal; var allowMoveVertical = permissions.allowMoveVertical; switch (align) { case "left": if (allowMoveHorizontal) rectangle.centerX = baseRect.location.x + bounds.width / 2; break; case "horizontalCenter": if (allowMoveHorizontal) rectangle.centerX = baseRect.centerX; break; case "right": if (allowMoveHorizontal) rectangle.centerX = baseRect.getBottomRightCorner().x - bounds.width / 2; break; case "top": if (allowMoveVertical) rectangle.centerY = baseRect.location.y + bounds.height / 2; break; case "verticalCenter": if (allowMoveVertical) rectangle.centerY = baseRect.centerY; break; case "bottom": if (allowMoveVertical) rectangle.centerY = baseRect.getBottomRightCorner().y - bounds.height / 2; break; } return rectangle; }; AlignItemsCommand.prototype._getRectangleAlignedToRegion = function (bounds, itemHandler, align) { var rectangle = itemHandler.rectangle; var region = itemHandler.layer.region; var permissions = itemHandler.getPermissions(); var allowMoveHorizontal = permissions.allowMoveHorizontal; var allowMoveVertical = permissions.allowMoveVertical; switch (align) { case "left": if (allowMoveHorizontal) rectangle.centerX = region.left + bounds.width / 2; break; case "horizontalCenter": if (allowMoveHorizontal) rectangle.centerX = region.left + region.width / 2; break; case "right": if (allowMoveHorizontal) rectangle.centerX = region.left + region.width - bounds.width / 2; break; case "top": if (allowMoveVertical) rectangle.centerY = region.top + bounds.height / 2; break; case "verticalCenter": if (allowMoveVertical) rectangle.centerY = region.top + region.height / 2; break; case "bottom": if (allowMoveVertical) rectangle.centerY = region.top + region.height - bounds.height / 2; break; } return rectangle; }; AlignItemsCommand.prototype._getRectangleAlignedToGroup = function (baseRect, bounds, itemHandler, align) { var rectangle = itemHandler.rectangle; var permissions = itemHandler.getPermissions(); var allowMoveHorizontal = permissions.allowMoveHorizontal; var allowMoveVertical = permissions.allowMoveVertical; switch (align) { case "left": if (allowMoveHorizontal) rectangle.centerX = baseRect.left + bounds.width / 2; break; case "horizontalCenter": if (allowMoveHorizontal) rectangle.centerX = baseRect.left + baseRect.width / 2; break; case "right": if (allowMoveHorizontal) rectangle.centerX = baseRect.left + baseRect.width - bounds.width / 2; break; case "top": if (allowMoveVertical) rectangle.centerY = baseRect.top + bounds.height / 2; break; case "verticalCenter": if (allowMoveVertical) rectangle.centerY = baseRect.top + baseRect.height / 2; break; case "bottom": if (allowMoveVertical) rectangle.centerY = baseRect.top + baseRect.height - bounds.height / 2; break; } return rectangle; }; AlignItemsCommand.prototype._getRectangleAlignedToPrintArea = function (bounds, itemHandler, align, printAreaBounds) { var rectangle = itemHandler.rectangle; var permissions = itemHandler.getPermissions(); var allowMoveHorizontal = permissions.allowMoveHorizontal; var allowMoveVertical = permissions.allowMoveVertical; switch (align) { case "left": if (allowMoveHorizontal) rectangle.centerX = printAreaBounds.left + this._canvas.leftMargin + bounds.width / 2; break; case "horizontalCenter": if (allowMoveHorizontal) rectangle.centerX = printAreaBounds.left + this._canvas.leftMargin + (printAreaBounds.width - this._canvas.rightMargin - this._canvas.leftMargin) / 2; break; case "right": if (allowMoveHorizontal) rectangle.centerX = printAreaBounds.right - this._canvas.rightMargin - bounds.width / 2; break; case "top": if (allowMoveVertical) rectangle.centerY = printAreaBounds.top + this._canvas.topMargin + bounds.height / 2; break; case "verticalCenter": if (allowMoveVertical) rectangle.centerY = printAreaBounds.top + this._canvas.topMargin + (printAreaBounds.height - this._canvas.bottomMargin - this._canvas.topMargin) / 2; break; case "bottom": if (allowMoveVertical) rectangle.centerY = printAreaBounds.bottom - this._canvas.bottomMargin - bounds.height / 2; break; } return rectangle; }; AlignItemsCommand.prototype._getRectangleAlignedToSafeArea = function (bounds, itemHandler, align, safeAreaMargin, printAreaBounds) { var rectangle = itemHandler.rectangle; var permissions = itemHandler.getPermissions(); var allowMoveHorizontal = permissions.allowMoveHorizontal; var allowMoveVertical = permissions.allowMoveVertical; switch (align) { case "left": if (allowMoveHorizontal) rectangle.centerX = printAreaBounds.left + this._canvas.leftMargin + safeAreaMargin.left + bounds.width / 2; break; case "horizontalCenter": var availableWidth = printAreaBounds.width - safeAreaMargin.left - safeAreaMargin.right; if (allowMoveHorizontal) rectangle.centerX = printAreaBounds.left + safeAreaMargin.left + (availableWidth - this._canvas.rightMargin - this._canvas.leftMargin) / 2; break; case "right": if (allowMoveHorizontal) rectangle.centerX = printAreaBounds.right - this._canvas.rightMargin - safeAreaMargin.right - bounds.width / 2; break; case "top": if (allowMoveVertical) rectangle.centerY = printAreaBounds.top + safeAreaMargin.top + this._canvas.topMargin + bounds.height / 2; break; case "verticalCenter": var availableHeight = printAreaBounds.height - safeAreaMargin.top - safeAreaMargin.bottom; if (allowMoveVertical) rectangle.centerY = printAreaBounds.top + safeAreaMargin.top + (availableHeight - this._canvas.bottomMargin - this._canvas.topMargin) / 2; break; case "bottom": if (allowMoveVertical) rectangle.centerY = printAreaBounds.bottom - safeAreaMargin.bottom - this._canvas.bottomMargin - bounds.height / 2; break; } return rectangle; }; AlignItemsCommand.prototype._getSafeArea = function (safeArea, bounds) { var printArea = this._getPrintArea(bounds); var defaultSafeArea = printArea.safetyLines.get(0); return safeArea !== null && safeArea !== void 0 ? safeArea : defaultSafeArea; }; AlignItemsCommand.prototype._getPrintArea = function (bounds, printArea) { var printAreas = this._getPrintAreas(); var defaultPrintArea = this._findPrintAreaForItemBounds(bounds, printAreas); return printArea !== null && printArea !== void 0 ? printArea : defaultPrintArea; }; AlignItemsCommand.prototype._getPrintAreas = function () { return this._productHandler.currentSurface.printAreas; }; AlignItemsCommand.prototype._findPrintAreaBySafeArea = function (safeArea) { var e_1, _a, e_2, _b; var printAreas = this._getPrintAreas(); try { for (var printAreas_1 = __values(printAreas), printAreas_1_1 = printAreas_1.next(); !printAreas_1_1.done; printAreas_1_1 = printAreas_1.next()) { var printArea = printAreas_1_1.value; try { for (var _c = (e_2 = void 0, __values(printArea.safetyLines)), _d = _c.next(); !_d.done; _d = _c.next()) { var safetyLine = _d.value; if (safetyLine.name == safeArea.name) { return printArea; } } } catch (e_2_1) { e_2 = { error: e_2_1 }; } finally { try { if (_d && !_d.done && (_b = _c.return)) _b.call(_c); } finally { if (e_2) throw e_2.error; } } } } catch (e_1_1) { e_1 = { error: e_1_1 }; } finally { try { if (printAreas_1_1 && !printAreas_1_1.done && (_a = printAreas_1.return)) _a.call(printAreas_1); } finally { if (e_1) throw e_1.error; } } return null; }; AlignItemsCommand.prototype._findPrintAreaForItemBounds = function (bounds, printAreas) { var e_3, _a; var bestMatch = null; var bestDistanceSquared = Infinity; try { for (var printAreas_2 = __values(printAreas), printAreas_2_1 = printAreas_2.next(); !printAreas_2_1.done; printAreas_2_1 = printAreas_2.next()) { var printArea = printAreas_2_1.value; if (printArea.bounds.contains(bounds.center)) { return printArea; } else { var distanceSquared = bounds.center.distance(printArea.bounds.center); if (distanceSquared < bestDistanceSquared) { bestDistanceSquared = distanceSquared; bestMatch = printArea; } } } } catch (e_3_1) { e_3 = { error: e_3_1 }; } finally { try { if (printAreas_2_1 && !printAreas_2_1.done && (_a = printAreas_2.return)) _a.call(printAreas_2); } finally { if (e_3) throw e_3.error; } } if (bestMatch) return bestMatch; else throw new Error("There are no print areas"); }; AlignItemsCommand.prototype._getItemBounds = function (itemHandler, align) { if (this._itemRequiresFrameConsideration(itemHandler, align)) return itemHandler.getBoundsIncludingFrames(); return itemHandler.bounds; }; AlignItemsCommand.prototype._itemRequiresFrameConsideration = function (itemHandler, align) { return itemHandler instanceof PlaceholderItemHandler && !(align === "verticalCenter" || align === "horizontalCenter"); }; AlignItemsCommand.prototype._isItemInteractive = function (item) { return this._canvas.viewer.productHandler.isInteractive(item); }; AlignItemsCommand.prototype._getApplyAlignStrategy = function (itemHandler, alignedRectangle, originalRectangle) { if (itemHandler instanceof PlaceholderItemHandler) { return this._applyAlignmentToPlaceholderItem.bind(this, itemHandler, alignedRectangle, originalRectangle); } else if (itemHandler instanceof LayoutItemHandler) { return this._applyAlignmentToLayoutItem.bind(this, itemHandler, alignedRectangle); } else { return this._applyAlignmentToDefaultItem.bind(this, itemHandler, alignedRectangle); } }; AlignItemsCommand.prototype._applyAlignmentToPlaceholderItem = function (itemHandler, alignedRectangle, originalRectangle) { itemHandler.setRectangle(alignedRectangle, null, true); itemHandler.updateContentAndFrames(function (contentHandler) { var rect = contentHandler.rectangle; rect.centerX += (alignedRectangle.centerX - originalRectangle.centerX); rect.centerY += (alignedRectangle.centerY - originalRectangle.centerY); contentHandler.setRectangle(rect); }); }; AlignItemsCommand.prototype._applyAlignmentToLayoutItem = function (itemHandler, alignedRectangle) { itemHandler.setRectangle(alignedRectangle, null, true); }; AlignItemsCommand.prototype._applyAlignmentToDefaultItem = function (itemHandler, alignedRectangle) { itemHandler.setRectangle(alignedRectangle); }; AlignItemsCommand.prototype.redo = function () { throw new NotImplementedException(); }; AlignItemsCommand.prototype.undo = function () { throw new NotImplementedException(); }; return AlignItemsCommand; }(BaseItemsCommand)); export { AlignItemsCommand }; //# sourceMappingURL=AlignItemsCommand.js.map