From ab204a920e974ab83ea34d8da01aed0a798d337d Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 14 Nov 2023 09:56:08 -0800 Subject: [PATCH 1/8] add grid_container_dimensions test --- e2etests/stable_test.go | 1 + e2etests/testdata/files/grid_container_dimensions.d2 | 11 +++++++++++ 2 files changed, 12 insertions(+) create mode 100644 e2etests/testdata/files/grid_container_dimensions.d2 diff --git a/e2etests/stable_test.go b/e2etests/stable_test.go index 88d4e3b9d..59a58208d 100644 --- a/e2etests/stable_test.go +++ b/e2etests/stable_test.go @@ -2869,6 +2869,7 @@ y: profits { loadFromFile(t, "grid_edge_across_cell"), loadFromFile(t, "nesting_power"), loadFromFile(t, "unfilled_triangle"), + loadFromFile(t, "grid_container_dimensions"), loadFromFile(t, "grid_label_positions"), } diff --git a/e2etests/testdata/files/grid_container_dimensions.d2 b/e2etests/testdata/files/grid_container_dimensions.d2 new file mode 100644 index 000000000..a09be08b3 --- /dev/null +++ b/e2etests/testdata/files/grid_container_dimensions.d2 @@ -0,0 +1,11 @@ +grid: { + width: 200 + height: 200 + grid-gap: 0 + grid-rows: 2 + grid-columns: 2 + a + b + c + d +} From d3c972a3646504e49f7ec0bed98c1f7cbef532cf Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 14 Nov 2023 09:57:38 -0800 Subject: [PATCH 2/8] always allow grid diagrams to have width/height set --- d2plugin/plugin_features.go | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/d2plugin/plugin_features.go b/d2plugin/plugin_features.go index 5ca6aef51..b4331234b 100644 --- a/d2plugin/plugin_features.go +++ b/d2plugin/plugin_features.go @@ -38,7 +38,8 @@ func FeatureSupportCheck(info *PluginInfo, g *d2graph.Graph) error { return fmt.Errorf(`Object "%s" has attribute "top" and/or "left" set, but layout engine "%s" does not support locked positions. See https://d2lang.com/tour/layouts/#layout-specific-functionality for more.`, obj.AbsID(), info.Name) } } - if (obj.WidthAttr != nil || obj.HeightAttr != nil) && len(obj.ChildrenArray) > 0 { + if (obj.WidthAttr != nil || obj.HeightAttr != nil) && + len(obj.ChildrenArray) > 0 && !obj.IsGridDiagram() { if _, ok := featureMap[CONTAINER_DIMENSIONS]; !ok { return fmt.Errorf(`Object "%s" has attribute "width" and/or "height" set, but layout engine "%s" does not support dimensions set on containers. See https://d2lang.com/tour/layouts/#layout-specific-functionality for more.`, obj.AbsID(), info.Name) } From bf18eb44e892ffc3a1cbebb6e90ad39d584a9ba5 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 14 Nov 2023 09:57:45 -0800 Subject: [PATCH 3/8] update test --- .../dagre/board.exp.json | 253 ++++++++++++++++++ .../dagre/sketch.exp.svg | 106 ++++++++ .../elk/board.exp.json | 253 ++++++++++++++++++ .../elk/sketch.exp.svg | 106 ++++++++ 4 files changed, 718 insertions(+) create mode 100644 e2etests/testdata/stable/grid_container_dimensions/dagre/board.exp.json create mode 100644 e2etests/testdata/stable/grid_container_dimensions/dagre/sketch.exp.svg create mode 100644 e2etests/testdata/stable/grid_container_dimensions/elk/board.exp.json create mode 100644 e2etests/testdata/stable/grid_container_dimensions/elk/sketch.exp.svg diff --git a/e2etests/testdata/stable/grid_container_dimensions/dagre/board.exp.json b/e2etests/testdata/stable/grid_container_dimensions/dagre/board.exp.json new file mode 100644 index 000000000..e3c7526ef --- /dev/null +++ b/e2etests/testdata/stable/grid_container_dimensions/dagre/board.exp.json @@ -0,0 +1,253 @@ +{ + "name": "", + "isFolderOnly": false, + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "grid", + "type": "rectangle", + "pos": { + "x": 0, + "y": 0 + }, + "width": 200, + "height": 246, + "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": "grid", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 44, + "labelHeight": 36, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "grid.a", + "type": "rectangle", + "pos": { + "x": 0, + "y": 46 + }, + "width": 53, + "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": "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": "grid.b", + "type": "rectangle", + "pos": { + "x": 53, + "y": 46 + }, + "width": 54, + "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": "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": "grid.c", + "type": "rectangle", + "pos": { + "x": 0, + "y": 112 + }, + "width": 53, + "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": "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": 2 + }, + { + "id": "grid.d", + "type": "rectangle", + "pos": { + "x": 53, + "y": 112 + }, + "width": 54, + "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": "d", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 9, + "labelHeight": 21, + "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 + } +} diff --git a/e2etests/testdata/stable/grid_container_dimensions/dagre/sketch.exp.svg b/e2etests/testdata/stable/grid_container_dimensions/dagre/sketch.exp.svg new file mode 100644 index 000000000..256be30f3 --- /dev/null +++ b/e2etests/testdata/stable/grid_container_dimensions/dagre/sketch.exp.svg @@ -0,0 +1,106 @@ +gridabcd + + + + + + + \ No newline at end of file diff --git a/e2etests/testdata/stable/grid_container_dimensions/elk/board.exp.json b/e2etests/testdata/stable/grid_container_dimensions/elk/board.exp.json new file mode 100644 index 000000000..9142be318 --- /dev/null +++ b/e2etests/testdata/stable/grid_container_dimensions/elk/board.exp.json @@ -0,0 +1,253 @@ +{ + "name": "", + "isFolderOnly": false, + "fontFamily": "SourceSansPro", + "shapes": [ + { + "id": "grid", + "type": "rectangle", + "pos": { + "x": 12, + "y": 12 + }, + "width": 200, + "height": 246, + "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": "grid", + "fontSize": 28, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": false, + "underline": false, + "labelWidth": 44, + "labelHeight": 36, + "labelPosition": "INSIDE_TOP_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "grid.a", + "type": "rectangle", + "pos": { + "x": 12, + "y": 58 + }, + "width": 53, + "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": "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": "grid.b", + "type": "rectangle", + "pos": { + "x": 65, + "y": 58 + }, + "width": 54, + "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": "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": "grid.c", + "type": "rectangle", + "pos": { + "x": 12, + "y": 124 + }, + "width": 53, + "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": "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": 2 + }, + { + "id": "grid.d", + "type": "rectangle", + "pos": { + "x": 65, + "y": 124 + }, + "width": 54, + "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": "d", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 9, + "labelHeight": 21, + "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 + } +} diff --git a/e2etests/testdata/stable/grid_container_dimensions/elk/sketch.exp.svg b/e2etests/testdata/stable/grid_container_dimensions/elk/sketch.exp.svg new file mode 100644 index 000000000..4751ed784 --- /dev/null +++ b/e2etests/testdata/stable/grid_container_dimensions/elk/sketch.exp.svg @@ -0,0 +1,106 @@ +gridabcd + + + + + + + \ No newline at end of file From b87cc8e7e1cda19ae850680bd6b2df794cd3a9fb Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 14 Nov 2023 10:49:08 -0800 Subject: [PATCH 4/8] update grid size with desiredWidth/Height after adjusting for label/icon --- d2layouts/d2grid/layout.go | 33 ++++++++++++++++----------------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/d2layouts/d2grid/layout.go b/d2layouts/d2grid/layout.go index f0956d053..0e15ee645 100644 --- a/d2layouts/d2grid/layout.go +++ b/d2layouts/d2grid/layout.go @@ -47,15 +47,7 @@ func Layout(ctx context.Context, g *d2graph.Graph) error { verticalPadding = gd.verticalGap } - // size shape according to grid - obj.SizeToContent(gd.width, gd.height, float64(2*horizontalPadding), float64(2*verticalPadding)) - - // compute where the grid should be placed inside shape - s := obj.ToShape() - innerBox := s.GetInnerBox() - if innerBox.TopLeft.X != 0 || innerBox.TopLeft.Y != 0 { - gd.shift(innerBox.TopLeft.X, innerBox.TopLeft.Y) - } + contentWidth, contentHeight := gd.width, gd.height var labelPosition, iconPosition label.Position if obj.LabelPosition != nil { @@ -83,7 +75,7 @@ func Layout(ctx context.Context, g *d2graph.Graph) error { label.InsideTopLeft, label.InsideTopCenter, label.InsideTopRight, label.InsideBottomLeft, label.InsideBottomCenter, label.InsideBottomRight, label.OutsideBottomLeft, label.OutsideBottomCenter, label.OutsideBottomRight: - overflow := labelWidth - (obj.Width - float64(2*horizontalPadding)) + overflow := labelWidth - contentWidth if overflow > 0 { padding.Left += overflow / 2 padding.Right += overflow / 2 @@ -95,7 +87,7 @@ func Layout(ctx context.Context, g *d2graph.Graph) error { case label.OutsideLeftTop, label.OutsideLeftMiddle, label.OutsideLeftBottom, label.InsideMiddleLeft, label.InsideMiddleCenter, label.InsideMiddleRight, label.OutsideRightTop, label.OutsideRightMiddle, label.OutsideRightBottom: - overflow := labelHeight - (obj.Height - float64(2*verticalPadding)) + overflow := labelHeight - contentHeight if overflow > 0 { padding.Top += overflow / 2 padding.Bottom += overflow / 2 @@ -112,7 +104,7 @@ func Layout(ctx context.Context, g *d2graph.Graph) error { padding.Left = math.Max(padding.Left, iconSize) padding.Right = math.Max(padding.Right, iconSize) minWidth := 2*iconSize + float64(obj.LabelDimensions.Width) + 2*label.PADDING - overflow := minWidth - (obj.Width - float64(2*horizontalPadding)) + overflow := minWidth - contentWidth if overflow > 0 { padding.Left = math.Max(padding.Left, overflow/2) padding.Right = math.Max(padding.Right, overflow/2) @@ -121,24 +113,31 @@ func Layout(ctx context.Context, g *d2graph.Graph) error { overflowTop := padding.Top - float64(verticalPadding) if overflowTop > 0 { - obj.Height += overflowTop + contentHeight += overflowTop dy += overflowTop } overflowBottom := padding.Bottom - float64(verticalPadding) if overflowBottom > 0 { - obj.Height += overflowBottom + contentHeight += overflowBottom } overflowLeft := padding.Left - float64(horizontalPadding) if overflowLeft > 0 { - obj.Width += overflowLeft + contentWidth += overflowLeft dx += overflowLeft } overflowRight := padding.Right - float64(horizontalPadding) if overflowRight > 0 { - obj.Width += overflowRight + contentWidth += overflowRight } - // we need to center children if we have to expand to fit the container label + // size shape according to grid + obj.SizeToContent(contentWidth, contentHeight, float64(2*horizontalPadding), float64(2*verticalPadding)) + + // compute where the grid should be placed inside shape + s := obj.ToShape() + innerBox := s.GetInnerBox() + dx = innerBox.TopLeft.X + dx + dy = innerBox.TopLeft.Y + dy if dx != 0 || dy != 0 { gd.shift(dx, dy) } From 0fd3aeb38311fe28ce00f8c4b177fe7758d8ddbd Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 14 Nov 2023 10:51:11 -0800 Subject: [PATCH 5/8] update test --- .../dagre/board.exp.json | 2 +- .../dagre/sketch.exp.svg | 160 +++++++++--------- .../elk/board.exp.json | 2 +- .../elk/sketch.exp.svg | 160 +++++++++--------- 4 files changed, 162 insertions(+), 162 deletions(-) diff --git a/e2etests/testdata/stable/grid_container_dimensions/dagre/board.exp.json b/e2etests/testdata/stable/grid_container_dimensions/dagre/board.exp.json index e3c7526ef..ff95c735d 100644 --- a/e2etests/testdata/stable/grid_container_dimensions/dagre/board.exp.json +++ b/e2etests/testdata/stable/grid_container_dimensions/dagre/board.exp.json @@ -11,7 +11,7 @@ "y": 0 }, "width": 200, - "height": 246, + "height": 200, "opacity": 1, "strokeDash": 0, "strokeWidth": 2, diff --git a/e2etests/testdata/stable/grid_container_dimensions/dagre/sketch.exp.svg b/e2etests/testdata/stable/grid_container_dimensions/dagre/sketch.exp.svg index 256be30f3..7b17d78a0 100644 --- a/e2etests/testdata/stable/grid_container_dimensions/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/grid_container_dimensions/dagre/sketch.exp.svg @@ -1,16 +1,16 @@ -gridabcd - + .d2-1367990603 .fill-N1{fill:#0A0F25;} + .d2-1367990603 .fill-N2{fill:#676C7E;} + .d2-1367990603 .fill-N3{fill:#9499AB;} + .d2-1367990603 .fill-N4{fill:#CFD2DD;} + .d2-1367990603 .fill-N5{fill:#DEE1EB;} + .d2-1367990603 .fill-N6{fill:#EEF1F8;} + .d2-1367990603 .fill-N7{fill:#FFFFFF;} + .d2-1367990603 .fill-B1{fill:#0D32B2;} + .d2-1367990603 .fill-B2{fill:#0D32B2;} + .d2-1367990603 .fill-B3{fill:#E3E9FD;} + .d2-1367990603 .fill-B4{fill:#E3E9FD;} + .d2-1367990603 .fill-B5{fill:#EDF0FD;} + .d2-1367990603 .fill-B6{fill:#F7F8FE;} + .d2-1367990603 .fill-AA2{fill:#4A6FF3;} + .d2-1367990603 .fill-AA4{fill:#EDF0FD;} + .d2-1367990603 .fill-AA5{fill:#F7F8FE;} + .d2-1367990603 .fill-AB4{fill:#EDF0FD;} + .d2-1367990603 .fill-AB5{fill:#F7F8FE;} + .d2-1367990603 .stroke-N1{stroke:#0A0F25;} + .d2-1367990603 .stroke-N2{stroke:#676C7E;} + .d2-1367990603 .stroke-N3{stroke:#9499AB;} + .d2-1367990603 .stroke-N4{stroke:#CFD2DD;} + .d2-1367990603 .stroke-N5{stroke:#DEE1EB;} + .d2-1367990603 .stroke-N6{stroke:#EEF1F8;} + .d2-1367990603 .stroke-N7{stroke:#FFFFFF;} + .d2-1367990603 .stroke-B1{stroke:#0D32B2;} + .d2-1367990603 .stroke-B2{stroke:#0D32B2;} + .d2-1367990603 .stroke-B3{stroke:#E3E9FD;} + .d2-1367990603 .stroke-B4{stroke:#E3E9FD;} + .d2-1367990603 .stroke-B5{stroke:#EDF0FD;} + .d2-1367990603 .stroke-B6{stroke:#F7F8FE;} + .d2-1367990603 .stroke-AA2{stroke:#4A6FF3;} + .d2-1367990603 .stroke-AA4{stroke:#EDF0FD;} + .d2-1367990603 .stroke-AA5{stroke:#F7F8FE;} + .d2-1367990603 .stroke-AB4{stroke:#EDF0FD;} + .d2-1367990603 .stroke-AB5{stroke:#F7F8FE;} + .d2-1367990603 .background-color-N1{background-color:#0A0F25;} + .d2-1367990603 .background-color-N2{background-color:#676C7E;} + .d2-1367990603 .background-color-N3{background-color:#9499AB;} + .d2-1367990603 .background-color-N4{background-color:#CFD2DD;} + .d2-1367990603 .background-color-N5{background-color:#DEE1EB;} + .d2-1367990603 .background-color-N6{background-color:#EEF1F8;} + .d2-1367990603 .background-color-N7{background-color:#FFFFFF;} + .d2-1367990603 .background-color-B1{background-color:#0D32B2;} + .d2-1367990603 .background-color-B2{background-color:#0D32B2;} + .d2-1367990603 .background-color-B3{background-color:#E3E9FD;} + .d2-1367990603 .background-color-B4{background-color:#E3E9FD;} + .d2-1367990603 .background-color-B5{background-color:#EDF0FD;} + .d2-1367990603 .background-color-B6{background-color:#F7F8FE;} + .d2-1367990603 .background-color-AA2{background-color:#4A6FF3;} + .d2-1367990603 .background-color-AA4{background-color:#EDF0FD;} + .d2-1367990603 .background-color-AA5{background-color:#F7F8FE;} + .d2-1367990603 .background-color-AB4{background-color:#EDF0FD;} + .d2-1367990603 .background-color-AB5{background-color:#F7F8FE;} + .d2-1367990603 .color-N1{color:#0A0F25;} + .d2-1367990603 .color-N2{color:#676C7E;} + .d2-1367990603 .color-N3{color:#9499AB;} + .d2-1367990603 .color-N4{color:#CFD2DD;} + .d2-1367990603 .color-N5{color:#DEE1EB;} + .d2-1367990603 .color-N6{color:#EEF1F8;} + .d2-1367990603 .color-N7{color:#FFFFFF;} + .d2-1367990603 .color-B1{color:#0D32B2;} + .d2-1367990603 .color-B2{color:#0D32B2;} + .d2-1367990603 .color-B3{color:#E3E9FD;} + .d2-1367990603 .color-B4{color:#E3E9FD;} + .d2-1367990603 .color-B5{color:#EDF0FD;} + .d2-1367990603 .color-B6{color:#F7F8FE;} + .d2-1367990603 .color-AA2{color:#4A6FF3;} + .d2-1367990603 .color-AA4{color:#EDF0FD;} + .d2-1367990603 .color-AA5{color:#F7F8FE;} + .d2-1367990603 .color-AB4{color:#EDF0FD;} + .d2-1367990603 .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}]]>gridabcd + diff --git a/e2etests/testdata/stable/grid_container_dimensions/elk/board.exp.json b/e2etests/testdata/stable/grid_container_dimensions/elk/board.exp.json index 9142be318..12618e379 100644 --- a/e2etests/testdata/stable/grid_container_dimensions/elk/board.exp.json +++ b/e2etests/testdata/stable/grid_container_dimensions/elk/board.exp.json @@ -11,7 +11,7 @@ "y": 12 }, "width": 200, - "height": 246, + "height": 200, "opacity": 1, "strokeDash": 0, "strokeWidth": 2, diff --git a/e2etests/testdata/stable/grid_container_dimensions/elk/sketch.exp.svg b/e2etests/testdata/stable/grid_container_dimensions/elk/sketch.exp.svg index 4751ed784..dbe91bcd6 100644 --- a/e2etests/testdata/stable/grid_container_dimensions/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/grid_container_dimensions/elk/sketch.exp.svg @@ -1,16 +1,16 @@ -gridabcd - + .d2-4228487221 .fill-N1{fill:#0A0F25;} + .d2-4228487221 .fill-N2{fill:#676C7E;} + .d2-4228487221 .fill-N3{fill:#9499AB;} + .d2-4228487221 .fill-N4{fill:#CFD2DD;} + .d2-4228487221 .fill-N5{fill:#DEE1EB;} + .d2-4228487221 .fill-N6{fill:#EEF1F8;} + .d2-4228487221 .fill-N7{fill:#FFFFFF;} + .d2-4228487221 .fill-B1{fill:#0D32B2;} + .d2-4228487221 .fill-B2{fill:#0D32B2;} + .d2-4228487221 .fill-B3{fill:#E3E9FD;} + .d2-4228487221 .fill-B4{fill:#E3E9FD;} + .d2-4228487221 .fill-B5{fill:#EDF0FD;} + .d2-4228487221 .fill-B6{fill:#F7F8FE;} + .d2-4228487221 .fill-AA2{fill:#4A6FF3;} + .d2-4228487221 .fill-AA4{fill:#EDF0FD;} + .d2-4228487221 .fill-AA5{fill:#F7F8FE;} + .d2-4228487221 .fill-AB4{fill:#EDF0FD;} + .d2-4228487221 .fill-AB5{fill:#F7F8FE;} + .d2-4228487221 .stroke-N1{stroke:#0A0F25;} + .d2-4228487221 .stroke-N2{stroke:#676C7E;} + .d2-4228487221 .stroke-N3{stroke:#9499AB;} + .d2-4228487221 .stroke-N4{stroke:#CFD2DD;} + .d2-4228487221 .stroke-N5{stroke:#DEE1EB;} + .d2-4228487221 .stroke-N6{stroke:#EEF1F8;} + .d2-4228487221 .stroke-N7{stroke:#FFFFFF;} + .d2-4228487221 .stroke-B1{stroke:#0D32B2;} + .d2-4228487221 .stroke-B2{stroke:#0D32B2;} + .d2-4228487221 .stroke-B3{stroke:#E3E9FD;} + .d2-4228487221 .stroke-B4{stroke:#E3E9FD;} + .d2-4228487221 .stroke-B5{stroke:#EDF0FD;} + .d2-4228487221 .stroke-B6{stroke:#F7F8FE;} + .d2-4228487221 .stroke-AA2{stroke:#4A6FF3;} + .d2-4228487221 .stroke-AA4{stroke:#EDF0FD;} + .d2-4228487221 .stroke-AA5{stroke:#F7F8FE;} + .d2-4228487221 .stroke-AB4{stroke:#EDF0FD;} + .d2-4228487221 .stroke-AB5{stroke:#F7F8FE;} + .d2-4228487221 .background-color-N1{background-color:#0A0F25;} + .d2-4228487221 .background-color-N2{background-color:#676C7E;} + .d2-4228487221 .background-color-N3{background-color:#9499AB;} + .d2-4228487221 .background-color-N4{background-color:#CFD2DD;} + .d2-4228487221 .background-color-N5{background-color:#DEE1EB;} + .d2-4228487221 .background-color-N6{background-color:#EEF1F8;} + .d2-4228487221 .background-color-N7{background-color:#FFFFFF;} + .d2-4228487221 .background-color-B1{background-color:#0D32B2;} + .d2-4228487221 .background-color-B2{background-color:#0D32B2;} + .d2-4228487221 .background-color-B3{background-color:#E3E9FD;} + .d2-4228487221 .background-color-B4{background-color:#E3E9FD;} + .d2-4228487221 .background-color-B5{background-color:#EDF0FD;} + .d2-4228487221 .background-color-B6{background-color:#F7F8FE;} + .d2-4228487221 .background-color-AA2{background-color:#4A6FF3;} + .d2-4228487221 .background-color-AA4{background-color:#EDF0FD;} + .d2-4228487221 .background-color-AA5{background-color:#F7F8FE;} + .d2-4228487221 .background-color-AB4{background-color:#EDF0FD;} + .d2-4228487221 .background-color-AB5{background-color:#F7F8FE;} + .d2-4228487221 .color-N1{color:#0A0F25;} + .d2-4228487221 .color-N2{color:#676C7E;} + .d2-4228487221 .color-N3{color:#9499AB;} + .d2-4228487221 .color-N4{color:#CFD2DD;} + .d2-4228487221 .color-N5{color:#DEE1EB;} + .d2-4228487221 .color-N6{color:#EEF1F8;} + .d2-4228487221 .color-N7{color:#FFFFFF;} + .d2-4228487221 .color-B1{color:#0D32B2;} + .d2-4228487221 .color-B2{color:#0D32B2;} + .d2-4228487221 .color-B3{color:#E3E9FD;} + .d2-4228487221 .color-B4{color:#E3E9FD;} + .d2-4228487221 .color-B5{color:#EDF0FD;} + .d2-4228487221 .color-B6{color:#F7F8FE;} + .d2-4228487221 .color-AA2{color:#4A6FF3;} + .d2-4228487221 .color-AA4{color:#EDF0FD;} + .d2-4228487221 .color-AA5{color:#F7F8FE;} + .d2-4228487221 .color-AB4{color:#EDF0FD;} + .d2-4228487221 .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}]]>gridabcd + From 67358b72f37c1dc53cae63ba1bf8289d3945e24d Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 14 Nov 2023 11:06:47 -0800 Subject: [PATCH 6/8] center grid when growing for desired width/height --- d2layouts/d2grid/layout.go | 39 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/d2layouts/d2grid/layout.go b/d2layouts/d2grid/layout.go index 0e15ee645..fc9b4a91e 100644 --- a/d2layouts/d2grid/layout.go +++ b/d2layouts/d2grid/layout.go @@ -5,6 +5,7 @@ import ( "context" "fmt" "math" + "strconv" "oss.terrastruct.com/d2/d2graph" "oss.terrastruct.com/d2/d2target" @@ -130,12 +131,46 @@ func Layout(ctx context.Context, g *d2graph.Graph) error { contentWidth += overflowRight } + // manually handle desiredWidth/Height so we can center the grid + var desiredWidth, desiredHeight int + var originalWidthAttr, originalHeightAttr *d2graph.Scalar + if obj.WidthAttr != nil { + desiredWidth, _ = strconv.Atoi(obj.WidthAttr.Value) + // SizeToContent without desired width + originalWidthAttr = obj.WidthAttr + obj.WidthAttr = nil + } + if obj.HeightAttr != nil { + desiredHeight, _ = strconv.Atoi(obj.HeightAttr.Value) + originalHeightAttr = obj.HeightAttr + obj.HeightAttr = nil + } // size shape according to grid obj.SizeToContent(contentWidth, contentHeight, float64(2*horizontalPadding), float64(2*verticalPadding)) + if originalWidthAttr != nil { + obj.WidthAttr = originalWidthAttr + } + if originalHeightAttr != nil { + obj.HeightAttr = originalHeightAttr + } + + if desiredWidth > 0 { + ddx := float64(desiredWidth) - obj.Width + if ddx > 0 { + dx += ddx / 2 + obj.Width = float64(desiredWidth) + } + } + if desiredHeight > 0 { + ddy := float64(desiredHeight) - obj.Height + if ddy > 0 { + dy += ddy / 2 + obj.Height = float64(desiredHeight) + } + } // compute where the grid should be placed inside shape - s := obj.ToShape() - innerBox := s.GetInnerBox() + innerBox := obj.ToShape().GetInnerBox() dx = innerBox.TopLeft.X + dx dy = innerBox.TopLeft.Y + dy if dx != 0 || dy != 0 { From 659628b844364c76040b7603234823b6dcc4bca9 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 14 Nov 2023 11:08:19 -0800 Subject: [PATCH 7/8] update test --- .../dagre/board.exp.json | 16 +- .../dagre/sketch.exp.svg | 166 +++++++++--------- .../elk/board.exp.json | 16 +- .../elk/sketch.exp.svg | 166 +++++++++--------- 4 files changed, 182 insertions(+), 182 deletions(-) diff --git a/e2etests/testdata/stable/grid_container_dimensions/dagre/board.exp.json b/e2etests/testdata/stable/grid_container_dimensions/dagre/board.exp.json index ff95c735d..a55ca4731 100644 --- a/e2etests/testdata/stable/grid_container_dimensions/dagre/board.exp.json +++ b/e2etests/testdata/stable/grid_container_dimensions/dagre/board.exp.json @@ -48,8 +48,8 @@ "id": "grid.a", "type": "rectangle", "pos": { - "x": 0, - "y": 46 + "x": 46, + "y": 57 }, "width": 53, "height": 66, @@ -89,8 +89,8 @@ "id": "grid.b", "type": "rectangle", "pos": { - "x": 53, - "y": 46 + "x": 99, + "y": 57 }, "width": 54, "height": 66, @@ -130,8 +130,8 @@ "id": "grid.c", "type": "rectangle", "pos": { - "x": 0, - "y": 112 + "x": 46, + "y": 123 }, "width": 53, "height": 66, @@ -171,8 +171,8 @@ "id": "grid.d", "type": "rectangle", "pos": { - "x": 53, - "y": 112 + "x": 99, + "y": 123 }, "width": 54, "height": 66, diff --git a/e2etests/testdata/stable/grid_container_dimensions/dagre/sketch.exp.svg b/e2etests/testdata/stable/grid_container_dimensions/dagre/sketch.exp.svg index 7b17d78a0..f39bcbbce 100644 --- a/e2etests/testdata/stable/grid_container_dimensions/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/grid_container_dimensions/dagre/sketch.exp.svg @@ -1,16 +1,16 @@ -gridabcd + .d2-3242100033 .fill-N1{fill:#0A0F25;} + .d2-3242100033 .fill-N2{fill:#676C7E;} + .d2-3242100033 .fill-N3{fill:#9499AB;} + .d2-3242100033 .fill-N4{fill:#CFD2DD;} + .d2-3242100033 .fill-N5{fill:#DEE1EB;} + .d2-3242100033 .fill-N6{fill:#EEF1F8;} + .d2-3242100033 .fill-N7{fill:#FFFFFF;} + .d2-3242100033 .fill-B1{fill:#0D32B2;} + .d2-3242100033 .fill-B2{fill:#0D32B2;} + .d2-3242100033 .fill-B3{fill:#E3E9FD;} + .d2-3242100033 .fill-B4{fill:#E3E9FD;} + .d2-3242100033 .fill-B5{fill:#EDF0FD;} + .d2-3242100033 .fill-B6{fill:#F7F8FE;} + .d2-3242100033 .fill-AA2{fill:#4A6FF3;} + .d2-3242100033 .fill-AA4{fill:#EDF0FD;} + .d2-3242100033 .fill-AA5{fill:#F7F8FE;} + .d2-3242100033 .fill-AB4{fill:#EDF0FD;} + .d2-3242100033 .fill-AB5{fill:#F7F8FE;} + .d2-3242100033 .stroke-N1{stroke:#0A0F25;} + .d2-3242100033 .stroke-N2{stroke:#676C7E;} + .d2-3242100033 .stroke-N3{stroke:#9499AB;} + .d2-3242100033 .stroke-N4{stroke:#CFD2DD;} + .d2-3242100033 .stroke-N5{stroke:#DEE1EB;} + .d2-3242100033 .stroke-N6{stroke:#EEF1F8;} + .d2-3242100033 .stroke-N7{stroke:#FFFFFF;} + .d2-3242100033 .stroke-B1{stroke:#0D32B2;} + .d2-3242100033 .stroke-B2{stroke:#0D32B2;} + .d2-3242100033 .stroke-B3{stroke:#E3E9FD;} + .d2-3242100033 .stroke-B4{stroke:#E3E9FD;} + .d2-3242100033 .stroke-B5{stroke:#EDF0FD;} + .d2-3242100033 .stroke-B6{stroke:#F7F8FE;} + .d2-3242100033 .stroke-AA2{stroke:#4A6FF3;} + .d2-3242100033 .stroke-AA4{stroke:#EDF0FD;} + .d2-3242100033 .stroke-AA5{stroke:#F7F8FE;} + .d2-3242100033 .stroke-AB4{stroke:#EDF0FD;} + .d2-3242100033 .stroke-AB5{stroke:#F7F8FE;} + .d2-3242100033 .background-color-N1{background-color:#0A0F25;} + .d2-3242100033 .background-color-N2{background-color:#676C7E;} + .d2-3242100033 .background-color-N3{background-color:#9499AB;} + .d2-3242100033 .background-color-N4{background-color:#CFD2DD;} + .d2-3242100033 .background-color-N5{background-color:#DEE1EB;} + .d2-3242100033 .background-color-N6{background-color:#EEF1F8;} + .d2-3242100033 .background-color-N7{background-color:#FFFFFF;} + .d2-3242100033 .background-color-B1{background-color:#0D32B2;} + .d2-3242100033 .background-color-B2{background-color:#0D32B2;} + .d2-3242100033 .background-color-B3{background-color:#E3E9FD;} + .d2-3242100033 .background-color-B4{background-color:#E3E9FD;} + .d2-3242100033 .background-color-B5{background-color:#EDF0FD;} + .d2-3242100033 .background-color-B6{background-color:#F7F8FE;} + .d2-3242100033 .background-color-AA2{background-color:#4A6FF3;} + .d2-3242100033 .background-color-AA4{background-color:#EDF0FD;} + .d2-3242100033 .background-color-AA5{background-color:#F7F8FE;} + .d2-3242100033 .background-color-AB4{background-color:#EDF0FD;} + .d2-3242100033 .background-color-AB5{background-color:#F7F8FE;} + .d2-3242100033 .color-N1{color:#0A0F25;} + .d2-3242100033 .color-N2{color:#676C7E;} + .d2-3242100033 .color-N3{color:#9499AB;} + .d2-3242100033 .color-N4{color:#CFD2DD;} + .d2-3242100033 .color-N5{color:#DEE1EB;} + .d2-3242100033 .color-N6{color:#EEF1F8;} + .d2-3242100033 .color-N7{color:#FFFFFF;} + .d2-3242100033 .color-B1{color:#0D32B2;} + .d2-3242100033 .color-B2{color:#0D32B2;} + .d2-3242100033 .color-B3{color:#E3E9FD;} + .d2-3242100033 .color-B4{color:#E3E9FD;} + .d2-3242100033 .color-B5{color:#EDF0FD;} + .d2-3242100033 .color-B6{color:#F7F8FE;} + .d2-3242100033 .color-AA2{color:#4A6FF3;} + .d2-3242100033 .color-AA4{color:#EDF0FD;} + .d2-3242100033 .color-AA5{color:#F7F8FE;} + .d2-3242100033 .color-AB4{color:#EDF0FD;} + .d2-3242100033 .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}]]>gridabcd - - - - + + + + \ No newline at end of file diff --git a/e2etests/testdata/stable/grid_container_dimensions/elk/board.exp.json b/e2etests/testdata/stable/grid_container_dimensions/elk/board.exp.json index 12618e379..f9a8e2442 100644 --- a/e2etests/testdata/stable/grid_container_dimensions/elk/board.exp.json +++ b/e2etests/testdata/stable/grid_container_dimensions/elk/board.exp.json @@ -48,8 +48,8 @@ "id": "grid.a", "type": "rectangle", "pos": { - "x": 12, - "y": 58 + "x": 58, + "y": 69 }, "width": 53, "height": 66, @@ -89,8 +89,8 @@ "id": "grid.b", "type": "rectangle", "pos": { - "x": 65, - "y": 58 + "x": 111, + "y": 69 }, "width": 54, "height": 66, @@ -130,8 +130,8 @@ "id": "grid.c", "type": "rectangle", "pos": { - "x": 12, - "y": 124 + "x": 58, + "y": 135 }, "width": 53, "height": 66, @@ -171,8 +171,8 @@ "id": "grid.d", "type": "rectangle", "pos": { - "x": 65, - "y": 124 + "x": 111, + "y": 135 }, "width": 54, "height": 66, diff --git a/e2etests/testdata/stable/grid_container_dimensions/elk/sketch.exp.svg b/e2etests/testdata/stable/grid_container_dimensions/elk/sketch.exp.svg index dbe91bcd6..4f85d9a04 100644 --- a/e2etests/testdata/stable/grid_container_dimensions/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/grid_container_dimensions/elk/sketch.exp.svg @@ -1,16 +1,16 @@ -gridabcd + .d2-2921019823 .fill-N1{fill:#0A0F25;} + .d2-2921019823 .fill-N2{fill:#676C7E;} + .d2-2921019823 .fill-N3{fill:#9499AB;} + .d2-2921019823 .fill-N4{fill:#CFD2DD;} + .d2-2921019823 .fill-N5{fill:#DEE1EB;} + .d2-2921019823 .fill-N6{fill:#EEF1F8;} + .d2-2921019823 .fill-N7{fill:#FFFFFF;} + .d2-2921019823 .fill-B1{fill:#0D32B2;} + .d2-2921019823 .fill-B2{fill:#0D32B2;} + .d2-2921019823 .fill-B3{fill:#E3E9FD;} + .d2-2921019823 .fill-B4{fill:#E3E9FD;} + .d2-2921019823 .fill-B5{fill:#EDF0FD;} + .d2-2921019823 .fill-B6{fill:#F7F8FE;} + .d2-2921019823 .fill-AA2{fill:#4A6FF3;} + .d2-2921019823 .fill-AA4{fill:#EDF0FD;} + .d2-2921019823 .fill-AA5{fill:#F7F8FE;} + .d2-2921019823 .fill-AB4{fill:#EDF0FD;} + .d2-2921019823 .fill-AB5{fill:#F7F8FE;} + .d2-2921019823 .stroke-N1{stroke:#0A0F25;} + .d2-2921019823 .stroke-N2{stroke:#676C7E;} + .d2-2921019823 .stroke-N3{stroke:#9499AB;} + .d2-2921019823 .stroke-N4{stroke:#CFD2DD;} + .d2-2921019823 .stroke-N5{stroke:#DEE1EB;} + .d2-2921019823 .stroke-N6{stroke:#EEF1F8;} + .d2-2921019823 .stroke-N7{stroke:#FFFFFF;} + .d2-2921019823 .stroke-B1{stroke:#0D32B2;} + .d2-2921019823 .stroke-B2{stroke:#0D32B2;} + .d2-2921019823 .stroke-B3{stroke:#E3E9FD;} + .d2-2921019823 .stroke-B4{stroke:#E3E9FD;} + .d2-2921019823 .stroke-B5{stroke:#EDF0FD;} + .d2-2921019823 .stroke-B6{stroke:#F7F8FE;} + .d2-2921019823 .stroke-AA2{stroke:#4A6FF3;} + .d2-2921019823 .stroke-AA4{stroke:#EDF0FD;} + .d2-2921019823 .stroke-AA5{stroke:#F7F8FE;} + .d2-2921019823 .stroke-AB4{stroke:#EDF0FD;} + .d2-2921019823 .stroke-AB5{stroke:#F7F8FE;} + .d2-2921019823 .background-color-N1{background-color:#0A0F25;} + .d2-2921019823 .background-color-N2{background-color:#676C7E;} + .d2-2921019823 .background-color-N3{background-color:#9499AB;} + .d2-2921019823 .background-color-N4{background-color:#CFD2DD;} + .d2-2921019823 .background-color-N5{background-color:#DEE1EB;} + .d2-2921019823 .background-color-N6{background-color:#EEF1F8;} + .d2-2921019823 .background-color-N7{background-color:#FFFFFF;} + .d2-2921019823 .background-color-B1{background-color:#0D32B2;} + .d2-2921019823 .background-color-B2{background-color:#0D32B2;} + .d2-2921019823 .background-color-B3{background-color:#E3E9FD;} + .d2-2921019823 .background-color-B4{background-color:#E3E9FD;} + .d2-2921019823 .background-color-B5{background-color:#EDF0FD;} + .d2-2921019823 .background-color-B6{background-color:#F7F8FE;} + .d2-2921019823 .background-color-AA2{background-color:#4A6FF3;} + .d2-2921019823 .background-color-AA4{background-color:#EDF0FD;} + .d2-2921019823 .background-color-AA5{background-color:#F7F8FE;} + .d2-2921019823 .background-color-AB4{background-color:#EDF0FD;} + .d2-2921019823 .background-color-AB5{background-color:#F7F8FE;} + .d2-2921019823 .color-N1{color:#0A0F25;} + .d2-2921019823 .color-N2{color:#676C7E;} + .d2-2921019823 .color-N3{color:#9499AB;} + .d2-2921019823 .color-N4{color:#CFD2DD;} + .d2-2921019823 .color-N5{color:#DEE1EB;} + .d2-2921019823 .color-N6{color:#EEF1F8;} + .d2-2921019823 .color-N7{color:#FFFFFF;} + .d2-2921019823 .color-B1{color:#0D32B2;} + .d2-2921019823 .color-B2{color:#0D32B2;} + .d2-2921019823 .color-B3{color:#E3E9FD;} + .d2-2921019823 .color-B4{color:#E3E9FD;} + .d2-2921019823 .color-B5{color:#EDF0FD;} + .d2-2921019823 .color-B6{color:#F7F8FE;} + .d2-2921019823 .color-AA2{color:#4A6FF3;} + .d2-2921019823 .color-AA4{color:#EDF0FD;} + .d2-2921019823 .color-AA5{color:#F7F8FE;} + .d2-2921019823 .color-AB4{color:#EDF0FD;} + .d2-2921019823 .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}]]>gridabcd - - - - + + + + \ No newline at end of file From 7c151fa0ea76865b4e63865763e2e85447363106 Mon Sep 17 00:00:00 2001 From: Gavin Nishizawa Date: Tue, 14 Nov 2023 13:47:17 -0800 Subject: [PATCH 8/8] 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 406e245d5..22e973a91 100644 --- a/ci/release/changelogs/next.md +++ b/ci/release/changelogs/next.md @@ -11,6 +11,7 @@ - All vars defined in a scope are accessible everywhere in that scope, i.e., an object can use a var defined after itself. [#1695](https://github.com/terrastruct/d2/pull/1695) - Encoding API switches to standard zlib encoding so that decoding doesn't depend on source. [#1709](https://github.com/terrastruct/d2/pull/1709) - `currentcolor` is accepted as a color option to inherit parent colors. (ty @hboomsma) [#1700](https://github.com/terrastruct/d2/pull/1700) +- grid containers can now be sized with `width`/`height` even when using a layout plugin without that feature. [#1731](https://github.com/terrastruct/d2/pull/1731) #### Bugfixes ⛑️