fix

d2renderers/d2sketch/sketch_test.go

@@ -326,6 +326,20 @@ a.9 <-> b.9: cf-one-required {
 	source-arrowhead.shape: cf-one-required
 	target-arrowhead.shape: cf-one-required
 }
+`,
+		},
+		{
+			name: "opacity",
+			script: `x.style.opacity: 0.4
+y: |md
+  linux: because a PC is a terrible thing to waste
+| {
+	style.opacity: 0.4
+}
+x -> a: {
+  label: You don't have to know how the computer works,\njust how to work the computer.
+  style.opacity: 0.4
+}
 `,
 		},
 	}

d2renderers/d2svg/d2svg.go

@@ -412,7 +412,11 @@ func makeLabelMask(labelTL *geo.Point, width, height int) string {
 }
 
 func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Connection, markers map[string]struct{}, idToShape map[string]d2target.Shape, sketchRunner *d2sketch.Runner) (labelMask string, _ error) {
-	fmt.Fprintf(writer, `<g id="%s">`, svg.EscapeText(connection.ID))
+	opacityStyle := ""
+	if connection.Opacity != 1.0 {
+		opacityStyle = fmt.Sprintf(" style='opacity:%f'", connection.Opacity)
+	}
+	fmt.Fprintf(writer, `<g id="%s"%s>`, svg.EscapeText(connection.ID), opacityStyle)
 	var markerStart string
 	if connection.SrcArrow != d2target.NoArrowhead {
 		id := arrowheadMarkerID(false, connection)
@@ -651,7 +655,12 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 		fmt.Fprintf(writer, `<a href="%s" xlink:href="%[1]s">`, targetShape.Link)
 		closingTag += "</a>"
 	}
-	fmt.Fprintf(writer, `<g id="%s">`, svg.EscapeText(targetShape.ID))
+	// Opacity is a unique style, it applies to everything for a shape
+	opacityStyle := ""
+	if targetShape.Opacity != 1.0 {
+		opacityStyle = fmt.Sprintf(" style='opacity:%f'", targetShape.Opacity)
+	}
+	fmt.Fprintf(writer, `<g id="%s"%s>`, svg.EscapeText(targetShape.ID), opacityStyle)
 	tl := geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y))
 	width := float64(targetShape.Width)
 	height := float64(targetShape.Height)
@@ -839,7 +848,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 			svgStyles := styleToSVG(style)
 			containerStyle := fmt.Sprintf(`stroke: %s;fill:%s`, targetShape.Stroke, style.Get(chroma.Background).Background.String())
 
-			fmt.Fprintf(writer, `<g transform="translate(%f %f)" style="opacity:%f">`, box.TopLeft.X, box.TopLeft.Y, targetShape.Opacity)
+			fmt.Fprintf(writer, `<g transform="translate(%f %f)"">`, box.TopLeft.X, box.TopLeft.Y)
 			fmt.Fprintf(writer, `<rect class="shape" width="%d" height="%d" style="%s" />`,
 				targetShape.Width, targetShape.Height, containerStyle)
 			// Padding
@@ -864,7 +873,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 			if err != nil {
 				return labelMask, err
 			}
-			fmt.Fprintf(writer, `<g transform="translate(%f %f)" style="opacity:%f">`, box.TopLeft.X, box.TopLeft.Y, targetShape.Opacity)
+			fmt.Fprintf(writer, `<g transform="translate(%f %f)">`, box.TopLeft.X, box.TopLeft.Y)
 			fmt.Fprint(writer, render)
 			fmt.Fprintf(writer, "</g>")
 		} else if targetShape.Type == d2target.ShapeText && targetShape.Language != "" {
@@ -885,9 +894,6 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 			if targetShape.Stroke != "" {
 				mdStyle += fmt.Sprintf("color:%s;", targetShape.Stroke)
 			}
-			if targetShape.Opacity != 1.0 {
-				mdStyle += fmt.Sprintf("opacity:%f;", targetShape.Opacity)
-			}
 
 			fmt.Fprintf(writer, `<div xmlns="http://www.w3.org/1999/xhtml" class="md" style="%s">%v</div>`, mdStyle, render)
 			fmt.Fprint(writer, `</foreignObject></g>`)
@@ -897,9 +903,6 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
 				fontColor = targetShape.Color
 			}
 			textStyle := fmt.Sprintf("text-anchor:%s;font-size:%vpx;fill:%s", "middle", targetShape.FontSize, fontColor)
-			if targetShape.Opacity != 1.0 {
-				textStyle += fmt.Sprintf(";opacity:%f;", targetShape.Opacity)
-			}
 			x := labelTL.X + float64(targetShape.LabelWidth)/2.
 			// text is vertically positioned at its baseline which is at labelTL+FontSize
 			y := labelTL.Y + float64(targetShape.FontSize)

d2target/d2target.go

@@ -173,7 +173,6 @@ func (s Shape) CSSStyle() string {
 		out += fmt.Sprintf(`fill:%s;`, s.Fill)
 		out += fmt.Sprintf(`stroke:%s;`, s.Stroke)
 	}
