@aurigma/design-atoms-model
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
403 lines • 17.3 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { GroupItem } from "./GroupItem";
import { EventObject } from "../../EventObject";
import { EqualsOfFloatNumbers } from "../../Math";
import { BaseTextItem } from ".";
import { Property } from "../Decorators/Property";
import { equals } from "../../Utils/Utils";
export class LayoutItem extends GroupItem {
constructor(items, layoutSettings) {
super(items);
this.type = LayoutItem.type;
this._onLayoutSettingsChanged = (propertyName) => {
this._propertyChanged.notify(this, propertyName);
};
this.layoutSettings = layoutSettings != null ? layoutSettings : new DefaultLayoutSettings();
}
getSimplifiedObject(omitProperties = []) {
var _a, _b;
const result = super.getSimplifiedObject(["layoutSettings"].concat(omitProperties));
result["layoutSettings"] = (_a = this.layoutSettings) === null || _a === void 0 ? void 0 : _a.getSimplifiedObject();
result["sourceRectangle"] = (_b = this.sourceRectangle) === null || _b === void 0 ? void 0 : _b.toJSON();
return result;
}
_copy(source, destination, generateNewIds, appropriateParentContainer) {
var _a;
super._copy(source, destination, generateNewIds, appropriateParentContainer);
if (generateNewIds) {
this._copyItemsOrder(source, destination);
}
destination.layoutSettings = source.layoutSettings.clone();
destination.sourceRectangle = (_a = source.sourceRectangle) === null || _a === void 0 ? void 0 : _a.clone();
}
_copyItemsOrder(source, destination) {
const sourceOrder = source.getItemsOrder();
if (sourceOrder) {
const targetOrder = sourceOrder.map(x => {
let sourceItemIndex = source.items.indexOf(item => item.id == x);
let targetItem = destination.items.get(sourceItemIndex);
return targetItem.id;
});
destination.setItemsOrder(targetOrder);
}
}
clone(generateNewIds = false, appropriateParentContainer = false) {
const item = new LayoutItem();
this._copy(this, item, generateNewIds, appropriateParentContainer);
return item;
}
get layoutSettings() {
return this._layoutSettings;
}
set layoutSettings(value) {
if (value == null)
throw new Error("LayoutSettings can't be null");
if (this._layoutSettings != null)
this._layoutSettings.propertyChanged.remove(this._onLayoutSettingsChanged);
this._layoutSettings = value;
this._layoutSettings.propertyChanged.add(this._onLayoutSettingsChanged);
this._onLayoutSettingsChanged("layoutSettings");
}
get sourceRectangle() {
return this._sourceRectangle;
}
set sourceRectangle(value) {
if (this._sourceRectangle != null && value == null)
throw new Error("LayoutItem.sourceRectangle can't be null");
if (value != null && value.equals(this._sourceRectangle))
return;
this._unsubscribeSourceRectangle();
this._sourceRectangle = value;
this._subscribeSourceRectangle();
this._propertyChanged.notify(this, "sourceRectangle");
}
_subscribeSourceRectangle() {
if (this._sourceRectangle == null)
return;
}
_unsubscribeSourceRectangle() {
if (this._sourceRectangle == null)
return;
}
addItems(items, targetIndex, orderIndex) {
let order = this.getItemsOrder();
if (order) {
if (!Number.isInteger(orderIndex))
throw new Error("orderIndex must not be null");
order = LayoutItem._insertToOrder(order, items.map(x => x.id), orderIndex);
this.setItemsOrder(order);
}
super.addItems(items, targetIndex);
}
removeItems(items) {
let order = this.getItemsOrder();
if (order) {
items.forEach((item) => order = order.filter((id) => id !== item.id));
this.setItemsOrder(order);
}
super.removeItems(items);
}
addItem(item, targetIndex, orderIndex) {
let order = this.getItemsOrder();
if (order != null) {
order = LayoutItem._insertToOrder(order, [item.id], orderIndex);
this.setItemsOrder(order);
}
super.addItem(item, targetIndex);
}
static _insertToOrder(order, newItems, index) {
let part1 = order.slice(0, index);
let part2 = order.slice(index);
order = part1.concat(newItems, part2);
return order;
}
setItemsOrder(ids) {
this.tags[LayoutItem._layoutItemsOrderTagKey] = ids;
}
getItemsOrder() {
const value = this.tags[LayoutItem._layoutItemsOrderTagKey];
if (value == null) {
return null;
}
if (!(value instanceof Array)) {
return null;
}
return value;
}
getSortedItems() {
const order = this.getItemsOrder();
var nestedItems = this.items.toArray();
if (order != null && nestedItems != null)
return order.map(id => nestedItems.find(i => i.id === id));
return null;
}
getItemOrderIndex(item) {
if (this.items.indexOf(item) < 0)
return -1;
let order = this.getItemsOrder();
return order === null || order === void 0 ? void 0 : order.indexOf(item.id);
}
static generateAutoLayoutSettings(rectangles, alignItems, orientation, margin, justifyContent) {
const autoLayoutSettings = new AutoLayoutSettings();
const leftBounds = rectangles.map(rectangle => rectangle.left);
const rightBounds = rectangles.map(rectangle => rectangle.right);
const topBounds = rectangles.map(rectangle => rectangle.top);
const bottomBounds = rectangles.map(rectangle => rectangle.bottom);
const centersX = rectangles.map(rectangle => rectangle.center.x);
const centersY = rectangles.map(rectangle => rectangle.center.y);
if (orientation == null) {
const horizontalDelta = Math.max(...centersX) - Math.min(...centersX);
const verticalDelta = Math.max(...centersY) - Math.min(...centersY);
orientation = horizontalDelta > verticalDelta
? AutoLayoutOrientation.horizontal
: AutoLayoutOrientation.vertical;
}
autoLayoutSettings.orientation = orientation;
if (alignItems == null)
switch (autoLayoutSettings.orientation) {
case AutoLayoutOrientation.horizontal:
if (EqualsOfFloatNumbers(Math.max(...topBounds), Math.min(...topBounds), 5))
alignItems = AutoLayoutAlignItems.start;
else if (EqualsOfFloatNumbers(Math.max(...centersY), Math.min(...centersY), 5))
alignItems = AutoLayoutAlignItems.center;
else if (EqualsOfFloatNumbers(Math.max(...bottomBounds), Math.min(...bottomBounds), 5))
alignItems = AutoLayoutAlignItems.end;
else
alignItems = AutoLayoutAlignItems.none;
break;
case AutoLayoutOrientation.vertical:
if (EqualsOfFloatNumbers(Math.max(...leftBounds), Math.min(...leftBounds), 5))
alignItems = AutoLayoutAlignItems.start;
else if (EqualsOfFloatNumbers(Math.max(...centersX), Math.min(...centersX), 5))
alignItems = AutoLayoutAlignItems.center;
else if (EqualsOfFloatNumbers(Math.max(...rightBounds), Math.min(...rightBounds), 5))
alignItems = AutoLayoutAlignItems.end;
else
alignItems = AutoLayoutAlignItems.none;
break;
default:
break;
}
autoLayoutSettings.alignItems = alignItems;
const sortedRectangles = autoLayoutSettings.orientation === AutoLayoutOrientation.horizontal
? rectangles.sort((a, b) => a.left - b.left)
: rectangles.sort((a, b) => a.top - b.top);
const margins = [];
for (let i = 1; i < sortedRectangles.length; i++) {
const previousRectangle = sortedRectangles[i - 1];
const rectangle = sortedRectangles[i];
margins.push(autoLayoutSettings.orientation === AutoLayoutOrientation.horizontal
? rectangle.left - previousRectangle.right
: rectangle.top - previousRectangle.bottom);
}
if (margin == null)
margin = margins.length > 0
? Math.max(0, Math.min(...margins.map(Math.round)))
: 0;
autoLayoutSettings.margin = margin;
if (justifyContent == null)
justifyContent = EqualsOfFloatNumbers(Math.max(...margins), Math.min(...margins), 2)
? AutoLayoutJustifyContent.stretch
: AutoLayoutJustifyContent.spaceBetween;
autoLayoutSettings.justifyContent = justifyContent;
return autoLayoutSettings;
}
isChildVisible(item) {
if (item instanceof BaseTextItem) {
return !item.isEmpty();
}
return true;
}
equals(other) {
const superEq = super.equals(other);
const sourceRectangleEq = equals(this.sourceRectangle, other.sourceRectangle);
const layoutSettingsEq = equals(this.layoutSettings, other.layoutSettings);
return superEq && sourceRectangleEq && layoutSettingsEq;
}
}
LayoutItem._layoutItemsOrderTagKey = "$layoutItemsOrder";
LayoutItem.type = "LayoutItem";
;
export var LayoutType;
(function (LayoutType) {
LayoutType[LayoutType["default"] = 0] = "default";
LayoutType[LayoutType["auto"] = 1] = "auto";
})(LayoutType || (LayoutType = {}));
;
export var AutoLayoutAlignItems;
(function (AutoLayoutAlignItems) {
AutoLayoutAlignItems[AutoLayoutAlignItems["none"] = 0] = "none";
AutoLayoutAlignItems[AutoLayoutAlignItems["center"] = 1] = "center";
AutoLayoutAlignItems[AutoLayoutAlignItems["start"] = 2] = "start";
AutoLayoutAlignItems[AutoLayoutAlignItems["end"] = 3] = "end";
})(AutoLayoutAlignItems || (AutoLayoutAlignItems = {}));
export var AutoLayoutOrientation;
(function (AutoLayoutOrientation) {
AutoLayoutOrientation[AutoLayoutOrientation["vertical"] = 0] = "vertical";
AutoLayoutOrientation[AutoLayoutOrientation["horizontal"] = 1] = "horizontal";
})(AutoLayoutOrientation || (AutoLayoutOrientation = {}));
export var AutoLayoutJustifyContent;
(function (AutoLayoutJustifyContent) {
AutoLayoutJustifyContent[AutoLayoutJustifyContent["stretch"] = 0] = "stretch";
AutoLayoutJustifyContent[AutoLayoutJustifyContent["spaceBetween"] = 1] = "spaceBetween";
})(AutoLayoutJustifyContent || (AutoLayoutJustifyContent = {}));
export var AutoLayoutAnchorPoint;
(function (AutoLayoutAnchorPoint) {
AutoLayoutAnchorPoint[AutoLayoutAnchorPoint["start"] = 0] = "start";
AutoLayoutAnchorPoint[AutoLayoutAnchorPoint["center"] = 1] = "center";
AutoLayoutAnchorPoint[AutoLayoutAnchorPoint["end"] = 2] = "end";
})(AutoLayoutAnchorPoint || (AutoLayoutAnchorPoint = {}));
export class DefaultLayoutSettings {
constructor() {
this.type = DefaultLayoutSettings.type;
this.propertyChanged = new EventObject();
}
clone() {
return new DefaultLayoutSettings();
}
getSimplifiedObject() {
const result = {};
result["type"] = DefaultLayoutSettings.type;
return result;
}
equals(other) {
const typeEq = equals(this.type, other.type);
return typeEq;
}
}
DefaultLayoutSettings.type = "DefaultLayoutSettings";
export class AutoLayoutSettings extends DefaultLayoutSettings {
constructor() {
super(...arguments);
this.type = AutoLayoutSettings.type;
this._margin = 0;
this._orientation = AutoLayoutOrientation.vertical;
this._alignItems = AutoLayoutAlignItems.none;
this._anchorPoint = AutoLayoutAnchorPoint.start;
this._justifyContent = AutoLayoutJustifyContent.stretch;
}
get margin() {
return this._margin;
}
set margin(value) {
if (value == null)
throw new Error("Margin can't be null");
if (value === this.margin)
return;
this._margin = value;
this.propertyChanged.notify("margin");
}
get orientation() {
return this._orientation;
}
set orientation(value) {
if (value == null)
throw Error("Orientation can't be null");
if (value === this.orientation)
return;
this._orientation = value;
this.propertyChanged.notify("orientation");
}
get alignItems() {
return this._alignItems;
}
set alignItems(value) {
if (value == null)
throw new Error("alignItems can't be null");
if (value === this.alignItems)
return;
this._alignItems = value;
this.propertyChanged.notify("alignItems");
}
get justifyContent() {
return this._justifyContent;
}
set justifyContent(value) {
if (value == null)
throw new Error("JustifyContent can't be null");
if (value === this.justifyContent)
return;
this._justifyContent = value;
this.propertyChanged.notify("justifyContent");
}
get anchorPoint() {
return this._anchorPoint;
}
set anchorPoint(value) {
if (value == null)
throw new Error("anchorPoint can't be null");
if (value === this._anchorPoint)
return;
this._anchorPoint = value;
this.propertyChanged.notify("anchorPoint");
}
clone() {
const clone = new AutoLayoutSettings();
clone.orientation = this.orientation;
clone.alignItems = this.alignItems;
clone.justifyContent = this.justifyContent;
clone.margin = this.margin;
clone.anchorPoint = this.anchorPoint;
return clone;
}
getSimplifiedObject() {
const result = super.getSimplifiedObject();
result["type"] = AutoLayoutSettings.type;
result["orientation"] = this.orientation;
result["alignItems"] = this.alignItems;
result["justifyContent"] = this.justifyContent;
result["margin"] = this.margin;
result["anchorPoint"] = this.anchorPoint;
return result;
}
equals(other) {
const superEq = super.equals(other);
const orientationEq = equals(this.orientation, other.orientation);
const alignItemsEq = equals(this.alignItems, other.alignItems);
const marginEq = equals(this.margin, other.margin);
const anchorPointEq = equals(this.anchorPoint, other.anchorPoint);
return superEq && orientationEq && alignItemsEq && marginEq && anchorPointEq;
}
}
AutoLayoutSettings.type = "AutoLayoutSettings";
__decorate([
Property({ ignore: true }),
__metadata("design:type", Object)
], AutoLayoutSettings.prototype, "type", void 0);
__decorate([
Property({
enumObject: Object.assign({}, AutoLayoutOrientation)
}),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], AutoLayoutSettings.prototype, "orientation", null);
__decorate([
Property({
enumObject: AutoLayoutAlignItems
}),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], AutoLayoutSettings.prototype, "alignItems", null);
__decorate([
Property({
enumObject: AutoLayoutJustifyContent
}),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], AutoLayoutSettings.prototype, "justifyContent", null);
__decorate([
Property({
enumObject: AutoLayoutAnchorPoint
}),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], AutoLayoutSettings.prototype, "anchorPoint", null);
//# sourceMappingURL=LayoutItem.js.map