diff --git a/e2etests/testdata/txtar/c4-person-label/dagre/board.exp.json b/e2etests/testdata/txtar/c4-person-label/dagre/board.exp.json index d164ab8a8..2c7e30d13 100644 --- a/e2etests/testdata/txtar/c4-person-label/dagre/board.exp.json +++ b/e2etests/testdata/txtar/c4-person-label/dagre/board.exp.json @@ -16,7 +16,7 @@ "type": "c4-person", "pos": { "x": 0, - "y": 0 + "y": 32 }, "width": 410, "height": 390, @@ -58,7 +58,7 @@ "type": "c4-person", "pos": { "x": 470, - "y": 0 + "y": 32 }, "width": 410, "height": 390, @@ -100,7 +100,7 @@ "type": "c4-person", "pos": { "x": 940, - "y": 0 + "y": 32 }, "width": 410, "height": 390, @@ -136,6 +136,174 @@ "labelPosition": "INSIDE_BOTTOM_CENTER", "zIndex": 0, "level": 1 + }, + { + "id": "customer1", + "type": "c4-person", + "pos": { + "x": 1410, + "y": 14 + }, + "width": 448, + "height": 426, + "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": "## Personal Banking Customer\n[person]\n\nA customer of the bank, with pekkrsonal bank ccountskks.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 388, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "customer2", + "type": "c4-person", + "pos": { + "x": 1918, + "y": 0 + }, + "width": 457, + "height": 453, + "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": "## Personal Banking Customerk\n[person]\n\nA customer of the bank, with pekkrsonal bank accountskks.\n\nA customer of the bank, with pekkrsonal bank accountskks.\n\nA customer of the bank, with pekkrsonal bank accountskks.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 396, + "labelHeight": 199, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "customer3", + "type": "c4-person", + "pos": { + "x": 2435, + "y": 10 + }, + "width": 457, + "height": 434, + "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": "## Personal Banking Customer\n[person]\n\nA customer of the bank, with pekkrsonal bank accountskks.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 396, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "customer4", + "type": "c4-person", + "pos": { + "x": 2952, + "y": 10 + }, + "width": 457, + "height": 434, + "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": "## Personal Banking Customer\n[person]\n\nA customer of the bank, with pekkrsonal bank accountskks.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 396, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 } ], "connections": [], diff --git a/e2etests/testdata/txtar/c4-person-label/dagre/sketch.exp.svg b/e2etests/testdata/txtar/c4-person-label/dagre/sketch.exp.svg index bab515547..24701726f 100644 --- a/e2etests/testdata/txtar/c4-person-label/dagre/sketch.exp.svg +++ b/e2etests/testdata/txtar/c4-person-label/dagre/sketch.exp.svg @@ -1,14 +1,14 @@ -

Personal Banking Customer

+

Personal Banking Customer

[person]

A customer of the bank, with personal bank accounts

-

Personal Banking Customer

+

Personal Banking Customer

[person]

A customer of the bank, with personal bank accounts

-

Personal Banking Customer

+

Personal Banking Customer

[person]

A customer of the bank, with personal bank accounts

-
 - - - - +

Personal Banking Customer

+

[person]

+

A customer of the bank, with pekkrsonal bank ccountskks.

+

Personal Banking Customerk

+

[person]

+

A customer of the bank, with pekkrsonal bank accountskks.

+

A customer of the bank, with pekkrsonal bank accountskks.

+

A customer of the bank, with pekkrsonal bank accountskks.

+

Personal Banking Customer

+

[person]

+

A customer of the bank, with pekkrsonal bank accountskks.

+

Personal Banking Customer

+

[person]

+

A customer of the bank, with pekkrsonal bank accountskks.

+
 + + + + + + + + \ No newline at end of file diff --git a/e2etests/testdata/txtar/c4-person-label/elk/board.exp.json b/e2etests/testdata/txtar/c4-person-label/elk/board.exp.json index 636de29e5..ecf5fb0fd 100644 --- a/e2etests/testdata/txtar/c4-person-label/elk/board.exp.json +++ b/e2etests/testdata/txtar/c4-person-label/elk/board.exp.json @@ -16,7 +16,7 @@ "type": "c4-person", "pos": { "x": 12, - "y": 12 + "y": 43 }, "width": 410, "height": 390, @@ -58,7 +58,7 @@ "type": "c4-person", "pos": { "x": 442, - "y": 12 + "y": 43 }, "width": 410, "height": 390, @@ -100,7 +100,7 @@ "type": "c4-person", "pos": { "x": 872, - "y": 12 + "y": 43 }, "width": 410, "height": 390, @@ -136,6 +136,174 @@ "labelPosition": "INSIDE_BOTTOM_CENTER", "zIndex": 0, "level": 1 + }, + { + "id": "customer1", + "type": "c4-person", + "pos": { + "x": 1302, + "y": 25 + }, + "width": 448, + "height": 426, + "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": "## Personal Banking Customer\n[person]\n\nA customer of the bank, with pekkrsonal bank ccountskks.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 388, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "customer2", + "type": "c4-person", + "pos": { + "x": 1770, + "y": 12 + }, + "width": 457, + "height": 453, + "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": "## Personal Banking Customerk\n[person]\n\nA customer of the bank, with pekkrsonal bank accountskks.\n\nA customer of the bank, with pekkrsonal bank accountskks.\n\nA customer of the bank, with pekkrsonal bank accountskks.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 396, + "labelHeight": 199, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "customer3", + "type": "c4-person", + "pos": { + "x": 2247, + "y": 21 + }, + "width": 457, + "height": 434, + "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": "## Personal Banking Customer\n[person]\n\nA customer of the bank, with pekkrsonal bank accountskks.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 396, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 + }, + { + "id": "customer4", + "type": "c4-person", + "pos": { + "x": 2724, + "y": 21 + }, + "width": 457, + "height": 434, + "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": "## Personal Banking Customer\n[person]\n\nA customer of the bank, with pekkrsonal bank accountskks.", + "fontSize": 16, + "fontFamily": "DEFAULT", + "language": "markdown", + "color": "N1", + "italic": false, + "bold": true, + "underline": false, + "labelWidth": 396, + "labelHeight": 119, + "labelPosition": "INSIDE_MIDDLE_CENTER", + "zIndex": 0, + "level": 1 } ], "connections": [], diff --git a/e2etests/testdata/txtar/c4-person-label/elk/sketch.exp.svg b/e2etests/testdata/txtar/c4-person-label/elk/sketch.exp.svg index bfadee541..01c202e6c 100644 --- a/e2etests/testdata/txtar/c4-person-label/elk/sketch.exp.svg +++ b/e2etests/testdata/txtar/c4-person-label/elk/sketch.exp.svg @@ -1,14 +1,14 @@ -

Personal Banking Customer

+

Personal Banking Customer

[person]

A customer of the bank, with personal bank accounts

-

Personal Banking Customer

+

Personal Banking Customer

[person]

A customer of the bank, with personal bank accounts

-

Personal Banking Customer

+

Personal Banking Customer

[person]

A customer of the bank, with personal bank accounts

-
 - - - - +

Personal Banking Customer

+

[person]

+

A customer of the bank, with pekkrsonal bank ccountskks.

+

Personal Banking Customerk

+

[person]

+

A customer of the bank, with pekkrsonal bank accountskks.

+

A customer of the bank, with pekkrsonal bank accountskks.

+

A customer of the bank, with pekkrsonal bank accountskks.

+

Personal Banking Customer

+

[person]

+

A customer of the bank, with pekkrsonal bank accountskks.

+

Personal Banking Customer

+

[person]

+

A customer of the bank, with pekkrsonal bank accountskks.

+
 + + + + + + + + \ No newline at end of file diff --git a/e2etests/testdata/txtar/c4-person-shape/dagre/board.exp.json b/e2etests/testdata/txtar/c4-person-shape/dagre/board.exp.json index 279169e81..bd1bb8ae3 100644 --- a/e2etests/testdata/txtar/c4-person-shape/dagre/board.exp.json +++ b/e2etests/testdata/txtar/c4-person-shape/dagre/board.exp.json @@ -16,10 +16,10 @@ "type": "c4-person", "pos": { "x": 0, - "y": 504 + "y": 507 }, "width": 336, - "height": 328, + "height": 342, "opacity": 1, "strokeDash": 0, "strokeWidth": 1, @@ -100,7 +100,7 @@ "type": "person", "pos": { "x": 101, - "y": 309 + "y": 311 }, "width": 134, "height": 89, @@ -145,7 +145,7 @@ "y": 273 }, "width": 210, - "height": 515, + "height": 525, "opacity": 1, "strokeDash": 0, "strokeWidth": 2, @@ -187,7 +187,7 @@ "y": 303 }, "width": 84, - "height": 101, + "height": 104, "opacity": 1, "strokeDash": 0, "strokeWidth": 1, @@ -226,7 +226,7 @@ "type": "c4-person", "pos": { "x": 416, - "y": 578 + "y": 588 }, "width": 150, "height": 180, @@ -292,19 +292,19 @@ "route": [ { "x": 168, - "y": 424 + "y": 426 }, { "x": 168, - "y": 448 + "y": 450.79998779296875 }, { "x": 168, - "y": 461 + "y": 467 }, { "x": 168, - "y": 489 + "y": 507 } ], "isCurve": true, @@ -348,11 +348,11 @@ }, { "x": 168, - "y": 264.20001220703125 + "y": 264.6000061035156 }, { "x": 168, - "y": 309 + "y": 311 } ], "isCurve": true, @@ -436,19 +436,19 @@ "route": [ { "x": 491, - "y": 405 + "y": 407 }, { "x": 491, - "y": 444.20001220703125 + "y": 447 }, { "x": 491, - "y": 478.6000061035156 + "y": 483.20001220703125 }, { "x": 491, - "y": 577 + "y": 588 } ], "isCurve": true, diff --git a/e2etests/testdata/txtar/c4-person-shape/dagre/sketch.exp.svg b/e2etests/testdata/txtar/c4-person-shape/dagre/sketch.exp.svg index 65e12a1b3..251910a6e 100644 --- a/e2etests/testdata/txtar/c4-person-shape/dagre/sketch.exp.svg +++ b/e2etests/testdata/txtar/c4-person-shape/dagre/sketch.exp.svg @@ -1,27 +1,27 @@ -

