Merge pull request #933 from alixander/sketch-fill

fix sketch overlays, double-border

d2renderers/d2sketch/sketch.go

@@ -155,6 +155,8 @@ func DoubleRect(r *Runner, shape d2target.Shape) (string, error) {
 	pathEl = d2themes.NewThemableElement("path")
 	pathEl.SetTranslate(float64(shape.Pos.X+d2target.INNER_BORDER_OFFSET), float64(shape.Pos.Y+d2target.INNER_BORDER_OFFSET))
 	pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
+	// No need for inner to double paint
+	pathEl.Fill = "transparent"
 	pathEl.ClassName = "shape"
 	pathEl.Style = shape.CSSStyle()
 	for _, p := range pathsSmallRect {
@@ -162,10 +164,16 @@ func DoubleRect(r *Runner, shape d2target.Shape) (string, error) {
 		output += pathEl.Render()
 	}
 
-	output += fmt.Sprintf(
-		`<rect class="sketch-overlay" transform="translate(%d %d)" width="%d" height="%d" />`,
-		shape.Pos.X, shape.Pos.Y, shape.Width, shape.Height,
-	)
+	sketchOEl := d2themes.NewThemableElement("rect")
+	sketchOEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
+	sketchOEl.Width = float64(shape.Width)
+	sketchOEl.Height = float64(shape.Height)
+	renderedSO, err := d2themes.NewThemableSketchOverlay(sketchOEl, shape.Fill).Render()
+	if err != nil {
+		return "", err
+	}
+	output += renderedSO
+
 	return output, nil
 }
 
@@ -244,17 +252,27 @@ func DoubleOval(r *Runner, shape d2target.Shape) (string, error) {
 	pathEl = d2themes.NewThemableElement("path")
 	pathEl.SetTranslate(float64(shape.Pos.X), float64(shape.Pos.Y))
 	pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
+	// No need for inner to double paint
+	pathEl.Fill = "transparent"
 	pathEl.ClassName = "shape"
 	pathEl.Style = shape.CSSStyle()
 	for _, p := range pathsSmallCircle {
 		pathEl.D = p
 		output += pathEl.Render()
 	}
+	soElement := d2themes.NewThemableElement("ellipse")
+	soElement.SetTranslate(float64(shape.Pos.X+shape.Width/2), float64(shape.Pos.Y+shape.Height/2))
+	soElement.Rx = float64(shape.Width / 2)
+	soElement.Ry = float64(shape.Height / 2)
+	renderedSO, err := d2themes.NewThemableSketchOverlay(
+		soElement,
+		shape.Fill,
+	).Render()
+	if err != nil {
+		return "", err
+	}
+	output += renderedSO
 
-	output += fmt.Sprintf(
-		`<ellipse class="sketch-overlay" transform="translate(%d %d)" rx="%d" ry="%d" />`,
-		shape.Pos.X+shape.Width/2, shape.Pos.Y+shape.Height/2, shape.Width/2, shape.Height/2,
-	)
 	return output, nil
 }
 

d2renderers/d2sketch/sketch_test.go

@@ -986,6 +986,23 @@ company Warehouse.explanation: |md
   - Staging
   - Dispatch to Site
 |
+`,
+		},
+		{
+			name: "double-border",
+			script: `a: {
+  style.double-border: true
+  b
+}
+c: {
+  shape: oval
+  style.double-border: true
+  d
+}
+normal: {
+  nested normal
+}
+something
 `,
 		},
 	}

d2renderers/d2svg/d2svg.go

@@ -1689,10 +1689,6 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	// generate style elements that will be appended to the SVG tag
 	upperBuf := &bytes.Buffer{}
 	embedFonts(upperBuf, buf.String(), diagram.FontFamily) // embedFonts *must* run before `d2sketch.DefineFillPatterns`, but after all elements are appended to `buf`
-	if sketchRunner != nil {
-		d2sketch.DefineFillPatterns(upperBuf)
-	}
-
 	themeStylesheet, err := themeCSS(themeID, darkThemeID)
 	if err != nil {
 		return nil, err
@@ -1709,6 +1705,9 @@ func Render(diagram *d2target.Diagram, opts *RenderOpts) ([]byte, error) {
 	if hasMarkdown {
 		fmt.Fprintf(upperBuf, `<style type="text/css">%s</style>`, mdCSS)
 	}
+	if sketchRunner != nil {
+		d2sketch.DefineFillPatterns(upperBuf)
+	}
 
 	// This shift is for background el to envelop the diagram
 	left -= int(math.Ceil(float64(diagram.Root.StrokeWidth) / 2.))