@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
564 lines • 27.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 __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 { LayoutItem, BaseTextItem, AutoLayoutSettings, GroupItem } from "@aurigma/design-atoms-model/Product/Items";
import { RotatedRectangleF, RectangleF, Transform } from "@aurigma/design-atoms-model/Math";
import { GroupItemHandler } from "./GroupItemHandler";
import { BaseRectangleItemHandler } from "./BaseRectangleItemHandler";
import { PlaceholderItemHandler } from "./PlaceholderItemHandler";
import { BaseTextItemHandler } from "./BaseTextItemHandler";
import { ItemUtils } from "../Utils/ItemUtils";
import { AutoLayoutHandler } from "./LayoutItem/AutoLayoutHandler";
import { EventObject } from "@aurigma/design-atoms-model/EventObject";
import { NewBaseTextItemHandler } from "./NewBaseTextItemHandler";
var LayoutItemHandler = /** @class */ (function (_super) {
__extends(LayoutItemHandler, _super);
function LayoutItemHandler(item, itemHandlers, _history, textWhizz) {
if (textWhizz === void 0) { textWhizz = null; }
var _this = _super.call(this, item, itemHandlers, textWhizz) || this;
_this._history = _history;
_this._layoutEvent = new EventObject();
_this._visibilityState = null;
_this._visibilityStateChangedEvent = new EventObject();
_this._isEmpty = null;
_this._disableApplyLayout = false;
_this._rectMap = {};
_this._onChildItemChanged = function (sender) {
var handler = _this.canvas.getItemHandler(sender);
var newRect = handler.rectangle;
if (newRect.equals(_this._rectMap[handler.uniqueId]))
return;
_this._rectMap[handler.uniqueId] = newRect;
_this.applyLayout();
};
_this._onChildItemHandlerVisibilityChanged = function () {
_this._updateVisibilityState();
_this.applyLayout();
};
_this._onChildItemHandlerLayout = function (changed) {
if (changed) {
_this._updateVisibilityState();
_this.applyLayout();
}
};
_this._onChildItemHandlerChanging = function (sender) {
if (_this._layoutHandler == null || !(_this._layoutHandler instanceof AutoLayoutHandler))
_this._resetSourceRectangle();
_this.raiseChanging(_this.item);
};
_this._transformStarted = false;
_this._transformedRectangle = null;
_this._applyMatrix = function (matrix, finished, newAngle) {
if (newAngle === void 0) { newAngle = null; }
var transform = function (handler) { return handler.setRectangle(handler.rectangle.transformByMatrix(matrix, newAngle), !finished); };
transform(_this);
if (!_this._transformStarted)
return;
var layoutItemHandlers = [_this];
while (layoutItemHandlers.length > 0) {
var handler = layoutItemHandlers.shift();
var itemHandlers = handler.itemHandlers.ofType(BaseRectangleItemHandler);
itemHandlers.forEach(function (i) {
transform(i);
if (i instanceof LayoutItemHandler) {
layoutItemHandlers.push(i);
}
if (i instanceof PlaceholderItemHandler && i.content != null) {
transform(i.content);
}
});
}
};
_this._onItemHandlerExitedEditMode = function (sender) {
_this._updateVisibilityState();
_this.applyLayout(sender);
};
_this._onItemHandlerEnteredEditMode = function (sender) {
_this._updateVisibilityState();
};
_this._onChildGroupItemsChanged = function (sender, property) {
if (property == "items") {
_this._subscribeChildItemChanges(sender);
}
};
_this._subscribeChildItemHandlers();
return _this;
}
LayoutItemHandler.prototype.getSelectionRectangle = function () {
return this._getRectangleFromChildren();
};
LayoutItemHandler.prototype._getHighlightRectangle = function () {
return this._getRectangleFromChildren();
};
LayoutItemHandler.prototype.setItemHandlers = function (itemHandlers) {
var _this = this;
this._unsubscribeChildItemHandlers();
this._disableApplyLayout = true;
_super.prototype.setItemHandlers.call(this, itemHandlers);
this._disableApplyLayout = false;
this._initSourceRectangle().then(function () {
_this._initLayoutHandler();
_this.applyLayout(null);
});
this._subscribeChildItemHandlers();
};
LayoutItemHandler.prototype._isGroupHandler = function () {
return true;
};
LayoutItemHandler.prototype._onItemPropertyChanged = function (sender, propertyName) {
switch (propertyName) {
case "layoutSettings":
this._initLayoutHandler();
break;
}
};
LayoutItemHandler.prototype._initLayoutHandler = function () {
if (this.item.layoutSettings instanceof AutoLayoutSettings) {
if (!(this._layoutHandler instanceof AutoLayoutHandler)) {
this._layoutHandler = new AutoLayoutHandler(this.item, this.itemHandlers, this, this._history);
this._layoutHandler.getLayoutEvent().add(this._onLayoutHandlerLayoutEvent.bind(this));
}
else
this._layoutHandler._init();
}
else {
if (this._layoutHandler != null)
this._layoutHandler.dispose();
this._layoutHandler = null;
}
};
LayoutItemHandler.prototype.getVisibilityStateChangedEvent = function () {
return this._visibilityStateChangedEvent;
};
LayoutItemHandler.prototype.getLayoutEvent = function () {
return this._layoutEvent;
};
LayoutItemHandler.prototype._onLayoutHandlerLayoutEvent = function (changed) {
if (this.canvas != null) {
this.canvas.updateSelection();
this.canvas.updateButtonGroups({
placeholderHandler: this,
placeholderHandlerPosition: true,
violationContainerHandler: this,
violationContainerHandlerPosition: true
});
this.getChangingEvent().notify(this.item);
this.canvas.redraw();
}
this._layoutEvent.notify(changed);
};
LayoutItemHandler.prototype._initSourceRectangle = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (this.item.sourceRectangle && !this.item.sourceRectangle.isEmpty())
return [2 /*return*/];
return [4 /*yield*/, this._resetSourceRectangle()];
case 1:
_a.sent();
return [2 /*return*/];
}
});
});
};
LayoutItemHandler.prototype._resetSourceRectangle = function () {
return __awaiter(this, void 0, void 0, function () {
var sourceRectangle;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, this.waitUpdate()];
case 1:
_a.sent();
if (this.itemHandlers.any()) {
sourceRectangle = this.itemHandlers.cast().select(function (x) { return x.rectangle; }).aggregate(function (a, b) { return RotatedRectangleF.union(a, b); });
this.setSourceRectangle(sourceRectangle);
}
return [2 /*return*/];
}
});
});
};
LayoutItemHandler.prototype.waitUpdate = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, Promise.all(this.itemHandlers.toArray().map(function (vo) { return vo.waitUpdate(); }))];
case 1:
_a.sent();
return [2 /*return*/];
}
});
});
};
LayoutItemHandler.prototype.startTransform = function (operation) {
this._originalHeight = this.height;
this._transformStarted = true;
if (this._layoutHandler)
this._layoutHandler.ignoreLayoutApply = true;
_super.prototype.startTransform.call(this, operation);
};
LayoutItemHandler.prototype.onResized = function () {
var scale = this.height / this._originalHeight;
if (this.item.layoutSettings != null && this.item.layoutSettings instanceof AutoLayoutSettings)
this.item.layoutSettings.margin *= scale;
return _super.prototype.onResized.call(this);
};
LayoutItemHandler.prototype._endTransform = function (changed, resized, suppressOnChanged) {
var _a, _b, _c, _d;
_super.prototype._endTransform.call(this, changed, resized, suppressOnChanged);
if (this._transformedRectangle == null) {
this._transformStarted = false;
if (this._layoutHandler)
this._layoutHandler.ignoreLayoutApply = false;
return;
}
(_a = this.canvas) === null || _a === void 0 ? void 0 : _a.pauseRedraw();
var t = this._transformedRectangle;
this._transformedRectangle = null;
this._transformStarted = false;
//await this.waitUpdate();
(_b = this._history) === null || _b === void 0 ? void 0 : _b.pause();
this.setSourceRectangle(t);
if (this._layoutHandler)
this._layoutHandler.ignoreLayoutApply = false;
this.applyLayout(null);
(_c = this._history) === null || _c === void 0 ? void 0 : _c.resume(true, false, true);
(_d = this.canvas) === null || _d === void 0 ? void 0 : _d.continueRedraw();
};
LayoutItemHandler.prototype._getChildrenHighlights = function () {
var _this = this;
if (this._layoutHandler == null)
return [];
var result = [];
this.itemHandlers
.toArray()
.filter(function (itemHandler) { return _this._layoutHandler._filterHiddenItems(itemHandler); })
.forEach(function (itemHandler) { return result.push.apply(result, __spread(itemHandler.getHighlightRectangles())); });
return result;
};
Object.defineProperty(LayoutItemHandler.prototype, "_calculateRectangleFromChild", {
get: function () {
return false;
},
enumerable: true,
configurable: true
});
LayoutItemHandler.prototype._getRectangle = function () {
if (this._transformedRectangle)
return this._transformedRectangle;
return _super.prototype._getRectangle.call(this);
};
LayoutItemHandler.prototype.isEmpty = function () {
var value = this._calculateIsEmpty();
this._updateIsEmpty(value);
return value;
};
LayoutItemHandler.prototype.isVisible = function () {
return _super.prototype.isVisible.call(this) && !this.isEmpty();
};
LayoutItemHandler.prototype.applyLayout = function (sender) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
if (this._disableApplyLayout)
return [2 /*return*/];
if (sender instanceof PlaceholderItemHandler && sender.editing)
return [2 /*return*/];
return [4 /*yield*/, this.waitUpdate()];
case 1:
_a.sent();
if (this.item.layoutSettings instanceof AutoLayoutSettings && this._layoutHandler) {
this._layoutHandler.applyLayout();
}
else {
this._resetSourceRectangle();
this._onLayoutHandlerLayoutEvent(false);
}
return [2 /*return*/];
}
});
});
};
LayoutItemHandler.prototype.getControlBounds = function () {
if (!this.item.sourceRectangle)
return new RectangleF();
return this.item.sourceRectangle;
};
LayoutItemHandler.prototype.setRectangle = function (rectangle, suppressOnChanged, updateChildren) {
if (updateChildren === void 0) { updateChildren = true; }
if (this._transformStarted) {
this._transformedRectangle = rectangle.clone();
if (updateChildren)
_super.prototype.setRectangle.call(this, rectangle, suppressOnChanged);
return;
}
if (updateChildren)
_super.prototype.setRectangle.call(this, rectangle, suppressOnChanged);
this.setSourceRectangle(rectangle);
};
LayoutItemHandler.prototype.setSourceRectangle = function (rectangle) {
this.item.sourceRectangle = rectangle.toRectangleF();
this.item.transform = new Transform(1, 1, 0, 0, rectangle.angle);
};
LayoutItemHandler.prototype.getOrderedItems = function () {
var result = null;
if (this.item.layoutSettings instanceof AutoLayoutSettings && this._layoutHandler != null)
result = this._layoutHandler.getOrderedItems();
else
result = _super.prototype.getOrderedItems.call(this);
return result;
};
LayoutItemHandler.prototype.generateAndApplyAutolayoutSettings = function (alignItems, orientation, margin, justifyContent) {
this.item.layoutSettings = LayoutItem.generateAutoLayoutSettings(this.itemHandlers.toArray().map(function (itemHandler) { return itemHandler.getTransformedRectangle(false, true).bounds; }), alignItems, orientation, margin, justifyContent);
};
LayoutItemHandler.prototype._onItemAdded = function (data) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_super.prototype._onItemAdded.call(this, data);
if (!(data.item instanceof BaseTextItem)) return [3 /*break*/, 2];
return [4 /*yield*/, ItemUtils.waitForItemsUpdated([data.item], this.canvas)];
case 1:
_a.sent();
_a.label = 2;
case 2:
this._subscribeChildItemChanges(data.item);
this.applyLayout(this.itemHandlers.first(function (itemHandler) { return itemHandler.item === data.item; }));
return [2 /*return*/];
}
});
});
};
LayoutItemHandler.prototype._onItemRemoved = function (data) {
_super.prototype._onItemRemoved.call(this, data);
this._unsubscribeChildItemChanges(data.item);
if (this._layoutHandler)
this._layoutHandler.onItemRemoved(data);
else
this._resetSourceRectangle();
};
LayoutItemHandler.prototype._onItemHandlerAdded = function (data) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
_super.prototype._onItemHandlerAdded.call(this, data);
if (this._layoutHandler instanceof AutoLayoutHandler)
this._layoutHandler.onItemHandlersCollectionChanged();
this.applyLayout();
return [2 /*return*/];
});
});
};
LayoutItemHandler.prototype._updateVisibilityState = function () {
var visible = this.isVisible();
if (visible === this._visibilityState)
return;
this._visibilityState = visible;
this._onVisibilityStateChanged();
};
LayoutItemHandler.prototype._onVisibilityStateChanged = function () {
this.applyLayout();
this._visibilityStateChangedEvent.notify();
};
LayoutItemHandler.prototype._onItemHandlerRemoved = function (data) {
_super.prototype._onItemHandlerRemoved.call(this, data);
if (this._layoutHandler instanceof AutoLayoutHandler)
this._layoutHandler.onItemHandlersCollectionChanged();
};
;
LayoutItemHandler.prototype._subscribeChildItemHandlers = function () {
var _this = this;
var _a;
(_a = this.itemHandlers) === null || _a === void 0 ? void 0 : _a.forEach(function (x) { return _this._subscribeChildItemHandler(x); });
};
LayoutItemHandler.prototype._unsubscribeChildItemHandlers = function () {
var _this = this;
this.itemHandlers.forEach(function (x) { return _this._unsubscribeChildItemHandler(x); });
};
LayoutItemHandler.prototype._subscribeChildItemHandler = function (itemHandler) {
itemHandler.getChangingEvent().add(this._onChildItemHandlerChanging);
if (itemHandler instanceof NewBaseTextItemHandler) {
itemHandler.exitedEditModeEvent.add(this._onItemHandlerExitedEditMode);
itemHandler.enteredEditModeEvent.add(this._onItemHandlerEnteredEditMode);
}
if (itemHandler instanceof LayoutItemHandler) {
itemHandler.getLayoutEvent().add(this._onChildItemHandlerLayout);
itemHandler.getVisibilityStateChangedEvent().add(this._onChildItemHandlerVisibilityChanged);
}
};
LayoutItemHandler.prototype._unsubscribeChildItemHandler = function (itemHandler) {
itemHandler.getChangingEvent().remove(this._onChildItemHandlerChanging);
if (itemHandler instanceof NewBaseTextItemHandler) {
itemHandler.exitedEditModeEvent.remove(this._onItemHandlerExitedEditMode);
itemHandler.enteredEditModeEvent.remove(this._onItemHandlerEnteredEditMode);
}
if (itemHandler instanceof LayoutItemHandler) {
itemHandler.getLayoutEvent().remove(this._onChildItemHandlerLayout);
itemHandler.getVisibilityStateChangedEvent().remove(this._onChildItemHandlerVisibilityChanged);
}
};
LayoutItemHandler.prototype._unsubscribeChildItems = function () {
var _this = this;
this.item.items.forEach(function (x) { return _this._unsubscribeChildItemChanges(x); });
};
LayoutItemHandler.prototype._subscribeChildItems = function () {
var _this = this;
this.item.items.forEach(function (x) { return _this._subscribeChildItemChanges(x); });
};
LayoutItemHandler.prototype._unsubscribeChildItemChanges = function (item) {
var _this = this;
if (item instanceof GroupItem) {
item.applyToItems(function (x) { return _this._unsubscribeChildItemChanges(x); });
item.removePropertyChanged(this._onChildGroupItemsChanged);
}
item.getItemChangedEvent().remove(this._onChildItemChanged);
};
LayoutItemHandler.prototype._subscribeChildItemChanges = function (item) {
var _this = this;
if (item instanceof GroupItem) {
item.applyToItems(function (x) { return _this._subscribeChildItemChanges(x); });
item.addPropertyChanged(this._onChildGroupItemsChanged);
}
item.getItemChangedEvent().add(this._onChildItemChanged);
};
LayoutItemHandler.prototype._onRemovedFromCanvas = function (canvas) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
this._unsubscribeChildItems();
this._unsubscribeChildItemHandlers();
_super.prototype._onRemovedFromCanvas.call(this, canvas);
return [2 /*return*/];
});
});
};
LayoutItemHandler.prototype._onAddedOnCanvas = function (canvas) {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
_super.prototype._onAddedOnCanvas.call(this, canvas);
this._subscribeChildItems();
this._initLayoutHandler();
return [4 /*yield*/, this._initSourceRectangle()];
case 1:
_a.sent();
return [2 /*return*/];
}
});
});
};
LayoutItemHandler.prototype.drawItemHandler = function (itemHandlerCtx) {
if (this.isEmpty())
return;
_super.prototype.drawItemHandler.call(this, itemHandlerCtx);
};
Object.defineProperty(LayoutItemHandler.prototype, "item", {
get: function () {
return this._getItem();
},
enumerable: true,
configurable: true
});
LayoutItemHandler.prototype.isChildVisible = function (childItemHandler) {
if (childItemHandler instanceof BaseTextItemHandler || childItemHandler instanceof NewBaseTextItemHandler) {
return !childItemHandler.isEmpty();
}
return true;
};
LayoutItemHandler.prototype._calculateIsEmpty = function () {
var itemHandlersToCheck = this.itemHandlers.where(function (x) {
var result = false;
if ((x instanceof BaseTextItemHandler || x instanceof NewBaseTextItemHandler) && !x.isLocked())
result = true;
else if (x instanceof LayoutItemHandler)
result = true;
return result;
});
if (!itemHandlersToCheck.any())
return false;
var hasNonEmptyChildren = itemHandlersToCheck.any(function (element) { return !element.isEmpty(); });
var result = !hasNonEmptyChildren;
return result;
};
LayoutItemHandler.prototype._updateIsEmpty = function (value) {
if (value === this._isEmpty)
return;
this._isEmpty = value;
this._onEmptyStateChanged();
};
LayoutItemHandler.prototype._onEmptyStateChanged = function () {
this.itemHandlers.forEach(function (x) { return x.update(); });
};
LayoutItemHandler.typeName = "LayoutItemHandler";
return LayoutItemHandler;
}(GroupItemHandler));
export { LayoutItemHandler };
//# sourceMappingURL=LayoutItemHandler.js.map