-	out += fmt.Sprintf(`opacity:%f;`, s.Opacity)
 	out += fmt.Sprintf(`stroke-width:%d;`, s.StrokeWidth)
 	if s.StrokeDash != 0 {
 		dashSize, gapSize := svg.GetStrokeDashAttributes(float64(s.StrokeWidth), s.StrokeDash)
@@ -279,7 +278,6 @@ func (c Connection) CSSStyle() string {
 	out := ""
 
 	out += fmt.Sprintf(`stroke:%s;`, c.Stroke)
-	out += fmt.Sprintf(`opacity:%f;`, c.Opacity)
 	out += fmt.Sprintf(`stroke-width:%d;`, c.StrokeWidth)
 	strokeDash := c.StrokeDash
 	if strokeDash == 0 && c.Animated {

e2etests/regression_test.go

@@ -390,6 +390,10 @@ y: |md
 | {
 	style.opacity: 0.4
 }
+x -> a: {
+  label: You don't have to know how the computer works,\njust how to work the computer.
+  style.opacity: 0.4
+}
 `,
 		},
 	}

e2etests/testdata/regression/opacity-on-label/dagre/board.exp.json

@@ -6,7 +6,7 @@
       "id": "x",
       "type": "",
       "pos": {
-        "x": 0,
+        "x": 105,
         "y": 0
       },
       "width": 113,
@@ -46,7 +46,7 @@
       "id": "y",
       "type": "text",
       "pos": {
-        "x": 173,
+        "x": 278,
         "y": 51
       },
       "width": 304,
@@ -80,7 +80,96 @@
       "labelHeight": 24,
       "zIndex": 0,
       "level": 1
+    },
+    {
+      "id": "a",
+      "type": "",
+      "pos": {
+        "x": 105,
+        "y": 263
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
     }
   ],
-  "connections": []
+  "connections": [
+    {
+      "id": "(x -> a)[0]",
+      "src": "x",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 0.4,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "You don't have to know how the computer works,\njust how to work the computer.",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 322,
+      "labelHeight": 37,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 161,
+          "y": 126
+        },
+        {
+          "x": 161,
+          "y": 180.8
+        },
+        {
+          "x": 161,
+          "y": 208.3
+        },
+        {
+          "x": 161,
+          "y": 263.5
+        }
+      ],
+      "isCurve": true,
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
 }

e2etests/testdata/regression/opacity-on-label/elk/board.exp.json

@@ -6,7 +6,7 @@
       "id": "x",
       "type": "",
       "pos": {
-        "x": 12,
+        "x": 116,
         "y": 12
       },
       "width": 113,
@@ -46,7 +46,7 @@
       "id": "y",
       "type": "text",
       "pos": {
-        "x": 145,
+        "x": 249,
         "y": 63
       },
       "width": 304,
@@ -80,7 +80,87 @@
       "labelHeight": 24,
       "zIndex": 0,
       "level": 1
+    },
+    {
+      "id": "a",
+      "type": "",
+      "pos": {
+        "x": 116,
+        "y": 375
+      },
+      "width": 113,
+      "height": 126,
+      "opacity": 1,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "borderRadius": 0,
+      "fill": "#F7F8FE",
+      "stroke": "#0D32B2",
+      "shadow": false,
+      "3d": false,
+      "multiple": false,
+      "tooltip": "",
+      "link": "",
+      "icon": null,
+      "iconPosition": "",
+      "blend": false,
+      "fields": null,
+      "methods": null,
+      "columns": null,
+      "label": "a",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#0A0F25",
+      "italic": false,
+      "bold": true,
+      "underline": false,
+      "labelWidth": 13,
+      "labelHeight": 26,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "zIndex": 0,
+      "level": 1
     }
   ],
-  "connections": []
+  "connections": [
+    {
+      "id": "(x -> a)[0]",
+      "src": "x",
+      "srcArrow": "none",
+      "srcLabel": "",
+      "dst": "a",
+      "dstArrow": "triangle",
+      "dstLabel": "",
+      "opacity": 0.4,
+      "strokeDash": 0,
+      "strokeWidth": 2,
+      "stroke": "#0D32B2",
+      "label": "You don't have to know how the computer works,\njust how to work the computer.",
+      "fontSize": 16,
+      "fontFamily": "DEFAULT",
+      "language": "",
+      "color": "#676C7E",
+      "italic": true,
+      "bold": false,
+      "underline": false,
+      "labelWidth": 322,
+      "labelHeight": 37,
+      "labelPosition": "INSIDE_MIDDLE_CENTER",
+      "labelPercentage": 0,
+      "route": [
+        {
+          "x": 173,
+          "y": 138
+        },
+        {
+          "x": 173,
+          "y": 375
+        }
+      ],
+      "animated": false,
+      "tooltip": "",
+      "icon": null,
+      "zIndex": 0
+    }
+  ]
 }