diff --git a/src/data/__snapshots__/transform.test.ts.snap b/src/data/__snapshots__/transform.test.ts.snap index 81935ec271..b847f13922 100644 --- a/src/data/__snapshots__/transform.test.ts.snap +++ b/src/data/__snapshots__/transform.test.ts.snap @@ -1,5 +1,215 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Test Transform Test arrow bindings should bind arrows to existing shapes when start / end provided with ids 1`] = ` +Object { + "angle": 0, + "backgroundColor": "#d8f5a2", + "boundElements": Array [ + Object { + "id": "id40", + "type": "arrow", + }, + Object { + "id": "id42", + "type": "arrow", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "height": 300, + "id": Any, + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": Any, + "strokeColor": "#66a80f", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "ellipse", + "updated": 1, + "version": 3, + "versionNonce": Any, + "width": 300, + "x": 630, + "y": 316, +} +`; + +exports[`Test Transform Test arrow bindings should bind arrows to existing shapes when start / end provided with ids 2`] = ` +Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id42", + "type": "arrow", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "height": 100, + "id": Any, + "isDeleted": false, + "link": null, + "locked": false, + "opacity": 100, + "roughness": 1, + "roundness": null, + "seed": Any, + "strokeColor": "#9c36b5", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "diamond", + "updated": 1, + "version": 2, + "versionNonce": Any, + "width": 140, + "x": 96, + "y": 400, +} +`; + +exports[`Test Transform Test arrow bindings should bind arrows to existing shapes when start / end provided with ids 3`] = ` +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": Any, + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 395, + 35, + ], + ], + "roughness": 1, + "roundness": null, + "seed": Any, + "startArrowhead": null, + "startBinding": Object { + "elementId": "id41", + "focus": -0.08139534883720931, + "gap": 1, + }, + "strokeColor": "#1864ab", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "arrow", + "updated": 1, + "version": 3, + "versionNonce": Any, + "width": 395, + "x": 247, + "y": 420, +} +`; + +exports[`Test Transform Test arrow bindings should bind arrows to existing shapes when start / end provided with ids 4`] = ` +Object { + "angle": 0, + "backgroundColor": "transparent", + "boundElements": Array [ + Object { + "id": "id40", + "type": "arrow", + }, + ], + "fillStyle": "hachure", + "groupIds": Array [], + "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`] = ` +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": Any, + "isDeleted": false, + "lastCommittedPoint": null, + "link": null, + "locked": false, + "opacity": 100, + "points": Array [ + Array [ + 0, + 0, + ], + Array [ + 400, + 0, + ], + ], + "roughness": 1, + "roundness": null, + "seed": Any, + "startArrowhead": null, + "startBinding": Object { + "elementId": "diamond-1", + "focus": 0, + "gap": 1, + }, + "strokeColor": "#e67700", + "strokeStyle": "solid", + "strokeWidth": 1, + "type": "arrow", + "updated": 1, + "version": 3, + "versionNonce": Any, + "width": 400, + "x": 227, + "y": 450, +} +`; + exports[`Test Transform Test arrow bindings should bind arrows to existing text elements when start / end provided with ids 1`] = ` Object { "angle": 0, @@ -46,34 +256,43 @@ Object { exports[`Test Transform Test arrow bindings should bind arrows to existing text elements when start / end provided with ids 2`] = ` Object { "angle": 0, - "backgroundColor": "#bac8ff", + "backgroundColor": "transparent", + "baseline": 0, "boundElements": Array [ Object { "id": "id43", "type": "arrow", }, ], + "containerId": null, "fillStyle": "hachure", + "fontFamily": 1, + "fontSize": 20, "groupIds": Array [], - "height": 200, + "height": 25, "id": Any, "isDeleted": false, + "lineHeight": 1.25, "link": null, "locked": false, "opacity": 100, + "originalText": "Whats up ?", "roughness": 1, "roundness": null, "seed": Any, "strokeColor": "#1e1e1e", "strokeStyle": "solid", "strokeWidth": 1, - "type": "rectangle", + "text": "Whats up ?", + "textAlign": "left", + "type": "text", "updated": 1, - "version": 2, + "version": 3, "versionNonce": Any, + "verticalAlign": "top", "width": 100, "x": 560, - "y": 139, + "y": 226.5, } `; @@ -89,7 +308,7 @@ Object { ], "endArrowhead": "arrow", "endBinding": Object { - "elementId": "rect-1", + "elementId": "text-2", "focus": 0, "gap": 5, }, @@ -172,216 +391,6 @@ Object { } `; -exports[`Test Transform Test arrow bindings should bind arrows to existinging shapes when start / end provided with ids 1`] = ` -Object { - "angle": 0, - "backgroundColor": "#d8f5a2", - "boundElements": Array [ - Object { - "id": "id40", - "type": "arrow", - }, - Object { - "id": "id42", - "type": "arrow", - }, - ], - "fillStyle": "hachure", - "groupIds": Array [], - "height": 300, - "id": Any, - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": null, - "seed": Any, - "strokeColor": "#66a80f", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "ellipse", - "updated": 1, - "version": 3, - "versionNonce": Any, - "width": 300, - "x": 630, - "y": 316, -} -`; - -exports[`Test Transform Test arrow bindings should bind arrows to existinging shapes when start / end provided with ids 2`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElements": Array [ - Object { - "id": "id42", - "type": "arrow", - }, - ], - "fillStyle": "hachure", - "groupIds": Array [], - "height": 100, - "id": Any, - "isDeleted": false, - "link": null, - "locked": false, - "opacity": 100, - "roughness": 1, - "roundness": null, - "seed": Any, - "strokeColor": "#9c36b5", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "diamond", - "updated": 1, - "version": 2, - "versionNonce": Any, - "width": 140, - "x": 96, - "y": 400, -} -`; - -exports[`Test Transform Test arrow bindings should bind arrows to existinging shapes when start / end provided with ids 3`] = ` -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": Any, - "isDeleted": false, - "lastCommittedPoint": null, - "link": null, - "locked": false, - "opacity": 100, - "points": Array [ - Array [ - 0, - 0, - ], - Array [ - 395, - 35, - ], - ], - "roughness": 1, - "roundness": null, - "seed": Any, - "startArrowhead": null, - "startBinding": Object { - "elementId": "id41", - "focus": -0.08139534883720931, - "gap": 1, - }, - "strokeColor": "#1864ab", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "arrow", - "updated": 1, - "version": 3, - "versionNonce": Any, - "width": 395, - "x": 247, - "y": 420, -} -`; - -exports[`Test Transform Test arrow bindings should bind arrows to existinging shapes when start / end provided with ids 4`] = ` -Object { - "angle": 0, - "backgroundColor": "transparent", - "boundElements": Array [ - Object { - "id": "id40", - "type": "arrow", - }, - ], - "fillStyle": "hachure", - "groupIds": Array [], - "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 existinging shapes when start / end provided with ids 5`] = ` -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": Any, - "isDeleted": false, - "lastCommittedPoint": null, - "link": null, - "locked": false, - "opacity": 100, - "points": Array [ - Array [ - 0, - 0, - ], - Array [ - 400, - 0, - ], - ], - "roughness": 1, - "roundness": null, - "seed": Any, - "startArrowhead": null, - "startBinding": Object { - "elementId": "diamond-1", - "focus": 0, - "gap": 1, - }, - "strokeColor": "#e67700", - "strokeStyle": "solid", - "strokeWidth": 1, - "type": "arrow", - "updated": 1, - "version": 3, - "versionNonce": Any, - "width": 400, - "x": 227, - "y": 450, -} -`; - exports[`Test Transform Test arrow bindings should bind arrows to shapes when start / end provided without ids 1`] = ` Object { "angle": 0, diff --git a/src/data/transform.test.ts b/src/data/transform.test.ts index cb727e3dab..7ff49002ee 100644 --- a/src/data/transform.test.ts +++ b/src/data/transform.test.ts @@ -206,6 +206,7 @@ describe("Test Transform", () => { }); }); }); + it("should transform to labelled arrows when label provided for arrows", () => { const elements = [ { @@ -429,7 +430,7 @@ describe("Test Transform", () => { }); }); - it("should bind arrows to existinging shapes when start / end provided with ids", () => { + it("should bind arrows to existing shapes when start / end provided with ids", () => { const elements = [ { type: "ellipse", @@ -506,13 +507,11 @@ describe("Test Transform", () => { strokeColor: "#c2255c", }, { - type: "rectangle", + type: "text", + id: "text-2", x: 560, - y: 139, - id: "rect-1", - width: 100, - height: 200, - backgroundColor: "#bac8ff", + y: 239, + text: "Whats up ?", }, { type: "arrow", @@ -525,7 +524,7 @@ describe("Test Transform", () => { id: "text-1", }, end: { - id: "rect-1", + id: "text-2", }, }, ]; @@ -544,6 +543,62 @@ describe("Test Transform", () => { }); }); }); + + it("should bind arrows to existing elements if ids are correct", () => { + 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: { + id: "text-13", + }, + end: { + id: "rect-11", + }, + }, + ]; + + const excaldrawElements = convertToExcalidrawElements( + elements as ImportedDataState["elements"], + ); + + expect(excaldrawElements.length).toBe(4); + const [, , arrow] = excaldrawElements; + expect(arrow).toMatchObject({ + type: "arrow", + x: 255, + y: 239, + boundElements: [ + { + id: "id46", + type: "text", + }, + ], + startBinding: null, + endBinding: null, + }); + }); }); it("should generate new ids if multiple elements contain same ids", () => { diff --git a/src/data/transform.ts b/src/data/transform.ts index f78b368a45..872d52ae64 100644 --- a/src/data/transform.ts +++ b/src/data/transform.ts @@ -243,12 +243,13 @@ const bindLinearElementToElement = ( type: endType, }) as ExcalidrawBindableElement; } + + bindLinearElement( + excliadrawLinearElement, + endBoundElement as ExcalidrawBindableElement, + "end", + ); } - bindLinearElement( - excliadrawLinearElement, - endBoundElement as ExcalidrawBindableElement, - "end", - ); } return { linearElement: excliadrawLinearElement, @@ -301,10 +302,6 @@ export const convertToExcalidrawElements = ( return []; } elements.forEach((element) => { - if (!element) { - return; - } - let elementId = element.id || regenerateId(null); // To make sure every element has a unique id @@ -381,12 +378,6 @@ export const convertToExcalidrawElements = ( excalidrawElements.push(linearElement); excalidrawElements.push(startBoundElement); excalidrawElements.push(endBoundElement); - if (startBoundElement && !elementWithid?.start?.id) { - excalidrawElements.push(startBoundElement); - } - if (endBoundElement && !elementWithid?.end?.id) { - excalidrawElements.push(endBoundElement); - } } else if (elementWithid.type === "line") { const width = elementWithid.width || DEFAULT_LINEAR_ELEMENT_PROPS.width; const height =