Merge pull request #2250 from alixander/shape-animate

allow animated: true for shape

ci/release/changelogs/next.md

@@ -1,5 +1,6 @@
 #### Features 🚀
 
+- Animations: `style.animated: true` is supported on shapes [#2250](https://github.com/terrastruct/d2/pull/2250)
 - Connections now support `link` [#1955](https://github.com/terrastruct/d2/pull/1955)
 - Vars: vars in markdown blocks are substituted [#2218](https://github.com/terrastruct/d2/pull/2218)
 - Markdown: Github-flavored tables work in `md` blocks [#2221](https://github.com/terrastruct/d2/pull/2221)

d2compiler/compile.go

@@ -341,9 +341,6 @@ func (c *compiler) compileField(obj *d2graph.Object, f *d2ir.Field) {
 			return
 		}
 		c.compileStyle(&obj.Attributes, f.Map())
-		if obj.Style.Animated != nil {
-			c.errorf(obj.Style.Animated.MapKey, `key "animated" can only be applied to edges`)
-		}
 		return
 	}
 

d2compiler/compile_test.go

@@ -1219,7 +1219,6 @@ x: {
 	style.animated: true
 }
 `,
-			expErr: `d2/testdata/d2compiler/TestCompile/shape_edge_style.d2:3:2: key "animated" can only be applied to edges`,
 		},
 		{
 			name: "edge_invalid_style",

d2exporter/export.go

@@ -194,6 +194,9 @@ func toShape(obj *d2graph.Object, g *d2graph.Graph) d2target.Shape {
 	if obj.Tooltip != nil {
 		shape.Tooltip = obj.Tooltip.Value
 	}
+	if obj.Style.Animated != nil {
+		shape.Animated, _ = strconv.ParseBool(obj.Style.Animated.Value)
+	}
 	if obj.Link != nil {
 		shape.Link = obj.Link.Value
 		shape.PrettyLink = toPrettyLink(g, obj.Link.Value)

d2renderers/d2svg/d2svg.go

@@ -975,6 +975,10 @@ func drawShape(writer, appendixWriter io.Writer, diagramHash string, targetShape
 		fmt.Fprint(writer, clipPathForBorderRadius(diagramHash, targetShape))
 	}
 	classStr := ""
+	if targetShape.Animated {
+		// the animated class applies to the whole svg group to include the label, unlike connections
+		targetShape.Classes = append(targetShape.Classes, "animated-shape")
+	}
 	if len(targetShape.Classes) > 0 {
 		classStr = fmt.Sprintf(` class="%s"`, strings.Join(targetShape.Classes, " "))
 	}
@@ -1633,6 +1637,23 @@ func EmbedFonts(buf *bytes.Buffer, diagramHash, source string, fontFamily *d2fon
 `,
 	)
 
+	appendOnTrigger(
+		buf,
+		source,
+		[]string{
+			`animated-shape`,
+		},
+		`
+@keyframes shapeappear {
+    0%, 100% { transform: translateY(0); filter: drop-shadow(0px 0px 0px rgba(0,0,0,0)); }
+    50% { transform: translateY(-4px); filter: drop-shadow(0px 12.6px 25.2px rgba(50,50,93,0.25)) drop-shadow(0px 7.56px 15.12px rgba(0,0,0,0.1)); }
+}
+.animated-shape {
+	animation: shapeappear 1s linear infinite;
+}
+`,
+	)
+
 	appendOnTrigger(
 		buf,
 		source,

d2target/d2target.go

@@ -469,6 +469,7 @@ type Shape struct {
 	FillPattern string `json:"fillPattern,omitempty"`
 	Stroke      string `json:"stroke"`
 
+	Animated     bool `json:"animated"`
 	Shadow       bool `json:"shadow"`
 	ThreeDee     bool `json:"3d"`
 	Multiple     bool `json:"multiple"`