From a9154b36d580bc52d655bace6bd2acae4c25270a Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Tue, 30 May 2023 13:22:55 +0530 Subject: [PATCH] Add tests --- src/data/__snapshots__/transform.test.ts.snap | 1719 +++++++++++++++++ src/data/transform.test.ts | 408 ++++ src/packages/excalidraw/example/App.tsx | 1 - 3 files changed, 2127 insertions(+), 1 deletion(-) create mode 100644 src/data/__snapshots__/transform.test.ts.snap create mode 100644 src/data/transform.test.ts diff --git a/src/data/__snapshots__/transform.test.ts.snap b/src/data/__snapshots__/transform.test.ts.snap new file mode 100644 index 0000000000..4528505ea0 --- /dev/null +++ b/src/data/__snapshots__/transform.test.ts.snap @@ -0,0 +1,1719 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Test Transform Test arrow bindings should bind arrows to existing text elements when start / end provided with ids 1`] = ` +Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": Array [ + Object { + "id": "id43", + "type": "arrow", + }, + ], + "containerId": null, + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 25, + "id": "text-1", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "HEYYYYY", + "roughness": 1, + "roundness": null, + "seed": 494893524, + "strokeColor": "#c2255c", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "HEYYYYY", + "textAlign": "left", + "type": "text", + "updated": 1, + "version": 3, + "versionNonce": 1955213292, + "verticalAlign": "top", + "width": 70, + "x": 185, + "y": 226.5, + }, + Object { + "angle": 0, + "backgroundColor": "#bac8ff", + "boundElements": Array [ + Object { + "id": "id43", + "type": "arrow", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "height": 200, + "id": "rect-1", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": 341972180, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 2, + "versionNonce": 1785748052, + "width": 100, + "x": 560, + "y": 139, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id44", + "type": "text", + }, + ], + "endArrowhead": "arrow", + "endBinding": Object { + "elementId": "rect-1", + "focus": 0, + "gap": 5, + }, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 0, + "id": "id43", + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 300, + 0, + ], + ], + "roughness": 1, + "roundness": null, + "seed": 1430396628, + "startArrowhead": null, + "startBinding": Object { + "elementId": "text-1", + "focus": 0, + "gap": 1, + }, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "arrow", + "updated": 1, + "version": 4, + "versionNonce": 1779782252, + "width": 300, + "x": 255, + "y": 239, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": null, + "containerId": "id43", + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 25, + "id": "id44", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "HELLO WORLD!!", + "roughness": 1, + "roundness": null, + "seed": 781379692, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "HELLO WORLD!!", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": 1131608812, + "verticalAlign": "middle", + "width": 130, + "x": 340, + "y": 226.5, + }, +] +`; + +exports[`Test Transform Test arrow bindings should bind arrows to existinging shapes when start / end provided with ids 1`] = ` +Array [ + Object { + "angle": 0, + "backgroundColor": "#d8f5a2", + "boundElements": Array [ + Object { + "id": "id40", + "type": "arrow", + }, + Object { + "id": "id42", + "type": "arrow", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "height": 300, + "id": "ellipse-1", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": 534109164, + "strokeColor": "#66a80f", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "ellipse", + "updated": 1, + "version": 3, + "versionNonce": 780305900, + "width": 300, + "x": 630, + "y": 316, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id42", + "type": "arrow", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "height": 100, + "id": "diamond-1", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": 1818808556, + "strokeColor": "#9c36b5", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "diamond", + "updated": 1, + "version": 2, + "versionNonce": 259511148, + "width": 140, + "x": 96, + "y": 400, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "endArrowhead": "arrow", + "endBinding": Object { + "elementId": "ellipse-1", + "focus": -0.008153707962747813, + "gap": 1, + }, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 35, + "id": "id40", + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 395, + 35, + ], + ], + "roughness": 1, + "roundness": null, + "seed": 1467590380, + "startArrowhead": null, + "startBinding": Object { + "elementId": "id41", + "focus": -0.08139534883720931, + "gap": 1, + }, + "strokeColor": "#1864ab", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "arrow", + "updated": 1, + "version": 3, + "versionNonce": 1442261204, + "width": 395, + "x": 247, + "y": 420, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id40", + "type": "arrow", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "height": 300, + "id": "id41", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": 864652756, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 2, + "versionNonce": 138457940, + "width": 300, + "x": -53, + "y": 270, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "endArrowhead": "arrow", + "endBinding": Object { + "elementId": "ellipse-1", + "focus": 0.10666666666666667, + "gap": 3.834326468444573, + }, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 0, + "id": "id42", + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 400, + 0, + ], + ], + "roughness": 1, + "roundness": null, + "seed": 1614999124, + "startArrowhead": null, + "startBinding": Object { + "elementId": "diamond-1", + "focus": 0, + "gap": 1, + }, + "strokeColor": "#e67700", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "arrow", + "updated": 1, + "version": 3, + "versionNonce": 590506324, + "width": 400, + "x": 227, + "y": 450, + }, +] +`; + +exports[`Test Transform Test arrow bindings should bind arrows to shapes when start / end provided without ids 1`] = ` +Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id33", + "type": "text", + }, + ], + "endArrowhead": "arrow", + "endBinding": Object { + "elementId": "id35", + "focus": 0, + "gap": 1, + }, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 0, + "id": "id32", + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 300, + 0, + ], + ], + "roughness": 1, + "roundness": null, + "seed": 150088556, + "startArrowhead": null, + "startBinding": Object { + "elementId": "id34", + "focus": 0, + "gap": 1, + }, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "arrow", + "updated": 1, + "version": 4, + "versionNonce": 893064556, + "width": 300, + "x": 255, + "y": 239, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": null, + "containerId": "id32", + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 25, + "id": "id33", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "HELLO WORLD!!", + "roughness": 1, + "roundness": null, + "seed": 1462341972, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "HELLO WORLD!!", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": 1343506132, + "verticalAlign": "middle", + "width": 130, + "x": 340, + "y": 226.5, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id32", + "type": "arrow", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "height": 100, + "id": "id34", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": 525811820, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 2, + "versionNonce": 1240224492, + "width": 100, + "x": 155, + "y": 189, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id32", + "type": "arrow", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "height": 100, + "id": "id35", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": 1474798036, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "ellipse", + "updated": 1, + "version": 2, + "versionNonce": 532432724, + "width": 100, + "x": 555, + "y": 189, + }, +] +`; + +exports[`Test Transform Test arrow bindings should bind arrows to text when start / end provided without ids 1`] = ` +Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id37", + "type": "text", + }, + ], + "endArrowhead": "arrow", + "endBinding": Object { + "elementId": "id39", + "focus": 0, + "gap": 1, + }, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 0, + "id": "id36", + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 300, + 0, + ], + ], + "roughness": 1, + "roundness": null, + "seed": 2123204588, + "startArrowhead": null, + "startBinding": Object { + "elementId": "id38", + "focus": 0, + "gap": 1, + }, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "arrow", + "updated": 1, + "version": 4, + "versionNonce": 150934636, + "width": 300, + "x": 255, + "y": 239, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": null, + "containerId": "id36", + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 25, + "id": "id37", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "HELLO WORLD!!", + "roughness": 1, + "roundness": null, + "seed": 551566548, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "HELLO WORLD!!", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": 350847572, + "verticalAlign": "middle", + "width": 130, + "x": 340, + "y": 226.5, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": Array [ + Object { + "id": "id36", + "type": "arrow", + }, + ], + "containerId": null, + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 25, + "id": "id38", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "HEYYYYY", + "roughness": 1, + "roundness": null, + "seed": 707099884, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "HEYYYYY", + "textAlign": "left", + "type": "text", + "updated": 1, + "version": 3, + "versionNonce": 1715731796, + "verticalAlign": "top", + "width": 70, + "x": 185, + "y": 226.5, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": Array [ + Object { + "id": "id36", + "type": "arrow", + }, + ], + "containerId": null, + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 25, + "id": "id39", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "WHATS UP ?", + "roughness": 1, + "roundness": null, + "seed": 235155948, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "WHATS UP ?", + "textAlign": "left", + "type": "text", + "updated": 1, + "version": 3, + "versionNonce": 1501280340, + "verticalAlign": "top", + "width": 100, + "x": 555, + "y": 226.5, + }, +] +`; + +exports[`Test Transform should generate new ids if multiple elements contain same ids 1`] = ` +Array [ + Object { + "height": 200, + "id": "rect-1", + "type": "rectangle", + "width": 100, + "x": 300, + "y": 100, + }, + Object { + "height": 200, + "id": "rect-1_copy", + "type": "rectangle", + "width": 100, + "x": 100, + "y": 200, + }, +] +`; + +exports[`Test Transform should transform linear elements 1`] = ` +Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "endArrowhead": "arrow", + "endBinding": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 0, + "id": "id8", + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 300, + 0, + ], + ], + "roughness": 1, + "roundness": null, + "seed": 969706708, + "startArrowhead": null, + "startBinding": null, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "arrow", + "updated": 1, + "version": 1, + "versionNonce": 0, + "width": 300, + "x": 100, + "y": 20, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "endArrowhead": "triangle", + "endBinding": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 0, + "id": "id9", + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 300, + 0, + ], + ], + "roughness": 1, + "roundness": null, + "seed": 11426412, + "startArrowhead": "dot", + "startBinding": null, + "strokeColor": "#1971c2", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "arrow", + "updated": 1, + "version": 1, + "versionNonce": 0, + "width": 300, + "x": 450, + "y": 20, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "endArrowhead": null, + "endBinding": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 0, + "id": "id10", + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 300, + 0, + ], + ], + "roughness": 1, + "roundness": null, + "seed": 1808519764, + "startArrowhead": null, + "startBinding": null, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "line", + "updated": 1, + "version": 1, + "versionNonce": 0, + "width": 300, + "x": 100, + "y": 60, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": null, + "endArrowhead": null, + "endBinding": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 0, + "id": "id11", + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 300, + 0, + ], + ], + "roughness": 1, + "roundness": null, + "seed": 1699753196, + "startArrowhead": null, + "startBinding": null, + "strokeColor": "#2f9e44", + "strokeStyle": "dotted", + "strokeWidth": 2, + "type": "line", + "updated": 1, + "version": 1, + "versionNonce": 0, + "width": 300, + "x": 450, + "y": 60, + }, +] +`; + +exports[`Test Transform should transform regular shapes 1`] = ` +Array [ + Object { + "height": 100, + "id": "id0", + "type": "rectangle", + "width": 100, + "x": 100, + "y": 100, + }, + Object { + "height": 100, + "id": "id1", + "type": "ellipse", + "width": 100, + "x": 100, + "y": 250, + }, + Object { + "height": 100, + "id": "id2", + "type": "diamond", + "width": 100, + "x": 100, + "y": 400, + }, + Object { + "backgroundColor": "#c0eb75", + "height": 100, + "id": "id3", + "strokeWidth": 2, + "type": "rectangle", + "width": 200, + "x": 300, + "y": 100, + }, + Object { + "backgroundColor": "#ffc9c9", + "fillStyle": "solid", + "height": 100, + "id": "id4", + "strokeStyle": "dotted", + "strokeWidth": 2, + "type": "ellipse", + "width": 200, + "x": 300, + "y": 250, + }, + Object { + "backgroundColor": "#a5d8ff", + "fillStyle": "cross-hatch", + "height": 100, + "id": "id5", + "strokeColor": "#1971c2", + "strokeStyle": "dashed", + "strokeWidth": 2, + "type": "diamond", + "width": 200, + "x": 300, + "y": 400, + }, +] +`; + +exports[`Test Transform should transform text element 1`] = ` +Array [ + Object { + "fontFamily": 1, + "fontSize": 20, + "height": 25, + "id": "id6", + "text": "HELLO WORLD!", + "type": "text", + "width": 120, + "x": 100, + "y": 100, + }, + Object { + "fontFamily": 1, + "fontSize": 20, + "height": 25, + "id": "id7", + "strokeColor": "#5f3dc4", + "text": "STYLED HELLO WORLD!", + "type": "text", + "width": 190, + "x": 100, + "y": 150, + }, +] +`; + +exports[`Test Transform should transform to labelled arrows when label provided for arrows 1`] = ` +Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id25", + "type": "text", + }, + ], + "endArrowhead": "arrow", + "endBinding": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 0, + "id": "id24", + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 300, + 0, + ], + ], + "roughness": 1, + "roundness": null, + "seed": 786617580, + "startArrowhead": null, + "startBinding": null, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "arrow", + "updated": 1, + "version": 2, + "versionNonce": 2081511276, + "width": 300, + "x": 100, + "y": 100, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": null, + "containerId": "id24", + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 25, + "id": "id25", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "LABELED ARROW", + "roughness": 1, + "roundness": null, + "seed": 1158823892, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "LABELED ARROW", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": 165881172, + "verticalAlign": "middle", + "width": 130, + "x": 185, + "y": 87.5, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id27", + "type": "text", + }, + ], + "endArrowhead": "arrow", + "endBinding": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 0, + "id": "id26", + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 300, + 0, + ], + ], + "roughness": 1, + "roundness": null, + "seed": 1431013868, + "startArrowhead": null, + "startBinding": null, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "arrow", + "updated": 1, + "version": 2, + "versionNonce": 496725100, + "width": 300, + "x": 100, + "y": 200, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": null, + "containerId": "id26", + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 25, + "id": "id27", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "STYLED LABELED ARROW", + "roughness": 1, + "roundness": null, + "seed": 511400660, + "strokeColor": "#099268", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "STYLED LABELED ARROW", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": 762372180, + "verticalAlign": "middle", + "width": 200, + "x": 150, + "y": 187.5, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id29", + "type": "text", + }, + ], + "endArrowhead": "arrow", + "endBinding": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 130, + "id": "id28", + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 300, + 0, + ], + ], + "roughness": 1, + "roundness": null, + "seed": 1187708652, + "startArrowhead": null, + "startBinding": null, + "strokeColor": "#1098ad", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "arrow", + "updated": 1, + "version": 3, + "versionNonce": 1863048020, + "width": 300, + "x": 100, + "y": 300, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": null, + "containerId": "id28", + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 50, + "id": "id29", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "ANOTHER STYLED LABELLED ARROW", + "roughness": 1, + "roundness": null, + "seed": 513390036, + "strokeColor": "#1098ad", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "ANOTHER STYLED +LABELLED ARROW", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": 1018246124, + "verticalAlign": "middle", + "width": 150, + "x": 175, + "y": 275, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id31", + "type": "text", + }, + ], + "endArrowhead": "arrow", + "endBinding": null, + "fillStyle": "hachure", + "groupIds": Array [], + "height": 130, + "id": "id30", + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 300, + 0, + ], + ], + "roughness": 1, + "roundness": null, + "seed": 152916180, + "startArrowhead": null, + "startBinding": null, + "strokeColor": "#1098ad", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "arrow", + "updated": 1, + "version": 3, + "versionNonce": 1548626156, + "width": 300, + "x": 100, + "y": 400, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": null, + "containerId": "id30", + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 50, + "id": "id31", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "ANOTHER STYLED LABELLED ARROW", + "roughness": 1, + "roundness": null, + "seed": 515626604, + "strokeColor": "#099268", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "ANOTHER STYLED +LABELLED ARROW", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": 1974873044, + "verticalAlign": "middle", + "width": 150, + "x": 175, + "y": 375, + }, +] +`; + +exports[`Test Transform should transform to text containers when label provided 1`] = ` +Array [ + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id13", + "type": "text", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "height": 35, + "id": "id12", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": 2026268628, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 4, + "versionNonce": 1095074516, + "width": 250, + "x": 100, + "y": 100, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": null, + "containerId": "id12", + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 25, + "id": "id13", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "RECTANGLE TEXT CONTAINER", + "roughness": 1, + "roundness": null, + "seed": 722710380, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "RECTANGLE TEXT CONTAINER", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": 31966316, + "verticalAlign": "middle", + "width": 240, + "x": 105, + "y": 105, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id15", + "type": "text", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "height": 85, + "id": "id14", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": 1152780372, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "ellipse", + "updated": 1, + "version": 3, + "versionNonce": 1215994220, + "width": 200, + "x": 500, + "y": 100, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": null, + "containerId": "id14", + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 50, + "id": "id15", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "ELLIPSE TEXT CONTAINER", + "roughness": 1, + "roundness": null, + "seed": 265049836, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "ELLIPSE TEXT +CONTAINER", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": 86442836, + "verticalAlign": "middle", + "width": 130, + "x": 534.7893218813452, + "y": 117.44796179957173, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id17", + "type": "text", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "height": 170, + "id": "id16", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": 121408492, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "diamond", + "updated": 1, + "version": 3, + "versionNonce": 1943354964, + "width": 280, + "x": 100, + "y": 150, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": null, + "containerId": "id16", + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 75, + "id": "id17", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "DIAMOND +TEXT CONTAINER", + "roughness": 1, + "roundness": null, + "seed": 26441940, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "DIAMOND +TEXT +CONTAINER", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": 1306755308, + "verticalAlign": "middle", + "width": 90, + "x": 195, + "y": 197.5, + }, + Object { + "angle": 0, + "backgroundColor": "#fff3bf", + "boundElements": Array [ + Object { + "id": "id19", + "type": "text", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "height": 120, + "id": "id18", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": 348279764, + "strokeColor": "#1e1e1e", + "strokeStyle": "solid", + "strokeWidth": 2, + "type": "diamond", + "updated": 1, + "version": 3, + "versionNonce": 353449452, + "width": 300, + "x": 100, + "y": 400, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": null, + "containerId": "id18", + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 50, + "id": "id19", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "STYLED DIAMOND TEXT CONTAINER", + "roughness": 1, + "roundness": null, + "seed": 1310491500, + "strokeColor": "#099268", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "STYLED DIAMOND +TEXT CONTAINER", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": 1748397780, + "verticalAlign": "middle", + "width": 140, + "x": 180, + "y": 435, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id21", + "type": "text", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "height": 85, + "id": "id20", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": 801871980, + "strokeColor": "#c2255c", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "rectangle", + "updated": 1, + "version": 3, + "versionNonce": 463456724, + "width": 200, + "x": 500, + "y": 300, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": null, + "containerId": "id20", + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 75, + "id": "id21", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "TOP LEFT ALIGNED RECTANGLE TEXT CONTAINER", + "roughness": 1, + "roundness": null, + "seed": 917075028, + "strokeColor": "#c2255c", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "TOP LEFT ALIGNED +RECTANGLE TEXT +CONTAINER", + "textAlign": "left", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": 1182362988, + "verticalAlign": "top", + "width": 170, + "x": 505, + "y": 305, + }, + Object { + "angle": 0, + "backgroundColor": "#ffec99", + "boundElements": Array [ + Object { + "id": "id23", + "type": "text", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "height": 120, + "id": "id22", + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": 170880852, + "strokeColor": "#f08c00", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "ellipse", + "updated": 1, + "version": 3, + "versionNonce": 1903559276, + "width": 200, + "x": 500, + "y": 500, + }, + Object { + "angle": 0, + "backgroundColor": "transparent", + "baseline": 0, + "boundElements": null, + "containerId": "id22", + "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, + "groupIds": Array [], + "height": 75, + "id": "id23", + "isDeleted": false, + "lineHeight": 1.25, + "link": null, + "locked": false, + "opacity": 100, + "originalText": "STYLED ELLIPSE TEXT CONTAINER", + "roughness": 1, + "roundness": null, + "seed": 104914924, + "strokeColor": "#c2255c", + "strokeStyle": "solid", + "strokeWidth": 1, + "text": "STYLED +ELLIPSE TEXT +CONTAINER", + "textAlign": "center", + "type": "text", + "updated": 1, + "version": 2, + "versionNonce": 179481172, + "verticalAlign": "middle", + "width": 130, + "x": 534.7893218813452, + "y": 522.5735931288071, + }, +] +`; diff --git a/src/data/transform.test.ts b/src/data/transform.test.ts new file mode 100644 index 0000000000..b30cb206ed --- /dev/null +++ b/src/data/transform.test.ts @@ -0,0 +1,408 @@ +import { convertToExcalidrawElements } from "./transform"; +import { ImportedDataState } from "./types"; + +describe("Test Transform", () => { + it("should transform regular shapes", () => { + const elements = [ + { + type: "rectangle", + x: 100, + y: 100, + }, + { + type: "ellipse", + x: 100, + y: 250, + }, + { + type: "diamond", + x: 100, + y: 400, + }, + { + type: "rectangle", + x: 300, + y: 100, + width: 200, + height: 100, + backgroundColor: "#c0eb75", + strokeWidth: 2, + }, + { + type: "ellipse", + x: 300, + y: 250, + width: 200, + height: 100, + backgroundColor: "#ffc9c9", + strokeStyle: "dotted", + fillStyle: "solid", + strokeWidth: 2, + }, + { + type: "diamond", + x: 300, + y: 400, + width: 200, + height: 100, + backgroundColor: "#a5d8ff", + strokeColor: "#1971c2", + strokeStyle: "dashed", + fillStyle: "cross-hatch", + strokeWidth: 2, + }, + ]; + + expect( + convertToExcalidrawElements(elements as ImportedDataState["elements"]), + ).toMatchSnapshot(); + }); + + it("should transform text element", () => { + const elements = [ + { + type: "text", + x: 100, + y: 100, + text: "HELLO WORLD!", + }, + { + type: "text", + x: 100, + y: 150, + text: "STYLED HELLO WORLD!", + fontSize: 20, + strokeColor: "#5f3dc4", + }, + ]; + expect( + convertToExcalidrawElements(elements as ImportedDataState["elements"]), + ).toMatchSnapshot(); + }); + + it("should transform linear elements", () => { + const elements = [ + { + type: "arrow", + x: 100, + y: 20, + }, + { + type: "arrow", + x: 450, + y: 20, + startArrowhead: "dot", + endArrowhead: "triangle", + strokeColor: "#1971c2", + strokeWidth: 2, + }, + { + type: "line", + x: 100, + y: 60, + }, + { + type: "line", + x: 450, + y: 60, + strokeColor: "#2f9e44", + strokeWidth: 2, + strokeStyle: "dotted", + }, + ]; + expect( + convertToExcalidrawElements(elements as ImportedDataState["elements"]), + ).toMatchSnapshot(); + }); + + it("should transform to text containers when label provided", () => { + const elements = [ + { + type: "rectangle", + x: 100, + y: 100, + label: { + text: "RECTANGLE TEXT CONTAINER", + }, + }, + { + type: "ellipse", + x: 500, + y: 100, + width: 200, + label: { + text: "ELLIPSE TEXT CONTAINER", + }, + }, + { + type: "diamond", + x: 100, + y: 150, + width: 280, + label: { + text: "DIAMOND\nTEXT CONTAINER", + }, + }, + { + type: "diamond", + x: 100, + y: 400, + width: 300, + backgroundColor: "#fff3bf", + strokeWidth: 2, + label: { + text: "STYLED DIAMOND TEXT CONTAINER", + strokeColor: "#099268", + fontSize: 20, + }, + }, + { + type: "rectangle", + x: 500, + y: 300, + width: 200, + strokeColor: "#c2255c", + label: { + text: "TOP LEFT ALIGNED RECTANGLE TEXT CONTAINER", + textAlign: "left", + verticalAlign: "top", + fontSize: 20, + }, + }, + { + type: "ellipse", + x: 500, + y: 500, + strokeColor: "#f08c00", + backgroundColor: "#ffec99", + width: 200, + label: { + text: "STYLED ELLIPSE TEXT CONTAINER", + strokeColor: "#c2255c", + }, + }, + ]; + expect( + convertToExcalidrawElements(elements as ImportedDataState["elements"]), + ).toMatchSnapshot(); + }); + it("should transform to labelled arrows when label provided for arrows", () => { + const elements = [ + { + type: "arrow", + x: 100, + y: 100, + label: { + text: "LABELED ARROW", + }, + }, + { + type: "arrow", + x: 100, + y: 200, + label: { + text: "STYLED LABELED ARROW", + strokeColor: "#099268", + fontSize: 20, + }, + }, + { + type: "arrow", + x: 100, + y: 300, + strokeColor: "#1098ad", + strokeWidth: 2, + label: { + text: "ANOTHER STYLED LABELLED ARROW", + }, + }, + { + type: "arrow", + x: 100, + y: 400, + strokeColor: "#1098ad", + strokeWidth: 2, + label: { + text: "ANOTHER STYLED LABELLED ARROW", + strokeColor: "#099268", + }, + }, + ]; + expect( + convertToExcalidrawElements(elements as ImportedDataState["elements"]), + ).toMatchSnapshot(); + }); + + describe("Test arrow bindings", () => { + it("should bind arrows to shapes when start / end provided without ids", () => { + const elements = [ + { + type: "arrow", + x: 255, + y: 239, + label: { + text: "HELLO WORLD!!", + }, + start: { + type: "rectangle", + }, + end: { + type: "ellipse", + }, + }, + ]; + expect( + convertToExcalidrawElements(elements as ImportedDataState["elements"]), + ).toMatchSnapshot(); + }); + + it("should bind arrows to text when start / end provided without ids", () => { + const elements = [ + { + type: "arrow", + x: 255, + y: 239, + label: { + text: "HELLO WORLD!!", + }, + start: { + type: "text", + text: "HEYYYYY", + }, + end: { + type: "text", + text: "WHATS UP ?", + }, + }, + ]; + expect( + convertToExcalidrawElements(elements as ImportedDataState["elements"]), + ).toMatchSnapshot(); + }); + + it("should bind arrows to existinging shapes when start / end provided with ids", () => { + const elements = [ + { + type: "ellipse", + id: "ellipse-1", + strokeColor: "#66a80f", + x: 630, + y: 316, + width: 300, + height: 300, + backgroundColor: "#d8f5a2", + }, + { + type: "diamond", + id: "diamond-1", + strokeColor: "#9c36b5", + width: 140, + x: 96, + y: 400, + }, + { + type: "arrow", + x: 247, + y: 420, + width: 395, + height: 35, + strokeColor: "#1864ab", + start: { + type: "rectangle", + width: 300, + height: 300, + }, + end: { + type: "ellipse", + id: "ellipse-1", + }, + }, + { + type: "arrow", + x: 227, + y: 450, + width: 400, + strokeColor: "#e67700", + start: { + type: "diamond", + id: "diamond-1", + }, + end: { + type: "ellipse", + id: "ellipse-1", + }, + }, + ]; + expect( + convertToExcalidrawElements(elements as ImportedDataState["elements"]), + ).toMatchSnapshot(); + }); + + it("should bind arrows to existing text elements when start / end provided with ids", () => { + const elements = [ + { + x: 100, + y: 239, + type: "text", + text: "HEYYYYY", + id: "text-1", + strokeColor: "#c2255c", + }, + { + type: "rectangle", + x: 560, + y: 139, + id: "rect-1", + width: 100, + height: 200, + backgroundColor: "#bac8ff", + }, + { + type: "arrow", + x: 255, + y: 239, + label: { + text: "HELLO WORLD!!", + }, + start: { + type: "text", + id: "text-1", + }, + end: { + type: "rectangle", + id: "rect-1", + }, + }, + ]; + + expect( + convertToExcalidrawElements(elements as ImportedDataState["elements"]), + ).toMatchSnapshot(); + }); + }); + + it("should generate new ids if multiple elements contain same ids", () => { + const elements = [ + { + type: "rectangle", + x: 300, + y: 100, + id: "rect-1", + width: 100, + height: 200, + }, + + { + type: "rectangle", + x: 100, + y: 200, + id: "rect-1", + width: 100, + height: 200, + }, + ]; + expect( + convertToExcalidrawElements(elements as ImportedDataState["elements"]), + ).toMatchSnapshot(); + }); +}); diff --git a/src/packages/excalidraw/example/App.tsx b/src/packages/excalidraw/example/App.tsx index decd47fef7..cac11a0cc4 100644 --- a/src/packages/excalidraw/example/App.tsx +++ b/src/packages/excalidraw/example/App.tsx @@ -204,7 +204,6 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) { value: 32, }, }, - { type: "arrow", x: 300,