smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

preserve z-index by pushing all elements first and then add bindings

Browse source
This commit is contained in:
Aakansha Doshi 2023-08-02 20:40:39 +05:30
parent dcc4c28041
commit 93008d6a8d
2 changed files with 360 additions and 354 deletions
Download patch file Download diff file Expand all files Collapse all files

694
src/data/__snapshots__/transform.test.ts.snap
View file

@ -10,7 +10,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
"type": "arrow", "type": "arrow",
}, },
{ {
"id": "id42", "id": "id41",
"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": "id42", "id": "id41",
"type": "arrow", "type": "arrow",
}, },
], ],
@ -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": "id41", "elementId": "id42",
"focus": -0.08139534883720931, "focus": -0.08139534883720931,
"gap": 1, "gap": 1,
}, },
@ -128,41 +128,6 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
`; `;
exports[`Test Transform > Test arrow bindings > should bind arrows to existing shapes when start / end provided with ids 4`] = ` exports[`Test Transform > Test arrow bindings > should bind arrows to existing shapes when start / end provided with ids 4`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id40",
"type": "arrow",
},
],
"fillStyle": "hachure",
"frameId": null,
"groupIds": [],
"height": 300,
"id": Any<String>,
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"width": 300,
"x": -53,
"y": 270,
}
`;
exports[`Test Transform > Test arrow bindings > should bind arrows to existing shapes when start / end provided with ids 5`] = `
{ {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
@ -215,6 +180,41 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
} }
`; `;
exports[`Test Transform > Test arrow bindings > should bind arrows to existing shapes when start / end provided with ids 5`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id40",
"type": "arrow",
},
],
"fillStyle": "hachure",
"frameId": null,
"groupIds": [],
"height": 300,
"id": Any<String>,
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"width": 300,
"x": -53,
"y": 270,
}
`;
exports[`Test Transform > Test arrow bindings > should bind arrows to existing text elements when start / end provided with ids 1`] = ` exports[`Test Transform > Test arrow bindings > should bind arrows to existing text elements when start / end provided with ids 1`] = `
{ {
"angle": 0, "angle": 0,
@ -1051,7 +1051,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id25", "id": "id28",
"type": "text", "type": "text",
}, },
], ],
@ -1096,51 +1096,12 @@ exports[`Test Transform > should transform to labelled arrows when label provide
`; `;
exports[`Test Transform > should transform to labelled arrows when label provided for arrows 2`] = ` exports[`Test Transform > should transform to labelled arrows when label provided for arrows 2`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"baseline": 0,
"boundElements": null,
"containerId": "id24",
"fillStyle": "hachure",
"fontFamily": 1,
"fontSize": 20,
"frameId": null,
"groupIds": [],
"height": 25,
"id": Any<String>,
"isDeleted": false,
"lineHeight": 1.25,
"link": null,
"locked": false,
"opacity": 100,
"originalText": "LABELED ARROW",
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 1,
"text": "LABELED ARROW",
"textAlign": "center",
"type": "text",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"verticalAlign": "middle",
"width": 130,
"x": 185,
"y": 87.5,
}
`;
exports[`Test Transform > should transform to labelled arrows when label provided for arrows 3`] = `
{ {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id27", "id": "id29",
"type": "text", "type": "text",
}, },
], ],
@ -1184,52 +1145,13 @@ exports[`Test Transform > should transform to labelled arrows when label provide
} }
`; `;
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,
"backgroundColor": "transparent",
"baseline": 0,
"boundElements": null,
"containerId": "id26",
"fillStyle": "hachure",
"fontFamily": 1,
"fontSize": 20,
"frameId": null,
"groupIds": [],
"height": 25,
"id": Any<String>,
"isDeleted": false,
"lineHeight": 1.25,
"link": null,
"locked": false,
"opacity": 100,
"originalText": "STYLED LABELED ARROW",
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#099268",
"strokeStyle": "solid",
"strokeWidth": 1,
"text": "STYLED LABELED ARROW",
"textAlign": "center",
"type": "text",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"verticalAlign": "middle",
"width": 200,
"x": 150,
"y": 187.5,
}
`;
exports[`Test Transform > should transform to labelled arrows when label provided for arrows 5`] = `
{ {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id29", "id": "id30",
"type": "text", "type": "text",
}, },
], ],
@ -1273,47 +1195,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
} }
`; `;
exports[`Test Transform > should transform to labelled arrows when label provided for arrows 6`] = ` exports[`Test Transform > should transform to labelled arrows when label provided for arrows 4`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"baseline": 0,
"boundElements": null,
"containerId": "id28",
"fillStyle": "hachure",
"fontFamily": 1,
"fontSize": 20,
"frameId": null,
"groupIds": [],
"height": 50,
"id": Any<String>,
"isDeleted": false,
"lineHeight": 1.25,
"link": null,
"locked": false,
"opacity": 100,
"originalText": "ANOTHER STYLED LABELLED ARROW",
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#1098ad",
"strokeStyle": "solid",
"strokeWidth": 1,
"text": "ANOTHER STYLED
LABELLED ARROW",
"textAlign": "center",
"type": "text",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"verticalAlign": "middle",
"width": 150,
"x": 175,
"y": 275,
}
`;
exports[`Test Transform > should transform to labelled arrows when label provided for arrows 7`] = `
{ {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
@ -1363,13 +1245,131 @@ exports[`Test Transform > should transform to labelled arrows when label provide
} }
`; `;
exports[`Test Transform > should transform to labelled arrows when label provided for arrows 5`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"baseline": 0,
"boundElements": null,
"containerId": "id24",
"fillStyle": "hachure",
"fontFamily": 1,
"fontSize": 20,
"frameId": null,
"groupIds": [],
"height": 25,
"id": Any<String>,
"isDeleted": false,
"lineHeight": 1.25,
"link": null,
"locked": false,
"opacity": 100,
"originalText": "LABELED ARROW",
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 1,
"text": "LABELED ARROW",
"textAlign": "center",
"type": "text",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"verticalAlign": "middle",
"width": 130,
"x": 185,
"y": 87.5,
}
`;
exports[`Test Transform > should transform to labelled arrows when label provided for arrows 6`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"baseline": 0,
"boundElements": null,
"containerId": "id25",
"fillStyle": "hachure",
"fontFamily": 1,
"fontSize": 20,
"frameId": null,
"groupIds": [],
"height": 25,
"id": Any<String>,
"isDeleted": false,
"lineHeight": 1.25,
"link": null,
"locked": false,
"opacity": 100,
"originalText": "STYLED LABELED ARROW",
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#099268",
"strokeStyle": "solid",
"strokeWidth": 1,
"text": "STYLED LABELED ARROW",
"textAlign": "center",
"type": "text",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"verticalAlign": "middle",
"width": 200,
"x": 150,
"y": 187.5,
}
`;
exports[`Test Transform > should transform to labelled arrows when label provided for arrows 7`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"baseline": 0,
"boundElements": null,
"containerId": "id26",
"fillStyle": "hachure",
"fontFamily": 1,
"fontSize": 20,
"frameId": null,
"groupIds": [],
"height": 50,
"id": Any<String>,
"isDeleted": false,
"lineHeight": 1.25,
"link": null,
"locked": false,
"opacity": 100,
"originalText": "ANOTHER STYLED LABELLED ARROW",
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#1098ad",
"strokeStyle": "solid",
"strokeWidth": 1,
"text": "ANOTHER STYLED
LABELLED ARROW",
"textAlign": "center",
"type": "text",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"verticalAlign": "middle",
"width": 150,
"x": 175,
"y": 275,
}
`;
exports[`Test Transform > should transform to labelled arrows when label provided for arrows 8`] = ` exports[`Test Transform > should transform to labelled arrows when label provided for arrows 8`] = `
{ {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id30", "containerId": "id27",
"fillStyle": "hachure", "fillStyle": "hachure",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -1409,7 +1409,7 @@ exports[`Test Transform > should transform to text containers when label provide
"backgroundColor": "transparent", "backgroundColor": "transparent",
"boundElements": [ "boundElements": [
{ {
"id": "id13", "id": "id18",
"type": "text", "type": "text",
}, },
], ],
@ -1439,6 +1439,181 @@ exports[`Test Transform > should transform to text containers when label provide
`; `;
exports[`Test Transform > should transform to text containers when label provided 2`] = ` exports[`Test Transform > should transform to text containers when label provided 2`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id19",
"type": "text",
},
],
"fillStyle": "hachure",
"frameId": null,
"groupIds": [],
"height": 85,
"id": Any<String>,
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "ellipse",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"width": 200,
"x": 500,
"y": 100,
}
`;
exports[`Test Transform > should transform to text containers when label provided 3`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id20",
"type": "text",
},
],
"fillStyle": "hachure",
"frameId": null,
"groupIds": [],
"height": 170,
"id": Any<String>,
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "diamond",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"width": 280,
"x": 100,
"y": 150,
}
`;
exports[`Test Transform > should transform to text containers when label provided 4`] = `
{
"angle": 0,
"backgroundColor": "#fff3bf",
"boundElements": [
{
"id": "id21",
"type": "text",
},
],
"fillStyle": "hachure",
"frameId": null,
"groupIds": [],
"height": 120,
"id": Any<String>,
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "diamond",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"width": 300,
"x": 100,
"y": 400,
}
`;
exports[`Test Transform > should transform to text containers when label provided 5`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id22",
"type": "text",
},
],
"fillStyle": "hachure",
"frameId": null,
"groupIds": [],
"height": 85,
"id": Any<String>,
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#c2255c",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"width": 200,
"x": 500,
"y": 300,
}
`;
exports[`Test Transform > should transform to text containers when label provided 6`] = `
{
"angle": 0,
"backgroundColor": "#ffec99",
"boundElements": [
{
"id": "id23",
"type": "text",
},
],
"fillStyle": "hachure",
"frameId": null,
"groupIds": [],
"height": 120,
"id": Any<String>,
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#f08c00",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "ellipse",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"width": 200,
"x": 500,
"y": 500,
}
`;
exports[`Test Transform > should transform to text containers when label provided 7`] = `
{ {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
@ -1477,48 +1652,13 @@ exports[`Test Transform > should transform to text containers when label provide
} }
`; `;
exports[`Test Transform > should transform to text containers when label provided 3`] = ` exports[`Test Transform > should transform to text containers when label provided 8`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id15",
"type": "text",
},
],
"fillStyle": "hachure",
"frameId": null,
"groupIds": [],
"height": 85,
"id": Any<String>,
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "ellipse",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"width": 200,
"x": 500,
"y": 100,
}
`;
exports[`Test Transform > should transform to text containers when label provided 4`] = `
{ {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id14", "containerId": "id13",
"fillStyle": "hachure", "fillStyle": "hachure",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -1552,48 +1692,13 @@ CONTAINER",
} }
`; `;
exports[`Test Transform > should transform to text containers when label provided 5`] = ` exports[`Test Transform > should transform to text containers when label provided 9`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id17",
"type": "text",
},
],
"fillStyle": "hachure",
"frameId": null,
"groupIds": [],
"height": 170,
"id": Any<String>,
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "diamond",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"width": 280,
"x": 100,
"y": 150,
}
`;
exports[`Test Transform > should transform to text containers when label provided 6`] = `
{ {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id16", "containerId": "id14",
"fillStyle": "hachure", "fillStyle": "hachure",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -1629,48 +1734,13 @@ CONTAINER",
} }
`; `;
exports[`Test Transform > should transform to text containers when label provided 7`] = ` exports[`Test Transform > should transform to text containers when label provided 10`] = `
{
"angle": 0,
"backgroundColor": "#fff3bf",
"boundElements": [
{
"id": "id19",
"type": "text",
},
],
"fillStyle": "hachure",
"frameId": null,
"groupIds": [],
"height": 120,
"id": Any<String>,
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#1e1e1e",
"strokeStyle": "solid",
"strokeWidth": 2,
"type": "diamond",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"width": 300,
"x": 100,
"y": 400,
}
`;
exports[`Test Transform > should transform to text containers when label provided 8`] = `
{ {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id18", "containerId": "id15",
"fillStyle": "hachure", "fillStyle": "hachure",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -1704,48 +1774,13 @@ TEXT CONTAINER",
} }
`; `;
exports[`Test Transform > should transform to text containers when label provided 9`] = ` exports[`Test Transform > should transform to text containers when label provided 11`] = `
{
"angle": 0,
"backgroundColor": "transparent",
"boundElements": [
{
"id": "id21",
"type": "text",
},
],
"fillStyle": "hachure",
"frameId": null,
"groupIds": [],
"height": 85,
"id": Any<String>,
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#c2255c",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "rectangle",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"width": 200,
"x": 500,
"y": 300,
}
`;
exports[`Test Transform > should transform to text containers when label provided 10`] = `
{ {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id20", "containerId": "id16",
"fillStyle": "hachure", "fillStyle": "hachure",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,
@ -1780,48 +1815,13 @@ CONTAINER",
} }
`; `;
exports[`Test Transform > should transform to text containers when label provided 11`] = `
{
"angle": 0,
"backgroundColor": "#ffec99",
"boundElements": [
{
"id": "id23",
"type": "text",
},
],
"fillStyle": "hachure",
"frameId": null,
"groupIds": [],
"height": 120,
"id": Any<String>,
"isDeleted": false,
"link": null,
"locked": false,
"opacity": 100,
"roughness": 1,
"roundness": null,
"seed": Any<Number>,
"strokeColor": "#f08c00",
"strokeStyle": "solid",
"strokeWidth": 1,
"type": "ellipse",
"updated": 1,
"version": 2,
"versionNonce": Any<Number>,
"width": 200,
"x": 500,
"y": 500,
}
`;
exports[`Test Transform > should transform to text containers when label provided 12`] = ` exports[`Test Transform > should transform to text containers when label provided 12`] = `
{ {
"angle": 0, "angle": 0,
"backgroundColor": "transparent", "backgroundColor": "transparent",
"baseline": 0, "baseline": 0,
"boundElements": null, "boundElements": null,
"containerId": "id22", "containerId": "id17",
"fillStyle": "hachure", "fillStyle": "hachure",
"fontFamily": 1, "fontFamily": 1,
"fontSize": 20, "fontSize": 20,

20
src/data/transform.ts
View file

@ -441,20 +441,26 @@ export const convertToExcalidrawElements = (
if (!elements) { if (!elements) {
return []; return [];
} }
// Push all elements to array as there could be cases where element id
// is referenced before element is created
elements.forEach((element) => { elements.forEach((element) => {
let elementId = element.id || regenerateId(null); let elementId = element.id || regenerateId(null);
// To make sure every element has a unique id // To make sure every element has a unique id since regenerateId appends
// _copy to the original id and if it exists we need to generate again
// hence a loop
while (excalidrawElements.hasElementWithId(elementId)) { while (excalidrawElements.hasElementWithId(elementId)) {
elementId = regenerateId(elementId); elementId = regenerateId(elementId);
} }
if (!ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(element.type)) {
excalidrawElements.add(element as ExcalidrawElement);
return;
}
const elementWithId = { ...element, id: elementId }; const elementWithId = { ...element, id: elementId };
excalidrawElements.add(elementWithId as ExcalidrawElement);
});
const pushedElements =
excalidrawElements.get() as readonly ExcalidrawProgrammaticElement[];
pushedElements.forEach((element) => {
const elementWithId = { ...element };
if ( if (
(elementWithId.type === "rectangle" || (elementWithId.type === "rectangle" ||