Personal Banking Customer

+

Personal Banking Customer

[person]

A customer of the bank, with
personal bank accounts

-
C4 Style PersonStandard Personstylingc4styledCustom Size Compare shapes - - - - +
C4 Style PersonStandard Personstylingc4styledCustom Size Compare shapes + + + + - - - + + + \ No newline at end of file diff --git a/e2etests/testdata/txtar/c4-person-shape/elk/board.exp.json b/e2etests/testdata/txtar/c4-person-shape/elk/board.exp.json index 95cb99c31..52e292df6 100644 --- a/e2etests/testdata/txtar/c4-person-shape/elk/board.exp.json +++ b/e2etests/testdata/txtar/c4-person-shape/elk/board.exp.json @@ -16,10 +16,10 @@ "type": "c4-person", "pos": { "x": 12, - "y": 935 + "y": 938 }, "width": 336, - "height": 328, + "height": 342, "opacity": 1, "strokeDash": 0, "strokeWidth": 1, @@ -100,7 +100,7 @@ "type": "person", "pos": { "x": 113, - "y": 750 + "y": 753 }, "width": 134, "height": 89, @@ -145,7 +145,7 @@ "y": 229 }, "width": 250, - "height": 451, + "height": 454, "opacity": 1, "strokeDash": 0, "strokeWidth": 2, @@ -187,7 +187,7 @@ "y": 279 }, "width": 84, - "height": 101, + "height": 104, "opacity": 1, "strokeDash": 0, "strokeWidth": 1, @@ -226,7 +226,7 @@ "type": "c4-person", "pos": { "x": 306, - "y": 450 + "y": 453 }, "width": 150, "height": 180, @@ -292,11 +292,11 @@ "route": [ { "x": 180, - "y": 865 + "y": 868 }, { "x": 180, - "y": 920 + "y": 938 } ], "animated": false, @@ -331,7 +331,7 @@ "route": [ { "x": 258, - "y": 144 + "y": 143 }, { "x": 257.5830078125, @@ -343,7 +343,7 @@ }, { "x": 180, - "y": 750 + "y": 753 } ], "animated": false, @@ -378,7 +378,7 @@ "route": [ { "x": 304, - "y": 144 + "y": 143 }, { "x": 303.9159851074219, @@ -425,11 +425,11 @@ "route": [ { "x": 381, - "y": 381 + "y": 383 }, { "x": 382, - "y": 449 + "y": 453 } ], "animated": false, diff --git a/e2etests/testdata/txtar/c4-person-shape/elk/sketch.exp.svg b/e2etests/testdata/txtar/c4-person-shape/elk/sketch.exp.svg index d7fdb9e74..6305b8c57 100644 --- a/e2etests/testdata/txtar/c4-person-shape/elk/sketch.exp.svg +++ b/e2etests/testdata/txtar/c4-person-shape/elk/sketch.exp.svg @@ -1,27 +1,27 @@ -

Personal Banking Customer

+

Personal Banking Customer

[person]

A customer of the bank, with
personal bank accounts

-
C4 Style PersonStandard Personstylingc4styledCustom Size Compare shapes - - - - +
C4 Style PersonStandard Personstylingc4styledCustom Size Compare shapes + + + + - - - + + + \ No newline at end of file diff --git a/e2etests/testdata/txtar/c4-theme/dagre/board.exp.json b/e2etests/testdata/txtar/c4-theme/dagre/board.exp.json index e462c9a73..4b80ded31 100644 --- a/e2etests/testdata/txtar/c4-theme/dagre/board.exp.json +++ b/e2etests/testdata/txtar/c4-theme/dagre/board.exp.json @@ -513,12 +513,12 @@ "link": "", "route": [ { - "x": 1092, - "y": 348 + "x": 1091, + "y": 349 }, { - "x": 968, - "y": 439.6000061035156 + "x": 967.7999877929688, + "y": 439.79998779296875 }, { "x": 937, @@ -801,11 +801,11 @@ "link": "", "route": [ { - "x": 1505, + "x": 1503, "y": 238 }, { - "x": 2410.60009765625, + "x": 2410.199951171875, "y": 417.6000061035156 }, { diff --git a/e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg b/e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg index 2613fb8b3..fb2279b45 100644 --- a/e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg +++ b/e2etests/testdata/txtar/c4-theme/dagre/sketch.exp.svg @@ -1,20 +1,20 @@ -

Personal Banking Customer

+

Personal Banking Customer

[person]

A customer of the bank, with personal bank accounts.

Internet Banking System

@@ -862,9 +862,9 @@

Database

[Container: Oracle Database Schema]

Stores user registration information, hashed authentication credentials, access logs, etc.

-
 Visits bigbank.com/ib using[HTTPS]Delivers to the customer's web browserViews account balances, and makes payments usingViews account balances, and makes payments usingMakes API calls to[JSON/HTTPS]Makes API calls to[JSON/HTTPS]Makes API calls to[XML/HTTPS]Sends e-mails toSends e-mail using Reads from and writes to[SQL/TCP] +
 Visits bigbank.com/ib using[HTTPS]Delivers to the customer's web browserViews account balances, and makes payments usingViews account balances, and makes payments usingMakes API calls to[JSON/HTTPS]Makes API calls to[JSON/HTTPS]Makes API calls to[XML/HTTPS]Sends e-mails toSends e-mail using Reads from and writes to[SQL/TCP] - + @@ -875,12 +875,12 @@ - + - + \ No newline at end of file diff --git a/e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg b/e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg index 31b06adcb..46f088711 100644 --- a/e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg +++ b/e2etests/testdata/txtar/c4-theme/elk/sketch.exp.svg @@ -836,7 +836,7 @@ .d2-1295531492 .md .contains-task-list:dir(rtl) .task-list-item-checkbox { margin: 0 -1.6em 0.25em 0.2em; } -

Personal Banking Customer

+

Personal Banking Customer

[person]

A customer of the bank, with personal bank accounts.

Internet Banking System

@@ -864,7 +864,7 @@

Stores user registration information, hashed authentication credentials, access logs, etc.

 Visits bigbank.com/ib using[HTTPS]Delivers to the customer's web browserViews account balances, and makes payments usingViews account balances, and makes payments usingMakes API calls to[JSON/HTTPS]Makes API calls to[JSON/HTTPS]Makes API calls to[XML/HTTPS]Sends e-mails toSends e-mail using Reads from and writes to[SQL/TCP] - + diff --git a/e2etests/testdata/txtar/small-c4-person/dagre/board.exp.json b/e2etests/testdata/txtar/small-c4-person/dagre/board.exp.json index e0d8c0959..999037997 100644 --- a/e2etests/testdata/txtar/small-c4-person/dagre/board.exp.json +++ b/e2etests/testdata/txtar/small-c4-person/dagre/board.exp.json @@ -19,7 +19,7 @@ "y": 0 }, "width": 180, - "height": 94, + "height": 97, "opacity": 1, "strokeDash": 0, "strokeWidth": 2, diff --git a/e2etests/testdata/txtar/small-c4-person/dagre/sketch.exp.svg b/e2etests/testdata/txtar/small-c4-person/dagre/sketch.exp.svg index 009c53f4e..a743498d0 100644 --- a/e2etests/testdata/txtar/small-c4-person/dagre/sketch.exp.svg +++ b/e2etests/testdata/txtar/small-c4-person/dagre/sketch.exp.svg @@ -1,9 +1,9 @@ -c4-person - - + .d2-1864249435 .fill-N1{fill:#0A0F25;} + .d2-1864249435 .fill-N2{fill:#676C7E;} + .d2-1864249435 .fill-N3{fill:#9499AB;} + .d2-1864249435 .fill-N4{fill:#CFD2DD;} + .d2-1864249435 .fill-N5{fill:#DEE1EB;} + .d2-1864249435 .fill-N6{fill:#EEF1F8;} + .d2-1864249435 .fill-N7{fill:#FFFFFF;} + .d2-1864249435 .fill-B1{fill:#0D32B2;} + .d2-1864249435 .fill-B2{fill:#0D32B2;} + .d2-1864249435 .fill-B3{fill:#E3E9FD;} + .d2-1864249435 .fill-B4{fill:#E3E9FD;} + .d2-1864249435 .fill-B5{fill:#EDF0FD;} + .d2-1864249435 .fill-B6{fill:#F7F8FE;} + .d2-1864249435 .fill-AA2{fill:#4A6FF3;} + .d2-1864249435 .fill-AA4{fill:#EDF0FD;} + .d2-1864249435 .fill-AA5{fill:#F7F8FE;} + .d2-1864249435 .fill-AB4{fill:#EDF0FD;} + .d2-1864249435 .fill-AB5{fill:#F7F8FE;} + .d2-1864249435 .stroke-N1{stroke:#0A0F25;} + .d2-1864249435 .stroke-N2{stroke:#676C7E;} + .d2-1864249435 .stroke-N3{stroke:#9499AB;} + .d2-1864249435 .stroke-N4{stroke:#CFD2DD;} + .d2-1864249435 .stroke-N5{stroke:#DEE1EB;} + .d2-1864249435 .stroke-N6{stroke:#EEF1F8;} + .d2-1864249435 .stroke-N7{stroke:#FFFFFF;} + .d2-1864249435 .stroke-B1{stroke:#0D32B2;} + .d2-1864249435 .stroke-B2{stroke:#0D32B2;} + .d2-1864249435 .stroke-B3{stroke:#E3E9FD;} + .d2-1864249435 .stroke-B4{stroke:#E3E9FD;} + .d2-1864249435 .stroke-B5{stroke:#EDF0FD;} + .d2-1864249435 .stroke-B6{stroke:#F7F8FE;} + .d2-1864249435 .stroke-AA2{stroke:#4A6FF3;} + .d2-1864249435 .stroke-AA4{stroke:#EDF0FD;} + .d2-1864249435 .stroke-AA5{stroke:#F7F8FE;} + .d2-1864249435 .stroke-AB4{stroke:#EDF0FD;} + .d2-1864249435 .stroke-AB5{stroke:#F7F8FE;} + .d2-1864249435 .background-color-N1{background-color:#0A0F25;} + .d2-1864249435 .background-color-N2{background-color:#676C7E;} + .d2-1864249435 .background-color-N3{background-color:#9499AB;} + .d2-1864249435 .background-color-N4{background-color:#CFD2DD;} + .d2-1864249435 .background-color-N5{background-color:#DEE1EB;} + .d2-1864249435 .background-color-N6{background-color:#EEF1F8;} + .d2-1864249435 .background-color-N7{background-color:#FFFFFF;} + .d2-1864249435 .background-color-B1{background-color:#0D32B2;} + .d2-1864249435 .background-color-B2{background-color:#0D32B2;} + .d2-1864249435 .background-color-B3{background-color:#E3E9FD;} + .d2-1864249435 .background-color-B4{background-color:#E3E9FD;} + .d2-1864249435 .background-color-B5{background-color:#EDF0FD;} + .d2-1864249435 .background-color-B6{background-color:#F7F8FE;} + .d2-1864249435 .background-color-AA2{background-color:#4A6FF3;} + .d2-1864249435 .background-color-AA4{background-color:#EDF0FD;} + .d2-1864249435 .background-color-AA5{background-color:#F7F8FE;} + .d2-1864249435 .background-color-AB4{background-color:#EDF0FD;} + .d2-1864249435 .background-color-AB5{background-color:#F7F8FE;} + .d2-1864249435 .color-N1{color:#0A0F25;} + .d2-1864249435 .color-N2{color:#676C7E;} + .d2-1864249435 .color-N3{color:#9499AB;} + .d2-1864249435 .color-N4{color:#CFD2DD;} + .d2-1864249435 .color-N5{color:#DEE1EB;} + .d2-1864249435 .color-N6{color:#EEF1F8;} + .d2-1864249435 .color-N7{color:#FFFFFF;} + .d2-1864249435 .color-B1{color:#0D32B2;} + .d2-1864249435 .color-B2{color:#0D32B2;} + .d2-1864249435 .color-B3{color:#E3E9FD;} + .d2-1864249435 .color-B4{color:#E3E9FD;} + .d2-1864249435 .color-B5{color:#EDF0FD;} + .d2-1864249435 .color-B6{color:#F7F8FE;} + .d2-1864249435 .color-AA2{color:#4A6FF3;} + .d2-1864249435 .color-AA4{color:#EDF0FD;} + .d2-1864249435 .color-AA5{color:#F7F8FE;} + .d2-1864249435 .color-AB4{color:#EDF0FD;} + .d2-1864249435 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-1864249435);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-1864249435);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-1864249435);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-1864249435);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-1864249435);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-1864249435);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-1864249435);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-1864249435);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]>c4-person + + \ No newline at end of file diff --git a/e2etests/testdata/txtar/small-c4-person/elk/board.exp.json b/e2etests/testdata/txtar/small-c4-person/elk/board.exp.json index 56a15e872..a6f4b3250 100644 --- a/e2etests/testdata/txtar/small-c4-person/elk/board.exp.json +++ b/e2etests/testdata/txtar/small-c4-person/elk/board.exp.json @@ -19,7 +19,7 @@ "y": 12 }, "width": 180, - "height": 94, + "height": 97, "opacity": 1, "strokeDash": 0, "strokeWidth": 2, diff --git a/e2etests/testdata/txtar/small-c4-person/elk/sketch.exp.svg b/e2etests/testdata/txtar/small-c4-person/elk/sketch.exp.svg index 4de020608..fa51d71b6 100644 --- a/e2etests/testdata/txtar/small-c4-person/elk/sketch.exp.svg +++ b/e2etests/testdata/txtar/small-c4-person/elk/sketch.exp.svg @@ -1,9 +1,9 @@ -c4-person - - + .d2-1736778707 .fill-N1{fill:#0A0F25;} + .d2-1736778707 .fill-N2{fill:#676C7E;} + .d2-1736778707 .fill-N3{fill:#9499AB;} + .d2-1736778707 .fill-N4{fill:#CFD2DD;} + .d2-1736778707 .fill-N5{fill:#DEE1EB;} + .d2-1736778707 .fill-N6{fill:#EEF1F8;} + .d2-1736778707 .fill-N7{fill:#FFFFFF;} + .d2-1736778707 .fill-B1{fill:#0D32B2;} + .d2-1736778707 .fill-B2{fill:#0D32B2;} + .d2-1736778707 .fill-B3{fill:#E3E9FD;} + .d2-1736778707 .fill-B4{fill:#E3E9FD;} + .d2-1736778707 .fill-B5{fill:#EDF0FD;} + .d2-1736778707 .fill-B6{fill:#F7F8FE;} + .d2-1736778707 .fill-AA2{fill:#4A6FF3;} + .d2-1736778707 .fill-AA4{fill:#EDF0FD;} + .d2-1736778707 .fill-AA5{fill:#F7F8FE;} + .d2-1736778707 .fill-AB4{fill:#EDF0FD;} + .d2-1736778707 .fill-AB5{fill:#F7F8FE;} + .d2-1736778707 .stroke-N1{stroke:#0A0F25;} + .d2-1736778707 .stroke-N2{stroke:#676C7E;} + .d2-1736778707 .stroke-N3{stroke:#9499AB;} + .d2-1736778707 .stroke-N4{stroke:#CFD2DD;} + .d2-1736778707 .stroke-N5{stroke:#DEE1EB;} + .d2-1736778707 .stroke-N6{stroke:#EEF1F8;} + .d2-1736778707 .stroke-N7{stroke:#FFFFFF;} + .d2-1736778707 .stroke-B1{stroke:#0D32B2;} + .d2-1736778707 .stroke-B2{stroke:#0D32B2;} + .d2-1736778707 .stroke-B3{stroke:#E3E9FD;} + .d2-1736778707 .stroke-B4{stroke:#E3E9FD;} + .d2-1736778707 .stroke-B5{stroke:#EDF0FD;} + .d2-1736778707 .stroke-B6{stroke:#F7F8FE;} + .d2-1736778707 .stroke-AA2{stroke:#4A6FF3;} + .d2-1736778707 .stroke-AA4{stroke:#EDF0FD;} + .d2-1736778707 .stroke-AA5{stroke:#F7F8FE;} + .d2-1736778707 .stroke-AB4{stroke:#EDF0FD;} + .d2-1736778707 .stroke-AB5{stroke:#F7F8FE;} + .d2-1736778707 .background-color-N1{background-color:#0A0F25;} + .d2-1736778707 .background-color-N2{background-color:#676C7E;} + .d2-1736778707 .background-color-N3{background-color:#9499AB;} + .d2-1736778707 .background-color-N4{background-color:#CFD2DD;} + .d2-1736778707 .background-color-N5{background-color:#DEE1EB;} + .d2-1736778707 .background-color-N6{background-color:#EEF1F8;} + .d2-1736778707 .background-color-N7{background-color:#FFFFFF;} + .d2-1736778707 .background-color-B1{background-color:#0D32B2;} + .d2-1736778707 .background-color-B2{background-color:#0D32B2;} + .d2-1736778707 .background-color-B3{background-color:#E3E9FD;} + .d2-1736778707 .background-color-B4{background-color:#E3E9FD;} + .d2-1736778707 .background-color-B5{background-color:#EDF0FD;} + .d2-1736778707 .background-color-B6{background-color:#F7F8FE;} + .d2-1736778707 .background-color-AA2{background-color:#4A6FF3;} + .d2-1736778707 .background-color-AA4{background-color:#EDF0FD;} + .d2-1736778707 .background-color-AA5{background-color:#F7F8FE;} + .d2-1736778707 .background-color-AB4{background-color:#EDF0FD;} + .d2-1736778707 .background-color-AB5{background-color:#F7F8FE;} + .d2-1736778707 .color-N1{color:#0A0F25;} + .d2-1736778707 .color-N2{color:#676C7E;} + .d2-1736778707 .color-N3{color:#9499AB;} + .d2-1736778707 .color-N4{color:#CFD2DD;} + .d2-1736778707 .color-N5{color:#DEE1EB;} + .d2-1736778707 .color-N6{color:#EEF1F8;} + .d2-1736778707 .color-N7{color:#FFFFFF;} + .d2-1736778707 .color-B1{color:#0D32B2;} + .d2-1736778707 .color-B2{color:#0D32B2;} + .d2-1736778707 .color-B3{color:#E3E9FD;} + .d2-1736778707 .color-B4{color:#E3E9FD;} + .d2-1736778707 .color-B5{color:#EDF0FD;} + .d2-1736778707 .color-B6{color:#F7F8FE;} + .d2-1736778707 .color-AA2{color:#4A6FF3;} + .d2-1736778707 .color-AA4{color:#EDF0FD;} + .d2-1736778707 .color-AA5{color:#F7F8FE;} + .d2-1736778707 .color-AB4{color:#EDF0FD;} + .d2-1736778707 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker-d2-1736778707);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker-d2-1736778707);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark-d2-1736778707);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker-d2-1736778707);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark-d2-1736778707);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal-d2-1736778707);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal-d2-1736778707);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright-d2-1736778707);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]>c4-person + + \ No newline at end of file diff --git a/e2etests/txtar.txt b/e2etests/txtar.txt index 89d18ce17..ac940b683 100644 --- a/e2etests/txtar.txt +++ b/e2etests/txtar.txt @@ -1027,106 +1027,6 @@ c4person -> styling.c4styled -> styling.c4sized style.stroke-width: 1 } --- c4-theme -- - -vars: { - d2-config: { - theme-id: 303 - } -} - -customer: |md - ## Personal Banking Customer - [person] - - A customer of the bank, with personal bank accounts. -| { - shape: c4-person -} - -internet_banking_system: |md - ## Internet Banking System - [Software System] -| { - shape: rectangle - label.near: bottom-left -} - -internet_banking_system.web_app: |md - ## Web Application - [Container: Java and Spring MVC] - - Delivers the static content and the Internet banking single page application. -| { - shape: rectangle -} - -internet_banking_system.spa: |md - ## Single-Page Application - [Container: JavaScript and Angular] - - Provides all of the Internet banking functionality to customers via their web browser. -| { - shape: rectangle -} - -internet_banking_system.mobile_app: |md - ## Mobile App - [Container: Xamarin] - - Provides a limited subset of the Internet banking functionality to customers via their mobile device. -| { - shape: rectangle -} - -internet_banking_system.api_app: |md - ## API Application - [Container: Java and Spring MVC] - - Provides Internet banking functionality via a JSON/HTTPS API. -| { - shape: rectangle -} - -internet_banking_system.database: |md - ## Database - [Container: Oracle Database Schema] - - Stores user registration information, hashed authentication credentials, access logs, etc. -| { - shape: rectangle -} - -email_system: |md - ## E-mail System - [Software System] - - The internal Microsoft Exchange e-mail system. -| { - shape: rectangle -} - -mainframe: |md - ## Mainframe Banking System - [Software System] - - Stores all of the core banking information about customers, accounts, transactions, etc. -| { - shape: rectangle -} - -# Connections -customer -> internet_banking_system.web_app: "Visits bigbank.com/ib using\n[HTTPS]" -internet_banking_system.web_app -> internet_banking_system.spa: "Delivers to the customer's web browser" -customer -> internet_banking_system.spa: "Views account balances, and makes payments using" -customer -> internet_banking_system.mobile_app: "Views account balances, and makes payments using" -internet_banking_system.spa -> internet_banking_system.api_app: "Makes API calls to\n[JSON/HTTPS]" -internet_banking_system.mobile_app -> internet_banking_system.api_app: "Makes API calls to\n[JSON/HTTPS]" -internet_banking_system.api_app -> mainframe: "Makes API calls to\n[XML/HTTPS]" -customer -> email_system: "Sends e-mails to" -internet_banking_system.api_app -> email_system: "Sends e-mail using" -internet_banking_system.database <-> internet_banking_system.api_app: "Reads from and writes to\n[SQL/TCP]" - -- legend -- vars: { d2-legend: { @@ -1221,3 +1121,43 @@ A customer of the bank, with personal bank accounts shape: c4-person label.near: bottom-center } + +customer1: |md + ## Personal Banking Customer + [person] + + A customer of the bank, with pekkrsonal bank ccountskks. +| { + shape: c4-person +} + +customer2: |md + ## Personal Banking Customerk + [person] + + A customer of the bank, with pekkrsonal bank accountskks. + + A customer of the bank, with pekkrsonal bank accountskks. + + A customer of the bank, with pekkrsonal bank accountskks. +| { + shape: c4-person +} + +customer3: |md + ## Personal Banking Customer + [person] + + A customer of the bank, with pekkrsonal bank accountskks. +| { + shape: c4-person +} + +customer4: |md + ## Personal Banking Customer + [person] + + A customer of the bank, with pekkrsonal bank accountskks. +| { + shape: c4-person +} diff --git a/lib/shape/shape_c4_person.go b/lib/shape/shape_c4_person.go index 99d47b07d..9424347a1 100644 --- a/lib/shape/shape_c4_person.go +++ b/lib/shape/shape_c4_person.go @@ -8,8 +8,13 @@ import ( "oss.terrastruct.com/util-go/go2" ) -// Optimal value for circular arc approximation with cubic bezier curves -const kCircleApprox = 0.5522847498307936 // 4*(math.Sqrt(2)-1)/3 +// Constants to match frontend implementation +const ( + C4_PERSON_AR_LIMIT = 1.5 + HEAD_RADIUS_FACTOR = 0.22 + BODY_TOP_FACTOR = 0.8 + CORNER_RADIUS_FACTOR = 0.175 +) type shapeC4Person struct { *baseShape @@ -26,32 +31,25 @@ func NewC4Person(box *geo.Box) Shape { return shape } -const ( - C4_PERSON_AR_LIMIT = 1.5 -) - func (s shapeC4Person) GetInnerBox() *geo.Box { width := s.Box.Width height := s.Box.Height - headRadius := width * 0.22 - headCenterY := height * 0.18 - bodyTop := headCenterY + headRadius*0.8 + headRadius := width * HEAD_RADIUS_FACTOR + headCenterY := headRadius + bodyTop := headCenterY + headRadius*BODY_TOP_FACTOR - // Use a small fixed percentage instead of the full corner radius - horizontalPadding := width * 0.05 // 5% padding + // Horizontal padding = 5% of width + horizontalPadding := width * 0.05 + // Vertical padding = 3% of height + verticalPadding := height * 0.03 tl := s.Box.TopLeft.Copy() tl.X += horizontalPadding + tl.Y += bodyTop + verticalPadding - // Add vertical padding - tl.Y += bodyTop + height*0.03 - - // Width minus padding on both sides innerWidth := width - (horizontalPadding * 2) - - // Add bottom padding - innerHeight := height - (tl.Y - s.Box.TopLeft.Y) - (height * 0.03) + innerHeight := height - bodyTop - (verticalPadding * 2) return geo.NewBox(tl, innerWidth, innerHeight) } @@ -62,25 +60,25 @@ func bodyPath(box *geo.Box) *svg.SvgPathContext { pc := svg.NewSVGPathContext(box.TopLeft, 1, 1) - headRadius := width * 0.22 - headCenterY := height * 0.18 - bodyTop := headCenterY + headRadius*0.8 + headRadius := width * HEAD_RADIUS_FACTOR + headCenterY := headRadius + bodyTop := headCenterY + headRadius*BODY_TOP_FACTOR bodyWidth := width bodyHeight := height - bodyTop bodyLeft := 0 - // Ensure cornerRadius is constrained to a portion of the shortest dimension - // This prevents distorted corners when width is large compared to height - cornerRadius := math.Min(width*0.175, bodyHeight*0.25) + + // Use the same corner radius calculation as frontend + cornerRadius := math.Min(width*CORNER_RADIUS_FACTOR, bodyHeight*0.25) pc.StartAt(pc.Absolute(float64(bodyLeft), bodyTop+cornerRadius)) - pc.C(true, 0, -kCircleApprox*cornerRadius, kCircleApprox*cornerRadius, -cornerRadius, cornerRadius, -cornerRadius) + pc.C(true, 0, -4*(math.Sqrt(2)-1)/3*cornerRadius, 4*(math.Sqrt(2)-1)/3*cornerRadius, -cornerRadius, cornerRadius, -cornerRadius) pc.H(true, bodyWidth-2*cornerRadius) - pc.C(true, kCircleApprox*cornerRadius, 0, cornerRadius, kCircleApprox*cornerRadius, cornerRadius, cornerRadius) + pc.C(true, 4*(math.Sqrt(2)-1)/3*cornerRadius, 0, cornerRadius, 4*(math.Sqrt(2)-1)/3*cornerRadius, cornerRadius, cornerRadius) pc.V(true, bodyHeight-2*cornerRadius) - pc.C(true, 0, kCircleApprox*cornerRadius, -kCircleApprox*cornerRadius, cornerRadius, -cornerRadius, cornerRadius) + pc.C(true, 0, 4*(math.Sqrt(2)-1)/3*cornerRadius, -4*(math.Sqrt(2)-1)/3*cornerRadius, cornerRadius, -cornerRadius, cornerRadius) pc.H(true, -(bodyWidth - 2*cornerRadius)) - pc.C(true, -kCircleApprox*cornerRadius, 0, -cornerRadius, -kCircleApprox*cornerRadius, -cornerRadius, -cornerRadius) + pc.C(true, -4*(math.Sqrt(2)-1)/3*cornerRadius, 0, -cornerRadius, -4*(math.Sqrt(2)-1)/3*cornerRadius, -cornerRadius, -cornerRadius) pc.Z() return pc @@ -88,34 +86,33 @@ func bodyPath(box *geo.Box) *svg.SvgPathContext { func headPath(box *geo.Box) *svg.SvgPathContext { width := box.Width - height := box.Height pc := svg.NewSVGPathContext(box.TopLeft, 1, 1) - headRadius := width * 0.22 + headRadius := width * HEAD_RADIUS_FACTOR headCenterX := width / 2 - headCenterY := height * 0.18 + headCenterY := headRadius pc.StartAt(pc.Absolute(headCenterX, headCenterY-headRadius)) pc.C(false, - headCenterX+headRadius*kCircleApprox, headCenterY-headRadius, - headCenterX+headRadius, headCenterY-headRadius*kCircleApprox, + headCenterX+headRadius*4*(math.Sqrt(2)-1)/3, headCenterY-headRadius, + headCenterX+headRadius, headCenterY-headRadius*4*(math.Sqrt(2)-1)/3, headCenterX+headRadius, headCenterY) pc.C(false, - headCenterX+headRadius, headCenterY+headRadius*kCircleApprox, - headCenterX+headRadius*kCircleApprox, headCenterY+headRadius, + headCenterX+headRadius, headCenterY+headRadius*4*(math.Sqrt(2)-1)/3, + headCenterX+headRadius*4*(math.Sqrt(2)-1)/3, headCenterY+headRadius, headCenterX, headCenterY+headRadius) pc.C(false, - headCenterX-headRadius*kCircleApprox, headCenterY+headRadius, - headCenterX-headRadius, headCenterY+headRadius*kCircleApprox, + headCenterX-headRadius*4*(math.Sqrt(2)-1)/3, headCenterY+headRadius, + headCenterX-headRadius, headCenterY+headRadius*4*(math.Sqrt(2)-1)/3, headCenterX-headRadius, headCenterY) pc.C(false, - headCenterX-headRadius, headCenterY-headRadius*kCircleApprox, - headCenterX-headRadius*kCircleApprox, headCenterY-headRadius, + headCenterX-headRadius, headCenterY-headRadius*4*(math.Sqrt(2)-1)/3, + headCenterX-headRadius*4*(math.Sqrt(2)-1)/3, headCenterY-headRadius, headCenterX, headCenterY-headRadius) return pc @@ -123,13 +120,12 @@ func headPath(box *geo.Box) *svg.SvgPathContext { func (s shapeC4Person) Perimeter() []geo.Intersectable { width := s.Box.Width - height := s.Box.Height bodyPerimeter := bodyPath(s.Box).Path - headRadius := width * 0.22 + headRadius := width * HEAD_RADIUS_FACTOR headCenterX := s.Box.TopLeft.X + width/2 - headCenterY := s.Box.TopLeft.Y + height*0.18 + headCenterY := s.Box.TopLeft.Y + headRadius headCenter := geo.NewPoint(headCenterX, headCenterY) headEllipse := geo.NewEllipse(headCenter, headRadius, headRadius) @@ -150,18 +146,18 @@ func (s shapeC4Person) GetDimensionsToFit(width, height, paddingX, paddingY floa // Account for 10% total horizontal padding (5% on each side) totalWidth := contentWidth / 0.9 - headRadius := totalWidth * 0.22 - headCenterY := totalWidth * 0.18 - bodyTop := headCenterY + headRadius*0.8 + headRadius := totalWidth * HEAD_RADIUS_FACTOR - // Include vertical padding from GetInnerBox + // Use positioning matching frontend + headCenterY := headRadius + bodyTop := headCenterY + headRadius*BODY_TOP_FACTOR + + // Include vertical padding verticalPadding := totalWidth * 0.06 // 3% top + 3% bottom totalHeight := contentHeight + bodyTop + verticalPadding - // Calculate minimum height based on actual proportions - // Head height: 2 * headRadius = 0.44 * width - // Body should be at least half the width - minHeight := totalWidth * 0.95 // Reduced from 1.2 + // Calculate minimum height + minHeight := totalWidth * 0.95 if totalHeight < minHeight { totalHeight = minHeight }