@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.
488 lines • 22.7 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 __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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);
};
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 { GroupItem } from "./GroupItem";
import { EventObject } from "../../EventObject";
import { EqualsOfFloatNumbers } from "../../Math";
import { BaseTextItem } from ".";
import { Property } from "../Decorators/Property";
import { equals } from "../../Utils/Utils";
var LayoutItem = /** @class */ (function (_super) {
__extends(LayoutItem, _super);
function LayoutItem(items, layoutSettings) {
var _this = _super.call(this, items) || this;
_this.type = LayoutItem.type;
_this._onLayoutSettingsChanged = function (propertyName) {
_this._propertyChanged.notify(_this, propertyName);
};
_this.layoutSettings = layoutSettings != null ? layoutSettings : new DefaultLayoutSettings();
return _this;
}
LayoutItem.prototype.getSimplifiedObject = function (omitProperties) {
if (omitProperties === void 0) { omitProperties = []; }
var _a, _b;
var result = _super.prototype.getSimplifiedObject.call(this, ["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;
};
LayoutItem.prototype._copy = function (source, destination, generateNewIds, appropriateParentContainer) {
var _a;
_super.prototype._copy.call(this, 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();
};
LayoutItem.prototype._copyItemsOrder = function (source, destination) {
var sourceOrder = source.getItemsOrder();
if (sourceOrder) {
var targetOrder = sourceOrder.map(function (x) {
var sourceItemIndex = source.items.indexOf(function (item) { return item.id == x; });
var targetItem = destination.items.get(sourceItemIndex);
return targetItem.id;
});
destination.setItemsOrder(targetOrder);
}
};
LayoutItem.prototype.clone = function (generateNewIds, appropriateParentContainer) {
if (generateNewIds === void 0) { generateNewIds = false; }
if (appropriateParentContainer === void 0) { appropriateParentContainer = false; }
var item = new LayoutItem();
this._copy(this, item, generateNewIds, appropriateParentContainer);
return item;
};
Object.defineProperty(LayoutItem.prototype, "layoutSettings", {
get: function () {
return this._layoutSettings;
},
set: function (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");
},
enumerable: true,
configurable: true
});
Object.defineProperty(LayoutItem.prototype, "sourceRectangle", {
get: function () {
return this._sourceRectangle;
},
set: function (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");
},
enumerable: true,
configurable: true
});
LayoutItem.prototype._subscribeSourceRectangle = function () {
if (this._sourceRectangle == null)
return;
};
LayoutItem.prototype._unsubscribeSourceRectangle = function () {
if (this._sourceRectangle == null)
return;
};
LayoutItem.prototype.addItems = function (items, targetIndex, orderIndex) {
var order = this.getItemsOrder();
if (order) {
if (!Number.isInteger(orderIndex))
throw new Error("orderIndex must not be null");
order = LayoutItem._insertToOrder(order, items.map(function (x) { return x.id; }), orderIndex);
this.setItemsOrder(order);
}
_super.prototype.addItems.call(this, items, targetIndex);
};
LayoutItem.prototype.removeItems = function (items) {
var order = this.getItemsOrder();
if (order) {
items.forEach(function (item) { return order = order.filter(function (id) { return id !== item.id; }); });
this.setItemsOrder(order);
}
_super.prototype.removeItems.call(this, items);
};
LayoutItem.prototype.addItem = function (item, targetIndex, orderIndex) {
var order = this.getItemsOrder();
if (order != null) {
order = LayoutItem._insertToOrder(order, [item.id], orderIndex);
this.setItemsOrder(order);
}
_super.prototype.addItem.call(this, item, targetIndex);
};
LayoutItem._insertToOrder = function (order, newItems, index) {
var part1 = order.slice(0, index);
var part2 = order.slice(index);
order = part1.concat(newItems, part2);
return order;
};
LayoutItem.prototype.setItemsOrder = function (ids) {
this.tags[LayoutItem._layoutItemsOrderTagKey] = ids;
};
LayoutItem.prototype.getItemsOrder = function () {
var value = this.tags[LayoutItem._layoutItemsOrderTagKey];
if (value == null) {
return null;
}
if (!(value instanceof Array)) {
return null;
}
return value;
};
LayoutItem.prototype.getSortedItems = function () {
var order = this.getItemsOrder();
var nestedItems = this.items.toArray();
if (order != null && nestedItems != null)
return order.map(function (id) { return nestedItems.find(function (i) { return i.id === id; }); });
return null;
};
LayoutItem.prototype.getItemOrderIndex = function (item) {
if (this.items.indexOf(item) < 0)
return -1;
var order = this.getItemsOrder();
return order === null || order === void 0 ? void 0 : order.indexOf(item.id);
};
LayoutItem.generateAutoLayoutSettings = function (rectangles, alignItems, orientation, margin, justifyContent) {
var autoLayoutSettings = new AutoLayoutSettings();
var leftBounds = rectangles.map(function (rectangle) { return rectangle.left; });
var rightBounds = rectangles.map(function (rectangle) { return rectangle.right; });
var topBounds = rectangles.map(function (rectangle) { return rectangle.top; });
var bottomBounds = rectangles.map(function (rectangle) { return rectangle.bottom; });
var centersX = rectangles.map(function (rectangle) { return rectangle.center.x; });
var centersY = rectangles.map(function (rectangle) { return rectangle.center.y; });
if (orientation == null) {
var horizontalDelta = Math.max.apply(Math, __spread(centersX)) - Math.min.apply(Math, __spread(centersX));
var verticalDelta = Math.max.apply(Math, __spread(centersY)) - Math.min.apply(Math, __spread(centersY));
orientation = horizontalDelta > verticalDelta
? AutoLayoutOrientation.horizontal
: AutoLayoutOrientation.vertical;
}
autoLayoutSettings.orientation = orientation;
if (alignItems == null)
switch (autoLayoutSettings.orientation) {
case AutoLayoutOrientation.horizontal:
if (EqualsOfFloatNumbers(Math.max.apply(Math, __spread(topBounds)), Math.min.apply(Math, __spread(topBounds)), 5))
alignItems = AutoLayoutAlignItems.start;
else if (EqualsOfFloatNumbers(Math.max.apply(Math, __spread(centersY)), Math.min.apply(Math, __spread(centersY)), 5))
alignItems = AutoLayoutAlignItems.center;
else if (EqualsOfFloatNumbers(Math.max.apply(Math, __spread(bottomBounds)), Math.min.apply(Math, __spread(bottomBounds)), 5))
alignItems = AutoLayoutAlignItems.end;
else
alignItems = AutoLayoutAlignItems.none;
break;
case AutoLayoutOrientation.vertical:
if (EqualsOfFloatNumbers(Math.max.apply(Math, __spread(leftBounds)), Math.min.apply(Math, __spread(leftBounds)), 5))
alignItems = AutoLayoutAlignItems.start;
else if (EqualsOfFloatNumbers(Math.max.apply(Math, __spread(centersX)), Math.min.apply(Math, __spread(centersX)), 5))
alignItems = AutoLayoutAlignItems.center;
else if (EqualsOfFloatNumbers(Math.max.apply(Math, __spread(rightBounds)), Math.min.apply(Math, __spread(rightBounds)), 5))
alignItems = AutoLayoutAlignItems.end;
else
alignItems = AutoLayoutAlignItems.none;
break;
default:
break;
}
autoLayoutSettings.alignItems = alignItems;
var sortedRectangles = autoLayoutSettings.orientation === AutoLayoutOrientation.horizontal
? rectangles.sort(function (a, b) { return a.left - b.left; })
: rectangles.sort(function (a, b) { return a.top - b.top; });
var margins = [];
for (var i = 1; i < sortedRectangles.length; i++) {
var previousRectangle = sortedRectangles[i - 1];
var 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.apply(Math, __spread(margins.map(Math.round))))
: 0;
autoLayoutSettings.margin = margin;
if (justifyContent == null)
justifyContent = EqualsOfFloatNumbers(Math.max.apply(Math, __spread(margins)), Math.min.apply(Math, __spread(margins)), 2)
? AutoLayoutJustifyContent.stretch
: AutoLayoutJustifyContent.spaceBetween;
autoLayoutSettings.justifyContent = justifyContent;
return autoLayoutSettings;
};
LayoutItem.prototype.isChildVisible = function (item) {
if (item instanceof BaseTextItem) {
return !item.isEmpty();
}
return true;
};
LayoutItem.prototype.equals = function (other) {
var superEq = _super.prototype.equals.call(this, other);
var sourceRectangleEq = equals(this.sourceRectangle, other.sourceRectangle);
var layoutSettingsEq = equals(this.layoutSettings, other.layoutSettings);
return superEq && sourceRectangleEq && layoutSettingsEq;
};
LayoutItem._layoutItemsOrderTagKey = "$layoutItemsOrder";
LayoutItem.type = "LayoutItem";
return LayoutItem;
}(GroupItem));
export { 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 = {}));
var DefaultLayoutSettings = /** @class */ (function () {
function DefaultLayoutSettings() {
this.type = DefaultLayoutSettings.type;
this.propertyChanged = new EventObject();
}
DefaultLayoutSettings.prototype.clone = function () {
return new DefaultLayoutSettings();
};
DefaultLayoutSettings.prototype.getSimplifiedObject = function () {
var result = {};
result["type"] = DefaultLayoutSettings.type;
return result;
};
DefaultLayoutSettings.prototype.equals = function (other) {
var typeEq = equals(this.type, other.type);
return typeEq;
};
DefaultLayoutSettings.type = "DefaultLayoutSettings";
return DefaultLayoutSettings;
}());
export { DefaultLayoutSettings };
var AutoLayoutSettings = /** @class */ (function (_super) {
__extends(AutoLayoutSettings, _super);
function AutoLayoutSettings() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = AutoLayoutSettings.type;
_this._margin = 0;
_this._orientation = AutoLayoutOrientation.vertical;
_this._alignItems = AutoLayoutAlignItems.none;
_this._anchorPoint = AutoLayoutAnchorPoint.start;
_this._justifyContent = AutoLayoutJustifyContent.stretch;
return _this;
}
Object.defineProperty(AutoLayoutSettings.prototype, "margin", {
get: function () {
return this._margin;
},
set: function (value) {
if (value == null)
throw new Error("Margin can't be null");
if (value === this.margin)
return;
this._margin = value;
this.propertyChanged.notify("margin");
},
enumerable: true,
configurable: true
});
Object.defineProperty(AutoLayoutSettings.prototype, "orientation", {
get: function () {
return this._orientation;
},
set: function (value) {
if (value == null)
throw Error("Orientation can't be null");
if (value === this.orientation)
return;
this._orientation = value;
this.propertyChanged.notify("orientation");
},
enumerable: true,
configurable: true
});
Object.defineProperty(AutoLayoutSettings.prototype, "alignItems", {
get: function () {
return this._alignItems;
},
set: function (value) {
if (value == null)
throw new Error("alignItems can't be null");
if (value === this.alignItems)
return;
this._alignItems = value;
this.propertyChanged.notify("alignItems");
},
enumerable: true,
configurable: true
});
Object.defineProperty(AutoLayoutSettings.prototype, "justifyContent", {
get: function () {
return this._justifyContent;
},
set: function (value) {
if (value == null)
throw new Error("JustifyContent can't be null");
if (value === this.justifyContent)
return;
this._justifyContent = value;
this.propertyChanged.notify("justifyContent");
},
enumerable: true,
configurable: true
});
Object.defineProperty(AutoLayoutSettings.prototype, "anchorPoint", {
get: function () {
return this._anchorPoint;
},
set: function (value) {
if (value == null)
throw new Error("anchorPoint can't be null");
if (value === this._anchorPoint)
return;
this._anchorPoint = value;
this.propertyChanged.notify("anchorPoint");
},
enumerable: true,
configurable: true
});
AutoLayoutSettings.prototype.clone = function () {
var 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;
};
AutoLayoutSettings.prototype.getSimplifiedObject = function () {
var result = _super.prototype.getSimplifiedObject.call(this);
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;
};
AutoLayoutSettings.prototype.equals = function (other) {
var superEq = _super.prototype.equals.call(this, other);
var orientationEq = equals(this.orientation, other.orientation);
var alignItemsEq = equals(this.alignItems, other.alignItems);
var marginEq = equals(this.margin, other.margin);
var 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: __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);
return AutoLayoutSettings;
}(DefaultLayoutSettings));
export { AutoLayoutSettings };
//# sourceMappingURL=LayoutItem.js.map