Merge pull request #1413 from gavin-ts/scale-flag

use scale flag for no-fit and customizing zoom

ci/release/changelogs/next.md

@@ -1,6 +1,7 @@
 #### Features 🚀
 
 - Configure timeout value with D2_TIMEOUT env var. [#1392](https://github.com/terrastruct/d2/pull/1392)
+- Scale renders and disable fit to screen with `--scale` flag. [#1413](https://github.com/terrastruct/d2/pull/1413)
 
 #### Improvements 🧹
 

ci/release/template/man/d2.1

@@ -80,6 +80,9 @@ Renders the diagram to look like it was sketched by hand
 .It Fl -center Ar flag
 Center the SVG in the containing viewbox, such as your browser screen
 .Ns .
+.It Fl -scale Ar -1
+Scale the output. E.g., 0.5 to halve the default size. Default -1 means that SVG's will fit to screen and all others will use their default render size. Setting to 1 turns off SVG fitting to screen
+.Ns .
 .It Fl -font-regular
 Path to .ttf file to use for the regular font. If none provided, Source Sans Pro Regular is used
 .Ns .

d2cli/main.go

@@ -107,6 +107,10 @@ func Run(ctx context.Context, ms *xmain.State) (err error) {
 	if err != nil {
 		return err
 	}
+	scaleFlag, err := ms.Opts.Float64("SCALE", "scale", "", -1, "scale the output. E.g., 0.5 to halve the default size. Default -1 means that SVG's will fit to screen and all others will use their default render size. Setting to 1 turns off SVG fitting to screen.")
+	if err != nil {
+		return err
+	}
 
 	fontRegularFlag := ms.Opts.String("D2_FONT_REGULAR", "font-regular", "", "", "path to .ttf file to use for the regular font. If none provided, Source Sans Pro Regular is used.")
 	fontItalicFlag := ms.Opts.String("D2_FONT_ITALIC", "font-italic", "", "", "path to .ttf file to use for the italic font. If none provided, Source Sans Pro Regular-Italic is used.")
@@ -232,6 +236,10 @@ func Run(ctx context.Context, ms *xmain.State) (err error) {
 		}
 		ms.Log.Debug.Printf("using dark theme %s (ID: %d)", match.Name, *darkThemeFlag)
 	}
+	var scale *float64
+	if scaleFlag != nil && *scaleFlag > 0. {
+		scale = scaleFlag
+	}
 
 	plugin, err := d2plugin.FindPlugin(ctx, ps, *layoutFlag)
 	if err != nil {
@@ -282,6 +290,7 @@ func Run(ctx context.Context, ms *xmain.State) (err error) {
 		Center:      *centerFlag,
 		ThemeID:     *themeFlag,
 		DarkThemeID: darkThemeFlag,
+		Scale:       scale,
 	}
 
 	if *watchFlag {
@@ -665,6 +674,12 @@ func render(ctx context.Context, ms *xmain.State, compileDur time.Duration, plug
 
 func _render(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, opts d2svg.RenderOpts, outputPath string, bundle, forceAppendix bool, page playwright.Page, ruler *textmeasure.Ruler, diagram *d2target.Diagram) ([]byte, error) {
 	toPNG := getExportExtension(outputPath) == PNG
+	var scale *float64
+	if opts.Scale != nil {
+		scale = opts.Scale
+	} else if toPNG {
+		scale = go2.Pointer(1.)
+	}
 	svg, err := d2svg.Render(diagram, &d2svg.RenderOpts{
 		Pad:         opts.Pad,
 		Sketch:      opts.Sketch,
@@ -672,7 +687,7 @@ func _render(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, opts
 		ThemeID:     opts.ThemeID,
 		DarkThemeID: opts.DarkThemeID,
 		MasterID:    opts.MasterID,
-		SetDimensions: toPNG,
+		Scale:       scale,
 	})
 	if err != nil {
 		return nil, err
@@ -746,11 +761,18 @@ func renderPDF(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, opt
 		// make the bg fill within the png transparent so that the pdf bg fill is the only bg color present
 		diagram.Root.Fill = "transparent"
 
+		var scale *float64
+		if opts.Scale != nil {
+			scale = opts.Scale
+		} else {
+			scale = go2.Pointer(1.)
+		}
+
 		svg, err = d2svg.Render(diagram, &d2svg.RenderOpts{
 			Pad:    opts.Pad,
 			Sketch: opts.Sketch,
 			Center: opts.Center,
-			SetDimensions: true,
+			Scale:  scale,
 		})
 		if err != nil {
 			return nil, err
@@ -837,12 +859,20 @@ func renderPPTX(ctx context.Context, ms *xmain.State, presentation *pptx.Present
 		// make the bg fill within the png transparent so that the pdf bg fill is the only bg color present
 		diagram.Root.Fill = "transparent"
 
+		var scale *float64
+		if opts.Scale != nil {
+			scale = opts.Scale
+		} else {
+			scale = go2.Pointer(1.)
+		}
+
 		var err error
+
 		svg, err = d2svg.Render(diagram, &d2svg.RenderOpts{
 			Pad:    opts.Pad,
 			Sketch: opts.Sketch,
 			Center: opts.Center,
-			SetDimensions: true,
+			Scale:  scale,
 		})
 		if err != nil {
 			return nil, err
@@ -1076,11 +1106,18 @@ func buildBoardIDToIndex(diagram *d2target.Diagram, dictionary map[string]int, p
 
 func renderPNGsForGIF(ctx context.Context, ms *xmain.State, plugin d2plugin.Plugin, opts d2svg.RenderOpts, ruler *textmeasure.Ruler, page playwright.Page, diagram *d2target.Diagram) (svg []byte, pngs [][]byte, err error) {
 	if !diagram.IsFolderOnly {
+
+		var scale *float64
+		if opts.Scale != nil {
+			scale = opts.Scale
+		} else {
+			scale = go2.Pointer(1.)
+		}
 		svg, err = d2svg.Render(diagram, &d2svg.RenderOpts{
 			Pad:    opts.Pad,
 			Sketch: opts.Sketch,
 			Center: opts.Center,
-			SetDimensions: true,
+			Scale:  scale,
 		})
 		if err != nil {
 			return nil, nil, err

d2cli/static/watch.js

@@ -35,6 +35,9 @@ function init(reconnectDelay) {
       let width = parseInt(svgEl.getAttribute("width"), 10);
       let height = parseInt(svgEl.getAttribute("height"), 10);
       if (isInit) {
+        if (msg.scale) {
+          ratio = msg.scale;
+        } else {
           if (width > height) {
             if (width > window.innerWidth) {
               ratio = window.innerWidth / width;
@@ -42,6 +45,7 @@ function init(reconnectDelay) {
           } else if (height > window.innerHeight) {
             ratio = window.innerHeight / height;
           }
+        }
         // Scale svg fit to zoom
         isInit = false;
       }

d2cli/watch.go

@@ -84,6 +84,7 @@ type watcher struct {
 
 type compileResult struct {
 	SVG   string   `json:"svg"`
+	Scale *float64 `json:"scale,omitEmpty"`
 	Err   string   `json:"err"`
 }
 
@@ -373,6 +374,7 @@ func (w *watcher) compileLoop(ctx context.Context) error {
 		}
 		w.broadcast(&compileResult{
 			SVG:   string(svg),
+			Scale: w.renderOpts.Scale,
 			Err:   errs,
 		})
 

d2renderers/d2svg/d2svg.go

@@ -75,8 +75,8 @@ type RenderOpts struct {
 	ThemeID     int64
 	DarkThemeID *int64
 	Font        string
-	// disables the fit to screen behavior and ensures the exported svg has the exact dimensions
+	// the svg will be scaled by this factor, if unset the svg will fit to screen
-	SetDimensions bool
+	Scale *float64
 
 	// MasterID is passed when the diagram should use something other than its own hash for unique targeting
 	// Currently, that's when multi-boards are collapsed
@@ -1654,7 +1654,7 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	pad := DEFAULT_PADDING
 	themeID := DEFAULT_THEME
 	darkThemeID := DEFAULT_DARK_THEME
-	setDimensions := false
+	var scale *float64
 	if opts != nil {
 		pad = opts.Pad
 		if opts.Sketch {
@@ -1666,7 +1666,7 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 		}
 		themeID = opts.ThemeID
 		darkThemeID = opts.DarkThemeID
-		setDimensions = opts.SetDimensions
+		scale = opts.Scale
 	}
 
 	buf := &bytes.Buffer{}
@@ -1857,8 +1857,11 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	}
 
 	var dimensions string
-	if setDimensions {
+	if scale != nil {
-		dimensions = fmt.Sprintf(` width="%d" height="%d"`, w, h)
+		dimensions = fmt.Sprintf(` width="%d" height="%d"`,
+			int(math.Ceil((*scale)*float64(w))),
+			int(math.Ceil((*scale)*float64(h))),
+		)
 	}
 
 	alignment := "xMinYMin"