marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-11-20 12:44:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

Revert to master

Browse Source
This commit is contained in:
Mark Tolmacs
2025-03-24 14:39:48 +01:00
parent 1a87aa8e55
commit 4d1e2c2bbb
25 changed files with 410 additions and 577 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/excalidraw/actions/actionFinalize.tsx
View File

@@ -91,26 +91,10 @@ export const actionFinalize = register({
multiPointElement.type !== "freedraw" &&
appState.lastPointerDownWith !== "touch"
) {
const { x: rx, y: ry, points, lastCommittedPoint } = multiPointElement;
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,
true,
isElbowArrow(multiPointElement),
);
const { points, lastCommittedPoint } = multiPointElement;
if (
!hoveredElementForBinding &&
(!lastCommittedPoint ||
points[points.length - 1] !== lastCommittedPoint)
!lastCommittedPoint ||
points[points.length - 1] !== lastCommittedPoint
) {
mutateElement(multiPointElement, {
points: multiPointElement.points.slice(0, -1),

2
packages/excalidraw/actions/actionProperties.tsx
View File

@@ -1655,7 +1655,6 @@ export const actionChangeArrowType = register({
newElement,
startHoveredElement,
"start",
elementsMap,
)
: startGlobalPoint;
const finalEndPoint = endHoveredElement
@@ -1663,7 +1662,6 @@ export const actionChangeArrowType = register({
newElement,
endHoveredElement,
"end",
elementsMap,
)
: endGlobalPoint;

230
packages/excalidraw/components/App.tsx
View File

@@ -5991,25 +5991,15 @@ class App extends React.Component<AppProps, AppState> {
if (isPathALoop(points, this.state.zoom.value)) {
setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
}
// update last uncommitted point
mutateElement(
multiElement,
{
points: [
...points.slice(0, -1),
pointTranslate<GlobalPoint, LocalPoint>(
LinearElementEditor.getOutlineAvoidingPoint(
multiElement,
pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
multiElement.points.length - 1,
this,
pointFrom<GlobalPoint>(
multiElement.x + lastCommittedX + dxFromLastCommitted,
multiElement.y + lastCommittedY + dyFromLastCommitted,
),
),
vector(-multiElement.x, -multiElement.y),
pointFrom<LocalPoint>(
lastCommittedX + dxFromLastCommitted,
lastCommittedY + dyFromLastCommitted,
),
],
},
@@ -7761,34 +7751,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;
@@ -7832,93 +7806,53 @@ class App extends React.Component<AppProps, AppState> {
? [currentItemStartArrowhead, currentItemEndArrowhead]
: [null, null];
let element: NonDeleted<ExcalidrawLinearElement>;
if (elementType === "arrow") {
const arrow: Mutable<NonDeleted<ExcalidrawArrowElement>> =
newArrowElement({
type: "arrow",
x: gridX,
y: gridY,
strokeColor: this.state.currentItemStrokeColor,
backgroundColor: this.state.currentItemBackgroundColor,
fillStyle: this.state.currentItemFillStyle,
strokeWidth: this.state.currentItemStrokeWidth,
strokeStyle: this.state.currentItemStrokeStyle,
roughness: this.state.currentItemRoughness,
opacity: this.state.currentItemOpacity,
roundness:
this.state.currentItemArrowType === ARROW_TYPE.round
? { type: ROUNDNESS.PROPORTIONAL_RADIUS }
: // note, roundness doesn't have any effect for elbow arrows,
// but it's best to set it to null as well
null,
startArrowhead,
endArrowhead,
locked: false,
frameId: topLayerFrame ? topLayerFrame.id : null,
elbowed: this.state.currentItemArrowType === ARROW_TYPE.elbow,
fixedSegments:
this.state.currentItemArrowType === ARROW_TYPE.elbow ? [] : null,
});
const hoveredElement = getHoveredElementForBinding(
{ x: gridX, y: gridY },
this.scene.getNonDeletedElements(),
this.scene.getNonDeletedElementsMap(),
this.state.zoom,
true,
this.state.currentItemArrowType === ARROW_TYPE.elbow,
);
if (hoveredElement) {
[arrow.x, arrow.y] =
intersectElementWithLineSegment(
hoveredElement,
lineSegment(
pointFrom<GlobalPoint>(gridX, gridY),
pointFrom<GlobalPoint>(
gridX,
hoveredElement.y + hoveredElement.height / 2,
),
),
2 * FIXED_BINDING_DISTANCE,
)[0] ??
intersectElementWithLineSegment(
hoveredElement,
lineSegment(
pointFrom<GlobalPoint>(gridX, gridY),
pointFrom<GlobalPoint>(
hoveredElement.x + hoveredElement.width / 2,
gridY,
),
),
2 * FIXED_BINDING_DISTANCE,
)[0] ??
pointFrom<GlobalPoint>(gridX, gridY);
}
element = arrow;
} else {
element = newLinearElement({
type: elementType,
x: gridX,
y: gridY,
strokeColor: this.state.currentItemStrokeColor,
backgroundColor: this.state.currentItemBackgroundColor,
fillStyle: this.state.currentItemFillStyle,
strokeWidth: this.state.currentItemStrokeWidth,
strokeStyle: this.state.currentItemStrokeStyle,
roughness: this.state.currentItemRoughness,
opacity: this.state.currentItemOpacity,
roundness:
this.state.currentItemRoundness === "round"
? { type: ROUNDNESS.PROPORTIONAL_RADIUS }
: null,
locked: false,
frameId: topLayerFrame ? topLayerFrame.id : null,
});
}
const element =
elementType === "arrow"
? newArrowElement({
type: elementType,
x: gridX,
y: gridY,
strokeColor: this.state.currentItemStrokeColor,
backgroundColor: this.state.currentItemBackgroundColor,
fillStyle: this.state.currentItemFillStyle,
strokeWidth: this.state.currentItemStrokeWidth,
strokeStyle: this.state.currentItemStrokeStyle,
roughness: this.state.currentItemRoughness,
opacity: this.state.currentItemOpacity,
roundness:
this.state.currentItemArrowType === ARROW_TYPE.round
? { type: ROUNDNESS.PROPORTIONAL_RADIUS }
: // note, roundness doesn't have any effect for elbow arrows,
// but it's best to set it to null as well
null,
startArrowhead,
endArrowhead,
locked: false,
frameId: topLayerFrame ? topLayerFrame.id : null,
elbowed: this.state.currentItemArrowType === ARROW_TYPE.elbow,
fixedSegments:
this.state.currentItemArrowType === ARROW_TYPE.elbow
? []
: null,
})
: newLinearElement({
type: elementType,
x: gridX,
y: gridY,
strokeColor: this.state.currentItemStrokeColor,
backgroundColor: this.state.currentItemBackgroundColor,
fillStyle: this.state.currentItemFillStyle,
strokeWidth: this.state.currentItemStrokeWidth,
strokeStyle: this.state.currentItemStrokeStyle,
roughness: this.state.currentItemRoughness,
opacity: this.state.currentItemOpacity,
roundness:
this.state.currentItemRoundness === "round"
? { type: ROUNDNESS.PROPORTIONAL_RADIUS }
: null,
locked: false,
frameId: topLayerFrame ? topLayerFrame.id : null,
});
this.setState((prevState) => {
const nextSelectedElementIds = {
...prevState.selectedElementIds,
@@ -8233,6 +8167,12 @@ class App extends React.Component<AppProps, AppState> {
this.laserTrails.addPointToPath(pointerCoords.x, pointerCoords.y);
}
const [gridX, gridY] = getGridPoint(
pointerCoords.x,
pointerCoords.y,
event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize(),
);
// for arrows/lines, don't start dragging until a given threshold
// to ensure we don't create a 2-point arrow by mistake when
// user clicks mouse in a way that it moves a tiny bit (thus
@@ -8333,6 +8273,7 @@ class App extends React.Component<AppProps, AppState> {
);
},
linearElementEditor,
this.scene,
);
if (newLinearElementEditor) {
pointerDownState.lastCoords.x = pointerCoords.x;
@@ -8719,11 +8660,6 @@ class App extends React.Component<AppProps, AppState> {
} else if (isLinearElement(newElement)) {
pointerDownState.drag.hasOccurred = true;
const points = newElement.points;
const [gridX, gridY] = getGridPoint(
pointerCoords.x,
pointerCoords.y,
event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize(),
);
let dx = gridX - newElement.x;
let dy = gridY - newElement.y;
@@ -8740,22 +8676,7 @@ class App extends React.Component<AppProps, AppState> {
mutateElement(
newElement,
{
points: [
...points,
pointTranslate<GlobalPoint, LocalPoint>(
LinearElementEditor.getOutlineAvoidingPoint(
newElement,
pointFrom<GlobalPoint>(pointerCoords.x, pointerCoords.y),
newElement.points.length - 1,
this,
pointFrom<GlobalPoint>(
newElement.x + dx,
newElement.y + dy,
),
),
vector(-newElement.x, -newElement.y),
),
],
points: [...points, pointFrom<LocalPoint>(dx, dy)],
},
false,
);
@@ -8766,22 +8687,7 @@ class App extends React.Component<AppProps, AppState> {
mutateElement(
newElement,
{
points: [
...points.slice(0, -1),
pointTranslate<GlobalPoint, LocalPoint>(
LinearElementEditor.getOutlineAvoidingPoint(
newElement,
pointFrom<GlobalPoint>(pointerCoords.x, pointerCoords.y),
newElement.points.length - 1,
this,
pointFrom<GlobalPoint>(
newElement.x + dx,
newElement.y + dy,
),
),
vector(-newElement.x, -newElement.y),
),
],
points: [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
},
false,
{ isDragging: true },

28
packages/excalidraw/data/__snapshots__/transform.test.ts.snap
View File

@@ -89,7 +89,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"endBinding": {
"elementId": "ellipse-1",
"focus": -0.007519379844961235,
"gap": 5,
"gap": 11.562288374879595,
},
"fillStyle": "solid",
"frameId": null,
@@ -119,7 +119,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"startBinding": {
"elementId": "id49",
"focus": -0.0813953488372095,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1864ab",
"strokeStyle": "solid",
@@ -145,7 +145,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"endBinding": {
"elementId": "ellipse-1",
"focus": 0.10666666666666667,
"gap": 5,
"gap": 3.8343264684446097,
},
"fillStyle": "solid",
"frameId": null,
@@ -175,7 +175,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"startBinding": {
"elementId": "diamond-1",
"focus": 0,
"gap": 5,
"gap": 4.545343408287929,
},
"strokeColor": "#e67700",
"strokeStyle": "solid",
@@ -335,7 +335,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"endBinding": {
"elementId": "text-2",
"focus": 0,
"gap": 5,
"gap": 14,
},
"fillStyle": "solid",
"frameId": null,
@@ -365,7 +365,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"startBinding": {
"elementId": "text-1",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -437,7 +437,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"endBinding": {
"elementId": "id42",
"focus": -0,
"gap": 5,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@@ -467,7 +467,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"startBinding": {
"elementId": "id41",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -613,7 +613,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"endBinding": {
"elementId": "id46",
"focus": -0,
"gap": 5,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@@ -643,7 +643,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"startBinding": {
"elementId": "id45",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -1475,7 +1475,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
"endBinding": {
"elementId": "Alice",
"focus": -0,
"gap": 5,
"gap": 5.299874999999986,
},
"fillStyle": "solid",
"frameId": null,
@@ -1507,7 +1507,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
"startBinding": {
"elementId": "Bob",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -1538,7 +1538,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
"endBinding": {
"elementId": "B",
"focus": 0,
"gap": 5,
"gap": 14,
},
"fillStyle": "solid",
"frameId": null,
@@ -1566,7 +1566,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
"startBinding": {
"elementId": "Bob",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",

6
packages/excalidraw/data/transform.test.ts
View File

@@ -433,7 +433,7 @@ describe("Test Transform", () => {
startBinding: {
elementId: rectangle.id,
focus: 0,
gap: FIXED_BINDING_DISTANCE,
gap: 1,
},
endBinding: {
elementId: ellipse.id,
@@ -518,7 +518,7 @@ describe("Test Transform", () => {
startBinding: {
elementId: text2.id,
focus: 0,
gap: FIXED_BINDING_DISTANCE,
gap: 1,
},
endBinding: {
elementId: text3.id,
@@ -781,7 +781,7 @@ describe("Test Transform", () => {
expect((arrow as ExcalidrawArrowElement).endBinding).toStrictEqual({
elementId: "rect-1",
focus: -0,
gap: FIXED_BINDING_DISTANCE,
gap: 14,
});
expect(rect.boundElements).toStrictEqual([
{

196
packages/excalidraw/tests/__snapshots__/history.test.tsx.snap
View File

@@ -198,7 +198,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "99.58947",
"height": "102.35417",
"id": "id172",
"index": "a2",
"isDeleted": false,
@@ -212,8 +212,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
"99.58947",
"99.58947",
"101.77517",
"102.35417",
],
],
"roughness": 1,
@@ -228,8 +228,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"type": "arrow",
"updated": 1,
"version": 40,
"width": "99.58947",
"x": 0,
"width": "101.77517",
"x": "0.70711",
"y": 0,
}
`;
@@ -296,49 +296,47 @@ History {
"endBinding": {
"elementId": "id171",
"focus": "0.00990",
"gap": 5,
"gap": 1,
},
"height": "0.92929",
"height": "0.98586",
"points": [
[
0,
0,
],
[
"92.92893",
"-0.92929",
"98.58579",
"-0.98586",
],
],
"startBinding": {
"elementId": "id170",
"focus": "0.02970",
"gap": 5,
"gap": 1,
},
"width": "92.92893",
},
"inserted": {
"endBinding": {
"elementId": "id171",
"focus": "-0.02075",
"gap": 5,
"focus": "-0.02000",
"gap": 1,
},
"height": "0.07074",
"height": "0.00000",
"points": [
[
0,
0,
],
[
"92.92893",
"0.07074",
"98.58579",
"0.00000",
],
],
"startBinding": {
"elementId": "id170",
"focus": "0.01770",
"gap": 5,
"focus": "0.02000",
"gap": 1,
},
"width": "92.92893",
},
},
},
@@ -392,47 +390,43 @@ History {
"focus": 0,
"gap": 1,
},
"height": "99.58947",
"height": "102.35417",
"points": [
[
0,
0,
],
[
"99.58947",
"99.58947",
"101.77517",
"102.35417",
],
],
"startBinding": null,
"width": "99.58947",
"x": 0,
"y": 0,
},
"inserted": {
"endBinding": {
"elementId": "id171",
"focus": "0.00990",
"gap": 5,
"gap": 1,
},
"height": "0.92929",
"height": "0.98586",
"points": [
[
0,
0,
],
[
"92.92893",
"-0.92929",
"98.58579",
"-0.98586",
],
],
"startBinding": {
"elementId": "id170",
"focus": "0.02970",
"gap": 5,
"gap": 1,
},
"width": "92.92893",
"x": "3.53553",
"y": "0.96033",
"y": "0.99364",
},
},
"id175" => Delta {
@@ -864,7 +858,6 @@ History {
0,
],
],
"width": 0,
},
"inserted": {
"points": [
@@ -873,11 +866,10 @@ History {
0,
],
[
"85.85786",
100,
0,
],
],
"width": "85.85786",
},
},
},
@@ -934,14 +926,12 @@ History {
],
],
"startBinding": null,
"width": 100,
"x": 150,
},
"inserted": {
"endBinding": {
"elementId": "id166",
"focus": -0,
"gap": 5,
"gap": 1,
},
"points": [
[
@@ -956,10 +946,8 @@ History {
"startBinding": {
"elementId": "id165",
"focus": 0,
"gap": 5,
"gap": 1,
},
"width": 0,
"x": "146.46447",
},
},
},
@@ -1253,7 +1241,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "1.71911",
"height": "1.30038",
"id": "id178",
"index": "Zz",
"isDeleted": false,
@@ -1267,8 +1255,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
"92.92893",
"1.71911",
"98.58579",
"1.30038",
],
],
"roughness": 1,
@@ -1291,8 +1279,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"type": "arrow",
"updated": 1,
"version": 11,
"width": "92.92893",
"x": "3.53553",
"width": "98.58579",
"x": "0.70711",
"y": 0,
}
`;
@@ -1625,7 +1613,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "1.71911",
"height": "1.30038",
"id": "id181",
"index": "a0",
"isDeleted": false,
@@ -1639,8 +1627,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
"92.92893",
"1.71911",
"98.58579",
"1.30038",
],
],
"roughness": 1,
@@ -1663,8 +1651,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"type": "arrow",
"updated": 1,
"version": 11,
"width": "92.92893",
"x": "3.53553",
"width": "98.58579",
"x": "0.70711",
"y": 0,
}
`;
@@ -1783,7 +1771,7 @@ History {
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "12.86717",
"height": "11.27227",
"index": "a0",
"isDeleted": false,
"lastCommittedPoint": null,
@@ -1796,8 +1784,8 @@ History {
0,
],
[
"92.92893",
"12.86717",
"98.58579",
"11.27227",
],
],
"roughness": 1,
@@ -1818,8 +1806,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": "92.92893",
"x": "3.53553",
"width": "98.58579",
"x": "0.70711",
"y": 0,
},
"inserted": {
@@ -2333,12 +2321,12 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"endBinding": {
"elementId": "id185",
"focus": -0,
"gap": 5,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "369.21589",
"height": "374.05754",
"id": "id186",
"index": "a2",
"isDeleted": false,
@@ -2352,8 +2340,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
"496.84035",
"-369.21589",
"502.78936",
"-374.05754",
],
],
"roughness": 1,
@@ -2364,7 +2352,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"startBinding": {
"elementId": "id184",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -2372,9 +2360,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"type": "arrow",
"updated": 1,
"version": 10,
"width": "496.84035",
"x": "2.18463",
"y": "-38.80748",
"width": "502.78936",
"x": "-0.83465",
"y": "-36.58211",
}
`;
@@ -2493,7 +2481,7 @@ History {
"endBinding": {
"elementId": "id185",
"focus": -0,
"gap": 5,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@@ -2523,7 +2511,7 @@ History {
"startBinding": {
"elementId": "id184",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -15173,7 +15161,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"endBinding": {
"elementId": "id58",
"focus": -0,
"gap": 5,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@@ -15192,7 +15180,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
0,
],
[
"92.92893",
"98.58579",
0,
],
],
@@ -15204,7 +15192,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"startBinding": {
"elementId": "id56",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -15212,8 +15200,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"type": "arrow",
"updated": 1,
"version": 10,
"width": "92.92893",
"x": "3.53553",
"width": "98.58579",
"x": "0.70711",
"y": 0,
}
`;
@@ -15544,7 +15532,7 @@ History {
"endBinding": {
"elementId": "id58",
"focus": -0,
"gap": 5,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@@ -15574,7 +15562,7 @@ History {
"startBinding": {
"elementId": "id56",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -15871,7 +15859,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"endBinding": {
"elementId": "id52",
"focus": -0,
"gap": 5,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@@ -15890,7 +15878,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
0,
],
[
"92.92893",
"98.58579",
0,
],
],
@@ -15902,7 +15890,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"startBinding": {
"elementId": "id50",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -15910,8 +15898,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"type": "arrow",
"updated": 1,
"version": 10,
"width": "92.92893",
"x": "3.53553",
"width": "98.58579",
"x": "0.70711",
"y": 0,
}
`;
@@ -16164,7 +16152,7 @@ History {
"endBinding": {
"elementId": "id52",
"focus": -0,
"gap": 5,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@@ -16194,7 +16182,7 @@ History {
"startBinding": {
"elementId": "id50",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -16491,7 +16479,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"endBinding": {
"elementId": "id64",
"focus": -0,
"gap": 5,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@@ -16510,7 +16498,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
0,
],
[
"92.92893",
"98.58579",
0,
],
],
@@ -16522,7 +16510,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"startBinding": {
"elementId": "id62",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -16530,8 +16518,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"type": "arrow",
"updated": 1,
"version": 10,
"width": "92.92893",
"x": "3.53553",
"width": "98.58579",
"x": "0.70711",
"y": 0,
}
`;
@@ -16784,7 +16772,7 @@ History {
"endBinding": {
"elementId": "id64",
"focus": -0,
"gap": 5,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@@ -16814,7 +16802,7 @@ History {
"startBinding": {
"elementId": "id62",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -17109,7 +17097,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"endBinding": {
"elementId": "id70",
"focus": -0,
"gap": 5,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@@ -17128,7 +17116,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
0,
],
[
"92.92893",
"98.58579",
0,
],
],
@@ -17140,7 +17128,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"startBinding": {
"elementId": "id68",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -17148,8 +17136,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"type": "arrow",
"updated": 1,
"version": 10,
"width": "92.92893",
"x": "3.53553",
"width": "98.58579",
"x": "0.70711",
"y": 0,
}
`;
@@ -17212,7 +17200,7 @@ History {
"startBinding": {
"elementId": "id68",
"focus": 0,
"gap": 5,
"gap": 1,
},
},
"inserted": {
@@ -17472,7 +17460,7 @@ History {
"endBinding": {
"elementId": "id70",
"focus": -0,
"gap": 5,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@@ -17502,7 +17490,7 @@ History {
"startBinding": {
"elementId": "id68",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -17823,7 +17811,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"endBinding": {
"elementId": "id77",
"focus": -0,
"gap": 5,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@@ -17842,7 +17830,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
0,
],
[
"92.92893",
"98.58579",
0,
],
],
@@ -17854,7 +17842,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"startBinding": {
"elementId": "id75",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -17862,8 +17850,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"type": "arrow",
"updated": 1,
"version": 11,
"width": "92.92893",
"x": "3.53553",
"width": "98.58579",
"x": "0.70711",
"y": 0,
}
`;
@@ -17925,7 +17913,7 @@ History {
"endBinding": {
"elementId": "id77",
"focus": -0,
"gap": 5,
"gap": 1,
},
"points": [
[
@@ -17940,7 +17928,7 @@ History {
"startBinding": {
"elementId": "id75",
"focus": 0,
"gap": 5,
"gap": 1,
},
},
"inserted": {
@@ -18201,7 +18189,7 @@ History {
"endBinding": {
"elementId": "id77",
"focus": -0,
"gap": 5,
"gap": 1,
},
"fillStyle": "solid",
"frameId": null,
@@ -18231,7 +18219,7 @@ History {
"startBinding": {
"elementId": "id75",
"focus": 0,
"gap": 5,
"gap": 1,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",

16
packages/excalidraw/tests/__snapshots__/move.test.tsx.snap
View File

@@ -191,12 +191,12 @@ exports[`move element > rectangles with binding arrow 7`] = `
"endBinding": {
"elementId": "id1",
"focus": "-0.46667",
"gap": 5,
"gap": 10,
},
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "94.40997",
"height": "87.29887",
"id": "id2",
"index": "a2",
"isDeleted": false,
@@ -210,8 +210,8 @@ exports[`move element > rectangles with binding arrow 7`] = `
0,
],
[
"93.92893",
"94.40997",
"86.85786",
"87.29887",
],
],
"roughness": 1,
@@ -223,7 +223,7 @@ exports[`move element > rectangles with binding arrow 7`] = `
"startBinding": {
"elementId": "id0",
"focus": "-0.60000",
"gap": 5,
"gap": 10,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -232,8 +232,8 @@ exports[`move element > rectangles with binding arrow 7`] = `
"updated": 1,
"version": 11,
"versionNonce": 1051383431,
"width": "93.92893",
"x": "103.53553",
"y": "43.53553",
"width": "86.85786",
"x": "107.07107",
"y": "47.07107",
}
`;

4
packages/excalidraw/tests/history.test.tsx
View File

@@ -4779,12 +4779,12 @@ describe("history", () => {
startBinding: expect.objectContaining({
elementId: rect1.id,
focus: 0,
gap: FIXED_BINDING_DISTANCE,
gap: 1,
}),
endBinding: expect.objectContaining({
elementId: rect2.id,
focus: -0,
gap: FIXED_BINDING_DISTANCE,
gap: 1,
}),
isDeleted: true,
}),

2
packages/excalidraw/tests/linearElementEditor.test.tsx
View File

@@ -1266,7 +1266,7 @@ describe("Test Linear Elements", () => {
mouse.downAt(rect.x, rect.y);
mouse.moveTo(200, 0);
mouse.upAt(200, 0);
expect(arrow.width).toBeCloseTo(206.86, 0);
expect(arrow.width).toBeCloseTo(204, 0);
expect(rect.x).toBe(200);
expect(rect.y).toBe(0);
expect(handleBindTextResizeSpy).toHaveBeenCalledWith(

6
packages/excalidraw/tests/move.test.tsx
View File

@@ -128,10 +128,8 @@ describe("move element", () => {
expect(h.state.selectedElementIds[rectB.id]).toBeTruthy();
expect([rectA.x, rectA.y]).toEqual([0, 0]);
expect([rectB.x, rectB.y]).toEqual([201, 2]);
expect([[arrow.x, arrow.y]]).toCloselyEqualPoints([[103.54, 43.53]]);
expect([[arrow.width, arrow.height]]).toCloselyEqualPoints([
[93.93, 94.41],
]);
expect([[arrow.x, arrow.y]]).toCloselyEqualPoints([[107.07, 47.07]]);
expect([[arrow.width, arrow.height]]).toCloselyEqualPoints([[86.86, 87.3]]);
h.elements.forEach((element) => expect(element).toMatchSnapshot());
});

10
packages/excalidraw/tests/rotate.test.tsx
View File

@@ -35,7 +35,7 @@ test("unselected bound arrow updates when rotating its target element", async ()
expect(arrow.endBinding?.elementId).toEqual(rectangle.id);
expect(arrow.x).toBeCloseTo(-80);
expect(arrow.y).toBeCloseTo(50);
expect(arrow.width).toBeCloseTo(119.58, 1);
expect(arrow.width).toBeCloseTo(116.7, 1);
expect(arrow.height).toBeCloseTo(0);
});
@@ -72,13 +72,13 @@ test("unselected bound arrows update when rotating their target elements", async
expect(ellipseArrow.x).toEqual(0);
expect(ellipseArrow.y).toEqual(0);
expect(ellipseArrow.points[0]).toEqual([0, 0]);
expect(ellipseArrow.points[1][0]).toBeCloseTo(54.36, 1);
expect(ellipseArrow.points[1][1]).toBeCloseTo(139.61, 1);
expect(ellipseArrow.points[1][0]).toBeCloseTo(48.98, 1);
expect(ellipseArrow.points[1][1]).toBeCloseTo(125.79, 1);
expect(textArrow.endBinding?.elementId).toEqual(text.id);
expect(textArrow.x).toEqual(360);
expect(textArrow.y).toEqual(300);
expect(textArrow.points[0]).toEqual([0, 0]);
expect(textArrow.points[1][0]).toBeCloseTo(-100.12, 0);
expect(textArrow.points[1][1]).toBeCloseTo(-123.63, 0);
expect(textArrow.points[1][0]).toBeCloseTo(-94, 0);
expect(textArrow.points[1][1]).toBeCloseTo(-116.1, 0);
});