diff --git a/d2renderers/d2sketch/sketch.go b/d2renderers/d2sketch/sketch.go
index c9c9317dd..a77585ea9 100644
--- a/d2renderers/d2sketch/sketch.go
+++ b/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 {
diff --git a/d2renderers/d2sketch/sketch_test.go b/d2renderers/d2sketch/sketch_test.go
index c08476296..16b04dae9 100644
--- a/d2renderers/d2sketch/sketch_test.go
+++ b/d2renderers/d2sketch/sketch_test.go
@@ -1059,7 +1059,7 @@ something
`,
},
{
- name: "dots",
+ name: "dots-real",
script: `
NETWORK: {
style: {
@@ -1110,6 +1110,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
+`,
+ },
}
runa(t, tcs)
}
diff --git a/d2renderers/d2sketch/testdata/dots-3d/sketch.exp.svg b/d2renderers/d2sketch/testdata/dots-3d/sketch.exp.svg
new file mode 100644
index 000000000..215753942
--- /dev/null
+++ b/d2renderers/d2sketch/testdata/dots-3d/sketch.exp.svg
@@ -0,0 +1,140 @@
+
\ No newline at end of file
diff --git a/d2renderers/d2sketch/testdata/dots-all/sketch.exp.svg b/d2renderers/d2sketch/testdata/dots-all/sketch.exp.svg
new file mode 100644
index 000000000..075f5ce4d
--- /dev/null
+++ b/d2renderers/d2sketch/testdata/dots-all/sketch.exp.svg
@@ -0,0 +1,136 @@
+
\ No newline at end of file
diff --git a/d2renderers/d2sketch/testdata/dots-multiple/sketch.exp.svg b/d2renderers/d2sketch/testdata/dots-multiple/sketch.exp.svg
new file mode 100644
index 000000000..1252e36db
--- /dev/null
+++ b/d2renderers/d2sketch/testdata/dots-multiple/sketch.exp.svg
@@ -0,0 +1,136 @@
+
\ No newline at end of file
diff --git a/d2renderers/d2sketch/testdata/dots-real/sketch.exp.svg b/d2renderers/d2sketch/testdata/dots-real/sketch.exp.svg
new file mode 100644
index 000000000..4e8f3d5a6
--- /dev/null
+++ b/d2renderers/d2sketch/testdata/dots-real/sketch.exp.svg
@@ -0,0 +1,149 @@
+
\ No newline at end of file