fix: calc labelDimension

This commit is contained in:
donglixiaoche 2023-03-23 12:39:22 +08:00
parent 69532df6aa
commit 17c4851618
No known key found for this signature in database
GPG key ID: 3190E65EBAD6D6E2
10 changed files with 457 additions and 985 deletions

View file

@ -93,25 +93,67 @@ func place(obj *d2graph.Object) (float64, float64) {
tl, br := boundingBox(obj.Graph)
w := br.X - tl.X
h := br.Y - tl.Y
var x, y float64
switch d2graph.Key(obj.Attributes.NearKey)[0] {
case "top-left":
return tl.X - obj.Width - pad, tl.Y - obj.Height - pad
x, y = tl.X-obj.Width-pad, tl.Y-obj.Height-pad
break
case "top-center":
return tl.X + w/2 - obj.Width/2, tl.Y - obj.Height - pad
x, y = tl.X+w/2-obj.Width/2, tl.Y-obj.Height-pad
break
case "top-right":
return br.X + pad, tl.Y - obj.Height - pad
x, y = br.X+pad, tl.Y-obj.Height-pad
break
case "center-left":
return tl.X - obj.Width - pad, tl.Y + h/2 - obj.Height/2
x, y = tl.X-obj.Width-pad, tl.Y+h/2-obj.Height/2
break
case "center-right":
return br.X + pad, tl.Y + h/2 - obj.Height/2
x, y = br.X+pad, tl.Y+h/2-obj.Height/2
break
case "bottom-left":
return tl.X - obj.Width - pad, br.Y + pad
x, y = tl.X-obj.Width-pad, br.Y+pad
break
case "bottom-center":
return br.X - w/2 - obj.Width/2, br.Y + pad
x, y = br.X-w/2-obj.Width/2, br.Y+pad
break
case "bottom-right":
return br.X + pad, br.Y + pad
x, y = br.X+pad, br.Y+pad
break
}
return 0, 0
return calcLabelDimension(obj, x, y)
}
func calcLabelDimension(obj *d2graph.Object, x float64, y float64) (float64, float64) {
var position string
if obj.LabelPosition != nil {
if strings.Contains(*obj.LabelPosition, "INSIDE") {
return x, y
}
if strings.Contains(*obj.LabelPosition, "_TOP_") {
position = "TOP"
} else if strings.Contains(*obj.LabelPosition, "_LEFT_") {
position = "LEFT"
} else if strings.Contains(*obj.LabelPosition, "_RIGHT_") {
position = "RIGHT"
} else if strings.Contains(*obj.LabelPosition, "_BOTTOM_") {
position = "BOTTOM"
}
switch position {
case "TOP":
return x, y - float64(*obj.LabelHeight)
case "BOTTOM":
return x, y + float64(*obj.LabelHeight)
case "LEFT":
return x - float64(*obj.LabelWidth), y
case "RIGHT":
return x + float64(*obj.LabelWidth), y
}
}
return x, y
}
// WithoutConstantNears plucks out the graph objects which have "near" set to a constant value

View file

