Merge pull request #1380 from gavin-ts/grid-with-latex

grid: fix dynamic layout cuts

ci/release/changelogs/next.md

@@ -29,3 +29,4 @@
   all applied instead of only the last one [#1362](https://github.com/terrastruct/d2/pull/1362)
 - Prevent empty block strings [#1364](https://github.com/terrastruct/d2/pull/1364)
 - Fixes dagre mis-aligning a nested shape's connection. [#1370](https://github.com/terrastruct/d2/pull/1370)
+- Fixes a bug in grids sometimes putting a shape on the next row/column. [#1380](https://github.com/terrastruct/d2/pull/1380)

d2layouts/d2grid/layout.go

@@ -590,7 +590,7 @@ func (gd *gridDiagram) getBestLayout(targetSize float64, columns bool) [][]*d2gr
 		nCuts = gd.rows - 1
 	}
 	if nCuts == 0 {
-		return genLayout(gd.objects, nil)
+		return GenLayout(gd.objects, nil)
 	}
 
 	var bestLayout [][]*d2graph.Object
@@ -692,7 +692,7 @@ func (gd *gridDiagram) getBestLayout(targetSize float64, columns bool) [][]*d2gr
 	// .       A │ B │ C   D   E                                  └────────────┘
 	// of these divisions, find the layout with rows closest to the targetSize
 	tryDivision := func(division []int) bool {
-		layout := genLayout(gd.objects, division)
+		layout := GenLayout(gd.objects, division)
 		dist := getDistToTarget(layout, targetSize, float64(gd.horizontalGap), float64(gd.verticalGap), columns)
 		if dist < bestDist {
 			bestLayout = layout
@@ -786,8 +786,10 @@ func (gd *gridDiagram) fastLayout(targetSize float64, nCuts int, columns bool) (
 			size = o.Width
 		}
 		if rowSize == 0 {
+			// if a single object meets the target size, end the row here
 			if size > targetSize-debt {
-				fastDivision = append(fastDivision, i-1)
+				// cut row with just this object
+				fastDivision = append(fastDivision, i)
 				// we build up a debt of distance past the target size across rows
 				newDebt := size - targetSize
 				debt += newDebt
@@ -797,7 +799,11 @@ func (gd *gridDiagram) fastLayout(targetSize float64, nCuts int, columns bool) (
 			continue
 		}
 		// debt is paid by decreasing threshold to start new row and ending below targetSize
-		if rowSize+(gap+size)/2. > targetSize-debt {
+		if rowSize+gap+(size)/2. > targetSize-debt {
+			// start a new row before this object since it is mostly past the target size
+			// .              size
+			// ├...row─┼gap┼───┼───┤
+			// ├──targetSize──┤ (debt=0)
 			fastDivision = append(fastDivision, i-1)
 			newDebt := rowSize - targetSize
 			debt += newDebt
@@ -807,7 +813,7 @@ func (gd *gridDiagram) fastLayout(targetSize float64, nCuts int, columns bool) (
 		}
 	}
 	if len(fastDivision) == nCuts {
-		layout = genLayout(gd.objects, fastDivision)
+		layout = GenLayout(gd.objects, fastDivision)
 	}
 
 	return layout
@@ -885,7 +891,9 @@ func iterDivisions(objects []*d2graph.Object, nCuts int, f iterDivision, check c
 }
 
 // generate a grid of objects from the given cut indices
-func genLayout(objects []*d2graph.Object, cutIndices []int) [][]*d2graph.Object {
+// each cut index applies after the object at that index
+// e.g. [0 1 2 3 4 5 6 7] with cutIndices [0, 2, 6] => [[0], [1, 2], [3,4,5,6], [7]]
+func GenLayout(objects []*d2graph.Object, cutIndices []int) [][]*d2graph.Object {
 	layout := make([][]*d2graph.Object, len(cutIndices)+1)
 	objIndex := 0
 	for i := 0; i <= len(cutIndices); i++ {
@@ -916,6 +924,13 @@ func getDistToTarget(layout [][]*d2graph.Object, targetSize float64, horizontalG
 				rowSize += o.Width + horizontalGap
 			}
 		}
+		if len(row) > 0 {
+			if columns {
+				rowSize -= verticalGap
+			} else {
+				rowSize -= horizontalGap
+			}
+		}
 		totalDelta += math.Abs(rowSize - targetSize)
 	}
 	return totalDelta

d2layouts/d2grid/layout_test.go

@@ -0,0 +1,72 @@
+package d2grid_test
+
+import (
+	"fmt"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+
+	"oss.terrastruct.com/d2/d2graph"
+	"oss.terrastruct.com/d2/d2layouts/d2grid"
+)
+
+func TestGenLayout(t *testing.T) {
+	objects := []*d2graph.Object{
+		{ID: "1"},
+		{ID: "2"},
+		{ID: "3"},
+		{ID: "4"},
+		{ID: "5"},
+		{ID: "6"},
+		{ID: "7"},
+		{ID: "8"},
+	}
+	var cutIndices []int
+	var layout [][]*d2graph.Object
+	cutIndices = []int{0}
+	layout = d2grid.GenLayout(objects, cutIndices)
+	fmt.Printf("layout %v\n", len(layout))
+	assert.Equalf(t, len(cutIndices)+1, len(layout), "expected 2 rows from 1 cut")
+	assert.Equalf(t, 1, len(layout[0]), "expected first row to be 1 object")
+	assert.Equalf(t, 7, len(layout[1]), "expected second row to be 7 objects")
+	assert.Equalf(t, objects[0].ID, layout[0][0].ID, "expected first object to be 1")
+
+	cutIndices = []int{6}
+	layout = d2grid.GenLayout(objects, cutIndices)
+	assert.Equalf(t, len(cutIndices)+1, len(layout), "expected 2 rows from 1 cut")
+	assert.Equalf(t, 7, len(layout[0]), "expected first row to be 7 objects")
+	assert.Equalf(t, 1, len(layout[1]), "expected second row to be 1 object")
+
+	cutIndices = []int{0, 6}
+	layout = d2grid.GenLayout(objects, cutIndices)
+	assert.Equalf(t, len(cutIndices)+1, len(layout), "expected 3 rows from 2 cuts")
+	assert.Equalf(t, 1, len(layout[0]), "expected first row to be 1 objects")
+	assert.Equalf(t, 6, len(layout[1]), "expected second row to be 6 objects")
+	assert.Equalf(t, 1, len(layout[2]), "expected second row to be 1 object")
+
+	cutIndices = []int{1, 5}
+	layout = d2grid.GenLayout(objects, cutIndices)
+	assert.Equalf(t, len(cutIndices)+1, len(layout), "expected 3 rows from 2 cuts")
+	assert.Equalf(t, 2, len(layout[0]), "expected first row to be 2 objects")
+	assert.Equalf(t, 4, len(layout[1]), "expected second row to be 6 objects")
+	assert.Equalf(t, 2, len(layout[2]), "expected second row to be 2 object")
+
+	cutIndices = []int{5}
+	layout = d2grid.GenLayout(objects, cutIndices)
+	assert.Equalf(t, len(cutIndices)+1, len(layout), "expected 2 rows from 1 cut")
+	assert.Equalf(t, 6, len(layout[0]), "expected first row to be 6 objects")
+	assert.Equalf(t, 2, len(layout[1]), "expected second row to be 2 object")
+
+	cutIndices = []int{1}
+	layout = d2grid.GenLayout(objects, cutIndices)
+	assert.Equalf(t, len(cutIndices)+1, len(layout), "expected 2 rows from 1 cut")
+	assert.Equalf(t, 2, len(layout[0]), "expected first row to be 2 object")
+	assert.Equalf(t, 6, len(layout[1]), "expected second row to be 6 objects")
+
+	cutIndices = []int{0, 1, 2, 3, 4, 5, 6}
+	layout = d2grid.GenLayout(objects, cutIndices)
+	assert.Equalf(t, len(cutIndices)+1, len(layout), "expected 3 rows from 2 cuts")
+	for i := range layout {
+		assert.Equalf(t, 1, len(layout[i]), "expected row %d to be 1 object", i)
+	}
+}

e2etests/regression_test.go

@@ -934,6 +934,7 @@ cf many required: {
 		loadFromFile(t, "slow_grid"),
 		loadFromFile(t, "grid_oom"),
 		loadFromFile(t, "cylinder_grid_label"),
+		loadFromFile(t, "grid_with_latex"),
 	}
 
 	runa(t, tcs)

e2etests/testdata/files/grid_with_latex.d2

@@ -0,0 +1,27 @@
+x: {
+  grid-columns: 2
+
+  a.width: 50
+  a.height: 72
+  b.width: 50
+  b.height: 30
+}
+
+y: {
+  grid-columns: 2
+
+  a.width: 50
+  a.height: 73
+  b.width: 50
+  b.height: 30
+}
+
+z: {
+  grid-columns: 2
+  lim: |latex
+    \\lim_{h \\rightarrow 0 } \\frac{f(x+h)-f(x)}{h}
+  |
+  add: |latex
+    1 + 1
+  |
+}

e2etests/testdata/regression/grid_with_latex/dagre/board.exp.json

@@ -0,0 +1,417 @@
+{
+  "name": "",
+  "isFolderOnly": false,
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "x",
+      "type": "rectangle",
+      "pos": {
+        "x": 0,
+        "y": 1
+      },
+      "width": 260,
+      "height": 192,
+      "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": "x",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 36,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "x.a",
+      "type": "rectangle",
+      "pos": {
+        "x": 60,
+        "y": 61
+      },
+      "width": 50,
+      "height": 72,
+      "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": "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": 2
+    },
+    {
+      "id": "x.b",
+      "type": "rectangle",
+      "pos": {
+        "x": 150,
+        "y": 61
+      },
+      "width": 50,
+      "height": 72,
+      "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": "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": 2
+    },
+    {
+      "id": "y",
+      "type": "rectangle",
+      "pos": {
+        "x": 320,
+        "y": 0
+      },
+      "width": 260,
+      "height": 193,
+      "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": "y",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 36,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "y.a",
+      "type": "rectangle",
+      "pos": {
+        "x": 380,
+        "y": 60
+      },
+      "width": 50,
+      "height": 73,
+      "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": "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": 2
+    },
+    {
+      "id": "y.b",
+      "type": "rectangle",
+      "pos": {
+        "x": 470,
+        "y": 60
+      },
+      "width": 50,
+      "height": 73,
+      "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": "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": 2
+    },
+    {
+      "id": "z",
+      "type": "rectangle",
+      "pos": {
+        "x": 640,
+        "y": 16
+      },
+      "width": 363,
+      "height": 161,
+      "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": "z",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 36,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "z.lim",
+      "type": "text",
+      "pos": {
+        "x": 700,
+        "y": 76
+      },
+      "width": 162,
+      "height": 41,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "N1",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "\\\\lim_{h \\\\rightarrow 0 } \\\\frac{f(x+h)-f(x)}{h}",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "latex",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 162,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "z.add",
+      "type": "text",
+      "pos": {
+        "x": 902,
+        "y": 76
+      },
+      "width": 41,
+      "height": 41,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "N1",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "1 + 1",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "latex",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 41,
+      "labelHeight": 14,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    }
+  ],
+  "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
+  }
+}

e2etests/testdata/regression/grid_with_latex/elk/board.exp.json

@@ -0,0 +1,417 @@
+{
+  "name": "",
+  "isFolderOnly": false,
+  "fontFamily": "SourceSansPro",
+  "shapes": [
+    {
+      "id": "x",
+      "type": "rectangle",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 260,
+      "height": 192,
+      "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": "x",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 36,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "x.a",
+      "type": "rectangle",
+      "pos": {
+        "x": 72,
+        "y": 72
+      },
+      "width": 50,
+      "height": 72,
+      "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": "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": 2
+    },
+    {
+      "id": "x.b",
+      "type": "rectangle",
+      "pos": {
+        "x": 162,
+        "y": 72
+      },
+      "width": 50,
+      "height": 72,
+      "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": "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": 2
+    },
+    {
+      "id": "y",
+      "type": "rectangle",
+      "pos": {
+        "x": 292,
+        "y": 12
+      },
+      "width": 260,
+      "height": 193,
+      "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": "y",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 36,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "y.a",
+      "type": "rectangle",
+      "pos": {
+        "x": 352,
+        "y": 72
+      },
+      "width": 50,
+      "height": 73,
+      "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": "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": 2
+    },
+    {
+      "id": "y.b",
+      "type": "rectangle",
+      "pos": {
+        "x": 442,
+        "y": 72
+      },
+      "width": 50,
+      "height": 73,
+      "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": "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": 2
+    },
+    {
+      "id": "z",
+      "type": "rectangle",
+      "pos": {
+        "x": 572,
+        "y": 28
+      },
+      "width": 363,
+      "height": 161,
+      "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": "z",
+      "fontSize": 28,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 12,
+      "labelHeight": 36,
+      "labelPosition": "INSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    },
+    {
+      "id": "z.lim",
+      "type": "text",
+      "pos": {
+        "x": 632,
+        "y": 88
+      },
+      "width": 162,
+      "height": 41,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "N1",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "\\\\lim_{h \\\\rightarrow 0 } \\\\frac{f(x+h)-f(x)}{h}",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "latex",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 162,
+      "labelHeight": 41,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    },
+    {
+      "id": "z.add",
+      "type": "text",
+      "pos": {
+        "x": 834,
+        "y": 88
+      },
+      "width": 41,
+      "height": 41,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "transparent",
+      "stroke": "N1",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "double-border": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "1 + 1",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "latex",
+      "color": "N1",
+      "italic": false,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 41,
+      "labelHeight": 14,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 2
+    }
+  ],
+  "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
+  }
+}

e2etests/testdata/stable/grid_tests/dagre/board.exp.json

@@ -2634,7 +2634,7 @@
         "x": 3548,
         "y": 212
       },
-      "width": 359,
+      "width": 358,
       "height": 398,
       "opacity": 1,
       "strokeDash": 0,
@@ -2675,7 +2675,7 @@
         "x": 3608,
         "y": 272
       },
-      "width": 53,
+      "width": 99,
       "height": 66,
       "opacity": 1,
       "strokeDash": 0,
@@ -2713,10 +2713,10 @@
       "id": "rows 3.b",
       "type": "rectangle",
       "pos": {
-        "x": 3701,
+        "x": 3747,
         "y": 272
       },
-      "width": 53,
+      "width": 99,
       "height": 66,
       "opacity": 1,
       "strokeDash": 0,
@@ -2754,10 +2754,10 @@
       "id": "rows 3.c",
       "type": "rectangle",
       "pos": {
-        "x": 3794,
+        "x": 3608,
-        "y": 272
+        "y": 378
       },
-      "width": 53,
+      "width": 99,
       "height": 66,
       "opacity": 1,
       "strokeDash": 0,
@@ -2795,7 +2795,7 @@
       "id": "rows 3.d",
       "type": "rectangle",
       "pos": {
-        "x": 3608,
+        "x": 3747,
         "y": 378
       },
       "width": 99,
@@ -2836,10 +2836,10 @@
       "id": "rows 3.e",
       "type": "rectangle",
       "pos": {
-        "x": 3747,
+        "x": 3608,
-        "y": 378
+        "y": 484
       },
-      "width": 99,
+      "width": 53,
       "height": 66,
       "opacity": 1,
       "strokeDash": 0,
@@ -2877,10 +2877,10 @@
       "id": "rows 3.f",
       "type": "rectangle",
       "pos": {
-        "x": 3608,
+        "x": 3701,
         "y": 484
       },
-      "width": 99,
+      "width": 51,
       "height": 66,
       "opacity": 1,
       "strokeDash": 0,
@@ -2918,10 +2918,10 @@
       "id": "rows 3.g",
       "type": "rectangle",
       "pos": {
-        "x": 3747,
+        "x": 3792,
         "y": 484
       },
-      "width": 99,
+      "width": 54,
       "height": 66,
       "opacity": 1,
       "strokeDash": 0,
@@ -2959,7 +2959,7 @@
       "id": "columns 3",
       "type": "rectangle",
       "pos": {
-        "x": 3967,
+        "x": 3966,
         "y": 212
       },
       "width": 361,
@@ -3000,7 +3000,7 @@
       "id": "columns 3.a",
       "type": "rectangle",
       "pos": {
-        "x": 4027,
+        "x": 4026,
         "y": 272
       },
       "width": 53,
@@ -3041,7 +3041,7 @@
       "id": "columns 3.b",
       "type": "rectangle",
       "pos": {
-        "x": 4027,
+        "x": 4026,
         "y": 378
       },
       "width": 53,
@@ -3082,7 +3082,7 @@
       "id": "columns 3.c",
       "type": "rectangle",
       "pos": {
-        "x": 4027,
+        "x": 4026,
         "y": 484
       },
       "width": 53,
@@ -3123,7 +3123,7 @@
       "id": "columns 3.d",
       "type": "rectangle",
       "pos": {
-        "x": 4120,
+        "x": 4119,
         "y": 272
       },
       "width": 54,
@@ -3164,7 +3164,7 @@
       "id": "columns 3.e",
       "type": "rectangle",
       "pos": {
-        "x": 4120,
+        "x": 4119,
         "y": 431
       },
       "width": 54,
@@ -3205,7 +3205,7 @@
       "id": "columns 3.f",
       "type": "rectangle",
       "pos": {
-        "x": 4214,
+        "x": 4213,
         "y": 272
       },
       "width": 54,
@@ -3246,7 +3246,7 @@
       "id": "columns 3.g",
       "type": "rectangle",
       "pos": {
-        "x": 4214,
+        "x": 4213,
         "y": 431
       },
       "width": 54,
@@ -3287,7 +3287,7 @@
       "id": "widths heights",
       "type": "rectangle",
       "pos": {
-        "x": 4388,
+        "x": 4387,
         "y": 28
       },
       "width": 886,
@@ -3328,7 +3328,7 @@
       "id": "widths heights.a w200",
       "type": "rectangle",
       "pos": {
-        "x": 4448,
+        "x": 4447,
         "y": 88
       },
       "width": 200,
@@ -3369,7 +3369,7 @@
       "id": "widths heights.b h300",
       "type": "rectangle",
       "pos": {
-        "x": 4688,
+        "x": 4687,
         "y": 88
       },
       "width": 86,
@@ -3410,7 +3410,7 @@
       "id": "widths heights.c",
       "type": "rectangle",
       "pos": {
-        "x": 4814,
+        "x": 4813,
         "y": 88
       },
       "width": 400,
@@ -3451,7 +3451,7 @@
       "id": "widths heights.d h200",
       "type": "rectangle",
       "pos": {
-        "x": 4448,
+        "x": 4447,
         "y": 428
       },
       "width": 200,
@@ -3492,7 +3492,7 @@
       "id": "widths heights.e",
       "type": "rectangle",
       "pos": {
-        "x": 4688,
+        "x": 4687,
         "y": 428
       },
       "width": 86,
@@ -3533,7 +3533,7 @@
       "id": "widths heights.f w400",
       "type": "rectangle",
       "pos": {
-        "x": 4814,
+        "x": 4813,
         "y": 428
       },
       "width": 400,
@@ -3574,7 +3574,7 @@
       "id": "widths heights.g",
       "type": "rectangle",
       "pos": {
-        "x": 4448,
+        "x": 4447,
         "y": 668
       },
       "width": 200,
@@ -3615,7 +3615,7 @@
       "id": "widths heights.h",
       "type": "rectangle",
       "pos": {
-        "x": 4688,
+        "x": 4687,
         "y": 668
       },
       "width": 86,
@@ -3656,7 +3656,7 @@
       "id": "widths heights.i",
       "type": "rectangle",
       "pos": {
-        "x": 4814,
+        "x": 4813,
         "y": 668
       },
       "width": 400,

e2etests/testdata/stable/grid_tests/elk/board.exp.json

@@ -2634,7 +2634,7 @@
         "x": 3240,
         "y": 224
       },
-      "width": 359,
+      "width": 358,
       "height": 398,
       "opacity": 1,
       "strokeDash": 0,
@@ -2675,7 +2675,7 @@
         "x": 3300,
         "y": 284
       },
-      "width": 53,
+      "width": 99,
       "height": 66,
       "opacity": 1,
       "strokeDash": 0,
@@ -2713,10 +2713,10 @@
       "id": "rows 3.b",
       "type": "rectangle",
       "pos": {
-        "x": 3393,
+        "x": 3439,
         "y": 284
       },
-      "width": 53,
+      "width": 99,
       "height": 66,
       "opacity": 1,
       "strokeDash": 0,
@@ -2754,10 +2754,10 @@
       "id": "rows 3.c",
       "type": "rectangle",
       "pos": {
-        "x": 3486,
+        "x": 3300,
-        "y": 284
+        "y": 390
       },
-      "width": 53,
+      "width": 99,
       "height": 66,
       "opacity": 1,
       "strokeDash": 0,
@@ -2795,7 +2795,7 @@
       "id": "rows 3.d",
       "type": "rectangle",
       "pos": {
-        "x": 3300,
+        "x": 3439,
         "y": 390
       },
       "width": 99,
@@ -2836,10 +2836,10 @@
       "id": "rows 3.e",
       "type": "rectangle",
       "pos": {
-        "x": 3439,
+        "x": 3300,
-        "y": 390
+        "y": 496
       },
-      "width": 99,
+      "width": 53,
       "height": 66,
       "opacity": 1,
       "strokeDash": 0,
@@ -2877,10 +2877,10 @@
       "id": "rows 3.f",
       "type": "rectangle",
       "pos": {
-        "x": 3300,
+        "x": 3393,
         "y": 496
       },
-      "width": 99,
+      "width": 51,
       "height": 66,
       "opacity": 1,
       "strokeDash": 0,
@@ -2918,10 +2918,10 @@
       "id": "rows 3.g",
       "type": "rectangle",
       "pos": {
-        "x": 3439,
+        "x": 3484,
         "y": 496
       },
-      "width": 99,
+      "width": 54,
       "height": 66,
       "opacity": 1,
       "strokeDash": 0,
@@ -2959,7 +2959,7 @@
       "id": "columns 3",
       "type": "rectangle",
       "pos": {
-        "x": 3619,
+        "x": 3618,
         "y": 224
       },
       "width": 361,
@@ -3000,7 +3000,7 @@
       "id": "columns 3.a",
       "type": "rectangle",
       "pos": {
-        "x": 3679,
+        "x": 3678,
         "y": 284
       },
       "width": 53,
@@ -3041,7 +3041,7 @@
       "id": "columns 3.b",
       "type": "rectangle",
       "pos": {
-        "x": 3679,
+        "x": 3678,
         "y": 390
       },
       "width": 53,
@@ -3082,7 +3082,7 @@
       "id": "columns 3.c",
       "type": "rectangle",
       "pos": {
-        "x": 3679,
+        "x": 3678,
         "y": 496
       },
       "width": 53,
@@ -3123,7 +3123,7 @@
       "id": "columns 3.d",
       "type": "rectangle",
       "pos": {
-        "x": 3772,
+        "x": 3771,
         "y": 284
       },
       "width": 54,
@@ -3164,7 +3164,7 @@
       "id": "columns 3.e",
       "type": "rectangle",
       "pos": {
-        "x": 3772,
+        "x": 3771,
         "y": 443
       },
       "width": 54,
@@ -3205,7 +3205,7 @@
       "id": "columns 3.f",
       "type": "rectangle",
       "pos": {
-        "x": 3866,
+        "x": 3865,
         "y": 284
       },
       "width": 54,
@@ -3246,7 +3246,7 @@
       "id": "columns 3.g",
       "type": "rectangle",
       "pos": {
-        "x": 3866,
+        "x": 3865,
         "y": 443
       },
       "width": 54,
@@ -3287,7 +3287,7 @@
       "id": "widths heights",
       "type": "rectangle",
       "pos": {
-        "x": 4000,
+        "x": 3999,
         "y": 40
       },
       "width": 886,
@@ -3328,7 +3328,7 @@
       "id": "widths heights.a w200",
       "type": "rectangle",
       "pos": {
-        "x": 4060,
+        "x": 4059,
         "y": 100
       },
       "width": 200,
@@ -3369,7 +3369,7 @@
       "id": "widths heights.b h300",
       "type": "rectangle",
       "pos": {
-        "x": 4300,
+        "x": 4299,
         "y": 100
       },
       "width": 86,
@@ -3410,7 +3410,7 @@
       "id": "widths heights.c",
       "type": "rectangle",
       "pos": {
-        "x": 4426,
+        "x": 4425,
         "y": 100
       },
       "width": 400,
@@ -3451,7 +3451,7 @@
       "id": "widths heights.d h200",
       "type": "rectangle",
       "pos": {
-        "x": 4060,
+        "x": 4059,
         "y": 440
       },
       "width": 200,
@@ -3492,7 +3492,7 @@
       "id": "widths heights.e",
       "type": "rectangle",
       "pos": {
-        "x": 4300,
+        "x": 4299,
         "y": 440
       },
       "width": 86,
@@ -3533,7 +3533,7 @@
       "id": "widths heights.f w400",
       "type": "rectangle",
       "pos": {
-        "x": 4426,
+        "x": 4425,
         "y": 440
       },
       "width": 400,
@@ -3574,7 +3574,7 @@
       "id": "widths heights.g",
       "type": "rectangle",
       "pos": {
-        "x": 4060,
+        "x": 4059,
         "y": 680
       },
       "width": 200,
@@ -3615,7 +3615,7 @@
       "id": "widths heights.h",
       "type": "rectangle",
       "pos": {
-        "x": 4300,
+        "x": 4299,
         "y": 680
       },
       "width": 86,
@@ -3656,7 +3656,7 @@
       "id": "widths heights.i",
       "type": "rectangle",
       "pos": {
-        "x": 4426,
+        "x": 4425,
         "y": 680
       },
       "width": 400,