sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: regenerate ids by default when using transform api and also update bindings by 0.5px to avoid possible overlapping (#7195)

Browse Source 
* feat: regenerate ids by default when using transform api and also update bindings by 0.5px to avoid possible overlapping

* type

* increase limit as some past PR(s) increased the bundle size

* review fixes

* update changelog
This commit is contained in:
Aakansha Doshi 2023-10-27 00:43:48 +05:30 committed by GitHub
parent d1f8eec174
commit dcf4592e79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 275 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

276
src/data/__snapshots__/transform.test.ts.snap
View File

@ -6,11 +6,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"backgroundColor": "#d8f5a2", "backgroundColor": "#d8f5a2",
"boundElements": [ "boundElements": [
{ {
"id": "id40", "id": "id41",
"type": "arrow", "type": "arrow",
}, },
{ {
"id": "id41", "id": "id42",
"type": "arrow", "type": "arrow",
}, },
], ],
@ -45,7 +45,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id41", "id": "id42",
"type": "arrow", "type": "arrow",
}, },
], ],
@ -97,12 +97,12 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"opacity": 100, "opacity": 100,
"points": [ "points": [
[ [
0, 0.5,
0, 0.5,
], ],
[ [
395, 394.5,
35, 34.5,
], ],
], ],
"roughness": 1, "roughness": 1,
@ -110,7 +110,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"seed": Any<Number>, "seed": Any<Number>,
"startArrowhead": null, "startArrowhead": null,
"startBinding": { "startBinding": {
"elementId": "id42", "elementId": "id43",
"focus": -0.08139534883720931, "focus": -0.08139534883720931,
"gap": 1, "gap": 1,
}, },
@ -150,11 +150,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"opacity": 100, "opacity": 100,
"points": [ "points": [
[ [
0, 0.5,
0, 0,
], ],
[ [
400, 399.5,
0, 0,
], ],
], ],
@ -186,7 +186,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id40", "id": "id41",
"type": "arrow", "type": "arrow",
}, },
], ],
@ -222,7 +222,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"baseline": 0, "baseline": 0,
"boundElements": [ "boundElements": [
{ {
"id": "id43", "id": "id44",
"type": "arrow", "type": "arrow",
}, },
], ],
@ -266,7 +266,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"baseline": 0, "baseline": 0,
"boundElements": [ "boundElements": [
{ {
"id": "id43", "id": "id44",
"type": "arrow", "type": "arrow",
}, },
], ],
@ -309,7 +309,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id44", "id": "id45",
"type": "text", "type": "text",
}, },
], ],
@ -317,7 +317,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"endBinding": { "endBinding": {
"elementId": "text-2", "elementId": "text-2",
"focus": 0, "focus": 0,
"gap": 5, "gap": 205,
}, },
"fillStyle": "solid", "fillStyle": "solid",
"frameId": null, "frameId": null,
@ -331,11 +331,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"opacity": 100, "opacity": 100,
"points": [ "points": [
[ [
0, 0.5,
0, 0,
], ],
[ [
300, 99.5,
0, 0,
], ],
], ],
@ -355,7 +355,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"updated": 1, "updated": 1,
"version": 3, "version": 3,
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"width": 300, "width": 100,
"x": 255, "x": 255,
"y": 239, "y": 239,
} }
@ -367,7 +367,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id43", "containerId": "id44",
"fillStyle": "solid", "fillStyle": "solid",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -395,7 +395,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"verticalAlign": "middle", "verticalAlign": "middle",
"width": 130, "width": 130,
"x": 340, "x": 240,
"y": 226.5, "y": 226.5,
} }
`; `;
@ -406,13 +406,13 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id33", "id": "id34",
"type": "text", "type": "text",
}, },
], ],
"endArrowhead": "arrow", "endArrowhead": "arrow",
"endBinding": { "endBinding": {
"elementId": "id35", "elementId": "id36",
"focus": 0, "focus": 0,
"gap": 1, "gap": 1,
}, },
@ -428,11 +428,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"opacity": 100, "opacity": 100,
"points": [ "points": [
[ [
0, 0.5,
0, 0,
], ],
[ [
300, 99.5,
0, 0,
], ],
], ],
@ -441,7 +441,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"seed": Any<Number>, "seed": Any<Number>,
"startArrowhead": null, "startArrowhead": null,
"startBinding": { "startBinding": {
"elementId": "id34", "elementId": "id35",
"focus": 0, "focus": 0,
"gap": 1, "gap": 1,
}, },
@ -452,7 +452,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"updated": 1, "updated": 1,
"version": 3, "version": 3,
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"width": 300, "width": 100,
"x": 255, "x": 255,
"y": 239, "y": 239,
} }
@ -464,7 +464,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id32", "containerId": "id33",
"fillStyle": "solid", "fillStyle": "solid",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -492,7 +492,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"verticalAlign": "middle", "verticalAlign": "middle",
"width": 130, "width": 130,
"x": 340, "x": 240,
"y": 226.5, "y": 226.5,
} }
`; `;
@ -503,7 +503,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id32", "id": "id33",
"type": "arrow", "type": "arrow",
}, },
], ],
@ -538,7 +538,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id32", "id": "id33",
"type": "arrow", "type": "arrow",
}, },
], ],
@ -562,7 +562,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
"version": 2, "version": 2,
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"width": 100, "width": 100,
"x": 555, "x": 355,
"y": 189, "y": 189,
} }
`; `;
@ -573,13 +573,13 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id37", "id": "id38",
"type": "text", "type": "text",
}, },
], ],
"endArrowhead": "arrow", "endArrowhead": "arrow",
"endBinding": { "endBinding": {
"elementId": "id39", "elementId": "id40",
"focus": 0, "focus": 0,
"gap": 1, "gap": 1,
}, },
@ -595,11 +595,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"opacity": 100, "opacity": 100,
"points": [ "points": [
[ [
0, 0.5,
0, 0,
], ],
[ [
300, 99.5,
0, 0,
], ],
], ],
@ -608,7 +608,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"seed": Any<Number>, "seed": Any<Number>,
"startArrowhead": null, "startArrowhead": null,
"startBinding": { "startBinding": {
"elementId": "id38", "elementId": "id39",
"focus": 0, "focus": 0,
"gap": 1, "gap": 1,
}, },
@ -619,7 +619,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"updated": 1, "updated": 1,
"version": 3, "version": 3,
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"width": 300, "width": 100,
"x": 255, "x": 255,
"y": 239, "y": 239,
} }
@ -631,7 +631,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id36", "containerId": "id37",
"fillStyle": "solid", "fillStyle": "solid",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -659,7 +659,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"verticalAlign": "middle", "verticalAlign": "middle",
"width": 130, "width": 130,
"x": 340, "x": 240,
"y": 226.5, "y": 226.5,
} }
`; `;
@ -671,7 +671,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"baseline": 0, "baseline": 0,
"boundElements": [ "boundElements": [
{ {
"id": "id36", "id": "id37",
"type": "arrow", "type": "arrow",
}, },
], ],
@ -715,7 +715,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"baseline": 0, "baseline": 0,
"boundElements": [ "boundElements": [
{ {
"id": "id36", "id": "id37",
"type": "arrow", "type": "arrow",
}, },
], ],
@ -747,7 +747,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"verticalAlign": "top", "verticalAlign": "top",
"width": 100, "width": 100,
"x": 555, "x": 355,
"y": 226.5, "y": 226.5,
} }
`; `;
@ -801,11 +801,11 @@ exports[`Test Transform > should transform linear elements 1`] = `
"opacity": 100, "opacity": 100,
"points": [ "points": [
[ [
0, 0.5,
0, 0,
], ],
[ [
300, 99.5,
0, 0,
], ],
], ],
@ -821,7 +821,7 @@ exports[`Test Transform > should transform linear elements 1`] = `
"updated": 1, "updated": 1,
"version": 1, "version": 1,
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"width": 300, "width": 100,
"x": 100, "x": 100,
"y": 20, "y": 20,
} }
@ -846,11 +846,11 @@ exports[`Test Transform > should transform linear elements 2`] = `
"opacity": 100, "opacity": 100,
"points": [ "points": [
[ [
0, 0.5,
0, 0,
], ],
[ [
300, 99.5,
0, 0,
], ],
], ],
@ -866,7 +866,7 @@ exports[`Test Transform > should transform linear elements 2`] = `
"updated": 1, "updated": 1,
"version": 1, "version": 1,
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"width": 300, "width": 100,
"x": 450, "x": 450,
"y": 20, "y": 20,
} }
@ -895,7 +895,7 @@ exports[`Test Transform > should transform linear elements 3`] = `
0, 0,
], ],
[ [
300, 100,
0, 0,
], ],
], ],
@ -911,7 +911,7 @@ exports[`Test Transform > should transform linear elements 3`] = `
"updated": 1, "updated": 1,
"version": 1, "version": 1,
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"width": 300, "width": 100,
"x": 100, "x": 100,
"y": 60, "y": 60,
} }
@ -940,7 +940,7 @@ exports[`Test Transform > should transform linear elements 4`] = `
0, 0,
], ],
[ [
300, 100,
0, 0,
], ],
], ],
@ -956,7 +956,7 @@ exports[`Test Transform > should transform linear elements 4`] = `
"updated": 1, "updated": 1,
"version": 1, "version": 1,
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"width": 300, "width": 100,
"x": 450, "x": 450,
"y": 60, "y": 60,
} }
@ -1221,56 +1221,6 @@ exports[`Test Transform > should transform text element 2`] = `
`; `;
exports[`Test Transform > should transform to labelled arrows when label provided for arrows 1`] = ` exports[`Test Transform > should transform to labelled arrows when label provided for arrows 1`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id28",
"type": "text",
},
],
"endArrowhead": "arrow",
"endBinding": null,
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 0,
"id": Any<String>,
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
"points": [
[
0,
0,
],
[
300,
0,
],
],
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"startArrowhead": null,
"startBinding": null,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 1,
"versionNonce": Any<Number>,
"width": 300,
"x": 100,
"y": 100,
}
`;
exports[`Test Transform > should transform to labelled arrows when label provided for arrows 2`] = `
{ {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
@ -1294,11 +1244,11 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"opacity": 100, "opacity": 100,
"points": [ "points": [
[ [
0, 0.5,
0, 0,
], ],
[ [
300, 99.5,
0, 0,
], ],
], ],
@ -1314,13 +1264,13 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"updated": 1, "updated": 1,
"version": 1, "version": 1,
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"width": 300, "width": 100,
"x": 100, "x": 100,
"y": 200, "y": 100,
} }
`; `;
exports[`Test Transform > should transform to labelled arrows when label provided for arrows 3`] = ` exports[`Test Transform > should transform to labelled arrows when label provided for arrows 2`] = `
{ {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
@ -1335,7 +1285,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"fillStyle": "solid", "fillStyle": "solid",
"frameId": null, "frameId": null,
"groupIds": [], "groupIds": [],
"height": 130, "height": 0,
"id": Any<String>, "id": Any<String>,
"isDeleted": false, "isDeleted": false,
"lastCommittedPoint": null, "lastCommittedPoint": null,
@ -1344,11 +1294,11 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"opacity": 100, "opacity": 100,
"points": [ "points": [
[ [
0, 0.5,
0, 0,
], ],
[ [
300, 99.5,
0, 0,
], ],
], ],
@ -1357,20 +1307,20 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"seed": Any<Number>, "seed": Any<Number>,
"startArrowhead": null, "startArrowhead": null,
"startBinding": null, "startBinding": null,
"strokeColor": "#1098ad", "strokeColor": "#1e1e1e",
"strokeStyle": "solid", "strokeStyle": "solid",
"strokeWidth": 2, "strokeWidth": 2,
"type": "arrow", "type": "arrow",
"updated": 1, "updated": 1,
"version": 2, "version": 1,
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"width": 300, "width": 100,
"x": 100, "x": 100,
"y": 300, "y": 200,
} }
`; `;
exports[`Test Transform > should transform to labelled arrows when label provided for arrows 4`] = ` exports[`Test Transform > should transform to labelled arrows when label provided for arrows 3`] = `
{ {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
@ -1394,11 +1344,11 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"opacity": 100, "opacity": 100,
"points": [ "points": [
[ [
0, 0.5,
0, 0,
], ],
[ [
300, 99.5,
0, 0,
], ],
], ],
@ -1414,7 +1364,57 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"updated": 1, "updated": 1,
"version": 2, "version": 2,
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"width": 300, "width": 100,
"x": 100,
"y": 300,
}
`;
exports[`Test Transform > should transform to labelled arrows when label provided for arrows 4`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id32",
"type": "text",
},
],
"endArrowhead": "arrow",
"endBinding": null,
"fillStyle": "solid",
"frameId": null,
"groupIds": [],
"height": 130,
"id": Any<String>,
"isDeleted": false,
"lastCommittedPoint": null,
"link": null,
"locked": false,
"opacity": 100,
"points": [
[
0.5,
0,
],
[
99.5,
0,
],
],
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"startArrowhead": null,
"startBinding": null,
"strokeColor": "#1098ad",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "arrow",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"width": 100,
"x": 100, "x": 100,
"y": 400, "y": 400,
} }
@ -1426,7 +1426,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id24", "containerId": "id25",
"fillStyle": "solid", "fillStyle": "solid",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -1454,7 +1454,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"verticalAlign": "middle", "verticalAlign": "middle",
"width": 130, "width": 130,
"x": 185, "x": 85,
"y": 87.5, "y": 87.5,
} }
`; `;
@ -1465,7 +1465,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id25", "containerId": "id26",
"fillStyle": "solid", "fillStyle": "solid",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -1493,7 +1493,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"verticalAlign": "middle", "verticalAlign": "middle",
"width": 200, "width": 200,
"x": 150, "x": 50,
"y": 187.5, "y": 187.5,
} }
`; `;
@ -1504,7 +1504,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id26", "containerId": "id27",
"fillStyle": "solid", "fillStyle": "solid",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -1533,7 +1533,7 @@ LABELLED ARROW",
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"verticalAlign": "middle", "verticalAlign": "middle",
"width": 150, "width": 150,
"x": 175, "x": 75,
"y": 275, "y": 275,
} }
`; `;
@ -1544,7 +1544,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id27", "containerId": "id28",
"fillStyle": "solid", "fillStyle": "solid",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -1573,7 +1573,7 @@ LABELLED ARROW",
"versionNonce": Any<Number>, "versionNonce": Any<Number>,
"verticalAlign": "middle", "verticalAlign": "middle",
"width": 150, "width": 150,
"x": 175, "x": 75,
"y": 375, "y": 375,
} }
`; `;
@ -1584,7 +1584,7 @@ exports[`Test Transform > should transform to text containers when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id18", "id": "id19",
"type": "text", "type": "text",
}, },
], ],
@ -1619,7 +1619,7 @@ exports[`Test Transform > should transform to text containers when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id19", "id": "id20",
"type": "text", "type": "text",
}, },
], ],
@ -1654,7 +1654,7 @@ exports[`Test Transform > should transform to text containers when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id20", "id": "id21",
"type": "text", "type": "text",
}, },
], ],
@ -1689,7 +1689,7 @@ exports[`Test Transform > should transform to text containers when label provide
"backgroundColor": "#fff3bf", "backgroundColor": "#fff3bf",
"boundElements": [ "boundElements": [
{ {
"id": "id21", "id": "id22",
"type": "text", "type": "text",
}, },
], ],
@ -1724,7 +1724,7 @@ exports[`Test Transform > should transform to text containers when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id22", "id": "id23",
"type": "text", "type": "text",
}, },
], ],
@ -1759,7 +1759,7 @@ exports[`Test Transform > should transform to text containers when label provide
"backgroundColor": "#ffec99", "backgroundColor": "#ffec99",
"boundElements": [ "boundElements": [
{ {
"id": "id23", "id": "id24",
"type": "text", "type": "text",
}, },
], ],
@ -1794,7 +1794,7 @@ exports[`Test Transform > should transform to text containers when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id12", "containerId": "id13",
"fillStyle": "solid", "fillStyle": "solid",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -1833,7 +1833,7 @@ exports[`Test Transform > should transform to text containers when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id13", "containerId": "id14",
"fillStyle": "solid", "fillStyle": "solid",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -1873,7 +1873,7 @@ exports[`Test Transform > should transform to text containers when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id14", "containerId": "id15",
"fillStyle": "solid", "fillStyle": "solid",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -1915,7 +1915,7 @@ exports[`Test Transform > should transform to text containers when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id15", "containerId": "id16",
"fillStyle": "solid", "fillStyle": "solid",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -1955,7 +1955,7 @@ exports[`Test Transform > should transform to text containers when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id16", "containerId": "id17",
"fillStyle": "solid", "fillStyle": "solid",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -1996,7 +1996,7 @@ exports[`Test Transform > should transform to text containers when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id17", "containerId": "id18",
"fillStyle": "solid", "fillStyle": "solid",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,

53
src/data/transform.test.ts
View File

@ -5,7 +5,31 @@ import {
} from "./transform"; } from "./transform";
import { ExcalidrawArrowElement } from "../element/types"; import { ExcalidrawArrowElement } from "../element/types";
const opts = { regenerateIds: false };
describe("Test Transform", () => { describe("Test Transform", () => {
it("should generate id unless opts.regenerateIds is set to false explicitly", () => {
const elements = [
{
type: "rectangle",
x: 100,
y: 100,
id: "rect-1",
},
];
let data = convertToExcalidrawElements(
elements as ExcalidrawElementSkeleton[],
);
expect(data.length).toBe(1);
expect(data[0].id).toBe("id0");
data = convertToExcalidrawElements(
elements as ExcalidrawElementSkeleton[],
opts,
);
expect(data[0].id).toBe("rect-1");
});
it("should transform regular shapes", () => { it("should transform regular shapes", () => {
const elements = [ const elements = [
{ {
@ -59,6 +83,7 @@ describe("Test Transform", () => {
convertToExcalidrawElements( convertToExcalidrawElements(
elements as ExcalidrawElementSkeleton[], elements as ExcalidrawElementSkeleton[],
opts,
).forEach((ele) => { ).forEach((ele) => {
expect(ele).toMatchSnapshot({ expect(ele).toMatchSnapshot({
seed: expect.any(Number), seed: expect.any(Number),
@ -87,6 +112,7 @@ describe("Test Transform", () => {
]; ];
convertToExcalidrawElements( convertToExcalidrawElements(
elements as ExcalidrawElementSkeleton[], elements as ExcalidrawElementSkeleton[],
opts,
).forEach((ele) => { ).forEach((ele) => {
expect(ele).toMatchSnapshot({ expect(ele).toMatchSnapshot({
seed: expect.any(Number), seed: expect.any(Number),
@ -128,6 +154,7 @@ describe("Test Transform", () => {
]; ];
const excaldrawElements = convertToExcalidrawElements( const excaldrawElements = convertToExcalidrawElements(
elements as ExcalidrawElementSkeleton[], elements as ExcalidrawElementSkeleton[],
opts,
); );
expect(excaldrawElements.length).toBe(4); expect(excaldrawElements.length).toBe(4);
@ -210,6 +237,7 @@ describe("Test Transform", () => {
]; ];
const excaldrawElements = convertToExcalidrawElements( const excaldrawElements = convertToExcalidrawElements(
elements as ExcalidrawElementSkeleton[], elements as ExcalidrawElementSkeleton[],
opts,
); );
expect(excaldrawElements.length).toBe(12); expect(excaldrawElements.length).toBe(12);
@ -267,6 +295,7 @@ describe("Test Transform", () => {
]; ];
const excaldrawElements = convertToExcalidrawElements( const excaldrawElements = convertToExcalidrawElements(
elements as ExcalidrawElementSkeleton[], elements as ExcalidrawElementSkeleton[],
opts,
); );
expect(excaldrawElements.length).toBe(8); expect(excaldrawElements.length).toBe(8);
@ -300,6 +329,7 @@ describe("Test Transform", () => {
]; ];
const excaldrawElements = convertToExcalidrawElements( const excaldrawElements = convertToExcalidrawElements(
elements as ExcalidrawElementSkeleton[], elements as ExcalidrawElementSkeleton[],
opts,
); );
expect(excaldrawElements.length).toBe(4); expect(excaldrawElements.length).toBe(4);
@ -321,7 +351,7 @@ describe("Test Transform", () => {
}); });
expect(text).toMatchObject({ expect(text).toMatchObject({
x: 340, x: 240,
y: 226.5, y: 226.5,
type: "text", type: "text",
text: "HELLO WORLD!!", text: "HELLO WORLD!!",
@ -341,7 +371,7 @@ describe("Test Transform", () => {
}); });
expect(ellipse).toMatchObject({ expect(ellipse).toMatchObject({
x: 555, x: 355,
y: 189, y: 189,
type: "ellipse", type: "ellipse",
boundElements: [ boundElements: [
@ -383,10 +413,10 @@ describe("Test Transform", () => {
const excaldrawElements = convertToExcalidrawElements( const excaldrawElements = convertToExcalidrawElements(
elements as ExcalidrawElementSkeleton[], elements as ExcalidrawElementSkeleton[],
opts,
); );
expect(excaldrawElements.length).toBe(4); expect(excaldrawElements.length).toBe(4);
const [arrow, text1, text2, text3] = excaldrawElements; const [arrow, text1, text2, text3] = excaldrawElements;
expect(arrow).toMatchObject({ expect(arrow).toMatchObject({
@ -406,7 +436,7 @@ describe("Test Transform", () => {
}); });
expect(text1).toMatchObject({ expect(text1).toMatchObject({
x: 340, x: 240,
y: 226.5, y: 226.5,
type: "text", type: "text",
text: "HELLO WORLD!!", text: "HELLO WORLD!!",
@ -426,7 +456,7 @@ describe("Test Transform", () => {
}); });
expect(text3).toMatchObject({ expect(text3).toMatchObject({
x: 555, x: 355,
y: 226.5, y: 226.5,
type: "text", type: "text",
boundElements: [ boundElements: [
@ -499,6 +529,7 @@ describe("Test Transform", () => {
const excaldrawElements = convertToExcalidrawElements( const excaldrawElements = convertToExcalidrawElements(
elements as ExcalidrawElementSkeleton[], elements as ExcalidrawElementSkeleton[],
opts,
); );
expect(excaldrawElements.length).toBe(5); expect(excaldrawElements.length).toBe(5);
@ -547,6 +578,7 @@ describe("Test Transform", () => {
const excaldrawElements = convertToExcalidrawElements( const excaldrawElements = convertToExcalidrawElements(
elements as ExcalidrawElementSkeleton[], elements as ExcalidrawElementSkeleton[],
opts,
); );
expect(excaldrawElements.length).toBe(4); expect(excaldrawElements.length).toBe(4);
@ -600,17 +632,18 @@ describe("Test Transform", () => {
const excaldrawElements = convertToExcalidrawElements( const excaldrawElements = convertToExcalidrawElements(
elements as ExcalidrawElementSkeleton[], elements as ExcalidrawElementSkeleton[],
opts,
); );
expect(excaldrawElements.length).toBe(4); expect(excaldrawElements.length).toBe(4);
const [, , arrow] = excaldrawElements; const [, , arrow, text] = excaldrawElements;
expect(arrow).toMatchObject({ expect(arrow).toMatchObject({
type: "arrow", type: "arrow",
x: 255, x: 255,
y: 239, y: 239,
boundElements: [ boundElements: [
{ {
id: "id46", id: text.id,
type: "text", type: "text",
}, },
], ],
@ -650,17 +683,18 @@ describe("Test Transform", () => {
]; ];
const excaldrawElements = convertToExcalidrawElements( const excaldrawElements = convertToExcalidrawElements(
elements as ExcalidrawElementSkeleton[], elements as ExcalidrawElementSkeleton[],
opts,
); );
expect(excaldrawElements.length).toBe(2); expect(excaldrawElements.length).toBe(2);
const [arrow, rect] = excaldrawElements; const [arrow, rect] = excaldrawElements;
expect((arrow as ExcalidrawArrowElement).endBinding).toStrictEqual({ expect((arrow as ExcalidrawArrowElement).endBinding).toStrictEqual({
elementId: "rect-1", elementId: "rect-1",
focus: 0, focus: 0,
gap: 5, gap: 205,
}); });
expect(rect.boundElements).toStrictEqual([ expect(rect.boundElements).toStrictEqual([
{ {
id: "id47", id: arrow.id,
type: "arrow", type: "arrow",
}, },
]); ]);
@ -692,6 +726,7 @@ describe("Test Transform", () => {
]; ];
const excaldrawElements = convertToExcalidrawElements( const excaldrawElements = convertToExcalidrawElements(
elements as ExcalidrawElementSkeleton[], elements as ExcalidrawElementSkeleton[],
opts,
); );
expect(excaldrawElements.length).toBe(1); expect(excaldrawElements.length).toBe(1);

94
src/data/transform.ts
View File

@ -39,6 +39,8 @@ import {
} from "../element/types"; } from "../element/types";
import { MarkOptional } from "../utility-types"; import { MarkOptional } from "../utility-types";
import { assertNever, getFontString } from "../utils"; import { assertNever, getFontString } from "../utils";
import { getSizeFromPoints } from "../points";
import { randomId } from "../random";
export type ValidLinearElement = { export type ValidLinearElement = {
type: "arrow" | "line"; type: "arrow" | "line";
@ -159,7 +161,7 @@ export type ExcalidrawElementSkeleton =
} & Partial<ExcalidrawImageElement>); } & Partial<ExcalidrawImageElement>);
const DEFAULT_LINEAR_ELEMENT_PROPS = { const DEFAULT_LINEAR_ELEMENT_PROPS = {
width: 300, width: 100,
height: 0, height: 0,
}; };
@ -357,6 +359,48 @@ const bindLinearElementToElement = (
); );
} }
} }
// Update start/end points by 0.5 so bindings don't overlap with start/end bound element coordinates.
const endPointIndex = linearElement.points.length - 1;
const delta = 0.5;
const newPoints = JSON.parse(JSON.stringify(linearElement.points));
// left to right so shift the arrow towards right
if (
linearElement.points[endPointIndex][0] >
linearElement.points[endPointIndex - 1][0]
) {
newPoints[0][0] = delta;
newPoints[endPointIndex][0] -= delta;
}
// right to left so shift the arrow towards left
if (
linearElement.points[endPointIndex][0] <
linearElement.points[endPointIndex - 1][0]
) {
newPoints[0][0] = -delta;
newPoints[endPointIndex][0] += delta;
}
// top to bottom so shift the arrow towards top
if (
linearElement.points[endPointIndex][1] >
linearElement.points[endPointIndex - 1][1]
) {
newPoints[0][1] = delta;
newPoints[endPointIndex][1] -= delta;
}
// bottom to top so shift the arrow towards bottom
if (
linearElement.points[endPointIndex][1] <
linearElement.points[endPointIndex - 1][1]
) {
newPoints[0][1] = -delta;
newPoints[endPointIndex][1] += delta;
}
Object.assign(linearElement, { points: newPoints });
return { return {
linearElement, linearElement,
startBoundElement, startBoundElement,
@ -384,18 +428,28 @@ class ElementStore {
} }
export const convertToExcalidrawElements = ( export const convertToExcalidrawElements = (
elements: ExcalidrawElementSkeleton[] | null, elementsSkeleton: ExcalidrawElementSkeleton[] | null,
opts?: { regenerateIds: boolean },
) => { ) => {
if (!elements) { if (!elementsSkeleton) {
return []; return [];
} }
const elements: ExcalidrawElementSkeleton[] = JSON.parse(
JSON.stringify(elementsSkeleton),
);
const elementStore = new ElementStore(); const elementStore = new ElementStore();
const elementsWithIds = new Map<string, ExcalidrawElementSkeleton>(); const elementsWithIds = new Map<string, ExcalidrawElementSkeleton>();
const oldToNewElementIdMap = new Map<string, string>();
// Create individual elements // Create individual elements
for (const element of elements) { for (const element of elements) {
let excalidrawElement: ExcalidrawElement; let excalidrawElement: ExcalidrawElement;
const originalId = element.id;
if (opts?.regenerateIds !== false) {
Object.assign(element, { id: randomId() });
}
switch (element.type) { switch (element.type) {
case "rectangle": case "rectangle":
case "ellipse": case "ellipse":
@ -444,6 +498,11 @@ export const convertToExcalidrawElements = (
], ],
...element, ...element,
}); });
Object.assign(
excalidrawElement,
getSizeFromPoints(excalidrawElement.points),
);
break; break;
} }
case "text": { case "text": {
@ -499,6 +558,9 @@ export const convertToExcalidrawElements = (
} else { } else {
elementStore.add(excalidrawElement); elementStore.add(excalidrawElement);
elementsWithIds.set(excalidrawElement.id, element); elementsWithIds.set(excalidrawElement.id, element);
if (originalId) {
oldToNewElementIdMap.set(originalId, excalidrawElement.id);
}
} }
} }
@ -524,6 +586,18 @@ export const convertToExcalidrawElements = (
element.type === "arrow" ? element?.start : undefined; element.type === "arrow" ? element?.start : undefined;
const originalEnd = const originalEnd =
element.type === "arrow" ? element?.end : undefined; element.type === "arrow" ? element?.end : undefined;
if (originalStart && originalStart.id) {
const newStartId = oldToNewElementIdMap.get(originalStart.id);
if (newStartId) {
Object.assign(originalStart, { id: newStartId });
}
}
if (originalEnd && originalEnd.id) {
const newEndId = oldToNewElementIdMap.get(originalEnd.id);
if (newEndId) {
Object.assign(originalEnd, { id: newEndId });
}
}
const { linearElement, startBoundElement, endBoundElement } = const { linearElement, startBoundElement, endBoundElement } =
bindLinearElementToElement( bindLinearElementToElement(
container as ExcalidrawArrowElement, container as ExcalidrawArrowElement,
@ -539,13 +613,23 @@ export const convertToExcalidrawElements = (
} else { } else {
switch (element.type) { switch (element.type) {
case "arrow": { case "arrow": {
const { start, end } = element;
if (start && start.id) {
const newStartId = oldToNewElementIdMap.get(start.id);
Object.assign(start, { id: newStartId });
}
if (end && end.id) {
const newEndId = oldToNewElementIdMap.get(end.id);
Object.assign(end, { id: newEndId });
}
const { linearElement, startBoundElement, endBoundElement } = const { linearElement, startBoundElement, endBoundElement } =
bindLinearElementToElement( bindLinearElementToElement(
excalidrawElement as ExcalidrawArrowElement, excalidrawElement as ExcalidrawArrowElement,
element.start, start,
element.end, end,
elementStore, elementStore,
); );
elementStore.add(linearElement); elementStore.add(linearElement);
elementStore.add(startBoundElement); elementStore.add(startBoundElement);
elementStore.add(endBoundElement); elementStore.add(endBoundElement);

2
src/packages/excalidraw/.size-limit.json
View File

@ -1,7 +1,7 @@
[ [
{ {
"path": "dist/excalidraw.production.min.js", "path": "dist/excalidraw.production.min.js",
"limit": "305 kB" "limit": "320 kB"
}, },
{ {
"path": "dist/excalidraw-assets/locales", "path": "dist/excalidraw-assets/locales",

4
src/packages/excalidraw/CHANGELOG.md
View File

@ -15,7 +15,9 @@ Please add the latest change on the top under the correct section.
### Features ### Features
- Add `selected` prop for `MainMenu.Item` and `MainMenu.ItemCustom` components to indicate active state. [7078](https://github.com/excalidraw/excalidraw/pull/7078) - Regenerate ids by default when using transform api and also update bindings by 0.5px to avoid possible overlapping [#7195](https://github.com/excalidraw/excalidraw/pull/7195)
- Add `selected` prop for `MainMenu.Item` and `MainMenu.ItemCustom` components to indicate active state. [#7078](https://github.com/excalidraw/excalidraw/pull/7078)
## 0.16.1 (2023-09-21) ## 0.16.1 (2023-09-21)