Merge pull request #1024 from alixander/pattern

implement `fill-pattern`

d2compiler/compile.go

@@ -392,6 +392,8 @@ func compileStyleFieldInit(attrs *d2graph.Attributes, f *d2ir.Field) {
 		attrs.Style.Stroke = &d2graph.Scalar{MapKey: f.LastPrimaryKey()}
 	case "fill":
 		attrs.Style.Fill = &d2graph.Scalar{MapKey: f.LastPrimaryKey()}
+	case "fill-pattern":
+		attrs.Style.FillPattern = &d2graph.Scalar{MapKey: f.LastPrimaryKey()}
 	case "stroke-width":
 		attrs.Style.StrokeWidth = &d2graph.Scalar{MapKey: f.LastPrimaryKey()}
 	case "stroke-dash":

d2compiler/compile_test.go

@@ -242,6 +242,25 @@ containers: {
 				}
 			},
 		},
+		{
+			name: "fill-pattern",
+			text: `x: {
+	style: {
+    fill-pattern: dots
+  }
+}
+`,
+		},
+		{
+			name: "invalid-fill-pattern",
+			text: `x: {
+	style: {
+    fill-pattern: ddots
+  }
+}
+`,
+			expErr: `d2/testdata/d2compiler/TestCompile/invalid-fill-pattern.d2:3:19: expected "fill-pattern" to be one of: dots`,
+		},
 		{
 			name: "shape_unquoted_hex",
 

d2exporter/export.go

@@ -60,6 +60,9 @@ func applyStyles(shape *d2target.Shape, obj *d2graph.Object) {
 	} else if obj.Attributes.Shape.Value == d2target.ShapeText {
 		shape.Fill = "transparent"
 	}
+	if obj.Attributes.Style.FillPattern != nil {
+		shape.FillPattern = obj.Attributes.Style.FillPattern.Value
+	}
 	if obj.Attributes.Style.Stroke != nil {
 		shape.Stroke = obj.Attributes.Style.Stroke.Value
 	}

d2graph/d2graph.go

@@ -150,6 +150,7 @@ type Style struct {
 	Opacity      *Scalar `json:"opacity,omitempty"`
 	Stroke       *Scalar `json:"stroke,omitempty"`
 	Fill         *Scalar `json:"fill,omitempty"`
+	FillPattern  *Scalar `json:"fillPattern,omitempty"`
 	StrokeWidth  *Scalar `json:"strokeWidth,omitempty"`
 	StrokeDash   *Scalar `json:"strokeDash,omitempty"`
 	BorderRadius *Scalar `json:"borderRadius,omitempty"`
@@ -194,6 +195,14 @@ func (s *Style) Apply(key, value string) error {
 			return errors.New(`expected "fill" to be a valid named color ("orange") or a hex code ("#f0ff3a")`)
 		}
 		s.Fill.Value = value
+	case "fill-pattern":
+		if s.FillPattern == nil {
+			break
+		}
+		if !go2.Contains(FillPatterns, strings.ToLower(value)) {
+			return fmt.Errorf(`expected "fill-pattern" to be one of: %s`, strings.Join(FillPatterns, ","))
+		}
+		s.FillPattern.Value = value
 	case "stroke-width":
 		if s.StrokeWidth == nil {
 			break
@@ -1499,6 +1508,7 @@ var StyleKeywords = map[string]struct{}{
 	"opacity":       {},
 	"stroke":        {},
 	"fill":          {},
+	"fill-pattern":  {},
 	"stroke-width":  {},
 	"stroke-dash":   {},
 	"border-radius": {},
@@ -1540,6 +1550,11 @@ var NearConstantsArray = []string{
 }
 var NearConstants map[string]struct{}
 
+var FillPatterns = []string{
+	// TODO add lined later
+	"dots",
+}
+
 // BoardKeywords contains the keywords that create new boards.
 var BoardKeywords = map[string]struct{}{
 	"layers":    {},

d2renderers/d2sketch/sketch.go

@@ -98,6 +98,7 @@ func Rect(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 {
@@ -145,6 +146,7 @@ func DoubleRect(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 pathsBigRect {
@@ -192,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 {
@@ -242,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 {
@@ -292,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

@@ -1058,6 +1058,122 @@ something
 				}
 			`,
 		},
+		{
+			name: "dots-real",
+			script: `
+NETWORK: {
+  style: {
+	  stroke: black
+    fill-pattern: dots
+    double-border: true
+    fill: "#E7E9EE"
+    font: mono
+  }
+  CELL TOWER: {
+		style: {
+			stroke: black
+			fill-pattern: dots
+			fill: "#F5F6F9"
+			font: mono
+		}
+		satellites: SATELLITES {
+			shape: stored_data
+			style: {
+				font: mono
+				fill: white
+				stroke: black
+				multiple: true
+			}
+		}
+
+		transmitter: TRANSMITTER {
+			style: {
+				font: mono
+				fill: white
+				stroke: black
+			}
+		}
+
+		satellites -> transmitter: SEND {
+			style.stroke: black
+			style.font: mono
+		}
+		satellites -> transmitter: SEND {
+			style.stroke: black
+			style.font: mono
+		}
+		satellites -> transmitter: SEND {
+			style.stroke: black
+			style.font: mono
+		}
+  }
+}
+			`,
+		},
+		{
+			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)
 }