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

also limit person AR with width/height attributes unless both are entered

Browse source
This commit is contained in:
Gavin Nishizawa 2023-01-31 15:58:06 -08:00
parent 92629a6c3b
commit 57fa903fe6
No known key found for this signature in database
GPG key ID: AE3B177777CE55CD
8 changed files with 457 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
d2graph/d2graph.go
View file

@ -1187,6 +1187,10 @@ func (g *Graph) SetDimensions(mtexts []*d2target.MText, ruler *textmeasure.Ruler
sideLength := math.Max(obj.Width, obj.Height) sideLength := math.Max(obj.Width, obj.Height)
obj.Width = sideLength obj.Width = sideLength
obj.Height = sideLength obj.Height = sideLength
} else if desiredHeight == 0 || desiredWidth == 0 {
if s.GetType() == shape.PERSON_TYPE {
obj.Width, obj.Height = shape.LimitAR(obj.Width, obj.Height, shape.PERSON_AR_LIMIT)
}
} }
} }
for _, edge := range g.Edges { for _, edge := range g.Edges {

15
e2etests/stable_test.go
View file

@ -1895,6 +1895,21 @@ d: --------
e: ---------------- e: ----------------
f: -------------------------------- f: --------------------------------
g: ---------------------------------------------------------------- g: ----------------------------------------------------------------
1.shape: person
2.shape: person
3.shape: person
4.shape: person
5.shape: person
1.width: 16
2.width: 64
3.width: 128
4.width: 512
# entering both width and height overrides aspect ratio limit
5.height: 256
5.width: 32
`, `,
}, },
} }

223
e2etests/testdata/stable/people/dagre/board.exp.json generated vendored
View file

@ -6,7 +6,7 @@
"id": "a", "id": "a",
"type": "person", "type": "person",
"pos": { "pos": {
"x": 0, "x": 1054,
"y": 257 "y": 257
}, },
"width": 49, "width": 49,
@ -47,7 +47,7 @@
"id": "b", "id": "b",
"type": "person", "type": "person",
"pos": { "pos": {
"x": 109, "x": 1163,
"y": 257 "y": 257
}, },
"width": 64, "width": 64,
@ -88,7 +88,7 @@
"id": "c", "id": "c",
"type": "person", "type": "person",
"pos": { "pos": {
"x": 233, "x": 1287,
"y": 257 "y": 257
}, },
"width": 89, "width": 89,
@ -129,7 +129,7 @@
"id": "d", "id": "d",
"type": "person", "type": "person",
"pos": { "pos": {
"x": 382, "x": 1436,
"y": 243 "y": 243
}, },
"width": 142, "width": 142,
@ -170,11 +170,11 @@
"id": "e", "id": "e",
"type": "person", "type": "person",
"pos": { "pos": {
"x": 584, "x": 1638,
"y": 208 "y": 209
}, },
"width": 245, "width": 245,
"height": 164, "height": 163,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -211,7 +211,7 @@
"id": "f", "id": "f",
"type": "person", "type": "person",
"pos": { "pos": {
"x": 889, "x": 1943,
"y": 139 "y": 139
}, },
"width": 453, "width": 453,
@ -252,7 +252,7 @@
"id": "g", "id": "g",
"type": "person", "type": "person",
"pos": { "pos": {
"x": 1402, "x": 2456,
"y": 0 "y": 0
}, },
"width": 870, "width": 870,
@ -288,6 +288,211 @@
"labelPosition": "INSIDE_MIDDLE_CENTER", "labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0, "zIndex": 0,
"level": 1 "level": 1
},
{
"id": "1",
"type": "person",
"pos": {
"x": 0,
"y": 280
},
"width": 18,
"height": 21,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "1",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 12,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "2",
"type": "person",
"pos": {
"x": 78,
"y": 269
},
"width": 64,
"height": 43,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "2",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "3",
"type": "person",
"pos": {
"x": 202,
"y": 248
},
"width": 128,
"height": 85,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "3",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "4",
"type": "person",
"pos": {
"x": 390,
"y": 120
},
"width": 512,
"height": 341,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "4",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 14,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "5",
"type": "person",
"pos": {
"x": 962,
"y": 162
},
"width": 32,
"height": 256,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "5",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
} }
], ],
"connections": [] "connections": []

