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

fix curved connections issues

Browse source
This commit is contained in:
harryjrk 2023-01-01 11:31:45 +01:00
parent 3deacd238b
commit e3047b6aba
No known key found for this signature in database
GPG key ID: 9924FEEE8B35126B
6 changed files with 216 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
d2renderers/d2svg/d2svg.go
View file

@ -225,18 +225,16 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection) s
} }
case d2target.CfOne, d2target.CfMany, d2target.CfOneRequired, d2target.CfManyRequired: case d2target.CfOne, d2target.CfMany, d2target.CfOneRequired, d2target.CfManyRequired:
attrs := fmt.Sprintf(`class="connection" stroke="%s" stroke-width="%d" fill="white"`, connection.Stroke, connection.StrokeWidth) attrs := fmt.Sprintf(`class="connection" stroke="%s" stroke-width="%d" fill="white"`, connection.Stroke, connection.StrokeWidth)
offset := 4.0 + (float64(connection.StrokeWidth) * 2.0) offset := 4.0 + float64(connection.StrokeWidth*2)
var modifier string var modifier string
if arrowhead == d2target.CfOneRequired || arrowhead == d2target.CfManyRequired { if arrowhead == d2target.CfOneRequired || arrowhead == d2target.CfManyRequired {
modifier = fmt.Sprintf(`<path %s d="M%f,%f %f,%f M%f,%f %f,%f" />`, modifier = fmt.Sprintf(`<path %s d="M%f,%f %f,%f"/>`,
attrs, attrs,
width, height/2.0,
offset/2.0+1.0, height/2.0,
offset, 0., offset, 0.,
offset, height, offset, height,
) )
} else { } else {
modifier = fmt.Sprintf(`<circle %s cx="%f" cy="%f" r="%f" />`, modifier = fmt.Sprintf(`<circle %s cx="%f" cy="%f" r="%f"/>`,
attrs, attrs,
offset/2.0+1.0, height/2.0, offset/2.0+1.0, height/2.0,
offset/2.0, offset/2.0,
@ -246,9 +244,9 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection) s
attrs = fmt.Sprintf(`%s transform="scale(-1) translate(-%f, -%f)"`, attrs, width, height) attrs = fmt.Sprintf(`%s transform="scale(-1) translate(-%f, -%f)"`, attrs, width, height)
} }
if arrowhead == d2target.CfMany || arrowhead == d2target.CfManyRequired { if arrowhead == d2target.CfMany || arrowhead == d2target.CfManyRequired {
path = fmt.Sprintf(`<g %s>%s<path d="M%f,%f %f,%f M%f,%f %f,%f M%f,%f %f,%f" /></g>`, path = fmt.Sprintf(`<g %s>%s<path d="M%f,%f %f,%f M%f,%f %f,%f M%f,%f %f,%f"/></g>`,
attrs, modifier, attrs, modifier,
offset+2.0, height/2.0, width-3.0, height/2.0,
width+offset, height/2.0, width+offset, height/2.0,
offset+2.0, height/2.0, offset+2.0, height/2.0,
width+offset, 0., width+offset, 0.,
@ -256,9 +254,9 @@ func arrowheadMarker(isTarget bool, id string, connection d2target.Connection) s
width+offset, height, width+offset, height,
) )
} else { } else {
path = fmt.Sprintf(`<g %s>%s<path d="M%f,%f %f,%f M%f,%f %f,%f" /></g>`, path = fmt.Sprintf(`<g %s>%s<path d="M%f,%f %f,%f M%f,%f %f,%f"/></g>`,
attrs, modifier, attrs, modifier,
offset+2.0, height/2.0, width-3.0, height/2.0,
width+offset, height/2.0, width+offset, height/2.0,
offset*1.8, 0., offset*1.8, 0.,
offset*1.8, height, offset*1.8, height,

6
e2etests/stable_test.go
View file

@ -1728,6 +1728,8 @@ package.height: 512
name: "crow_foot_arrowhead", name: "crow_foot_arrowhead",
script: ` script: `
a <-> b: { a <-> b: {
style.stroke-width: 3
style.stroke: "#20222a"
source-arrowhead: { source-arrowhead: {
shape: cf-many shape: cf-many
} }
@ -1735,7 +1737,9 @@ a <-> b: {
shape: cf-many shape: cf-many
} }
} }
c <--> d: { c <--> d <-> f: {
style.stroke-width: 1
style.stroke: "orange"
source-arrowhead: { source-arrowhead: {
shape: cf-many-required shape: cf-many-required
} }

156
e2etests/testdata/stable/crow_foot_arrowhead/dagre/board.exp.json generated vendored
View file

@ -162,6 +162,46 @@
"zIndex": 0, "zIndex": 0,
"level": 1 "level": 1
}, },
{
"id": "f",
"type": "",
"pos": {
"x": 348,
"y": 452
},
"width": 111,
"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": "f",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 11,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{ {
"id": "g", "id": "g",
"type": "", "type": "",
@ -246,8 +286,8 @@
"id": "e", "id": "e",
"type": "", "type": "",
"pos": { "pos": {
"x": 521, "x": 520,
"y": 0 "y": 226
}, },
"width": 113, "width": 113,
"height": 126, "height": 126,
@ -281,46 +321,6 @@
"labelPosition": "INSIDE_MIDDLE_CENTER", "labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0, "zIndex": 0,
"level": 1 "level": 1
},
{
"id": "f",
"type": "",
"pos": {
"x": 522,
"y": 226
},
"width": 111,
"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": "f",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 11,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
} }
], ],
"connections": [ "connections": [
@ -334,8 +334,8 @@
"dstLabel": "", "dstLabel": "",
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 3,
"stroke": "#0D32B2", "stroke": "#20222a",
"label": "", "label": "",
"fontSize": 16, "fontSize": 16,
"fontFamily": "DEFAULT", "fontFamily": "DEFAULT",
@ -382,8 +382,8 @@
"dstLabel": "", "dstLabel": "",
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 1,
"stroke": "#0D32B2", "stroke": "orange",
"label": "", "label": "",
"fontSize": 16, "fontSize": 16,
"fontFamily": "DEFAULT", "fontFamily": "DEFAULT",
@ -420,6 +420,54 @@
"icon": null, "icon": null,
"zIndex": 0 "zIndex": 0
}, },
{
"id": "(d <-> f)[0]",
"src": "d",
"srcArrow": "cf-many-required",
"srcLabel": "",
"dst": "f",
"dstArrow": "cf-many-required",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 1,
"stroke": "orange",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 230,
"y": 352
},
{
"x": 230,
"y": 392
},
{
"x": 253.55,
"y": 417.36017316017313
},
{
"x": 347.75,
"y": 478.8008658008658
}
],
"isCurve": true,
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{ {
"id": "(g <-> h)[0]", "id": "(g <-> h)[0]",
"src": "g", "src": "g",
@ -494,20 +542,20 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 577, "x": 576.5,
"y": 126 "y": 352
}, },
{ {
"x": 577, "x": 576.5,
"y": 166 "y": 392
}, },
{ {
"x": 577, "x": 552.9,
"y": 186 "y": 417.4
}, },
{ {
"x": 577, "x": 458.5,
"y": 226 "y": 479
} }
], ],
"isCurve": true, "isCurve": true,

