Merge pull request #1028 from alixander/elk-tune-again

elk: favor balance over straight edges, margins

ci/release/changelogs/next.md

@@ -7,6 +7,8 @@
 #### Improvements 🧹
 
 - `dagre` layouts that have a connection where one endpoint is a container is much improved. [#1011](https://github.com/terrastruct/d2/pull/1011)
+- `elk` layouts favor balance over straight edges. [#1028](https://github.com/terrastruct/d2/pull/1028)
+- `elk` layouts have nicer margins between node boundaries and edges. [#1028](https://github.com/terrastruct/d2/pull/1028)
 - `sketch` draws connections with less roughness, which especially improves look of corner bends in ELK. [#1014](https://github.com/terrastruct/d2/pull/1014)
 - CSS in SVGs are diagram-specific, which means you can embed multiple D2 diagrams on a web page without fear of style conflicts. [#1016](https://github.com/terrastruct/d2/pull/1016)
 

d2layouts/d2elklayout/layout.go

@@ -8,6 +8,7 @@ import (
 	"context"
 	_ "embed"
 	"encoding/json"
+	"errors"
 	"fmt"
 	"math"
 	"strings"
@@ -97,6 +98,8 @@ var DefaultOpts = ConfigurableOpts{
 var port_spacing = 40.
 
 type elkOpts struct {
+	EdgeNode                     int    `json:"elk.spacing.edgeNode,omitempty"`
+	FixedAlignment               string `json:"elk.layered.nodePlacement.bk.fixedAlignment,omitempty"`
 	Thoroughness                 int    `json:"elk.layered.thoroughness,omitempty"`
 	EdgeEdgeBetweenLayersSpacing int    `json:"elk.layered.spacing.edgeEdgeBetweenLayers,omitempty"`
 	Direction                    string `json:"elk.direction"`
@@ -140,7 +143,9 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 		LayoutOptions: &elkOpts{
 			Thoroughness:                 8,
 			EdgeEdgeBetweenLayersSpacing: 50,
+			EdgeNode:                     40,
 			HierarchyHandling:            "INCLUDE_CHILDREN",
+			FixedAlignment:               "BALANCED",
 			ConsiderModelOrder:           "NODES_AND_EDGES",
 			ConfigurableOpts: ConfigurableOpts{
 				Algorithm:       opts.Algorithm,
@@ -218,6 +223,8 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 				Thoroughness:                 8,
 				EdgeEdgeBetweenLayersSpacing: 50,
 				HierarchyHandling:            "INCLUDE_CHILDREN",
+				FixedAlignment:               "BALANCED",
+				EdgeNode:                     40,
 				ConsiderModelOrder:           "NODES_AND_EDGES",
 				// Why is it (height, width)? I have no clue, but it works.
 				NodeSizeMinimum: fmt.Sprintf("(%d, %d)", int(math.Ceil(height)), int(math.Ceil(width))),
@@ -252,6 +259,10 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 					paddingTop,
 				)
 			}
+		} else {
+			n.LayoutOptions = &elkOpts{
+				// Margins: "[top=100,left=100,bottom=100,right=100]",
+			}
 		}
 
 		if obj.LabelWidth != nil && obj.LabelHeight != nil {
@@ -303,7 +314,7 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 
 	val, err := vm.RunString(`elk.layout(graph)
 .then(s => s)
-.catch(s => s)
+.catch(err => err.message)
 `)
 
 	if err != nil {
@@ -324,7 +335,21 @@ func Layout(ctx context.Context, g *d2graph.Graph, opts *ConfigurableOpts) (err
 		continue
 	}
 
-	jsonOut := promise.Result().Export().(map[string]interface{})
+	if promise.State() == goja.PromiseStateRejected {
+		return errors.New("ELK: something went wrong")
+	}
+
+	result := promise.Result().Export()
+
+	var jsonOut map[string]interface{}
+	switch out := result.(type) {
+	case string:
+		return fmt.Errorf("ELK layout error: %s", out)
+	case map[string]interface{}:
+		jsonOut = out
+	default:
+		return fmt.Errorf("ELK unexpected return: %v", out)
+	}
 
 	jsonBytes, err := json.Marshal(jsonOut)
 	if err != nil {