Merge pull request #60 from terrastruct/d2render-multiple-keyword

d2render: multiple keyword

d2renderers/d2svg/d2svg.go

@@ -33,6 +33,8 @@ const (
 	MIN_ARROWHEAD_STROKE_WIDTH = 2
 )
 
+var multipleOffset = geo.NewVector(10, -10)
+
 //go:embed github-markdown.css
 var mdCSS string
 
@@ -442,6 +444,16 @@ func drawConnection(writer io.Writer, connection d2target.Connection, markers ma
 	}
 }
 
+func renderOval(tl *geo.Point, width, height float64, style string) string {
+	rx := width / 2
+	ry := height / 2
+	cx := tl.X + rx
+	cy := tl.Y + ry
+	return fmt.Sprintf(`<ellipse class="shape" cx="%f" cy="%f" rx="%f" ry="%f" style="%s" />`,
+		cx, cy, rx, ry, style,
+	)
+}
+
 func drawShape(writer io.Writer, targetShape d2target.Shape) error {
 	tl := geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y))
 	width := float64(targetShape.Width)
@@ -451,6 +463,11 @@ func drawShape(writer io.Writer, targetShape d2target.Shape) error {
 
 	s := shape.NewShape(shapeType, geo.NewBox(tl, width, height))
 
+	var multipleTL *geo.Point
+	if targetShape.Multiple {
+		multipleTL = tl.AddVector(multipleOffset)
+	}
+
 	switch targetShape.Type {
 	case d2target.ShapeClass:
 		drawClass(writer, targetShape)
@@ -459,13 +476,10 @@ func drawShape(writer io.Writer, targetShape d2target.Shape) error {
 		drawTable(writer, targetShape)
 		return nil
 	case d2target.ShapeOval:
-		rx := width / 2
-		ry := height / 2
-		cx := tl.X + rx
-		cy := tl.Y + ry
-		fmt.Fprintf(writer, `<ellipse class="shape" cx="%f" cy="%f" rx="%f" ry="%f" style="%s" />`,
-			cx, cy, rx, ry, style,
-		)
+		if targetShape.Multiple {
+			fmt.Fprint(writer, renderOval(multipleTL, width, height, style))
+		}
+		fmt.Fprint(writer, renderOval(tl, width, height, style))
 
 	case d2target.ShapeImage:
 		fmt.Fprintf(writer, `<image class="shape" href="%s" x="%d" y="%d" width="%d" height="%d" style="%s" />`,
@@ -475,10 +489,20 @@ func drawShape(writer io.Writer, targetShape d2target.Shape) error {
 	case d2target.ShapeCode:
 		// TODO should standardize "" to rectangle
 	case d2target.ShapeRectangle, "":
+		if targetShape.Multiple {
+			fmt.Fprintf(writer, `<rect class="shape" x="%d" y="%d" width="%d" height="%d" style="%s" />`,
+				targetShape.Pos.X+10, targetShape.Pos.Y-10, targetShape.Width, targetShape.Height, style)
+		}
 		fmt.Fprintf(writer, `<rect class="shape" x="%d" y="%d" width="%d" height="%d" style="%s" />`,
 			targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, style)
 
 	default:
+		if targetShape.Multiple {
+			multiplePathData := shape.NewShape(shapeType, geo.NewBox(multipleTL, width, height)).GetSVGPathData()
+			for _, pathData := range multiplePathData {
+				fmt.Fprintf(writer, `<path class="shape" d="%s" style="%s" />`, pathData, style)
+			}
+		}
 		for _, pathData := range s.GetSVGPathData() {
 			fmt.Fprintf(writer, `<path class="shape" d="%s" style="%s" />`, pathData, style)
 		}

e2etests/stable_test.go

@@ -48,6 +48,53 @@ queue -> package -> step
 callout -> stored_data -> person
 diamond -> oval -> circle
 hexagon -> cloud
+`,
+		},
+		{
+			name: "all_shapes_multiple",
+			script: `
+rectangle: {shape: "rectangle"}
+square: {shape: "square"}
+page: {shape: "page"}
+parallelogram: {shape: "parallelogram"}
+document: {shape: "document"}
+cylinder: {shape: "cylinder"}
+queue: {shape: "queue"}
+package: {shape: "package"}
+step: {shape: "step"}
+callout: {shape: "callout"}
+stored_data: {shape: "stored_data"}
+person: {shape: "person"}
+diamond: {shape: "diamond"}
+oval: {shape: "oval"}
+circle: {shape: "circle"}
+hexagon: {shape: "hexagon"}
+cloud: {shape: "cloud"}
+
+rectangle -> square -> page
+parallelogram -> document -> cylinder
+queue -> package -> step
+callout -> stored_data -> person
+diamond -> oval -> circle
+hexagon -> cloud
+
+rectangle.multiple: true
+square.multiple: true
+page.multiple: true
+parallelogram.multiple: true
+document.multiple: true
+cylinder.multiple: true
+queue.multiple: true
+package.multiple: true
+step.multiple: true
+callout.multiple: true
+stored_data.multiple: true
+person.multiple: true
+diamond.multiple: true
+oval.multiple: true
+circle.multiple: true
+hexagon.multiple: true
+cloud.multiple: true
 `,
 		},
 		{