mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-04-14 16:40:58 -04:00
Add more tests
This commit is contained in:
Aakansha Doshi
parent
1784f5b31e
commit
9e6751c5fb
3 changed files with 294 additions and 239 deletions
|
|
@ -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<String>,
|
||||
"isDeleted": false,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"seed": Any<Number>,
|
||||
"strokeColor": "#66a80f",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 1,
|
||||
"type": "ellipse",
|
||||
"updated": 1,
|
||||
"version": 3,
|
||||
"versionNonce": Any<Number>,
|
||||
"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<String>,
|
||||
"isDeleted": false,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"seed": Any<Number>,
|
||||
"strokeColor": "#9c36b5",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 1,
|
||||
"type": "diamond",
|
||||
"updated": 1,
|
||||
"version": 2,
|
||||
"versionNonce": Any<Number>,
|
||||
"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<String>,
|
||||
"isDeleted": false,
|
||||
"lastCommittedPoint": null,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"points": Array [
|
||||
Array [
|
||||
0,
|
||||
0,
|
||||
],
|
||||
Array [
|
||||
395,
|
||||
35,
|
||||
],
|
||||
],
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"seed": Any<Number>,
|
||||
"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<Number>,
|
||||
"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<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`] = `
|
||||
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<String>,
|
||||
"isDeleted": false,
|
||||
"lastCommittedPoint": null,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"points": Array [
|
||||
Array [
|
||||
0,
|
||||
0,
|
||||
],
|
||||
Array [
|
||||
400,
|
||||
0,
|
||||
],
|
||||
],
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"seed": Any<Number>,
|
||||
"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<Number>,
|
||||
"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<String>,
|
||||
"isDeleted": false,
|
||||
"lineHeight": 1.25,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"originalText": "Whats up ?",
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"seed": Any<Number>,
|
||||
"strokeColor": "#1e1e1e",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 1,
|
||||
"type": "rectangle",
|
||||
"text": "Whats up ?",
|
||||
"textAlign": "left",
|
||||
"type": "text",
|
||||
"updated": 1,
|
||||
"version": 2,
|
||||
"version": 3,
|
||||
"versionNonce": Any<Number>,
|
||||
"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<String>,
|
||||
"isDeleted": false,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"seed": Any<Number>,
|
||||
"strokeColor": "#66a80f",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 1,
|
||||
"type": "ellipse",
|
||||
"updated": 1,
|
||||
"version": 3,
|
||||
"versionNonce": Any<Number>,
|
||||
"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<String>,
|
||||
"isDeleted": false,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"seed": Any<Number>,
|
||||
"strokeColor": "#9c36b5",
|
||||
"strokeStyle": "solid",
|
||||
"strokeWidth": 1,
|
||||
"type": "diamond",
|
||||
"updated": 1,
|
||||
"version": 2,
|
||||
"versionNonce": Any<Number>,
|
||||
"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<String>,
|
||||
"isDeleted": false,
|
||||
"lastCommittedPoint": null,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"points": Array [
|
||||
Array [
|
||||
0,
|
||||
0,
|
||||
],
|
||||
Array [
|
||||
395,
|
||||
35,
|
||||
],
|
||||
],
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"seed": Any<Number>,
|
||||
"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<Number>,
|
||||
"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<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 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<String>,
|
||||
"isDeleted": false,
|
||||
"lastCommittedPoint": null,
|
||||
"link": null,
|
||||
"locked": false,
|
||||
"opacity": 100,
|
||||
"points": Array [
|
||||
Array [
|
||||
0,
|
||||
0,
|
||||
],
|
||||
Array [
|
||||
400,
|
||||
0,
|
||||
],
|
||||
],
|
||||
"roughness": 1,
|
||||
"roundness": null,
|
||||
"seed": Any<Number>,
|
||||
"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<Number>,
|
||||
"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,
|
||||
|
|
|
|||
|
|
@ -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", () => {
|
||||
|
|
|
|||
|
|
@ -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 =
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue