@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.
323 lines • 12.6 kB
JavaScript
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 { PointF } from "./PointF";
import { EventObject } from "../EventObject";
import { EqualsOfFloatNumbers } from "./Common";
var PathSegment = /** @class */ (function () {
function PathSegment(name, points) {
this._name = "";
this._points = [];
this._name = (name) ? name.toUpperCase() : "";
this._points = (points) ? points : [];
}
Object.defineProperty(PathSegment.prototype, "name", {
get: function () {
return this._name;
},
enumerable: true,
configurable: true
});
PathSegment.prototype.getPoint = function (index) {
return this._points[index];
};
Object.defineProperty(PathSegment.prototype, "length", {
get: function () {
return this._points.length;
},
enumerable: true,
configurable: true
});
PathSegment.prototype.transform = function (transform, center) {
for (var i = 0; i < this.length; i++) {
this.getPoint(i).transform(transform, center);
}
};
PathSegment.prototype.rotateAt = function (angle, center) {
for (var i = 0; i < this.length; i++)
this.getPoint(i).rotateAt(angle, center);
};
PathSegment.prototype.translate = function (offsetX, offsetY) {
for (var i = 0; i < this.length; i++)
this.getPoint(i).translate(offsetX, offsetY);
};
PathSegment.prototype.scale = function (scaleX, scaleY) {
for (var i = 0; i < this.length; i++)
this.getPoint(i).scale(scaleX, scaleY);
};
PathSegment.prototype.draw = function (ctx) {
switch (this.name) {
case "Z":
ctx.closePath();
break;
case "M":
ctx.moveTo(this.getPoint(0).x, this.getPoint(0).y);
break;
case "L":
ctx.lineTo(this.getPoint(0).x, this.getPoint(0).y);
break;
case "Q":
ctx.quadraticCurveTo(this.getPoint(0).x, this.getPoint(0).y, this.getPoint(1).x, this.getPoint(1).y);
break;
case "C":
ctx.bezierCurveTo(this.getPoint(0).x, this.getPoint(0).y, this.getPoint(1).x, this.getPoint(1).y, this.getPoint(2).x, this.getPoint(2).y);
break;
}
};
PathSegment.prototype.toString = function () {
var s = this.name;
for (var i = 0; i < this.length; i++) {
s += " " + this.getPoint(i).x + " " + this.getPoint(i).y;
}
return s;
};
PathSegment.prototype.clone = function () {
return new PathSegment(this.name, this._points.map(function (p) { return p.clone(); }));
};
return PathSegment;
}());
export { PathSegment };
var Path = /** @class */ (function () {
function Path(path) {
this._pathChangedEvent = new EventObject();
this._segments = [];
if (path != null)
this._fromString(path);
}
Object.defineProperty(Path.prototype, "length", {
get: function () {
return this._segments.length;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Path.prototype, "segments", {
get: function () {
return this._segments;
},
enumerable: true,
configurable: true
});
Path.prototype.addPathChanged = function (handler) {
this._pathChangedEvent.add(handler);
};
Path.prototype.removePathChanged = function (handler) {
this._pathChangedEvent.remove(handler);
};
Path.prototype.moveTo = function (x, y) {
this._segments.push(new PathSegment("M", [new PointF(x, y)]));
this._onPathChanged();
};
Path.prototype.lineTo = function (x, y) {
this._segments.push(new PathSegment("L", [new PointF(x, y)]));
this._onPathChanged();
};
Path.prototype.quadraticTo = function (cx, cy, x, y) {
this._segments.push(new PathSegment("Q", [new PointF(cx, cy), new PointF(x, y)]));
this._onPathChanged();
};
Path.prototype.cubicTo = function (cx1, cy1, cx2, cy2, x, y) {
this._segments.push(new PathSegment("C", [new PointF(cx1, cy1), new PointF(cx2, cy2), new PointF(x, y)]));
this._onPathChanged();
};
Path.prototype.close = function () {
this._segments.push(new PathSegment("Z"));
this._onPathChanged();
};
Path.prototype._onPathChanged = function () {
this._pathChangedEvent.notify();
};
Path.prototype.transform = function (transform, center) {
for (var i = 0; i < this.length; i++)
this._segments[i].transform(transform, center);
};
Path.prototype.rotateAt = function (angle, center) {
for (var i = 0; i < this.length; i++)
this._segments[i].rotateAt(angle, center);
};
Path.prototype.translate = function (offsetX, offsetY) {
for (var i = 0; i < this.length; i++)
this._segments[i].translate(offsetX, offsetY);
};
Path.prototype.scale = function (scaleX, scaleY) {
for (var i = 0; i < this.length; i++)
this._segments[i].scale(scaleX, scaleY);
};
Path.prototype.draw = function (ctx) {
if (!ctx)
return;
ctx.beginPath();
for (var i = 0; i < this.length; i++)
this._segments[i].draw(ctx);
};
Path.prototype.toString = function () {
var s = "";
for (var i = 0; i < this.length; i++) {
s += this._segments[i].toString();
if (i < this._segments.length - 1)
s += " ";
}
return s;
};
Path.prototype.clone = function () {
return new Path(this.toString());
};
Path.prototype.equals = function (p) {
return this.isEqual(p);
};
Path.prototype.isEqual = function (path) {
if (path == null)
return false;
return (this.toString() === path.toString());
};
Path.prototype.addPath = function (path) {
var e_1, _a;
try {
for (var _b = __values(path._segments), _c = _b.next(); !_c.done; _c = _b.next()) {
var s = _c.value;
this._segments.push(s.clone());
}
}
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; }
}
};
Path.prototype._fromString = function (s) {
var parts = s.split(" ");
var startIndex = 0;
while (startIndex < parts.length) {
var name = parts[startIndex];
var endIndex = startIndex + 1;
var values = [];
while (endIndex < parts.length) {
var value = parseFloat(parts[endIndex]);
if (!isNaN(value) && isFinite(value)) {
values.push(value);
endIndex++;
}
else
break;
}
var i = 0;
var points = [];
while (i < values.length) {
points.push(new PointF(values[i], values[i + 1]));
i += 2;
}
var segment = new PathSegment(name, points);
this._segments.push(segment);
startIndex = endIndex;
}
};
Path.rectangle = function (left, top, width, height) {
var path = new Path();
path.moveTo(left, top);
path.lineTo(left + width, top);
path.lineTo(left + width, top + height);
path.lineTo(left, top + height);
path.lineTo(left, top);
path.close();
return path;
};
Path.ellipse = function (left, top, width, height) {
var eNumber = 0.5517;
var hWidth = width / 2;
var hHeight = height / 2;
var path = new Path();
path.moveTo(left, top + hHeight);
path.cubicTo(left, top + hHeight - hHeight * eNumber, left + hWidth - hWidth * eNumber, top, left + hWidth, top);
path.cubicTo(left + hWidth + hWidth * eNumber, top, left + width, top + hHeight - hHeight * eNumber, left + width, top + hHeight);
path.cubicTo(left + width, top + hHeight + hHeight * eNumber, left + hWidth + hWidth * eNumber, top + height, left + hWidth, top + height);
path.cubicTo(left + hWidth - hWidth * eNumber, top + height, left, top + hHeight + hHeight * eNumber, left, top + hHeight);
path.close();
return path;
};
Path.roundedRectangle = function (left, top, width, height, radiuses) {
if (radiuses == null)
return Path.rectangle(left, top, width, height);
var eNumber = 0.5517;
var path = new Path();
var x = left;
var y = top;
var w0 = radiuses[0].width;
var h0 = radiuses[0].height;
var w1 = radiuses[1].width;
var h1 = radiuses[1].height;
var w2 = radiuses[2].width;
var h2 = radiuses[2].height;
var w3 = radiuses[3].width;
var h3 = radiuses[3].height;
if (EqualsOfFloatNumbers(w0, 0) || EqualsOfFloatNumbers(h0, 0))
w0 = h0 = 0;
if (EqualsOfFloatNumbers(w1, 0) || EqualsOfFloatNumbers(h1, 0))
w1 = h1 = 0;
if (EqualsOfFloatNumbers(w2, 0) || EqualsOfFloatNumbers(h2, 0))
w2 = h2 = 0;
if (EqualsOfFloatNumbers(w3, 0) || EqualsOfFloatNumbers(h3, 0))
w3 = h3 = 0;
path.moveTo(x + w0, y);
// Top line:
if (!EqualsOfFloatNumbers(w0 + w1, width)) {
path.lineTo(x + width - w1, y);
}
// corner1 ellipse part
if (!EqualsOfFloatNumbers(w1, 0) && !EqualsOfFloatNumbers(h1, 0)) {
path.cubicTo(x + width - w1 * (1 - eNumber), y, x + width, y + h1 * (1 - eNumber), x + width, y + h1);
}
// Right line:
if (!EqualsOfFloatNumbers(h1 + h2, height)) {
path.lineTo(x + width, y + height - h2);
}
// corner2 ellipse part
if (!EqualsOfFloatNumbers(w2, 0) && !EqualsOfFloatNumbers(h2, 0)) {
path.cubicTo(x + width, y + height - h2 * (1 - eNumber), x + width - w2 * (1 - eNumber), y + height, x + width - w2, y + height);
}
// Bottom line:
if (!EqualsOfFloatNumbers(w2 + w3, width)) {
path.lineTo(x + w3, y + height);
}
// corner3 ellipse part
if (!EqualsOfFloatNumbers(w3, 0) && !EqualsOfFloatNumbers(h3, 0)) {
path.cubicTo(x + w3 * (1 - eNumber), y + height, x, y + height - h3 * (1 - eNumber), x, y + height - h3);
}
// Left line:
if (!EqualsOfFloatNumbers(h3 + h0, height)) {
path.lineTo(x, y + h0);
}
// corner0 ellipse part
if (!EqualsOfFloatNumbers(w0, 0) && !EqualsOfFloatNumbers(h0, 0)) {
path.cubicTo(x, y + h0 * (1 - eNumber), x + w0 * (1 - eNumber), y, x + w0, y);
}
path.close();
return path;
};
Path.rotatedRectangle = function (rectangle) {
var leftTop = rectangle.getUpperLeftCorner();
var rightTop = rectangle.getUpperRightCorner();
var rightBottom = rectangle.getBottomRightCorner();
var leftBottom = rectangle.getBottomLeftCorner();
var path = new Path();
path.moveTo(leftTop.x, leftTop.y);
path.lineTo(rightTop.x, rightTop.y);
path.lineTo(rightBottom.x, rightBottom.y);
path.lineTo(leftBottom.x, leftBottom.y);
path.lineTo(leftTop.x, leftTop.y);
path.close();
return path;
};
return Path;
}());
export { Path };
//# sourceMappingURL=Path.js.map