fix label and icon being placed over each other in dagre/elk

d2layouts/d2dagrelayout/layout.go

@@ -150,7 +150,7 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 		if obj.LabelWidth != nil && obj.LabelHeight != nil {
 			if len(obj.ChildrenArray) > 0 {
 				obj.LabelPosition = go2.Pointer(string(label.InsideTopCenter))
-			} else if obj.Attributes.Shape.Value == d2target.ShapeImage {
+			} else if obj.Attributes.Shape.Value == d2target.ShapeImage || obj.Attributes.Icon != nil {
 				obj.LabelPosition = go2.Pointer(string(label.OutsideTopCenter))
 			} else {
 				obj.LabelPosition = go2.Pointer(string(label.InsideMiddleCenter))

d2layouts/d2elklayout/layout.go

@@ -247,7 +247,7 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 		if obj.LabelWidth != nil && obj.LabelHeight != nil {
 			if len(obj.ChildrenArray) > 0 {
 				obj.LabelPosition = go2.Pointer(string(label.InsideTopCenter))
-			} else if obj.Attributes.Shape.Value == d2target.ShapeImage {
+			} else if obj.Attributes.Shape.Value == d2target.ShapeImage || obj.Attributes.Icon != nil {
 				obj.LabelPosition = go2.Pointer(string(label.OutsideTopCenter))
 			} else {
 				obj.LabelPosition = go2.Pointer(string(label.InsideMiddleCenter))

e2etests/stable_test.go

@@ -1222,7 +1222,7 @@ foo baz -> hello
 			script: `shape: sequence_diagram
 
 a: "a label" {
-    shape: callout 
+    shape: callout
 }
 b: "b\nlabels" {
     shape: circle
@@ -1233,7 +1233,7 @@ c: "a class" {
     -private() int
 }
 d: "cloudyyyy" {
-    shape: cloud 
+    shape: cloud
 }
 e: |go
     a := 5
@@ -1241,47 +1241,47 @@ e: |go
     fmt.Printf("%d", b)
 |
 f: "cyl" {
-    shape: cylinder 
+    shape: cylinder
 }
 g: "dia" {
-    shape: diamond 
+    shape: diamond
 }
 h: "docs" {
-    shape: document 
+    shape: document
 }
 i: "six corners" {
-    shape: hexagon 
+    shape: hexagon
 }
 j: "a random icon" {
     shape: image
     icon: https://icons.terrastruct.com/essentials/004-picture.svg
 }
 k: "over" {
-    shape: oval 
+    shape: oval
 }
 l: "pack" {
-    shape: package 
+    shape: package
 }
 m: "docs page" {
-    shape: page 
+    shape: page
 }
 n: "too\nhard\to say" {
-    shape: parallelogram 
+    shape: parallelogram
 }
 o: "single\nperson" {
-    shape: person 
+    shape: person
 }
 p: "a queue" {
-    shape: queue 
+    shape: queue
 }
 q: "a square" {
-    shape: square 
+    shape: square
 }
 r: "a step at a time" {
-    shape: step 
+    shape: step
 }
 s: "data" {
-    shape: stored_data 
+    shape: stored_data
 }
 
 t: "users" {
@@ -1324,6 +1324,14 @@ s -> t`,
 			script: `x -> x -> x -> y
 z -> y
 z -> z: hello
+`,
+		},
+		{
+			name: "icon-label",
+			script: `ww: {
+  label: hello
+  icon: https://icons.terrastruct.com/essentials/time.svg
+}
 `,
 		},
 	}

e2etests/testdata/stable/icon-label/dagre/board.exp.json

@@ -0,0 +1,56 @@
+{
+  "name": "",
+  "shapes": [
+    {
+      "id": "ww",
+      "type": "",
+      "pos": {
+        "x": 0,
+        "y": 0
+      },
+      "width": 140,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": {
+        "Scheme": "https",
+        "Opaque": "",
+        "User": null,
+        "Host": "icons.terrastruct.com",
+        "Path": "/essentials/time.svg",
+        "RawPath": "",
+        "ForceQuery": false,
+        "RawQuery": "",
+        "Fragment": "",
+        "RawFragment": ""
+      },
+      "iconPosition": "INSIDE_MIDDLE_CENTER",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "hello",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 40,
+      "labelHeight": 26,
+      "labelPosition": "OUTSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": []
+}

e2etests/testdata/stable/icon-label/elk/board.exp.json

@@ -0,0 +1,56 @@
+{
+  "name": "",
+  "shapes": [
+    {
+      "id": "ww",
+      "type": "",
+      "pos": {
+        "x": 12,
+        "y": 12
+      },
+      "width": 140,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": {
+        "Scheme": "https",
+        "Opaque": "",
+        "User": null,
+        "Host": "icons.terrastruct.com",
+        "Path": "/essentials/time.svg",
+        "RawPath": "",
+        "ForceQuery": false,
+        "RawQuery": "",
+        "Fragment": "",
+        "RawFragment": ""
+      },
+      "iconPosition": "INSIDE_MIDDLE_CENTER",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "hello",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 40,
+      "labelHeight": 26,
+      "labelPosition": "OUTSIDE_TOP_CENTER",
+      "zIndex": 0,
+      "level": 1
+    }
+  ],
+  "connections": []
+}

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

@@ -476,7 +476,7 @@
       "underline": false,
       "labelWidth": 31,
       "labelHeight": 26,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPosition": "OUTSIDE_TOP_CENTER",
       "zIndex": 0,
       "level": 1
     },
@@ -565,7 +565,7 @@
       "underline": false,
       "labelWidth": 20,
       "labelHeight": 26,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPosition": "OUTSIDE_TOP_CENTER",
       "zIndex": 0,
       "level": 2
     },

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

@@ -476,7 +476,7 @@
       "underline": false,
       "labelWidth": 31,
       "labelHeight": 26,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPosition": "OUTSIDE_TOP_CENTER",
       "zIndex": 0,
       "level": 1
     },
@@ -565,7 +565,7 @@
       "underline": false,
       "labelWidth": 20,
       "labelHeight": 26,
-      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPosition": "OUTSIDE_TOP_CENTER",
       "zIndex": 0,
       "level": 2
     },