Add ellipse changes no angle

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
pull/8539/head
Mark Tolmacs 4 months ago
parent d9ea7190ec
commit 7b4e989d65
No known key found for this signature in database

@ -1,236 +1,5 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Test Transform > Test arrow bindings > should bind arrows to existing shapes when start / end provided with ids 1`] = `
{
"angle": 0,
"backgroundColor": "#d8f5a2",
"boundElements": [
{
"id": "id45",
"type": "arrow",
},
{
"id": "id46",
"type": "arrow",
},
],
"customData": undefined,
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 300,
"id": Any<String>,
"index": "a0",
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#66a80f",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "ellipse",
"updated": 1,
"version": 4,
"versionNonce": Any<Number>,
"width": 300,
"x": 630,
"y": 316,
}
`;
exports[`Test Transform > Test arrow bindings > should bind arrows to existing shapes when start / end provided with ids 2`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id46",
"type": "arrow",
},
],
"customData": undefined,
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 100,
"id": Any<String>,
"index": "a1",
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#9c36b5",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "diamond",
"updated": 1,
"version": 3,
"versionNonce": Any<Number>,
"width": 140,
"x": 96,
"y": 400,
}
`;
exports[`Test Transform > Test arrow bindings > should bind arrows to existing shapes when start / end provided with ids 3`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": null,
"customData": undefined,
"elbowed": false,
"endArrowhead": "arrow",
"endBinding": {
"elementId": "ellipse-1",
"fixedPoint": null,
"focus": -0.008153707962747813,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 35,
"id": Any<String>,
"index": "a2",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
"points": [
[
0.5,
0.5,
],
[
394.5,
34.5,
],
],
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"startArrowhead": null,
"startBinding": {
"elementId": "id47",
"fixedPoint": null,
"focus": -0.08139534883720931,
"gap": 1,
},
"strokeColor": "#1864ab",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 4,
"versionNonce": Any<Number>,
"width": 395,
"x": 247,
"y": 420,
}
`;
exports[`Test Transform > Test arrow bindings > should bind arrows to existing shapes when start / end provided with ids 4`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": null,
"customData": undefined,
"elbowed": false,
"endArrowhead": "arrow",
"endBinding": {
"elementId": "ellipse-1",
"fixedPoint": null,
"focus": 0.10666666666666667,
"gap": 3.834326468444573,
},
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 0,
"id": Any<String>,
"index": "a3",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
"points": [
[
0.5,
0,
],
[
399.5,
0,
],
],
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"startArrowhead": null,
"startBinding": {
"elementId": "diamond-1",
"fixedPoint": null,
"focus": 0,
"gap": 1,
},
"strokeColor": "#e67700",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 4,
"versionNonce": Any<Number>,
"width": 400,
"x": 227,
"y": 450,
}
`;
exports[`Test Transform > Test arrow bindings > should bind arrows to existing shapes when start / end provided with ids 5`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id45",
"type": "arrow",
},
],
"customData": undefined,
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 300,
"id": Any<String>,
"index": "a4",
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "rectangle",
"updated": 1,
"version": 3,
"versionNonce": Any<Number>,
"width": 300,
"x": -53,
"y": 270,
}
`;
exports[`Test Transform > Test arrow bindings > should bind arrows to existing text elements when start / end provided with ids 1`] = `
{
"angle": 0,
@ -1551,7 +1320,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
"elementId": "B",
"fixedPoint": null,
"focus": 0,
"gap": 1,
"gap": 77.017,
},
"fillStyle": "solid",
"frameId": null,

