Fix cloud innerbox

ci/release/changelogs/next.md

@@ -30,3 +30,4 @@
 - Fixes edge case where nested edge globs were creating excess shapes [#1713](https://github.com/terrastruct/d2/pull/1713)
 - Fixes a panic with a connection to a grid cell that is a container in TALA [#1729](https://github.com/terrastruct/d2/pull/1729)
 - Fixes incorrect grid cell positioning when the grid has a shape set and fixes content sometimes escaping circle shapes. [#1734](https://github.com/terrastruct/d2/pull/1734)
+- Fixes content sometimes escaping cloud shapes. [#1736](https://github.com/terrastruct/d2/pull/1736)

d2exporter/export.go

@@ -167,6 +167,10 @@ func toShape(obj *d2graph.Object, theme *d2themes.Theme) d2target.Shape {
 	case d2target.ShapeSQLTable:
 		shape.SQLTable = *obj.SQLTable
 		shape.FontSize -= d2target.HeaderFontAdd
+	case d2target.ShapeCloud:
+		if obj.ContentAspectRatio != nil {
+			shape.ContentAspectRatio = go2.Pointer(*obj.ContentAspectRatio)
+		}
 	}
 	shape.Label = text.Text
 	shape.LabelWidth = text.Dimensions.Width

d2graph/d2graph.go

@@ -107,6 +107,8 @@ type Object struct {
 	LabelPosition *string `json:"labelPosition,omitempty"`
 	IconPosition  *string `json:"iconPosition,omitempty"`
 
+	ContentAspectRatio *float64 `json:"contentAspectRatio,omitempty"`
+
 	Class    *d2target.Class    `json:"class,omitempty"`
 	SQLTable *d2target.SQLTable `json:"sql_table,omitempty"`
 
@@ -1068,13 +1070,17 @@ func (obj *Object) SizeToContent(contentWidth, contentHeight, paddingX, paddingY
 		obj.Width = sideLength
 		obj.Height = sideLength
 	} else if desiredHeight == 0 || desiredWidth == 0 {
-		switch s.GetType() {
+		switch shapeType {
 		case shape.PERSON_TYPE:
 			obj.Width, obj.Height = shape.LimitAR(obj.Width, obj.Height, shape.PERSON_AR_LIMIT)
 		case shape.OVAL_TYPE:
 			obj.Width, obj.Height = shape.LimitAR(obj.Width, obj.Height, shape.OVAL_AR_LIMIT)
 		}
 	}
+	if shapeType == shape.CLOUD_TYPE {
+		innerBox := s.GetInnerBoxForContent(contentWidth, contentHeight)
+		obj.ContentAspectRatio = go2.Pointer(innerBox.Width / innerBox.Height)
+	}
 }
 
 func (obj *Object) OuterNearContainer() *Object {

d2graph/layout.go

@@ -364,7 +364,11 @@ func (obj *Object) ToShape() shape.Shape {
 	dslShape := strings.ToLower(obj.Shape.Value)
 	shapeType := d2target.DSL_SHAPE_TO_SHAPE_TYPE[dslShape]
 	contentBox := geo.NewBox(tl, obj.Width, obj.Height)
-	return shape.NewShape(shapeType, contentBox)
+	s := shape.NewShape(shapeType, contentBox)
+	if shapeType == shape.CLOUD_TYPE && obj.ContentAspectRatio != nil {
+		s.SetInnerBoxAspectRatio(*obj.ContentAspectRatio)
+	}
+	return s
 }
 
 func (obj *Object) GetLabelTopLeft() *geo.Point {

d2layouts/d2grid/layout.go

@@ -125,7 +125,6 @@ func Layout(ctx context.Context, g *d2graph.Graph) error {
 		// depending on the shape innerBox may be larger than totalWidth, totalHeight
 		// if this is the case, we want to center the cells within the larger innerBox
 		innerBox := s.GetInnerBox()
-
 		var resizeDx, resizeDy float64
 		if innerBox.Width > totalWidth {
 			resizeDx = (innerBox.Width - totalWidth) / 2

d2renderers/d2svg/d2svg.go

@@ -932,6 +932,9 @@ func drawShape(writer, appendixWriter io.Writer, diagramHash string, targetShape
 	shapeType := d2target.DSL_SHAPE_TO_SHAPE_TYPE[targetShape.Type]
 
 	s := shape.NewShape(shapeType, geo.NewBox(tl, width, height))
+	if shapeType == shape.CLOUD_TYPE && targetShape.ContentAspectRatio != nil {
+		s.SetInnerBoxAspectRatio(*targetShape.ContentAspectRatio)
+	}
 
 	var shadowAttr string
 	if targetShape.Shadow {

d2target/d2target.go

@@ -469,6 +469,8 @@ type Shape struct {
 	Class
 	SQLTable
 
+	ContentAspectRatio *float64 `json:"contentAspectRatio,omitempty"`
+
 	Text
 
 	LabelPosition string `json:"labelPosition,omitempty"`

e2etests/regression_test.go

@@ -1051,6 +1051,7 @@ cf many required: {
 		loadFromFile(t, "grid_image_label_position"),
 		loadFromFile(t, "glob_dimensions"),
 		loadFromFile(t, "shaped_grid_positioning"),
+		loadFromFile(t, "cloud_shaped_grid"),
 	}
 
 	runa(t, tcs)

e2etests/testdata/files/cloud_shaped_grid.d2

@@ -0,0 +1,27 @@
+vars: {
+  grid-container: {
+    label: ""
+    grid-gap: 10
+    grid-rows: 1
+    grid-columns: 4
+    a
+    b
+    c
+    d
+  }
+}
+cloud: {
+  shape: cloud
+  ...${grid-container}
+  width: 395
+  height: 395
+}
+
+circle: {
+  shape: circle
+  ...${grid-container}
+  width: 395
+  height: 395
+}
+
+direction: right