diff --git a/d2layouts/d2sequence/constants.go b/d2layouts/d2sequence/constants.go index a64394d6e..b19d080cc 100644 --- a/d2layouts/d2sequence/constants.go +++ b/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 +) diff --git a/d2layouts/d2sequence/sequence_diagram.go b/d2layouts/d2sequence/sequence_diagram.go index d4d24e030..47f19ceb0 100644 --- a/d2layouts/d2sequence/sequence_diagram.go +++ b/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 diff --git a/e2etests/stable_test.go b/e2etests/stable_test.go index d256a29ed..a60268d54 100644 --- a/e2etests/stable_test.go +++ b/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 diff --git a/e2etests/testdata/stable/sequence_diagram_real/dagre/board.exp.json b/e2etests/testdata/stable/sequence_diagram_real/dagre/board.exp.json index b2169827a..11437b91f 100644 --- a/e2etests/testdata/stable/sequence_diagram_real/dagre/board.exp.json +++ b/e2etests/testdata/stable/sequence_diagram_real/dagre/board.exp.json @@ -8,8 +8,8 @@ "x": 0, "y": 0 }, - "width": 2193, - "height": 2311, + "width": 1504, + "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]", diff --git a/e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg index 1e6312585..d6277b3b1 100644 --- a/e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg +++ b/e2etests/testdata/stable/sequence_diagram_real/dagre/sketch.exp.svg @@ -14,7 +14,7 @@ width="2393" height="2511" viewBox="-100 -100 2393 2511">How this is renderedCLId2astd2compilerd2layoutd2exporterd2themesd2rendererd2sequencelayoutd2dagrelayoutmeasurements also take place 'How this is rendered: {...}'tokenized ASTcompile ASTobjects and edgesrun layout enginesrun engine on shape: sequence_diagram, temporarily removerun core engine on rest add back in sequence diagramsdiagram with correct positions and dimensionsexport diagram with chosen theme and rendererget theme stylesrender to SVGresulting SVG +How this is renderedCLId2astd2compilerd2layoutd2exporterd2themesd2rendererd2sequencelayoutd2dagrelayoutonly if root is not sequence 'How this is rendered: {...}'tokenized ASTcompile ASTobjects and edgesrun layout enginesrun engine on shape: sequence_diagram, temporarily removerun core engine on rest add back in sequence diagramsdiagram with correct positions and dimensionsexport diagram with chosen theme and rendererget theme stylesrender to SVGresulting SVGmeasurements also take place diff --git a/e2etests/testdata/stable/sequence_diagram_real/elk/board.exp.json b/e2etests/testdata/stable/sequence_diagram_real/elk/board.exp.json index 12c45e559..9bf5a502d 100644 --- a/e2etests/testdata/stable/sequence_diagram_real/elk/board.exp.json +++ b/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]", diff --git a/e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg b/e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg index ea8ac8ffc..ae3f03e69 100644 --- a/e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg +++ b/e2etests/testdata/stable/sequence_diagram_real/elk/sketch.exp.svg @@ -14,7 +14,7 @@ width="2393" height="2511" viewBox="-88 -88 2393 2511">How this is renderedCLId2astd2compilerd2layoutd2exporterd2themesd2rendererd2sequencelayoutd2dagrelayoutmeasurements also take place 'How this is rendered: {...}'tokenized ASTcompile ASTobjects and edgesrun layout enginesrun engine on shape: sequence_diagram, temporarily removerun core engine on rest add back in sequence diagramsdiagram with correct positions and dimensionsexport diagram with chosen theme and rendererget theme stylesrender to SVGresulting SVG +How this is renderedCLId2astd2compilerd2layoutd2exporterd2themesd2rendererd2sequencelayoutd2dagrelayoutonly if root is not sequence 'How this is rendered: {...}'tokenized ASTcompile ASTobjects and edgesrun layout enginesrun engine on shape: sequence_diagram, temporarily removerun core engine on rest add back in sequence diagramsdiagram with correct positions and dimensionsexport diagram with chosen theme and rendererget theme stylesrender to SVGresulting SVGmeasurements also take place