@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
183 lines • 7.56 kB
JavaScript
import { BaseRectangleItemHandler } from "./BaseRectangleItemHandler";
import { Graphics } from "../Graphics";
import { getSquareDistanceToSegment, PointF, RectangleF, Transform } from "@aurigma/design-atoms-model/Math";
import * as Exceptions from "@aurigma/design-atoms-model/Utils/Exceptions";
import { OutOfRangeException } from "@aurigma/design-atoms-model/Exception";
import Environment from "@aurigma/design-atoms-model/Utils/Environment";
export class PolylineItemHandler extends BaseRectangleItemHandler {
constructor(item, textWhizz = null, colorPreviewService) {
super(0, 0, 0, 0, item, textWhizz, colorPreviewService);
}
get item() {
return this._getItem();
}
drawItemHandler(itemHandlerCtx) {
if (itemHandlerCtx == null || this.item.width <= 0) {
return;
}
if (!this._isReadyToDraw) {
this.canvas.drawWaitClock(itemHandlerCtx, this.rectangle.center);
return;
}
const points = this.getActualPoints();
const { colorPreview } = this._getItemColorPreviews();
Graphics.drawPolyline(itemHandlerCtx, points, this.item.width, colorPreview === null || colorPreview === void 0 ? void 0 : colorPreview.toString(), this.item.opacity);
}
hitTest(point, isSelected) {
/// <summary>Determines whether the specified point belongs to this vector polyline.</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 polyline; otherwise <strong>false</strong>.</returns>
const result = super.hitTest(point.clone());
// for tolerance in selection.
const mul = this.canvas.zoom * Environment.screenDpi / 72;
const rectFrame = this._getRectangle();
const isBelongRect = isSelected ? rectFrame.toRectangleF().contains(point) : false;
const isBelongPoliLine = this._belongToLine(point, 2 / mul);
result.body = isBelongRect || isBelongPoliLine;
return result;
}
getControlBounds() {
var minx = 0;
var miny = 0;
var maxx = 0;
var maxy = 0;
var pts = this.item.sourcePoints;
var len = pts.length;
if (len > 0) {
minx = pts[0].x;
maxx = pts[0].x;
miny = pts[0].y;
maxy = pts[0].y;
}
for (var i = 1; i < len; i++) {
minx = Math.min(pts[i].x, minx);
maxx = Math.max(pts[i].x, maxx);
miny = Math.min(pts[i].y, miny);
maxy = Math.max(pts[i].y, maxy);
}
var width = maxx - minx;
var height = maxy - miny;
return new RectangleF(minx, miny, width, height);
}
// p - test point.
_belongToLine(p, tolerance) {
var pts = this.getActualPoints();
var res = false;
var eps = this.item.width / 2 + tolerance;
var squareEps = eps * eps;
//check if point belongs to any of segments
for (var i = 1; i < pts.length; i++) {
var squareDist = getSquareDistanceToSegment(p, pts[i - 1], pts[i]);
if (squareDist <= squareEps) {
res = true;
// is true, so doesn't need to continue
break;
}
}
return res;
}
getActualPoints() {
/// <summary>Gets an array points this polyline is constructed from.</summary>
/// <value type="Array">An array of points.</value>
var pts = [];
//calc center point once and use it in loop
var center = this.getControlCenter();
for (var i = 0; i < this.item.sourcePoints.length; i++) {
pts.push(this._getActualPointFromControlPoint(this.item.sourcePoints[i], center));
}
return pts;
}
_getActualPointFromControlPoint(point, center) {
var p = new PointF(point.x, point.y);
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;
}
addPoint(point) {
this.insertPoint(point, this.item.sourcePoints.length);
}
insertPoint(point, index) {
if (index < 0 || index > this.item.sourcePoints.length)
throw new OutOfRangeException(Exceptions.insertPointOutOfRange);
var actualPoints = this.getActualPoints();
actualPoints.splice(index, 0, point);
//change original points to actual points and reset transform
this.item.sourcePoints = actualPoints;
this.item.transform = new Transform();
}
setPoint(point, index) {
if (index < 0 || index >= this.item.sourcePoints.length)
throw new OutOfRangeException(Exceptions.setPointOutOfRange);
var actualPoints = this.getActualPoints();
actualPoints[index] = point;
this.item.sourcePoints = actualPoints;
this.item.transform = new Transform();
this.raiseChanged();
}
getPointsCount() {
return this.item.sourcePoints.length;
}
getPoint(index) {
if (index < 0 || index >= this.item.sourcePoints.length)
throw new OutOfRangeException(Exceptions.setPointOutOfRange);
return this._getActualPointFromControlPoint(this.item.sourcePoints[index], this.getControlCenter());
}
removePoint(index) {
if (index < 0 || index >= this.item.sourcePoints.length)
throw new OutOfRangeException(Exceptions.removePointOutOfRange);
var pts = this.item.sourcePoints;
pts.splice(index, 1);
this.item.sourcePoints = pts;
}
get _isReadyToDraw() {
return this._areColorPreviewsReady;
}
get _areColorPreviewsReady() {
const { colorPreview } = this._getItemColorPreviews();
return this.item.color == null || colorPreview != null;
}
_getItemColorPreviews() {
const colorPreview = this._colorPreviewService.getPreview(this.item.color);
if (this.item.color != null && colorPreview == null) {
this._colorPreviewService.subscribeToPreviewLoaded(this.item.color, this._onColorPreviewLoaded);
}
return { colorPreview: colorPreview };
}
_onItemPropertyChanged(sender, propertyName) {
switch (propertyName) {
case "width":
case "color":
case "sourcePoints":
break;
}
}
_getBoundsMargin() {
return this.item.width;
}
// add point, and try to smooth
// add pointd while interactive drawing
_addPoint(pt) {
var c = this.canvas;
var mul = -1;
if (c) {
mul = (Environment.screenDpi / 72) * c.zoom;
}
var d = 30;
var pts = this.item.sourcePoints;
if (pts.length > 0) {
var dist = pts[pts.length - 1].distance(pt);
if (mul === -1 || dist * mul > d) {
pts.push(pt);
}
}
else {
pts.push(pt);
}
}
}
PolylineItemHandler.typeName = "PolylineItemHandler";
//# sourceMappingURL=PolylineItemHandler.js.map