@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
309 lines • 14 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 __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 { BaseRectangleItemHandler } from "./BaseRectangleItemHandler";
import { Graphics } from "../Graphics";
import * as CcMath from "@aurigma/design-atoms-model/Math/index";
import { PointF, Transform } from "@aurigma/design-atoms-model/Math/index";
import Environment from "@aurigma/design-atoms-model/Utils/Environment";
import { CoordinatesConvertUtils } from "./../Utils/CoordinatesConvertUtils";
import { RgbColors } from "@aurigma/design-atoms-model/Colors";
var LineItemHandler = /** @class */ (function (_super) {
__extends(LineItemHandler, _super);
function LineItemHandler(item, textWhizz, colorPreviewService) {
if (textWhizz === void 0) { textWhizz = null; }
if (colorPreviewService === void 0) { colorPreviewService = null; }
var _this = _super.call(this, 0, 0, 0, 0, item, textWhizz, colorPreviewService) || this;
_this._selectionTolerance = 15;
_this._controlPoints = [
new PointF(((item.sourcePoint0.x) ? item.sourcePoint0.x : 0), ((item.sourcePoint0.y) ? item.sourcePoint0.y : 0)),
new PointF(((item.sourcePoint1.x) ? item.sourcePoint1.x : 0), ((item.sourcePoint1.y) ? item.sourcePoint1.y : 0))
];
_this._makeLineHorizontalWithAngle();
return _this;
}
Object.defineProperty(LineItemHandler.prototype, "item", {
get: function () {
return this._getItem();
},
enumerable: true,
configurable: true
});
Object.defineProperty(LineItemHandler.prototype, "controlPoints", {
set: function (v) {
this._controlPoints = new Array(new PointF(v[0].x, v[0].y), new PointF(v[1].x, v[1].y));
this.item.sourcePoint0 = this._controlPoints[0];
this.item.sourcePoint1 = this._controlPoints[1];
this._makeLineHorizontalWithAngle();
this.raiseChanged();
},
enumerable: true,
configurable: true
});
Object.defineProperty(LineItemHandler.prototype, "width", {
get: function () {
return this.item.width;
},
set: function (value) {
this.item.width = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LineItemHandler.prototype, "color", {
get: function () {
return this.item.color;
},
set: function (value) {
this.item.color = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LineItemHandler.prototype, "fixedWidth", {
get: function () {
return this.item.fixedWidth;
},
set: function (value) {
this.item.fixedWidth = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LineItemHandler.prototype, "point0", {
get: function () {
return this._getActualPoint(this._controlPoints[0]);
},
set: function (point) {
var bounds = this.getControlBounds();
if (bounds.width === 0 || bounds.height === 0) {
var p1 = this._getActualPoint(this._controlPoints[1]);
this._controlPoints = [point.clone(), p1];
this.item.transform = new Transform();
}
else {
this._makeLineHorizontalWithAngle();
this._setTransformByPoints(this._controlPoints[0], point, this._controlPoints[1]);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(LineItemHandler.prototype, "point1", {
get: function () {
return this._getActualPoint(this._controlPoints[1]);
},
set: function (point) {
var bounds = this.getControlBounds();
if (bounds.width === 0 || bounds.height === 0) {
var p0 = this._getActualPoint(this._controlPoints[0]);
this._controlPoints = [p0, point.clone()];
this.item.transform = new Transform();
}
else {
this._makeLineHorizontalWithAngle();
this._setTransformByPoints(this._controlPoints[1], point, this._controlPoints[0]);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(LineItemHandler.prototype, "rectangle", {
get: function () {
var rectangle = _super.prototype._getRectangle.call(this);
rectangle.height = this._getActualWidth();
return rectangle;
},
enumerable: true,
configurable: true
});
LineItemHandler.prototype.drawItemHandler = function (itemHandlerCtx) {
/// <summary>Draws this vector line.</summary>
var width = this._getActualWidth();
if (itemHandlerCtx == null || width <= 0) {
return;
}
if (!this._isReadyToDraw) {
this.canvas.drawWaitClock(itemHandlerCtx, this.rectangle.center);
return;
}
var colorPreview = this._getItemColorPreviews().colorPreview;
var startPoint = this.point0;
var endPoint = this.point1;
var opacity = this.isNormalRenderingType ? this.item.opacity : 1;
Graphics.drawLine(itemHandlerCtx, startPoint.x, startPoint.y, endPoint.x, endPoint.y, width, colorPreview === null || colorPreview === void 0 ? void 0 : colorPreview.toString(), opacity);
};
LineItemHandler.prototype.hitTest = function (point, isSelected) {
/// <summary>Determines whether the specified point belongs to this vector line.</summary>
/// <param name="p" type="Aurigma.GraphicsMill.AjaxControls.VectorObjects.Math.PointF">The point to test.</param>
/// <returns type="Boolean"><strong>true</strong> if the specified point belongs to this vector line; otherwise <strong>false</strong>.</returns>
var result = _super.prototype.hitTest.call(this, point.clone());
var p = CoordinatesConvertUtils.workspaceToProduct(point, this.canvas.offset);
var c = this.canvas;
// for tolerance in selection.
var mul = c.zoom * Environment.screenDpi / 72;
var rectFrame = this.rectangle;
var isBelongRect = isSelected ? rectFrame.toRectangleF().contains(point) : false;
var width = this._getActualWidth();
var tolerance = ((this._selectionTolerance / mul) - width) / 2;
var isBelongPiece = this._belongToPiece(this.point0, this.point1, p, width, tolerance < 0 ? 0 : tolerance);
result.body = isBelongRect || isBelongPiece ? true : false;
return result;
};
LineItemHandler.prototype.transformByMatrix = function (matrix, finished, newAngle) {
if (newAngle === void 0) { newAngle = null; }
var point0 = this.point0;
var point1 = this.point1;
this.item.transform = new Transform();
var transformedPoint0 = matrix.transformPoint(point0);
var transformedPoint1 = matrix.transformPoint(point1);
this.item.sourcePoint0 = transformedPoint0;
this.item.sourcePoint1 = transformedPoint1;
this._controlPoints = [transformedPoint0, transformedPoint1];
this._makeLineHorizontalWithAngle();
if (this.item.parentGroupItem != null)
this.raiseChanging(this.item);
else
this._throttleSizeChanging();
if (matrix.scaleX !== 1 || matrix.scaleY !== 1)
this.onResized();
var canvas = this.canvas;
if (canvas != null) {
this.updateViolationContainerPosition();
this.canvas.updateSelection();
canvas.redraw();
}
};
LineItemHandler.prototype._getColors = function () {
return __spread([this.color], _super.prototype._getColors.call(this));
};
Object.defineProperty(LineItemHandler.prototype, "_areColorPreviewsReady", {
get: function () {
var colorPreview = this._getItemColorPreviews().colorPreview;
return this.item.color == null || colorPreview != null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(LineItemHandler.prototype, "_isReadyToDraw", {
get: function () {
return this._areColorPreviewsReady;
},
enumerable: true,
configurable: true
});
LineItemHandler.prototype._getItemColorPreviews = function () {
var color = this.isNormalRenderingType
? this.item.color
: RgbColors.black;
var colorPreview = this._colorPreviewService.getPreview(color);
if (this.item.color != null && colorPreview == null) {
this._colorPreviewService.subscribeToPreviewLoaded(color, this._onColorPreviewLoaded);
}
return { colorPreview: colorPreview };
};
LineItemHandler.prototype._getActualWidth = function () {
var width = this.width;
var canvas = this.canvas;
if (this.fixedWidth && canvas != null)
width /= canvas.zoom;
return width;
};
LineItemHandler.prototype._onItemPropertyChanged = function (sender, propertyName) {
switch (propertyName) {
case "width":
var canvas = this.canvas;
if (canvas != null)
canvas.updateSelection();
break;
case "color":
case "fixedWidth":
this.canvas.redraw();
break;
}
_super.prototype._onItemPropertyChanged.call(this, sender, propertyName);
};
LineItemHandler.prototype._getActualPoint = function (controlPoint) {
var p = new PointF(controlPoint.x, controlPoint.y);
var center = this.getControlCenter();
p.translate(-center.x, -center.y);
var transform = this.item.transform;
p.scale(transform.scaleX, transform.scaleY);
p.rotate(transform.angle);
p.translate(transform.translateX, transform.translateY);
p.translate(center.x, center.y);
return p;
};
LineItemHandler.prototype._setTransformByPoints = function (controlPoint1, actualPoint1, controlPoint2) {
var controlCenter = this.getControlCenter();
var actualPoint2 = this._getActualPoint(controlPoint2);
var newCenter = new PointF((actualPoint2.x + actualPoint1.x) / 2, (actualPoint2.y + actualPoint1.y) / 2);
var translateX = newCenter.x - controlCenter.x;
var translateY = newCenter.y - controlCenter.y;
var p1 = new PointF(controlPoint1.x, controlPoint1.y).translate(-controlCenter.x, -controlCenter.y);
var p2 = new PointF(actualPoint1.x, actualPoint1.y).translate(-translateX, -translateY).translate(-controlCenter.x, -controlCenter.y);
var cosAngle = (p1.x * p2.x + p1.y * p2.y) / Math.sqrt((p1.x * p1.x + p1.y * p1.y) * (p2.x * p2.x + p2.y * p2.y));
cosAngle = CcMath.Clamp(-1, cosAngle, 1);
var angle = CcMath.ConvertRadianToDegree(Math.acos(cosAngle));
p2 = p2.rotate(-angle);
this.item.transform = new Transform(p2.x / p1.x, p2.y / p1.y, translateX, translateY, angle);
};
// p1-p2 - piece of line.
// p3 - test point.
LineItemHandler.prototype._belongToPiece = function (p1, p2, p3, width, tolerance) {
var squareDist = CcMath.getSquareDistanceToSegment(p3, p1, p2);
var eps = width / 2 + tolerance;
if (squareDist <= eps * eps)
return true;
else
return false;
};
LineItemHandler.prototype._makeLineHorizontalWithAngle = function () {
var point0 = this._controlPoints[0];
var point1 = this._controlPoints[1];
var angle = CcMath.getTriangleAngle(point0, new PointF(point0.x, point1.y), point1);
if (angle !== 0) {
var centerX = (point0.x + point1.x) / 2;
var centerY = (point0.y + point1.y) / 2;
var width = point0.distance(point1);
this._controlPoints[0] = new PointF(centerX - width / 2, centerY);
this.item.sourcePoint0 = this._controlPoints[0];
this._controlPoints[1] = new PointF(centerX + width / 2, centerY);
this.item.sourcePoint1 = this._controlPoints[1];
this.angle = angle;
}
};
return LineItemHandler;
}(BaseRectangleItemHandler));
export { LineItemHandler };
//# sourceMappingURL=LineItemHandler.js.map