dots for sketch

d2renderers/d2sketch/sketch.go

@@ -194,6 +194,7 @@ func Oval(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)
+	pathEl.FillPattern = shape.FillPattern
 	pathEl.ClassName = "shape"
 	pathEl.Style = shape.CSSStyle()
 	for _, p := range paths {
@@ -244,6 +245,7 @@ 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)
+	pathEl.FillPattern = shape.FillPattern
 	pathEl.ClassName = "shape"
 	pathEl.Style = shape.CSSStyle()
 	for _, p := range pathsBigCircle {
@@ -294,6 +296,7 @@ func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) {
 		}
 		pathEl := d2themes.NewThemableElement("path")
 		pathEl.Fill, pathEl.Stroke = d2themes.ShapeTheme(shape)
+		pathEl.FillPattern = shape.FillPattern
 		pathEl.ClassName = "shape"
 		pathEl.Style = shape.CSSStyle()
 		for _, p := range sketchPaths {

d2renderers/d2sketch/sketch_test.go

@@ -1059,7 +1059,7 @@ something
 			`,
 		},
 		{
-			name: "dots",
+			name: "dots-real",
 			script: `
 NETWORK: {
   style: {
@@ -1108,6 +1108,70 @@ NETWORK: {
 		}
   }
 }
+			`,
+		},
+		{
+			name: "dots-3d",
+			script: `x: {style.3d: true; style.fill-pattern: dots}
+y: {shape: hexagon; style.3d: true; style.fill-pattern: dots}
+`,
+		},
+		{
+			name: "dots-multiple",
+			script: `
+rectangle: {shape: "rectangle"; style.fill-pattern: dots; style.multiple: true}
+square: {shape: "square"; style.fill-pattern: dots; style.multiple: true}
+page: {shape: "page"; style.fill-pattern: dots; style.multiple: true}
+parallelogram: {shape: "parallelogram"; style.fill-pattern: dots; style.multiple: true}
+document: {shape: "document"; style.fill-pattern: dots; style.multiple: true}
+cylinder: {shape: "cylinder"; style.fill-pattern: dots; style.multiple: true}
+queue: {shape: "queue"; style.fill-pattern: dots; style.multiple: true}
+package: {shape: "package"; style.fill-pattern: dots; style.multiple: true}
+step: {shape: "step"; style.fill-pattern: dots; style.multiple: true}
+callout: {shape: "callout"; style.fill-pattern: dots; style.multiple: true}
+stored_data: {shape: "stored_data"; style.fill-pattern: dots; style.multiple: true}
+person: {shape: "person"; style.fill-pattern: dots; style.multiple: true}
+diamond: {shape: "diamond"; style.fill-pattern: dots; style.multiple: true}
+oval: {shape: "oval"; style.fill-pattern: dots; style.multiple: true}
+circle: {shape: "circle"; style.fill-pattern: dots; style.multiple: true}
+hexagon: {shape: "hexagon"; style.fill-pattern: dots; style.multiple: true}
+cloud: {shape: "cloud"; style.fill-pattern: dots; style.multiple: true}
+
+rectangle -> square -> page
+parallelogram -> document -> cylinder
+queue -> package -> step
+callout -> stored_data -> person
+diamond -> oval -> circle
+hexagon -> cloud
+`,
+		},
+		{
+			name: "dots-all",
+			script: `
+rectangle: {shape: "rectangle"; style.fill-pattern: dots}
+square: {shape: "square"; style.fill-pattern: dots}
+page: {shape: "page"; style.fill-pattern: dots}
+parallelogram: {shape: "parallelogram"; style.fill-pattern: dots}
+document: {shape: "document"; style.fill-pattern: dots}
+cylinder: {shape: "cylinder"; style.fill-pattern: dots}
+queue: {shape: "queue"; style.fill-pattern: dots}
+package: {shape: "package"; style.fill-pattern: dots}
+step: {shape: "step"; style.fill-pattern: dots}
+callout: {shape: "callout"; style.fill-pattern: dots}
+stored_data: {shape: "stored_data"; style.fill-pattern: dots}
+person: {shape: "person"; style.fill-pattern: dots}
+diamond: {shape: "diamond"; style.fill-pattern: dots}
+oval: {shape: "oval"; style.fill-pattern: dots}
+circle: {shape: "circle"; style.fill-pattern: dots}
+hexagon: {shape: "hexagon"; style.fill-pattern: dots}
+cloud: {shape: "cloud"; style.fill-pattern: dots}
+
+rectangle -> square -> page
+parallelogram -> document -> cylinder
+queue -> package -> step
+callout -> stored_data -> person
+diamond -> oval -> circle
+hexagon -> cloud
 `,
 		},
 	}