@ -705,11 +705,7 @@ export const getHeadingForElbowArrowSnap = (
return otherPointHeading;
}
const distance = getDistanceForBinding(
origPoint,
bindableElement,
elementsMap,
);
const distance = getDistanceForBinding(origPoint, bindableElement);
if (!distance) {
return vectorToHeading(
@ -731,7 +727,6 @@ export const getHeadingForElbowArrowSnap = (
const getDistanceForBinding = (
point: Readonly<GlobalPoint>,
bindableElement: ExcalidrawBindableElement,
elementsMap: ElementsMap,
) => {
const distance = distanceToBindableElement(bindableElement, point);
const bindDistance = maxBindingGap(

@ -123,8 +123,8 @@ const roundedCutoffSegment = (
const t = (4 * r) / Math.sqrt(2);
return segment(
ellipseSegmentInterceptPoints(ellipse(s[0], radians(0), t, t), s)[0],
ellipseSegmentInterceptPoints(ellipse(s[1], radians(0), t, t), s)[0],
ellipseSegmentInterceptPoints(ellipse(s[0], t, t), s)[0],
ellipseSegmentInterceptPoints(ellipse(s[1], t, t), s)[0],
);
};
@ -198,13 +198,12 @@ export const distanceToEllipseElement = (
element: ExcalidrawEllipseElement,
p: GlobalPoint,
): number => {
const center = point(
element.x + element.width / 2,
element.y + element.height / 2,
);
return ellipseDistanceFromPoint(
p,
ellipse(
point(element.x + element.width / 2, element.y + element.height / 2),
element.angle,
element.width / 2,
element.height / 2,
),
pointRotateRads(p, center, radians(-element.angle)),
ellipse(center, element.width / 2, element.height / 2),
);
};

@ -17,7 +17,6 @@ import { aabbForElement, pointInsideBounds } from "../shapes";
import { isAnyTrue, toBrandedType } from "../utils";
import {
bindPointToSnapToElementOutline,
distanceToBindableElement,
avoidRectangularCorner,
getHoveredElementForBinding,
FIXED_BINDING_DISTANCE,
@ -26,6 +25,7 @@ import {
snapToMid,
} from "./binding";
import type { Bounds } from "./bounds";
import { distanceToBindableElement } from "./distance";
import type { Heading } from "./heading";
import {
compareHeading,
@ -1023,7 +1023,7 @@ const getGlobalPoint = (
// NOTE: Resize scales the binding position point too, so we need to update it
return Math.abs(
distanceToBindableElement(boundElement, fixedGlobalPoint, elementsMap) -
distanceToBindableElement(boundElement, fixedGlobalPoint) -
FIXED_BINDING_DISTANCE,
) > 0.01
? getSnapPoint(initialPoint, otherPoint, boundElement, elementsMap)
@ -1060,9 +1060,12 @@ const getBindPointHeading = (
hoveredElement &&
aabbForElement(
hoveredElement,
Array(4).fill(
distanceToBindableElement(hoveredElement, p, elementsMap),
) as [number, number, number, number],
Array(4).fill(distanceToBindableElement(hoveredElement, p)) as [
number,
number,
number,
number,
],
),
elementsMap,
origPoint,

@ -817,8 +817,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 28,
"width": 50,
"version": 30,
"width": 0,
"x": 200,
"y": 0,
}
@ -852,7 +852,7 @@ History {
0,
],
[
50,
0,
0,
],
],
@ -938,7 +938,7 @@ History {
0,
],
[
50,
0,
0,
],
],

@ -225,7 +225,7 @@ exports[`move element > rectangles with binding arrow 7`] = `
"elementId": "id0",
"fixedPoint": null,
"focus": "-0.60000",
"gap": 10,
"gap": 9,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",

@ -1,5 +1,5 @@
import { radians } from "./angle";
import { arc, arcIncludesPoint, arcSegmentInterceptPoint } from "./arc";
import { arc, arcIncludesPoint, arcSegmentInterceptPoints } from "./arc";
import { point } from "./point";
import { segment } from "./segment";
@ -33,7 +33,7 @@ describe("point on arc", () => {
describe("intersection", () => {
it("should report correct interception point", () => {
expect(
arcSegmentInterceptPoint(
arcSegmentInterceptPoints(
arc(point(0, 0), 1, radians(-Math.PI / 4), radians(Math.PI / 4)),
segment(point(2, 1), point(0, 0)),
),
@ -42,7 +42,7 @@ describe("intersection", () => {
it("should report both interception points when present", () => {
expect(
arcSegmentInterceptPoint(
arcSegmentInterceptPoints(
arc(point(0, 0), 1, radians(-Math.PI / 4), radians(Math.PI / 4)),
segment(point(0.9, -2), point(0.9, 2)),
),

@ -1,8 +1,10 @@
import { invariant } from "../excalidraw/utils";
import { cartesian2Polar, radians } from "./angle";
import { ellipse, ellipseSegmentInterceptPoints } from "./ellipse";
import { cartesian2Polar, normalizeRadians, radians } from "./angle";
import {
ellipse,
ellipseDistanceFromPoint,
ellipseSegmentInterceptPoints,
} from "./ellipse";
import { point, pointDistance } from "./point";
import { segment } from "./segment";
import type { GenericPoint, Segment, Radians, Arc } from "./types";
import { PRECISION } from "./utils";
@ -53,26 +55,44 @@ export function arcDistanceFromPoint<Point extends GenericPoint>(
a: Arc<Point>,
p: Point,
) {
const intersectPoint = arcSegmentInterceptPoint(a, segment(p, a.center));
invariant(
intersectPoint.length !== 1,
"Arc distance intersector cannot have multiple intersections",
const theta = normalizeRadians(
radians(Math.atan2(p[0] - a.center[0], p[1] - a.center[1])),
);
return pointDistance(intersectPoint[0], p);
if (a.startAngle <= theta && a.endAngle >= theta) {
return ellipseDistanceFromPoint(
p,
ellipse(a.center, 2 * a.radius, 2 * a.radius),
);
}
return Math.min(
pointDistance(
p,
point(
a.center[0] + a.radius + Math.cos(a.startAngle),
a.center[1] + a.radius + Math.sin(a.startAngle),
),
),
pointDistance(
p,
point(
a.center[0] + a.radius + Math.cos(a.endAngle),
a.center[1] + a.radius + Math.sin(a.endAngle),
),
),
);
}
/**
* Returns the intersection point(s) of a line segment represented by a start
* point and end point and a symmetric arc.
*/
export function arcSegmentInterceptPoint<Point extends GenericPoint>(
export function arcSegmentInterceptPoints<Point extends GenericPoint>(
a: Readonly<Arc<Point>>,
s: Readonly<Segment<Point>>,
): Point[] {
return ellipseSegmentInterceptPoints(
ellipse(a.center, radians(0), a.radius, a.radius),
ellipse(a.center, a.radius, a.radius),
s,
).filter((candidate) => {
const [candidateRadius, candidateAngle] = cartesian2Polar(

@ -1,4 +1,3 @@
import { radians } from "./angle";
import {
ellipse,
ellipseSegmentInterceptPoints,
@ -10,29 +9,29 @@ import { segment } from "./segment";
import type { Ellipse, GlobalPoint } from "./types";
describe("point and ellipse", () => {
const target: Ellipse<GlobalPoint> = ellipse(point(0, 0), radians(0), 2, 1);
it("point on ellipse", () => {
[point(0, 1), point(0, -1), point(2, 0), point(-2, 0)].forEach((p) => {
const target: Ellipse<GlobalPoint> = ellipse(point(1, 2), 2, 1);
[point(1, 3), point(1, 1), point(3, 2), point(-1, 2)].forEach((p) => {
expect(ellipseTouchesPoint(p, target)).toBe(true);
});
expect(ellipseTouchesPoint(point(-1.4, 0.7), target, 0.1)).toBe(true);
expect(ellipseTouchesPoint(point(-1.4, 0.71), target, 0.01)).toBe(true);
expect(ellipseTouchesPoint(point(-0.4, 2.7), target, 0.1)).toBe(true);
expect(ellipseTouchesPoint(point(-0.4, 2.71), target, 0.01)).toBe(true);
expect(ellipseTouchesPoint(point(1.4, 0.7), target, 0.1)).toBe(true);
expect(ellipseTouchesPoint(point(1.4, 0.71), target, 0.01)).toBe(true);
expect(ellipseTouchesPoint(point(2.4, 2.7), target, 0.1)).toBe(true);
expect(ellipseTouchesPoint(point(2.4, 2.71), target, 0.01)).toBe(true);
expect(ellipseTouchesPoint(point(1, -0.86), target, 0.1)).toBe(true);
expect(ellipseTouchesPoint(point(1, -0.86), target, 0.01)).toBe(true);
expect(ellipseTouchesPoint(point(2, 1.14), target, 0.1)).toBe(true);
expect(ellipseTouchesPoint(point(2, 1.14), target, 0.01)).toBe(true);
expect(ellipseTouchesPoint(point(-1, -0.86), target, 0.1)).toBe(true);
expect(ellipseTouchesPoint(point(-1, -0.86), target, 0.01)).toBe(true);
expect(ellipseTouchesPoint(point(0, 1.14), target, 0.1)).toBe(true);
expect(ellipseTouchesPoint(point(0, 1.14), target, 0.01)).toBe(true);
expect(ellipseTouchesPoint(point(-1, 0.8), target)).toBe(false);
expect(ellipseTouchesPoint(point(1, -0.8), target)).toBe(false);
expect(ellipseTouchesPoint(point(0, 2.8), target)).toBe(false);
expect(ellipseTouchesPoint(point(2, 1.2), target)).toBe(false);
});
it("point in ellipse", () => {
const target: Ellipse<GlobalPoint> = ellipse(point(0, 0), 2, 1);
[point(0, 1), point(0, -1), point(2, 0), point(-2, 0)].forEach((p) => {
expect(ellipseIncludesPoint(p, target)).toBe(true);
});
@ -50,7 +49,7 @@ describe("point and ellipse", () => {
describe("line and ellipse", () => {
it("detects outside segment", () => {
const e = ellipse(point(0, 0), radians(0), 2, 2);
const e = ellipse(point(0, 0), 2, 2);
expect(
ellipseSegmentInterceptPoints(

@ -1,12 +1,5 @@
import { radians } from "./angle";
import { line } from "./line";
import {
point,
pointDistance,
pointFromVector,
pointRotateRads,
} from "./point";
import type { Ellipse, GenericPoint, Segment, Radians } from "./types";
import { point, pointDistance, pointFromVector } from "./point";
import type { Ellipse, GenericPoint, Segment } from "./types";
import { PRECISION } from "./utils";
import {
vector,
@ -27,13 +20,11 @@ import {
*/
export function ellipse<Point extends GenericPoint>(
center: Point,
angle: Radians,
halfWidth: number,
halfHeight: number,
): Ellipse<Point> {
return {
center,
angle,
halfWidth,
halfHeight,
} as Ellipse<Point>;
@ -50,22 +41,11 @@ export const ellipseIncludesPoint = <Point extends GenericPoint>(
p: Point,
ellipse: Ellipse<Point>,
) => {
const { center, angle, halfWidth, halfHeight } = ellipse;
const translatedPoint = vectorAdd(
vectorFromPoint(p),
vectorScale(vectorFromPoint(center), -1),
);
const [rotatedPointX, rotatedPointY] = pointRotateRads(
pointFromVector(translatedPoint),
point(0, 0),
radians(-angle),
);
const { center, halfWidth, halfHeight } = ellipse;
const normalizedX = (p[0] - center[0]) / halfWidth;
const normalizedY = (p[1] - center[1]) / halfHeight;
return (
(rotatedPointX / halfWidth) * (rotatedPointX / halfWidth) +
(rotatedPointY / halfHeight) * (rotatedPointY / halfHeight) <=
1
);
return normalizedX * normalizedX + normalizedY * normalizedY <= 1;
};
/**
@ -97,21 +77,16 @@ export const ellipseDistanceFromPoint = <Point extends GenericPoint>(
p: Point,
ellipse: Ellipse<Point>,
): number => {
const { angle, halfWidth, halfHeight, center } = ellipse;
const { halfWidth, halfHeight, center } = ellipse;
const a = halfWidth;
const b = halfHeight;
const translatedPoint = vectorAdd(
vectorFromPoint(p),
vectorScale(vectorFromPoint(center), -1),
);
const [rotatedPointX, rotatedPointY] = pointRotateRads(
pointFromVector(translatedPoint),
point(0, 0),
radians(-angle),
);
const px = Math.abs(rotatedPointX);
const py = Math.abs(rotatedPointY);
const px = Math.abs(translatedPoint[0]);
const py = Math.abs(translatedPoint[1]);
let tx = 0.707;
let ty = 0.707;
@ -140,11 +115,11 @@ export const ellipseDistanceFromPoint = <Point extends GenericPoint>(
}
const [minX, minY] = [
a * tx * Math.sign(rotatedPointX),
b * ty * Math.sign(rotatedPointY),
a * tx * Math.sign(translatedPoint[0]),
b * ty * Math.sign(translatedPoint[1]),
];
return pointDistance(point(rotatedPointX, rotatedPointY), point(minX, minY));
return pointDistance(pointFromVector(translatedPoint), point(minX, minY));
};
/**
@ -153,19 +128,13 @@ export const ellipseDistanceFromPoint = <Point extends GenericPoint>(
*/
export function ellipseSegmentInterceptPoints<Point extends GenericPoint>(
e: Readonly<Ellipse<Point>>,
l: Readonly<Segment<Point>>,
s: Readonly<Segment<Point>>,
): Point[] {
const rx = e.halfWidth;
const ry = e.halfHeight;
const nonRotatedLine = line(
pointRotateRads(l[0], e.center, radians(-e.angle)),
pointRotateRads(l[1], e.center, radians(-e.angle)),
);
const dir = vectorFromPoint(nonRotatedLine[1], nonRotatedLine[0]);
const diff = vector(
nonRotatedLine[0][0] - e.center[0],
nonRotatedLine[0][1] - e.center[1],
);
const dir = vectorFromPoint(s[1], s[0]);
const diff = vector(s[0][0] - e.center[0], s[0][1] - e.center[1]);
const mDir = vector(dir[0] / (rx * rx), dir[1] / (ry * ry));
const mDiff = vector(diff[0] / (rx * rx), diff[1] / (ry * ry));
@ -183,10 +152,8 @@ export function ellipseSegmentInterceptPoints<Point extends GenericPoint>(
if (0 <= t_a && t_a <= 1) {
intersections.push(
point(
nonRotatedLine[0][0] +
(nonRotatedLine[1][0] - nonRotatedLine[0][0]) * t_a,
nonRotatedLine[0][1] +
(nonRotatedLine[1][1] - nonRotatedLine[0][1]) * t_a,
s[0][0] + (s[1][0] - s[0][0]) * t_a,
s[0][1] + (s[1][1] - s[0][1]) * t_a,
),
);
}
@ -194,10 +161,8 @@ export function ellipseSegmentInterceptPoints<Point extends GenericPoint>(
if (0 <= t_b && t_b <= 1) {
intersections.push(
point(
nonRotatedLine[0][0] +
(nonRotatedLine[1][0] - nonRotatedLine[0][0]) * t_b,
nonRotatedLine[0][1] +
(nonRotatedLine[1][1] - nonRotatedLine[0][1]) * t_b,
s[0][0] + (s[1][0] - s[0][0]) * t_b,
s[0][1] + (s[1][1] - s[0][1]) * t_b,
),
);
}
@ -206,16 +171,12 @@ export function ellipseSegmentInterceptPoints<Point extends GenericPoint>(
if (0 <= t && t <= 1) {
intersections.push(
point(
nonRotatedLine[0][0] +
(nonRotatedLine[1][0] - nonRotatedLine[0][0]) * t,
nonRotatedLine[0][1] +
(nonRotatedLine[1][1] - nonRotatedLine[0][1]) * t,
s[0][0] + (s[1][0] - s[0][0]) * t,
s[0][1] + (s[1][1] - s[0][1]) * t,
),
);
}
}
return intersections.map((point) =>
pointRotateRads(point, e.center, e.angle),
);
return intersections;
}

@ -137,7 +137,6 @@ export type Extent = {
// in replace of semi major and semi minor axes
export type Ellipse<Point extends GenericPoint> = {
center: Point;
angle: Radians;
halfWidth: number;
halfHeight: number;
} & {

@ -175,16 +175,11 @@ export const getSelectionBoxShape = <Point extends GlobalPoint | LocalPoint>(
export const getEllipseShape = <Point extends GlobalPoint | LocalPoint>(
element: ExcalidrawEllipseElement,
): GeometricShape<Point> => {
const { width, height, angle, x, y } = element;
const { width, height, x, y } = element;
return {
type: "ellipse",
data: ellipse(
point(x + width / 2, y + height / 2),
angle,
width / 2,
height / 2,
),
data: ellipse(point(x + width / 2, y + height / 2), width / 2, height / 2),
};
};

Loading…
Cancel
Save