6
e2etests/testdata/stable/people/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: 327 KiB

After

Width:  |  Height:  |  Size: 329 KiB

207
e2etests/testdata/stable/people/elk/board.exp.json generated vendored
View file

@ -174,7 +174,7 @@
"y": 220 "y": 220
}, },
"width": 245, "width": 245,
"height": 164, "height": 163,
"opacity": 1, "opacity": 1,
"strokeDash": 0, "strokeDash": 0,
"strokeWidth": 2, "strokeWidth": 2,
@ -288,6 +288,211 @@
"labelPosition": "INSIDE_MIDDLE_CENTER", "labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0, "zIndex": 0,
"level": 1 "level": 1
},
{
"id": "1",
"type": "person",
"pos": {
"x": 2064,
"y": 291
},
"width": 18,
"height": 21,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "1",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 12,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "2",
"type": "person",
"pos": {
"x": 2102,
"y": 280
},
"width": 64,
"height": 43,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "2",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "3",
"type": "person",
"pos": {
"x": 2186,
"y": 259
},
"width": 128,
"height": 85,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "3",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "4",
"type": "person",
"pos": {
"x": 2334,
"y": 131
},
"width": 512,
"height": 341,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "4",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 14,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
},
{
"id": "5",
"type": "person",
"pos": {
"x": 2866,
"y": 174
},
"width": 32,
"height": 256,
"opacity": 1,
"strokeDash": 0,
"strokeWidth": 2,
"borderRadius": 0,
"fill": "#E3E9FD",
"stroke": "#0D32B2",
"shadow": false,
"3d": false,
"multiple": false,
"double-border": false,
"tooltip": "",
"link": "",
"icon": null,
"iconPosition": "",
"blend": false,
"fields": null,
"methods": null,
"columns": null,
"label": "5",
"fontSize": 16,
"fontFamily": "DEFAULT",
"language": "",
"color": "#0A0F25",
"italic": false,
"bold": true,
"underline": false,
"labelWidth": 13,
"labelHeight": 26,
"labelPosition": "INSIDE_MIDDLE_CENTER",
"zIndex": 0,
"level": 1
} }
], ],
"connections": [] "connections": []

6
e2etests/testdata/stable/people/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: 327 KiB

After

Width:  |  Height:  |  Size: 329 KiB

9
lib/shape/shape.go
View file

@ -225,3 +225,12 @@ func boxPath(box *geo.Box) *svg.SvgPathContext {
pc.Z() pc.Z()
return pc return pc
} }
func LimitAR(width, height, aspectRatio float64) (float64, float64) {
if width > aspectRatio*height {
height = math.Round(width / aspectRatio)
} else if height > aspectRatio*width {
width = math.Round(height / aspectRatio)
}
return width, height
}

8
lib/shape/shape_person.go
View file

@ -21,6 +21,8 @@ func NewPerson(box *geo.Box) Shape {
} }
const ( const (
PERSON_AR_LIMIT = 1.5
personShoulderWidthFactor = 20.2 / 68.3 personShoulderWidthFactor = 20.2 / 68.3
) )
@ -76,11 +78,7 @@ func (s shapePerson) GetDimensionsToFit(width, height, paddingX, paddingY float6
totalHeight := height + paddingY totalHeight := height + paddingY
// prevent the shape's aspect ratio from becoming too extreme // prevent the shape's aspect ratio from becoming too extreme
if totalWidth > 1.5*totalHeight { totalWidth, totalHeight = LimitAR(totalWidth, totalHeight, PERSON_AR_LIMIT)
totalHeight = totalWidth / 1.5
} else if totalHeight > 1.5*totalWidth {
totalWidth = totalHeight / 1.5
}
return math.Ceil(totalWidth), math.Ceil(totalHeight) return math.Ceil(totalWidth), math.Ceil(totalHeight)
} }