Merge pull request #652 from alixander/animate

implement `animated` keyword
This commit is contained in:
Alexander Wang 2023-01-12 11:26:16 -08:00 committed by GitHub
commit d736ce287d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 2113 additions and 86 deletions

View file

@ -1,5 +1,7 @@
#### Features 🚀
- `animated` keyword implemented for connections. [#652](https://github.com/terrastruct/d2/pull/652)
#### Improvements 🧹
- ELK layouts tuned to have better defaults. [#627](https://github.com/terrastruct/d2/pull/627)

View file

@ -63,26 +63,6 @@ func DefineFillPattern() string {
</defs>`, fillPattern)
}
func shapeStyle(shape d2target.Shape) string {
out := ""
if shape.Type == d2target.ShapeSQLTable || shape.Type == d2target.ShapeClass {
out += fmt.Sprintf(`fill:%s;`, shape.Stroke)
out += fmt.Sprintf(`stroke:%s;`, shape.Fill)
} else {
out += fmt.Sprintf(`fill:%s;`, shape.Fill)
out += fmt.Sprintf(`stroke:%s;`, shape.Stroke)
}
out += fmt.Sprintf(`opacity:%f;`, shape.Opacity)
out += fmt.Sprintf(`stroke-width:%d;`, shape.StrokeWidth)
if shape.StrokeDash != 0 {
dashSize, gapSize := svg.GetStrokeDashAttributes(float64(shape.StrokeWidth), shape.StrokeDash)
out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
}
return out
}
func Rect(r *Runner, shape d2target.Shape) (string, error) {
js := fmt.Sprintf(`node = rc.rectangle(0, 0, %d, %d, {
fill: "%s",
@ -98,7 +78,7 @@ func Rect(r *Runner, shape d2target.Shape) (string, error) {
for _, p := range paths {
output += fmt.Sprintf(
`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
shape.Pos.X, shape.Pos.Y, p, shapeStyle(shape),
shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
)
}
output += fmt.Sprintf(
@ -123,7 +103,7 @@ func Oval(r *Runner, shape d2target.Shape) (string, error) {
for _, p := range paths {
output += fmt.Sprintf(
`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
shape.Pos.X, shape.Pos.Y, p, shapeStyle(shape),
shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
)
}
output += fmt.Sprintf(
@ -150,7 +130,7 @@ func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) {
for _, p := range sketchPaths {
output += fmt.Sprintf(
`<path class="shape" d="%s" style="%s" />`,
p, shapeStyle(shape),
p, shape.CSSStyle(),
)
}
for _, p := range sketchPaths {
@ -163,20 +143,6 @@ func Paths(r *Runner, shape d2target.Shape, paths []string) (string, error) {
return output, nil
}
func connectionStyle(connection d2target.Connection) string {
out := ""
out += fmt.Sprintf(`stroke:%s;`, connection.Stroke)
out += fmt.Sprintf(`opacity:%f;`, connection.Opacity)
out += fmt.Sprintf(`stroke-width:%d;`, connection.StrokeWidth)
if connection.StrokeDash != 0 {
dashSize, gapSize := svg.GetStrokeDashAttributes(float64(connection.StrokeWidth), connection.StrokeDash)
out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
}
return out
}
func Connection(r *Runner, connection d2target.Connection, path, attrs string) (string, error) {
roughness := 1.0
js := fmt.Sprintf(`node = rc.path("%s", {roughness: %f, seed: 1});`, path, roughness)
@ -185,10 +151,14 @@ func Connection(r *Runner, connection d2target.Connection, path, attrs string) (
return "", err
}
output := ""
animatedClass := ""
if connection.Animated {
animatedClass = " animated-connection"
}
for _, p := range paths {
output += fmt.Sprintf(
`<path class="connection" fill="none" d="%s" style="%s" %s/>`,
p, connectionStyle(connection), attrs,
`<path class="connection%s" fill="none" d="%s" style="%s" %s/>`,
animatedClass, p, connection.CSSStyle(), attrs,
)
}
return output, nil
@ -210,7 +180,7 @@ func Table(r *Runner, shape d2target.Shape) (string, error) {
for _, p := range paths {
output += fmt.Sprintf(
`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
shape.Pos.X, shape.Pos.Y, p, shapeStyle(shape),
shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
)
}
@ -338,7 +308,7 @@ func Class(r *Runner, shape d2target.Shape) (string, error) {
for _, p := range paths {
output += fmt.Sprintf(
`<path class="shape" transform="translate(%d %d)" d="%s" style="%s" />`,
shape.Pos.X, shape.Pos.Y, p, shapeStyle(shape),
shape.Pos.X, shape.Pos.Y, p, shape.CSSStyle(),
)
}

View file

@ -39,6 +39,11 @@ func TestSketch(t *testing.T) {
script: `winter.snow -> summer.sun
`,
},
{
name: "animated",
script: `winter.snow -> summer.sun -> trees -> winter.snow: { style.animated: true }
`,
},
{
name: "connection label",
script: `a -> b: hello

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 255 KiB

View file

@ -80,7 +80,7 @@ func classRow(shape d2target.Shape, box *geo.Box, prefix, nameText, typeText str
func drawClass(writer io.Writer, targetShape d2target.Shape) {
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, shapeStyle(targetShape))
targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, targetShape.CSSStyle())
box := geo.NewBox(
geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y)),

View file

@ -461,8 +461,12 @@ func drawConnection(writer io.Writer, labelMaskID string, connection d2target.Co
}
fmt.Fprintf(writer, out)
} else {
fmt.Fprintf(writer, `<path d="%s" class="connection" style="fill:none;%s" %s/>`,
path, connectionStyle(connection), attrs)
animatedClass := ""
if connection.Animated {
animatedClass = " animated-connection"
}
fmt.Fprintf(writer, `<path d="%s" class="connection%s" style="fill:none;%s" %s/>`,
path, animatedClass, connection.CSSStyle(), attrs)
}
if connection.Label != "" {
@ -582,7 +586,7 @@ func render3dRect(targetShape d2target.Shape) string {
)
border := targetShape
border.Fill = "none"
borderStyle := shapeStyle(border)
borderStyle := border.CSSStyle()
renderedBorder := fmt.Sprintf(`<path d="%s" style="%s"/>`,
strings.Join(borderSegments, " "), borderStyle)
@ -603,7 +607,7 @@ func render3dRect(targetShape d2target.Shape) string {
mainShape := targetShape
mainShape.Stroke = "none"
mainRect := fmt.Sprintf(`<rect x="%d" y="%d" width="%d" height="%d" style="%s" mask="url(#%s)"/>`,
targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, shapeStyle(mainShape), maskID,
targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, mainShape.CSSStyle(), maskID,
)
// render the side shapes in the darkened color without stroke and the border mask
@ -628,7 +632,7 @@ func render3dRect(targetShape d2target.Shape) string {
sideShape.Fill = darkerColor
sideShape.Stroke = "none"
renderedSides := fmt.Sprintf(`<polygon points="%s" style="%s" mask="url(#%s)"/>`,
strings.Join(sidePoints, " "), shapeStyle(sideShape), maskID)
strings.Join(sidePoints, " "), sideShape.CSSStyle(), maskID)
return borderMask + mainRect + renderedSides + renderedBorder
}
@ -643,7 +647,7 @@ func drawShape(writer io.Writer, targetShape d2target.Shape, sketchRunner *d2ske
tl := geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y))
width := float64(targetShape.Width)
height := float64(targetShape.Height)
style := shapeStyle(targetShape)
style := targetShape.CSSStyle()
shapeType := d2target.DSL_SHAPE_TO_SHAPE_TYPE[targetShape.Type]
s := shape.NewShape(shapeType, geo.NewBox(tl, width, height))
@ -939,43 +943,6 @@ func RenderText(text string, x, height float64) string {
return strings.Join(rendered, "")
}
func shapeStyle(shape d2target.Shape) string {
out := ""
if shape.Type == d2target.ShapeSQLTable || shape.Type == d2target.ShapeClass {
// Fill is used for header fill in these types
// This fill property is just background of rows
out += fmt.Sprintf(`fill:%s;`, shape.Stroke)
// Stroke (border) of these shapes should match the header fill
out += fmt.Sprintf(`stroke:%s;`, shape.Fill)
} else {
out += fmt.Sprintf(`fill:%s;`, shape.Fill)
out += fmt.Sprintf(`stroke:%s;`, shape.Stroke)
}
out += fmt.Sprintf(`opacity:%f;`, shape.Opacity)
out += fmt.Sprintf(`stroke-width:%d;`, shape.StrokeWidth)
if shape.StrokeDash != 0 {
dashSize, gapSize := svg.GetStrokeDashAttributes(float64(shape.StrokeWidth), shape.StrokeDash)
out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
}
return out
}
func connectionStyle(connection d2target.Connection) string {
out := ""
out += fmt.Sprintf(`stroke:%s;`, connection.Stroke)
out += fmt.Sprintf(`opacity:%f;`, connection.Opacity)
out += fmt.Sprintf(`stroke-width:%d;`, connection.StrokeWidth)
if connection.StrokeDash != 0 {
dashSize, gapSize := svg.GetStrokeDashAttributes(float64(connection.StrokeWidth), connection.StrokeDash)
out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
}
return out
}
func embedFonts(buf *bytes.Buffer, fontFamily *d2fonts.FontFamily) {
content := buf.String()
buf.WriteString(`<style type="text/css"><![CDATA[`)
@ -1015,6 +982,23 @@ func embedFonts(buf *bytes.Buffer, fontFamily *d2fonts.FontFamily) {
}
}
triggers = []string{
`animated-connection`,
}
for _, t := range triggers {
if strings.Contains(content, t) {
buf.WriteString(`
@keyframes dashdraw {
from {
stroke-dashoffset: 0;
}
}
`)
break
}
}
triggers = []string{
`appendix-icon`,
}

View file

@ -81,7 +81,7 @@ func tableRow(shape d2target.Shape, box *geo.Box, nameText, typeText, constraint
func drawTable(writer io.Writer, targetShape d2target.Shape) {
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, shapeStyle(targetShape))
targetShape.Pos.X, targetShape.Pos.Y, targetShape.Width, targetShape.Height, targetShape.CSSStyle())
box := geo.NewBox(
geo.NewPoint(float64(targetShape.Pos.X), float64(targetShape.Pos.Y)),

View file

@ -15,6 +15,7 @@ import (
"oss.terrastruct.com/d2/lib/geo"
"oss.terrastruct.com/d2/lib/label"
"oss.terrastruct.com/d2/lib/shape"
"oss.terrastruct.com/d2/lib/svg"
)
const (
@ -159,6 +160,29 @@ type Shape struct {
NeutralAccentColor string `json:"neutralAccentColor,omitempty"`
}
func (s Shape) CSSStyle() string {
out := ""
if s.Type == ShapeSQLTable || s.Type == ShapeClass {
// Fill is used for header fill in these types
// This fill property is just background of rows
out += fmt.Sprintf(`fill:%s;`, s.Stroke)
// Stroke (border) of these shapes should match the header fill
out += fmt.Sprintf(`stroke:%s;`, s.Fill)
} else {
out += fmt.Sprintf(`fill:%s;`, s.Fill)
out += fmt.Sprintf(`stroke:%s;`, s.Stroke)
}
out += fmt.Sprintf(`opacity:%f;`, s.Opacity)
out += fmt.Sprintf(`stroke-width:%d;`, s.StrokeWidth)
if s.StrokeDash != 0 {
dashSize, gapSize := svg.GetStrokeDashAttributes(float64(s.StrokeWidth), s.StrokeDash)
out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
}
return out
}
func (s *Shape) SetType(t string) {
// Some types are synonyms of other types, but with hinting for autolayout
// They should only have one representation in the final export
@ -251,6 +275,32 @@ func BaseConnection() *Connection {
}
}
func (c Connection) CSSStyle() string {
out := ""
out += fmt.Sprintf(`stroke:%s;`, c.Stroke)
out += fmt.Sprintf(`opacity:%f;`, c.Opacity)
out += fmt.Sprintf(`stroke-width:%d;`, c.StrokeWidth)
strokeDash := c.StrokeDash
if strokeDash == 0 && c.Animated {
strokeDash = 5
}
if strokeDash != 0 {
dashSize, gapSize := svg.GetStrokeDashAttributes(float64(c.StrokeWidth), strokeDash)
out += fmt.Sprintf(`stroke-dasharray:%f,%f;`, dashSize, gapSize)
if c.Animated {
dashOffset := -10
if c.SrcArrow != NoArrowhead && c.DstArrow == NoArrowhead {
dashOffset = 10
}
out += fmt.Sprintf(`stroke-dashoffset:%f;`, float64(dashOffset)*(dashSize+gapSize))
out += fmt.Sprintf(`animation: dashdraw %fs linear infinite;`, gapSize*0.5)
}
}
return out
}
func (c *Connection) GetLabelTopLeft() *geo.Point {
return label.Position(c.LabelPosition).GetPointOnRoute(
c.Route,

View file

@ -1764,6 +1764,39 @@ e <--> f: {
}
}`,
},
{
name: "animated",
script: `
your love life will be -> happy: { style.animated: true }
your love life will be -> harmonious: { style.animated: true }
boredom <- immortality: { style.animated: true }
Friday <-> Monday: { style.animated: true }
Insomnia -- Sleep: { style.animated: true }
Insomnia -- Wake: {
style: {
animated: true
stroke-width: 2
}
}
Insomnia -- Dream: {
style: {
animated: true
stroke-width: 8
}
}
Listen <-> Talk: {
style.animated: true
source-arrowhead.shape: cf-one
target-arrowhead.shape: diamond
label: hear
}
`,
},
}
runa(t, tcs)

912
e2etests/testdata/stable/animated/dagre/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,912 @@
{
"name": "",
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "your love life will be",
"type": "",
"pos": {
"x": 58,
"y": 0
},
"width": 247,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "your love life will be",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 147,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "happy",
"type": "",
"pos": {
"x": 0,
"y": 247
},
"width": 149,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "happy",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 49,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "harmonious",
"type": "",
"pos": {
"x": 209,
"y": 247
},
"width": 190,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "harmonious",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 90,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "boredom",
"type": "",
"pos": {
"x": 471,
"y": 247
},
"width": 168,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "boredom",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 68,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "immortality",
"type": "",
"pos": {
"x": 460,
"y": 0
},
"width": 191,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "immortality",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 91,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Friday",
"type": "",
"pos": {
"x": 711,
"y": 0
},
"width": 150,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Friday",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 50,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Monday",
"type": "",
"pos": {
"x": 705,
"y": 247
},
"width": 161,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Monday",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 61,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Insomnia",
"type": "",
"pos": {
"x": 1126,
"y": 0
},
"width": 170,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Insomnia",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 70,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Sleep",
"type": "",
"pos": {
"x": 930,
"y": 247
},
"width": 145,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Sleep",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 45,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Wake",
"type": "",
"pos": {
"x": 1135,
"y": 247
},
"width": 144,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Wake",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 44,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Dream",
"type": "",
"pos": {
"x": 1339,
"y": 247
},
"width": 151,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Dream",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 51,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Listen",
"type": "",
"pos": {
"x": 1552,
"y": 0
},
"width": 148,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Listen",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 48,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Talk",
"type": "",
"pos": {
"x": 1558,
"y": 247
},
"width": 136,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Talk",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 36,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [
{
"id": "(your love life will be -> happy)[0]",
"src": "your love life will be",
"srcArrow": "none",
"srcLabel": "",
"dst": "happy",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 126.917004048583,
"y": 126
},
{
"x": 84.9834008097166,
"y": 174.4
},
{
"x": 74.5,
"y": 198.7
},
{
"x": 74.5,
"y": 247.5
}
],
"isCurve": true,
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(your love life will be -> harmonious)[0]",
"src": "your love life will be",
"srcArrow": "none",
"srcLabel": "",
"dst": "harmonious",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 243.98987854251013,
"y": 126
},
{
"x": 291.99797570850205,
"y": 174.4
},
{
"x": 304,
"y": 198.7
},
{
"x": 304,
"y": 247.5
}
],
"isCurve": true,
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(boredom <- immortality)[0]",
"src": "boredom",
"srcArrow": "triangle",
"srcLabel": "",
"dst": "immortality",
"dstArrow": "none",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 555.25,
"y": 247
},
{
"x": 555.25,
"y": 198.6
},
{
"x": 555.25,
"y": 174.3
},
{
"x": 555.25,
"y": 125.5
}
],
"isCurve": true,
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(Friday <-> Monday)[0]",
"src": "Friday",
"srcArrow": "triangle",
"srcLabel": "",
"dst": "Monday",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 785.75,
"y": 126
},
{
"x": 785.75,
"y": 174.4
},
{
"x": 785.75,
"y": 198.7
},
{
"x": 785.75,
"y": 247.5
}
],
"isCurve": true,
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(Insomnia -- Sleep)[0]",
"src": "Insomnia",
"srcArrow": "none",
"srcLabel": "",
"dst": "Sleep",
"dstArrow": "none",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 1126,
"y": 113.2874251497006
},
{
"x": 1027,
"y": 171.8574850299401
},
{
"x": 1002.25,
"y": 198.7
},
{
"x": 1002.25,
"y": 247.5
}
],
"isCurve": true,
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(Insomnia -- Wake)[0]",
"src": "Insomnia",
"srcArrow": "none",
"srcLabel": "",
"dst": "Wake",
"dstArrow": "none",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 1208.831983805668,
"y": 126
},
{
"x": 1207.1663967611337,
"y": 174.4
},
{
"x": 1206.75,
"y": 198.7
},
{
"x": 1206.75,
"y": 247.5
}
],
"isCurve": true,
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(Insomnia -- Dream)[0]",
"src": "Insomnia",
"srcArrow": "none",
"srcLabel": "",
"dst": "Dream",
"dstArrow": "none",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 8,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 1296,
"y": 114.64821648216483
},
{
"x": 1390.6,
"y": 172.12964329643296
},
{
"x": 1414.25,
"y": 198.7
},
{
"x": 1414.25,
"y": 247.5
}
],
"isCurve": true,
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(Listen <-> Talk)[0]",
"src": "Listen",
"srcArrow": "cf-one",
"srcLabel": "",
"dst": "Talk",
"dstArrow": "diamond",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "hear",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 32,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 1625.5,
"y": 126
},
{
"x": 1625.5,
"y": 174.4
},
{
"x": 1625.5,
"y": 198.7
},
{
"x": 1625.5,
"y": 247.5
}
],
"isCurve": true,
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 476 KiB

864
e2etests/testdata/stable/animated/elk/board.exp.json generated vendored Normal file
View file

@ -0,0 +1,864 @@
{
"name": "",
"fontFamily": "SourceSansPro",
"shapes": [
{
"id": "your love life will be",
"type": "",
"pos": {
"x": 111,
"y": 12
},
"width": 247,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "your love life will be",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 147,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "happy",
"type": "",
"pos": {
"x": 12,
"y": 238
},
"width": 149,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "happy",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 49,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "harmonious",
"type": "",
"pos": {
"x": 181,
"y": 238
},
"width": 190,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "harmonious",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 90,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "boredom",
"type": "",
"pos": {
"x": 402,
"y": 12
},
"width": 168,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "boredom",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 68,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "immortality",
"type": "",
"pos": {
"x": 391,
"y": 238
},
"width": 191,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "immortality",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 91,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Friday",
"type": "",
"pos": {
"x": 607,
"y": 12
},
"width": 150,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Friday",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 50,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Monday",
"type": "",
"pos": {
"x": 602,
"y": 238
},
"width": 161,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Monday",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 61,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Insomnia",
"type": "",
"pos": {
"x": 935,
"y": 12
},
"width": 170,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Insomnia",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 70,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Sleep",
"type": "",
"pos": {
"x": 783,
"y": 238
},
"width": 145,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Sleep",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 45,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Wake",
"type": "",
"pos": {
"x": 948,
"y": 238
},
"width": 144,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Wake",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 44,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Dream",
"type": "",
"pos": {
"x": 1112,
"y": 238
},
"width": 151,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Dream",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 51,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Listen",
"type": "",
"pos": {
"x": 1225,
"y": 12
},
"width": 148,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Listen",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 48,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "Talk",
"type": "",
"pos": {
"x": 1231,
"y": 464
},
"width": 136,
"height": 126,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#F7F8FE",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "Talk",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 36,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
}
],
"connections": [
{
"id": "(your love life will be -> happy)[0]",
"src": "your love life will be",
"srcArrow": "none",
"srcLabel": "",
"dst": "happy",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 193.66666666666652,
"y": 138
},
{
"x": 193.66666666666652,
"y": 188
},
{
"x": 86.5,
"y": 188
},
{
"x": 86.5,
"y": 238
}
],
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(your love life will be -> harmonious)[0]",
"src": "your love life will be",
"srcArrow": "none",
"srcLabel": "",
"dst": "harmonious",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 275.9999999999999,
"y": 138
},
{
"x": 276,
"y": 238
}
],
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(boredom <- immortality)[0]",
"src": "boredom",
"srcArrow": "triangle",
"srcLabel": "",
"dst": "immortality",
"dstArrow": "none",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 486.5,
"y": 138
},
{
"x": 486.5,
"y": 238
}
],
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(Friday <-> Monday)[0]",
"src": "Friday",
"srcArrow": "triangle",
"srcLabel": "",
"dst": "Monday",
"dstArrow": "triangle",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 682.5,
"y": 138
},
{
"x": 682.5,
"y": 238
}
],
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(Insomnia -- Sleep)[0]",
"src": "Insomnia",
"srcArrow": "none",
"srcLabel": "",
"dst": "Sleep",
"dstArrow": "none",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 977.5,
"y": 138
},
{
"x": 977.5,
"y": 188
},
{
"x": 855.5,
"y": 188
},
{
"x": 855.5,
"y": 238
}
],
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(Insomnia -- Wake)[0]",
"src": "Insomnia",
"srcArrow": "none",
"srcLabel": "",
"dst": "Wake",
"dstArrow": "none",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 1020,
"y": 138
},
{
"x": 1020,
"y": 238
}
],
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(Insomnia -- Dream)[0]",
"src": "Insomnia",
"srcArrow": "none",
"srcLabel": "",
"dst": "Dream",
"dstArrow": "none",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 8,
"stroke": "#0D32B2",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 1062.5,
"y": 138
},
{
"x": 1062.5,
"y": 188
},
{
"x": 1187.5,
"y": 188
},
{
"x": 1187.5,
"y": 238
}
],
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{
"id": "(Listen <-> Talk)[0]",
"src": "Listen",
"srcArrow": "cf-one",
"srcLabel": "",
"dst": "Talk",
"dstArrow": "diamond",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"stroke": "#0D32B2",
"label": "hear",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 32,
"labelHeight": 21,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"labelPercentage": 0,
"route": [
{
"x": 1299,
"y": 138
},
{
"x": 1299,
"y": 464
}
],
"animated": true,
"tooltip": "",
"icon": null,
"zIndex": 0
}
]
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 476 KiB