gilles/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into dwelle/oxc

Browse Source 
# Conflicts:
#	packages/element/src/binding.ts
#	packages/element/src/elbowArrow.ts
#	packages/element/src/linearElementEditor.ts
#	packages/excalidraw/components/Actions.tsx
#	packages/excalidraw/components/App.tsx
#	packages/excalidraw/components/dropdownMenu/DropdownMenuItemLink.tsx
#	packages/excalidraw/components/dropdownMenu/common.ts
#	packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap
This commit is contained in:
dwelle
2026-02-23 21:24:08 +01:00
parent 63cd36e8ad 7ea3229e17
commit 28292f4867
163 changed files with 8069 additions and 1677 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/element/src/linearElementEditor.ts
+155 -65
View File
@@ -10,7 +10,6 @@ import {
vectorFromPoint,
curveLength,
curvePointAtLength,
lineSegment,
} from "@excalidraw/math";
import { getCurvePathOps } from "@excalidraw/utils/shape";
@@ -27,6 +26,7 @@ import {
import {
deconstructLinearOrFreeDrawElement,
getSnapOutlineMidPoint,
isPathALoop,
moveArrowAboveBindable,
projectFixedPointOntoDiagonal,
@@ -49,6 +49,7 @@ import {
calculateFixedPointForNonElbowArrowBinding,
getBindingStrategyForDraggingBindingElementEndpoints,
isBindingEnabled,
snapToMid,
updateBoundPoint,
} from "./binding";
import {
@@ -150,6 +151,8 @@ export class LinearElementEditor {
public readonly pointerOffset: Readonly<{ x: number; y: number }>;
public readonly hoverPointIndex: number;
public readonly segmentMidPointHoveredCoords: GlobalPoint | null;
public readonly hoveredFocusPointBinding: "start" | "end" | null;
public readonly draggedFocusPointBinding: "start" | "end" | null;
public readonly elbowed: boolean;
public readonly customLineAngle: number | null;
public readonly isEditing: boolean;
@@ -195,6 +198,8 @@ export class LinearElementEditor {
};
this.hoverPointIndex = -1;
this.segmentMidPointHoveredCoords = null;
this.hoveredFocusPointBinding = null;
this.draggedFocusPointBinding = null;
this.elbowed = isElbowArrow(element) && element.elbowed;
this.customLineAngle = null;
this.isEditing = isEditing;
@@ -352,6 +357,7 @@ export class LinearElementEditor {
app,
shouldRotateWithDiscreteAngle(event),
event.altKey,
linearElementEditor,
);
LinearElementEditor.movePoints(element, app.scene, positions, {
@@ -405,13 +411,14 @@ export class LinearElementEditor {
altFocusPoint:
!linearElementEditor.initialState.altFocusPoint &&
startBindingElement &&
updates?.suggestedBinding?.id !== startBindingElement.id
updates?.suggestedBinding?.element.id !== startBindingElement.id
? projectFixedPointOntoDiagonal(
element,
pointFrom<GlobalPoint>(element.x, element.y),
startBindingElement,
"start",
elementsMap,
app.state.zoom,
)
: linearElementEditor.initialState.altFocusPoint,
},
@@ -529,6 +536,7 @@ export class LinearElementEditor {
app,
shouldRotateWithDiscreteAngle(event) && singlePointDragged,
event.altKey,
linearElementEditor,
);
LinearElementEditor.movePoints(element, app.scene, positions, {
@@ -604,13 +612,13 @@ export class LinearElementEditor {
const altFocusPointBindableElement =
endIsSelected && // The "other" end (i.e. "end") is dragged
startBindingElement &&
updates?.suggestedBinding?.id !== startBindingElement.id // The end point is not hovering the start bindable + it's binding gap
updates?.suggestedBinding?.element.id !== startBindingElement.id // The end point is not hovering the start bindable + it's binding gap
? startBindingElement
: startIsSelected && // The "other" end (i.e. "start") is dragged
endBindingElement &&
updates?.suggestedBinding?.id !== endBindingElement.id // The start point is not hovering the end bindable + it's binding gap
? endBindingElement
: null;
endBindingElement &&
updates?.suggestedBinding?.element.id !== endBindingElement.id // The start point is not hovering the end bindable + it's binding gap
? endBindingElement
: null;
const newLinearElementEditor: LinearElementEditor = {
...linearElementEditor,
@@ -628,6 +636,7 @@ export class LinearElementEditor {
altFocusPointBindableElement,
"start",
elementsMap,
app.state.zoom,
)
: linearElementEditor.initialState.altFocusPoint,
},
@@ -725,7 +734,6 @@ export class LinearElementEditor {
? [pointerDownState.lastClickedPoint]
: selectedPointsIndices,
isDragging: false,
pointerOffset: { x: 0, y: 0 },
customLineAngle: null,
initialState: {
...editingLinearElement.initialState,
@@ -2078,6 +2086,7 @@ const pointDraggingUpdates = (
app: AppClassProperties,
angleLocked: boolean,
altKey: boolean,
linearElementEditor: LinearElementEditor,
): {
positions: PointsPositionUpdates;
updates?: PointMoveOtherUpdates;
@@ -2125,18 +2134,89 @@ const pointDraggingUpdates = (
);
if (isElbowArrow(element)) {
const suggestedBindingElement = startIsDragged
? start.element
: endIsDragged
? end.element
: null;
return {
positions: naiveDraggingPoints,
updates: {
suggestedBinding: startIsDragged
? start.element
: endIsDragged
? end.element
: null,
suggestedBinding: suggestedBindingElement
? {
element: suggestedBindingElement,
midPoint: snapToMid(
suggestedBindingElement,
elementsMap,
pointFrom<GlobalPoint>(
scenePointerX - linearElementEditor.pointerOffset.x,
scenePointerY - linearElementEditor.pointerOffset.y,
),
),
}
: null,
},
};
}
// Handle the case where neither endpoint is being dragged
// but we need to update bound endpoints
if (!startIsDragged && !endIsDragged) {
const nextArrow = {
...element,
points: element.points.map((p, idx) => {
return naiveDraggingPoints.get(idx)?.point ?? p;
}),
};
const positions = new Map(naiveDraggingPoints);
if (element.startBinding) {
const startBindable = elementsMap.get(element.startBinding.elementId) as
| ExcalidrawBindableElement
| undefined;
if (startBindable) {
const startPoint =
updateBoundPoint(
nextArrow,
"startBinding",
element.startBinding,
startBindable,
elementsMap,
) ?? null;
if (startPoint) {
positions.set(0, { point: startPoint, isDragging: true });
}
}
}
if (element.endBinding) {
const endBindable = elementsMap.get(element.endBinding.elementId) as
| ExcalidrawBindableElement
| undefined;
if (endBindable) {
const endPoint =
updateBoundPoint(
nextArrow,
"endBinding",
element.endBinding,
endBindable,
elementsMap,
) ?? null;
if (endPoint) {
positions.set(element.points.length - 1, {
point: endPoint,
isDragging: true,
});
}
}
}
return {
positions,
};
}
if (startIsDragged === endIsDragged) {
return {
positions: naiveDraggingPoints,
@@ -2167,7 +2247,20 @@ const pointDraggingUpdates = (
(updates.startBinding.mode === "orbit" ||
!getFeatureFlag("COMPLEX_BINDINGS"))
) {
updates.suggestedBinding = start.element;
updates.suggestedBinding = start.element
? {
element: start.element,
midPoint: getSnapOutlineMidPoint(
pointFrom<GlobalPoint>(
scenePointerX - linearElementEditor.pointerOffset.x,
scenePointerY - linearElementEditor.pointerOffset.y,
),
start.element,
elementsMap,
app.state.zoom,
),
}
: null;
}
} else if (startIsDragged) {
updates.suggestedBinding = app.state.suggestedBinding;
@@ -2193,7 +2286,20 @@ const pointDraggingUpdates = (
(updates.endBinding.mode === "orbit" ||
!getFeatureFlag("COMPLEX_BINDINGS"))
) {
updates.suggestedBinding = end.element;
updates.suggestedBinding = end.element
? {
element: end.element,
midPoint: getSnapOutlineMidPoint(
pointFrom<GlobalPoint>(
scenePointerX - linearElementEditor.pointerOffset.x,
scenePointerY - linearElementEditor.pointerOffset.y,
),
end.element,
elementsMap,
app.state.zoom,
),
}
: null;
}
} else if (endIsDragged) {
updates.suggestedBinding = app.state.suggestedBinding;
@@ -2233,19 +2339,6 @@ const pointDraggingUpdates = (
: updates.endBinding,
};
// We need to use a custom intersector to ensure that if there is a big "jump"
// in the arrow's position, we can position it with outline avoidance
// pixel-perfectly and avoid "dancing" arrows.
// NOTE: Direction matters here, so we create two intersectors
const startCustomIntersector =
start.focusPoint && end.focusPoint
? lineSegment(start.focusPoint, end.focusPoint)
: undefined;
const endCustomIntersector =
start.focusPoint && end.focusPoint
? lineSegment(end.focusPoint, start.focusPoint)
: undefined;
// Needed to handle a special case where an existing arrow is dragged over
// the same element it is bound to on the other side
const startIsDraggingOverEndElement =
@@ -2271,19 +2364,19 @@ const pointDraggingUpdates = (
const endLocalPoint = startIsDraggingOverEndElement
? nextArrow.points[nextArrow.points.length - 1]
: endIsDraggingOverStartElement &&
app.state.bindMode !== "inside" &&
getFeatureFlag("COMPLEX_BINDINGS")
? nextArrow.points[0]
: endBindable
? updateBoundPoint(
element,
"endBinding",
nextArrow.endBinding,
endBindable,
elementsMap,
endCustomIntersector,
) || nextArrow.points[nextArrow.points.length - 1]
: nextArrow.points[nextArrow.points.length - 1];
app.state.bindMode !== "inside" &&
getFeatureFlag("COMPLEX_BINDINGS")
? nextArrow.points[0]
: endBindable
? updateBoundPoint(
element,
"endBinding",
nextArrow.endBinding,
endBindable,
elementsMap,
endIsDragged,
) || nextArrow.points[nextArrow.points.length - 1]
: nextArrow.points[nextArrow.points.length - 1];
// We need to keep the simulated next arrow up-to-date, because
// updateBoundPoint looks at the opposite point
@@ -2302,25 +2395,28 @@ const pointDraggingUpdates = (
endIsDraggingOverStartElement && getFeatureFlag("COMPLEX_BINDINGS")
? nextArrow.points[0]
: startIsDraggingOverEndElement &&
app.state.bindMode !== "inside" &&
getFeatureFlag("COMPLEX_BINDINGS")
? nextArrow.points[nextArrow.points.length - 1]
: startBindable
? updateBoundPoint(
element,
"startBinding",
nextArrow.startBinding,
startBindable,
elementsMap,
startCustomIntersector,
) || nextArrow.points[0]
: nextArrow.points[0];
app.state.bindMode !== "inside" &&
getFeatureFlag("COMPLEX_BINDINGS")
? endLocalPoint
: startBindable
? updateBoundPoint(
element,
"startBinding",
nextArrow.startBinding,
startBindable,
elementsMap,
startIsDragged,
) || nextArrow.points[0]
: nextArrow.points[0];
const endChanged =
pointDistance(
endLocalPoint,
nextArrow.points[nextArrow.points.length - 1],
) !== 0;
!startIsDraggingOverEndElement &&
!(
endIsDraggingOverStartElement &&
app.state.bindMode !== "inside" &&
getFeatureFlag("COMPLEX_BINDINGS")
) &&
!!endBindable;
const startChanged =
pointDistance(startLocalPoint, nextArrow.points[0]) !== 0;
@@ -2334,13 +2430,7 @@ const pointDraggingUpdates = (
const indices = Array.from(indicesSet);
return {
updates:
updates.startBinding || updates.suggestedBinding
? {
startBinding: updates.startBinding,
suggestedBinding: updates.suggestedBinding,
}
: undefined,
updates,
positions: new Map(
indices.map((idx) => {
return [