From 2870725788e77d92476ef521e2765f091c0021c1 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 12 Sep 2023 15:29:44 -0700 Subject: [PATCH 01/16] add simple_grid_edges test --- e2etests/stable_test.go | 1 + e2etests/testdata/files/simple_grid_edges.d2 | 106 +++ .../simple_grid_edges/dagre/board.exp.json | 838 ++++++++++++++++++ .../simple_grid_edges/dagre/sketch.exp.svg | 114 +++ .../simple_grid_edges/elk/board.exp.json | 838 ++++++++++++++++++ .../simple_grid_edges/elk/sketch.exp.svg | 114 +++ 6 files changed, 2011 insertions(+) create mode 100644 e2etests/testdata/files/simple_grid_edges.d2 create mode 100644 e2etests/testdata/stable/simple_grid_edges/dagre/board.exp.json create mode 100644 e2etests/testdata/stable/simple_grid_edges/dagre/sketch.exp.svg create mode 100644 e2etests/testdata/stable/simple_grid_edges/elk/board.exp.json create mode 100644 e2etests/testdata/stable/simple_grid_edges/elk/sketch.exp.svg diff --git a/e2etests/stable_test.go b/e2etests/stable_test.go index ae6f36ac0..6b01e1076 100644 --- a/e2etests/stable_test.go +++ b/e2etests/stable_test.go @@ -2833,6 +2833,7 @@ y: profits { loadFromFile(t, "overlapping_child_label"), loadFromFile(t, "dagre_spacing"), loadFromFile(t, "dagre_spacing_right"), + loadFromFile(t, "simple_grid_edges"), } runa(t, tcs) diff --git a/e2etests/testdata/files/simple_grid_edges.d2 b/e2etests/testdata/files/simple_grid_edges.d2 new file mode 100644 index 000000000..2ff20bf96 --- /dev/null +++ b/e2etests/testdata/files/simple_grid_edges.d2 @@ -0,0 +1,106 @@ +grid-rows: 3 +grid-columns: 5 +horizontal-gap: 20 + +*.class: [text; blue] + +npm: { + label: "npm i -g\n@forge/cli" + style: { + fill: "#30304c" + stroke: transparent + font-color: white + font: mono + font-size: 10 + bold: false + } +} + +b: { + label: "Set up an\nAtlassian site" + class: [text; gray] +} +c.class: empty +d: { + label: "View the hello\nworld app" + class: [text; gray] +} +e: forge\ntunnel +f: forge\nlogin +g: forge\ncreate +h: forge\ndeploy +i: forge\ninstall +j: { + shape: diamond + label: "Hot reload\nchanges?" + class: [text; gray] +} +k: "" { + grid-rows: 3 + grid-columns: 1 + grid-gap: 0 + + class: [] + + style: { + fill: transparent + stroke: transparent + } + + *.style: { + fill: transparent + stroke: transparent + font-color: "#30304c" + font-size: 10 + bold: false + } + *.label.near: center-left + *.height: 20 + a: ⬤ Forge CLI { + style.font-color: "#0033cc" + } + + b: ⬤ Required { + style.font-color: "#30304c" + } + c: ⬤ Optional { + style.font-color: "#cecece" + } +} +l.class: empty +m.class: empty +n.class: empty +o: forge\ndeploy + +classes: { + text.style: { + stroke: transparent + font-color: white + font: mono + font-size: 10 + bold: false + } + text: { + width: 100 + height: 60 + } + blue.style: { + fill: "#0033cc" + stroke: "#0033cc" + border-radius: 10 + } + gray.style: { + fill: "#cecece" + stroke: "#cecece" + border-radius: 10 + } + empty: { + label: "" + width: 50 + height: 50 + style: { + fill: transparent + stroke: transparent + } + } +} diff --git a/e2etests/testdata/stable/simple_grid_edges/dagre/board.exp.json b/e2etests/testdata/stable/simple_grid_edges/dagre/board.exp.json new file mode 100644 index 000000000..e89bdc344 --- /dev/null +++ b/e2etests/testdata/stable/simple_grid_edges/dagre/board.exp.json @@ -0,0 +1,838 @@ +{ + "name": "", + "isFolderOnly": false, + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "npm", + "type": "rectangle", + "classes": [ + "text", + "blue" + ], + "pos": { + "x": 0, + "y": 0 + }, + "width": 100, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#30304c", + "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": "npm i -g\n@forge/cli", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 59, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "b", + "type": "rectangle", + "classes": [ + "text", + "gray" + ], + "pos": { + "x": 120, + "y": 0 + }, + "width": 100, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#cecece", + "stroke": "#cecece", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Set up an\nAtlassian site", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 84, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "c", + "type": "rectangle", + "classes": [ + "empty" + ], + "pos": { + "x": 240, + "y": 0 + }, + "width": 100, + "height": 60, + "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": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "d", + "type": "rectangle", + "classes": [ + "text", + "gray" + ], + "pos": { + "x": 360, + "y": 0 + }, + "width": 100, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#cecece", + "stroke": "#cecece", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "View the hello\nworld app", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 84, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "e", + "type": "rectangle", + "classes": [ + "text", + "blue" + ], + "pos": { + "x": 480, + "y": 0 + }, + "width": 120, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#0033cc", + "stroke": "#0033cc", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "forge\ntunnel", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 36, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "f", + "type": "rectangle", + "classes": [ + "text", + "blue" + ], + "pos": { + "x": 0, + "y": 100 + }, + "width": 100, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#0033cc", + "stroke": "#0033cc", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "forge\nlogin", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 30, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "g", + "type": "rectangle", + "classes": [ + "text", + "blue" + ], + "pos": { + "x": 120, + "y": 100 + }, + "width": 100, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#0033cc", + "stroke": "#0033cc", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "forge\ncreate", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 36, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "h", + "type": "rectangle", + "classes": [ + "text", + "blue" + ], + "pos": { + "x": 240, + "y": 100 + }, + "width": 100, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#0033cc", + "stroke": "#0033cc", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "forge\ndeploy", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 36, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "i", + "type": "rectangle", + "classes": [ + "text", + "blue" + ], + "pos": { + "x": 360, + "y": 100 + }, + "width": 100, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#0033cc", + "stroke": "#0033cc", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "forge\ninstall", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 42, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "j", + "type": "diamond", + "classes": [ + "text", + "gray" + ], + "pos": { + "x": 480, + "y": 100 + }, + "width": 120, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#cecece", + "stroke": "#cecece", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Hot reload\nchanges?", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 60, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "k", + "type": "rectangle", + "pos": { + "x": 0, + "y": 200 + }, + "width": 100, + "height": 60, + "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": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "k.a", + "type": "rectangle", + "pos": { + "x": 0, + "y": 200 + }, + "width": 91, + "height": 20, + "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": "⬤ Forge CLI", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0033cc", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 51, + "labelHeight": 13, + "labelPosition": "INSIDE_MIDDLE_LEFT", + "zIndex": 0, + "level": 2 + }, + { + "id": "k.b", + "type": "rectangle", + "pos": { + "x": 0, + "y": 220 + }, + "width": 91, + "height": 20, + "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": "⬤ Required", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "#30304c", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 50, + "labelHeight": 13, + "labelPosition": "INSIDE_MIDDLE_LEFT", + "zIndex": 0, + "level": 2 + }, + { + "id": "k.c", + "type": "rectangle", + "pos": { + "x": 0, + "y": 240 + }, + "width": 91, + "height": 20, + "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": "⬤ Optional", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "#cecece", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 48, + "labelHeight": 13, + "labelPosition": "INSIDE_MIDDLE_LEFT", + "zIndex": 0, + "level": 2 + }, + { + "id": "l", + "type": "rectangle", + "classes": [ + "empty" + ], + "pos": { + "x": 120, + "y": 200 + }, + "width": 100, + "height": 60, + "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": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "m", + "type": "rectangle", + "classes": [ + "empty" + ], + "pos": { + "x": 240, + "y": 200 + }, + "width": 100, + "height": 60, + "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": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "n", + "type": "rectangle", + "classes": [ + "empty" + ], + "pos": { + "x": 360, + "y": 200 + }, + "width": 100, + "height": 60, + "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": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "o", + "type": "rectangle", + "classes": [ + "text", + "blue" + ], + "pos": { + "x": 480, + "y": 200 + }, + "width": 120, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#0033cc", + "stroke": "#0033cc", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "forge\ndeploy", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 36, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + } + ], + "connections": [], + "root": { + "id": "", + "type": "", + "pos": { + "x": 0, + "y": 0 + }, + "width": 0, + "height": 0, + "opacity": 0, + "strokeDash": 0, + "strokeWidth": 0, + "borderRadius": 0, + "fill": "N7", + "stroke": "", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 0, + "fontFamily": "", + "language": "", + "color": "", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "zIndex": 0, + "level": 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 new file mode 100644 index 000000000..458a96dfc --- /dev/null +++ b/e2etests/testdata/stable/simple_grid_edges/dagre/sketch.exp.svg @@ -0,0 +1,114 @@ +npm i -g@forge/cliSet up anAtlassian siteView the helloworld appforgetunnelforgeloginforgecreateforgedeployforgeinstallHot reloadchanges?forgedeploy⬤ Forge CLI⬤ Required⬤ Optional + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/e2etests/testdata/stable/simple_grid_edges/elk/board.exp.json b/e2etests/testdata/stable/simple_grid_edges/elk/board.exp.json new file mode 100644 index 000000000..e89bdc344 --- /dev/null +++ b/e2etests/testdata/stable/simple_grid_edges/elk/board.exp.json @@ -0,0 +1,838 @@ +{ + "name": "", + "isFolderOnly": false, + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "npm", + "type": "rectangle", + "classes": [ + "text", + "blue" + ], + "pos": { + "x": 0, + "y": 0 + }, + "width": 100, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#30304c", + "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": "npm i -g\n@forge/cli", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 59, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "b", + "type": "rectangle", + "classes": [ + "text", + "gray" + ], + "pos": { + "x": 120, + "y": 0 + }, + "width": 100, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#cecece", + "stroke": "#cecece", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Set up an\nAtlassian site", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 84, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "c", + "type": "rectangle", + "classes": [ + "empty" + ], + "pos": { + "x": 240, + "y": 0 + }, + "width": 100, + "height": 60, + "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": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "d", + "type": "rectangle", + "classes": [ + "text", + "gray" + ], + "pos": { + "x": 360, + "y": 0 + }, + "width": 100, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#cecece", + "stroke": "#cecece", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "View the hello\nworld app", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 84, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "e", + "type": "rectangle", + "classes": [ + "text", + "blue" + ], + "pos": { + "x": 480, + "y": 0 + }, + "width": 120, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#0033cc", + "stroke": "#0033cc", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "forge\ntunnel", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 36, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "f", + "type": "rectangle", + "classes": [ + "text", + "blue" + ], + "pos": { + "x": 0, + "y": 100 + }, + "width": 100, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#0033cc", + "stroke": "#0033cc", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "forge\nlogin", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 30, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "g", + "type": "rectangle", + "classes": [ + "text", + "blue" + ], + "pos": { + "x": 120, + "y": 100 + }, + "width": 100, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#0033cc", + "stroke": "#0033cc", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "forge\ncreate", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 36, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "h", + "type": "rectangle", + "classes": [ + "text", + "blue" + ], + "pos": { + "x": 240, + "y": 100 + }, + "width": 100, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#0033cc", + "stroke": "#0033cc", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "forge\ndeploy", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 36, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "i", + "type": "rectangle", + "classes": [ + "text", + "blue" + ], + "pos": { + "x": 360, + "y": 100 + }, + "width": 100, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#0033cc", + "stroke": "#0033cc", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "forge\ninstall", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 42, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "j", + "type": "diamond", + "classes": [ + "text", + "gray" + ], + "pos": { + "x": 480, + "y": 100 + }, + "width": 120, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#cecece", + "stroke": "#cecece", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "Hot reload\nchanges?", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 60, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "k", + "type": "rectangle", + "pos": { + "x": 0, + "y": 200 + }, + "width": 100, + "height": 60, + "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": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "k.a", + "type": "rectangle", + "pos": { + "x": 0, + "y": 200 + }, + "width": 91, + "height": 20, + "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": "⬤ Forge CLI", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "#0033cc", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 51, + "labelHeight": 13, + "labelPosition": "INSIDE_MIDDLE_LEFT", + "zIndex": 0, + "level": 2 + }, + { + "id": "k.b", + "type": "rectangle", + "pos": { + "x": 0, + "y": 220 + }, + "width": 91, + "height": 20, + "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": "⬤ Required", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "#30304c", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 50, + "labelHeight": 13, + "labelPosition": "INSIDE_MIDDLE_LEFT", + "zIndex": 0, + "level": 2 + }, + { + "id": "k.c", + "type": "rectangle", + "pos": { + "x": 0, + "y": 240 + }, + "width": 91, + "height": 20, + "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": "⬤ Optional", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "#cecece", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 48, + "labelHeight": 13, + "labelPosition": "INSIDE_MIDDLE_LEFT", + "zIndex": 0, + "level": 2 + }, + { + "id": "l", + "type": "rectangle", + "classes": [ + "empty" + ], + "pos": { + "x": 120, + "y": 200 + }, + "width": 100, + "height": 60, + "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": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "m", + "type": "rectangle", + "classes": [ + "empty" + ], + "pos": { + "x": 240, + "y": 200 + }, + "width": 100, + "height": 60, + "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": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "n", + "type": "rectangle", + "classes": [ + "empty" + ], + "pos": { + "x": 360, + "y": 200 + }, + "width": 100, + "height": 60, + "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": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "o", + "type": "rectangle", + "classes": [ + "text", + "blue" + ], + "pos": { + "x": 480, + "y": 200 + }, + "width": 120, + "height": 60, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 10, + "fill": "#0033cc", + "stroke": "#0033cc", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "forge\ndeploy", + "fontSize": 10, + "fontFamily": "mono", + "language": "", + "color": "white", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 36, + "labelHeight": 23, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + } + ], + "connections": [], + "root": { + "id": "", + "type": "", + "pos": { + "x": 0, + "y": 0 + }, + "width": 0, + "height": 0, + "opacity": 0, + "strokeDash": 0, + "strokeWidth": 0, + "borderRadius": 0, + "fill": "N7", + "stroke": "", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 0, + "fontFamily": "", + "language": "", + "color": "", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "zIndex": 0, + "level": 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 new file mode 100644 index 000000000..458a96dfc --- /dev/null +++ b/e2etests/testdata/stable/simple_grid_edges/elk/sketch.exp.svg @@ -0,0 +1,114 @@ +npm i -g@forge/cliSet up anAtlassian siteView the helloworld appforgetunnelforgeloginforgecreateforgedeployforgeinstallHot reloadchanges?forgedeploy⬤ Forge CLI⬤ Required⬤ Optional + + + + + + + + + + + + + + + \ No newline at end of file From 5c50f41ce978d426b7502f18606480b0afe5006e Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 12 Sep 2023 16:07:57 -0700 Subject: [PATCH 02/16] update grid edge validation --- d2compiler/compile.go | 10 ++++------ d2compiler/compile_test.go | 5 ++--- testdata/d2compiler/TestCompile/grid_edge.exp.json | 8 ++------ 3 files changed, 8 insertions(+), 15 deletions(-) diff --git a/d2compiler/compile.go b/d2compiler/compile.go index 6b40777e4..20d7baada 100644 --- a/d2compiler/compile.go +++ b/d2compiler/compile.go @@ -1072,12 +1072,10 @@ func (c *compiler) validateNear(g *d2graph.Graph) { func (c *compiler) validateEdges(g *d2graph.Graph) { for _, edge := range g.Edges { - if gd := edge.Src.Parent.ClosestGridDiagram(); gd != nil { - c.errorf(edge.GetAstEdge(), "edges in grid diagrams are not supported yet") - continue - } - if gd := edge.Dst.Parent.ClosestGridDiagram(); gd != nil { - c.errorf(edge.GetAstEdge(), "edges in grid diagrams are not supported yet") + srcGrid := edge.Src.Parent.ClosestGridDiagram() + dstGrid := edge.Dst.Parent.ClosestGridDiagram() + if (srcGrid != nil || dstGrid != nil) && srcGrid != dstGrid { + c.errorf(edge.GetAstEdge(), "edges into grid diagrams are not supported yet") continue } } diff --git a/d2compiler/compile_test.go b/d2compiler/compile_test.go index 15c966eab..c7aad82fd 100644 --- a/d2compiler/compile_test.go +++ b/d2compiler/compile_test.go @@ -2483,9 +2483,8 @@ d2/testdata/d2compiler/TestCompile/grid_gap_negative.d2:3:16: vertical-gap must hey -> c: ok `, - expErr: `d2/testdata/d2compiler/TestCompile/grid_edge.d2:3:2: edges in grid diagrams are not supported yet -d2/testdata/d2compiler/TestCompile/grid_edge.d2:5:2: edges in grid diagrams are not supported yet -d2/testdata/d2compiler/TestCompile/grid_edge.d2:6:2: edges in grid diagrams are not supported yet`, + expErr: `d2/testdata/d2compiler/TestCompile/grid_edge.d2:5:2: edges into grid diagrams are not supported yet +d2/testdata/d2compiler/TestCompile/grid_edge.d2:6:2: edges into grid diagrams are not supported yet`, }, { name: "grid_nested", diff --git a/testdata/d2compiler/TestCompile/grid_edge.exp.json b/testdata/d2compiler/TestCompile/grid_edge.exp.json index e1a46d1d8..d501f033e 100644 --- a/testdata/d2compiler/TestCompile/grid_edge.exp.json +++ b/testdata/d2compiler/TestCompile/grid_edge.exp.json @@ -2,17 +2,13 @@ "graph": null, "err": { "errs": [ - { - "range": "d2/testdata/d2compiler/TestCompile/grid_edge.d2,2:1:22-2:7:28", - "errmsg": "d2/testdata/d2compiler/TestCompile/grid_edge.d2:3:2: edges in grid diagrams are not supported yet" - }, { "range": "d2/testdata/d2compiler/TestCompile/grid_edge.d2,4:1:32-4:11:42", - "errmsg": "d2/testdata/d2compiler/TestCompile/grid_edge.d2:5:2: edges in grid diagrams are not supported yet" + "errmsg": "d2/testdata/d2compiler/TestCompile/grid_edge.d2:5:2: edges into grid diagrams are not supported yet" }, { "range": "d2/testdata/d2compiler/TestCompile/grid_edge.d2,5:1:44-5:11:54", - "errmsg": "d2/testdata/d2compiler/TestCompile/grid_edge.d2:6:2: edges in grid diagrams are not supported yet" + "errmsg": "d2/testdata/d2compiler/TestCompile/grid_edge.d2:6:2: edges into grid diagrams are not supported yet" } ] } From c51834df24dfef04b316ea820cd5eff1dcfd5a90 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 12 Sep 2023 16:54:17 -0700 Subject: [PATCH 03/16] add arrows to test --- e2etests/testdata/files/simple_grid_edges.d2 | 29 +++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/e2etests/testdata/files/simple_grid_edges.d2 b/e2etests/testdata/files/simple_grid_edges.d2 index 2ff20bf96..d9628f50a 100644 --- a/e2etests/testdata/files/simple_grid_edges.d2 +++ b/e2etests/testdata/files/simple_grid_edges.d2 @@ -4,7 +4,7 @@ horizontal-gap: 20 *.class: [text; blue] -npm: { +a: { label: "npm i -g\n@forge/cli" style: { fill: "#30304c" @@ -103,4 +103,31 @@ classes: { stroke: transparent } } + arrow: { + target-arrowhead.shape: arrow + style: { + stroke: black + stroke-width: 2 + } + } +} + +a -> f -> g -> h -> i -> j: { + class: arrow +} +g -> b: { + class: arrow + style.stroke: "#cecece" +} +i -> d: { + class: arrow + style.stroke: "#cecece" +} +j -> e: Yes { + class: arrow + style.font-size: 10 +} +j -> o: No { + class: arrow + style.font-size: 10 } From a17013a3239e9c4da900b7a8f114734e0c31ecd5 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 12 Sep 2023 16:54:38 -0700 Subject: [PATCH 04/16] update grid layout with simple edge routing --- d2layouts/d2grid/grid_diagram.go | 4 +++ d2layouts/d2grid/layout.go | 43 +++++++++++++++++++++++++++----- 2 files changed, 41 insertions(+), 6 deletions(-) diff --git a/d2layouts/d2grid/grid_diagram.go b/d2layouts/d2grid/grid_diagram.go index bb02ca94b..f9a69b92d 100644 --- a/d2layouts/d2grid/grid_diagram.go +++ b/d2layouts/d2grid/grid_diagram.go @@ -11,6 +11,7 @@ import ( type gridDiagram struct { root *d2graph.Object objects []*d2graph.Object + edges []*d2graph.Edge rows int columns int @@ -122,4 +123,7 @@ func (gd *gridDiagram) cleanup(obj *d2graph.Object, graph *d2graph.Graph) { restore(obj, child) child.IterDescendants(restore) } + for _, e := range gd.edges { + graph.Edges = append(graph.Edges, e) + } } diff --git a/d2layouts/d2grid/layout.go b/d2layouts/d2grid/layout.go index 3e5e1d104..2d473e23d 100644 --- a/d2layouts/d2grid/layout.go +++ b/d2layouts/d2grid/layout.go @@ -31,7 +31,7 @@ const ( // 7. Put grid children back in correct location func Layout(ctx context.Context, g *d2graph.Graph, layout d2graph.LayoutGraph) d2graph.LayoutGraph { return func(ctx context.Context, g *d2graph.Graph) error { - gridDiagrams, objectOrder, err := withoutGridDiagrams(ctx, g, layout) + gridDiagrams, objectOrder, edgeOrder, err := withoutGridDiagrams(ctx, g, layout) if err != nil { return err } @@ -42,19 +42,24 @@ func Layout(ctx context.Context, g *d2graph.Graph, layout d2graph.LayoutGraph) d return err } - cleanup(g, gridDiagrams, objectOrder) + cleanup(g, gridDiagrams, objectOrder, edgeOrder) return nil } } -func withoutGridDiagrams(ctx context.Context, g *d2graph.Graph, layout d2graph.LayoutGraph) (gridDiagrams map[string]*gridDiagram, objectOrder map[string]int, err error) { +func withoutGridDiagrams(ctx context.Context, g *d2graph.Graph, layout d2graph.LayoutGraph) (gridDiagrams map[string]*gridDiagram, objectOrder, edgeOrder map[string]int, err error) { toRemove := make(map[*d2graph.Object]struct{}) + edgeToRemove := make(map[*d2graph.Edge]struct{}) gridDiagrams = make(map[string]*gridDiagram) objectOrder = make(map[string]int) for i, obj := range g.Objects { objectOrder[obj.AbsID()] = i } + edgeOrder = make(map[string]int) + for i, edge := range g.Edges { + edgeOrder[edge.AbsID()] = i + } var processGrid func(obj *d2graph.Object) error processGrid = func(obj *d2graph.Object) error { @@ -200,6 +205,22 @@ func withoutGridDiagrams(ctx context.Context, g *d2graph.Graph, layout d2graph.L for _, o := range gd.objects { toRemove[o] = struct{}{} } + + // simple straight line edge routing between grid objects + for i, e := range g.Edges { + edgeOrder[e.AbsID()] = i + if e.Dst.ClosestGridDiagram() != obj { + continue + } + e.Route = []*geo.Point{e.Src.Center(), e.Dst.Center()} + e.TraceToShape(e.Route, 0, 1) + if e.Label.Value != "" { + e.LabelPosition = go2.Pointer(string(label.InsideMiddleCenter)) + } + gd.edges = append(gd.edges, e) + edgeToRemove[e] = struct{}{} + } + return nil } @@ -218,7 +239,7 @@ func withoutGridDiagrams(ctx context.Context, g *d2graph.Graph, layout d2graph.L } if err := processGrid(obj); err != nil { - return nil, nil, err + return nil, nil, nil, err } } } @@ -230,8 +251,15 @@ func withoutGridDiagrams(ctx context.Context, g *d2graph.Graph, layout d2graph.L } } g.Objects = layoutObjects + layoutEdges := make([]*d2graph.Edge, 0, len(edgeToRemove)) + for _, e := range g.Edges { + if _, exists := edgeToRemove[e]; !exists { + layoutEdges = append(layoutEdges, e) + } + } + g.Edges = layoutEdges - return gridDiagrams, objectOrder, nil + return gridDiagrams, objectOrder, edgeOrder, nil } func layoutGrid(g *d2graph.Graph, obj *d2graph.Object) (*gridDiagram, error) { @@ -940,11 +968,14 @@ func getDistToTarget(layout [][]*d2graph.Object, targetSize float64, horizontalG // - translating the grid to its position placed by the core layout engine // - restore the children of the grid // - sorts objects to their original graph order -func cleanup(graph *d2graph.Graph, gridDiagrams map[string]*gridDiagram, objectsOrder map[string]int) { +func cleanup(graph *d2graph.Graph, gridDiagrams map[string]*gridDiagram, objectsOrder, edgeOrder map[string]int) { defer func() { sort.SliceStable(graph.Objects, func(i, j int) bool { return objectsOrder[graph.Objects[i].AbsID()] < objectsOrder[graph.Objects[j].AbsID()] }) + sort.SliceStable(graph.Edges, func(i, j int) bool { + return edgeOrder[graph.Edges[i].AbsID()] < edgeOrder[graph.Edges[j].AbsID()] + }) }() var restore func(obj *d2graph.Object) From 10775c2f32dec8121d8753af758135beec7fce44 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 12 Sep 2023 16:56:49 -0700 Subject: [PATCH 05/16] update test --- .../simple_grid_edges/dagre/board.exp.json | 374 +++++++++++++++++- .../simple_grid_edges/dagre/sketch.exp.svg | 171 ++++---- .../simple_grid_edges/elk/board.exp.json | 374 +++++++++++++++++- .../simple_grid_edges/elk/sketch.exp.svg | 171 ++++---- 4 files changed, 924 insertions(+), 166 deletions(-) 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 e89bdc344..66e053be1 100644 --- a/e2etests/testdata/stable/simple_grid_edges/dagre/board.exp.json +++ b/e2etests/testdata/stable/simple_grid_edges/dagre/board.exp.json @@ -4,7 +4,7 @@ "fontFamily": "SourceSansPro", "shapes": [ { - "id": "npm", + "id": "a", "type": "rectangle", "classes": [ "text", @@ -794,7 +794,377 @@ "level": 1 } ], - "connections": [], + "connections": [ + { + "id": "(a -> f)[0]", + "classes": [ + "arrow" + ], + "src": "a", + "srcArrow": "none", + "dst": "f", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "black", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 50, + "y": 60 + }, + { + "x": 50, + "y": 100 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(f -> g)[0]", + "classes": [ + "arrow" + ], + "src": "f", + "srcArrow": "none", + "dst": "g", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "black", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 100, + "y": 130 + }, + { + "x": 120, + "y": 130 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(g -> h)[0]", + "classes": [ + "arrow" + ], + "src": "g", + "srcArrow": "none", + "dst": "h", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "black", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 220, + "y": 130 + }, + { + "x": 240, + "y": 130 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(h -> i)[0]", + "classes": [ + "arrow" + ], + "src": "h", + "srcArrow": "none", + "dst": "i", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "black", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 340, + "y": 130 + }, + { + "x": 360, + "y": 130 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(i -> j)[0]", + "classes": [ + "arrow" + ], + "src": "i", + "srcArrow": "none", + "dst": "j", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "black", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 460, + "y": 130 + }, + { + "x": 480, + "y": 130 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(g -> b)[0]", + "classes": [ + "arrow" + ], + "src": "g", + "srcArrow": "none", + "dst": "b", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#cecece", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 170, + "y": 100 + }, + { + "x": 170, + "y": 60 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(i -> d)[0]", + "classes": [ + "arrow" + ], + "src": "i", + "srcArrow": "none", + "dst": "d", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#cecece", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 410, + "y": 100 + }, + { + "x": 410, + "y": 60 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(j -> e)[0]", + "classes": [ + "arrow" + ], + "src": "j", + "srcArrow": "none", + "dst": "e", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "black", + "borderRadius": 10, + "label": "Yes", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 14, + "labelHeight": 13, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 540, + "y": 100 + }, + { + "x": 540, + "y": 60 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(j -> o)[0]", + "classes": [ + "arrow" + ], + "src": "j", + "srcArrow": "none", + "dst": "o", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "black", + "borderRadius": 10, + "label": "No", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 12, + "labelHeight": 13, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 540, + "y": 160 + }, + { + "x": 540, + "y": 200 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ], "root": { "id": "", "type": "", 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 458a96dfc..7194aedc7 100644 --- a/e2etests/testdata/stable/simple_grid_edges/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/simple_grid_edges/dagre/sketch.exp.svg @@ -1,17 +1,24 @@ -npm i -g@forge/cliSet up anAtlassian siteView the helloworld appforgetunnelforgeloginforgecreateforgedeployforgeinstallHot reloadchanges?forgedeploy⬤ Forge CLI⬤ Required⬤ Optional + .d2-613741721 .fill-N1{fill:#0A0F25;} + .d2-613741721 .fill-N2{fill:#676C7E;} + .d2-613741721 .fill-N3{fill:#9499AB;} + .d2-613741721 .fill-N4{fill:#CFD2DD;} + .d2-613741721 .fill-N5{fill:#DEE1EB;} + .d2-613741721 .fill-N6{fill:#EEF1F8;} + .d2-613741721 .fill-N7{fill:#FFFFFF;} + .d2-613741721 .fill-B1{fill:#0D32B2;} + .d2-613741721 .fill-B2{fill:#0D32B2;} + .d2-613741721 .fill-B3{fill:#E3E9FD;} + .d2-613741721 .fill-B4{fill:#E3E9FD;} + .d2-613741721 .fill-B5{fill:#EDF0FD;} + .d2-613741721 .fill-B6{fill:#F7F8FE;} + .d2-613741721 .fill-AA2{fill:#4A6FF3;} + .d2-613741721 .fill-AA4{fill:#EDF0FD;} + .d2-613741721 .fill-AA5{fill:#F7F8FE;} + .d2-613741721 .fill-AB4{fill:#EDF0FD;} + .d2-613741721 .fill-AB5{fill:#F7F8FE;} + .d2-613741721 .stroke-N1{stroke:#0A0F25;} + .d2-613741721 .stroke-N2{stroke:#676C7E;} + .d2-613741721 .stroke-N3{stroke:#9499AB;} + .d2-613741721 .stroke-N4{stroke:#CFD2DD;} + .d2-613741721 .stroke-N5{stroke:#DEE1EB;} + .d2-613741721 .stroke-N6{stroke:#EEF1F8;} + .d2-613741721 .stroke-N7{stroke:#FFFFFF;} + .d2-613741721 .stroke-B1{stroke:#0D32B2;} + .d2-613741721 .stroke-B2{stroke:#0D32B2;} + .d2-613741721 .stroke-B3{stroke:#E3E9FD;} + .d2-613741721 .stroke-B4{stroke:#E3E9FD;} + .d2-613741721 .stroke-B5{stroke:#EDF0FD;} + .d2-613741721 .stroke-B6{stroke:#F7F8FE;} + .d2-613741721 .stroke-AA2{stroke:#4A6FF3;} + .d2-613741721 .stroke-AA4{stroke:#EDF0FD;} + .d2-613741721 .stroke-AA5{stroke:#F7F8FE;} + .d2-613741721 .stroke-AB4{stroke:#EDF0FD;} + .d2-613741721 .stroke-AB5{stroke:#F7F8FE;} + .d2-613741721 .background-color-N1{background-color:#0A0F25;} + .d2-613741721 .background-color-N2{background-color:#676C7E;} + .d2-613741721 .background-color-N3{background-color:#9499AB;} + .d2-613741721 .background-color-N4{background-color:#CFD2DD;} + .d2-613741721 .background-color-N5{background-color:#DEE1EB;} + .d2-613741721 .background-color-N6{background-color:#EEF1F8;} + .d2-613741721 .background-color-N7{background-color:#FFFFFF;} + .d2-613741721 .background-color-B1{background-color:#0D32B2;} + .d2-613741721 .background-color-B2{background-color:#0D32B2;} + .d2-613741721 .background-color-B3{background-color:#E3E9FD;} + .d2-613741721 .background-color-B4{background-color:#E3E9FD;} + .d2-613741721 .background-color-B5{background-color:#EDF0FD;} + .d2-613741721 .background-color-B6{background-color:#F7F8FE;} + .d2-613741721 .background-color-AA2{background-color:#4A6FF3;} + .d2-613741721 .background-color-AA4{background-color:#EDF0FD;} + .d2-613741721 .background-color-AA5{background-color:#F7F8FE;} + .d2-613741721 .background-color-AB4{background-color:#EDF0FD;} + .d2-613741721 .background-color-AB5{background-color:#F7F8FE;} + .d2-613741721 .color-N1{color:#0A0F25;} + .d2-613741721 .color-N2{color:#676C7E;} + .d2-613741721 .color-N3{color:#9499AB;} + .d2-613741721 .color-N4{color:#CFD2DD;} + .d2-613741721 .color-N5{color:#DEE1EB;} + .d2-613741721 .color-N6{color:#EEF1F8;} + .d2-613741721 .color-N7{color:#FFFFFF;} + .d2-613741721 .color-B1{color:#0D32B2;} + .d2-613741721 .color-B2{color:#0D32B2;} + .d2-613741721 .color-B3{color:#E3E9FD;} + .d2-613741721 .color-B4{color:#E3E9FD;} + .d2-613741721 .color-B5{color:#EDF0FD;} + .d2-613741721 .color-B6{color:#F7F8FE;} + .d2-613741721 .color-AA2{color:#4A6FF3;} + .d2-613741721 .color-AA4{color:#EDF0FD;} + .d2-613741721 .color-AA5{color:#F7F8FE;} + .d2-613741721 .color-AB4{color:#EDF0FD;} + .d2-613741721 .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?forgedeploy⬤ Forge CLI⬤ Required⬤ Optional YesNo @@ -111,4 +118,6 @@ + + \ No newline at end of file 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 e89bdc344..66e053be1 100644 --- a/e2etests/testdata/stable/simple_grid_edges/elk/board.exp.json +++ b/e2etests/testdata/stable/simple_grid_edges/elk/board.exp.json @@ -4,7 +4,7 @@ "fontFamily": "SourceSansPro", "shapes": [ { - "id": "npm", + "id": "a", "type": "rectangle", "classes": [ "text", @@ -794,7 +794,377 @@ "level": 1 } ], - "connections": [], + "connections": [ + { + "id": "(a -> f)[0]", + "classes": [ + "arrow" + ], + "src": "a", + "srcArrow": "none", + "dst": "f", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "black", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 50, + "y": 60 + }, + { + "x": 50, + "y": 100 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(f -> g)[0]", + "classes": [ + "arrow" + ], + "src": "f", + "srcArrow": "none", + "dst": "g", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "black", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 100, + "y": 130 + }, + { + "x": 120, + "y": 130 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(g -> h)[0]", + "classes": [ + "arrow" + ], + "src": "g", + "srcArrow": "none", + "dst": "h", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "black", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 220, + "y": 130 + }, + { + "x": 240, + "y": 130 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(h -> i)[0]", + "classes": [ + "arrow" + ], + "src": "h", + "srcArrow": "none", + "dst": "i", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "black", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 340, + "y": 130 + }, + { + "x": 360, + "y": 130 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(i -> j)[0]", + "classes": [ + "arrow" + ], + "src": "i", + "srcArrow": "none", + "dst": "j", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "black", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 460, + "y": 130 + }, + { + "x": 480, + "y": 130 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(g -> b)[0]", + "classes": [ + "arrow" + ], + "src": "g", + "srcArrow": "none", + "dst": "b", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#cecece", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 170, + "y": 100 + }, + { + "x": 170, + "y": 60 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(i -> d)[0]", + "classes": [ + "arrow" + ], + "src": "i", + "srcArrow": "none", + "dst": "d", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "#cecece", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 410, + "y": 100 + }, + { + "x": 410, + "y": 60 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(j -> e)[0]", + "classes": [ + "arrow" + ], + "src": "j", + "srcArrow": "none", + "dst": "e", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "black", + "borderRadius": 10, + "label": "Yes", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 14, + "labelHeight": 13, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 540, + "y": 100 + }, + { + "x": 540, + "y": 60 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "(j -> o)[0]", + "classes": [ + "arrow" + ], + "src": "j", + "srcArrow": "none", + "dst": "o", + "dstArrow": "arrow", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "black", + "borderRadius": 10, + "label": "No", + "fontSize": 10, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 12, + "labelHeight": 13, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "labelPercentage": 0, + "route": [ + { + "x": 540, + "y": 160 + }, + { + "x": 540, + "y": 200 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ], "root": { "id": "", "type": "", 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 458a96dfc..7194aedc7 100644 --- a/e2etests/testdata/stable/simple_grid_edges/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/simple_grid_edges/elk/sketch.exp.svg @@ -1,17 +1,24 @@ -npm i -g@forge/cliSet up anAtlassian siteView the helloworld appforgetunnelforgeloginforgecreateforgedeployforgeinstallHot reloadchanges?forgedeploy⬤ Forge CLI⬤ Required⬤ Optional + .d2-613741721 .fill-N1{fill:#0A0F25;} + .d2-613741721 .fill-N2{fill:#676C7E;} + .d2-613741721 .fill-N3{fill:#9499AB;} + .d2-613741721 .fill-N4{fill:#CFD2DD;} + .d2-613741721 .fill-N5{fill:#DEE1EB;} + .d2-613741721 .fill-N6{fill:#EEF1F8;} + .d2-613741721 .fill-N7{fill:#FFFFFF;} + .d2-613741721 .fill-B1{fill:#0D32B2;} + .d2-613741721 .fill-B2{fill:#0D32B2;} + .d2-613741721 .fill-B3{fill:#E3E9FD;} + .d2-613741721 .fill-B4{fill:#E3E9FD;} + .d2-613741721 .fill-B5{fill:#EDF0FD;} + .d2-613741721 .fill-B6{fill:#F7F8FE;} + .d2-613741721 .fill-AA2{fill:#4A6FF3;} + .d2-613741721 .fill-AA4{fill:#EDF0FD;} + .d2-613741721 .fill-AA5{fill:#F7F8FE;} + .d2-613741721 .fill-AB4{fill:#EDF0FD;} + .d2-613741721 .fill-AB5{fill:#F7F8FE;} + .d2-613741721 .stroke-N1{stroke:#0A0F25;} + .d2-613741721 .stroke-N2{stroke:#676C7E;} + .d2-613741721 .stroke-N3{stroke:#9499AB;} + .d2-613741721 .stroke-N4{stroke:#CFD2DD;} + .d2-613741721 .stroke-N5{stroke:#DEE1EB;} + .d2-613741721 .stroke-N6{stroke:#EEF1F8;} + .d2-613741721 .stroke-N7{stroke:#FFFFFF;} + .d2-613741721 .stroke-B1{stroke:#0D32B2;} + .d2-613741721 .stroke-B2{stroke:#0D32B2;} + .d2-613741721 .stroke-B3{stroke:#E3E9FD;} + .d2-613741721 .stroke-B4{stroke:#E3E9FD;} + .d2-613741721 .stroke-B5{stroke:#EDF0FD;} + .d2-613741721 .stroke-B6{stroke:#F7F8FE;} + .d2-613741721 .stroke-AA2{stroke:#4A6FF3;} + .d2-613741721 .stroke-AA4{stroke:#EDF0FD;} + .d2-613741721 .stroke-AA5{stroke:#F7F8FE;} + .d2-613741721 .stroke-AB4{stroke:#EDF0FD;} + .d2-613741721 .stroke-AB5{stroke:#F7F8FE;} + .d2-613741721 .background-color-N1{background-color:#0A0F25;} + .d2-613741721 .background-color-N2{background-color:#676C7E;} + .d2-613741721 .background-color-N3{background-color:#9499AB;} + .d2-613741721 .background-color-N4{background-color:#CFD2DD;} + .d2-613741721 .background-color-N5{background-color:#DEE1EB;} + .d2-613741721 .background-color-N6{background-color:#EEF1F8;} + .d2-613741721 .background-color-N7{background-color:#FFFFFF;} + .d2-613741721 .background-color-B1{background-color:#0D32B2;} + .d2-613741721 .background-color-B2{background-color:#0D32B2;} + .d2-613741721 .background-color-B3{background-color:#E3E9FD;} + .d2-613741721 .background-color-B4{background-color:#E3E9FD;} + .d2-613741721 .background-color-B5{background-color:#EDF0FD;} + .d2-613741721 .background-color-B6{background-color:#F7F8FE;} + .d2-613741721 .background-color-AA2{background-color:#4A6FF3;} + .d2-613741721 .background-color-AA4{background-color:#EDF0FD;} + .d2-613741721 .background-color-AA5{background-color:#F7F8FE;} + .d2-613741721 .background-color-AB4{background-color:#EDF0FD;} + .d2-613741721 .background-color-AB5{background-color:#F7F8FE;} + .d2-613741721 .color-N1{color:#0A0F25;} + .d2-613741721 .color-N2{color:#676C7E;} + .d2-613741721 .color-N3{color:#9499AB;} + .d2-613741721 .color-N4{color:#CFD2DD;} + .d2-613741721 .color-N5{color:#DEE1EB;} + .d2-613741721 .color-N6{color:#EEF1F8;} + .d2-613741721 .color-N7{color:#FFFFFF;} + .d2-613741721 .color-B1{color:#0D32B2;} + .d2-613741721 .color-B2{color:#0D32B2;} + .d2-613741721 .color-B3{color:#E3E9FD;} + .d2-613741721 .color-B4{color:#E3E9FD;} + .d2-613741721 .color-B5{color:#EDF0FD;} + .d2-613741721 .color-B6{color:#F7F8FE;} + .d2-613741721 .color-AA2{color:#4A6FF3;} + .d2-613741721 .color-AA4{color:#EDF0FD;} + .d2-613741721 .color-AA5{color:#F7F8FE;} + .d2-613741721 .color-AB4{color:#EDF0FD;} + .d2-613741721 .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?forgedeploy⬤ Forge CLI⬤ Required⬤ Optional YesNo @@ -111,4 +118,6 @@ + + \ No newline at end of file From 46bd6aeee5397bfd2ff919d1e1952a6b5a0dc28a Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 12 Sep 2023 17:08:34 -0700 Subject: [PATCH 06/16] edge case of edges on grid container --- d2compiler/compile_test.go | 6 ++++-- d2layouts/d2grid/layout.go | 2 +- testdata/d2compiler/TestCompile/grid_edge.exp.json | 8 ++++++-- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/d2compiler/compile_test.go b/d2compiler/compile_test.go index c7aad82fd..06d198501 100644 --- a/d2compiler/compile_test.go +++ b/d2compiler/compile_test.go @@ -2476,15 +2476,17 @@ d2/testdata/d2compiler/TestCompile/grid_gap_negative.d2:3:16: vertical-gap must name: "grid_edge", text: `hey: { grid-rows: 1 - a -> b + a -> b: ok } c -> hey.b hey.a -> c + hey -> hey.a hey -> c: ok `, expErr: `d2/testdata/d2compiler/TestCompile/grid_edge.d2:5:2: edges into grid diagrams are not supported yet -d2/testdata/d2compiler/TestCompile/grid_edge.d2:6:2: edges into grid diagrams are not supported yet`, +d2/testdata/d2compiler/TestCompile/grid_edge.d2:6:2: edges into grid diagrams are not supported yet +d2/testdata/d2compiler/TestCompile/grid_edge.d2:7:2: edges into grid diagrams are not supported yet`, }, { name: "grid_nested", diff --git a/d2layouts/d2grid/layout.go b/d2layouts/d2grid/layout.go index 2d473e23d..a3fb3a963 100644 --- a/d2layouts/d2grid/layout.go +++ b/d2layouts/d2grid/layout.go @@ -209,7 +209,7 @@ func withoutGridDiagrams(ctx context.Context, g *d2graph.Graph, layout d2graph.L // simple straight line edge routing between grid objects for i, e := range g.Edges { edgeOrder[e.AbsID()] = i - if e.Dst.ClosestGridDiagram() != obj { + if e.Dst.Parent.ClosestGridDiagram() != obj { continue } e.Route = []*geo.Point{e.Src.Center(), e.Dst.Center()} diff --git a/testdata/d2compiler/TestCompile/grid_edge.exp.json b/testdata/d2compiler/TestCompile/grid_edge.exp.json index d501f033e..01dc6d78b 100644 --- a/testdata/d2compiler/TestCompile/grid_edge.exp.json +++ b/testdata/d2compiler/TestCompile/grid_edge.exp.json @@ -3,12 +3,16 @@ "err": { "errs": [ { - "range": "d2/testdata/d2compiler/TestCompile/grid_edge.d2,4:1:32-4:11:42", + "range": "d2/testdata/d2compiler/TestCompile/grid_edge.d2,4:1:36-4:11:46", "errmsg": "d2/testdata/d2compiler/TestCompile/grid_edge.d2:5:2: edges into grid diagrams are not supported yet" }, { - "range": "d2/testdata/d2compiler/TestCompile/grid_edge.d2,5:1:44-5:11:54", + "range": "d2/testdata/d2compiler/TestCompile/grid_edge.d2,5:1:48-5:11:58", "errmsg": "d2/testdata/d2compiler/TestCompile/grid_edge.d2:6:2: edges into grid diagrams are not supported yet" + }, + { + "range": "d2/testdata/d2compiler/TestCompile/grid_edge.d2,6:1:60-6:13:72", + "errmsg": "d2/testdata/d2compiler/TestCompile/grid_edge.d2:7:2: edges into grid diagrams are not supported yet" } ] } From d651c3eb63656e863a833ef1900374902e9b14f0 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 12 Sep 2023 17:19:24 -0700 Subject: [PATCH 07/16] changelog --- ci/release/changelogs/next.md | 1 + 1 file changed, 1 insertion(+) diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md index bae88cb9e..867eb6998 100644 --- a/ci/release/changelogs/next.md +++ b/ci/release/changelogs/next.md @@ -1,6 +1,7 @@ #### Features 🚀 - UTF-16 files are automatically detected and supported [#1525](https://github.com/terrastruct/d2/pull/1525) +- Grid diagrams can now have edges between cells [#1586](https://github.com/terrastruct/d2/pull/1586) #### Improvements 🧹 From f4b153d059bd4bafacfdf90d85d235040e3a51a1 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 12 Sep 2023 22:04:57 -0700 Subject: [PATCH 08/16] cleanup --- d2layouts/d2grid/grid_diagram.go | 4 +--- d2layouts/d2grid/layout.go | 3 +++ 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/d2layouts/d2grid/grid_diagram.go b/d2layouts/d2grid/grid_diagram.go index f9a69b92d..0aa3ce463 100644 --- a/d2layouts/d2grid/grid_diagram.go +++ b/d2layouts/d2grid/grid_diagram.go @@ -123,7 +123,5 @@ func (gd *gridDiagram) cleanup(obj *d2graph.Object, graph *d2graph.Graph) { restore(obj, child) child.IterDescendants(restore) } - for _, e := range gd.edges { - graph.Edges = append(graph.Edges, e) - } + graph.Edges = append(graph.Edges, gd.edges...) } diff --git a/d2layouts/d2grid/layout.go b/d2layouts/d2grid/layout.go index a3fb3a963..709bb4848 100644 --- a/d2layouts/d2grid/layout.go +++ b/d2layouts/d2grid/layout.go @@ -84,6 +84,9 @@ func withoutGridDiagrams(ctx context.Context, g *d2graph.Graph, layout d2graph.L sort.SliceStable(obj.ChildrenArray, func(i, j int) bool { return objectOrder[obj.ChildrenArray[i].AbsID()] < objectOrder[obj.ChildrenArray[j].AbsID()] }) + sort.SliceStable(g.Edges, func(i, j int) bool { + return edgeOrder[g.Edges[i].AbsID()] < edgeOrder[g.Edges[j].AbsID()] + }) for _, o := range tempGraph.Objects { toRemove[o] = struct{}{} From 64313e178767e4149bac1c045d8718c2f7b8a391 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 12 Sep 2023 22:17:57 -0700 Subject: [PATCH 09/16] restrict edges in grid diagrams to between direct children (nested not implemented yet) --- d2compiler/compile.go | 13 ++++++++++--- d2compiler/compile_test.go | 12 ++++++++++++ .../TestCompile/grid_deeper_edge.exp.json | 11 +++++++++++ 3 files changed, 33 insertions(+), 3 deletions(-) create mode 100644 testdata/d2compiler/TestCompile/grid_deeper_edge.exp.json diff --git a/d2compiler/compile.go b/d2compiler/compile.go index 20d7baada..94063206c 100644 --- a/d2compiler/compile.go +++ b/d2compiler/compile.go @@ -1074,9 +1074,16 @@ func (c *compiler) validateEdges(g *d2graph.Graph) { for _, edge := range g.Edges { srcGrid := edge.Src.Parent.ClosestGridDiagram() dstGrid := edge.Dst.Parent.ClosestGridDiagram() - if (srcGrid != nil || dstGrid != nil) && srcGrid != dstGrid { - c.errorf(edge.GetAstEdge(), "edges into grid diagrams are not supported yet") - continue + if srcGrid != nil || dstGrid != nil { + if srcGrid != dstGrid { + c.errorf(edge.GetAstEdge(), "edges into grid diagrams are not supported yet") + continue + } else { + if srcGrid != edge.Src.Parent || dstGrid != edge.Dst.Parent { + c.errorf(edge.GetAstEdge(), "grid diagrams can only have edges between children right now") + continue + } + } } } } diff --git a/d2compiler/compile_test.go b/d2compiler/compile_test.go index 06d198501..d9af486c3 100644 --- a/d2compiler/compile_test.go +++ b/d2compiler/compile_test.go @@ -2488,6 +2488,18 @@ d2/testdata/d2compiler/TestCompile/grid_gap_negative.d2:3:16: vertical-gap must d2/testdata/d2compiler/TestCompile/grid_edge.d2:6:2: edges into grid diagrams are not supported yet d2/testdata/d2compiler/TestCompile/grid_edge.d2:7:2: edges into grid diagrams are not supported yet`, }, + { + name: "grid_deeper_edge", + text: `hey: { + grid-rows: 1 + a -> b: ok + b: { + c -> d: not yet + } +} +`, + expErr: `d2/testdata/d2compiler/TestCompile/grid_deeper_edge.d2:5:3: grid diagrams can only have edges between children right now`, + }, { name: "grid_nested", text: `hey: { diff --git a/testdata/d2compiler/TestCompile/grid_deeper_edge.exp.json b/testdata/d2compiler/TestCompile/grid_deeper_edge.exp.json new file mode 100644 index 000000000..d3247b6fb --- /dev/null +++ b/testdata/d2compiler/TestCompile/grid_deeper_edge.exp.json @@ -0,0 +1,11 @@ +{ + "graph": null, + "err": { + "errs": [ + { + "range": "d2/testdata/d2compiler/TestCompile/grid_deeper_edge.d2,4:2:41-4:8:47", + "errmsg": "d2/testdata/d2compiler/TestCompile/grid_deeper_edge.d2:5:3: grid diagrams can only have edges between children right now" + } + ] + } +} From fc06b09df6bbd3b180fb7df828113cc036244f00 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 12 Sep 2023 22:55:31 -0700 Subject: [PATCH 10/16] validate nested grid edges (not implemented yet) --- d2compiler/compile.go | 25 ++++++++--- d2compiler/compile_test.go | 7 ++- d2graph/grid_diagram.go | 19 ++++++++ e2etests/stable_test.go | 1 + .../files/grid_nested_simple_edges.d2 | 43 +++++++++++++++++++ .../TestCompile/grid_deeper_edge.exp.json | 4 ++ 6 files changed, 93 insertions(+), 6 deletions(-) create mode 100644 e2etests/testdata/files/grid_nested_simple_edges.d2 diff --git a/d2compiler/compile.go b/d2compiler/compile.go index 94063206c..88db84d7e 100644 --- a/d2compiler/compile.go +++ b/d2compiler/compile.go @@ -1075,14 +1075,29 @@ func (c *compiler) validateEdges(g *d2graph.Graph) { srcGrid := edge.Src.Parent.ClosestGridDiagram() dstGrid := edge.Dst.Parent.ClosestGridDiagram() if srcGrid != nil || dstGrid != nil { + if top := srcGrid.TopGridDiagram(); srcGrid != top { + // valid: grid.child1 -> grid.child2 + // invalid: grid.childGrid.child1 -> grid.childGrid.child2 + c.errorf(edge.GetAstEdge(), "edge must be on direct child of grid diagram %#v", top.AbsID()) + continue + } + if top := dstGrid.TopGridDiagram(); dstGrid != top { + // valid: grid.child1 -> grid.child2 + // invalid: grid.childGrid.child1 -> grid.childGrid.child2 + c.errorf(edge.GetAstEdge(), "edge must be on direct child of grid diagram %#v", top.AbsID()) + continue + } if srcGrid != dstGrid { + // valid: a -> grid + // invalid: a -> grid.child c.errorf(edge.GetAstEdge(), "edges into grid diagrams are not supported yet") continue - } else { - if srcGrid != edge.Src.Parent || dstGrid != edge.Dst.Parent { - c.errorf(edge.GetAstEdge(), "grid diagrams can only have edges between children right now") - continue - } + } + if srcGrid != edge.Src.Parent || dstGrid != edge.Dst.Parent { + // valid: grid.child1 -> grid.child2 + // invalid: grid.child1 -> grid.child2.child1 + c.errorf(edge.GetAstEdge(), "grid diagrams can only have edges between children right now") + continue } } } diff --git a/d2compiler/compile_test.go b/d2compiler/compile_test.go index d9af486c3..a8788e95e 100644 --- a/d2compiler/compile_test.go +++ b/d2compiler/compile_test.go @@ -2496,9 +2496,14 @@ d2/testdata/d2compiler/TestCompile/grid_edge.d2:7:2: edges into grid diagrams ar b: { c -> d: not yet } + a: { + grid-columns: 1 + e -> f: also not yet + } } `, - expErr: `d2/testdata/d2compiler/TestCompile/grid_deeper_edge.d2:5:3: grid diagrams can only have edges between children right now`, + expErr: `d2/testdata/d2compiler/TestCompile/grid_deeper_edge.d2:9:3: edge must be on direct child of grid diagram "hey" +d2/testdata/d2compiler/TestCompile/grid_deeper_edge.d2:5:3: grid diagrams can only have edges between children right now`, }, { name: "grid_nested", diff --git a/d2graph/grid_diagram.go b/d2graph/grid_diagram.go index b6968e8d4..62659df59 100644 --- a/d2graph/grid_diagram.go +++ b/d2graph/grid_diagram.go @@ -14,3 +14,22 @@ func (obj *Object) ClosestGridDiagram() *Object { } return obj.Parent.ClosestGridDiagram() } + +// TopGridDiagram returns the least nested (outermost) grid diagram +func (obj *Object) TopGridDiagram() *Object { + if obj == nil { + return nil + } + var gd *Object + if obj.IsGridDiagram() { + gd = obj + } + curr := obj.Parent + for curr != nil { + if curr.IsGridDiagram() { + gd = curr + } + curr = curr.Parent + } + return gd +} diff --git a/e2etests/stable_test.go b/e2etests/stable_test.go index 6b01e1076..0e82cb2a6 100644 --- a/e2etests/stable_test.go +++ b/e2etests/stable_test.go @@ -2834,6 +2834,7 @@ y: profits { loadFromFile(t, "dagre_spacing"), loadFromFile(t, "dagre_spacing_right"), loadFromFile(t, "simple_grid_edges"), + loadFromFile(t, "grid_nested_simple_edges"), } runa(t, tcs) diff --git a/e2etests/testdata/files/grid_nested_simple_edges.d2 b/e2etests/testdata/files/grid_nested_simple_edges.d2 new file mode 100644 index 000000000..8148fffed --- /dev/null +++ b/e2etests/testdata/files/grid_nested_simple_edges.d2 @@ -0,0 +1,43 @@ +direction: right +outer-grid -> outer-container + +outer-grid: { + grid-columns: 1 + + inner-grid -> container -> etc + + container: { + label.near: top-left + # edges not yet supported here since they must be direct grid children + a + b + c + } + + inner-grid: { + grid-rows: 1 + 1 + 2 + 3 + # edges here are not supported yet since this is inside another grid + } +} + +outer-container: { + grid -> container + + grid: { + grid-rows: 1 + # direct child edges ok in least nested grid + 1 -> 2 -> 3 + } + + container: { + # non grid edges ok + 4 -> 5 -> 6 + nested container: { + # nested non grid edges ok + 7 -> 8 + } + } +} diff --git a/testdata/d2compiler/TestCompile/grid_deeper_edge.exp.json b/testdata/d2compiler/TestCompile/grid_deeper_edge.exp.json index d3247b6fb..abe81dc64 100644 --- a/testdata/d2compiler/TestCompile/grid_deeper_edge.exp.json +++ b/testdata/d2compiler/TestCompile/grid_deeper_edge.exp.json @@ -2,6 +2,10 @@ "graph": null, "err": { "errs": [ + { + "range": "d2/testdata/d2compiler/TestCompile/grid_deeper_edge.d2,8:2:86-8:8:92", + "errmsg": "d2/testdata/d2compiler/TestCompile/grid_deeper_edge.d2:9:3: edge must be on direct child of grid diagram \"hey\"" + }, { "range": "d2/testdata/d2compiler/TestCompile/grid_deeper_edge.d2,4:2:41-4:8:47", "errmsg": "d2/testdata/d2compiler/TestCompile/grid_deeper_edge.d2:5:3: grid diagrams can only have edges between children right now" From dbf4a861346e84d09dc1ee273965e8b2c1ea5719 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Wed, 13 Sep 2023 14:55:50 -0700 Subject: [PATCH 11/16] refactor pluck --- d2graph/layout.go | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/d2graph/layout.go b/d2graph/layout.go index 51b3206b9..76a72d896 100644 --- a/d2graph/layout.go +++ b/d2graph/layout.go @@ -60,7 +60,7 @@ func (g *Graph) ExtractAsNestedGraph(obj *Object) *Graph { func pluckObjAndEdges(g *Graph, obj *Object) (descendantsObjects []*Object, edges []*Edge) { for i := 0; i < len(g.Edges); i++ { edge := g.Edges[i] - if edge.Src == obj || edge.Dst == obj { + if edge.Src.IsDescendantOf(obj) || edge.Dst.IsDescendantOf(obj) { edges = append(edges, edge) g.Edges = append(g.Edges[:i], g.Edges[i+1:]...) i-- @@ -69,15 +69,10 @@ func pluckObjAndEdges(g *Graph, obj *Object) (descendantsObjects []*Object, edge for i := 0; i < len(g.Objects); i++ { temp := g.Objects[i] - if temp.AbsID() == obj.AbsID() { + if temp.IsDescendantOf(obj) { descendantsObjects = append(descendantsObjects, obj) g.Objects = append(g.Objects[:i], g.Objects[i+1:]...) - for _, child := range obj.ChildrenArray { - subObjects, subEdges := pluckObjAndEdges(g, child) - descendantsObjects = append(descendantsObjects, subObjects...) - edges = append(edges, subEdges...) - } - break + i-- } } From c0c66ad36ef322d48376f22875e2abe7c460af67 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Wed, 13 Sep 2023 20:04:25 -0700 Subject: [PATCH 12/16] fix --- d2graph/layout.go | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/d2graph/layout.go b/d2graph/layout.go index 76a72d896..c6899517e 100644 --- a/d2graph/layout.go +++ b/d2graph/layout.go @@ -60,7 +60,7 @@ func (g *Graph) ExtractAsNestedGraph(obj *Object) *Graph { func pluckObjAndEdges(g *Graph, obj *Object) (descendantsObjects []*Object, edges []*Edge) { for i := 0; i < len(g.Edges); i++ { edge := g.Edges[i] - if edge.Src.IsDescendantOf(obj) || edge.Dst.IsDescendantOf(obj) { + if edge.Src.IsDescendantOf(obj) && edge.Dst.IsDescendantOf(obj) { edges = append(edges, edge) g.Edges = append(g.Edges[:i], g.Edges[i+1:]...) i-- @@ -70,7 +70,7 @@ func pluckObjAndEdges(g *Graph, obj *Object) (descendantsObjects []*Object, edge for i := 0; i < len(g.Objects); i++ { temp := g.Objects[i] if temp.IsDescendantOf(obj) { - descendantsObjects = append(descendantsObjects, obj) + descendantsObjects = append(descendantsObjects, temp) g.Objects = append(g.Objects[:i], g.Objects[i+1:]...) i-- } From c9a6e65c6be6930562f06860c511b5251051829e Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Wed, 13 Sep 2023 15:02:26 -0700 Subject: [PATCH 13/16] shift edges with grid --- d2graph/d2graph.go | 7 +++++++ d2graph/layout.go | 7 ++++++- d2layouts/d2grid/grid_diagram.go | 3 +++ d2layouts/d2grid/layout.go | 12 +++++++++--- 4 files changed, 25 insertions(+), 4 deletions(-) diff --git a/d2graph/d2graph.go b/d2graph/d2graph.go index df9d12a9a..1452cf4bc 100644 --- a/d2graph/d2graph.go +++ b/d2graph/d2graph.go @@ -1169,6 +1169,13 @@ func (e *Edge) Text() *d2target.MText { } } +func (e *Edge) Move(dx, dy float64) { + for _, p := range e.Route { + p.X += dx + p.Y += dy + } +} + func (e *Edge) AbsID() string { srcIDA := e.Src.AbsIDArray() dstIDA := e.Dst.AbsIDArray() diff --git a/d2graph/layout.go b/d2graph/layout.go index c6899517e..9f2702df7 100644 --- a/d2graph/layout.go +++ b/d2graph/layout.go @@ -81,7 +81,12 @@ func pluckObjAndEdges(g *Graph, obj *Object) (descendantsObjects []*Object, edge func (g *Graph) InjectNestedGraph(tempGraph *Graph, parent *Object) { obj := tempGraph.Root.ChildrenArray[0] - obj.MoveWithDescendantsTo(0, 0) + dx := 0 - obj.TopLeft.X + dy := 0 - obj.TopLeft.Y + obj.MoveWithDescendants(dx, dy) + for _, e := range tempGraph.Edges { + e.Move(dx, dy) + } obj.Parent = parent for _, obj := range tempGraph.Objects { obj.Graph = g diff --git a/d2layouts/d2grid/grid_diagram.go b/d2layouts/d2grid/grid_diagram.go index 0aa3ce463..cc56e82de 100644 --- a/d2layouts/d2grid/grid_diagram.go +++ b/d2layouts/d2grid/grid_diagram.go @@ -108,6 +108,9 @@ func (gd *gridDiagram) shift(dx, dy float64) { for _, obj := range gd.objects { obj.MoveWithDescendants(dx, dy) } + for _, e := range gd.edges { + e.Move(dx, dy) + } } func (gd *gridDiagram) cleanup(obj *d2graph.Object, graph *d2graph.Graph) { diff --git a/d2layouts/d2grid/layout.go b/d2layouts/d2grid/layout.go index 709bb4848..5e8d0125f 100644 --- a/d2layouts/d2grid/layout.go +++ b/d2layouts/d2grid/layout.go @@ -212,16 +212,22 @@ func withoutGridDiagrams(ctx context.Context, g *d2graph.Graph, layout d2graph.L // simple straight line edge routing between grid objects for i, e := range g.Edges { edgeOrder[e.AbsID()] = i - if e.Dst.Parent.ClosestGridDiagram() != obj { + if !e.Src.Parent.IsDescendantOf(obj) && !e.Dst.Parent.IsDescendantOf(obj) { continue } + // if edge is within grid, remove it from outer layout + gd.edges = append(gd.edges, e) + edgeToRemove[e] = struct{}{} + + if e.Src.Parent != obj || e.Dst.Parent != obj { + continue + } + // if edge is grid child, use simple routing e.Route = []*geo.Point{e.Src.Center(), e.Dst.Center()} e.TraceToShape(e.Route, 0, 1) if e.Label.Value != "" { e.LabelPosition = go2.Pointer(string(label.InsideMiddleCenter)) } - gd.edges = append(gd.edges, e) - edgeToRemove[e] = struct{}{} } return nil From f84e3381db4c0f7f579ad0451ce049004788098f Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Wed, 13 Sep 2023 20:16:34 -0700 Subject: [PATCH 14/16] test works --- .../dagre/board.exp.json | 1338 +++++++++++++++++ .../dagre/sketch.exp.svg | 123 ++ .../elk/board.exp.json | 1293 ++++++++++++++++ .../elk/sketch.exp.svg | 123 ++ 4 files changed, 2877 insertions(+) create mode 100644 e2etests/testdata/stable/grid_nested_simple_edges/dagre/board.exp.json create mode 100644 e2etests/testdata/stable/grid_nested_simple_edges/dagre/sketch.exp.svg create mode 100644 e2etests/testdata/stable/grid_nested_simple_edges/elk/board.exp.json create mode 100644 e2etests/testdata/stable/grid_nested_simple_edges/elk/sketch.exp.svg diff --git a/e2etests/testdata/stable/grid_nested_simple_edges/dagre/board.exp.json b/e2etests/testdata/stable/grid_nested_simple_edges/dagre/board.exp.json new file mode 100644 index 000000000..c7cfb758d --- /dev/null +++ b/e2etests/testdata/stable/grid_nested_simple_edges/dagre/board.exp.json @@ -0,0 +1,1338 @@ +{ + "name": "", + "isFolderOnly": false, + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "outer-grid", + "type": "rectangle", + "pos": { + "x": 0, + "y": 0 + }, + "width": 478, + "height": 589, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B4", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "outer-grid", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 116, + "labelHeight": 36, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "outer-container", + "type": "rectangle", + "pos": { + "x": 598, + "y": 218 + }, + "width": 1038, + "height": 459, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B4", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "outer-container", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 185, + "labelHeight": 36, + "labelPosition": "OUTSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "outer-grid.inner-grid", + "type": "rectangle", + "pos": { + "x": 60, + "y": 60 + }, + "width": 358, + "height": 186, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B5", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "inner-grid", + "fontSize": 24, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 98, + "labelHeight": 31, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "outer-grid.container", + "type": "rectangle", + "pos": { + "x": 60, + "y": 286 + }, + "width": 358, + "height": 137, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B5", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "container", + "fontSize": 24, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 97, + "labelHeight": 31, + "labelPosition": "INSIDE_TOP_LEFT", + "zIndex": 0, + "level": 2 + }, + { + "id": "outer-grid.etc", + "type": "rectangle", + "pos": { + "x": 60, + "y": 463 + }, + "width": 358, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B5", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "etc", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 23, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "outer-grid.container.a", + "type": "rectangle", + "pos": { + "x": 90, + "y": 327 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "a", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-grid.container.b", + "type": "rectangle", + "pos": { + "x": 203, + "y": 327 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "b", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-grid.container.c", + "type": "rectangle", + "pos": { + "x": 316, + "y": 327 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "c", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-grid.inner-grid.1", + "type": "rectangle", + "pos": { + "x": 120, + "y": 120 + }, + "width": 52, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "1", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 7, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-grid.inner-grid.2", + "type": "rectangle", + "pos": { + "x": 212, + "y": 120 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "2", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-grid.inner-grid.3", + "type": "rectangle", + "pos": { + "x": 305, + "y": 120 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "3", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.grid", + "type": "rectangle", + "pos": { + "x": 628, + "y": 248 + }, + "width": 358, + "height": 186, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B5", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "grid", + "fontSize": 24, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 38, + "labelHeight": 31, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "outer-container.container", + "type": "rectangle", + "pos": { + "x": 1106, + "y": 319 + }, + "width": 500, + "height": 338, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B5", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "container", + "fontSize": 24, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 97, + "labelHeight": 31, + "labelPosition": "OUTSIDE_TOP_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "outer-container.grid.1", + "type": "rectangle", + "pos": { + "x": 688, + "y": 308 + }, + "width": 52, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "1", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 7, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.grid.2", + "type": "rectangle", + "pos": { + "x": 780, + "y": 308 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "2", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.grid.3", + "type": "rectangle", + "pos": { + "x": 873, + "y": 308 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "3", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.container.4", + "type": "rectangle", + "pos": { + "x": 1136, + "y": 349 + }, + "width": 54, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "4", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 9, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.container.5", + "type": "rectangle", + "pos": { + "x": 1340, + "y": 349 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "5", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.container.6", + "type": "rectangle", + "pos": { + "x": 1493, + "y": 349 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "6", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.container.nested container", + "type": "rectangle", + "pos": { + "x": 1310, + "y": 501 + }, + "width": 266, + "height": 126, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "nested container", + "fontSize": 20, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 141, + "labelHeight": 26, + "labelPosition": "OUTSIDE_TOP_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.container.nested container.7", + "type": "rectangle", + "pos": { + "x": 1340, + "y": 531 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "N7", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "7", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 4 + }, + { + "id": "outer-container.container.nested container.8", + "type": "rectangle", + "pos": { + "x": 1493, + "y": 531 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "N7", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "8", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 4 + } + ], + "connections": [ + { + "id": "(outer-grid -> outer-container)[0]", + "src": "outer-grid", + "srcArrow": "none", + "dst": "outer-container", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 478, + "y": 340.5 + }, + { + "x": 518, + "y": 340.5 + }, + { + "x": 542, + "y": 340.5 + }, + { + "x": 598, + "y": 340.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-grid.(inner-grid -> container)[0]", + "src": "outer-grid.inner-grid", + "srcArrow": "none", + "dst": "outer-grid.container", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 239, + "y": 245.5 + }, + { + "x": 239, + "y": 286.5 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-grid.(container -> etc)[0]", + "src": "outer-grid.container", + "srcArrow": "none", + "dst": "outer-grid.etc", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 239, + "y": 423 + }, + { + "x": 239, + "y": 463 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-container.(grid -> container)[0]", + "src": "outer-container.grid", + "srcArrow": "none", + "dst": "outer-container.container", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 986, + "y": 381.5 + }, + { + "x": 1026, + "y": 381.5 + }, + { + "x": 1050, + "y": 381.5 + }, + { + "x": 1106, + "y": 381.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-container.grid.(1 -> 2)[0]", + "src": "outer-container.grid.1", + "srcArrow": "none", + "dst": "outer-container.grid.2", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 739.5, + "y": 341 + }, + { + "x": 780.5, + "y": 341 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-container.grid.(2 -> 3)[0]", + "src": "outer-container.grid.2", + "srcArrow": "none", + "dst": "outer-container.grid.3", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 832.5, + "y": 341 + }, + { + "x": 873.5, + "y": 341 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-container.container.(4 -> 5)[0]", + "src": "outer-container.container.4", + "srcArrow": "none", + "dst": "outer-container.container.5", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 1190, + "y": 381.5 + }, + { + "x": 1230, + "y": 381.5 + }, + { + "x": 1300, + "y": 381.5 + }, + { + "x": 1340, + "y": 381.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-container.container.(5 -> 6)[0]", + "src": "outer-container.container.5", + "srcArrow": "none", + "dst": "outer-container.container.6", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 1393, + "y": 381.5 + }, + { + "x": 1433, + "y": 381.5 + }, + { + "x": 1453, + "y": 381.5 + }, + { + "x": 1493, + "y": 381.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-container.container.nested container.(7 -> 8)[0]", + "src": "outer-container.container.nested container.7", + "srcArrow": "none", + "dst": "outer-container.container.nested container.8", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 1393, + "y": 563.5 + }, + { + "x": 1433, + "y": 563.5 + }, + { + "x": 1453, + "y": 563.5 + }, + { + "x": 1493, + "y": 563.5 + } + ], + "isCurve": true, + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ], + "root": { + "id": "", + "type": "", + "pos": { + "x": 0, + "y": 0 + }, + "width": 0, + "height": 0, + "opacity": 0, + "strokeDash": 0, + "strokeWidth": 0, + "borderRadius": 0, + "fill": "N7", + "stroke": "", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 0, + "fontFamily": "", + "language": "", + "color": "", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "zIndex": 0, + "level": 0 + } +} diff --git a/e2etests/testdata/stable/grid_nested_simple_edges/dagre/sketch.exp.svg b/e2etests/testdata/stable/grid_nested_simple_edges/dagre/sketch.exp.svg new file mode 100644 index 000000000..ab1c8b638 --- /dev/null +++ b/e2etests/testdata/stable/grid_nested_simple_edges/dagre/sketch.exp.svg @@ -0,0 +1,123 @@ +outer-gridouter-containerinner-gridcontaineretcgridcontainerabc123123456nested container78 + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/e2etests/testdata/stable/grid_nested_simple_edges/elk/board.exp.json b/e2etests/testdata/stable/grid_nested_simple_edges/elk/board.exp.json new file mode 100644 index 000000000..5e210cd4f --- /dev/null +++ b/e2etests/testdata/stable/grid_nested_simple_edges/elk/board.exp.json @@ -0,0 +1,1293 @@ +{ + "name": "", + "isFolderOnly": false, + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "outer-grid", + "type": "rectangle", + "pos": { + "x": 12, + "y": 12 + }, + "width": 478, + "height": 618, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B4", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "outer-grid", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 116, + "labelHeight": 36, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "outer-container", + "type": "rectangle", + "pos": { + "x": 560, + "y": 95 + }, + "width": 1150, + "height": 452, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B4", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "outer-container", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 185, + "labelHeight": 36, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "outer-grid.inner-grid", + "type": "rectangle", + "pos": { + "x": 72, + "y": 72 + }, + "width": 358, + "height": 186, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B5", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "inner-grid", + "fontSize": 24, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 98, + "labelHeight": 31, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "outer-grid.container", + "type": "rectangle", + "pos": { + "x": 72, + "y": 298 + }, + "width": 358, + "height": 166, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B5", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "container", + "fontSize": 24, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 97, + "labelHeight": 31, + "labelPosition": "INSIDE_TOP_LEFT", + "zIndex": 0, + "level": 2 + }, + { + "id": "outer-grid.etc", + "type": "rectangle", + "pos": { + "x": 72, + "y": 504 + }, + "width": 358, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B5", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "etc", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 23, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "outer-grid.container.a", + "type": "rectangle", + "pos": { + "x": 122, + "y": 348 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "a", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-grid.container.b", + "type": "rectangle", + "pos": { + "x": 195, + "y": 348 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "b", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-grid.container.c", + "type": "rectangle", + "pos": { + "x": 268, + "y": 348 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "c", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-grid.inner-grid.1", + "type": "rectangle", + "pos": { + "x": 132, + "y": 132 + }, + "width": 52, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "1", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 7, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-grid.inner-grid.2", + "type": "rectangle", + "pos": { + "x": 224, + "y": 132 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "2", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-grid.inner-grid.3", + "type": "rectangle", + "pos": { + "x": 317, + "y": 132 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "3", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.grid", + "type": "rectangle", + "pos": { + "x": 610, + "y": 228 + }, + "width": 358, + "height": 186, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B5", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "grid", + "fontSize": 24, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 38, + "labelHeight": 31, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "outer-container.container", + "type": "rectangle", + "pos": { + "x": 1038, + "y": 145 + }, + "width": 622, + "height": 352, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B5", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "container", + "fontSize": 24, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 97, + "labelHeight": 31, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 2 + }, + { + "id": "outer-container.grid.1", + "type": "rectangle", + "pos": { + "x": 670, + "y": 288 + }, + "width": 52, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "1", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 7, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.grid.2", + "type": "rectangle", + "pos": { + "x": 762, + "y": 288 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "2", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.grid.3", + "type": "rectangle", + "pos": { + "x": 855, + "y": 288 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "3", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.container.4", + "type": "rectangle", + "pos": { + "x": 1310, + "y": 195 + }, + "width": 54, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "4", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 9, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.container.5", + "type": "rectangle", + "pos": { + "x": 1434, + "y": 195 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "5", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.container.6", + "type": "rectangle", + "pos": { + "x": 1557, + "y": 195 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "6", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.container.nested container", + "type": "rectangle", + "pos": { + "x": 1088, + "y": 281 + }, + "width": 276, + "height": 166, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "B6", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "nested container", + "fontSize": 20, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 141, + "labelHeight": 26, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 3 + }, + { + "id": "outer-container.container.nested container.7", + "type": "rectangle", + "pos": { + "x": 1138, + "y": 331 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "N7", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "7", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 4 + }, + { + "id": "outer-container.container.nested container.8", + "type": "rectangle", + "pos": { + "x": 1261, + "y": 331 + }, + "width": 53, + "height": 66, + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "borderRadius": 0, + "fill": "N7", + "stroke": "B1", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "8", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 8, + "labelHeight": 21, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 4 + } + ], + "connections": [ + { + "id": "(outer-grid -> outer-container)[0]", + "src": "outer-grid", + "srcArrow": "none", + "dst": "outer-container", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 490, + "y": 321 + }, + { + "x": 560, + "y": 321 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-grid.(inner-grid -> container)[0]", + "src": "outer-grid.inner-grid", + "srcArrow": "none", + "dst": "outer-grid.container", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 251, + "y": 258 + }, + { + "x": 251, + "y": 298 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-grid.(container -> etc)[0]", + "src": "outer-grid.container", + "srcArrow": "none", + "dst": "outer-grid.etc", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 251, + "y": 464 + }, + { + "x": 251, + "y": 504 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-container.(grid -> container)[0]", + "src": "outer-container.grid", + "srcArrow": "none", + "dst": "outer-container.container", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 968, + "y": 321 + }, + { + "x": 1038, + "y": 321 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-container.grid.(1 -> 2)[0]", + "src": "outer-container.grid.1", + "srcArrow": "none", + "dst": "outer-container.grid.2", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 721.5, + "y": 321 + }, + { + "x": 762.5, + "y": 321 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-container.grid.(2 -> 3)[0]", + "src": "outer-container.grid.2", + "srcArrow": "none", + "dst": "outer-container.grid.3", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 814.5, + "y": 321 + }, + { + "x": 855.5, + "y": 321 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-container.container.(4 -> 5)[0]", + "src": "outer-container.container.4", + "srcArrow": "none", + "dst": "outer-container.container.5", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 1364, + "y": 228 + }, + { + "x": 1434, + "y": 228 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-container.container.(5 -> 6)[0]", + "src": "outer-container.container.5", + "srcArrow": "none", + "dst": "outer-container.container.6", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 1487, + "y": 228 + }, + { + "x": 1557, + "y": 228 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + }, + { + "id": "outer-container.container.nested container.(7 -> 8)[0]", + "src": "outer-container.container.nested container.7", + "srcArrow": "none", + "dst": "outer-container.container.nested container.8", + "dstArrow": "triangle", + "opacity": 1, + "strokeDash": 0, + "strokeWidth": 2, + "stroke": "B1", + "borderRadius": 10, + "label": "", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N2", + "italic": true, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "labelPosition": "", + "labelPercentage": 0, + "route": [ + { + "x": 1191, + "y": 364 + }, + { + "x": 1261, + "y": 364 + } + ], + "animated": false, + "tooltip": "", + "icon": null, + "zIndex": 0 + } + ], + "root": { + "id": "", + "type": "", + "pos": { + "x": 0, + "y": 0 + }, + "width": 0, + "height": 0, + "opacity": 0, + "strokeDash": 0, + "strokeWidth": 0, + "borderRadius": 0, + "fill": "N7", + "stroke": "", + "shadow": false, + "3d": false, + "multiple": false, + "double-border": false, + "tooltip": "", + "link": "", + "icon": null, + "iconPosition": "", + "blend": false, + "fields": null, + "methods": null, + "columns": null, + "label": "", + "fontSize": 0, + "fontFamily": "", + "language": "", + "color": "", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 0, + "labelHeight": 0, + "zIndex": 0, + "level": 0 + } +} diff --git a/e2etests/testdata/stable/grid_nested_simple_edges/elk/sketch.exp.svg b/e2etests/testdata/stable/grid_nested_simple_edges/elk/sketch.exp.svg new file mode 100644 index 000000000..482ad3419 --- /dev/null +++ b/e2etests/testdata/stable/grid_nested_simple_edges/elk/sketch.exp.svg @@ -0,0 +1,123 @@ +outer-gridouter-containerinner-gridcontaineretcgridcontainerabc123123456nested container78 + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From 56126d90ee81c8d2c2e3e9edda3f398aae2511ae Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Wed, 13 Sep 2023 21:02:23 -0700 Subject: [PATCH 15/16] cleanup --- ci/release/changelogs/next.md | 2 +- e2etests/testdata/files/simple_grid_edges.d2 | 70 ++++---- .../simple_grid_edges/dagre/board.exp.json | 90 +++++----- .../simple_grid_edges/dagre/sketch.exp.svg | 164 +++++++++--------- .../simple_grid_edges/elk/board.exp.json | 90 +++++----- .../simple_grid_edges/elk/sketch.exp.svg | 164 +++++++++--------- 6 files changed, 290 insertions(+), 290 deletions(-) diff --git a/ci/release/changelogs/next.md b/ci/release/changelogs/next.md index 867eb6998..4c437fbfa 100644 --- a/ci/release/changelogs/next.md +++ b/ci/release/changelogs/next.md @@ -1,7 +1,7 @@ #### Features 🚀 - UTF-16 files are automatically detected and supported [#1525](https://github.com/terrastruct/d2/pull/1525) -- Grid diagrams can now have edges between cells [#1586](https://github.com/terrastruct/d2/pull/1586) +- Grid diagrams can now have simple edges between cells [#1586](https://github.com/terrastruct/d2/pull/1586) #### Improvements 🧹 diff --git a/e2etests/testdata/files/simple_grid_edges.d2 b/e2etests/testdata/files/simple_grid_edges.d2 index d9628f50a..79c632a32 100644 --- a/e2etests/testdata/files/simple_grid_edges.d2 +++ b/e2etests/testdata/files/simple_grid_edges.d2 @@ -4,7 +4,7 @@ horizontal-gap: 20 *.class: [text; blue] -a: { +0,0: { label: "npm i -g\n@forge/cli" style: { fill: "#30304c" @@ -16,26 +16,26 @@ a: { } } -b: { +0,1: { label: "Set up an\nAtlassian site" class: [text; gray] } -c.class: empty -d: { +0,2.class: empty +0,3: { label: "View the hello\nworld app" class: [text; gray] } -e: forge\ntunnel -f: forge\nlogin -g: forge\ncreate -h: forge\ndeploy -i: forge\ninstall -j: { +0,4: forge\ntunnel +1,0: forge\nlogin +1,1: forge\ncreate +1,2: forge\ndeploy +1,3: forge\ninstall +1,4: { shape: diamond label: "Hot reload\nchanges?" class: [text; gray] } -k: "" { +2,0: "" { grid-rows: 3 grid-columns: 1 grid-gap: 0 @@ -67,10 +67,30 @@ k: "" { style.font-color: "#cecece" } } -l.class: empty -m.class: empty -n.class: empty -o: forge\ndeploy +2,1.class: empty +2,2.class: empty +2,3.class: empty +2,4: forge\ndeploy + +0,0 -> 1,0 -> 1,1 -> 1,2 -> 1,3 -> 1,4: { + class: arrow +} +1,1 -> 0,1: { + class: arrow + style.stroke: "#cecece" +} +1,3 -> 0,3: { + class: arrow + style.stroke: "#cecece" +} +1,4 -> 0,4: Yes { + class: arrow + style.font-size: 10 +} +1,4 -> 2,4: No { + class: arrow + style.font-size: 10 +} classes: { text.style: { @@ -111,23 +131,3 @@ classes: { } } } - -a -> f -> g -> h -> i -> j: { - class: arrow -} -g -> b: { - class: arrow - style.stroke: "#cecece" -} -i -> d: { - class: arrow - style.stroke: "#cecece" -} -j -> e: Yes { - class: arrow - style.font-size: 10 -} -j -> o: No { - class: arrow - style.font-size: 10 -} 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 66e053be1..1f3e3d490 100644 --- a/e2etests/testdata/stable/simple_grid_edges/dagre/board.exp.json +++ b/e2etests/testdata/stable/simple_grid_edges/dagre/board.exp.json @@ -4,7 +4,7 @@ "fontFamily": "SourceSansPro", "shapes": [ { - "id": "a", + "id": "0,0", "type": "rectangle", "classes": [ "text", @@ -49,7 +49,7 @@ "level": 1 }, { - "id": "b", + "id": "0,1", "type": "rectangle", "classes": [ "text", @@ -94,7 +94,7 @@ "level": 1 }, { - "id": "c", + "id": "0,2", "type": "rectangle", "classes": [ "empty" @@ -138,7 +138,7 @@ "level": 1 }, { - "id": "d", + "id": "0,3", "type": "rectangle", "classes": [ "text", @@ -183,7 +183,7 @@ "level": 1 }, { - "id": "e", + "id": "0,4", "type": "rectangle", "classes": [ "text", @@ -228,7 +228,7 @@ "level": 1 }, { - "id": "f", + "id": "1,0", "type": "rectangle", "classes": [ "text", @@ -273,7 +273,7 @@ "level": 1 }, { - "id": "g", + "id": "1,1", "type": "rectangle", "classes": [ "text", @@ -318,7 +318,7 @@ "level": 1 }, { - "id": "h", + "id": "1,2", "type": "rectangle", "classes": [ "text", @@ -363,7 +363,7 @@ "level": 1 }, { - "id": "i", + "id": "1,3", "type": "rectangle", "classes": [ "text", @@ -408,7 +408,7 @@ "level": 1 }, { - "id": "j", + "id": "1,4", "type": "diamond", "classes": [ "text", @@ -453,7 +453,7 @@ "level": 1 }, { - "id": "k", + "id": "2,0", "type": "rectangle", "pos": { "x": 0, @@ -494,7 +494,7 @@ "level": 1 }, { - "id": "k.a", + "id": "2,0.a", "type": "rectangle", "pos": { "x": 0, @@ -535,7 +535,7 @@ "level": 2 }, { - "id": "k.b", + "id": "2,0.b", "type": "rectangle", "pos": { "x": 0, @@ -576,7 +576,7 @@ "level": 2 }, { - "id": "k.c", + "id": "2,0.c", "type": "rectangle", "pos": { "x": 0, @@ -617,7 +617,7 @@ "level": 2 }, { - "id": "l", + "id": "2,1", "type": "rectangle", "classes": [ "empty" @@ -661,7 +661,7 @@ "level": 1 }, { - "id": "m", + "id": "2,2", "type": "rectangle", "classes": [ "empty" @@ -705,7 +705,7 @@ "level": 1 }, { - "id": "n", + "id": "2,3", "type": "rectangle", "classes": [ "empty" @@ -749,7 +749,7 @@ "level": 1 }, { - "id": "o", + "id": "2,4", "type": "rectangle", "classes": [ "text", @@ -796,13 +796,13 @@ ], "connections": [ { - "id": "(a -> f)[0]", + "id": "(0,0 -> 1,0)[0]", "classes": [ "arrow" ], - "src": "a", + "src": "0,0", "srcArrow": "none", - "dst": "f", + "dst": "1,0", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -837,13 +837,13 @@ "zIndex": 0 }, { - "id": "(f -> g)[0]", + "id": "(1,0 -> 1,1)[0]", "classes": [ "arrow" ], - "src": "f", + "src": "1,0", "srcArrow": "none", - "dst": "g", + "dst": "1,1", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -878,13 +878,13 @@ "zIndex": 0 }, { - "id": "(g -> h)[0]", + "id": "(1,1 -> 1,2)[0]", "classes": [ "arrow" ], - "src": "g", + "src": "1,1", "srcArrow": "none", - "dst": "h", + "dst": "1,2", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -919,13 +919,13 @@ "zIndex": 0 }, { - "id": "(h -> i)[0]", + "id": "(1,2 -> 1,3)[0]", "classes": [ "arrow" ], - "src": "h", + "src": "1,2", "srcArrow": "none", - "dst": "i", + "dst": "1,3", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -960,13 +960,13 @@ "zIndex": 0 }, { - "id": "(i -> j)[0]", + "id": "(1,3 -> 1,4)[0]", "classes": [ "arrow" ], - "src": "i", + "src": "1,3", "srcArrow": "none", - "dst": "j", + "dst": "1,4", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -1001,13 +1001,13 @@ "zIndex": 0 }, { - "id": "(g -> b)[0]", + "id": "(1,1 -> 0,1)[0]", "classes": [ "arrow" ], - "src": "g", + "src": "1,1", "srcArrow": "none", - "dst": "b", + "dst": "0,1", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -1042,13 +1042,13 @@ "zIndex": 0 }, { - "id": "(i -> d)[0]", + "id": "(1,3 -> 0,3)[0]", "classes": [ "arrow" ], - "src": "i", + "src": "1,3", "srcArrow": "none", - "dst": "d", + "dst": "0,3", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -1083,13 +1083,13 @@ "zIndex": 0 }, { - "id": "(j -> e)[0]", + "id": "(1,4 -> 0,4)[0]", "classes": [ "arrow" ], - "src": "j", + "src": "1,4", "srcArrow": "none", - "dst": "e", + "dst": "0,4", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -1124,13 +1124,13 @@ "zIndex": 0 }, { - "id": "(j -> o)[0]", + "id": "(1,4 -> 2,4)[0]", "classes": [ "arrow" ], - "src": "j", + "src": "1,4", "srcArrow": "none", - "dst": "o", + "dst": "2,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 7194aedc7..d57150a7d 100644 --- a/e2etests/testdata/stable/simple_grid_edges/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/simple_grid_edges/dagre/sketch.exp.svg @@ -1,23 +1,23 @@ -npm i -g@forge/cliSet up anAtlassian siteView the helloworld appforgetunnelforgeloginforgecreateforgedeployforgeinstallHot reloadchanges?forgedeploy⬤ Forge CLI⬤ Required⬤ Optional YesNo + .d2-2096830999 .fill-N1{fill:#0A0F25;} + .d2-2096830999 .fill-N2{fill:#676C7E;} + .d2-2096830999 .fill-N3{fill:#9499AB;} + .d2-2096830999 .fill-N4{fill:#CFD2DD;} + .d2-2096830999 .fill-N5{fill:#DEE1EB;} + .d2-2096830999 .fill-N6{fill:#EEF1F8;} + .d2-2096830999 .fill-N7{fill:#FFFFFF;} + .d2-2096830999 .fill-B1{fill:#0D32B2;} + .d2-2096830999 .fill-B2{fill:#0D32B2;} + .d2-2096830999 .fill-B3{fill:#E3E9FD;} + .d2-2096830999 .fill-B4{fill:#E3E9FD;} + .d2-2096830999 .fill-B5{fill:#EDF0FD;} + .d2-2096830999 .fill-B6{fill:#F7F8FE;} + .d2-2096830999 .fill-AA2{fill:#4A6FF3;} + .d2-2096830999 .fill-AA4{fill:#EDF0FD;} + .d2-2096830999 .fill-AA5{fill:#F7F8FE;} + .d2-2096830999 .fill-AB4{fill:#EDF0FD;} + .d2-2096830999 .fill-AB5{fill:#F7F8FE;} + .d2-2096830999 .stroke-N1{stroke:#0A0F25;} + .d2-2096830999 .stroke-N2{stroke:#676C7E;} + .d2-2096830999 .stroke-N3{stroke:#9499AB;} + .d2-2096830999 .stroke-N4{stroke:#CFD2DD;} + .d2-2096830999 .stroke-N5{stroke:#DEE1EB;} + .d2-2096830999 .stroke-N6{stroke:#EEF1F8;} + .d2-2096830999 .stroke-N7{stroke:#FFFFFF;} + .d2-2096830999 .stroke-B1{stroke:#0D32B2;} + .d2-2096830999 .stroke-B2{stroke:#0D32B2;} + .d2-2096830999 .stroke-B3{stroke:#E3E9FD;} + .d2-2096830999 .stroke-B4{stroke:#E3E9FD;} + .d2-2096830999 .stroke-B5{stroke:#EDF0FD;} + .d2-2096830999 .stroke-B6{stroke:#F7F8FE;} + .d2-2096830999 .stroke-AA2{stroke:#4A6FF3;} + .d2-2096830999 .stroke-AA4{stroke:#EDF0FD;} + .d2-2096830999 .stroke-AA5{stroke:#F7F8FE;} + .d2-2096830999 .stroke-AB4{stroke:#EDF0FD;} + .d2-2096830999 .stroke-AB5{stroke:#F7F8FE;} + .d2-2096830999 .background-color-N1{background-color:#0A0F25;} + .d2-2096830999 .background-color-N2{background-color:#676C7E;} + .d2-2096830999 .background-color-N3{background-color:#9499AB;} + .d2-2096830999 .background-color-N4{background-color:#CFD2DD;} + .d2-2096830999 .background-color-N5{background-color:#DEE1EB;} + .d2-2096830999 .background-color-N6{background-color:#EEF1F8;} + .d2-2096830999 .background-color-N7{background-color:#FFFFFF;} + .d2-2096830999 .background-color-B1{background-color:#0D32B2;} + .d2-2096830999 .background-color-B2{background-color:#0D32B2;} + .d2-2096830999 .background-color-B3{background-color:#E3E9FD;} + .d2-2096830999 .background-color-B4{background-color:#E3E9FD;} + .d2-2096830999 .background-color-B5{background-color:#EDF0FD;} + .d2-2096830999 .background-color-B6{background-color:#F7F8FE;} + .d2-2096830999 .background-color-AA2{background-color:#4A6FF3;} + .d2-2096830999 .background-color-AA4{background-color:#EDF0FD;} + .d2-2096830999 .background-color-AA5{background-color:#F7F8FE;} + .d2-2096830999 .background-color-AB4{background-color:#EDF0FD;} + .d2-2096830999 .background-color-AB5{background-color:#F7F8FE;} + .d2-2096830999 .color-N1{color:#0A0F25;} + .d2-2096830999 .color-N2{color:#676C7E;} + .d2-2096830999 .color-N3{color:#9499AB;} + .d2-2096830999 .color-N4{color:#CFD2DD;} + .d2-2096830999 .color-N5{color:#DEE1EB;} + .d2-2096830999 .color-N6{color:#EEF1F8;} + .d2-2096830999 .color-N7{color:#FFFFFF;} + .d2-2096830999 .color-B1{color:#0D32B2;} + .d2-2096830999 .color-B2{color:#0D32B2;} + .d2-2096830999 .color-B3{color:#E3E9FD;} + .d2-2096830999 .color-B4{color:#E3E9FD;} + .d2-2096830999 .color-B5{color:#EDF0FD;} + .d2-2096830999 .color-B6{color:#F7F8FE;} + .d2-2096830999 .color-AA2{color:#4A6FF3;} + .d2-2096830999 .color-AA4{color:#EDF0FD;} + .d2-2096830999 .color-AA5{color:#F7F8FE;} + .d2-2096830999 .color-AB4{color:#EDF0FD;} + .d2-2096830999 .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?forgedeploy⬤ Forge CLI⬤ Required⬤ Optional YesNo 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 66e053be1..1f3e3d490 100644 --- a/e2etests/testdata/stable/simple_grid_edges/elk/board.exp.json +++ b/e2etests/testdata/stable/simple_grid_edges/elk/board.exp.json @@ -4,7 +4,7 @@ "fontFamily": "SourceSansPro", "shapes": [ { - "id": "a", + "id": "0,0", "type": "rectangle", "classes": [ "text", @@ -49,7 +49,7 @@ "level": 1 }, { - "id": "b", + "id": "0,1", "type": "rectangle", "classes": [ "text", @@ -94,7 +94,7 @@ "level": 1 }, { - "id": "c", + "id": "0,2", "type": "rectangle", "classes": [ "empty" @@ -138,7 +138,7 @@ "level": 1 }, { - "id": "d", + "id": "0,3", "type": "rectangle", "classes": [ "text", @@ -183,7 +183,7 @@ "level": 1 }, { - "id": "e", + "id": "0,4", "type": "rectangle", "classes": [ "text", @@ -228,7 +228,7 @@ "level": 1 }, { - "id": "f", + "id": "1,0", "type": "rectangle", "classes": [ "text", @@ -273,7 +273,7 @@ "level": 1 }, { - "id": "g", + "id": "1,1", "type": "rectangle", "classes": [ "text", @@ -318,7 +318,7 @@ "level": 1 }, { - "id": "h", + "id": "1,2", "type": "rectangle", "classes": [ "text", @@ -363,7 +363,7 @@ "level": 1 }, { - "id": "i", + "id": "1,3", "type": "rectangle", "classes": [ "text", @@ -408,7 +408,7 @@ "level": 1 }, { - "id": "j", + "id": "1,4", "type": "diamond", "classes": [ "text", @@ -453,7 +453,7 @@ "level": 1 }, { - "id": "k", + "id": "2,0", "type": "rectangle", "pos": { "x": 0, @@ -494,7 +494,7 @@ "level": 1 }, { - "id": "k.a", + "id": "2,0.a", "type": "rectangle", "pos": { "x": 0, @@ -535,7 +535,7 @@ "level": 2 }, { - "id": "k.b", + "id": "2,0.b", "type": "rectangle", "pos": { "x": 0, @@ -576,7 +576,7 @@ "level": 2 }, { - "id": "k.c", + "id": "2,0.c", "type": "rectangle", "pos": { "x": 0, @@ -617,7 +617,7 @@ "level": 2 }, { - "id": "l", + "id": "2,1", "type": "rectangle", "classes": [ "empty" @@ -661,7 +661,7 @@ "level": 1 }, { - "id": "m", + "id": "2,2", "type": "rectangle", "classes": [ "empty" @@ -705,7 +705,7 @@ "level": 1 }, { - "id": "n", + "id": "2,3", "type": "rectangle", "classes": [ "empty" @@ -749,7 +749,7 @@ "level": 1 }, { - "id": "o", + "id": "2,4", "type": "rectangle", "classes": [ "text", @@ -796,13 +796,13 @@ ], "connections": [ { - "id": "(a -> f)[0]", + "id": "(0,0 -> 1,0)[0]", "classes": [ "arrow" ], - "src": "a", + "src": "0,0", "srcArrow": "none", - "dst": "f", + "dst": "1,0", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -837,13 +837,13 @@ "zIndex": 0 }, { - "id": "(f -> g)[0]", + "id": "(1,0 -> 1,1)[0]", "classes": [ "arrow" ], - "src": "f", + "src": "1,0", "srcArrow": "none", - "dst": "g", + "dst": "1,1", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -878,13 +878,13 @@ "zIndex": 0 }, { - "id": "(g -> h)[0]", + "id": "(1,1 -> 1,2)[0]", "classes": [ "arrow" ], - "src": "g", + "src": "1,1", "srcArrow": "none", - "dst": "h", + "dst": "1,2", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -919,13 +919,13 @@ "zIndex": 0 }, { - "id": "(h -> i)[0]", + "id": "(1,2 -> 1,3)[0]", "classes": [ "arrow" ], - "src": "h", + "src": "1,2", "srcArrow": "none", - "dst": "i", + "dst": "1,3", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -960,13 +960,13 @@ "zIndex": 0 }, { - "id": "(i -> j)[0]", + "id": "(1,3 -> 1,4)[0]", "classes": [ "arrow" ], - "src": "i", + "src": "1,3", "srcArrow": "none", - "dst": "j", + "dst": "1,4", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -1001,13 +1001,13 @@ "zIndex": 0 }, { - "id": "(g -> b)[0]", + "id": "(1,1 -> 0,1)[0]", "classes": [ "arrow" ], - "src": "g", + "src": "1,1", "srcArrow": "none", - "dst": "b", + "dst": "0,1", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -1042,13 +1042,13 @@ "zIndex": 0 }, { - "id": "(i -> d)[0]", + "id": "(1,3 -> 0,3)[0]", "classes": [ "arrow" ], - "src": "i", + "src": "1,3", "srcArrow": "none", - "dst": "d", + "dst": "0,3", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -1083,13 +1083,13 @@ "zIndex": 0 }, { - "id": "(j -> e)[0]", + "id": "(1,4 -> 0,4)[0]", "classes": [ "arrow" ], - "src": "j", + "src": "1,4", "srcArrow": "none", - "dst": "e", + "dst": "0,4", "dstArrow": "arrow", "opacity": 1, "strokeDash": 0, @@ -1124,13 +1124,13 @@ "zIndex": 0 }, { - "id": "(j -> o)[0]", + "id": "(1,4 -> 2,4)[0]", "classes": [ "arrow" ], - "src": "j", + "src": "1,4", "srcArrow": "none", - "dst": "o", + "dst": "2,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 7194aedc7..d57150a7d 100644 --- a/e2etests/testdata/stable/simple_grid_edges/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/simple_grid_edges/elk/sketch.exp.svg @@ -1,23 +1,23 @@ -npm i -g@forge/cliSet up anAtlassian siteView the helloworld appforgetunnelforgeloginforgecreateforgedeployforgeinstallHot reloadchanges?forgedeploy⬤ Forge CLI⬤ Required⬤ Optional YesNo + .d2-2096830999 .fill-N1{fill:#0A0F25;} + .d2-2096830999 .fill-N2{fill:#676C7E;} + .d2-2096830999 .fill-N3{fill:#9499AB;} + .d2-2096830999 .fill-N4{fill:#CFD2DD;} + .d2-2096830999 .fill-N5{fill:#DEE1EB;} + .d2-2096830999 .fill-N6{fill:#EEF1F8;} + .d2-2096830999 .fill-N7{fill:#FFFFFF;} + .d2-2096830999 .fill-B1{fill:#0D32B2;} + .d2-2096830999 .fill-B2{fill:#0D32B2;} + .d2-2096830999 .fill-B3{fill:#E3E9FD;} + .d2-2096830999 .fill-B4{fill:#E3E9FD;} + .d2-2096830999 .fill-B5{fill:#EDF0FD;} + .d2-2096830999 .fill-B6{fill:#F7F8FE;} + .d2-2096830999 .fill-AA2{fill:#4A6FF3;} + .d2-2096830999 .fill-AA4{fill:#EDF0FD;} + .d2-2096830999 .fill-AA5{fill:#F7F8FE;} + .d2-2096830999 .fill-AB4{fill:#EDF0FD;} + .d2-2096830999 .fill-AB5{fill:#F7F8FE;} + .d2-2096830999 .stroke-N1{stroke:#0A0F25;} + .d2-2096830999 .stroke-N2{stroke:#676C7E;} + .d2-2096830999 .stroke-N3{stroke:#9499AB;} + .d2-2096830999 .stroke-N4{stroke:#CFD2DD;} + .d2-2096830999 .stroke-N5{stroke:#DEE1EB;} + .d2-2096830999 .stroke-N6{stroke:#EEF1F8;} + .d2-2096830999 .stroke-N7{stroke:#FFFFFF;} + .d2-2096830999 .stroke-B1{stroke:#0D32B2;} + .d2-2096830999 .stroke-B2{stroke:#0D32B2;} + .d2-2096830999 .stroke-B3{stroke:#E3E9FD;} + .d2-2096830999 .stroke-B4{stroke:#E3E9FD;} + .d2-2096830999 .stroke-B5{stroke:#EDF0FD;} + .d2-2096830999 .stroke-B6{stroke:#F7F8FE;} + .d2-2096830999 .stroke-AA2{stroke:#4A6FF3;} + .d2-2096830999 .stroke-AA4{stroke:#EDF0FD;} + .d2-2096830999 .stroke-AA5{stroke:#F7F8FE;} + .d2-2096830999 .stroke-AB4{stroke:#EDF0FD;} + .d2-2096830999 .stroke-AB5{stroke:#F7F8FE;} + .d2-2096830999 .background-color-N1{background-color:#0A0F25;} + .d2-2096830999 .background-color-N2{background-color:#676C7E;} + .d2-2096830999 .background-color-N3{background-color:#9499AB;} + .d2-2096830999 .background-color-N4{background-color:#CFD2DD;} + .d2-2096830999 .background-color-N5{background-color:#DEE1EB;} + .d2-2096830999 .background-color-N6{background-color:#EEF1F8;} + .d2-2096830999 .background-color-N7{background-color:#FFFFFF;} + .d2-2096830999 .background-color-B1{background-color:#0D32B2;} + .d2-2096830999 .background-color-B2{background-color:#0D32B2;} + .d2-2096830999 .background-color-B3{background-color:#E3E9FD;} + .d2-2096830999 .background-color-B4{background-color:#E3E9FD;} + .d2-2096830999 .background-color-B5{background-color:#EDF0FD;} + .d2-2096830999 .background-color-B6{background-color:#F7F8FE;} + .d2-2096830999 .background-color-AA2{background-color:#4A6FF3;} + .d2-2096830999 .background-color-AA4{background-color:#EDF0FD;} + .d2-2096830999 .background-color-AA5{background-color:#F7F8FE;} + .d2-2096830999 .background-color-AB4{background-color:#EDF0FD;} + .d2-2096830999 .background-color-AB5{background-color:#F7F8FE;} + .d2-2096830999 .color-N1{color:#0A0F25;} + .d2-2096830999 .color-N2{color:#676C7E;} + .d2-2096830999 .color-N3{color:#9499AB;} + .d2-2096830999 .color-N4{color:#CFD2DD;} + .d2-2096830999 .color-N5{color:#DEE1EB;} + .d2-2096830999 .color-N6{color:#EEF1F8;} + .d2-2096830999 .color-N7{color:#FFFFFF;} + .d2-2096830999 .color-B1{color:#0D32B2;} + .d2-2096830999 .color-B2{color:#0D32B2;} + .d2-2096830999 .color-B3{color:#E3E9FD;} + .d2-2096830999 .color-B4{color:#E3E9FD;} + .d2-2096830999 .color-B5{color:#EDF0FD;} + .d2-2096830999 .color-B6{color:#F7F8FE;} + .d2-2096830999 .color-AA2{color:#4A6FF3;} + .d2-2096830999 .color-AA4{color:#EDF0FD;} + .d2-2096830999 .color-AA5{color:#F7F8FE;} + .d2-2096830999 .color-AB4{color:#EDF0FD;} + .d2-2096830999 .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?forgedeploy⬤ Forge CLI⬤ Required⬤ Optional YesNo From e74aa2ac22a961bff8c7b935170594b046f5f9f6 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Wed, 13 Sep 2023 21:18:22 -0700 Subject: [PATCH 16/16] 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 @@ + + + +