Compare commits

..
Author SHA1 Message Date
Mark Tolmacs 4d0cb0262f Merge branch 'master' into mtolmacs/fix/lost-focus-point
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
2026-06-04 15:47:09 +00:00
Mark Tolmacs f49c931b7e Trigger build 2026-03-26 20:10:31 +00:00
Mark Tolmacs 193386003f fix: Jump source
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
2026-03-26 18:11:06 +00:00
Mark Tolmacs 9a3795ec2c fix: Change ALT override for focus
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
2026-03-26 17:26:08 +00:00
Mark Tolmacs 5834e9f11f fix: Fixes
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
2026-03-26 17:10:45 +00:00
Mark Tolmacs 50749b8119 fix: Jump inside
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
2026-03-26 17:10:45 +00:00
Mark Tolmacs 3b0a6af46f fix: Snapshot
Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
2026-03-26 17:08:02 +00:00
Mark Tolmacs 3b99b7aba2 chore: Trigger build 2026-03-26 17:08:01 +00:00
Mark Tolmacs 84f087633e fix: Lost focus point on transition to inside-inside 2026-03-26 17:07:58 +00:00
11 changed files with 182 additions and 103 deletions
+23 -7
View File
@@ -27,6 +27,7 @@ import type {
ElementsMap, ElementsMap,
ExcalidrawArrowElement, ExcalidrawArrowElement,
ExcalidrawBindableElement, ExcalidrawBindableElement,
FixedPointBinding,
NonDeletedSceneElementsMap, NonDeletedSceneElementsMap,
PointsPositionUpdates, PointsPositionUpdates,
} from "../types"; } from "../types";
@@ -110,10 +111,17 @@ const focusPointUpdate = (
) => { ) => {
const pointUpdates = new Map(); const pointUpdates = new Map();
const originalAdjacentBinding =
appState.selectedLinearElement?.initialState
.arrowOtherEndpointInitialBinding;
const bindingField = isStartBinding ? "startBinding" : "endBinding"; const bindingField = isStartBinding ? "startBinding" : "endBinding";
const adjacentBindingField = isStartBinding ? "endBinding" : "startBinding"; const adjacentBindingField = isStartBinding ? "endBinding" : "startBinding";
let currentBinding = arrow[bindingField]; let currentBinding = arrow[bindingField];
let adjacentBinding = arrow[adjacentBindingField]; let adjacentBinding =
originalAdjacentBinding?.mode === "orbit" &&
arrow[adjacentBindingField]?.mode === "inside"
? originalAdjacentBinding
: arrow[adjacentBindingField];
// Update the dragged focus point related end // Update the dragged focus point related end
if (currentBinding && bindableElement) { if (currentBinding && bindableElement) {
@@ -125,7 +133,7 @@ const focusPointUpdate = (
if (switchToInsideBinding || boundToSameElement) { if (switchToInsideBinding || boundToSameElement) {
currentBinding = { currentBinding = {
...currentBinding, ...currentBinding,
mode: "fixed", mode: "inside",
}; };
} else { } else {
currentBinding = { currentBinding = {
@@ -163,10 +171,10 @@ const focusPointUpdate = (
// Same shape bound on both ends // Same shape bound on both ends
const boundToSameElementAfterUpdate = const boundToSameElementAfterUpdate =
bindableElement && adjacentBinding.elementId === bindableElement.id; bindableElement && adjacentBinding.elementId === bindableElement.id;
if (switchToInsideBinding || boundToSameElementAfterUpdate) { if (boundToSameElementAfterUpdate) {
adjacentBinding = { adjacentBinding = {
...adjacentBinding, ...adjacentBinding,
mode: "fixed", mode: "inside",
}; };
} else { } else {
adjacentBinding = { adjacentBinding = {
@@ -256,8 +264,8 @@ export const handleFocusPointDrag = (
// Handle binding mode switch // Handle binding mode switch
const newMode = const newMode =
switchToInsideBinding && arrow[bindingField]?.mode === "orbit" switchToInsideBinding && arrow[bindingField]?.mode === "orbit"
? "fixed" ? "inside"
: !switchToInsideBinding && arrow[bindingField]?.mode === "fixed" : !switchToInsideBinding && arrow[bindingField]?.mode === "inside"
? "orbit" ? "orbit"
: null; : null;
@@ -339,6 +347,7 @@ export const handleFocusPointPointerDown = (
): { ): {
hitFocusPoint: "start" | "end" | null; hitFocusPoint: "start" | "end" | null;
pointerOffset: { x: number; y: number }; pointerOffset: { x: number; y: number };
arrowOtherEndpointInitialBinding: FixedPointBinding | null;
} => { } => {
const pointerPos = pointFrom( const pointerPos = pointFrom(
pointerDownState.origin.x, pointerDownState.origin.x,
@@ -376,6 +385,7 @@ export const handleFocusPointPointerDown = (
x: pointerPos[0] - focusPoint[0], x: pointerPos[0] - focusPoint[0],
y: pointerPos[1] - focusPoint[1], y: pointerPos[1] - focusPoint[1],
}, },
arrowOtherEndpointInitialBinding: arrow.endBinding,
}; };
} }
} }
@@ -411,6 +421,7 @@ export const handleFocusPointPointerDown = (
x: pointerPos[0] - focusPoint[0], x: pointerPos[0] - focusPoint[0],
y: pointerPos[1] - focusPoint[1], y: pointerPos[1] - focusPoint[1],
}, },
arrowOtherEndpointInitialBinding: arrow.startBinding,
}; };
} }
} }
@@ -419,13 +430,14 @@ export const handleFocusPointPointerDown = (
return { return {
hitFocusPoint: null, hitFocusPoint: null,
pointerOffset: { x: 0, y: 0 }, pointerOffset: { x: 0, y: 0 },
arrowOtherEndpointInitialBinding: null,
}; };
}; };
export const handleFocusPointPointerUp = ( export const handleFocusPointPointerUp = (
linearElementEditor: LinearElementEditor, linearElementEditor: LinearElementEditor,
scene: Scene, scene: Scene,
) => { ): { arrowOtherEndpointInitialBinding: FixedPointBinding | null } => {
invariant( invariant(
linearElementEditor.draggedFocusPointBinding, linearElementEditor.draggedFocusPointBinding,
"Must have a dragged focus point at pointer release", "Must have a dragged focus point at pointer release",
@@ -483,6 +495,10 @@ export const handleFocusPointPointerUp = (
], ],
}); });
} }
return {
arrowOtherEndpointInitialBinding: null,
};
}; };
export const handleFocusPointHover = ( export const handleFocusPointHover = (
+89 -46
View File
@@ -328,7 +328,7 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
if (hit) { if (hit) {
start = { start = {
element: hit, element: hit,
mode: "fixed", mode: "inside",
focusPoint: point, focusPoint: point,
}; };
} else { } else {
@@ -353,13 +353,13 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
start: isMultiPoint start: isMultiPoint
? { mode: undefined } ? { mode: undefined }
: { : {
mode: "fixed", mode: "inside",
element: hit, element: hit,
focusPoint: origin ?? center, focusPoint: origin ?? center,
}, },
end: isMultiPoint end: isMultiPoint
? { mode: "orbit", element: hit, focusPoint: point } ? { mode: "orbit", element: hit, focusPoint: point }
: { mode: "fixed", element: hit, focusPoint: point }, : { mode: "inside", element: hit, focusPoint: point },
}; };
} }
@@ -379,7 +379,7 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
start: isMultiPoint start: isMultiPoint
? { mode: undefined } ? { mode: undefined }
: { : {
mode: otherElement.id !== hit.id ? "orbit" : "fixed", mode: otherElement.id !== hit.id ? "orbit" : "inside",
element: otherElement, element: otherElement,
focusPoint: origin ?? pointFrom<GlobalPoint>(arrow.x, arrow.y), focusPoint: origin ?? pointFrom<GlobalPoint>(arrow.x, arrow.y),
}, },
@@ -402,7 +402,7 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
const otherIsInsideBinding = const otherIsInsideBinding =
!!appState.selectedLinearElement?.initialState.arrowStartIsInside; !!appState.selectedLinearElement?.initialState.arrowStartIsInside;
const other: BindingStrategy = { const other: BindingStrategy = {
mode: otherIsInsideBinding ? "fixed" : "orbit", mode: otherIsInsideBinding ? "inside" : "orbit",
element: otherElement, element: otherElement,
focusPoint: shiftKey focusPoint: shiftKey
? elementCenterPoint(otherElement, elementsMap) ? elementCenterPoint(otherElement, elementsMap)
@@ -416,9 +416,9 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
let current: BindingStrategy; let current: BindingStrategy;
if (hit) { if (hit) {
const isInsideBinding = const isInsideBinding =
globalBindMode === "fixed" || globalBindMode === "skip"; globalBindMode === "inside" || globalBindMode === "skip";
current = { current = {
mode: isInsideBinding && !isNested ? "fixed" : "orbit", mode: isInsideBinding && !isNested ? "inside" : "orbit",
element: hit, element: hit,
focusPoint: isInsideBinding || isNested ? point : point, focusPoint: isInsideBinding || isNested ? point : point,
}; };
@@ -436,10 +436,10 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = (
if (!arrow.startBinding) { if (!arrow.startBinding) {
if (hit) { if (hit) {
const isInsideBinding = const isInsideBinding =
globalBindMode === "fixed" || globalBindMode === "skip"; globalBindMode === "inside" || globalBindMode === "skip";
end = { end = {
mode: isInsideBinding ? "fixed" : "orbit", mode: isInsideBinding ? "inside" : "orbit",
element: hit, element: hit,
focusPoint: point, focusPoint: point,
}; };
@@ -488,7 +488,7 @@ const bindingStrategyForSimpleArrowEndpointDragging_complex = (
// If the global bind mode is in free binding mode, just bind // If the global bind mode is in free binding mode, just bind
// where the pointer is and keep the other end intact // where the pointer is and keep the other end intact
if (globalBindMode === "fixed" || globalBindMode === "skip") { if (globalBindMode === "inside" || globalBindMode === "skip") {
current = hit current = hit
? { ? {
element: element:
@@ -496,7 +496,7 @@ const bindingStrategyForSimpleArrowEndpointDragging_complex = (
? hit ? hit
: oppositeElement, : oppositeElement,
focusPoint: point, focusPoint: point,
mode: "fixed", mode: "inside",
} }
: { mode: null }; : { mode: null };
other = other =
@@ -514,9 +514,12 @@ const bindingStrategyForSimpleArrowEndpointDragging_complex = (
} }
// Already inside binding over the same hit element should remain inside bound // Already inside binding over the same hit element should remain inside bound
if (hit.id === currentBinding?.elementId && currentBinding.mode === "fixed") { if (
hit.id === currentBinding?.elementId &&
currentBinding.mode === "inside"
) {
return { return {
current: { mode: "fixed", focusPoint: point, element: hit }, current: { mode: "inside", focusPoint: point, element: hit },
other, other,
}; };
} }
@@ -535,7 +538,7 @@ const bindingStrategyForSimpleArrowEndpointDragging_complex = (
// The opposite binding is inside the same element // The opposite binding is inside the same element
// eslint-disable-next-line no-else-return // eslint-disable-next-line no-else-return
else { else {
current = { element: hit, mode: "fixed", focusPoint: point }; current = { element: hit, mode: "inside", focusPoint: point };
return { current, other: isMultiPoint ? { mode: undefined } : other }; return { current, other: isMultiPoint ? { mode: undefined } : other };
} }
@@ -547,7 +550,7 @@ const bindingStrategyForSimpleArrowEndpointDragging_complex = (
if (isOverlapping && oppositeElement && !otherIsTransparent) { if (isOverlapping && oppositeElement && !otherIsTransparent) {
current = { current = {
element: oppositeElement, element: oppositeElement,
mode: "fixed", mode: "inside",
focusPoint: point, focusPoint: point,
}; };
} else { } else {
@@ -691,6 +694,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
localPoint, localPoint,
elementsMap, elementsMap,
); );
const hit = getHoveredElementForBinding( const hit = getHoveredElementForBinding(
globalPoint, globalPoint,
elements, elements,
@@ -738,13 +742,22 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
) { ) {
return { return {
start: { start: {
mode: "fixed", mode: "inside",
element: hit, element: hit,
focusPoint: startDragged focusPoint: startDragged
? globalPoint ? globalPoint
: // NOTE: Can only affect the start point because new arrows always drag the end point : // NOTE: Can only affect the start point because new arrows always drag the end point
opts?.newArrow opts?.newArrow
? appState.selectedLinearElement!.initialState.origin! ? appState.selectedLinearElement!.initialState.origin!
: otherBindableElement &&
appState.selectedLinearElement?.initialState
?.arrowOtherEndpointInitialBinding?.fixedPoint
? getGlobalFixedPointForBindableElement(
appState.selectedLinearElement?.initialState
.arrowOtherEndpointInitialBinding.fixedPoint,
otherBindableElement,
elementsMap,
)
: LinearElementEditor.getPointAtIndexGlobalCoordinates( : LinearElementEditor.getPointAtIndexGlobalCoordinates(
arrow, arrow,
0, 0,
@@ -752,10 +765,19 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
), // startFixedPoint, ), // startFixedPoint,
}, },
end: { end: {
mode: "fixed", mode: "inside",
element: hit, element: hit,
focusPoint: endDragged focusPoint: endDragged
? globalPoint ? globalPoint
: otherBindableElement &&
appState.selectedLinearElement?.initialState
?.arrowOtherEndpointInitialBinding?.fixedPoint
? getGlobalFixedPointForBindableElement(
appState.selectedLinearElement?.initialState
.arrowOtherEndpointInitialBinding.fixedPoint,
otherBindableElement,
elementsMap,
)
: LinearElementEditor.getPointAtIndexGlobalCoordinates( : LinearElementEditor.getPointAtIndexGlobalCoordinates(
arrow, arrow,
-1, -1,
@@ -771,7 +793,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
start: startDragged start: startDragged
? hit ? hit
? { ? {
mode: "fixed", mode: "inside",
element: hit, element: hit,
focusPoint: globalPoint, focusPoint: globalPoint,
} }
@@ -780,7 +802,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
end: endDragged end: endDragged
? hit ? hit
? { ? {
mode: "fixed", mode: "inside",
element: hit, element: hit,
focusPoint: globalPoint, focusPoint: globalPoint,
} }
@@ -793,7 +815,7 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
const current: BindingStrategy = hit const current: BindingStrategy = hit
? pointInElement ? pointInElement
? { ? {
mode: "fixed", mode: "inside",
element: hit, element: hit,
focusPoint: globalPoint, focusPoint: globalPoint,
} }
@@ -828,36 +850,57 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
threshold: maxBindingDistance_simple(appState.zoom), threshold: maxBindingDistance_simple(appState.zoom),
overrideShouldTestInside: true, overrideShouldTestInside: true,
}); });
const otherPointWasInsideAtStart =
appState.selectedLinearElement?.initialState
.arrowOtherEndpointInitialBinding?.mode === "inside";
const otherNeverOverride = opts?.newArrow const otherNeverOverride = opts?.newArrow
? appState.selectedLinearElement?.initialState.arrowStartIsInside ? appState.selectedLinearElement?.initialState.arrowStartIsInside
: otherBinding?.mode === "fixed"; : otherBinding?.mode === "inside" && otherPointWasInsideAtStart;
const other: BindingStrategy = !otherNeverOverride
? otherBindableElement && let other: BindingStrategy = { mode: undefined };
if (!otherNeverOverride) {
if (
otherBinding?.mode === "inside" &&
!otherPointWasInsideAtStart &&
otherBindableElement
) {
other = {
mode: "orbit",
element: otherBindableElement,
focusPoint: getGlobalFixedPointForBindableElement(
otherBinding.fixedPoint,
otherBindableElement,
elementsMap,
),
};
} else if (
otherBindableElement &&
!otherFocusPointIsInElement && !otherFocusPointIsInElement &&
!pointIsCloseToOtherElement && !pointIsCloseToOtherElement &&
appState.selectedLinearElement?.initialState.altFocusPoint appState.selectedLinearElement?.initialState.altFocusPoint
? { ) {
mode: "orbit", other = {
element: otherBindableElement, mode: "orbit",
focusPoint: appState.selectedLinearElement.initialState.altFocusPoint, element: otherBindableElement,
} focusPoint: appState.selectedLinearElement.initialState.altFocusPoint,
: opts?.angleLocked && otherBindableElement };
? { } else if (opts?.angleLocked && otherBindableElement) {
mode: "orbit", other = {
element: otherBindableElement, mode: "orbit",
focusPoint: element: otherBindableElement,
projectFixedPointOntoDiagonal( focusPoint:
arrow, projectFixedPointOntoDiagonal(
otherEndpoint, arrow,
otherBindableElement, otherEndpoint,
startDragged ? "end" : "start", otherBindableElement,
elementsMap, startDragged ? "end" : "start",
appState.zoom, elementsMap,
appState.isMidpointSnappingEnabled, appState.zoom,
) || otherEndpoint, appState.isMidpointSnappingEnabled,
} ) || otherEndpoint,
: { mode: undefined } };
: { mode: undefined }; }
}
return { return {
start: startDragged ? current : other, start: startDragged ? current : other,
@@ -1769,7 +1812,7 @@ export const updateBoundPoint = (
// 0. Short-circuit for inside binding as it doesn't require any // 0. Short-circuit for inside binding as it doesn't require any
// calculations and is not affected by other bindings // calculations and is not affected by other bindings
if (binding.mode === "fixed") { if (binding.mode === "inside") {
return LinearElementEditor.createPointAt( return LinearElementEditor.createPointAt(
arrow, arrow,
elementsMap, elementsMap,
+1 -1
View File
@@ -762,7 +762,7 @@ export const isPointInElement = (
(isLinearElement(element) || isFreeDrawElement(element)) && (isLinearElement(element) || isFreeDrawElement(element)) &&
!isPathALoop(element.points) !isPathALoop(element.points)
) { ) {
// There isn't any "fixed" for a non-looping path // There isn't any "inside" for a non-looping path
return false; return false;
} }
+27 -23
View File
@@ -141,6 +141,7 @@ export class LinearElementEditor {
}; };
arrowStartIsInside: boolean; arrowStartIsInside: boolean;
altFocusPoint: Readonly<GlobalPoint> | null; altFocusPoint: Readonly<GlobalPoint> | null;
arrowOtherEndpointInitialBinding: FixedPointBinding | null;
}>; }>;
/** whether you're dragging a point */ /** whether you're dragging a point */
@@ -193,6 +194,7 @@ export class LinearElementEditor {
added: false, added: false,
}, },
arrowStartIsInside: false, arrowStartIsInside: false,
arrowOtherEndpointInitialBinding: null,
altFocusPoint: null, altFocusPoint: null,
}; };
this.hoverPointIndex = -1; this.hoverPointIndex = -1;
@@ -764,6 +766,7 @@ export class LinearElementEditor {
...editingLinearElement.initialState, ...editingLinearElement.initialState,
origin: null, origin: null,
arrowStartIsInside: false, arrowStartIsInside: false,
arrowOtherEndpointInitialBinding: null,
}, },
}; };
} }
@@ -1083,8 +1086,9 @@ export class LinearElementEditor {
}, },
arrowStartIsInside: arrowStartIsInside:
!!app.state.newElement && !!app.state.newElement &&
(app.state.bindMode === "fixed" || app.state.bindMode === "skip"), (app.state.bindMode === "inside" || app.state.bindMode === "skip"),
altFocusPoint: null, altFocusPoint: null,
arrowOtherEndpointInitialBinding: element.startBinding,
}, },
selectedPointsIndices: [element.points.length - 1], selectedPointsIndices: [element.points.length - 1],
lastUncommittedPoint: null, lastUncommittedPoint: null,
@@ -1145,8 +1149,11 @@ export class LinearElementEditor {
}, },
arrowStartIsInside: arrowStartIsInside:
!!app.state.newElement && !!app.state.newElement &&
(app.state.bindMode === "fixed" || app.state.bindMode === "skip"), (app.state.bindMode === "inside" || app.state.bindMode === "skip"),
altFocusPoint: null, altFocusPoint: null,
arrowOtherEndpointInitialBinding: nextSelectedPointsIndices?.includes(0)
? element.endBinding
: element.startBinding,
}, },
selectedPointsIndices: nextSelectedPointsIndices, selectedPointsIndices: nextSelectedPointsIndices,
pointerOffset: targetPoint pointerOffset: targetPoint
@@ -2409,22 +2416,21 @@ const pointDraggingUpdates = (
)! as ExcalidrawBindableElement) )! as ExcalidrawBindableElement)
: null; : null;
const endLocalPoint = startIsDraggingOverEndElement const endLocalPoint =
? nextArrow.points[nextArrow.points.length - 1] endIsDraggingOverStartElement &&
: endIsDraggingOverStartElement && app.state.bindMode !== "inside" &&
app.state.bindMode !== "fixed" && getFeatureFlag("COMPLEX_BINDINGS")
getFeatureFlag("COMPLEX_BINDINGS") ? nextArrow.points[0]
? nextArrow.points[0] : endBindable
: endBindable ? updateBoundPoint(
? updateBoundPoint( nextArrow,
nextArrow, "endBinding",
"endBinding", nextArrow.endBinding,
nextArrow.endBinding, endBindable,
endBindable, elementsMap,
elementsMap, endIsDragged,
endIsDragged, ) || nextArrow.points[nextArrow.points.length - 1]
) || nextArrow.points[nextArrow.points.length - 1] : nextArrow.points[nextArrow.points.length - 1];
: nextArrow.points[nextArrow.points.length - 1];
// We need to keep the simulated next arrow up-to-date, because // We need to keep the simulated next arrow up-to-date, because
// updateBoundPoint looks at the opposite point // updateBoundPoint looks at the opposite point
@@ -2443,7 +2449,7 @@ const pointDraggingUpdates = (
endIsDraggingOverStartElement && getFeatureFlag("COMPLEX_BINDINGS") endIsDraggingOverStartElement && getFeatureFlag("COMPLEX_BINDINGS")
? nextArrow.points[0] ? nextArrow.points[0]
: startIsDraggingOverEndElement && : startIsDraggingOverEndElement &&
app.state.bindMode !== "fixed" && app.state.bindMode !== "inside" &&
getFeatureFlag("COMPLEX_BINDINGS") getFeatureFlag("COMPLEX_BINDINGS")
? endLocalPoint ? endLocalPoint
: startBindable : startBindable
@@ -2458,13 +2464,11 @@ const pointDraggingUpdates = (
: nextArrow.points[0]; : nextArrow.points[0];
const endChanged = const endChanged =
!startIsDraggingOverEndElement &&
!( !(
endIsDraggingOverStartElement && endIsDraggingOverStartElement &&
app.state.bindMode !== "fixed" && app.state.bindMode !== "inside" &&
getFeatureFlag("COMPLEX_BINDINGS") getFeatureFlag("COMPLEX_BINDINGS")
) && ) && !!endBindable;
!!endBindable;
const startChanged = const startChanged =
pointDistance(startLocalPoint, nextArrow.points[0]) !== 0; pointDistance(startLocalPoint, nextArrow.points[0]) !== 0;
+1 -1
View File
@@ -279,7 +279,7 @@ export type ExcalidrawTextElementWithContainer = {
export type FixedPoint = [number, number]; export type FixedPoint = [number, number];
export type BindMode = "fixed" | "orbit" | "skip"; export type BindMode = "inside" | "orbit" | "skip";
export type FixedPointBinding = { export type FixedPointBinding = {
elementId: ExcalidrawBindableElement["id"]; elementId: ExcalidrawBindableElement["id"];
+2 -2
View File
@@ -72,14 +72,14 @@ describe("binding for simple arrows", () => {
expect(startBinding.fixedPoint[0]).toBeLessThanOrEqual(1); expect(startBinding.fixedPoint[0]).toBeLessThanOrEqual(1);
expect(startBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0); expect(startBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0);
expect(startBinding.fixedPoint[1]).toBeLessThanOrEqual(1); expect(startBinding.fixedPoint[1]).toBeLessThanOrEqual(1);
expect(startBinding.mode).toBe("fixed"); expect(startBinding.mode).toBe("inside");
const endBinding = arrow.endBinding as FixedPointBinding; const endBinding = arrow.endBinding as FixedPointBinding;
expect(endBinding.fixedPoint[0]).toBeGreaterThanOrEqual(0); expect(endBinding.fixedPoint[0]).toBeGreaterThanOrEqual(0);
expect(endBinding.fixedPoint[0]).toBeLessThanOrEqual(1); expect(endBinding.fixedPoint[0]).toBeLessThanOrEqual(1);
expect(endBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0); expect(endBinding.fixedPoint[1]).toBeGreaterThanOrEqual(0);
expect(endBinding.fixedPoint[1]).toBeLessThanOrEqual(1); expect(endBinding.fixedPoint[1]).toBeLessThanOrEqual(1);
expect(endBinding.mode).toBe("fixed"); expect(endBinding.mode).toBe("inside");
// Move the bindable // Move the bindable
mouse.downAt(100, 150); mouse.downAt(100, 150);
@@ -1940,7 +1940,7 @@ export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
bindBindingElement( bindBindingElement(
newElement, newElement,
startElement, startElement,
appState.bindMode === "fixed" ? "fixed" : "orbit", appState.bindMode === "inside" ? "inside" : "orbit",
"start", "start",
app.scene, app.scene,
); );
@@ -1954,7 +1954,7 @@ export const actionChangeArrowType = register<keyof typeof ARROW_TYPE>({
bindBindingElement( bindBindingElement(
newElement, newElement,
endElement, endElement,
appState.bindMode === "fixed" ? "fixed" : "orbit", appState.bindMode === "inside" ? "inside" : "orbit",
"end", "end",
app.scene, app.scene,
); );
+28 -16
View File
@@ -1095,7 +1095,7 @@ class App extends React.Component<AppProps, AppState> {
); );
this.setState({ this.setState({
bindMode: "fixed", bindMode: "inside",
selectedLinearElement: { selectedLinearElement: {
...this.state.selectedLinearElement, ...this.state.selectedLinearElement,
initialState: { initialState: {
@@ -1176,16 +1176,16 @@ class App extends React.Component<AppProps, AppState> {
: null; : null;
const isAlreadyInsideBindingToSameElement = const isAlreadyInsideBindingToSameElement =
(otherBinding && (otherBinding &&
arrow[otherBinding]?.mode === "fixed" && arrow[otherBinding]?.mode === "inside" &&
arrow[otherBinding]?.elementId === hoveredElement?.id) || arrow[otherBinding]?.elementId === hoveredElement?.id) ||
(currentBinding && (currentBinding &&
arrow[currentBinding]?.mode === "fixed" && arrow[currentBinding]?.mode === "inside" &&
hoveredElement?.id === arrow[currentBinding]?.elementId); hoveredElement?.id === arrow[currentBinding]?.elementId);
if ( if (
currentBinding && currentBinding &&
otherBinding && otherBinding &&
arrow[currentBinding]?.mode === "fixed" && arrow[currentBinding]?.mode === "inside" &&
hoveredElement?.id !== arrow[currentBinding]?.elementId && hoveredElement?.id !== arrow[currentBinding]?.elementId &&
arrow[otherBinding]?.elementId !== arrow[currentBinding]?.elementId arrow[otherBinding]?.elementId !== arrow[currentBinding]?.elementId
) { ) {
@@ -1217,7 +1217,7 @@ class App extends React.Component<AppProps, AppState> {
} }
// Clear the inside binding mode too // Clear the inside binding mode too
if (this.state.bindMode === "fixed") { if (this.state.bindMode === "inside") {
flushSync(() => { flushSync(() => {
this.setState({ this.setState({
bindMode: "orbit", bindMode: "orbit",
@@ -8618,13 +8618,16 @@ class App extends React.Component<AppProps, AppState> {
) as any; ) as any;
if (arrow && isBindingElement(arrow)) { if (arrow && isBindingElement(arrow)) {
const { hitFocusPoint, pointerOffset } = const {
handleFocusPointPointerDown( hitFocusPoint,
arrow, pointerOffset,
pointerDownState, arrowOtherEndpointInitialBinding,
elementsMap, } = handleFocusPointPointerDown(
this.state, arrow,
); pointerDownState,
elementsMap,
this.state,
);
// If focus point is hit, update state and prevent element selection // If focus point is hit, update state and prevent element selection
if (hitFocusPoint) { if (hitFocusPoint) {
@@ -8634,6 +8637,10 @@ class App extends React.Component<AppProps, AppState> {
hoveredFocusPointBinding: hitFocusPoint, hoveredFocusPointBinding: hitFocusPoint,
draggedFocusPointBinding: hitFocusPoint, draggedFocusPointBinding: hitFocusPoint,
pointerOffset, pointerOffset,
initialState: {
...linearElementEditor.initialState,
arrowOtherEndpointInitialBinding,
},
}, },
}); });
return false; return false;
@@ -10756,14 +10763,19 @@ class App extends React.Component<AppProps, AppState> {
} }
if (this.state.selectedLinearElement.draggedFocusPointBinding) { if (this.state.selectedLinearElement.draggedFocusPointBinding) {
handleFocusPointPointerUp( const { arrowOtherEndpointInitialBinding } =
this.state.selectedLinearElement, handleFocusPointPointerUp(
this.scene, this.state.selectedLinearElement,
); this.scene,
);
this.setState({ this.setState({
selectedLinearElement: { selectedLinearElement: {
...this.state.selectedLinearElement, ...this.state.selectedLinearElement,
draggedFocusPointBinding: null, draggedFocusPointBinding: null,
initialState: {
...this.state.selectedLinearElement.initialState,
arrowOtherEndpointInitialBinding,
},
}, },
}); });
} else if ( } else if (
+4 -4
View File
@@ -239,8 +239,8 @@ const repairBinding = <T extends ExcalidrawArrowElement>(
if (binding.elementId) { if (binding.elementId) {
return { return {
elementId: binding.elementId, elementId: binding.elementId,
mode: (binding.mode as string) === "inside" ? "fixed" : binding.mode, mode: binding.mode,
fixedPoint: normalizeFixedPoint(binding.fixedPoint || [0.5, 0.5]), fixedPoint: normalizeFixedPoint(binding.fixedPoint),
} as FixedPointBinding | null; } as FixedPointBinding | null;
} }
return null; return null;
@@ -269,7 +269,7 @@ const repairBinding = <T extends ExcalidrawArrowElement>(
elementsMap, elementsMap,
); );
const mode = isPointInElement(p, boundElement, elementsMap) const mode = isPointInElement(p, boundElement, elementsMap)
? "fixed" ? "inside"
: "orbit"; : "orbit";
const safeElement = { const safeElement = {
...element, ...element,
@@ -289,7 +289,7 @@ const repairBinding = <T extends ExcalidrawArrowElement>(
: null, : null,
}; };
const focusPoint = const focusPoint =
mode === "fixed" mode === "inside"
? p ? p
: projectFixedPointOntoDiagonal( : projectFixedPointOntoDiagonal(
safeElement, safeElement,
@@ -8665,6 +8665,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
"hoveredFocusPointBinding": null, "hoveredFocusPointBinding": null,
"initialState": { "initialState": {
"altFocusPoint": null, "altFocusPoint": null,
"arrowOtherEndpointInitialBinding": null,
"arrowStartIsInside": false, "arrowStartIsInside": false,
"lastClickedPoint": -1, "lastClickedPoint": -1,
"origin": null, "origin": null,
@@ -8898,6 +8899,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
"hoveredFocusPointBinding": null, "hoveredFocusPointBinding": null,
"initialState": { "initialState": {
"altFocusPoint": null, "altFocusPoint": null,
"arrowOtherEndpointInitialBinding": null,
"arrowStartIsInside": false, "arrowStartIsInside": false,
"lastClickedPoint": -1, "lastClickedPoint": -1,
"origin": null, "origin": null,
@@ -9321,6 +9323,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
"hoveredFocusPointBinding": null, "hoveredFocusPointBinding": null,
"initialState": { "initialState": {
"altFocusPoint": null, "altFocusPoint": null,
"arrowOtherEndpointInitialBinding": null,
"arrowStartIsInside": false, "arrowStartIsInside": false,
"lastClickedPoint": -1, "lastClickedPoint": -1,
"origin": null, "origin": null,
@@ -9734,6 +9737,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
"hoveredFocusPointBinding": null, "hoveredFocusPointBinding": null,
"initialState": { "initialState": {
"altFocusPoint": null, "altFocusPoint": null,
"arrowOtherEndpointInitialBinding": null,
"arrowStartIsInside": false, "arrowStartIsInside": false,
"lastClickedPoint": -1, "lastClickedPoint": -1,
"origin": null, "origin": null,
@@ -857,7 +857,7 @@ describe("repairing bindings", () => {
endBinding: { endBinding: {
elementId: container.id, elementId: container.id,
fixedPoint: [0.5, 0.5], fixedPoint: [0.5, 0.5],
mode: "fixed", mode: "inside",
}, },
}); });