Merge branch 'master' into sketch

ci/release/changelogs/next.md

@@ -10,3 +10,6 @@
 
 - `d2 fmt` only rewrites if it has changes, instead of always rewriting. [#470](https://github.com/terrastruct/d2/pull/470)
 - Fixed an issue where text could overflow in sql_table shapes. [#458](https://github.com/terrastruct/d2/pull/458)
+- Fixed an issue with elk layouts accounting for edge labels as if they were placed on the side of the edge. [#483](https://github.com/terrastruct/d2/pull/483)
+- Fixed an issue where dagre layouts may not have enough spacing for all edge labels. [#484](https://github.com/terrastruct/d2/pull/484)
+- Fixed connections being clipped if they were at the very top or left edges of the diagram. [#493](https://github.com/terrastruct/d2/pull/493)

d2layouts/d2dagrelayout/layout.go

@@ -64,22 +64,35 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 	}
 
 	rootAttrs := dagreGraphAttrs{
-		ranksep: 100,
 		edgesep: 40,
 		nodesep: 60,
 	}
+	isHorizontal := false
 	switch g.Root.Attributes.Direction.Value {
 	case "down":
 		rootAttrs.rankdir = "TB"
 	case "right":
 		rootAttrs.rankdir = "LR"
+		isHorizontal = true
 	case "left":
 		rootAttrs.rankdir = "RL"
+		isHorizontal = true
 	case "up":
 		rootAttrs.rankdir = "BT"
 	default:
 		rootAttrs.rankdir = "TB"
 	}
+
+	maxLabelSize := 0
+	for _, edge := range g.Edges {
+		size := edge.LabelDimensions.Width
+		if !isHorizontal {
+			size = edge.LabelDimensions.Height
+		}
+		maxLabelSize = go2.Max(maxLabelSize, size)
+	}
+	rootAttrs.ranksep = go2.Max(100, maxLabelSize+40)
+
 	configJS := setGraphAttrs(rootAttrs)
 	if _, err := vm.RunString(configJS); err != nil {
 		return err

d2layouts/d2elklayout/layout.go

@@ -43,11 +43,12 @@ type ELKNode struct {
 }
 
 type ELKLabel struct {
-	Text   string  `json:"text"`
-	X      float64 `json:"x"`
-	Y      float64 `json:"y"`
-	Width  float64 `json:"width"`
-	Height float64 `json:"height"`
+	Text          string            `json:"text"`
+	X             float64           `json:"x"`
+	Y             float64           `json:"y"`
+	Width         float64           `json:"width"`
+	Height        float64           `json:"height"`
+	LayoutOptions *ELKLayoutOptions `json:"layoutOptions,omitempty"`
 }
 
 type ELKPoint struct {
@@ -85,6 +86,7 @@ type ELKLayoutOptions struct {
 	EdgeNodeSpacing   float64 `json:"spacing.edgeNodeBetweenLayers,omitempty"`
 	Direction         string  `json:"elk.direction"`
 	SelfLoopSpacing   float64 `json:"elk.spacing.nodeSelfLoop"`
+	InlineEdgeLabels  bool    `json:"elk.edgeLabels.inline,omitempty"`
 }
 
 func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
@@ -186,6 +188,9 @@ func Layout(ctx context.Context, g *d2graph.Graph) (err error) {
 				Text:   edge.Attributes.Label.Value,
 				Width:  float64(edge.LabelDimensions.Width),
 				Height: float64(edge.LabelDimensions.Height),
+				LayoutOptions: &ELKLayoutOptions{
+					InlineEdgeLabels: true,
+				},
 			})
 		}
 		elkGraph.Edges = append(elkGraph.Edges, e)

d2renderers/d2svg/d2svg.go

@@ -393,32 +393,6 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
 		labelTL.Y = math.Round(labelTL.Y)
 
 		if label.Position(connection.LabelPosition).IsOnEdge() {
-			strokeWidth := float64(connection.StrokeWidth)
-			tl, br := geo.Route(connection.Route).GetBoundingBox()
-			tl.X -= strokeWidth
-			tl.Y -= strokeWidth
-			br.X += strokeWidth
-			br.Y += strokeWidth
-			if connection.SrcArrow != d2target.NoArrowhead {
-				width, height := arrowheadDimensions(connection.SrcArrow, strokeWidth)
-				tl.X -= width
-				tl.Y -= height
-				br.X += width
-				br.Y += height
-			}
-			if connection.DstArrow != d2target.NoArrowhead {
-				width, height := arrowheadDimensions(connection.DstArrow, strokeWidth)
-				tl.X -= width
-				tl.Y -= height
-				br.X += width
-				br.Y += height
-			}
-
-			tl.X = math.Min(tl.X, labelTL.X)
-			tl.Y = math.Min(tl.Y, labelTL.Y)
-			br.X = math.Max(br.X, labelTL.X+float64(connection.LabelWidth))
-			br.Y = math.Max(br.Y, labelTL.Y+float64(connection.LabelHeight))
-
 			labelMask = makeLabelMask(labelTL, connection.LabelWidth, connection.LabelHeight)
 		}
 	}
@@ -1093,12 +1067,11 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 
 	// Note: we always want this since we reference it on connections even if there end up being no masked labels
 	fmt.Fprint(buf, strings.Join([]string{
-		fmt.Sprintf(`<mask id="%s" maskUnits="userSpaceOnUse" x="0" y="0" width="%d" height="%d">`,
-			labelMaskID, w, h,
+		fmt.Sprintf(`<mask id="%s" maskUnits="userSpaceOnUse" x="%d" y="%d" width="%d" height="%d">`,
+			labelMaskID, -pad, -pad, w, h,
 		),
-		fmt.Sprintf(`<rect x="0" y="0" width="%d" height="%d" fill="white"></rect>`,
-			w,
-			h,
+		fmt.Sprintf(`<rect x="%d" y="%d" width="%d" height="%d" fill="white"></rect>`,
+			-pad, -pad, w, h,
 		),
 		strings.Join(labelMasks, "\n"),
 		`</mask>`,

e2etests/regression_test.go

@@ -69,6 +69,108 @@ table_constrained: sql_table_constrained_overflow {
 		constraint: foreign_key
 	}
 }
+`,
+		},
+		{
+			name: "elk_alignment",
+			script: `
+direction: down
+
+build_workflow: lambda-build.yaml {
+
+	push: Push to main branch {
+		style.font-size: 25
+	}
+
+	GHA: GitHub Actions {
+		style.font-size: 25
+	}
+
+	S3.style.font-size: 25
+	Terraform.style.font-size: 25
+	AWS.style.font-size: 25
+
+	push -> GHA: Triggers {
+		style.font-size: 20
+	}
+
+	GHA -> S3: Builds zip and pushes it {
+		style.font-size: 20
+	}
+
+	S3 <-> Terraform: Pulls zip to deploy {
+		style.font-size: 20
+	}
+
+	Terraform -> AWS: Changes live lambdas {
+		style.font-size: 20
+	}
+}
+
+deploy_workflow: lambda-deploy.yaml {
+
+	manual: Manual Trigger {
+		style.font-size: 25
+	}
+
+	GHA: GitHub Actions {
+		style.font-size: 25
+	}
+
+	AWS.style.font-size: 25
+
+	Manual -> GHA: Launches {
+		style.font-size: 20
+	}
+
+	GHA -> AWS: Builds zip\npushes them to S3.\n\nDeploys lambdas\nusing Terraform {
+		style.font-size: 20
+	}
+}
+
+apollo_workflow: apollo-deploy.yaml {
+
+	apollo: Apollo Repo {
+		style.font-size: 25
+	}
+
+	GHA: GitHub Actions {
+		style.font-size: 25
+	}
+
+	AWS.style.font-size: 25
+
+	apollo -> GHA: Triggered manually/push to master test test test test test test test {
+		style.font-size: 20
+	}
+
+	GHA -> AWS: test {
+		style.font-size: 20
+	}
+}
+`,
+		},
+		{
+			name: "dagre_edge_label_spacing",
+			script: `direction: right
+
+build_workflow: lambda-build.yaml {
+
+	push: Push to main branch {
+		style.font-size: 25
+	}
+	GHA: GitHub Actions {
+		style.font-size: 25
+	}
+	S3.style.font-size: 25
+	Terraform.style.font-size: 25
+	AWS.style.font-size: 25
+
+	push -> GHA: Triggers
+	GHA -> S3: Builds zip & pushes it
+	S3 <-> Terraform: Pulls zip to deploy
+	Terraform -> AWS: Changes the live lambdas
+}
 `,
 		},
 	}