luciano/d2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

allow animated: true for shape

Browse source
This commit is contained in:
Alexander Wang 2024-12-14 19:35:18 -07:00
parent 0dbd9818c6
commit 74f708a2ea
No known key found for this signature in database
GPG key ID: BE3937D0D52D8927
9 changed files with 2436 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
d2compiler/compile.go
View file

@ -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
}

3
d2exporter/export.go
View file

@ -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)

21
d2renderers/d2svg/d2svg.go
View file

@ -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,

1
d2target/d2target.go
View file

@ -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"`

1115
e2etests/testdata/txtar/shape-animate/dagre/board.exp.json generated vendored Normal file
View file

File diff suppressed because it is too large Load diff

168
e2etests/testdata/txtar/shape-animate/dagre/sketch.exp.svg vendored Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 35 KiB

906
e2etests/testdata/txtar/shape-animate/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,906 @@
{
"name": "",
"config": {
"sketch": null,
"themeID": 300,
"darkThemeID": null,
"pad": null,
"center": null,
"layoutEngine": "elk"
},
"isFolderOnly": false,
"fontFamily": "SourceCodePro",
"shapes": [
{
"id": "network",
"type": "rectangle",
"pos": {
"x": 12,
"y": 311
},
"width": 621,
"height": 922,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B4",
"fillPattern": "dots",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": true,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "NETWORK",
"fontSize": 28,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 116,
"labelHeight": 36,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "network.cell tower",
"type": "rectangle",
"pos": {
"x": 62,
"y": 361
},
"width": 271,
"height": 423,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"fillPattern": "dots",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "CELL TOWER",
"fontSize": 24,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 143,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "network.cell tower.satellites",
"type": "stored_data",
"pos": {
"x": 112,
"y": 421
},
"width": 161,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "AA5",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": true,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "SATELLITES",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 96,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 3
},
{
"id": "network.cell tower.transmitter",
"type": "rectangle",
"pos": {
"x": 122,
"y": 668
},
"width": 151,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "TRANSMITTER",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 106,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 3
},
{
"id": "network.online portal",
"type": "rectangle",
"pos": {
"x": 353,
"y": 366
},
"width": 230,
"height": 169,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"fillPattern": "dots",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "ONLINE PORTAL",
"fontSize": 24,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 185,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "network.online portal.ui",
"type": "hexagon",
"pos": {
"x": 428,
"y": 416
},
"width": 80,
"height": 69,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "N5",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "UI",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 18,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 3
},
{
"id": "network.data processor",
"type": "rectangle",
"pos": {
"x": 75,
"y": 955
},
"width": 245,
"height": 228,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B5",
"fillPattern": "dots",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "DATA PROCESSOR",
"fontSize": 24,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 200,
"labelHeight": 31,
"labelPosition": "INSIDE_TOP_CENTER",
"zIndex": 0,
"level": 2
},
{
"id": "network.data processor.storage",
"type": "cylinder",
"pos": {
"x": 136,
"y": 1015
},
"width": 112,
"height": 118,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "AA5",
"stroke": "B1",
"animated": true,
"shadow": false,
"3d": false,
"multiple": true,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "STORAGE",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 67,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 3
},
{
"id": "user",
"type": "person",
"pos": {
"x": 218,
"y": 12
},
"width": 130,
"height": 87,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B3",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "USER",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 38,
"labelHeight": 21,
"labelPosition": "OUTSIDE_BOTTOM_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "api server",
"type": "rectangle",
"pos": {
"x": 341,
"y": 1388
},
"width": 142,
"height": 66,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "B6",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "API SERVER",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 97,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "logs",
"type": "page",
"pos": {
"x": 366,
"y": 1625
},
"width": 82,
"height": 87,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "AB4",
"stroke": "B1",
"animated": false,
"shadow": false,
"3d": false,
"multiple": true,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "LOGS",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N1",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 37,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [
{
"id": "network.cell tower.(satellites -> transmitter)[0]",
"src": "network.cell tower.satellites",
"srcArrow": "none",
"dst": "network.cell tower.transmitter",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"label": "SEND",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 38,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 148,
"y": 487
},
{
"x": 148.5,
"y": 668
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "network.cell tower.(satellites -> transmitter)[1]",
"src": "network.cell tower.satellites",
"srcArrow": "none",
"dst": "network.cell tower.transmitter",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"label": "SEND",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 38,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 197,
"y": 487
},
{
"x": 198,
"y": 668
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "network.cell tower.(satellites -> transmitter)[2]",
"src": "network.cell tower.satellites",
"srcArrow": "none",
"dst": "network.cell tower.transmitter",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"label": "SEND",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 38,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 246,
"y": 487
},
{
"x": 246.5,
"y": 668
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "network.(cell tower.transmitter -> data processor.storage)[0]",
"src": "network.cell tower.transmitter",
"srcArrow": "none",
"dst": "network.data processor.storage",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"label": "PHONE LOGS",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 96,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 197.5,
"y": 734
},
{
"x": 198,
"y": 1005
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(user -> network.cell tower)[0]",
"src": "user",
"srcArrow": "none",
"dst": "network.cell tower",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"label": "MAKE CALL",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 86,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 261.6659851074219,
"y": 125
},
{
"x": 261.6659851074219,
"y": 165
},
{
"x": 117.91600036621094,
"y": 165
},
{
"x": 117.91600036621094,
"y": 361
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(user -> network.online portal.ui)[0]",
"src": "user",
"srcArrow": "none",
"dst": "network.online portal.ui",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 3,
"strokeWidth": 2,
"stroke": "B2",
"label": "ACCESS",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 58,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 305,
"y": 125
},
{
"x": 305,
"y": 165
},
{
"x": 448.75,
"y": 165
},
{
"x": 449,
"y": 416
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(api server -> network.online portal.ui)[0]",
"src": "api server",
"srcArrow": "none",
"dst": "network.online portal.ui",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"label": "DISPLAY",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 69,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 435.6659851074219,
"y": 1388
},
{
"x": 435.6659851074219,
"y": 1348
},
{
"x": 687.5,
"y": 1348
},
{
"x": 687.5,
"y": 266
},
{
"x": 481.3330078125,
"y": 266
},
{
"x": 481,
"y": 416
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(api server -> logs)[0]",
"src": "api server",
"srcArrow": "none",
"dst": "logs",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"label": "PERSIST",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 68,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 412,
"y": 1454
},
{
"x": 412,
"y": 1615
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(network.data processor -> api server)[0]",
"src": "network.data processor",
"srcArrow": "none",
"dst": "api server",
"dstArrow": "triangle",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "B1",
"label": "",
"fontSize": 16,
"fontFamily": "mono",
"language": "",
"color": "N2",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"link": "",
"route": [
{
"x": 136.5,
"y": 1183
},
{
"x": 136.5,
"y": 1348
},
{
"x": 388.3330078125,
"y": 1348
},
{
"x": 388.3330078125,
"y": 1388
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
}
],
"root": {
"id": "",
"type": "",
"pos": {
"x": 0,
"y": 0
},
"width": 0,
"height": 0,
"opacity": 0,
"strokeDash": 0,
"strokeWidth": 0,
"borderRadius": 0,
"fill": "N7",
"stroke": "",
"animated": false,
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "",
"fontSize": 0,
"fontFamily": "",
"language": "",
"color": "",
"italic": false,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"zIndex": 0,
"level": 0
}
}

168
e2etests/testdata/txtar/shape-animate/elk/sketch.exp.svg vendored Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 34 KiB

54
e2etests/txtar.txt
View file

@ -684,3 +684,57 @@ layers: {
d
}
}
-- shape-animate --
vars: {
d2-config: {
layout-engine: elk
# Terminal theme code
theme-id: 300
}
}
network: {
cell tower: {
satellites: {
shape: stored_data
style.multiple: true
}
transmitter
satellites -> transmitter: send
satellites -> transmitter: send
satellites -> transmitter: send
}
online portal: {
ui: {shape: hexagon}
}
data processor: {
storage: {
style.animated: true
shape: cylinder
style.multiple: true
}
}
cell tower.transmitter -> data processor.storage: phone logs
}
user: {
shape: person
width: 130
}
user -> network.cell tower: make call
user -> network.online portal.ui: access {
style.stroke-dash: 3
}
api server -> network.online portal.ui: display
api server -> logs: persist
logs: {shape: page; style.multiple: true}
network.data processor -> api server