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

[skip ci] First iteration of bringing over previous changes

Browse Source
This commit is contained in:
Mark Tolmacs
2025-03-24 19:22:45 +01:00
parent 4ee99de2fb
commit fbde68c849
19 changed files with 599 additions and 596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { pointFrom } from "@excalidraw/math";
import { type GlobalPoint, pointFrom } from "@excalidraw/math";
import {
maybeBindLinearElement,
@@ -91,10 +91,26 @@ export const actionFinalize = register({
multiPointElement.type !== "freedraw" &&
appState.lastPointerDownWith !== "touch"
) {
const { points, lastCommittedPoint } = multiPointElement;
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),
);
if (
!lastCommittedPoint ||
points[points.length - 1] !== lastCommittedPoint
!hoveredElementForBinding &&
(!lastCommittedPoint ||
points[points.length - 1] !== lastCommittedPoint)
) {
mutateElement(multiPointElement, {
points: multiPointElement.points.slice(0, -1),

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

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

4
packages/excalidraw/change.ts
View File

@@ -1508,9 +1508,7 @@ export class ElementsChange implements Change<SceneElementsMap> {
) {
for (const element of changed.values()) {
if (!element.isDeleted && isBindableElement(element)) {
updateBoundElements(element, elements, {
changedElements: changed,
});
updateBoundElements(element, elements);
}
}
}

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

@@ -16,6 +16,7 @@ import {
vectorSubtract,
vectorDot,
vectorNormalize,
lineSegment,
} from "@excalidraw/math";
import { isPointInShape } from "@excalidraw/utils/collision";
import { getSelectionBoxShape } from "@excalidraw/utils/shape";
@@ -302,7 +303,7 @@ import {
import { isNonDeletedElement } from "@excalidraw/element";
import type { LocalPoint, Radians } from "@excalidraw/math";
import type { GlobalPoint, LocalPoint, Radians } from "@excalidraw/math";
import type {
ExcalidrawBindableElement,
@@ -5997,9 +5998,19 @@ class App extends React.Component<AppProps, AppState> {
{
points: [
...points.slice(0, -1),
pointFrom<LocalPoint>(
lastCommittedX + dxFromLastCommitted,
lastCommittedY + dyFromLastCommitted,
toLocalPoint(
getOutlineAvoidingPoint(
multiElement,
pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
multiElement.points.length - 1,
this.scene,
this.state.zoom,
pointFrom<GlobalPoint>(
multiElement.x + lastCommittedX + dxFromLastCommitted,
multiElement.y + lastCommittedY + dyFromLastCommitted,
),
),
multiElement,
),
],
},
@@ -7751,18 +7762,34 @@ 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 (
multiElement.points.length > 1 &&
lastCommittedPoint &&
pointDistance(
pointFrom(
pointerDownState.origin.x - rx,
pointerDownState.origin.y - ry,
),
lastCommittedPoint,
) < LINE_CONFIRM_THRESHOLD
hoveredElementForBinding ||
(multiElement.points.length > 1 &&
lastCommittedPoint &&
pointDistance(
pointFrom(
pointerDownState.origin.x - rx,
pointerDownState.origin.y - ry,
),
lastCommittedPoint,
) < LINE_CONFIRM_THRESHOLD)
) {
this.actionManager.executeAction(actionFinalize);
return;
@@ -7806,53 +7833,92 @@ class App extends React.Component<AppProps, AppState> {
? [currentItemStartArrowhead, currentItemEndArrowhead]
: [null, 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,
});
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,
});
}
this.setState((prevState) => {
const nextSelectedElementIds = {
...prevState.selectedElementIds,
@@ -8167,12 +8233,6 @@ 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
@@ -8273,7 +8333,6 @@ class App extends React.Component<AppProps, AppState> {
);
},
linearElementEditor,
this.scene,
);
if (newLinearElementEditor) {
pointerDownState.lastCoords.x = pointerCoords.x;
@@ -8660,6 +8719,11 @@ 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;
@@ -8676,7 +8740,23 @@ class App extends React.Component<AppProps, AppState> {
mutateElement(
newElement,
{
points: [...points, pointFrom<LocalPoint>(dx, dy)],
points: [
...points,
toLocalPoint(
getOutlineAvoidingPoint(
newElement,
pointFrom<GlobalPoint>(pointerCoords.x, pointerCoords.y),
newElement.points.length - 1,
this.scene,
this.state.zoom,
pointFrom<GlobalPoint>(
newElement.x + dx,
newElement.y + dy,
),
),
newElement,
),
],
},
false,
);
@@ -8687,7 +8767,23 @@ class App extends React.Component<AppProps, AppState> {
mutateElement(
newElement,
{
points: [...points.slice(0, -1), pointFrom<LocalPoint>(dx, dy)],
points: [
...points.slice(0, -1),
toLocalPoint(
getOutlineAvoidingPoint(
newElement,
pointFrom<GlobalPoint>(pointerCoords.x, pointerCoords.y),
newElement.points.length - 1,
this.scene,
this.state.zoom,
pointFrom<GlobalPoint>(
newElement.x + dx,
newElement.y + dy,
),
),
newElement,
),
],
},
false,
{ isDragging: true },
@@ -10725,12 +10821,6 @@ class App extends React.Component<AppProps, AppState> {
updateBoundElements(
croppingElement,
this.scene.getNonDeletedElementsMap(),
{
newSize: {
width: croppingElement.width,
height: croppingElement.height,
},
},
);
this.setState({

4
packages/excalidraw/components/Stats/MultiDimension.tsx
View File

@@ -87,9 +87,7 @@ const resizeElementInGroup = (
);
if (boundTextElement) {
const newFontSize = boundTextElement.fontSize * scale;
updateBoundElements(latestElement, elementsMap, {
newSize: { width: updates.width, height: updates.height },
});
updateBoundElements(latestElement, elementsMap);
const latestBoundTextElement = elementsMap.get(boundTextElement.id);
if (latestBoundTextElement && isTextElement(latestBoundTextElement)) {
mutateElement(

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": 11.562288374879595,
"gap": 5,
},
"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": 1,
"gap": 5,
},
"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": 3.8343264684446097,
"gap": 5,
},
"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": 4.545343408287929,
"gap": 5,
},
"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": 14,
"gap": 5,
},
"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": 1,
"gap": 5,
},
"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": 1,
"gap": 5,
},
"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": 1,
"gap": 5,
},
"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": 1,
"gap": 5,
},
"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": 1,
"gap": 5,
},
"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.299874999999986,
"gap": 5,
},
"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": 1,
"gap": 5,
},
"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": 14,
"gap": 5,
},
"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": 1,
"gap": 5,
},
"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: 1,
gap: FIXED_BINDING_DISTANCE,
},
endBinding: {
elementId: ellipse.id,
@@ -518,7 +518,7 @@ describe("Test Transform", () => {
startBinding: {
elementId: text2.id,
focus: 0,
gap: 1,
gap: FIXED_BINDING_DISTANCE,
},
endBinding: {
elementId: text3.id,
@@ -781,7 +781,7 @@ describe("Test Transform", () => {
expect((arrow as ExcalidrawArrowElement).endBinding).toStrictEqual({
elementId: "rect-1",
focus: -0,
gap: 14,
gap: FIXED_BINDING_DISTANCE,
});
expect(rect.boundElements).toStrictEqual([
{

256
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": "102.35417",
"height": "99.58947",
"id": "id172",
"index": "a2",
"isDeleted": false,
@@ -212,8 +212,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
"101.77517",
"102.35417",
"99.58947",
"99.58947",
],
],
"roughness": 1,
@@ -228,8 +228,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"type": "arrow",
"updated": 1,
"version": 40,
"width": "101.77517",
"x": "0.70711",
"width": "99.58947",
"x": 0,
"y": 0,
}
`;
@@ -295,47 +295,47 @@ History {
"deleted": {
"endBinding": {
"elementId": "id171",
"focus": "0.00990",
"gap": 1,
"focus": "0.01099",
"gap": 5,
},
"height": "0.98586",
"height": "0.96335",
"points": [
[
0,
0,
],
[
"98.58579",
"-0.98586",
"92.92893",
"-0.96335",
],
],
"startBinding": {
"elementId": "id170",
"focus": "0.02970",
"gap": 1,
"focus": "0.03005",
"gap": 5,
},
},
"inserted": {
"endBinding": {
"elementId": "id171",
"focus": "-0.02000",
"gap": 1,
"focus": "-0.02041",
"gap": 5,
},
"height": "0.00000",
"height": "0.03665",
"points": [
[
0,
0,
],
[
"98.58579",
"0.00000",
"92.92893",
"0.03665",
],
],
"startBinding": {
"elementId": "id170",
"focus": "0.02000",
"gap": 1,
"focus": "0.01884",
"gap": 5,
},
},
},
@@ -390,43 +390,47 @@ History {
"focus": 0,
"gap": 1,
},
"height": "102.35417",
"height": "99.58947",
"points": [
[
0,
0,
],
[
"101.77517",
"102.35417",
"99.58947",
"99.58947",
],
],
"startBinding": null,
"width": "99.58947",
"x": 0,
"y": 0,
},
"inserted": {
"endBinding": {
"elementId": "id171",
"focus": "0.00990",
"gap": 1,
"focus": "0.01099",
"gap": 5,
},
"height": "0.98586",
"height": "0.96335",
"points": [
[
0,
0,
],
[
"98.58579",
"-0.98586",
"92.92893",
"-0.96335",
],
],
"startBinding": {
"elementId": "id170",
"focus": "0.02970",
"gap": 1,
"focus": "0.03005",
"gap": 5,
},
"y": "0.99364",
"width": "92.92893",
"x": "3.53553",
"y": "0.96335",
},
},
"id175" => Delta {
@@ -566,7 +570,7 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
@@ -580,7 +584,7 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": 100,
"width": "96.46447",
"x": 0,
"y": 0,
},
@@ -804,7 +808,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
100,
"96.46447",
0,
],
],
@@ -820,8 +824,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"type": "arrow",
"updated": 1,
"version": 30,
"width": 0,
"x": "149.29289",
"width": "96.46447",
"x": 150,
"y": 0,
}
`;
@@ -854,7 +858,7 @@ History {
0,
],
[
0,
"0.00000",
0,
],
],
@@ -866,7 +870,7 @@ History {
0,
],
[
100,
"92.92893",
0,
],
],
@@ -921,17 +925,19 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
"startBinding": null,
"width": "96.46447",
"x": 150,
},
"inserted": {
"endBinding": {
"elementId": "id166",
"focus": -0,
"gap": 1,
"gap": 5,
},
"points": [
[
@@ -939,15 +945,17 @@ History {
0,
],
[
0,
"0.00000",
0,
],
],
"startBinding": {
"elementId": "id165",
"focus": 0,
"gap": 1,
"gap": 5,
},
"width": "0.00000",
"x": "146.46447",
},
},
},
@@ -1074,7 +1082,7 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
@@ -1088,7 +1096,7 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": 100,
"width": "96.46447",
"x": 0,
"y": 0,
},
@@ -1241,7 +1249,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "1.30038",
"height": "1.71911",
"id": "id178",
"index": "Zz",
"isDeleted": false,
@@ -1255,8 +1263,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
"98.58579",
"1.30038",
"92.92893",
"1.71911",
],
],
"roughness": 1,
@@ -1279,8 +1287,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"type": "arrow",
"updated": 1,
"version": 11,
"width": "98.58579",
"x": "0.70711",
"width": "92.92893",
"x": "3.53553",
"y": 0,
}
`;
@@ -1613,7 +1621,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "1.30038",
"height": "1.71911",
"id": "id181",
"index": "a0",
"isDeleted": false,
@@ -1627,8 +1635,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
"98.58579",
"1.30038",
"92.92893",
"1.71911",
],
],
"roughness": 1,
@@ -1651,8 +1659,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"type": "arrow",
"updated": 1,
"version": 11,
"width": "98.58579",
"x": "0.70711",
"width": "92.92893",
"x": "3.53553",
"y": 0,
}
`;
@@ -1771,7 +1779,7 @@ History {
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "11.27227",
"height": "12.86717",
"index": "a0",
"isDeleted": false,
"lastCommittedPoint": null,
@@ -1784,8 +1792,8 @@ History {
0,
],
[
"98.58579",
"11.27227",
"92.92893",
"12.86717",
],
],
"roughness": 1,
@@ -1806,8 +1814,8 @@ History {
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": "98.58579",
"x": "0.70711",
"width": "92.92893",
"x": "3.53553",
"y": 0,
},
"inserted": {
@@ -2321,12 +2329,12 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"endBinding": {
"elementId": "id185",
"focus": -0,
"gap": 1,
"gap": 5,
},
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "374.05754",
"height": "369.21589",
"id": "id186",
"index": "a2",
"isDeleted": false,
@@ -2340,8 +2348,8 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
0,
],
[
"502.78936",
"-374.05754",
"496.84035",
"-369.21589",
],
],
"roughness": 1,
@@ -2352,7 +2360,7 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"startBinding": {
"elementId": "id184",
"focus": 0,
"gap": 1,
"gap": 5,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -2360,9 +2368,9 @@ exports[`history > multiplayer undo/redo > conflicts in arrows and their bindabl
"type": "arrow",
"updated": 1,
"version": 10,
"width": "502.78936",
"x": "-0.83465",
"y": "-36.58211",
"width": "496.84035",
"x": "2.18463",
"y": "-38.80748",
}
`;
@@ -2481,7 +2489,7 @@ History {
"endBinding": {
"elementId": "id185",
"focus": -0,
"gap": 1,
"gap": 5,
},
"fillStyle": "solid",
"frameId": null,
@@ -2499,7 +2507,7 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
@@ -2511,13 +2519,13 @@ History {
"startBinding": {
"elementId": "id184",
"focus": 0,
"gap": 1,
"gap": 5,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": 100,
"width": "96.46447",
"x": 0,
"y": 0,
},
@@ -15161,7 +15169,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"endBinding": {
"elementId": "id58",
"focus": -0,
"gap": 1,
"gap": 5,
},
"fillStyle": "solid",
"frameId": null,
@@ -15180,7 +15188,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
0,
],
[
"98.58579",
"92.92893",
0,
],
],
@@ -15192,7 +15200,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"startBinding": {
"elementId": "id56",
"focus": 0,
"gap": 1,
"gap": 5,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -15200,8 +15208,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"type": "arrow",
"updated": 1,
"version": 10,
"width": "98.58579",
"x": "0.70711",
"width": "92.92893",
"x": "3.53553",
"y": 0,
}
`;
@@ -15242,7 +15250,7 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
@@ -15255,7 +15263,7 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
@@ -15532,7 +15540,7 @@ History {
"endBinding": {
"elementId": "id58",
"focus": -0,
"gap": 1,
"gap": 5,
},
"fillStyle": "solid",
"frameId": null,
@@ -15550,7 +15558,7 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
@@ -15562,13 +15570,13 @@ History {
"startBinding": {
"elementId": "id56",
"focus": 0,
"gap": 1,
"gap": 5,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": 100,
"width": "96.46447",
"x": 0,
"y": 0,
},
@@ -15859,7 +15867,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"endBinding": {
"elementId": "id52",
"focus": -0,
"gap": 1,
"gap": 5,
},
"fillStyle": "solid",
"frameId": null,
@@ -15878,7 +15886,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
0,
],
[
"98.58579",
"92.92893",
0,
],
],
@@ -15890,7 +15898,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"startBinding": {
"elementId": "id50",
"focus": 0,
"gap": 1,
"gap": 5,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -15898,8 +15906,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"type": "arrow",
"updated": 1,
"version": 10,
"width": "98.58579",
"x": "0.70711",
"width": "92.92893",
"x": "3.53553",
"y": 0,
}
`;
@@ -16152,7 +16160,7 @@ History {
"endBinding": {
"elementId": "id52",
"focus": -0,
"gap": 1,
"gap": 5,
},
"fillStyle": "solid",
"frameId": null,
@@ -16170,7 +16178,7 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
@@ -16182,13 +16190,13 @@ History {
"startBinding": {
"elementId": "id50",
"focus": 0,
"gap": 1,
"gap": 5,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": 100,
"width": "96.46447",
"x": 0,
"y": 0,
},
@@ -16479,7 +16487,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"endBinding": {
"elementId": "id64",
"focus": -0,
"gap": 1,
"gap": 5,
},
"fillStyle": "solid",
"frameId": null,
@@ -16498,7 +16506,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
0,
],
[
"98.58579",
"92.92893",
0,
],
],
@@ -16510,7 +16518,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"startBinding": {
"elementId": "id62",
"focus": 0,
"gap": 1,
"gap": 5,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -16518,8 +16526,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"type": "arrow",
"updated": 1,
"version": 10,
"width": "98.58579",
"x": "0.70711",
"width": "92.92893",
"x": "3.53553",
"y": 0,
}
`;
@@ -16772,7 +16780,7 @@ History {
"endBinding": {
"elementId": "id64",
"focus": -0,
"gap": 1,
"gap": 5,
},
"fillStyle": "solid",
"frameId": null,
@@ -16790,7 +16798,7 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
@@ -16802,13 +16810,13 @@ History {
"startBinding": {
"elementId": "id62",
"focus": 0,
"gap": 1,
"gap": 5,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": 100,
"width": "96.46447",
"x": 0,
"y": 0,
},
@@ -17097,7 +17105,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"endBinding": {
"elementId": "id70",
"focus": -0,
"gap": 1,
"gap": 5,
},
"fillStyle": "solid",
"frameId": null,
@@ -17116,7 +17124,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
0,
],
[
"98.58579",
"92.92893",
0,
],
],
@@ -17128,7 +17136,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"startBinding": {
"elementId": "id68",
"focus": 0,
"gap": 1,
"gap": 5,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -17136,8 +17144,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"type": "arrow",
"updated": 1,
"version": 10,
"width": "98.58579",
"x": "0.70711",
"width": "92.92893",
"x": "3.53553",
"y": 0,
}
`;
@@ -17193,14 +17201,14 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
"startBinding": {
"elementId": "id68",
"focus": 0,
"gap": 1,
"gap": 5,
},
},
"inserted": {
@@ -17210,7 +17218,7 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
@@ -17460,7 +17468,7 @@ History {
"endBinding": {
"elementId": "id70",
"focus": -0,
"gap": 1,
"gap": 5,
},
"fillStyle": "solid",
"frameId": null,
@@ -17478,7 +17486,7 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
@@ -17490,13 +17498,13 @@ History {
"startBinding": {
"elementId": "id68",
"focus": 0,
"gap": 1,
"gap": 5,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": 100,
"width": "96.46447",
"x": 0,
"y": 0,
},
@@ -17811,7 +17819,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"endBinding": {
"elementId": "id77",
"focus": -0,
"gap": 1,
"gap": 5,
},
"fillStyle": "solid",
"frameId": null,
@@ -17830,7 +17838,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
0,
],
[
"98.58579",
"92.92893",
0,
],
],
@@ -17842,7 +17850,7 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"startBinding": {
"elementId": "id75",
"focus": 0,
"gap": 1,
"gap": 5,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
@@ -17850,8 +17858,8 @@ exports[`history > singleplayer undo/redo > should support bidirectional binding
"type": "arrow",
"updated": 1,
"version": 11,
"width": "98.58579",
"x": "0.70711",
"width": "92.92893",
"x": "3.53553",
"y": 0,
}
`;
@@ -17913,7 +17921,7 @@ History {
"endBinding": {
"elementId": "id77",
"focus": -0,
"gap": 1,
"gap": 5,
},
"points": [
[
@@ -17921,14 +17929,14 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
"startBinding": {
"elementId": "id75",
"focus": 0,
"gap": 1,
"gap": 5,
},
},
"inserted": {
@@ -17939,7 +17947,7 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
@@ -18189,7 +18197,7 @@ History {
"endBinding": {
"elementId": "id77",
"focus": -0,
"gap": 1,
"gap": 5,
},
"fillStyle": "solid",
"frameId": null,
@@ -18207,7 +18215,7 @@ History {
0,
],
[
100,
"96.46447",
0,
],
],
@@ -18219,13 +18227,13 @@ History {
"startBinding": {
"elementId": "id75",
"focus": 0,
"gap": 1,
"gap": 5,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"width": 100,
"width": "96.46447",
"x": 0,
"y": 0,
},

11
packages/excalidraw/tests/__snapshots__/linearElementEditor.test.tsx.snap
View File

@@ -44,14 +44,3 @@ exports[`Test Linear Elements > Test bound text element > should resize and posi
"Online whiteboard
collaboration made easy"
`;
exports[`Test Linear Elements > Test bound text element > should wrap the bound text when arrow bound container moves 1`] = `
"Online whiteboard
collaboration made easy"
`;
exports[`Test Linear Elements > Test bound text element > should wrap the bound text when arrow bound container moves 2`] = `
"Online whiteboard
collaboration made
easy"
`;

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

@@ -101,139 +101,3 @@ exports[`move element > rectangle 5`] = `
"y": 40,
}
`;
exports[`move element > rectangles with binding arrow 5`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id2",
"type": "arrow",
},
],
"customData": undefined,
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 100,
"id": "id0",
"index": "a0",
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": {
"type": 3,
},
"seed": 1278240551,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "rectangle",
"updated": 1,
"version": 4,
"versionNonce": 1723083209,
"width": 100,
"x": 0,
"y": 0,
}
`;
exports[`move element > rectangles with binding arrow 6`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id2",
"type": "arrow",
},
],
"customData": undefined,
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 300,
"id": "id1",
"index": "a1",
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": {
"type": 3,
},
"seed": 1150084233,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "rectangle",
"updated": 1,
"version": 7,
"versionNonce": 745419401,
"width": 300,
"x": 201,
"y": 2,
}
`;
exports[`move element > rectangles with binding arrow 7`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": null,
"customData": undefined,
"elbowed": false,
"endArrowhead": "arrow",
"endBinding": {
"elementId": "id1",
"focus": "-0.46667",
"gap": 10,
},
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": "87.29887",
"id": "id2",
"index": "a2",
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
"points": [
[
0,
0,
],
[
"86.85786",
"87.29887",
],
],
"roughness": 1,
"roundness": {
"type": 2,
},
"seed": 1604849351,
"startArrowhead": null,
"startBinding": {
"elementId": "id0",
"focus": "-0.60000",
"gap": 10,
},
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 11,
"versionNonce": 1051383431,
"width": "86.85786",
"x": "107.07107",
"y": "47.07107",
}
`;

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

@@ -52,6 +52,8 @@ import * as StaticScene from "../renderer/staticScene";
import { Snapshot, CaptureUpdateAction } from "../store";
import { AppStateChange, ElementsChange } from "../change";
import { FIXED_BINDING_DISTANCE } from "../element/binding.js";
import { API } from "./helpers/api";
import { Keyboard, Pointer, UI } from "./helpers/ui";
import {
@@ -4779,12 +4781,12 @@ describe("history", () => {
startBinding: expect.objectContaining({
elementId: rect1.id,
focus: 0,
gap: 1,
gap: FIXED_BINDING_DISTANCE,
}),
endBinding: expect.objectContaining({
elementId: rect2.id,
focus: -0,
gap: 1,
gap: FIXED_BINDING_DISTANCE,
}),
isDeleted: true,
}),

2
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(116.7, 1);
expect(arrow.width).toBeCloseTo(119.6, 1);
expect(arrow.height).toBeCloseTo(0);
});