6
e2etests/testdata/stable/crow_foot_arrowhead/dagre/sketch.exp.svg vendored
View file

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

Before

Width:  |  Height:  |  Size: 331 KiB

After

Width:  |  Height:  |  Size: 331 KiB

145
e2etests/testdata/stable/crow_foot_arrowhead/elk/board.exp.json generated vendored
View file

@ -162,6 +162,46 @@
"zIndex": 0, "zIndex": 0,
"level": 1 "level": 1
}, },
{
"id": "f",
"type": "",
"pos": {
"x": 165,
"y": 464
},
"width": 111,
"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": "f",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 11,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{ {
"id": "g", "id": "g",
"type": "", "type": "",
@ -247,7 +287,7 @@
"type": "", "type": "",
"pos": { "pos": {
"x": 412, "x": 412,
"y": 12 "y": 238
}, },
"width": 113, "width": 113,
"height": 126, "height": 126,
@ -281,46 +321,6 @@
"labelPosition": "INSIDE_MIDDLE_CENTER", "labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0, "zIndex": 0,
"level": 1 "level": 1
},
{
"id": "f",
"type": "",
"pos": {
"x": 413,
"y": 238
},
"width": 111,
"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": "f",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 11,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
} }
], ],
"connections": [ "connections": [
@ -334,8 +334,8 @@
"dstLabel": "", "dstLabel": "",
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 3,
"stroke": "#0D32B2", "stroke": "#20222a",
"label": "", "label": "",
"fontSize": 16, "fontSize": 16,
"fontFamily": "DEFAULT", "fontFamily": "DEFAULT",
@ -373,8 +373,8 @@
"dstLabel": "", "dstLabel": "",
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 1,
"stroke": "#0D32B2", "stroke": "orange",
"label": "", "label": "",
"fontSize": 16, "fontSize": 16,
"fontFamily": "DEFAULT", "fontFamily": "DEFAULT",
@ -402,6 +402,45 @@
"icon": null, "icon": null,
"zIndex": 0 "zIndex": 0
}, },
{
"id": "(d <-> f)[0]",
"src": "d",
"srcArrow": "cf-many-required",
"srcLabel": "",
"dst": "f",
"dstArrow": "cf-many-required",
"dstLabel": "",
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 1,
"stroke": "orange",
"label": "",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#676C7E",
"italic": true,
"bold": false,
"underline": false,
"labelWidth": 0,
"labelHeight": 0,
"labelPosition": "",
"labelPercentage": 0,
"route": [
{
"x": 202,
"y": 364
},
{
"x": 202,
"y": 464
}
],
"animated": false,
"tooltip": "",
"icon": null,
"zIndex": 0
},
{ {
"id": "(g <-> h)[0]", "id": "(g <-> h)[0]",
"src": "g", "src": "g",
@ -467,12 +506,20 @@
"labelPercentage": 0, "labelPercentage": 0,
"route": [ "route": [
{ {
"x": 469, "x": 468.5,
"y": 138 "y": 364
}, },
{ {
"x": 469, "x": 468.5,
"y": 238 "y": 414
},
{
"x": 239,
"y": 414
},
{
"x": 239,
"y": 464
} }
], ],
"animated": false, "animated": false,

6
e2etests/testdata/stable/crow_foot_arrowhead/elk/sketch.exp.svg vendored
View file

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

Before

Width:  |  Height:  |  Size: 331 KiB

After

Width:  |  Height:  |  Size: 331 KiB