From e74aa2ac22a961bff8c7b935170594b046f5f9f6 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Wed, 13 Sep 2023 21:18:22 -0700 Subject: [PATCH] add step notes to test --- e2etests/testdata/files/simple_grid_edges.d2 | 61 ++- .../simple_grid_edges/dagre/board.exp.json | 510 ++++++++++++++++-- .../simple_grid_edges/dagre/sketch.exp.svg | 174 +++--- .../simple_grid_edges/elk/board.exp.json | 510 ++++++++++++++++-- .../simple_grid_edges/elk/sketch.exp.svg | 174 +++--- 5 files changed, 1172 insertions(+), 257 deletions(-) diff --git a/e2etests/testdata/files/simple_grid_edges.d2 b/e2etests/testdata/files/simple_grid_edges.d2 index 79c632a32..078dd4c32 100644 --- a/e2etests/testdata/files/simple_grid_edges.d2 +++ b/e2etests/testdata/files/simple_grid_edges.d2 @@ -1,6 +1,7 @@ -grid-rows: 3 +grid-rows: 4 grid-columns: 5 horizontal-gap: 20 +vertical-gap: 5 *.class: [text; blue] @@ -15,7 +16,6 @@ horizontal-gap: 20 bold: false } } - 0,1: { label: "Set up an\nAtlassian site" class: [text; gray] @@ -26,16 +26,33 @@ horizontal-gap: 20 class: [text; gray] } 0,4: forge\ntunnel -1,0: forge\nlogin -1,1: forge\ncreate -1,2: forge\ndeploy -1,3: forge\ninstall -1,4: { + +1*.class: note +1*.label: "" +1,0 +1,1 +1,2 +1,3 +1,4 + +2,0: forge\nlogin +2,1: forge\ncreate +2,2: forge\ndeploy +2,3: forge\ninstall +2,4: { shape: diamond label: "Hot reload\nchanges?" class: [text; gray] } -2,0: "" { + +3*.class: note +3,0: Step 1 +3,1: Step 2 +3,2: Step 3 +3,3: Step 4 +3,4: "" + +4,0: "" { grid-rows: 3 grid-columns: 1 grid-gap: 0 @@ -67,27 +84,27 @@ horizontal-gap: 20 style.font-color: "#cecece" } } -2,1.class: empty -2,2.class: empty -2,3.class: empty -2,4: forge\ndeploy +4,1.class: empty +4,2.class: empty +4,3.class: empty +4,4: forge\ndeploy -0,0 -> 1,0 -> 1,1 -> 1,2 -> 1,3 -> 1,4: { +0,0 -> 2,0 -> 2,1 -> 2,2 -> 2,3 -> 2,4: { class: arrow } -1,1 -> 0,1: { +2,1 -> 0,1: { class: arrow style.stroke: "#cecece" } -1,3 -> 0,3: { +2,3 -> 0,3: { class: arrow style.stroke: "#cecece" } -1,4 -> 0,4: Yes { +2,4 -> 0,4: Yes { class: arrow style.font-size: 10 } -1,4 -> 2,4: No { +2,4 -> 4,4: No { class: arrow style.font-size: 10 } @@ -114,6 +131,16 @@ classes: { stroke: "#cecece" border-radius: 10 } + note: { + height: 30 + label.near: top-center + style: { + font-size: 10 + bold: false + fill: transparent + stroke: transparent + } + } empty: { label: "" width: 50 diff --git a/e2etests/testdata/stable/simple_grid_edges/dagre/board.exp.json b/e2etests/testdata/stable/simple_grid_edges/dagre/board.exp.json index 1f3e3d490..f12983a4d 100644 --- a/e2etests/testdata/stable/simple_grid_edges/dagre/board.exp.json +++ b/e2etests/testdata/stable/simple_grid_edges/dagre/board.exp.json @@ -230,6 +230,226 @@ { "id": "1,0", "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 0, + "y": 65 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "1,1", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 120, + "y": 65 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "1,2", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 240, + "y": 65 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "1,3", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 360, + "y": 65 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "1,4", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 480, + "y": 65 + }, + "width": 120, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "2,0", + "type": "rectangle", "classes": [ "text", "blue" @@ -273,7 +493,7 @@ "level": 1 }, { - "id": "1,1", + "id": "2,1", "type": "rectangle", "classes": [ "text", @@ -318,7 +538,7 @@ "level": 1 }, { - "id": "1,2", + "id": "2,2", "type": "rectangle", "classes": [ "text", @@ -363,7 +583,7 @@ "level": 1 }, { - "id": "1,3", + "id": "2,3", "type": "rectangle", "classes": [ "text", @@ -408,7 +628,7 @@ "level": 1 }, { - "id": "1,4", + "id": "2,4", "type": "diamond", "classes": [ "text", @@ -453,7 +673,227 @@ "level": 1 }, { - "id": "2,0", + "id": "3,0", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 0, + "y": 165 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Step 1", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 28, + "labelHeight": 13, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "3,1", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 120, + "y": 165 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Step 2", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 28, + "labelHeight": 13, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "3,2", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 240, + "y": 165 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Step 3", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 28, + "labelHeight": 13, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "3,3", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 360, + "y": 165 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Step 4", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 29, + "labelHeight": 13, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "3,4", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 480, + "y": 165 + }, + "width": 120, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "4,0", "type": "rectangle", "pos": { "x": 0, @@ -494,7 +934,7 @@ "level": 1 }, { - "id": "2,0.a", + "id": "4,0.a", "type": "rectangle", "pos": { "x": 0, @@ -535,7 +975,7 @@ "level": 2 }, { - "id": "2,0.b", + "id": "4,0.b", "type": "rectangle", "pos": { "x": 0, @@ -576,7 +1016,7 @@ "level": 2 }, { - "id": "2,0.c", + "id": "4,0.c", "type": "rectangle", "pos": { "x": 0, @@ -617,7 +1057,7 @@ "level": 2 }, { - "id": "2,1", + "id": "4,1", "type": "rectangle", "classes": [ "empty" @@ -661,7 +1101,7 @@ "level": 1 }, { - "id": "2,2", + "id": "4,2", "type": "rectangle", "classes": [ "empty" @@ -705,7 +1145,7 @@ "level": 1 }, { - "id": "2,3", + "id": "4,3", "type": "rectangle", "classes": [ "empty" @@ -749,7 +1189,7 @@ "level": 1 }, { - "id": "2,4", + "id": "4,4", "type": "rectangle", "classes": [ "text", @@ -796,13 +1236,13 @@ ], "connections": [ { - "id": "(0,0 -> 1,0)[0]", + "id": "(0,0 -> 2,0)[0]", "classes": [ "arrow" ], "src": "0,0", "srcArrow": "none", - "dst": "1,0", + "dst": "2,0", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -837,13 +1277,13 @@ "zIndex": 0 }, { - "id": "(1,0 -> 1,1)[0]", + "id": "(2,0 -> 2,1)[0]", "classes": [ "arrow" ], - "src": "1,0", + "src": "2,0", "srcArrow": "none", - "dst": "1,1", + "dst": "2,1", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -878,13 +1318,13 @@ "zIndex": 0 }, { - "id": "(1,1 -> 1,2)[0]", + "id": "(2,1 -> 2,2)[0]", "classes": [ "arrow" ], - "src": "1,1", + "src": "2,1", "srcArrow": "none", - "dst": "1,2", + "dst": "2,2", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -919,13 +1359,13 @@ "zIndex": 0 }, { - "id": "(1,2 -> 1,3)[0]", + "id": "(2,2 -> 2,3)[0]", "classes": [ "arrow" ], - "src": "1,2", + "src": "2,2", "srcArrow": "none", - "dst": "1,3", + "dst": "2,3", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -960,13 +1400,13 @@ "zIndex": 0 }, { - "id": "(1,3 -> 1,4)[0]", + "id": "(2,3 -> 2,4)[0]", "classes": [ "arrow" ], - "src": "1,3", + "src": "2,3", "srcArrow": "none", - "dst": "1,4", + "dst": "2,4", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -1001,11 +1441,11 @@ "zIndex": 0 }, { - "id": "(1,1 -> 0,1)[0]", + "id": "(2,1 -> 0,1)[0]", "classes": [ "arrow" ], - "src": "1,1", + "src": "2,1", "srcArrow": "none", "dst": "0,1", "dstArrow": "arrow", @@ -1042,11 +1482,11 @@ "zIndex": 0 }, { - "id": "(1,3 -> 0,3)[0]", + "id": "(2,3 -> 0,3)[0]", "classes": [ "arrow" ], - "src": "1,3", + "src": "2,3", "srcArrow": "none", "dst": "0,3", "dstArrow": "arrow", @@ -1083,11 +1523,11 @@ "zIndex": 0 }, { - "id": "(1,4 -> 0,4)[0]", + "id": "(2,4 -> 0,4)[0]", "classes": [ "arrow" ], - "src": "1,4", + "src": "2,4", "srcArrow": "none", "dst": "0,4", "dstArrow": "arrow", @@ -1124,13 +1564,13 @@ "zIndex": 0 }, { - "id": "(1,4 -> 2,4)[0]", + "id": "(2,4 -> 4,4)[0]", "classes": [ "arrow" ], - "src": "1,4", + "src": "2,4", "srcArrow": "none", - "dst": "2,4", + "dst": "4,4", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, diff --git a/e2etests/testdata/stable/simple_grid_edges/dagre/sketch.exp.svg b/e2etests/testdata/stable/simple_grid_edges/dagre/sketch.exp.svg index d57150a7d..6ee1c8daa 100644 --- a/e2etests/testdata/stable/simple_grid_edges/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/simple_grid_edges/dagre/sketch.exp.svg @@ -1,24 +1,24 @@ -npm i -g@forge/cliSet up anAtlassian siteView the helloworld appforgetunnelforgeloginforgecreateforgedeployforgeinstallHot reloadchanges?forgedeploy⬤ Forge CLI⬤ Required⬤ Optional YesNo + .d2-4057031684 .fill-N1{fill:#0A0F25;} + .d2-4057031684 .fill-N2{fill:#676C7E;} + .d2-4057031684 .fill-N3{fill:#9499AB;} + .d2-4057031684 .fill-N4{fill:#CFD2DD;} + .d2-4057031684 .fill-N5{fill:#DEE1EB;} + .d2-4057031684 .fill-N6{fill:#EEF1F8;} + .d2-4057031684 .fill-N7{fill:#FFFFFF;} + .d2-4057031684 .fill-B1{fill:#0D32B2;} + .d2-4057031684 .fill-B2{fill:#0D32B2;} + .d2-4057031684 .fill-B3{fill:#E3E9FD;} + .d2-4057031684 .fill-B4{fill:#E3E9FD;} + .d2-4057031684 .fill-B5{fill:#EDF0FD;} + .d2-4057031684 .fill-B6{fill:#F7F8FE;} + .d2-4057031684 .fill-AA2{fill:#4A6FF3;} + .d2-4057031684 .fill-AA4{fill:#EDF0FD;} + .d2-4057031684 .fill-AA5{fill:#F7F8FE;} + .d2-4057031684 .fill-AB4{fill:#EDF0FD;} + .d2-4057031684 .fill-AB5{fill:#F7F8FE;} + .d2-4057031684 .stroke-N1{stroke:#0A0F25;} + .d2-4057031684 .stroke-N2{stroke:#676C7E;} + .d2-4057031684 .stroke-N3{stroke:#9499AB;} + .d2-4057031684 .stroke-N4{stroke:#CFD2DD;} + .d2-4057031684 .stroke-N5{stroke:#DEE1EB;} + .d2-4057031684 .stroke-N6{stroke:#EEF1F8;} + .d2-4057031684 .stroke-N7{stroke:#FFFFFF;} + .d2-4057031684 .stroke-B1{stroke:#0D32B2;} + .d2-4057031684 .stroke-B2{stroke:#0D32B2;} + .d2-4057031684 .stroke-B3{stroke:#E3E9FD;} + .d2-4057031684 .stroke-B4{stroke:#E3E9FD;} + .d2-4057031684 .stroke-B5{stroke:#EDF0FD;} + .d2-4057031684 .stroke-B6{stroke:#F7F8FE;} + .d2-4057031684 .stroke-AA2{stroke:#4A6FF3;} + .d2-4057031684 .stroke-AA4{stroke:#EDF0FD;} + .d2-4057031684 .stroke-AA5{stroke:#F7F8FE;} + .d2-4057031684 .stroke-AB4{stroke:#EDF0FD;} + .d2-4057031684 .stroke-AB5{stroke:#F7F8FE;} + .d2-4057031684 .background-color-N1{background-color:#0A0F25;} + .d2-4057031684 .background-color-N2{background-color:#676C7E;} + .d2-4057031684 .background-color-N3{background-color:#9499AB;} + .d2-4057031684 .background-color-N4{background-color:#CFD2DD;} + .d2-4057031684 .background-color-N5{background-color:#DEE1EB;} + .d2-4057031684 .background-color-N6{background-color:#EEF1F8;} + .d2-4057031684 .background-color-N7{background-color:#FFFFFF;} + .d2-4057031684 .background-color-B1{background-color:#0D32B2;} + .d2-4057031684 .background-color-B2{background-color:#0D32B2;} + .d2-4057031684 .background-color-B3{background-color:#E3E9FD;} + .d2-4057031684 .background-color-B4{background-color:#E3E9FD;} + .d2-4057031684 .background-color-B5{background-color:#EDF0FD;} + .d2-4057031684 .background-color-B6{background-color:#F7F8FE;} + .d2-4057031684 .background-color-AA2{background-color:#4A6FF3;} + .d2-4057031684 .background-color-AA4{background-color:#EDF0FD;} + .d2-4057031684 .background-color-AA5{background-color:#F7F8FE;} + .d2-4057031684 .background-color-AB4{background-color:#EDF0FD;} + .d2-4057031684 .background-color-AB5{background-color:#F7F8FE;} + .d2-4057031684 .color-N1{color:#0A0F25;} + .d2-4057031684 .color-N2{color:#676C7E;} + .d2-4057031684 .color-N3{color:#9499AB;} + .d2-4057031684 .color-N4{color:#CFD2DD;} + .d2-4057031684 .color-N5{color:#DEE1EB;} + .d2-4057031684 .color-N6{color:#EEF1F8;} + .d2-4057031684 .color-N7{color:#FFFFFF;} + .d2-4057031684 .color-B1{color:#0D32B2;} + .d2-4057031684 .color-B2{color:#0D32B2;} + .d2-4057031684 .color-B3{color:#E3E9FD;} + .d2-4057031684 .color-B4{color:#E3E9FD;} + .d2-4057031684 .color-B5{color:#EDF0FD;} + .d2-4057031684 .color-B6{color:#F7F8FE;} + .d2-4057031684 .color-AA2{color:#4A6FF3;} + .d2-4057031684 .color-AA4{color:#EDF0FD;} + .d2-4057031684 .color-AA5{color:#F7F8FE;} + .d2-4057031684 .color-AB4{color:#EDF0FD;} + .d2-4057031684 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]>npm i -g@forge/cliSet up anAtlassian siteView the helloworld appforgetunnelforgeloginforgecreateforgedeployforgeinstallHot reloadchanges?Step 1Step 2Step 3Step 4forgedeploy⬤ Forge CLI⬤ Required⬤ Optional YesNo @@ -114,6 +114,10 @@ + + + + diff --git a/e2etests/testdata/stable/simple_grid_edges/elk/board.exp.json b/e2etests/testdata/stable/simple_grid_edges/elk/board.exp.json index 1f3e3d490..f12983a4d 100644 --- a/e2etests/testdata/stable/simple_grid_edges/elk/board.exp.json +++ b/e2etests/testdata/stable/simple_grid_edges/elk/board.exp.json @@ -230,6 +230,226 @@ { "id": "1,0", "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 0, + "y": 65 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "1,1", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 120, + "y": 65 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "1,2", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 240, + "y": 65 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "1,3", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 360, + "y": 65 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "1,4", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 480, + "y": 65 + }, + "width": 120, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "2,0", + "type": "rectangle", "classes": [ "text", "blue" @@ -273,7 +493,7 @@ "level": 1 }, { - "id": "1,1", + "id": "2,1", "type": "rectangle", "classes": [ "text", @@ -318,7 +538,7 @@ "level": 1 }, { - "id": "1,2", + "id": "2,2", "type": "rectangle", "classes": [ "text", @@ -363,7 +583,7 @@ "level": 1 }, { - "id": "1,3", + "id": "2,3", "type": "rectangle", "classes": [ "text", @@ -408,7 +628,7 @@ "level": 1 }, { - "id": "1,4", + "id": "2,4", "type": "diamond", "classes": [ "text", @@ -453,7 +673,227 @@ "level": 1 }, { - "id": "2,0", + "id": "3,0", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 0, + "y": 165 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Step 1", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 28, + "labelHeight": 13, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "3,1", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 120, + "y": 165 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Step 2", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 28, + "labelHeight": 13, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "3,2", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 240, + "y": 165 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Step 3", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 28, + "labelHeight": 13, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "3,3", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 360, + "y": 165 + }, + "width": 100, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Step 4", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 29, + "labelHeight": 13, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "3,4", + "type": "rectangle", + "classes": [ + "note" + ], + "pos": { + "x": 480, + "y": 165 + }, + "width": 120, + "height": 30, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "transparent", + "stroke": "transparent", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "4,0", "type": "rectangle", "pos": { "x": 0, @@ -494,7 +934,7 @@ "level": 1 }, { - "id": "2,0.a", + "id": "4,0.a", "type": "rectangle", "pos": { "x": 0, @@ -535,7 +975,7 @@ "level": 2 }, { - "id": "2,0.b", + "id": "4,0.b", "type": "rectangle", "pos": { "x": 0, @@ -576,7 +1016,7 @@ "level": 2 }, { - "id": "2,0.c", + "id": "4,0.c", "type": "rectangle", "pos": { "x": 0, @@ -617,7 +1057,7 @@ "level": 2 }, { - "id": "2,1", + "id": "4,1", "type": "rectangle", "classes": [ "empty" @@ -661,7 +1101,7 @@ "level": 1 }, { - "id": "2,2", + "id": "4,2", "type": "rectangle", "classes": [ "empty" @@ -705,7 +1145,7 @@ "level": 1 }, { - "id": "2,3", + "id": "4,3", "type": "rectangle", "classes": [ "empty" @@ -749,7 +1189,7 @@ "level": 1 }, { - "id": "2,4", + "id": "4,4", "type": "rectangle", "classes": [ "text", @@ -796,13 +1236,13 @@ ], "connections": [ { - "id": "(0,0 -> 1,0)[0]", + "id": "(0,0 -> 2,0)[0]", "classes": [ "arrow" ], "src": "0,0", "srcArrow": "none", - "dst": "1,0", + "dst": "2,0", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -837,13 +1277,13 @@ "zIndex": 0 }, { - "id": "(1,0 -> 1,1)[0]", + "id": "(2,0 -> 2,1)[0]", "classes": [ "arrow" ], - "src": "1,0", + "src": "2,0", "srcArrow": "none", - "dst": "1,1", + "dst": "2,1", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -878,13 +1318,13 @@ "zIndex": 0 }, { - "id": "(1,1 -> 1,2)[0]", + "id": "(2,1 -> 2,2)[0]", "classes": [ "arrow" ], - "src": "1,1", + "src": "2,1", "srcArrow": "none", - "dst": "1,2", + "dst": "2,2", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -919,13 +1359,13 @@ "zIndex": 0 }, { - "id": "(1,2 -> 1,3)[0]", + "id": "(2,2 -> 2,3)[0]", "classes": [ "arrow" ], - "src": "1,2", + "src": "2,2", "srcArrow": "none", - "dst": "1,3", + "dst": "2,3", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -960,13 +1400,13 @@ "zIndex": 0 }, { - "id": "(1,3 -> 1,4)[0]", + "id": "(2,3 -> 2,4)[0]", "classes": [ "arrow" ], - "src": "1,3", + "src": "2,3", "srcArrow": "none", - "dst": "1,4", + "dst": "2,4", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -1001,11 +1441,11 @@ "zIndex": 0 }, { - "id": "(1,1 -> 0,1)[0]", + "id": "(2,1 -> 0,1)[0]", "classes": [ "arrow" ], - "src": "1,1", + "src": "2,1", "srcArrow": "none", "dst": "0,1", "dstArrow": "arrow", @@ -1042,11 +1482,11 @@ "zIndex": 0 }, { - "id": "(1,3 -> 0,3)[0]", + "id": "(2,3 -> 0,3)[0]", "classes": [ "arrow" ], - "src": "1,3", + "src": "2,3", "srcArrow": "none", "dst": "0,3", "dstArrow": "arrow", @@ -1083,11 +1523,11 @@ "zIndex": 0 }, { - "id": "(1,4 -> 0,4)[0]", + "id": "(2,4 -> 0,4)[0]", "classes": [ "arrow" ], - "src": "1,4", + "src": "2,4", "srcArrow": "none", "dst": "0,4", "dstArrow": "arrow", @@ -1124,13 +1564,13 @@ "zIndex": 0 }, { - "id": "(1,4 -> 2,4)[0]", + "id": "(2,4 -> 4,4)[0]", "classes": [ "arrow" ], - "src": "1,4", + "src": "2,4", "srcArrow": "none", - "dst": "2,4", + "dst": "4,4", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, diff --git a/e2etests/testdata/stable/simple_grid_edges/elk/sketch.exp.svg b/e2etests/testdata/stable/simple_grid_edges/elk/sketch.exp.svg index d57150a7d..6ee1c8daa 100644 --- a/e2etests/testdata/stable/simple_grid_edges/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/simple_grid_edges/elk/sketch.exp.svg @@ -1,24 +1,24 @@ -npm i -g@forge/cliSet up anAtlassian siteView the helloworld appforgetunnelforgeloginforgecreateforgedeployforgeinstallHot reloadchanges?forgedeploy⬤ Forge CLI⬤ Required⬤ Optional YesNo + .d2-4057031684 .fill-N1{fill:#0A0F25;} + .d2-4057031684 .fill-N2{fill:#676C7E;} + .d2-4057031684 .fill-N3{fill:#9499AB;} + .d2-4057031684 .fill-N4{fill:#CFD2DD;} + .d2-4057031684 .fill-N5{fill:#DEE1EB;} + .d2-4057031684 .fill-N6{fill:#EEF1F8;} + .d2-4057031684 .fill-N7{fill:#FFFFFF;} + .d2-4057031684 .fill-B1{fill:#0D32B2;} + .d2-4057031684 .fill-B2{fill:#0D32B2;} + .d2-4057031684 .fill-B3{fill:#E3E9FD;} + .d2-4057031684 .fill-B4{fill:#E3E9FD;} + .d2-4057031684 .fill-B5{fill:#EDF0FD;} + .d2-4057031684 .fill-B6{fill:#F7F8FE;} + .d2-4057031684 .fill-AA2{fill:#4A6FF3;} + .d2-4057031684 .fill-AA4{fill:#EDF0FD;} + .d2-4057031684 .fill-AA5{fill:#F7F8FE;} + .d2-4057031684 .fill-AB4{fill:#EDF0FD;} + .d2-4057031684 .fill-AB5{fill:#F7F8FE;} + .d2-4057031684 .stroke-N1{stroke:#0A0F25;} + .d2-4057031684 .stroke-N2{stroke:#676C7E;} + .d2-4057031684 .stroke-N3{stroke:#9499AB;} + .d2-4057031684 .stroke-N4{stroke:#CFD2DD;} + .d2-4057031684 .stroke-N5{stroke:#DEE1EB;} + .d2-4057031684 .stroke-N6{stroke:#EEF1F8;} + .d2-4057031684 .stroke-N7{stroke:#FFFFFF;} + .d2-4057031684 .stroke-B1{stroke:#0D32B2;} + .d2-4057031684 .stroke-B2{stroke:#0D32B2;} + .d2-4057031684 .stroke-B3{stroke:#E3E9FD;} + .d2-4057031684 .stroke-B4{stroke:#E3E9FD;} + .d2-4057031684 .stroke-B5{stroke:#EDF0FD;} + .d2-4057031684 .stroke-B6{stroke:#F7F8FE;} + .d2-4057031684 .stroke-AA2{stroke:#4A6FF3;} + .d2-4057031684 .stroke-AA4{stroke:#EDF0FD;} + .d2-4057031684 .stroke-AA5{stroke:#F7F8FE;} + .d2-4057031684 .stroke-AB4{stroke:#EDF0FD;} + .d2-4057031684 .stroke-AB5{stroke:#F7F8FE;} + .d2-4057031684 .background-color-N1{background-color:#0A0F25;} + .d2-4057031684 .background-color-N2{background-color:#676C7E;} + .d2-4057031684 .background-color-N3{background-color:#9499AB;} + .d2-4057031684 .background-color-N4{background-color:#CFD2DD;} + .d2-4057031684 .background-color-N5{background-color:#DEE1EB;} + .d2-4057031684 .background-color-N6{background-color:#EEF1F8;} + .d2-4057031684 .background-color-N7{background-color:#FFFFFF;} + .d2-4057031684 .background-color-B1{background-color:#0D32B2;} + .d2-4057031684 .background-color-B2{background-color:#0D32B2;} + .d2-4057031684 .background-color-B3{background-color:#E3E9FD;} + .d2-4057031684 .background-color-B4{background-color:#E3E9FD;} + .d2-4057031684 .background-color-B5{background-color:#EDF0FD;} + .d2-4057031684 .background-color-B6{background-color:#F7F8FE;} + .d2-4057031684 .background-color-AA2{background-color:#4A6FF3;} + .d2-4057031684 .background-color-AA4{background-color:#EDF0FD;} + .d2-4057031684 .background-color-AA5{background-color:#F7F8FE;} + .d2-4057031684 .background-color-AB4{background-color:#EDF0FD;} + .d2-4057031684 .background-color-AB5{background-color:#F7F8FE;} + .d2-4057031684 .color-N1{color:#0A0F25;} + .d2-4057031684 .color-N2{color:#676C7E;} + .d2-4057031684 .color-N3{color:#9499AB;} + .d2-4057031684 .color-N4{color:#CFD2DD;} + .d2-4057031684 .color-N5{color:#DEE1EB;} + .d2-4057031684 .color-N6{color:#EEF1F8;} + .d2-4057031684 .color-N7{color:#FFFFFF;} + .d2-4057031684 .color-B1{color:#0D32B2;} + .d2-4057031684 .color-B2{color:#0D32B2;} + .d2-4057031684 .color-B3{color:#E3E9FD;} + .d2-4057031684 .color-B4{color:#E3E9FD;} + .d2-4057031684 .color-B5{color:#EDF0FD;} + .d2-4057031684 .color-B6{color:#F7F8FE;} + .d2-4057031684 .color-AA2{color:#4A6FF3;} + .d2-4057031684 .color-AA4{color:#EDF0FD;} + .d2-4057031684 .color-AA5{color:#F7F8FE;} + .d2-4057031684 .color-AB4{color:#EDF0FD;} + .d2-4057031684 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]>npm i -g@forge/cliSet up anAtlassian siteView the helloworld appforgetunnelforgeloginforgecreateforgedeployforgeinstallHot reloadchanges?Step 1Step 2Step 3Step 4forgedeploy⬤ Forge CLI⬤ Required⬤ Optional YesNo @@ -114,6 +114,10 @@ + + + +