Compare commits

..

No commits in common. "mtolmacs/feat/fixed-point-simple-arrow-binding" and "master" have entirely different histories.

26 changed files with 359 additions and 1943 deletions

View File

@ -514,5 +514,3 @@ export enum UserIdleState {
* the start and end points)
*/
export const LINE_POLYGON_POINT_MERGE_DISTANCE = 20;
export const BIND_MODE_TIMEOUT = 1000; // ms

View File

@ -3,6 +3,9 @@ import {
arrayToMap,
isBindingFallthroughEnabled,
tupleToCoors,
invariant,
isDevEnv,
isTestEnv,
} from "@excalidraw/common";
import {
@ -34,7 +37,7 @@ import {
getCenterForBounds,
getElementBounds,
} from "./bounds";
import { hitElementItself, intersectElementWithLineSegment } from "./collision";
import { intersectElementWithLineSegment } from "./collision";
import { distanceToElement } from "./distance";
import {
headingForPointFromElement,
@ -124,9 +127,6 @@ export const bindOrUnbindLinearElement = (
endBindingElement: ExcalidrawBindableElement | null | "keep",
scene: Scene,
): void => {
const bothEndBoundToTheSameElement =
linearElement.startBinding?.elementId ===
linearElement.endBinding?.elementId && !!linearElement.startBinding;
const elementsMap = scene.getNonDeletedElementsMap();
const boundToElementIds: Set<ExcalidrawBindableElement["id"]> = new Set();
const unboundFromElementIds: Set<ExcalidrawBindableElement["id"]> = new Set();
@ -151,20 +151,18 @@ export const bindOrUnbindLinearElement = (
elementsMap,
);
if (!bothEndBoundToTheSameElement) {
const onlyUnbound = Array.from(unboundFromElementIds).filter(
(id) => !boundToElementIds.has(id),
);
const onlyUnbound = Array.from(unboundFromElementIds).filter(
(id) => !boundToElementIds.has(id),
);
getNonDeletedElements(scene, onlyUnbound).forEach((element) => {
scene.mutateElement(element, {
boundElements: element.boundElements?.filter(
(element) =>
element.type !== "arrow" || element.id !== linearElement.id,
),
});
getNonDeletedElements(scene, onlyUnbound).forEach((element) => {
scene.mutateElement(element, {
boundElements: element.boundElements?.filter(
(element) =>
element.type !== "arrow" || element.id !== linearElement.id,
),
});
}
});
};
const bindOrUnbindLinearElementEdge = (
@ -205,7 +203,6 @@ const bindOrUnbindLinearElementEdge = (
linearElement,
bindableElement,
startOrEnd,
elementsMap,
)
: startOrEnd === "start" ||
otherEdgeBindableElement.id !== bindableElement.id)
@ -396,7 +393,6 @@ export const maybeSuggestBindingsForLinearElementAtCoords = (
}[],
scene: Scene,
zoom: AppState["zoom"],
elementsMap: ElementsMap,
// During line creation the start binding hasn't been written yet
// into `linearElement`
oppositeBindingBoundElement?: ExcalidrawBindableElement | null,
@ -415,12 +411,11 @@ export const maybeSuggestBindingsForLinearElementAtCoords = (
if (
hoveredBindableElement != null &&
(oppositeBindingBoundElement?.id === hoveredBindableElement.id ||
!isLinearElementSimpleAndAlreadyBound(
linearElement,
oppositeBindingBoundElement?.id,
hoveredBindableElement,
))
!isLinearElementSimpleAndAlreadyBound(
linearElement,
oppositeBindingBoundElement?.id,
hoveredBindableElement,
)
) {
acc.add(hoveredBindableElement);
}
@ -464,7 +459,6 @@ export const maybeBindLinearElement = (
linearElement,
hoveredElement,
"end",
elementsMap,
)
) {
bindLinearElement(linearElement, hoveredElement, "end", scene);
@ -493,120 +487,29 @@ export const bindLinearElement = (
return;
}
const elementsMap = scene.getNonDeletedElementsMap();
const edgePoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
linearElement,
startOrEnd === "start" ? 0 : -1,
elementsMap,
);
let binding: PointBinding | FixedPointBinding;
let binding: PointBinding | FixedPointBinding = {
elementId: hoveredElement.id,
...normalizePointBinding(
calculateFocusAndGap(
linearElement,
hoveredElement,
startOrEnd,
scene.getNonDeletedElementsMap(),
),
hoveredElement,
),
};
if (isElbowArrow(linearElement)) {
binding = {
elementId: hoveredElement.id,
...normalizePointBinding(
calculateFocusAndGap(
linearElement,
hoveredElement,
startOrEnd,
elementsMap,
),
hoveredElement,
),
...binding,
...calculateFixedPointForElbowArrowBinding(
linearElement,
hoveredElement,
startOrEnd,
elementsMap,
scene.getNonDeletedElementsMap(),
),
};
} else if (
hitElementItself({
point: edgePoint,
element: hoveredElement,
elementsMap,
threshold: 0, // TODO: Not ideal, should be calculated from the same source
})
) {
// Use FixedPoint binding when the arrow endpoint is inside the shape
binding = {
elementId: hoveredElement.id,
focus: 0,
gap: 0,
...calculateFixedPointForNonElbowArrowBinding(
linearElement,
hoveredElement,
startOrEnd,
elementsMap,
),
};
} else {
// For non-elbow arrows, extend the last segment and check intersection
const adjacentPoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
linearElement,
startOrEnd === "start" ? 1 : -2,
elementsMap,
);
const extendedDirection = vectorScale(
vectorNormalize(
vectorFromPoint(
pointFrom(
edgePoint[0] - adjacentPoint[0],
edgePoint[1] - adjacentPoint[1],
),
),
),
Math.max(hoveredElement.width, hoveredElement.height) * 2,
);
const intersector = lineSegment(
edgePoint,
pointFromVector(
vectorFromPoint(
pointFrom(
edgePoint[0] + extendedDirection[0],
edgePoint[1] + extendedDirection[1],
),
),
),
);
// Check if this extended segment intersects the bindable element
const intersections = intersectElementWithLineSegment(
hoveredElement,
elementsMap,
intersector,
);
const intersectsElement = intersections.length > 0;
if (intersectsElement) {
// Use traditional focus/gap binding when the extended segment intersects
binding = {
elementId: hoveredElement.id,
...normalizePointBinding(
calculateFocusAndGap(
linearElement,
hoveredElement,
startOrEnd,
elementsMap,
),
hoveredElement,
),
};
} else {
// Use FixedPoint binding when the extended segment doesn't intersect
binding = {
elementId: hoveredElement.id,
focus: 0,
gap: 0,
...calculateFixedPointForNonElbowArrowBinding(
linearElement,
hoveredElement,
startOrEnd,
elementsMap,
),
};
}
}
scene.mutateElement(linearElement, {
@ -629,43 +532,14 @@ const isLinearElementSimpleAndAlreadyBoundOnOppositeEdge = (
linearElement: NonDeleted<ExcalidrawLinearElement>,
bindableElement: ExcalidrawBindableElement,
startOrEnd: "start" | "end",
elementsMap: ElementsMap,
): boolean => {
const otherBinding =
linearElement[startOrEnd === "start" ? "endBinding" : "startBinding"];
// Only prevent binding if opposite end is bound to the same element
if (
otherBinding?.elementId !== bindableElement.id ||
!isLinearElementSimple(linearElement)
) {
return false;
}
// For non-elbow arrows, allow FixedPoint binding even when both ends bind to the same element
if (!isElbowArrow(linearElement)) {
const currentEndPoint =
LinearElementEditor.getPointAtIndexGlobalCoordinates(
linearElement,
startOrEnd === "start" ? 0 : -1,
elementsMap,
);
// If current end would use FixedPoint binding, allow it
if (
hitElementItself({
point: currentEndPoint,
element: bindableElement,
elementsMap,
threshold: 0, // TODO: Not ideal, should be calculated from the same source
})
) {
return false;
}
}
// Prevent traditional focus/gap binding when both ends would bind to the same element
return true;
return isLinearElementSimpleAndAlreadyBound(
linearElement,
otherBinding?.elementId,
bindableElement,
);
};
export const isLinearElementSimpleAndAlreadyBound = (
@ -902,10 +776,7 @@ export const updateBoundElements = (
? elementsMap.get(element.startBinding.elementId)
: null;
const endBindingElement = element.endBinding
? // PERF: If the arrow is bound to the same element on both ends.
startBindingElement?.id === element.endBinding.elementId
? startBindingElement
: elementsMap.get(element.endBinding.elementId)
? elementsMap.get(element.endBinding.elementId)
: null;
let startBounds: Bounds | null = null;
@ -978,9 +849,6 @@ export const updateBoundElements = (
...(changedElement.id === element.endBinding?.elementId
? { endBinding: bindings.endBinding }
: {}),
moveMidPointsWithElement:
!!startBindingElement &&
startBindingElement?.id === endBindingElement?.id,
});
const boundText = getBoundTextElement(element, elementsMap);
@ -1074,40 +942,35 @@ const getDistanceForBinding = (
};
export const bindPointToSnapToElementOutline = (
linearElement: ExcalidrawLinearElement,
arrow: ExcalidrawElbowArrowElement,
bindableElement: ExcalidrawBindableElement,
startOrEnd: "start" | "end",
elementsMap: ElementsMap,
): GlobalPoint => {
const aabb = aabbForElement(bindableElement, elementsMap);
const localP =
linearElement.points[
startOrEnd === "start" ? 0 : linearElement.points.length - 1
];
const globalP = pointFrom<GlobalPoint>(
linearElement.x + localP[0],
linearElement.y + localP[1],
);
if (linearElement.points.length < 2) {
// New arrow creation, so no snapping
return globalP;
if (isDevEnv() || isTestEnv()) {
invariant(arrow.points.length > 1, "Arrow should have at least 2 points");
}
const aabb = aabbForElement(bindableElement, elementsMap);
const localP =
arrow.points[startOrEnd === "start" ? 0 : arrow.points.length - 1];
const globalP = pointFrom<GlobalPoint>(
arrow.x + localP[0],
arrow.y + localP[1],
);
const edgePoint = isRectanguloidElement(bindableElement)
? avoidRectangularCorner(bindableElement, elementsMap, globalP)
: globalP;
const elbowed = isElbowArrow(linearElement);
const elbowed = isElbowArrow(arrow);
const center = getCenterForBounds(aabb);
const adjacentPointIdx =
startOrEnd === "start" ? 1 : linearElement.points.length - 2;
const adjacentPointIdx = startOrEnd === "start" ? 1 : arrow.points.length - 2;
const adjacentPoint = pointRotateRads(
pointFrom<GlobalPoint>(
linearElement.x + linearElement.points[adjacentPointIdx][0],
linearElement.y + linearElement.points[adjacentPointIdx][1],
arrow.x + arrow.points[adjacentPointIdx][0],
arrow.y + arrow.points[adjacentPointIdx][1],
),
center,
linearElement.angle ?? 0,
arrow.angle ?? 0,
);
let intersection: GlobalPoint | null = null;
@ -1166,35 +1029,7 @@ export const bindPointToSnapToElementOutline = (
return edgePoint;
}
return intersection;
};
export const getOutlineAvoidingPoint = (
element: NonDeleted<ExcalidrawLinearElement>,
hoveredElement: ExcalidrawBindableElement | null,
coords: GlobalPoint,
pointIndex: number,
elementsMap: ElementsMap,
): GlobalPoint => {
if (hoveredElement) {
const newPoints = Array.from(element.points);
newPoints[pointIndex] = pointFrom<LocalPoint>(
coords[0] - element.x,
coords[1] - element.y,
);
return bindPointToSnapToElementOutline(
{
...element,
points: newPoints,
},
hoveredElement,
pointIndex === 0 ? "start" : "end",
elementsMap,
);
}
return coords;
return elbowed ? intersection : edgePoint;
};
export const avoidRectangularCorner = (
@ -1419,22 +1254,15 @@ const updateBoundPoint = (
const direction = startOrEnd === "startBinding" ? -1 : 1;
const edgePointIndex = direction === -1 ? 0 : linearElement.points.length - 1;
if (isFixedPointBinding(binding)) {
if (isElbowArrow(linearElement) && isFixedPointBinding(binding)) {
const fixedPoint =
normalizeFixedPoint(binding.fixedPoint) ??
(isElbowArrow(linearElement)
? calculateFixedPointForElbowArrowBinding(
linearElement,
bindableElement,
startOrEnd === "startBinding" ? "start" : "end",
elementsMap,
).fixedPoint
: calculateFixedPointForNonElbowArrowBinding(
linearElement,
bindableElement,
startOrEnd === "startBinding" ? "start" : "end",
elementsMap,
).fixedPoint);
calculateFixedPointForElbowArrowBinding(
linearElement,
bindableElement,
startOrEnd === "startBinding" ? "start" : "end",
elementsMap,
).fixedPoint;
const globalMidPoint = elementCenterPoint(bindableElement, elementsMap);
const global = pointFrom<GlobalPoint>(
bindableElement.x + fixedPoint[0] * bindableElement.width,
@ -1573,42 +1401,6 @@ export const calculateFixedPointForElbowArrowBinding = (
};
};
export const calculateFixedPointForNonElbowArrowBinding = (
linearElement: NonDeleted<ExcalidrawLinearElement>,
hoveredElement: ExcalidrawBindableElement,
startOrEnd: "start" | "end",
elementsMap: ElementsMap,
): { fixedPoint: FixedPoint } => {
const edgePoint = LinearElementEditor.getPointAtIndexGlobalCoordinates(
linearElement,
startOrEnd === "start" ? 0 : -1,
elementsMap,
);
// Convert the global point to element-local coordinates
const elementCenter = pointFrom(
hoveredElement.x + hoveredElement.width / 2,
hoveredElement.y + hoveredElement.height / 2,
);
// Rotate the point to account for element rotation
const nonRotatedPoint = pointRotateRads(
edgePoint,
elementCenter,
-hoveredElement.angle as Radians,
);
// Calculate the ratio relative to the element's bounds
const fixedPointX =
(nonRotatedPoint[0] - hoveredElement.x) / hoveredElement.width;
const fixedPointY =
(nonRotatedPoint[1] - hoveredElement.y) / hoveredElement.height;
return {
fixedPoint: normalizeFixedPoint([fixedPointX, fixedPointY]),
};
};
const maybeCalculateNewGapWhenScaling = (
changedElement: ExcalidrawBindableElement,
currentBinding: PointBinding | null | undefined,
@ -2420,18 +2212,16 @@ export const getGlobalFixedPointForBindableElement = (
};
export const getGlobalFixedPoints = (
arrow: ExcalidrawArrowElement,
arrow: ExcalidrawElbowArrowElement,
elementsMap: ElementsMap,
): [GlobalPoint, GlobalPoint] => {
const startElement =
arrow.startBinding &&
isFixedPointBinding(arrow.startBinding) &&
(elementsMap.get(arrow.startBinding.elementId) as
| ExcalidrawBindableElement
| undefined);
const endElement =
arrow.endBinding &&
isFixedPointBinding(arrow.endBinding) &&
(elementsMap.get(arrow.endBinding.elementId) as
| ExcalidrawBindableElement
| undefined);

View File

@ -13,7 +13,7 @@ import type {
import type { NonDeletedExcalidrawElement } from "@excalidraw/element/types";
import { bindOrUnbindLinearElement, updateBoundElements } from "./binding";
import { updateBoundElements } from "./binding";
import { getCommonBounds } from "./bounds";
import { getPerfectElementSize } from "./sizeHelpers";
import { getBoundTextElement } from "./textElement";
@ -102,26 +102,9 @@ export const dragSelectedElements = (
gridSize,
);
const elementsToUpdateIds = new Set(
Array.from(elementsToUpdate, (el) => el.id),
);
elementsToUpdate.forEach((element) => {
const isArrow = !isArrowElement(element);
const isStartBoundElementSelected =
isArrow ||
(element.startBinding
? elementsToUpdateIds.has(element.startBinding.elementId)
: false);
const isEndBoundElementSelected =
isArrow ||
(element.endBinding
? elementsToUpdateIds.has(element.endBinding.elementId)
: false);
updateElementCoords(pointerDownState, element, scene, adjustedOffset);
if (!isArrowElement(element)) {
updateElementCoords(pointerDownState, element, scene, adjustedOffset);
// skip arrow labels since we calculate its position during render
const textElement = getBoundTextElement(
element,
@ -135,33 +118,9 @@ export const dragSelectedElements = (
adjustedOffset,
);
}
updateBoundElements(element, scene, {
simultaneouslyUpdated: Array.from(elementsToUpdate),
});
} else if (
// NOTE: Add a little initial drag to the arrow dragging to avoid
// accidentally unbinding the arrow when the user just wants to select it.
Math.max(Math.abs(adjustedOffset.x), Math.abs(adjustedOffset.y)) > 1
) {
updateElementCoords(pointerDownState, element, scene, adjustedOffset);
const shouldUnbindStart =
element.startBinding && !isStartBoundElementSelected;
const shouldUnbindEnd = element.endBinding && !isEndBoundElementSelected;
if (shouldUnbindStart || shouldUnbindEnd) {
// NOTE: Moving the bound arrow should unbind it, otherwise we would
// have weird situations, like 0 lenght arrow when the user moves
// the arrow outside a filled shape suddenly forcing the arrow start
// and end point to jump "outside" the shape.
bindOrUnbindLinearElement(
element,
shouldUnbindStart ? null : "keep",
shouldUnbindEnd ? null : "keep",
scene,
);
}
}
});
};

View File

@ -25,9 +25,7 @@ import {
import {
deconstructLinearOrFreeDrawElement,
hitElementItself,
isPathALoop,
shouldTestInside,
type Store,
} from "@excalidraw/element";
@ -45,10 +43,8 @@ import type {
import type { Mutable } from "@excalidraw/common/utility-types";
import {
bindLinearElement,
bindOrUnbindLinearElement,
getHoveredElementForBinding,
getOutlineAvoidingPoint,
isBindingEnabled,
maybeSuggestBindingsForLinearElementAtCoords,
} from "./binding";
@ -62,8 +58,6 @@ import { headingIsHorizontal, vectorToHeading } from "./heading";
import { mutateElement } from "./mutateElement";
import { getBoundTextElement, handleBindTextResize } from "./textElement";
import {
isArrowElement,
isBindableElement,
isBindingElement,
isElbowArrow,
isFixedPointBinding,
@ -91,8 +85,6 @@ import type {
FixedSegment,
ExcalidrawElbowArrowElement,
PointsPositionUpdates,
NonDeletedExcalidrawElement,
Ordered,
} from "./types";
/**
@ -142,7 +134,6 @@ export class LinearElementEditor {
index: number | null;
added: boolean;
};
arrowOtherPoint?: GlobalPoint;
}>;
/** whether you're dragging a point */
@ -287,7 +278,6 @@ export class LinearElementEditor {
scenePointerX: number,
scenePointerY: number,
linearElementEditor: LinearElementEditor,
thresholdCallback: (element: ExcalidrawElement) => number,
): Pick<AppState, keyof AppState> | null {
if (!linearElementEditor) {
return null;
@ -296,23 +286,19 @@ export class LinearElementEditor {
const elementsMap = app.scene.getNonDeletedElementsMap();
const element = LinearElementEditor.getElement(elementId, elementsMap);
let customLineAngle = linearElementEditor.customLineAngle;
let arrowOtherPoint: GlobalPoint | undefined =
linearElementEditor.pointerDownState.arrowOtherPoint;
if (!element) {
return null;
}
const elbowed = isElbowArrow(element);
if (
elbowed &&
isElbowArrow(element) &&
!linearElementEditor.pointerDownState.lastClickedIsEndPoint &&
linearElementEditor.pointerDownState.lastClickedPoint !== 0
) {
return null;
}
const selectedPointsIndices = elbowed
const selectedPointsIndices = isElbowArrow(element)
? [
!!linearElementEditor.selectedPointsIndices?.includes(0)
? 0
@ -322,7 +308,7 @@ export class LinearElementEditor {
: undefined,
].filter((idx): idx is number => idx !== undefined)
: linearElementEditor.selectedPointsIndices;
const lastClickedPoint = elbowed
const lastClickedPoint = isElbowArrow(element)
? linearElementEditor.pointerDownState.lastClickedPoint > 0
? element.points.length - 1
: 0
@ -380,38 +366,38 @@ export class LinearElementEditor {
scenePointerY - linearElementEditor.pointerOffset.y,
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
);
const deltaX = newDraggingPointPosition[0] - draggingPoint[0];
const deltaY = newDraggingPointPosition[1] - draggingPoint[1];
const elements = app.scene.getNonDeletedElements();
arrowOtherPoint = pointDraggingOtherEndpoint(
element,
elementsMap,
selectedPointsIndices,
scenePointerX,
scenePointerY,
linearElementEditor,
app.scene,
thresholdCallback,
);
LinearElementEditor.movePoints(
element,
app.scene,
pointDraggingUpdates(
selectedPointsIndices,
deltaX,
deltaY,
elementsMap,
lastClickedPoint,
element,
scenePointerX,
scenePointerY,
linearElementEditor,
event[KEYS.CTRL_OR_CMD] ? null : app.getEffectiveGridSize(),
elements,
app.state.zoom,
app.state.bindMode,
new Map(
selectedPointsIndices.map((pointIndex) => {
const newPointPosition: LocalPoint =
pointIndex === lastClickedPoint
? LinearElementEditor.createPointAt(
element,
elementsMap,
scenePointerX - linearElementEditor.pointerOffset.x,
scenePointerY - linearElementEditor.pointerOffset.y,
event[KEYS.CTRL_OR_CMD]
? null
: app.getEffectiveGridSize(),
)
: pointFrom(
element.points[pointIndex][0] + deltaX,
element.points[pointIndex][1] + deltaY,
);
return [
pointIndex,
{
point: newPointPosition,
isDragging: pointIndex === lastClickedPoint,
},
];
}),
),
);
}
@ -424,14 +410,16 @@ export class LinearElementEditor {
// suggest bindings for first and last point if selected
let suggestedBindings: ExcalidrawBindableElement[] = [];
if (isBindingElement(element, false)) {
const firstIndexIsSelected = selectedPointsIndices[0] === 0;
const lastIndexIsSelected =
const firstSelectedIndex = selectedPointsIndices[0] === 0;
const lastSelectedIndex =
selectedPointsIndices[selectedPointsIndices.length - 1] ===
element.points.length - 1;
const coords: { x: number; y: number }[] = [];
if (firstIndexIsSelected !== lastIndexIsSelected) {
if (firstIndexIsSelected) {
if (!firstSelectedIndex !== !lastSelectedIndex) {
coords.push({ x: scenePointerX, y: scenePointerY });
} else {
if (firstSelectedIndex) {
coords.push(
tupleToCoors(
LinearElementEditor.getPointGlobalCoordinates(
@ -443,7 +431,7 @@ export class LinearElementEditor {
);
}
if (lastIndexIsSelected) {
if (lastSelectedIndex) {
coords.push(
tupleToCoors(
LinearElementEditor.getPointGlobalCoordinates(
@ -464,7 +452,6 @@ export class LinearElementEditor {
coords,
app.scene,
app.state.zoom,
elementsMap,
);
}
}
@ -488,10 +475,6 @@ export class LinearElementEditor {
: -1,
isDragging: true,
customLineAngle,
pointerDownState: {
...linearElementEditor.pointerDownState,
arrowOtherPoint,
},
};
return {
@ -622,10 +605,6 @@ export class LinearElementEditor {
isDragging: false,
pointerOffset: { x: 0, y: 0 },
customLineAngle: null,
pointerDownState: {
...editingLinearElement.pointerDownState,
arrowOtherPoint: undefined,
},
};
}
@ -964,15 +943,8 @@ export class LinearElementEditor {
// from the end points of the `linearElement` - this is to allow disabling
// binding (which needs to happen at the point the user finishes moving
// the point).
const allPointSelected =
linearElementEditor.pointerDownState.prevSelectedPointsIndices
?.length === element.points.length;
const { startBindingElement, endBindingElement } = linearElementEditor;
if (
!allPointSelected &&
isBindingEnabled(appState) &&
isBindingElement(element)
) {
if (isBindingEnabled(appState) && isBindingElement(element)) {
bindOrUnbindLinearElement(
element,
startBindingElement,
@ -1432,7 +1404,6 @@ export class LinearElementEditor {
otherUpdates?: {
startBinding?: PointBinding | null;
endBinding?: PointBinding | null;
moveMidPointsWithElement?: boolean | null;
},
) {
const { points } = element;
@ -1478,15 +1449,6 @@ export class LinearElementEditor {
: points.map((p, idx) => {
const current = pointUpdates.get(idx)?.point ?? p;
if (
otherUpdates?.moveMidPointsWithElement &&
idx !== 0 &&
idx !== points.length - 1 &&
!pointUpdates.has(idx)
) {
return pointFrom<LocalPoint>(current[0], current[1]);
}
return pointFrom<LocalPoint>(
current[0] - offsetX,
current[1] - offsetY,
@ -2015,242 +1977,3 @@ const normalizeSelectedPoints = (
nextPoints = nextPoints.sort((a, b) => a - b);
return nextPoints.length ? nextPoints : null;
};
const pointDraggingUpdates = (
selectedPointsIndices: readonly number[],
deltaX: number,
deltaY: number,
elementsMap: NonDeletedSceneElementsMap,
lastClickedPoint: number,
element: NonDeleted<ExcalidrawLinearElement>,
scenePointerX: number,
scenePointerY: number,
linearElementEditor: LinearElementEditor,
gridSize: NullableGridSize,
elements: readonly Ordered<NonDeletedExcalidrawElement>[],
zoom: AppState["zoom"],
bindMode: AppState["bindMode"],
): PointsPositionUpdates => {
const hasMidPoints =
selectedPointsIndices.filter(
(_, idx) => idx > 0 && idx < element.points.length - 1,
).length > 0;
return new Map(
selectedPointsIndices.map((pointIndex) => {
let newPointPosition: LocalPoint =
pointIndex === lastClickedPoint
? LinearElementEditor.createPointAt(
element,
elementsMap,
scenePointerX - linearElementEditor.pointerOffset.x,
scenePointerY - linearElementEditor.pointerOffset.y,
gridSize,
)
: pointFrom(
element.points[pointIndex][0] + deltaX,
element.points[pointIndex][1] + deltaY,
);
if (
!hasMidPoints &&
(pointIndex === 0 || pointIndex === element.points.length - 1)
) {
const [, , , , cx, cy] = getElementAbsoluteCoords(
element,
elementsMap,
true,
);
let newGlobalPointPosition = pointRotateRads(
pointFrom<GlobalPoint>(
element.x + newPointPosition[0],
element.y + newPointPosition[1],
),
pointFrom<GlobalPoint>(cx, cy),
element.angle,
);
const hoveredElement = getHoveredElementForBinding(
{
x: newGlobalPointPosition[0],
y: newGlobalPointPosition[1],
},
elements,
elementsMap,
zoom,
shouldTestInside(element),
isElbowArrow(element),
);
const otherGlobalPoint =
LinearElementEditor.getPointAtIndexGlobalCoordinates(
element,
pointIndex === 0 ? element.points.length - 1 : 0,
elementsMap,
);
const otherHoveredElement = getHoveredElementForBinding(
{
x: otherGlobalPoint[0],
y: otherGlobalPoint[1],
},
elements,
elementsMap,
zoom,
shouldTestInside(element),
isElbowArrow(element),
);
// Allow binding inside the element if both ends are inside
if (
isArrowElement(element) &&
!(
hoveredElement?.id === otherHoveredElement?.id &&
hoveredElement != null
) &&
bindMode === "focus"
) {
newGlobalPointPosition = getOutlineAvoidingPoint(
element,
hoveredElement,
newGlobalPointPosition,
pointIndex,
elementsMap,
);
}
newPointPosition = LinearElementEditor.createPointAt(
element,
elementsMap,
newGlobalPointPosition[0] - linearElementEditor.pointerOffset.x,
newGlobalPointPosition[1] - linearElementEditor.pointerOffset.y,
null,
);
}
return [
pointIndex,
{
point: newPointPosition,
isDragging: pointIndex === lastClickedPoint,
},
];
}),
);
};
const pointDraggingOtherEndpoint = (
element: NonDeleted<ExcalidrawLinearElement>,
elementsMap: NonDeletedSceneElementsMap,
selectedPointsIndices: readonly number[],
scenePointerX: number,
scenePointerY: number,
linearElementEditor: LinearElementEditor,
scene: Scene,
thresholdCallback: (element: ExcalidrawElement) => number,
) => {
let arrowOtherPoint = linearElementEditor.pointerDownState.arrowOtherPoint;
if (isArrowElement(element) && !isElbowArrow(element)) {
const startPointIsIncluded = selectedPointsIndices.includes(0);
const endPointIsIncluded = selectedPointsIndices.includes(
element.points.length - 1,
);
if (
// Make sure that not both of the endpoints are selected
(startPointIsIncluded || endPointIsIncluded) &&
startPointIsIncluded !== endPointIsIncluded
) {
const otherBinding =
element[startPointIsIncluded ? "endBinding" : "startBinding"];
if (
// The other end is bound
otherBinding
) {
const otherElement = elementsMap.get(otherBinding.elementId);
invariant(
isBindableElement(otherElement),
"Other element should exist in elementsMap at all times and be a bindable element",
);
let newOtherPointPosition;
// Only avoid shape if the start and end point is not inside
// the same element
if (
!hitElementItself({
point: pointFrom(scenePointerX, scenePointerY),
element: otherElement,
elementsMap,
threshold: thresholdCallback(otherElement),
})
) {
// If we don't have a restore point, that means we need to jump out
// of the element but first, create the restore point
if (!arrowOtherPoint) {
arrowOtherPoint = LinearElementEditor.getPointGlobalCoordinates(
element,
element.points[
startPointIsIncluded ? element.points.length - 1 : 0
],
elementsMap,
);
}
// Find a snap point outside the element
const newOtherGlobalPoint = getOutlineAvoidingPoint(
element,
otherElement,
arrowOtherPoint,
startPointIsIncluded ? element.points.length - 1 : 0,
elementsMap,
);
newOtherPointPosition = LinearElementEditor.createPointAt(
element,
elementsMap,
newOtherGlobalPoint[0] - linearElementEditor.pointerOffset.x,
newOtherGlobalPoint[1] - linearElementEditor.pointerOffset.y,
null,
);
}
// Restore the saved point if we are back inside the element
else if (arrowOtherPoint) {
newOtherPointPosition = LinearElementEditor.createPointAt(
element,
elementsMap,
arrowOtherPoint[0] - linearElementEditor.pointerOffset.x,
arrowOtherPoint[1] - linearElementEditor.pointerOffset.y,
null,
);
arrowOtherPoint = undefined;
}
// Finally, move the other endpoint if needed
if (newOtherPointPosition) {
LinearElementEditor.movePoints(
element,
scene,
new Map([
[
startPointIsIncluded ? element.points.length - 1 : 0,
{
point: newOtherPointPosition,
},
],
]),
);
bindLinearElement(
element,
otherElement,
startPointIsIncluded ? "end" : "start",
scene,
);
}
}
}
}
return arrowOtherPoint;
};

View File

@ -12,7 +12,7 @@ import { ShapeCache } from "./shape";
import { updateElbowArrowPoints } from "./elbowArrow";
import { isElbowArrow, isFixedPointBinding } from "./typeChecks";
import { isElbowArrow } from "./typeChecks";
import type {
ElementsMap,
@ -54,8 +54,8 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
(Object.keys(updates).length === 0 || // normalization case
typeof points !== "undefined" || // repositioning
typeof fixedSegments !== "undefined" || // segment fixing
isFixedPointBinding(startBinding) ||
isFixedPointBinding(endBinding)) // manual binding to element
typeof startBinding !== "undefined" ||
typeof endBinding !== "undefined") // manual binding to element
) {
updates = {
...updates,

View File

@ -362,7 +362,6 @@ export const isFixedPointBinding = (
binding: PointBinding | FixedPointBinding,
): binding is FixedPointBinding => {
return (
binding != null &&
Object.hasOwn(binding, "fixedPoint") &&
(binding as FixedPointBinding).fixedPoint != null
);

View File

@ -323,8 +323,8 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase &
type: "line" | "arrow";
points: readonly LocalPoint[];
lastCommittedPoint: LocalPoint | null;
startBinding: FixedPointBinding | PointBinding | null;
endBinding: FixedPointBinding | PointBinding | null;
startBinding: PointBinding | null;
endBinding: PointBinding | null;
startArrowhead: Arrowhead | null;
endArrowhead: Arrowhead | null;
}>;
@ -351,9 +351,9 @@ export type ExcalidrawElbowArrowElement = Merge<
ExcalidrawArrowElement,
{
elbowed: true;
fixedSegments: readonly FixedSegment[] | null;
startBinding: FixedPointBinding | null;
endBinding: FixedPointBinding | null;
fixedSegments: readonly FixedSegment[] | null;
/**
* Marks that the 3rd point should be used as the 2nd point of the arrow in
* order to temporarily hide the first segment of the arrow without losing

View File

@ -8,13 +8,7 @@ import { Excalidraw, isLinearElement } from "@excalidraw/excalidraw";
import { API } from "@excalidraw/excalidraw/tests/helpers/api";
import { UI, Pointer, Keyboard } from "@excalidraw/excalidraw/tests/helpers/ui";
import {
act,
fireEvent,
render,
} from "@excalidraw/excalidraw/tests/test-utils";
import { defaultLang, setLanguage } from "@excalidraw/excalidraw/i18n";
import { fireEvent, render } from "@excalidraw/excalidraw/tests/test-utils";
import { getTransformHandles } from "../src/transformHandles";
import {
@ -22,8 +16,6 @@ import {
TEXT_EDITOR_SELECTOR,
} from "../../excalidraw/tests/queries/dom";
import type { ExcalidrawLinearElement, FixedPointBinding } from "../src/types";
const { h } = window;
const mouse = new Pointer("mouse");
@ -79,9 +71,8 @@ describe("element binding", () => {
expect(arrow.startBinding).toEqual({
elementId: rect.id,
focus: 0,
gap: 0,
fixedPoint: expect.arrayContaining([1.1, 0]),
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
});
// Move the end point to the overlapping binding position
@ -92,15 +83,13 @@ describe("element binding", () => {
// Both the start and the end points should be bound
expect(arrow.startBinding).toEqual({
elementId: rect.id,
focus: 0,
gap: 0,
fixedPoint: expect.arrayContaining([1.1, 0]),
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
});
expect(arrow.endBinding).toEqual({
elementId: rect.id,
focus: 0,
gap: 0,
fixedPoint: expect.arrayContaining([1.1, 0]),
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
});
});
@ -199,9 +188,9 @@ describe("element binding", () => {
// Test sticky connection
expect(API.getSelectedElement().type).toBe("arrow");
Keyboard.keyPress(KEYS.ARROW_RIGHT);
expect(arrow.endBinding?.elementId).not.toBe(rectangle.id);
expect(arrow.endBinding?.elementId).toBe(rectangle.id);
Keyboard.keyPress(KEYS.ARROW_LEFT);
expect(arrow.endBinding?.elementId).not.toBe(rectangle.id);
expect(arrow.endBinding?.elementId).toBe(rectangle.id);
// Sever connection
expect(API.getSelectedElement().type).toBe("arrow");
@ -487,354 +476,3 @@ describe("element binding", () => {
});
});
});
describe("Fixed-point arrow binding", () => {
beforeEach(async () => {
await render(<Excalidraw handleKeyboardGlobally={true} />);
});
it("should create fixed-point binding when both arrow endpoint is inside rectangle", () => {
// Create a filled solid rectangle
UI.clickTool("rectangle");
mouse.downAt(100, 100);
mouse.moveTo(200, 200);
mouse.up();
const rect = API.getSelectedElement();
API.updateElement(rect, { fillStyle: "solid", backgroundColor: "#a5d8ff" });
// Draw arrow with endpoint inside the filled rectangle, since only
// filled bindables bind inside the shape
UI.clickTool("arrow");
mouse.downAt(110, 110);
mouse.moveTo(160, 160);
mouse.up();
const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
expect(arrow.x).toBe(110);
expect(arrow.y).toBe(110);
// Should bind to the rectangle since endpoint is inside
expect(arrow.startBinding?.elementId).toBe(rect.id);
expect(arrow.endBinding?.elementId).toBe(rect.id);
const startBinding = arrow.startBinding as FixedPointBinding;
expect(startBinding.fixedPoint[0]).toBeGreaterThanOrEqual(0);
expect(startBinding.fixedPoint[0]).toBeLessThanOrEqual(1);
expect(startBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0);
expect(startBinding.fixedPoint[1]).toBeLessThanOrEqual(1);
const endBinding = arrow.endBinding as FixedPointBinding;
expect(endBinding.fixedPoint[0]).toBeGreaterThanOrEqual(0);
expect(endBinding.fixedPoint[0]).toBeLessThanOrEqual(1);
expect(endBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0);
expect(endBinding.fixedPoint[1]).toBeLessThanOrEqual(1);
mouse.reset();
// Move the bindable
mouse.downAt(130, 110);
mouse.moveTo(280, 110);
mouse.up();
// Check if the arrow moved
expect(arrow.x).toBe(260);
expect(arrow.y).toBe(110);
});
it("should create fixed-point binding when one of the arrow endpoint is inside rectangle", () => {
// Create a filled solid rectangle
UI.clickTool("rectangle");
mouse.downAt(100, 100);
mouse.moveTo(200, 200);
mouse.up();
const rect = API.getSelectedElement();
API.updateElement(rect, { fillStyle: "solid", backgroundColor: "#a5d8ff" });
// Draw arrow with endpoint inside the filled rectangle, since only
// filled bindables bind inside the shape
UI.clickTool("arrow");
mouse.downAt(10, 10);
mouse.moveTo(160, 160);
mouse.up();
const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
expect(arrow.x).toBe(10);
expect(arrow.y).toBe(10);
expect(arrow.width).toBe(150);
expect(arrow.height).toBe(150);
// Should bind to the rectangle since endpoint is inside
expect(arrow.startBinding).toBe(null);
expect(arrow.endBinding?.elementId).toBe(rect.id);
const endBinding = arrow.endBinding as FixedPointBinding;
expect(endBinding.fixedPoint[0]).toBeGreaterThanOrEqual(0);
expect(endBinding.fixedPoint[0]).toBeLessThanOrEqual(1);
expect(endBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0);
expect(endBinding.fixedPoint[1]).toBeLessThanOrEqual(1);
mouse.reset();
// Move the bindable
mouse.downAt(130, 110);
mouse.moveTo(280, 110);
mouse.up();
// Check if the arrow moved
expect(arrow.x).toBe(10);
expect(arrow.y).toBe(10);
expect(arrow.width).toBe(300);
expect(arrow.height).toBe(150);
});
it("should maintain relative position when arrow start point is dragged outside and rectangle is moved", () => {
// Create a filled solid rectangle
UI.clickTool("rectangle");
mouse.downAt(100, 100);
mouse.moveTo(200, 200);
mouse.up();
const rect = API.getSelectedElement();
API.updateElement(rect, { fillStyle: "solid", backgroundColor: "#a5d8ff" });
// Draw arrow with both endpoints inside the filled rectangle, creating same-element binding
UI.clickTool("arrow");
mouse.downAt(120, 120);
mouse.moveTo(180, 180);
mouse.up();
const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
// Both ends should be bound to the same rectangle
expect(arrow.startBinding?.elementId).toBe(rect.id);
expect(arrow.endBinding?.elementId).toBe(rect.id);
mouse.reset();
// Select the arrow and drag the start point outside the rectangle
mouse.downAt(120, 120);
mouse.moveTo(50, 50); // Move start point outside rectangle
mouse.up();
mouse.reset();
// Move the rectangle by dragging it
mouse.downAt(150, 110);
mouse.moveTo(300, 300);
mouse.up();
// The end point should be a normal point binding
const endBinding = arrow.endBinding as FixedPointBinding;
expect(endBinding.focus).toBeCloseTo(0);
expect(endBinding.gap).toBeCloseTo(0);
expect(arrow.x).toBe(50);
expect(arrow.y).toBe(50);
expect(arrow.width).toBeCloseTo(304, 0);
expect(arrow.height).toBeCloseTo(344, 0);
});
it("should move inner points when arrow is bound to same element on both ends", () => {
// Create one rectangle as binding target
const rect = API.createElement({
type: "rectangle",
x: 50,
y: 50,
width: 200,
height: 100,
fillStyle: "solid",
backgroundColor: "#a5d8ff",
});
// Create a non-elbowed arrow with inner points bound to the same element on both ends
const arrow = API.createElement({
type: "arrow",
x: 100,
y: 75,
width: 100,
height: 50,
points: [
pointFrom(0, 0), // start point
pointFrom(25, -25), // first inner point
pointFrom(75, 25), // second inner point
pointFrom(100, 0), // end point
],
startBinding: {
elementId: rect.id,
focus: 0,
gap: 0,
fixedPoint: [0.25, 0.5],
},
endBinding: {
elementId: rect.id,
focus: 0,
gap: 0,
fixedPoint: [0.75, 0.5],
},
});
API.setElements([rect, arrow]);
// Store original inner point positions (local coordinates)
const originalInnerPoint1 = [...arrow.points[1]];
const originalInnerPoint2 = [...arrow.points[2]];
// Move the rectangle
mouse.reset();
mouse.downAt(150, 100); // Click on the rectangle
mouse.moveTo(300, 200); // Move it down and to the right
mouse.up();
// Verify that inner points moved with the arrow (same local coordinates)
// When both ends are bound to the same element, inner points should maintain
// their local coordinates relative to the arrow's origin
expect(arrow.points[1][0]).toBe(originalInnerPoint1[0]);
expect(arrow.points[1][1]).toBe(originalInnerPoint1[1]);
expect(arrow.points[2][0]).toBe(originalInnerPoint2[0]);
expect(arrow.points[2][1]).toBe(originalInnerPoint2[1]);
});
it("should NOT move inner points when arrow is bound to different elements", () => {
// Create two rectangles as binding targets
const rectLeft = API.createElement({
type: "rectangle",
x: 0,
y: 0,
width: 100,
height: 100,
});
const rectRight = API.createElement({
type: "rectangle",
x: 300,
y: 0,
width: 100,
height: 100,
});
// Create a non-elbowed arrow with inner points bound to different elements
const arrow = API.createElement({
type: "arrow",
x: 100,
y: 50,
width: 200,
height: 0,
points: [
pointFrom(0, 0), // start point
pointFrom(50, -20), // first inner point
pointFrom(150, 20), // second inner point
pointFrom(200, 0), // end point
],
startBinding: {
elementId: rectLeft.id,
focus: 0.5,
gap: 5,
},
endBinding: {
elementId: rectRight.id,
focus: 0.5,
gap: 5,
},
});
API.setElements([rectLeft, rectRight, arrow]);
// Store original inner point positions
const originalInnerPoint1 = [...arrow.points[1]];
const originalInnerPoint2 = [...arrow.points[2]];
// Move the right rectangle down by 50 pixels
mouse.reset();
mouse.downAt(350, 50); // Click on the right rectangle
mouse.moveTo(350, 100); // Move it down
mouse.up();
// Verify that inner points did NOT move when bound to different elements
// The arrow should NOT translate inner points proportionally when only one end moves
expect(arrow.points[1][0]).toBe(originalInnerPoint1[0]);
expect(arrow.points[1][1]).toBe(originalInnerPoint1[1]);
expect(arrow.points[2][0]).toBe(originalInnerPoint2[0]);
expect(arrow.points[2][1]).toBe(originalInnerPoint2[1]);
});
});
describe("line segment extension binding", () => {
beforeEach(async () => {
mouse.reset();
await act(() => {
return setLanguage(defaultLang);
});
await render(<Excalidraw handleKeyboardGlobally={true} />);
});
it("should use point binding when extended segment intersects element", () => {
// Create a rectangle that will be intersected by the extended arrow segment
const rect = API.createElement({
type: "rectangle",
x: 100,
y: 100,
width: 100,
height: 100,
});
API.setElements([rect]);
// Draw an arrow that points at the rectangle (extended segment will intersect)
UI.clickTool("arrow");
mouse.downAt(0, 0); // Start point
mouse.moveTo(120, 95); // End point - arrow direction points toward rectangle
mouse.up();
const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
// Should create a normal point binding since the extended line segment
// from the last arrow segment intersects the rectangle
expect(arrow.endBinding?.elementId).toBe(rect.id);
expect(arrow.endBinding).toHaveProperty("focus");
expect(arrow.endBinding).toHaveProperty("gap");
expect(arrow.endBinding).not.toHaveProperty("fixedPoint");
});
it("should use fixed point binding when extended segment misses element", () => {
// Create a rectangle positioned so the extended arrow segment will miss it
const rect = API.createElement({
type: "rectangle",
x: 100,
y: 100,
width: 100,
height: 100,
});
API.setElements([rect]);
// Draw an arrow that doesn't point at the rectangle (extended segment will miss)
UI.clickTool("arrow");
mouse.reset();
mouse.downAt(125, 93); // Start point
mouse.moveTo(175, 93); // End point - arrow direction is horizontal, misses rectangle
mouse.up();
const arrow = API.getSelectedElement() as ExcalidrawLinearElement;
// Should create a fixed point binding since the extended line segment
// from the last arrow segment misses the rectangle
expect(arrow.startBinding?.elementId).toBe(rect.id);
expect(arrow.startBinding).toHaveProperty("fixedPoint");
expect(
(arrow.startBinding as FixedPointBinding).fixedPoint[0],
).toBeGreaterThanOrEqual(0);
expect(
(arrow.startBinding as FixedPointBinding).fixedPoint[0],
).toBeLessThanOrEqual(1);
expect(
(arrow.startBinding as FixedPointBinding).fixedPoint[1],
).toBeLessThanOrEqual(0);
expect(
(arrow.startBinding as FixedPointBinding).fixedPoint[1],
).toBeLessThanOrEqual(1);
expect(arrow.endBinding).toBe(null);
});
});

View File

@ -27,7 +27,6 @@ import type {
ExcalidrawElbowArrowElement,
ExcalidrawFreeDrawElement,
ExcalidrawLinearElement,
PointBinding,
} from "../src/types";
unmountComponent();
@ -1024,20 +1023,8 @@ describe("multiple selection", () => {
1 - move[0] / selectionWidth,
1 - move[1] / selectionHeight,
);
const leftArrowBinding: {
elementId: string;
gap?: number;
focus?: number;
} = {
...leftBoundArrow.endBinding,
} as PointBinding;
const rightArrowBinding: {
elementId: string;
gap?: number;
focus?: number;
} = {
...rightBoundArrow.endBinding,
} as PointBinding;
const leftArrowBinding = { ...leftBoundArrow.endBinding };
const rightArrowBinding = { ...rightBoundArrow.endBinding };
delete rightArrowBinding.gap;
UI.resize([rectangle, rightBoundArrow], "nw", move, {

View File

@ -4,14 +4,8 @@ import {
maybeBindLinearElement,
bindOrUnbindLinearElement,
isBindingEnabled,
getHoveredElementForBinding,
} from "@excalidraw/element/binding";
import {
isElbowArrow,
isValidPolygon,
LinearElementEditor,
shouldTestInside,
} from "@excalidraw/element";
import { isValidPolygon, LinearElementEditor } from "@excalidraw/element";
import {
isBindingElement,
@ -32,7 +26,7 @@ import { isInvisiblySmallElement } from "@excalidraw/element";
import { CaptureUpdateAction } from "@excalidraw/element";
import type { GlobalPoint, LocalPoint } from "@excalidraw/math";
import type { LocalPoint } from "@excalidraw/math";
import type {
ExcalidrawElement,
ExcalidrawLinearElement,
@ -100,22 +94,13 @@ export const actionFinalize = register({
}
}
if (appState.editingLinearElement && !appState.newElement) {
if (appState.editingLinearElement) {
const { elementId, startBindingElement, endBindingElement } =
appState.editingLinearElement;
const element = LinearElementEditor.getElement(elementId, elementsMap);
if (element) {
// NOTE: Dragging the entire arrow doesn't allow binding.
const allPointsSelected =
appState.editingLinearElement?.pointerDownState
.prevSelectedPointsIndices?.length === element.points.length;
if (
!allPointsSelected &&
isBindingEnabled(appState) &&
isBindingElement(element)
) {
if (isBindingElement(element)) {
bindOrUnbindLinearElement(
element,
startBindingElement,
@ -123,7 +108,6 @@ export const actionFinalize = register({
scene,
);
}
if (isLineElement(element) && !isValidPolygon(element.points)) {
scene.mutateElement(element, {
polygon: false,
@ -175,26 +159,10 @@ export const actionFinalize = register({
element.type !== "freedraw" &&
appState.lastPointerDownWith !== "touch"
) {
const { x: rx, y: ry, points, lastCommittedPoint } = element;
const lastGlobalPoint = pointFrom<GlobalPoint>(
rx + points[points.length - 1][0],
ry + points[points.length - 1][1],
);
const hoveredElementForBinding = getHoveredElementForBinding(
{
x: lastGlobalPoint[0],
y: lastGlobalPoint[1],
},
elements,
elementsMap,
app.state.zoom,
shouldTestInside(element),
isElbowArrow(element),
);
const { points, lastCommittedPoint } = element;
if (
!hoveredElementForBinding &&
(!lastCommittedPoint ||
points[points.length - 1] !== lastCommittedPoint)
!lastCommittedPoint ||
points[points.length - 1] !== lastCommittedPoint
) {
scene.mutateElement(element, {
points: element.points.slice(0, -1),
@ -314,17 +282,6 @@ export const actionFinalize = register({
element && isLinearElement(element)
? new LinearElementEditor(element, arrayToMap(newElements))
: appState.selectedLinearElement,
editingLinearElement: appState.newElement
? null
: appState.editingLinearElement
? {
...appState.editingLinearElement,
pointerDownState: {
...appState.editingLinearElement.pointerDownState,
arrowOtherPoint: undefined,
},
}
: null,
},
// TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit
captureUpdate: CaptureUpdateAction.IMMEDIATELY,

View File

@ -124,7 +124,6 @@ export const getDefaultAppState = (): Omit<
searchMatches: null,
lockedMultiSelections: {},
activeLockedId: null,
bindMode: "focus",
};
};
@ -250,7 +249,6 @@ const APP_STATE_STORAGE_CONF = (<
searchMatches: { browser: false, export: false, server: false },
lockedMultiSelections: { browser: true, export: true, server: true },
activeLockedId: { browser: false, export: false, server: false },
bindMode: { browser: true, export: false, server: false },
});
const _clearAppStateForStorage = <

View File

@ -100,7 +100,6 @@ import {
randomInteger,
CLASSES,
Emitter,
BIND_MODE_TIMEOUT,
} from "@excalidraw/common";
import {
@ -233,11 +232,9 @@ import {
hitElementBoundingBox,
isLineElement,
isSimpleArrow,
getOutlineAvoidingPoint,
bindOrUnbindLinearElement,
} from "@excalidraw/element";
import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";
import type { LocalPoint, Radians } from "@excalidraw/math";
import type {
ExcalidrawElement,
@ -571,6 +568,7 @@ class App extends React.Component<AppProps, AppState> {
public renderer: Renderer;
public visibleElements: readonly NonDeletedExcalidrawElement[];
private resizeObserver: ResizeObserver | undefined;
private nearestScrollableContainer: HTMLElement | Document | undefined;
public library: AppClassProperties["library"];
public libraryItemsFromStorage: LibraryItems | undefined;
public id: string;
@ -600,8 +598,6 @@ class App extends React.Component<AppProps, AppState> {
public flowChartCreator: FlowChartCreator = new FlowChartCreator();
private flowChartNavigator: FlowChartNavigator = new FlowChartNavigator();
private bindModeHandler: ReturnType<typeof setTimeout> | null = null;
hitLinkElement?: NonDeletedExcalidrawElement;
lastPointerDownEvent: React.PointerEvent<HTMLElement> | null = null;
lastPointerUpEvent: React.PointerEvent<HTMLElement> | PointerEvent | null =
@ -4391,14 +4387,6 @@ class App extends React.Component<AppProps, AppState> {
{ informMutation: false, isDragging: false },
);
if (isSimpleArrow(element)) {
// NOTE: Moving the bound arrow should unbind it, otherwise we would
// have weird situations, like 0 lenght arrow when the user moves
// the arrow outside a filled shape suddenly forcing the arrow start
// and end point to jump "outside" the shape.
bindOrUnbindLinearElement(element, null, null, this.scene);
}
updateBoundElements(element, this.scene, {
simultaneouslyUpdated: selectedElements,
});
@ -5876,13 +5864,10 @@ class App extends React.Component<AppProps, AppState> {
});
});
}
if (
editingLinearElement?.lastUncommittedPoint != null ||
this.state.newElement
) {
if (editingLinearElement?.lastUncommittedPoint != null) {
this.maybeSuggestBindingAtCursor(
scenePointer,
editingLinearElement?.elbowed || false,
editingLinearElement.elbowed,
);
} else {
// causes stack overflow if not sync
@ -5903,7 +5888,7 @@ class App extends React.Component<AppProps, AppState> {
[scenePointer],
this.scene,
this.state.zoom,
this.scene.getNonDeletedElementsMap(),
this.state.startBoundElement,
),
});
} else {
@ -5913,7 +5898,9 @@ class App extends React.Component<AppProps, AppState> {
if (this.state.multiElement) {
const { multiElement } = this.state;
const { x: rx, y: ry, points, lastCommittedPoint } = multiElement;
const { x: rx, y: ry } = multiElement;
const { points, lastCommittedPoint } = multiElement;
const lastPoint = points[points.length - 1];
setCursorForShape(this.interactiveCanvas, this.state);
@ -5959,42 +5946,19 @@ class App extends React.Component<AppProps, AppState> {
{ informMutation: false, isDragging: false },
);
} else {
const hoveredElement = getHoveredElementForBinding(
{
x: scenePointerX,
y: scenePointerY,
},
this.scene.getNonDeletedElements(),
this.scene.getNonDeletedElementsMap(),
this.state.zoom,
false,
false,
);
const [gridX, gridY] = getGridPoint(
scenePointerX,
scenePointerY,
event[KEYS.CTRL_OR_CMD] || hoveredElement
event[KEYS.CTRL_OR_CMD] || isElbowArrow(multiElement)
? null
: this.getEffectiveGridSize(),
);
const avoidancePoint =
hoveredElement &&
getOutlineAvoidingPoint(
multiElement,
hoveredElement,
pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
multiElement.points.length - 1,
this.scene.getNonDeletedElementsMap(),
);
const [lastCommittedX, lastCommittedY] =
multiElement?.lastCommittedPoint ?? [0, 0];
let dxFromLastCommitted =
(avoidancePoint ? avoidancePoint[0] : gridX) - rx - lastCommittedX;
let dyFromLastCommitted =
(avoidancePoint ? avoidancePoint[1] : gridY) - ry - lastCommittedY;
let dxFromLastCommitted = gridX - rx - lastCommittedX;
let dyFromLastCommitted = gridY - ry - lastCommittedY;
if (shouldRotateWithDiscreteAngle(event)) {
({ width: dxFromLastCommitted, height: dyFromLastCommitted } =
@ -7740,34 +7704,18 @@ class App extends React.Component<AppProps, AppState> {
}
const { x: rx, y: ry, lastCommittedPoint } = multiElement;
const lastGlobalPoint = pointFrom<GlobalPoint>(
rx + multiElement.points[multiElement.points.length - 1][0],
ry + multiElement.points[multiElement.points.length - 1][1],
);
const hoveredElementForBinding = getHoveredElementForBinding(
{
x: lastGlobalPoint[0],
y: lastGlobalPoint[1],
},
this.scene.getNonDeletedElements(),
this.scene.getNonDeletedElementsMap(),
this.state.zoom,
true,
isElbowArrow(multiElement),
);
// clicking inside commit zone → finalize arrow
if (
hoveredElementForBinding ||
(multiElement.points.length > 1 &&
lastCommittedPoint &&
pointDistance(
pointFrom(
pointerDownState.origin.x - rx,
pointerDownState.origin.y - ry,
),
lastCommittedPoint,
) < LINE_CONFIRM_THRESHOLD)
multiElement.points.length > 1 &&
lastCommittedPoint &&
pointDistance(
pointFrom(
pointerDownState.origin.x - rx,
pointerDownState.origin.y - ry,
),
lastCommittedPoint,
) < LINE_CONFIRM_THRESHOLD
) {
this.actionManager.executeAction(actionFinalize);
return;
@ -7810,6 +7758,7 @@ class App extends React.Component<AppProps, AppState> {
elementType === "arrow"
? [currentItemStartArrowhead, currentItemEndArrowhead]
: [null, null];
const element =
elementType === "arrow"
? newArrowElement({
@ -7857,7 +7806,21 @@ class App extends React.Component<AppProps, AppState> {
locked: false,
frameId: topLayerFrame ? topLayerFrame.id : null,
});
this.setState((prevState) => {
const nextSelectedElementIds = {
...prevState.selectedElementIds,
};
delete nextSelectedElementIds[element.id];
return {
selectedElementIds: makeNextSelectedElementIds(
nextSelectedElementIds,
prevState,
),
};
});
this.scene.mutateElement(element, {
points: [...element.points, pointFrom<LocalPoint>(0, 0)],
});
const boundElement = getHoveredElementForBinding(
pointerDownState.origin,
this.scene.getNonDeletedElements(),
@ -7867,72 +7830,11 @@ class App extends React.Component<AppProps, AppState> {
isElbowArrow(element),
);
if (isSimpleArrow(element)) {
this.setState((prevState) => {
const linearElement = new LinearElementEditor(
element,
this.scene.getNonDeletedElementsMap(),
);
const linearElementEditor = {
...linearElement,
startBindingElement: boundElement,
pointerDownState: {
...linearElement.pointerDownState,
arrowOtherPoint: pointFrom<GlobalPoint>(
pointerDownState.origin.x,
pointerDownState.origin.y,
),
},
};
const nextSelectedElementIds = makeNextSelectedElementIds(
{ [element.id]: true },
prevState,
);
return {
selectedElementIds: nextSelectedElementIds,
editingLinearElement: linearElementEditor,
};
});
}
this.scene.mutateElement(element, {
points: [...element.points, pointFrom<LocalPoint>(0, 0)],
});
this.scene.insertElement(element);
this.setState((prevState) => {
let linearElementEditor = null;
let nextSelectedElementIds = prevState.selectedElementIds;
if (isSimpleArrow(element)) {
const linearElement = new LinearElementEditor(
element,
this.scene.getNonDeletedElementsMap(),
);
linearElementEditor = {
...linearElement,
startBindingElement: boundElement,
pointerDownState: {
...linearElement.pointerDownState,
arrowOtherPoint: pointFrom<GlobalPoint>(
pointerDownState.origin.x,
pointerDownState.origin.y,
),
},
};
nextSelectedElementIds = makeNextSelectedElementIds(
{ [element.id]: true },
prevState,
);
}
return {
...prevState,
newElement: element,
startBoundElement: boundElement,
suggestedBindings: [],
selectedElementIds: nextSelectedElementIds,
editingLinearElement: linearElementEditor,
};
this.setState({
newElement: element,
startBoundElement: boundElement,
suggestedBindings: [],
});
}
};
@ -8318,39 +8220,12 @@ class App extends React.Component<AppProps, AppState> {
return;
}
// Timed bind mode handler for arrow elements
if (this.state.bindMode === "focus") {
const pointerMovementDistance = Math.hypot(
(this.lastPointerMoveCoords?.x ?? Infinity) - pointerCoords.x,
);
if (this.bindModeHandler && pointerMovementDistance < 1) {
clearTimeout(this.bindModeHandler);
}
this.bindModeHandler = setTimeout(() => {
const hoveredElement = getHoveredElementForBinding(
pointerCoords,
this.scene.getNonDeletedElements(),
elementsMap,
this.state.zoom,
);
if (hoveredElement) {
this.setState({
bindMode: "fixed",
});
} else {
this.bindModeHandler = null;
}
}, BIND_MODE_TIMEOUT);
}
const newState = LinearElementEditor.handlePointDragging(
event,
this,
pointerCoords.x,
pointerCoords.y,
linearElementEditor,
(element) => this.getElementHitThreshold(element),
);
if (newState) {
pointerDownState.lastCoords.x = pointerCoords.x;
@ -8797,76 +8672,9 @@ class App extends React.Component<AppProps, AppState> {
} else if (isLinearElement(newElement)) {
pointerDownState.drag.hasOccurred = true;
const points = newElement.points;
const startBindingElement =
this.state.editingLinearElement?.startBindingElement;
let [firstPointX, firstPointY] =
LinearElementEditor.getPointGlobalCoordinates(
newElement,
newElement.points[0],
elementsMap,
);
let dx = gridX - newElement.x;
let dy = gridY - newElement.y;
if (
!isElbowArrow(newElement) &&
this.state.editingLinearElement &&
isBindingElement(newElement, false)
) {
// Handles the case where we need to "jump out" the simple arrow
// start point as we drag-create it.
const hoveredElement = getHoveredElementForBinding(
{ x: gridX, y: gridY },
this.scene.getNonDeletedElements(),
this.scene.getNonDeletedElementsMap(),
this.state.zoom,
isElbowArrow(newElement),
isElbowArrow(newElement),
);
const arrowIsInsideTheSameElement =
startBindingElement &&
startBindingElement !== "keep" &&
hoveredElement?.id === startBindingElement.id;
if (!arrowIsInsideTheSameElement) {
const [outlinePointX, outlinePointY] = getOutlineAvoidingPoint(
newElement,
hoveredElement,
hoveredElement
? pointFrom(pointerCoords.x, pointerCoords.y)
: pointFrom(gridX, gridY),
newElement.points.length - 1,
elementsMap,
);
const otherHoveredElement = getHoveredElementForBinding(
{ x: firstPointX, y: firstPointY },
this.scene.getNonDeletedElements(),
this.scene.getNonDeletedElementsMap(),
this.state.zoom,
isElbowArrow(newElement),
isElbowArrow(newElement),
);
[firstPointX, firstPointY] = getOutlineAvoidingPoint(
newElement,
otherHoveredElement,
pointFrom(firstPointX, firstPointY),
0,
elementsMap,
);
dx = outlinePointX - firstPointX;
dy = outlinePointY - firstPointY;
} else {
firstPointX =
this.state.editingLinearElement?.pointerDownState
.arrowOtherPoint?.[0] ?? firstPointX;
firstPointY =
this.state.editingLinearElement?.pointerDownState
.arrowOtherPoint?.[1] ?? firstPointY;
}
}
if (shouldRotateWithDiscreteAngle(event) && points.length === 2) {
({ width: dx, height: dy } = getLockedLinearCursorAlignSize(
newElement.x,
@ -8880,8 +8688,6 @@ class App extends React.Component<AppProps, AppState> {
this.scene.mutateElement(
newElement,
{
x: firstPointX,
y: firstPointY,
points: [...points, pointFrom<LocalPoint>(dx, dy)],
},
{ informMutation: false, isDragging: false },
@ -8893,8 +8699,6 @@ class App extends React.Component<AppProps, AppState> {
this.scene.mutateElement(
newElement,
{
x: firstPointX,
y: firstPointY,
points: [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
},
{ isDragging: true, informMutation: false },
@ -8913,7 +8717,6 @@ class App extends React.Component<AppProps, AppState> {
[pointerCoords],
this.scene,
this.state.zoom,
elementsMap,
this.state.startBoundElement,
),
});
@ -9150,14 +8953,8 @@ class App extends React.Component<AppProps, AppState> {
});
}
if (this.bindModeHandler) {
clearTimeout(this.bindModeHandler);
this.bindModeHandler = null;
}
this.setState({
selectedElementsAreBeingDragged: false,
bindMode: "focus",
});
const elementsMap = this.scene.getNonDeletedElementsMap();
@ -9180,7 +8977,7 @@ class App extends React.Component<AppProps, AppState> {
// Handle end of dragging a point of a linear element, might close a loop
// and sets binding element
if (this.state.editingLinearElement && !this.state.newElement) {
if (this.state.editingLinearElement) {
if (
!pointerDownState.boxSelection.hasOccurred &&
pointerDownState.hit?.element?.id !==
@ -9319,7 +9116,10 @@ class App extends React.Component<AppProps, AppState> {
newElement,
});
} else if (pointerDownState.drag.hasOccurred && !multiElement) {
if (isBindingElement(newElement, false)) {
if (
isBindingEnabled(this.state) &&
isBindingElement(newElement, false)
) {
this.actionManager.executeAction(actionFinalize, "ui", {
event: childEvent,
sceneCoords,

View File

@ -88,12 +88,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"endArrowhead": "arrow",
"endBinding": {
"elementId": "ellipse-1",
"fixedPoint": [
0.04,
0.4633333333333333,
],
"focus": 0,
"gap": 0,
"focus": -0.007519379844961235,
"gap": 11.562288374879595,
},
"fillStyle": "solid",
"frameId": null,
@ -122,12 +118,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"startArrowhead": null,
"startBinding": {
"elementId": "id49",
"fixedPoint": [
1,
0.5001,
],
"focus": 0,
"gap": 0,
"focus": -0.0813953488372095,
"gap": 1,
},
"strokeColor": "#1864ab",
"strokeStyle": "solid",
@ -342,12 +334,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"endArrowhead": "arrow",
"endBinding": {
"elementId": "text-2",
"fixedPoint": [
-2.05,
0.5001,
],
"focus": 0,
"gap": 0,
"gap": 16,
},
"fillStyle": "solid",
"frameId": null,
@ -376,12 +364,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"startArrowhead": null,
"startBinding": {
"elementId": "text-1",
"fixedPoint": [
1,
0.5001,
],
"focus": 0,
"gap": 0,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@ -452,12 +436,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"endArrowhead": "arrow",
"endBinding": {
"elementId": "id42",
"fixedPoint": [
0,
0.5001,
],
"focus": 0,
"gap": 0,
"focus": -0,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@ -486,12 +466,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"startArrowhead": null,
"startBinding": {
"elementId": "id41",
"fixedPoint": [
1,
0.5001,
],
"focus": 0,
"gap": 0,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@ -636,12 +612,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"endArrowhead": "arrow",
"endBinding": {
"elementId": "id46",
"fixedPoint": [
0,
0.5001,
],
"focus": 0,
"gap": 0,
"focus": -0,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@ -670,12 +642,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"startArrowhead": null,
"startBinding": {
"elementId": "id45",
"fixedPoint": [
1,
0.5001,
],
"focus": 0,
"gap": 0,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@ -1571,12 +1539,8 @@ exports[`Test Transform > should transform the elements correctly when linear el
"endArrowhead": "arrow",
"endBinding": {
"elementId": "B",
"fixedPoint": [
0.46387050630528887,
0.48466257668711654,
],
"focus": 0,
"gap": 0,
"gap": 32,
},
"fillStyle": "solid",
"frameId": null,
@ -1603,12 +1567,8 @@ exports[`Test Transform > should transform the elements correctly when linear el
"startArrowhead": null,
"startBinding": {
"elementId": "Bob",
"fixedPoint": [
0.39381496335223337,
1,
],
"focus": 0,
"gap": 0,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",

View File

@ -433,11 +433,11 @@ describe("Test Transform", () => {
startBinding: {
elementId: rectangle.id,
focus: 0,
gap: 0,
gap: 1,
},
endBinding: {
elementId: ellipse.id,
focus: 0,
focus: -0,
},
});
@ -518,11 +518,11 @@ describe("Test Transform", () => {
startBinding: {
elementId: text2.id,
focus: 0,
gap: 0,
gap: 1,
},
endBinding: {
elementId: text3.id,
focus: 0,
focus: -0,
},
});

View File

@ -11,7 +11,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": {
"items": [
@ -1084,7 +1083,6 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -1298,7 +1296,6 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -1629,7 +1626,6 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -1960,7 +1956,6 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -2174,7 +2169,6 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -2415,7 +2409,6 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -2713,7 +2706,6 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -3085,7 +3077,6 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -3578,7 +3569,6 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -3901,7 +3891,6 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -4224,7 +4213,6 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -4635,7 +4623,6 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": {
"items": [
@ -5852,7 +5839,6 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": {
"items": [
@ -7120,7 +7106,6 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": {
"items": [
@ -7787,7 +7772,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": {
"items": [
@ -8778,7 +8762,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": {
"items": [

File diff suppressed because it is too large Load Diff

View File

@ -193,7 +193,6 @@ exports[`move element > rectangles with binding arrow 7`] = `
"lastCommittedPoint": null,
"link": null,
"locked": false,
"moveMidPointsWithElement": false,
"opacity": 100,
"points": [
[

View File

@ -11,7 +11,6 @@ exports[`given element A and group of elements B and given both are selected whe
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -437,7 +436,6 @@ exports[`given element A and group of elements B and given both are selected whe
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -853,7 +851,6 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -1419,7 +1416,6 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -1626,7 +1622,6 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -2010,7 +2005,6 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -2255,7 +2249,6 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -2435,7 +2428,6 @@ exports[`regression tests > can drag element that covers another element, while
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -2760,7 +2752,6 @@ exports[`regression tests > change the properties of a shape > [end of test] app
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -3015,7 +3006,6 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -3256,7 +3246,6 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -3492,7 +3481,6 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -3750,7 +3738,6 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -4064,7 +4051,6 @@ exports[`regression tests > deleting last but one element in editing group shoul
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -4500,7 +4486,6 @@ exports[`regression tests > deselects group of selected elements on pointer down
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -4783,7 +4768,6 @@ exports[`regression tests > deselects group of selected elements on pointer up w
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -5059,7 +5043,6 @@ exports[`regression tests > deselects selected element on pointer down when poin
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -5267,7 +5250,6 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -5467,7 +5449,6 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -5860,7 +5841,6 @@ exports[`regression tests > drags selected elements from point inside common bou
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -6157,7 +6137,6 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
"locked": false,
"type": "freedraw",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -6579,14 +6558,12 @@ exports[`regression tests > draw every type of shape > [end of test] undo stack
"appState": AppStateDelta {
"delta": Delta {
"deleted": {
"editingLinearElementId": "id15",
"selectedElementIds": {
"id15": true,
},
"selectedLinearElementId": null,
},
"inserted": {
"editingLinearElementId": null,
"selectedElementIds": {
"id12": true,
},
@ -6717,11 +6694,9 @@ exports[`regression tests > draw every type of shape > [end of test] undo stack
"appState": AppStateDelta {
"delta": Delta {
"deleted": {
"editingLinearElementId": null,
"selectedLinearElementId": "id15",
},
"inserted": {
"editingLinearElementId": "id15",
"selectedLinearElementId": null,
},
},
@ -6993,7 +6968,6 @@ exports[`regression tests > given a group of selected elements with an element t
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -7327,7 +7301,6 @@ exports[`regression tests > given a selected element A and a not selected elemen
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -7606,7 +7579,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -7841,7 +7813,6 @@ exports[`regression tests > given selected element A with lower z-index than uns
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -8081,7 +8052,6 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -8261,7 +8231,6 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -8441,7 +8410,6 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -8621,7 +8589,6 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -8847,7 +8814,6 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -9071,7 +9037,6 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
"locked": false,
"type": "freedraw",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -9267,7 +9232,6 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -9493,7 +9457,6 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -9673,7 +9636,6 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -9897,7 +9859,6 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -10077,7 +10038,6 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
"locked": false,
"type": "freedraw",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -10273,7 +10233,6 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -10453,7 +10412,6 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -10984,7 +10942,6 @@ exports[`regression tests > noop interaction after undo shouldn't create history
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -11264,7 +11221,6 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -11387,7 +11343,6 @@ exports[`regression tests > shift click on selected element should deselect it o
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -11587,7 +11542,6 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -11906,7 +11860,6 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -12335,7 +12288,6 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -12975,7 +12927,6 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -13101,7 +13052,6 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -13732,7 +13682,6 @@ exports[`regression tests > switches from group of selected elements to another
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -14071,7 +14020,6 @@ exports[`regression tests > switches selected element on pointer down > [end of
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -14335,7 +14283,6 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -14458,7 +14405,6 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -14574,11 +14520,9 @@ exports[`regression tests > undo/redo drawing an element > [end of test] redo st
"appState": AppStateDelta {
"delta": Delta {
"deleted": {
"editingLinearElementId": "id6",
"selectedLinearElementId": null,
},
"inserted": {
"editingLinearElementId": null,
"selectedLinearElementId": "id6",
},
},
@ -14653,13 +14597,11 @@ exports[`regression tests > undo/redo drawing an element > [end of test] redo st
"appState": AppStateDelta {
"delta": Delta {
"deleted": {
"editingLinearElementId": null,
"selectedElementIds": {
"id3": true,
},
},
"inserted": {
"editingLinearElementId": "id6",
"selectedElementIds": {
"id6": true,
},
@ -14851,7 +14793,6 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
"locked": false,
"type": "text",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,
@ -14974,7 +14915,6 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,

View File

@ -157,7 +157,7 @@ describe("Test dragCreate", () => {
fireEvent.pointerUp(canvas);
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`6`,
`5`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`5`);
expect(h.state.selectionElement).toBeNull();

View File

@ -1148,7 +1148,7 @@ describe("history", () => {
expect(API.getUndoStack().length).toBe(2);
expect(API.getRedoStack().length).toBe(4);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.editingLinearElement).not.toBeNull();
expect(h.state.editingLinearElement).toBeNull();
expect(h.state.selectedLinearElement).toBeNull(); // undo `actionFinalize`
expect(h.elements).toEqual([
expect.objectContaining({
@ -1165,7 +1165,7 @@ describe("history", () => {
expect(API.getUndoStack().length).toBe(1);
expect(API.getRedoStack().length).toBe(5);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.editingLinearElement).not.toBeNull();
expect(h.state.editingLinearElement).toBeNull();
expect(h.state.selectedLinearElement).toBeNull();
expect(h.elements).toEqual([
expect.objectContaining({
@ -1197,7 +1197,7 @@ describe("history", () => {
expect(API.getUndoStack().length).toBe(1);
expect(API.getRedoStack().length).toBe(5);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.editingLinearElement).not.toBeNull();
expect(h.state.editingLinearElement).toBeNull();
expect(h.state.selectedLinearElement).toBeNull();
expect(h.elements).toEqual([
expect.objectContaining({
@ -1213,7 +1213,7 @@ describe("history", () => {
expect(API.getUndoStack().length).toBe(2);
expect(API.getRedoStack().length).toBe(4);
expect(assertSelectedElements(h.elements[0]));
expect(h.state.editingLinearElement).not.toBeNull();
expect(h.state.editingLinearElement).toBeNull();
expect(h.state.selectedLinearElement).toBeNull(); // undo `actionFinalize`
expect(h.elements).toEqual([
expect.objectContaining({
@ -1638,15 +1638,13 @@ describe("history", () => {
expect(API.getUndoStack().length).toBe(5);
expect(arrow.startBinding).toEqual({
elementId: rect1.id,
fixedPoint: expect.arrayContaining([1, 0.5001]),
focus: 0,
gap: 0,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
});
expect(arrow.endBinding).toEqual({
elementId: rect2.id,
fixedPoint: expect.arrayContaining([0, 0.5001]),
focus: 0,
gap: 0,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
});
expect(rect1.boundElements).toStrictEqual([
{ id: text.id, type: "text" },
@ -1663,15 +1661,13 @@ describe("history", () => {
expect(API.getRedoStack().length).toBe(1);
expect(arrow.startBinding).toEqual({
elementId: rect1.id,
fixedPoint: expect.arrayContaining([1, 0.5001]),
focus: 0,
gap: 0,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
});
expect(arrow.endBinding).toEqual({
elementId: rect2.id,
fixedPoint: expect.arrayContaining([0, 0.5001]),
focus: 0,
gap: 0,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
});
expect(h.elements).toEqual([
expect.objectContaining({
@ -1688,15 +1684,13 @@ describe("history", () => {
expect(API.getRedoStack().length).toBe(0);
expect(arrow.startBinding).toEqual({
elementId: rect1.id,
fixedPoint: expect.arrayContaining([1, 0.5001]),
focus: 0,
gap: 0,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
});
expect(arrow.endBinding).toEqual({
elementId: rect2.id,
fixedPoint: expect.arrayContaining([0, 0.5001]),
focus: 0,
gap: 0,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
});
expect(h.elements).toEqual([
expect.objectContaining({
@ -1721,15 +1715,13 @@ describe("history", () => {
expect(API.getRedoStack().length).toBe(0);
expect(arrow.startBinding).toEqual({
elementId: rect1.id,
fixedPoint: expect.arrayContaining([1, 0.5001]),
focus: 0,
gap: 0,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
});
expect(arrow.endBinding).toEqual({
elementId: rect2.id,
fixedPoint: expect.arrayContaining([0, 0.5001]),
focus: 0,
gap: 0,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
});
expect(h.elements).toEqual([
expect.objectContaining({
@ -1746,15 +1738,13 @@ describe("history", () => {
expect(API.getRedoStack().length).toBe(1);
expect(arrow.startBinding).toEqual({
elementId: rect1.id,
fixedPoint: expect.arrayContaining([1, 0.5001]),
focus: 0,
gap: 0,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
});
expect(arrow.endBinding).toEqual({
elementId: rect2.id,
fixedPoint: expect.arrayContaining([0, 0.5001]),
focus: 0,
gap: 0,
focus: expect.toBeNonNaNNumber(),
gap: expect.toBeNonNaNNumber(),
});
expect(h.elements).toEqual([
expect.objectContaining({
@ -5089,11 +5079,13 @@ describe("history", () => {
id: arrowId,
startBinding: expect.objectContaining({
elementId: rect1.id,
fixedPoint: expect.arrayContaining([1, 0.5001]),
focus: 0,
gap: 1,
}),
endBinding: expect.objectContaining({
elementId: rect2.id,
fixedPoint: expect.arrayContaining([0, 0.5001]),
focus: -0,
gap: 1,
}),
isDeleted: true,
}),

View File

@ -97,7 +97,7 @@ describe("move element", () => {
new Pointer("mouse").clickOn(rectB);
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(
`18`,
`17`,
);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`13`);
expect(h.state.selectionElement).toBeNull();

View File

@ -118,7 +118,7 @@ describe("multi point mode in linear elements", () => {
key: KEYS.ENTER,
});
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`9`);
expect(renderInteractiveScene.mock.calls.length).toMatchInlineSnapshot(`7`);
expect(renderStaticScene.mock.calls.length).toMatchInlineSnapshot(`6`);
expect(h.elements.length).toEqual(1);

View File

@ -425,7 +425,7 @@ describe("select single element on the scene", () => {
fireEvent.pointerDown(canvas, { clientX: 40, clientY: 40 });
fireEvent.pointerUp(canvas);
expect(renderInteractiveScene).toHaveBeenCalledTimes(9);
expect(renderInteractiveScene).toHaveBeenCalledTimes(8);
expect(renderStaticScene).toHaveBeenCalledTimes(6);
expect(h.state.selectionElement).toBeNull();
expect(h.elements.length).toEqual(1);
@ -487,12 +487,7 @@ describe("tool locking & selection", () => {
expect(h.state.activeTool.locked).toBe(true);
for (const { value } of Object.values(SHAPES)) {
if (
value !== "image" &&
value !== "selection" &&
value !== "eraser" &&
value !== "arrow"
) {
if (value !== "image" && value !== "selection" && value !== "eraser") {
const element = UI.createElement(value);
expect(h.state.selectedElementIds[element.id]).not.toBe(true);
}

View File

@ -444,7 +444,6 @@ export interface AppState {
// as elements are unlocked, we remove the groupId from the elements
// and also remove groupId from this map
lockedMultiSelections: { [groupId: string]: true };
bindMode: "focus" | "fixed";
}
export type SearchMatch = {

View File

@ -2,4 +2,3 @@ export * from "./export";
export * from "./withinBounds";
export * from "./bbox";
export { getCommonBounds } from "@excalidraw/element";
export * from "./visualdebug";

View File

@ -11,7 +11,6 @@ exports[`exportToSvg > with default arguments 1`] = `
"locked": false,
"type": "selection",
},
"bindMode": "focus",
"collaborators": Map {},
"contextMenu": null,
"croppingElementId": null,