wip: z-indexing group <-> span

d2layouts/d2sequence/constants.go

@@ -30,3 +30,10 @@ const LIFELINE_STROKE_DASH int = 6
 
 // pad when the actor has the label placed OutsideMiddleBottom so that the lifeline is not so close to the text
 const LIFELINE_LABEL_PAD = 5.
+
+const (
+	SPAN_Z_INDEX    = 1
+	GROUP_Z_INDEX   = 2
+	MESSAGE_Z_INDEX = 3
+	NOTE_Z_INDEX    = 4
+)

d2layouts/d2sequence/sequence_diagram.go

@@ -189,6 +189,8 @@ func (sd *sequenceDiagram) layout() error {
 
 func (sd *sequenceDiagram) placeGroups() {
 	for _, group := range sd.groups {
+		group.ZIndex = GROUP_Z_INDEX
+		// group.Attributes.Style.Opacity = &d2graph.Scalar{Value: "0.5"}
 		sd.placeGroup(group)
 	}
 }
@@ -330,7 +332,7 @@ func (sd *sequenceDiagram) placeNotes() {
 
 		x := rankToX[sd.objectRank[note]] - (note.Width / 2.)
 		note.Box.TopLeft = geo.NewPoint(x, y)
-		note.ZIndex = 1
+		note.ZIndex = NOTE_Z_INDEX
 	}
 }
 
@@ -406,7 +408,7 @@ func (sd *sequenceDiagram) placeSpans() {
 		width := SPAN_BASE_WIDTH + (float64(span.Level()-2) * SPAN_DEPTH_GROWTH_FACTOR)
 		x := rankToX[sd.objectRank[span]] - (width / 2.)
 		span.Box = geo.NewBox(geo.NewPoint(x, minY), width, height)
-		span.ZIndex = 1
+		span.ZIndex = SPAN_Z_INDEX
 	}
 }
 
@@ -415,6 +417,7 @@ func (sd *sequenceDiagram) placeSpans() {
 func (sd *sequenceDiagram) routeMessages() error {
 	messageOffset := sd.maxActorHeight + sd.yStep
 	for _, message := range sd.messages {
+		message.ZIndex = MESSAGE_Z_INDEX
 		noteOffset := 0.
 		for _, note := range sd.notes {
 			if sd.verticalIndices[note.AbsID()] < sd.verticalIndices[message.AbsID()] {
@@ -423,7 +426,6 @@ func (sd *sequenceDiagram) routeMessages() error {
 		}
 		startY := messageOffset + noteOffset
 
-		message.ZIndex = 2
 		var startX, endX float64
 		if startCenter := getCenter(message.Src); startCenter != nil {
 			startX = startCenter.X

e2etests/stable_test.go

@@ -1399,7 +1399,9 @@ choo: {
   d2compiler -> CLI: objects and edges
   CLI -> d2layout.layout: run layout engines
   d2layout.layout -> d2sequencelayout: run engine on shape: sequence_diagram, temporarily remove
-  d2layout.layout -> d2dagrelayout: run core engine on rest
+  only if root is not sequence: {
+    _.d2layout.layout -> _.d2dagrelayout: run core engine on rest
+  }
   d2layout.layout <- d2sequencelayout: add back in sequence diagrams
   d2layout -> CLI: diagram with correct positions and dimensions
   CLI -> d2exporter: export diagram with chosen theme and renderer

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

@@ -8,8 +8,8 @@
         "x": 0,
         "y": 0
       },
-      "width": 2193,
+      "width": 1504,
-      "height": 2311,
+      "height": 180,
       "opacity": 1,
       "strokeDash": 0,
       "strokeWidth": 2,
@@ -349,9 +349,48 @@
       "labelWidth": 218,
       "labelHeight": 26,
       "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "zIndex": 1,
+      "zIndex": 4,
       "level": 3
     },
+    {
+      "id": "How this is rendered.only if root is not sequence",
+      "type": "",
+      "pos": {
+        "x": 50,
+        "y": 50
+      },
+      "width": 1404,
+      "height": 80,
+      "opacity": 0.5,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "only if root is not sequence",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 195,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 2,
+      "level": 2
+    },
     {
       "id": "How this is rendered.d2layout.layout",
       "type": "rectangle",
@@ -545,7 +584,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2ast -> CLI)[0]",
@@ -584,7 +623,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(CLI -> d2compiler)[0]",
@@ -623,7 +662,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2compiler -> CLI)[0]",
@@ -662,7 +701,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(CLI -> d2layout.layout)[0]",
@@ -701,7 +740,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2layout.layout -> d2sequencelayout)[0]",
@@ -740,7 +779,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2layout.layout -> d2dagrelayout)[0]",
@@ -779,7 +818,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2layout.layout <- d2sequencelayout)[0]",
@@ -818,7 +857,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2layout -> CLI)[0]",
@@ -857,7 +896,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(CLI -> d2exporter)[0]",
@@ -896,7 +935,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2exporter.export -> d2themes)[0]",
@@ -935,7 +974,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2exporter.export -> d2renderer)[0]",
@@ -974,7 +1013,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2exporter.export -> CLI)[0]",
@@ -1013,7 +1052,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "(How this is rendered.CLI -- )[0]",

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

@@ -349,9 +349,47 @@
       "labelWidth": 218,
       "labelHeight": 26,
       "labelPosition": "INSIDE_MIDDLE_CENTER",
-      "zIndex": 1,
+      "zIndex": 4,
       "level": 3
     },
+    {
+      "id": "How this is rendered.only if root is not sequence",
+      "type": "",
+      "pos": {
+        "x": 734,
+        "y": 1361
+      },
+      "width": 1404,
+      "height": 80,
+      "opacity": 0.5,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#EDF0FD",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "only if root is not sequence",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 195,
+      "labelHeight": 26,
+      "zIndex": 2,
+      "level": 2
+    },
     {
       "id": "How this is rendered.d2layout.layout",
       "type": "rectangle",
@@ -545,7 +583,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2ast -> CLI)[0]",
@@ -584,7 +622,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(CLI -> d2compiler)[0]",
@@ -623,7 +661,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2compiler -> CLI)[0]",
@@ -662,7 +700,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(CLI -> d2layout.layout)[0]",
@@ -701,7 +739,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2layout.layout -> d2sequencelayout)[0]",
@@ -740,7 +778,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2layout.layout -> d2dagrelayout)[0]",
@@ -779,7 +817,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2layout.layout <- d2sequencelayout)[0]",
@@ -818,7 +856,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2layout -> CLI)[0]",
@@ -857,7 +895,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(CLI -> d2exporter)[0]",
@@ -896,7 +934,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2exporter.export -> d2themes)[0]",
@@ -935,7 +973,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2exporter.export -> d2renderer)[0]",
@@ -974,7 +1012,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "How this is rendered.(d2exporter.export -> CLI)[0]",
@@ -1013,7 +1051,7 @@
       "animated": false,
       "tooltip": "",
       "icon": null,
-      "zIndex": 2
+      "zIndex": 3
     },
     {
       "id": "(How this is rendered.CLI -- )[0]",