smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add diamond arc alignment

Browse source
This commit is contained in:
Mark Tolmacs 2024-10-03 14:09:59 +02:00
parent 2ec3374333
commit a177d33121
No known key found for this signature in database
2 changed files with 28 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/excalidraw/element/binding.ts
View file

@ -71,6 +71,7 @@ import {
import { distanceToBindableElement } from "./distance"; import { distanceToBindableElement } from "./distance";
import { intersectElementWithLine } from "./collision"; import { intersectElementWithLine } from "./collision";
import { debugDrawPoint } from "../visualdebug";
export type SuggestedBinding = export type SuggestedBinding =
| NonDeleted<ExcalidrawBindableElement> | NonDeleted<ExcalidrawBindableElement>

51
packages/excalidraw/element/collision.ts
View file

@ -42,6 +42,7 @@ import {
pointsEqual, pointsEqual,
} from "../../math"; } from "../../math";
import { LINE_CONFIRM_THRESHOLD } from "../constants"; import { LINE_CONFIRM_THRESHOLD } from "../constants";
import { debugDrawArc, debugDrawLine } from "../visualdebug";
export const shouldTestInside = (element: ExcalidrawElement) => { export const shouldTestInside = (element: ExcalidrawElement) => {
if (element.type === "arrow") { if (element.type === "arrow") {
@ -281,17 +282,20 @@ const intersectDiamondWithLine = (
b: GlobalPoint, b: GlobalPoint,
offset: number = 0, offset: number = 0,
): GlobalPoint[] => { ): GlobalPoint[] => {
const top = pointFrom<GlobalPoint>(element.x + element.width / 2, element.y); const top = pointFrom<GlobalPoint>(
element.x + element.width / 2,
element.y - offset,
);
const right = pointFrom<GlobalPoint>( const right = pointFrom<GlobalPoint>(
element.x + element.width, element.x + element.width + offset,
element.y + element.height / 2, element.y + element.height / 2,
); );
const bottom = pointFrom<GlobalPoint>( const bottom = pointFrom<GlobalPoint>(
element.x + element.width / 2, element.x + element.width / 2,
element.y + element.height, element.y + element.height + offset,
); );
const left = pointFrom<GlobalPoint>( const left = pointFrom<GlobalPoint>(
element.x, element.x - offset,
element.y + element.height / 2, element.y + element.height / 2,
); );
const center = pointFrom<GlobalPoint>( const center = pointFrom<GlobalPoint>(
@ -309,25 +313,21 @@ const intersectDiamondWithLine = (
const rotatedA = pointRotateRads(a, center, radians(-element.angle)); const rotatedA = pointRotateRads(a, center, radians(-element.angle));
const rotatedB = pointRotateRads(b, center, radians(-element.angle)); const rotatedB = pointRotateRads(b, center, radians(-element.angle));
const topRight = createDiamondSide( const topRight = segment<GlobalPoint>(
segment<GlobalPoint>(top, right), pointFrom(top[0] + verticalRadius, top[1] + horizontalRadius),
verticalRadius, pointFrom(right[0] - verticalRadius, right[1] - horizontalRadius),
horizontalRadius,
); );
const bottomRight = createDiamondSide( const bottomRight = segment<GlobalPoint>(
segment<GlobalPoint>(bottom, right), pointFrom(bottom[0] + verticalRadius, bottom[1] - horizontalRadius),
verticalRadius, pointFrom(right[0] - verticalRadius, right[1] + horizontalRadius),
horizontalRadius,
); );
const bottomLeft = createDiamondSide( const bottomLeft = segment<GlobalPoint>(
segment<GlobalPoint>(bottom, left), pointFrom(bottom[0] - verticalRadius, bottom[1] - horizontalRadius),
verticalRadius, pointFrom(left[0] + verticalRadius, left[1] + horizontalRadius),
horizontalRadius,
); );
const topLeft = createDiamondSide( const topLeft = segment<GlobalPoint>(
segment<GlobalPoint>(top, left), pointFrom(top[0] - verticalRadius, top[1] + horizontalRadius),
verticalRadius, pointFrom(left[0] + verticalRadius, left[1] - horizontalRadius),
horizontalRadius,
); );
const arcs: Arc<GlobalPoint>[] = element.roundness const arcs: Arc<GlobalPoint>[] = element.roundness
@ -337,7 +337,7 @@ const intersectDiamondWithLine = (
topRight[0], topRight[0],
pointFrom( pointFrom(
top[0], top[0],
top[1] + Math.sqrt(2 * Math.pow(verticalRadius, 2)), top[1] + Math.sqrt(2 * Math.pow(verticalRadius, 2)) - offset,
), ),
verticalRadius, verticalRadius,
), // TOP ), // TOP
@ -345,7 +345,7 @@ const intersectDiamondWithLine = (
topRight[1], topRight[1],
bottomRight[1], bottomRight[1],
pointFrom( pointFrom(
right[0] - Math.sqrt(2 * Math.pow(horizontalRadius, 2)), right[0] - Math.sqrt(2 * Math.pow(horizontalRadius, 2)) + offset,
right[1], right[1],
), ),
horizontalRadius, horizontalRadius,
@ -355,7 +355,7 @@ const intersectDiamondWithLine = (
bottomLeft[0], bottomLeft[0],
pointFrom( pointFrom(
bottom[0], bottom[0],
bottom[1] - Math.sqrt(2 * Math.pow(verticalRadius, 2)), bottom[1] - Math.sqrt(2 * Math.pow(verticalRadius, 2)) + offset,
), ),
verticalRadius, verticalRadius,
), // BOTTOM ), // BOTTOM
@ -363,7 +363,7 @@ const intersectDiamondWithLine = (
bottomLeft[1], bottomLeft[1],
topLeft[1], topLeft[1],
pointFrom( pointFrom(
left[0] + Math.sqrt(2 * Math.pow(horizontalRadius, 2)), left[0] + Math.sqrt(2 * Math.pow(horizontalRadius, 2)) - offset,
left[1], left[1],
), ),
horizontalRadius, horizontalRadius,
@ -371,6 +371,9 @@ const intersectDiamondWithLine = (
] ]
: []; : [];
arcs.forEach((a) => debugDrawArc(a, { color: "red" }));
debugDrawLine([topRight, bottomRight, bottomLeft, topLeft], {});
const sides: GlobalPoint[] = [topRight, bottomRight, bottomLeft, topLeft] const sides: GlobalPoint[] = [topRight, bottomRight, bottomLeft, topLeft]
.map((s) => .map((s) =>
lineSegmentIntersectionPoints(line<GlobalPoint>(rotatedA, rotatedB), s), lineSegmentIntersectionPoints(line<GlobalPoint>(rotatedA, rotatedB), s),