@ -1921,576 +1921,6 @@ i am bottom left: { shape: text; near: bottom-left }
i am bottom right: { shape: text; near: bottom-right }
`,
},
{
name: "constant_near_title",
script: `title: |md
# A winning strategy
| { near: top-center }
poll the people -> results
results -> unfavorable -> poll the people
results -> favorable -> will of the people
`,
},
{
name: "text_font_sizes",
script: `bear: { shape: text; style.font-size: 22; style.bold: true }
mama bear: { shape: text; style.font-size: 28; style.italic: true }
papa bear: { shape: text; style.font-size: 32; style.underline: true }
mama bear -> bear
papa bear -> bear
`,
},
{
name: "tooltips",
script: `x: { tooltip: Total abstinence is easier than perfect moderation }
y: { tooltip: Gee, I feel kind of LIGHT in the head now,\nknowing I can't make my satellite dish PAYMENTS! }
x -> y
`,
},
{
name: "links",
script: `x: { link: https://d2lang.com }
y: { link: https://terrastruct.com; tooltip: Gee, I feel kind of LIGHT in the head now,\nknowing I can't make my satellite dish PAYMENTS! }
x -> y
`,
},
{
name: "unnamed_only_width",
script: `
class -> users -> code -> package -> no width
class: "" {
shape: class
-num: int
-timeout: int
-pid
+getStatus(): Enum
+getJobs(): "Job[]"
+setTimeout(seconds int)
}
users: "" {
shape: sql_table
id: int
name: string
email: string
password: string
last_login: datetime
}
code: |go
a := 5
b := a + 7
fmt.Printf("%d", b)
|
package: "" { shape: package }
no width: ""
class.width: 512
users.width: 512
code.width: 512
package.width: 512
`,
},
{
name: "unnamed_only_height",
script: `
class -> users -> code -> package -> no height
class: "" {
shape: class
-num: int
-timeout: int
-pid
+getStatus(): Enum
+getJobs(): "Job[]"
+setTimeout(seconds int)
}
users: "" {
shape: sql_table
id: int
name: string
email: string
password: string
last_login: datetime
}
code: |go
a := 5
b := a + 7
fmt.Printf("%d", b)
|
package: "" { shape: package }
no height: ""
class.height: 512
users.height: 512
code.height: 512
package.height: 512
`,
},
{
name: "container_dimensions",
script: `a: {
width: 500
b -> c
b.width: 400
c.width: 600
}
b: {
width: 700
b -> c
e: {
height: 300
}
}
c: {
width: 200
height: 300
a
}
`,
dagreFeatureError: `Object "a" has attribute "width" and/or "height" set, but layout engine "dagre" does not support dimensions set on containers.`,
},
{
name: "crow_foot_arrowhead",
script: `
a1 <-> b1: {
style.stroke-width: 1
source-arrowhead: {
shape: cf-many
}
target-arrowhead: {
shape: cf-many
}
}
a2 <-> b2: {
style.stroke-width: 3
source-arrowhead: {
shape: cf-many
}
target-arrowhead: {
shape: cf-many
}
}
a3 <-> b3: {
style.stroke-width: 6
source-arrowhead: {
shape: cf-many
}
target-arrowhead: {
shape: cf-many
}
}
c1 <-> d1: {
style.stroke-width: 1
source-arrowhead: {
shape: cf-many-required
}
target-arrowhead: {
shape: cf-many-required
}
}
c2 <-> d2: {
style.stroke-width: 3
source-arrowhead: {
shape: cf-many-required
}
target-arrowhead: {
shape: cf-many-required
}
}
c3 <-> d3: {
style.stroke-width: 6
source-arrowhead: {
shape: cf-many-required
}
target-arrowhead: {
shape: cf-many-required
}
}
e1 <-> f1: {
style.stroke-width: 1
source-arrowhead: {
shape: cf-one
}
target-arrowhead: {
shape: cf-one
}
}
e2 <-> f2: {
style.stroke-width: 3
source-arrowhead: {
shape: cf-one
}
target-arrowhead: {
shape: cf-one
}
}
e3 <-> f3: {
style.stroke-width: 6
source-arrowhead: {
shape: cf-one
}
target-arrowhead: {
shape: cf-one
}
}
g1 <-> h1: {
style.stroke-width: 1
source-arrowhead: {
shape: cf-one-required
}
target-arrowhead: {
shape: cf-one-required
}
}
g2 <-> h2: {
style.stroke-width: 3
source-arrowhead: {
shape: cf-one-required
}
target-arrowhead: {
shape: cf-one-required
}
}
g3 <-> h3: {
style.stroke-width: 6
source-arrowhead: {
shape: cf-one-required
}
target-arrowhead: {
shape: cf-one-required
}
}
c <-> d <-> f: {
style.stroke-width: 1
style.stroke: "orange"
source-arrowhead: {
shape: cf-many-required
}
target-arrowhead: {
shape: cf-one
}
}
`,
},
{
name: "circle_arrowhead",
script: `
a <-> b: circle {
source-arrowhead: {
shape: circle
}
target-arrowhead: {
shape: circle
}
}
c <-> d: filled-circle {
source-arrowhead: {
shape: circle
style.filled: true
}
target-arrowhead: {
shape: circle
style.filled: true
}
}`,
},
{
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
}
`,
},
{
name: "sql_table_tooltip_animated",
script: `
x: {
shape: sql_table
y
tooltip: I like turtles
}
a: {
shape: sql_table
b
}
x.y -> a.b: {
style.animated: true
target-arrowhead.shape: cf-many
}
`,
},
{
name: "sql_table_column_styles",
script: `Humor in the Court: {
shape: sql_table
Could you see him from where you were standing?: "I could see his head."
And where was his head?: Just above his shoulders.
style.fill: red
style.stroke: lightgray
style.font-color: orange
style.font-size: 20
}
Humor in the Court2: {
shape: sql_table
Could you see him from where you were standing?: "I could see his head."
And where was his head?: Just above his shoulders.
style.fill: red
style.stroke: lightgray
style.font-color: orange
style.font-size: 30
}
manager: BatchManager {
shape: class
style.font-size: 20
-num: int
-timeout: int
-pid
+getStatus(): Enum
+getJobs(): "Job[]"
+setTimeout(seconds int)
}
manager2: BatchManager {
shape: class
style.font-size: 30
-num: int
-timeout: int
-pid
+getStatus(): Enum
+getJobs(): "Job[]"
+setTimeout(seconds int)
}
`,
},
{
name: "near-alone",
script: `
x: {
near: top-center
}
y: {
near: bottom-center
}
z: {
near: center-left
}
`,
},
{
name: "border-radius",
script: `
x: {
style.border-radius: 4
}
y: {
style.border-radius: 10
}
multiple2: {
style.border-radius: 6
style.multiple: true
}
double: {
style.border-radius: 6
style.double-border: true
}
three-dee: {
style.border-radius: 6
style.3d: true
}
`,
},
{
name: "sequence-inter-span-self",
script: `
shape: sequence_diagram
a: A
b: B
a.sp1 -> b: foo
a.sp1 -> a.sp2: redirect
a.sp2 -> b: bar
`,
},
{
name: "people",
script: `
a.shape: person
b.shape: person
c.shape: person
d.shape: person
e.shape: person
f.shape: person
g.shape: person
a: -
b: --
c: ----
d: --------
e: ----------------
f: --------------------------------
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
`,
},
{
name: "ovals",
script: `
a.shape: oval
b.shape: oval
c.shape: oval
d.shape: oval
e.shape: oval
f.shape: oval
g.shape: oval
a: -
b: --
c: ----
d: --------
e: ----------------
f: --------------------------------
g: ----------------------------------------------------------------
1.shape: oval
2.shape: oval
3.shape: oval
4.shape: oval
5.shape: oval
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
`,
},
{
name: "complex-layers",
script: `
desc: Multi-layer diagram of a home.
window: {
style.double-border: true
}
roof
garage
layers: {
window: {
blinds
glass
}
roof: {
shingles
starlink
utility hookup
}
garage: {
tools
vehicles
}
repair: {
desc: How to repair a home.
steps: {
1: {
find contractors: {
craigslist
facebook
}
}
2: {
find contractors -> solicit quotes
}
3: {
obtain quotes -> negotiate
}
4: {
negotiate -> book the best bid
}
}
}
}
scenarios: {
storm: {
water
rain
thunder
}
}`,
},
}
runa(t, tcs)

View file

@ -170,7 +170,7 @@
"type": "person",
"pos": {
"x": -508,
"y": 83
"y": 104
},
"width": 44,
"height": 66,
@ -211,7 +211,7 @@
"type": "person",
"pos": {
"x": 518,
"y": 83
"y": 104
},
"width": 65,
"height": 66,

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 666 KiB

After

Width:  |  Height:  |  Size: 666 KiB

View file

@ -170,7 +170,7 @@
"type": "person",
"pos": {
"x": -496,
"y": 80
"y": 101
},
"width": 44,
"height": 66,
@ -211,7 +211,7 @@
"type": "person",
"pos": {
"x": 530,
"y": 80
"y": 101
},
"width": 65,
"height": 66,

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 666 KiB

After

Width:  |  Height:  |  Size: 666 KiB

View file

@ -8,7 +8,7 @@
"type": "rectangle",
"pos": {
"x": -123,
"y": 20
"y": -16
},
"width": 247,
"height": 291,
@ -49,7 +49,7 @@
"type": "rectangle",
"pos": {
"x": -83,
"y": 49
"y": 13
},
"width": 53,
"height": 66,
@ -90,7 +90,7 @@
"type": "rectangle",
"pos": {
"x": -83,
"y": 215
"y": 179
},
"width": 53,
"height": 66,
@ -131,7 +131,7 @@
"type": "rectangle",
"pos": {
"x": 30,
"y": 49
"y": 13
},
"width": 53,
"height": 66,
@ -172,7 +172,7 @@
"type": "rectangle",
"pos": {
"x": 29,
"y": 215
"y": 179
},
"width": 54,
"height": 66,
@ -213,7 +213,7 @@
"type": "rectangle",
"pos": {
"x": -86,
"y": -245
"y": -281
},
"width": 173,
"height": 225,
@ -254,7 +254,7 @@
"type": "rectangle",
"pos": {
"x": -66,
"y": -179
"y": -215
},
"width": 133,
"height": 130,
@ -295,7 +295,7 @@
"type": "rectangle",
"pos": {
"x": -26,
"y": -147
"y": -183
},
"width": 53,
"height": 66,
@ -336,7 +336,7 @@
"type": "rectangle",
"pos": {
"x": -390,
"y": -526
"y": -598
},
"width": 247,
"height": 291,
@ -377,7 +377,7 @@
"type": "rectangle",
"pos": {
"x": -350,
"y": -497
"y": -569
},
"width": 53,
"height": 66,
@ -418,7 +418,7 @@
"type": "rectangle",
"pos": {
"x": -350,
"y": -331
"y": -403
},
"width": 53,
"height": 66,
@ -459,7 +459,7 @@
"type": "rectangle",
"pos": {
"x": -236,
"y": -497
"y": -569
},
"width": 53,
"height": 66,
@ -500,7 +500,7 @@
"type": "rectangle",
"pos": {
"x": -237,
"y": -331
"y": -403
},
"width": 54,
"height": 66,
@ -541,7 +541,7 @@
"type": "rectangle",
"pos": {
"x": 143,
"y": -526
"y": -598
},
"width": 247,
"height": 291,
@ -582,7 +582,7 @@
"type": "rectangle",
"pos": {
"x": 183,
"y": -497
"y": -569
},
"width": 53,
"height": 66,
@ -623,7 +623,7 @@
"type": "rectangle",
"pos": {
"x": 183,
"y": -331
"y": -403
},
"width": 53,
"height": 66,
@ -664,7 +664,7 @@
"type": "rectangle",
"pos": {
"x": 297,
"y": -497
"y": -569
},
"width": 53,
"height": 66,
@ -705,7 +705,7 @@
"type": "rectangle",
"pos": {
"x": 296,
"y": -331
"y": -403
},
"width": 54,
"height": 66,
@ -771,19 +771,19 @@
"route": [
{
"x": -57,
"y": 115.5
"y": 79.5
},
{
"x": -57,
"y": 155.5
"y": 119.5
},
{
"x": -57,
"y": 175.5
"y": 139.5
},
{
"x": -57,
"y": 215.5
"y": 179.5
}
],
"isCurve": true,
@ -820,19 +820,19 @@
"route": [
{
"x": 56.5,
"y": 115.5
"y": 79.5
},
{
"x": 56.5,
"y": 155.5
"y": 119.5
},
{
"x": 56.5,
"y": 175.5
"y": 139.5
},
{
"x": 56.5,
"y": 215.5
"y": 179.5
}
],
"isCurve": true,
@ -869,19 +869,19 @@
"route": [
{
"x": -324,
"y": -431
"y": -503
},
{
"x": -324,
"y": -391
"y": -463
},
{
"x": -324,
"y": -371
"y": -443
},
{
"x": -324,
"y": -331
"y": -403
}
],
"isCurve": true,
@ -918,19 +918,19 @@
"route": [
{
"x": -210.5,
"y": -431
"y": -503
},
{
"x": -210.5,
"y": -391
"y": -463
},
{
"x": -210.5,
"y": -371
"y": -443
},
{
"x": -210.5,
"y": -331
"y": -403
}
],
"isCurve": true,
@ -967,19 +967,19 @@
"route": [
{
"x": 210,
"y": -431
"y": -503
},
{
"x": 210,
"y": -391
"y": -463
},
{
"x": 210,
"y": -371
"y": -443
},
{
"x": 210,
"y": -331
"y": -403
}
],
"isCurve": true,
@ -1016,19 +1016,19 @@
"route": [
{
"x": 323.5,
"y": -431
"y": -503
},
{
"x": 323.5,
"y": -391
"y": -463
},
{
"x": 323.5,
"y": -371
"y": -443
},
{
"x": 323.5,
"y": -331
"y": -403
}
],
"isCurve": true,

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 659 KiB

After

Width:  |  Height:  |  Size: 659 KiB

View file

@ -8,7 +8,7 @@
"type": "rectangle",
"pos": {
"x": -113,
"y": 20
"y": -16
},
"width": 227,
"height": 302,
@ -49,7 +49,7 @@
"type": "rectangle",
"pos": {
"x": -63,
"y": 70
"y": 34
},
"width": 53,
"height": 66,
@ -90,7 +90,7 @@
"type": "rectangle",
"pos": {
"x": -63,
"y": 206
"y": 170
},
"width": 53,
"height": 66,
@ -131,7 +131,7 @@
"type": "rectangle",
"pos": {
"x": 10,
"y": 70
"y": 34
},
"width": 53,
"height": 66,
@ -172,7 +172,7 @@
"type": "rectangle",
"pos": {
"x": 9,
"y": 206
"y": 170
},
"width": 54,
"height": 66,
@ -213,7 +213,7 @@
"type": "rectangle",
"pos": {
"x": -126,
"y": -286
"y": -322
},
"width": 253,
"height": 266,
@ -254,7 +254,7 @@
"type": "rectangle",
"pos": {
"x": -76,
"y": -236
"y": -272
},
"width": 153,
"height": 166,
@ -295,7 +295,7 @@
"type": "rectangle",
"pos": {
"x": -26,
"y": -186
"y": -222
},
"width": 53,
"height": 66,
@ -336,7 +336,7 @@
"type": "rectangle",
"pos": {
"x": -373,
"y": -558
"y": -630
},
"width": 227,
"height": 302,
@ -377,7 +377,7 @@
"type": "rectangle",
"pos": {
"x": -323,
"y": -508
"y": -580
},
"width": 53,
"height": 66,
@ -418,7 +418,7 @@
"type": "rectangle",
"pos": {
"x": -323,
"y": -372
"y": -444
},
"width": 53,
"height": 66,
@ -459,7 +459,7 @@
"type": "rectangle",
"pos": {
"x": -250,
"y": -508
"y": -580
},
"width": 53,
"height": 66,
@ -500,7 +500,7 @@
"type": "rectangle",
"pos": {
"x": -250,
"y": -372
"y": -444
},
"width": 54,
"height": 66,
@ -541,7 +541,7 @@
"type": "rectangle",
"pos": {
"x": 146,
"y": -558
"y": -630
},
"width": 227,
"height": 302,
@ -582,7 +582,7 @@
"type": "rectangle",
"pos": {
"x": 196,
"y": -508
"y": -580
},
"width": 53,
"height": 66,
@ -623,7 +623,7 @@
"type": "rectangle",
"pos": {
"x": 196,
"y": -372
"y": -444
},
"width": 53,
"height": 66,
@ -664,7 +664,7 @@
"type": "rectangle",
"pos": {
"x": 270,
"y": -508
"y": -580
},
"width": 53,
"height": 66,
@ -705,7 +705,7 @@
"type": "rectangle",
"pos": {
"x": 269,
"y": -372
"y": -444
},
"width": 54,
"height": 66,
@ -771,11 +771,11 @@
"route": [
{
"x": -37,
"y": 136
"y": 100
},
{
"x": -37,
"y": 206
"y": 170
}
],
"animated": false,
@ -811,11 +811,11 @@
"route": [
{
"x": 36.5,
"y": 136
"y": 100
},
{
"x": 36.5,
"y": 206
"y": 170
}
],
"animated": false,
@ -851,11 +851,11 @@
"route": [
{
"x": -297,
"y": -442
"y": -514
},
{
"x": -297,
"y": -372
"y": -444
}
],
"animated": false,
@ -891,11 +891,11 @@
"route": [
{
"x": -223.5,
"y": -442
"y": -514
},
{
"x": -223.5,
"y": -372
"y": -444
}
],
"animated": false,
@ -931,11 +931,11 @@
"route": [
{
"x": 223,
"y": -442
"y": -514
},
{
"x": 223,
"y": -372
"y": -444
}
],
"animated": false,
@ -971,11 +971,11 @@
"route": [
{
"x": 296.5,
"y": -442
"y": -514
},
{
"x": 296.5,
"y": -372
"y": -444
}
],
"animated": false,

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 659 KiB

After

Width:  |  Height:  |  Size: 659 KiB