@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
229 lines • 10.2 kB
JavaScript
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";
export class LineItemHandler extends BaseRectangleItemHandler {
constructor(item, textWhizz = null, colorPreviewService = null) {
super(0, 0, 0, 0, item, textWhizz, colorPreviewService);
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();
}
get item() {
return this._getItem();
}
set controlPoints(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();
}
get width() {
return this.item.width;
}
set width(value) {
this.item.width = value;
}
get color() {
return this.item.color;
}
set color(value) {
this.item.color = value;
}
get fixedWidth() {
return this.item.fixedWidth;
}
set fixedWidth(value) {
this.item.fixedWidth = value;
}
get point0() {
return this._getActualPoint(this._controlPoints[0]);
}
set point0(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]);
}
}
get point1() {
return this._getActualPoint(this._controlPoints[1]);
}
set point1(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]);
}
}
get rectangle() {
var rectangle = super._getRectangle();
rectangle.height = this._getActualWidth();
return rectangle;
}
drawItemHandler(itemHandlerCtx) {
/// <summary>Draws this vector line.</summary>
const width = this._getActualWidth();
if (itemHandlerCtx == null || width <= 0) {
return;
}
if (!this._isReadyToDraw) {
this.canvas.drawWaitClock(itemHandlerCtx, this.rectangle.center);
return;
}
const { colorPreview } = this._getItemColorPreviews();
const startPoint = this.point0;
const endPoint = this.point1;
const 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);
}
hitTest(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.hitTest(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;
}
transformByMatrix(matrix, finished, newAngle = null) {
const point0 = this.point0;
const point1 = this.point1;
this.item.transform = new Transform();
const transformedPoint0 = matrix.transformPoint(point0);
const 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();
}
}
_getColors() {
return [this.color, ...super._getColors()];
}
get _areColorPreviewsReady() {
const { colorPreview } = this._getItemColorPreviews();
return this.item.color == null || colorPreview != null;
}
get _isReadyToDraw() {
return this._areColorPreviewsReady;
}
_getItemColorPreviews() {
const color = this.isNormalRenderingType
? this.item.color
: RgbColors.black;
const colorPreview = this._colorPreviewService.getPreview(color);
if (this.item.color != null && colorPreview == null) {
this._colorPreviewService.subscribeToPreviewLoaded(color, this._onColorPreviewLoaded);
}
return { colorPreview: colorPreview };
}
_getActualWidth() {
var width = this.width;
var canvas = this.canvas;
if (this.fixedWidth && canvas != null)
width /= canvas.zoom;
return width;
}
_onItemPropertyChanged(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._onItemPropertyChanged(sender, propertyName);
}
_getActualPoint(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;
}
_setTransformByPoints(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.
_belongToPiece(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;
}
_makeLineHorizontalWithAngle() {
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;
}
}
}
//# sourceMappingURL=LineItemHandler.js.map