From 93008d6a8dfea4d2d7523221a4c057197b63fe96 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Wed, 2 Aug 2023 20:40:39 +0530 Subject: [PATCH] preserve z-index by pushing all elements first and then add bindings --- src/data/__snapshots__/transform.test.ts.snap | 694 +++++++++--------- src/data/transform.ts | 20 +- 2 files changed, 360 insertions(+), 354 deletions(-) diff --git a/src/data/__snapshots__/transform.test.ts.snap b/src/data/__snapshots__/transform.test.ts.snap index d1eda74c3e..9b048f4fb4 100644 --- a/src/data/__snapshots__/transform.test.ts.snap +++ b/src/data/__snapshots__/transform.test.ts.snap @@ -10,7 +10,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s "type": "arrow", }, { - "id": "id42", + "id": "id41", "type": "arrow", }, ], @@ -45,7 +45,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s "backgroundColor": "transparent", "boundElements": [ { - "id": "id42", + "id": "id41", "type": "arrow", }, ], @@ -110,7 +110,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s "seed": Any, "startArrowhead": null, "startBinding": { - "elementId": "id41", + "elementId": "id42", "focus": -0.08139534883720931, "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`] = ` -{ - "angle": 0, - "backgroundColor": "transparent", - "boundElements": [ - { - "id": "id40", - "type": "arrow", - }, - ], - "fillStyle": "hachure", - "frameId": null, - "groupIds": [], - "height": 300, - "id": Any, - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": null, - "seed": Any, - "strokeColor": "#1e1e1e", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "updated": 1, - "version": 2, - "versionNonce": Any, - "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, "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, + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": Any, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 2, + "versionNonce": Any, + "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`] = ` { "angle": 0, @@ -1051,7 +1051,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide "backgroundColor": "transparent", "boundElements": [ { - "id": "id25", + "id": "id28", "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`] = ` -{ - "angle": 0, - "backgroundColor": "transparent", - "baseline": 0, - "boundElements": null, - "containerId": "id24", - "fillStyle": "hachure", - "fontFamily": 1, - "fontSize": 20, - "frameId": null, - "groupIds": [], - "height": 25, - "id": Any, - "isDeleted": false, - "lineHeight": 1.25, - "link": null, - "locked": false, - "opacity": 100, - "originalText": "LABELED ARROW", - "roughness": 1, - "roundness": null, - "seed": Any, - "strokeColor": "#1e1e1e", - "strokeStyle": "solid", - "strokeWidth": 1, - "text": "LABELED ARROW", - "textAlign": "center", - "type": "text", - "updated": 1, - "version": 2, - "versionNonce": Any, - "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, "backgroundColor": "transparent", "boundElements": [ { - "id": "id27", + "id": "id29", "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`] = ` -{ - "angle": 0, - "backgroundColor": "transparent", - "baseline": 0, - "boundElements": null, - "containerId": "id26", - "fillStyle": "hachure", - "fontFamily": 1, - "fontSize": 20, - "frameId": null, - "groupIds": [], - "height": 25, - "id": Any, - "isDeleted": false, - "lineHeight": 1.25, - "link": null, - "locked": false, - "opacity": 100, - "originalText": "STYLED LABELED ARROW", - "roughness": 1, - "roundness": null, - "seed": Any, - "strokeColor": "#099268", - "strokeStyle": "solid", - "strokeWidth": 1, - "text": "STYLED LABELED ARROW", - "textAlign": "center", - "type": "text", - "updated": 1, - "version": 2, - "versionNonce": Any, - "verticalAlign": "middle", - "width": 200, - "x": 150, - "y": 187.5, -} -`; - -exports[`Test Transform > should transform to labelled arrows when label provided for arrows 5`] = ` +exports[`Test Transform > should transform to labelled arrows when label provided for arrows 3`] = ` { "angle": 0, "backgroundColor": "transparent", "boundElements": [ { - "id": "id29", + "id": "id30", "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`] = ` -{ - "angle": 0, - "backgroundColor": "transparent", - "baseline": 0, - "boundElements": null, - "containerId": "id28", - "fillStyle": "hachure", - "fontFamily": 1, - "fontSize": 20, - "frameId": null, - "groupIds": [], - "height": 50, - "id": Any, - "isDeleted": false, - "lineHeight": 1.25, - "link": null, - "locked": false, - "opacity": 100, - "originalText": "ANOTHER STYLED LABELLED ARROW", - "roughness": 1, - "roundness": null, - "seed": Any, - "strokeColor": "#1098ad", - "strokeStyle": "solid", - "strokeWidth": 1, - "text": "ANOTHER STYLED -LABELLED ARROW", - "textAlign": "center", - "type": "text", - "updated": 1, - "version": 2, - "versionNonce": Any, - "verticalAlign": "middle", - "width": 150, - "x": 175, - "y": 275, -} -`; - -exports[`Test Transform > should transform to labelled arrows when label provided for arrows 7`] = ` +exports[`Test Transform > should transform to labelled arrows when label provided for arrows 4`] = ` { "angle": 0, "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, + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "LABELED ARROW", + "roughness": 1, + "roundness": null, + "seed": Any, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "LABELED ARROW", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": Any, + "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, + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "STYLED LABELED ARROW", + "roughness": 1, + "roundness": null, + "seed": Any, + "strokeColor": "#099268", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "STYLED LABELED ARROW", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": Any, + "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, + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "ANOTHER STYLED LABELLED ARROW", + "roughness": 1, + "roundness": null, + "seed": Any, + "strokeColor": "#1098ad", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "ANOTHER STYLED +LABELLED ARROW", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": Any, + "verticalAlign": "middle", + "width": 150, + "x": 175, + "y": 275, +} +`; + exports[`Test Transform > should transform to labelled arrows when label provided for arrows 8`] = ` { "angle": 0, "backgroundColor": "transparent", "baseline": 0, "boundElements": null, - "containerId": "id30", + "containerId": "id27", "fillStyle": "hachure", "fontFamily": 1, "fontSize": 20, @@ -1409,7 +1409,7 @@ exports[`Test Transform > should transform to text containers when label provide "backgroundColor": "transparent", "boundElements": [ { - "id": "id13", + "id": "id18", "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`] = ` +{ + "angle": 0, + "backgroundColor": "transparent", + "boundElements": [ + { + "id": "id19", + "type": "text", + }, + ], + "fillStyle": "hachure", + "frameId": null, + "groupIds": [], + "height": 85, + "id": Any, + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": Any, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "ellipse", + "updated": 1, + "version": 2, + "versionNonce": Any, + "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, + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": Any, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "diamond", + "updated": 1, + "version": 2, + "versionNonce": Any, + "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, + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": Any, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "diamond", + "updated": 1, + "version": 2, + "versionNonce": Any, + "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, + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": Any, + "strokeColor": "#c2255c", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 2, + "versionNonce": Any, + "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, + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": Any, + "strokeColor": "#f08c00", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "ellipse", + "updated": 1, + "version": 2, + "versionNonce": Any, + "width": 200, + "x": 500, + "y": 500, +} +`; + +exports[`Test Transform > should transform to text containers when label provided 7`] = ` { "angle": 0, "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`] = ` -{ - "angle": 0, - "backgroundColor": "transparent", - "boundElements": [ - { - "id": "id15", - "type": "text", - }, - ], - "fillStyle": "hachure", - "frameId": null, - "groupIds": [], - "height": 85, - "id": Any, - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": null, - "seed": Any, - "strokeColor": "#1e1e1e", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "ellipse", - "updated": 1, - "version": 2, - "versionNonce": Any, - "width": 200, - "x": 500, - "y": 100, -} -`; - -exports[`Test Transform > should transform to text containers when label provided 4`] = ` +exports[`Test Transform > should transform to text containers when label provided 8`] = ` { "angle": 0, "backgroundColor": "transparent", "baseline": 0, "boundElements": null, - "containerId": "id14", + "containerId": "id13", "fillStyle": "hachure", "fontFamily": 1, "fontSize": 20, @@ -1552,48 +1692,13 @@ CONTAINER", } `; -exports[`Test Transform > should transform to text containers when label provided 5`] = ` -{ - "angle": 0, - "backgroundColor": "transparent", - "boundElements": [ - { - "id": "id17", - "type": "text", - }, - ], - "fillStyle": "hachure", - "frameId": null, - "groupIds": [], - "height": 170, - "id": Any, - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": null, - "seed": Any, - "strokeColor": "#1e1e1e", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "diamond", - "updated": 1, - "version": 2, - "versionNonce": Any, - "width": 280, - "x": 100, - "y": 150, -} -`; - -exports[`Test Transform > should transform to text containers when label provided 6`] = ` +exports[`Test Transform > should transform to text containers when label provided 9`] = ` { "angle": 0, "backgroundColor": "transparent", "baseline": 0, "boundElements": null, - "containerId": "id16", + "containerId": "id14", "fillStyle": "hachure", "fontFamily": 1, "fontSize": 20, @@ -1629,48 +1734,13 @@ CONTAINER", } `; -exports[`Test Transform > should transform to text containers when label provided 7`] = ` -{ - "angle": 0, - "backgroundColor": "#fff3bf", - "boundElements": [ - { - "id": "id19", - "type": "text", - }, - ], - "fillStyle": "hachure", - "frameId": null, - "groupIds": [], - "height": 120, - "id": Any, - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": null, - "seed": Any, - "strokeColor": "#1e1e1e", - "strokeStyle": "solid", - "strokeWidth": 2, - "type": "diamond", - "updated": 1, - "version": 2, - "versionNonce": Any, - "width": 300, - "x": 100, - "y": 400, -} -`; - -exports[`Test Transform > should transform to text containers when label provided 8`] = ` +exports[`Test Transform > should transform to text containers when label provided 10`] = ` { "angle": 0, "backgroundColor": "transparent", "baseline": 0, "boundElements": null, - "containerId": "id18", + "containerId": "id15", "fillStyle": "hachure", "fontFamily": 1, "fontSize": 20, @@ -1704,48 +1774,13 @@ TEXT CONTAINER", } `; -exports[`Test Transform > should transform to text containers when label provided 9`] = ` -{ - "angle": 0, - "backgroundColor": "transparent", - "boundElements": [ - { - "id": "id21", - "type": "text", - }, - ], - "fillStyle": "hachure", - "frameId": null, - "groupIds": [], - "height": 85, - "id": Any, - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": null, - "seed": Any, - "strokeColor": "#c2255c", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "rectangle", - "updated": 1, - "version": 2, - "versionNonce": Any, - "width": 200, - "x": 500, - "y": 300, -} -`; - -exports[`Test Transform > should transform to text containers when label provided 10`] = ` +exports[`Test Transform > should transform to text containers when label provided 11`] = ` { "angle": 0, "backgroundColor": "transparent", "baseline": 0, "boundElements": null, - "containerId": "id20", + "containerId": "id16", "fillStyle": "hachure", "fontFamily": 1, "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, - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": null, - "seed": Any, - "strokeColor": "#f08c00", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "ellipse", - "updated": 1, - "version": 2, - "versionNonce": Any, - "width": 200, - "x": 500, - "y": 500, -} -`; - exports[`Test Transform > should transform to text containers when label provided 12`] = ` { "angle": 0, "backgroundColor": "transparent", "baseline": 0, "boundElements": null, - "containerId": "id22", + "containerId": "id17", "fillStyle": "hachure", "fontFamily": 1, "fontSize": 20, diff --git a/src/data/transform.ts b/src/data/transform.ts index 787624968f..0f124dcc5c 100644 --- a/src/data/transform.ts +++ b/src/data/transform.ts @@ -441,20 +441,26 @@ export const convertToExcalidrawElements = ( if (!elements) { return []; } + + // Push all elements to array as there could be cases where element id + // is referenced before element is created elements.forEach((element) => { 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)) { elementId = regenerateId(elementId); } - - if (!ELEMENTS_SUPPORTING_PROGRAMMATIC_API.includes(element.type)) { - excalidrawElements.add(element as ExcalidrawElement); - - return; - } const elementWithId = { ...element, id: elementId }; + excalidrawElements.add(elementWithId as ExcalidrawElement); + }); + + const pushedElements = + excalidrawElements.get() as readonly ExcalidrawProgrammaticElement[]; + pushedElements.forEach((element) => { + const elementWithId = { ...element }; if ( (elementWithId.type === "rectangle" ||