Merge pull request #369 from ejulio-ts/page-render

Fix shape:note to resize the top right corner (fold) as the shape size grows

d2layouts/d2sequence/sequence_diagram.go

@@ -119,8 +119,7 @@ func newSequenceDiagram(objects []*d2graph.Object, messages []*d2graph.Edge) *se
 			// edge groups are children of actors with no edges and children edges
 			if child.IsSequenceDiagramNote() {
 				sd.verticalIndices[child.AbsID()] = getObjEarliestLineNum(child)
-				// TODO change to page type when it doesn't look deformed
-				child.Attributes.Shape = d2graph.Scalar{Value: shape.SQUARE_TYPE}
+				child.Attributes.Shape = d2graph.Scalar{Value: shape.PAGE_TYPE}
 				sd.notes = append(sd.notes, child)
 				sd.objectRank[child] = rank
 				child.LabelPosition = go2.Pointer(string(label.InsideMiddleCenter))

e2etests/testdata/stable/all_shapes/dagre/board.exp.json

@@ -765,11 +765,11 @@
           "y": 420
         },
         {
-          "x": 85.4,
+          "x": 85.6,
           "y": 441.8
         },
         {
-          "x": 85,
+          "x": 86,
           "y": 489
         }
       ],

e2etests/testdata/stable/all_shapes_multiple/dagre/board.exp.json

@@ -765,11 +765,11 @@
           "y": 420
         },
         {
-          "x": 85.4,
+          "x": 85.6,
           "y": 441.8
         },
         {
-          "x": 85,
+          "x": 86,
           "y": 489
         }
       ],

e2etests/testdata/stable/all_shapes_shadow/dagre/board.exp.json

@@ -765,11 +765,11 @@
           "y": 420
         },
         {
-          "x": 85.4,
+          "x": 85.6,
           "y": 441.8
         },
         {
-          "x": 85,
+          "x": 86,
           "y": 489
         }
       ],

e2etests/testdata/stable/sequence_diagram_groups/dagre/board.exp.json

@@ -319,7 +319,7 @@
     },
     {
       "id": "c.what would arnold say",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 470,
         "y": 1500
@@ -398,7 +398,7 @@
     },
     {
       "id": "d.this note",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 767,
         "y": 1886

e2etests/testdata/stable/sequence_diagram_groups/elk/board.exp.json

@@ -319,7 +319,7 @@
     },
     {
       "id": "c.what would arnold say",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 470,
         "y": 1500
@@ -398,7 +398,7 @@
     },
     {
       "id": "d.this note",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 767,
         "y": 1886

e2etests/testdata/stable/sequence_diagram_long_note/dagre/board.exp.json

@@ -43,7 +43,7 @@
     },
     {
       "id": "b.note",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": -163,
         "y": 460
@@ -123,7 +123,7 @@
     },
     {
       "id": "a.note",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 343,
         "y": 716

e2etests/testdata/stable/sequence_diagram_long_note/dagre/sketch.exp.svg

@@ -18,7 +18,7 @@ width="850" height="1162" viewBox="-263 -26 850 1162"><style type="text/css">
 }
 
 ]]>
-</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="337" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="412.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(a -- )[0]"><path d="M 412.000000 202.000000 L 412.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 410.000000 330.000000 L 103.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="b.note"><g class="shape" ><rect x="-163" y="460" width="525" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.500000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><rect x="343" y="716" width="137" height="190" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="411.500000" y="782.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="411.500000" dy="0.000000">just</tspan><tspan x="411.500000" dy="18.000000">a</tspan><tspan x="411.500000" dy="18.000000">long</tspan><tspan x="411.500000" dy="18.000000">note</tspan><tspan x="411.500000" dy="18.000000">here</tspan></text></g><style type="text/css"><![CDATA[
+</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="337" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="412.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(a -- )[0]"><path d="M 412.000000 202.000000 L 412.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 410.000000 330.000000 L 103.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="b.note"><g class="shape" ><path d="M -162.5 460 H 341.1836 C 342.3544 460 343.479 460.4563 344.3189 461.272 L 360.6353 477.12 C 361.5077 477.9674 362 479.1318 362 480.348 V 585.5 C 362 585.7761 361.7761 586 361.5 586 H -162.5 C -162.7761 586 -163 585.7761 -163 585.5 V 460.5 C -163 460.2239 -162.7761 460 -162.5 460 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 360.918 586 H -161.918 C -162.5672 586 -163 585.5671 -163 584.9178 V 461.0822 C -163 460.4329 -162.5672 460 -161.918 460 H 340.3607 C 341.0099 460 341.4427 460.4329 341.4427 461.0822 V 478.1808 C 341.4427 479.4794 342.3083 480.5616 343.823 480.5616 H 360.918 C 361.5672 480.5616 362 480.9945 362 481.6436 V 584.9178 C 361 585.5671 361.5672 586 360.918 586 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.500000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 343.5 716 H 459.1836 C 460.3544 716 461.479 716.4563 462.3189 717.272 L 478.6353 733.12 C 479.5077 733.9674 480 735.1318 480 736.348 V 905.5 C 480 905.7761 479.7761 906 479.5 906 H 343.5 C 343.2239 906 343 905.7761 343 905.5 V 716.5 C 343 716.2239 343.2239 716 343.5 716 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 478.918 906 H 344.082 C 343.4328 906 343 905.5671 343 904.9178 V 717.0822 C 343 716.4329 343.4328 716 344.082 716 H 458.3607 C 459.0099 716 459.4427 716.4329 459.4427 717.0822 V 734.1808 C 459.4427 735.4794 460.3083 736.5616 461.823 736.5616 H 478.918 C 479.5672 736.5616 480 736.9945 480 737.6436 V 904.9178 C 479 905.5671 479.5672 906 478.918 906 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="411.500000" y="782.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="411.500000" dy="0.000000">just</tspan><tspan x="411.500000" dy="18.000000">a</tspan><tspan x="411.500000" dy="18.000000">long</tspan><tspan x="411.500000" dy="18.000000">note</tspan><tspan x="411.500000" dy="18.000000">here</tspan></text></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/sequence_diagram_long_note/elk/board.exp.json

@@ -43,7 +43,7 @@
     },
     {
       "id": "b.note",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": -163,
         "y": 460
@@ -123,7 +123,7 @@
     },
     {
       "id": "a.note",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 343,
         "y": 716

e2etests/testdata/stable/sequence_diagram_long_note/elk/sketch.exp.svg

@@ -18,7 +18,7 @@ width="850" height="1162" viewBox="-263 -26 850 1162"><style type="text/css">
 }
 
 ]]>
-</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="337" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="412.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(a -- )[0]"><path d="M 412.000000 202.000000 L 412.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 410.000000 330.000000 L 103.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="b.note"><g class="shape" ><rect x="-163" y="460" width="525" height="126" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.500000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><rect x="343" y="716" width="137" height="190" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="411.500000" y="782.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="411.500000" dy="0.000000">just</tspan><tspan x="411.500000" dy="18.000000">a</tspan><tspan x="411.500000" dy="18.000000">long</tspan><tspan x="411.500000" dy="18.000000">note</tspan><tspan x="411.500000" dy="18.000000">here</tspan></text></g><style type="text/css"><![CDATA[
+</style><g id="b"><g class="shape" ><rect x="24" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="99.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">b</text></g><g id="a"><g class="shape" ><rect x="337" y="74" width="150" height="126" style="fill:#EDF0FD;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" /></g><text class="text" x="412.000000" y="140.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a</text></g><g id="(b -- )[0]"><path d="M 99.000000 202.000000 L 99.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(a -- )[0]"><path d="M 412.000000 202.000000 L 412.000000 1035.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;stroke-dasharray:12.000000,11.838767;" mask="url(#labels)"/></g><g id="(a -&gt; b)[0]"><marker id="mk-3990223579" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon class="connection" fill="#0D32B2" stroke-width="2" points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" /> </marker><path d="M 410.000000 330.000000 L 103.000000 330.000000" class="connection" style="fill:none;stroke:#0D32B2;opacity:1.000000;stroke-width:2;" marker-end="url(#mk-3990223579)" mask="url(#labels)"/></g><g id="b.note"><g class="shape" ><path d="M -162.5 460 H 341.1836 C 342.3544 460 343.479 460.4563 344.3189 461.272 L 360.6353 477.12 C 361.5077 477.9674 362 479.1318 362 480.348 V 585.5 C 362 585.7761 361.7761 586 361.5 586 H -162.5 C -162.7761 586 -163 585.7761 -163 585.5 V 460.5 C -163 460.2239 -162.7761 460 -162.5 460 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 360.918 586 H -161.918 C -162.5672 586 -163 585.5671 -163 584.9178 V 461.0822 C -163 460.4329 -162.5672 460 -161.918 460 H 340.3607 C 341.0099 460 341.4427 460.4329 341.4427 461.0822 V 478.1808 C 341.4427 479.4794 342.3083 480.5616 343.823 480.5616 H 360.918 C 361.5672 480.5616 362 480.9945 362 481.6436 V 584.9178 C 361 585.5671 361.5672 586 360.918 586 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="99.500000" y="526.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25">a note here to remember that padding must consider notes too</text></g><g id="a.note"><g class="shape" ><path d="M 343.5 716 H 459.1836 C 460.3544 716 461.479 716.4563 462.3189 717.272 L 478.6353 733.12 C 479.5077 733.9674 480 735.1318 480 736.348 V 905.5 C 480 905.7761 479.7761 906 479.5 906 H 343.5 C 343.2239 906 343 905.7761 343 905.5 V 716.5 C 343 716.2239 343.2239 716 343.5 716 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/><path d="M 478.918 906 H 344.082 C 343.4328 906 343 905.5671 343 904.9178 V 717.0822 C 343 716.4329 343.4328 716 344.082 716 H 458.3607 C 459.0099 716 459.4427 716.4329 459.4427 717.0822 V 734.1808 C 459.4427 735.4794 460.3083 736.5616 461.823 736.5616 H 478.918 C 479.5672 736.5616 480 736.9945 480 737.6436 V 904.9178 C 479 905.5671 479.5672 906 478.918 906 Z" style="fill:#FFFFFF;stroke:#0D32B2;opacity:1.000000;stroke-width:2;"/></g><text class="text" x="411.500000" y="782.000000" style="text-anchor:middle;font-size:16px;fill:#0A0F25"><tspan x="411.500000" dy="0.000000">just</tspan><tspan x="411.500000" dy="18.000000">a</tspan><tspan x="411.500000" dy="18.000000">long</tspan><tspan x="411.500000" dy="18.000000">note</tspan><tspan x="411.500000" dy="18.000000">here</tspan></text></g><style type="text/css"><![CDATA[
 .text {
 	font-family: "font-regular";
 }

e2etests/testdata/stable/sequence_diagram_nested_groups/dagre/board.exp.json

@@ -279,7 +279,7 @@
     },
     {
       "id": "a.a note",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 25,
         "y": 720
@@ -553,7 +553,7 @@
     },
     {
       "id": "b.note",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 149,
         "y": 2076
@@ -593,7 +593,7 @@
     },
     {
       "id": "a.note",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 30,
         "y": 1756

e2etests/testdata/stable/sequence_diagram_nested_groups/elk/board.exp.json

@@ -279,7 +279,7 @@
     },
     {
       "id": "a.a note",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 25,
         "y": 720
@@ -553,7 +553,7 @@
     },
     {
       "id": "b.note",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 149,
         "y": 2076
@@ -593,7 +593,7 @@
     },
     {
       "id": "a.note",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 30,
         "y": 1756

e2etests/testdata/stable/sequence_diagram_note/dagre/board.exp.json

@@ -163,7 +163,7 @@
     },
     {
       "id": "a.explanation",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 7,
         "y": 460
@@ -203,7 +203,7 @@
     },
     {
       "id": "a.another explanation",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": -21,
         "y": 716
@@ -243,7 +243,7 @@
     },
     {
       "id": "b.\"Some one who believes imaginary things\\n appear right before your i's.\"",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 160,
         "y": 1102
@@ -283,7 +283,7 @@
     },
     {
       "id": "d.The earth is like a tiny grain of sand, only much, much heavier",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 591,
         "y": 1504

e2etests/testdata/stable/sequence_diagram_note/elk/board.exp.json

@@ -163,7 +163,7 @@
     },
     {
       "id": "a.explanation",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 7,
         "y": 460
@@ -203,7 +203,7 @@
     },
     {
       "id": "a.another explanation",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": -21,
         "y": 716
@@ -243,7 +243,7 @@
     },
     {
       "id": "b.\"Some one who believes imaginary things\\n appear right before your i's.\"",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 160,
         "y": 1102
@@ -283,7 +283,7 @@
     },
     {
       "id": "d.The earth is like a tiny grain of sand, only much, much heavier",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 591,
         "y": 1504

e2etests/testdata/stable/sequence_diagram_real/dagre/board.exp.json

@@ -403,7 +403,7 @@
     },
     {
       "id": "How this is rendered.d2compiler.measurements also take place",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 445,
         "y": 756

e2etests/testdata/stable/sequence_diagram_real/elk/board.exp.json

@@ -403,7 +403,7 @@
     },
     {
       "id": "How this is rendered.d2compiler.measurements also take place",
-      "type": "rectangle",
+      "type": "page",
       "pos": {
         "x": 457,
         "y": 768

lib/shape/shape_page.go

@@ -18,17 +18,24 @@ func NewPage(box *geo.Box) Shape {
 	}
 }
 
+const PAGE_WIDTH = 66.
+const PAGE_HEIGHT = 79.
+
 func pageOuterPath(box *geo.Box) *svg.SvgPathContext {
-	pc := svg.NewSVGPathContext(box.TopLeft, box.Width/66, box.Height/79.0)
+	pc := svg.NewSVGPathContext(box.TopLeft, 1., 1.)
+	baseX := box.Width - PAGE_WIDTH
+	baseY := box.Height - PAGE_HEIGHT
 	pc.StartAt(pc.Absolute(0.5, 0))
-	pc.H(false, 45.1836)
-	pc.C(false, 46.3544, 0.0, 47.479, 0.456297, 48.3189, 1.27202)
-	pc.L(false, 64.6353, 17.12)
-	pc.C(false, 65.5077, 17.9674, 66.0, 19.1318, 66.0, 20.348)
-	pc.V(false, 78.5)
-	pc.C(false, 66.0, 78.7761, 65.7761, 79.0, 65.5, 79.0)
-	pc.H(false, 0.499999)
-	pc.C(false, 0.223857, 79.0, 0.0, 78.7761, 0.0, 78.5)
+	pc.H(false, baseX+45.1836) // = width-(66+45.1836)
+	pc.C(false, baseX+46.3544, 0.0, baseX+47.479, 0.456297, baseX+48.3189, 1.27202)
+	pc.L(false, baseX+64.6353, 17.12)
+	pc.C(false, baseX+65.5077, 17.9674, baseX+66., 19.1318, baseX+66., 20.348)
+	// baseY is not needed above because the coordinates start at 0
+	pc.V(false, baseY+78.5)
+	pc.C(false, baseX+66.0, baseY+78.7761, baseX+65.7761, baseY+79.0, baseX+65.5, baseY+79.0)
+
+	pc.H(false, .499999)
+	pc.C(false, 0.223857, baseY+79.0, 0.0, baseY+78.7761, 0.0, baseY+78.5)
 	pc.V(false, 0.499999)
 	pc.C(false, 0.0, 0.223857, 0.223857, 0.0, 0.5, 0.0)
 	pc.Z()
@@ -36,20 +43,24 @@ func pageOuterPath(box *geo.Box) *svg.SvgPathContext {
 }
 
 func pageInnerPath(box *geo.Box) *svg.SvgPathContext {
-	pc := svg.NewSVGPathContext(box.TopLeft, box.Width/30.5, box.Height/36.5)
-	pc.StartAt(pc.Absolute(30, 36.5))
-	pc.H(false, 0.5)
-	pc.C(true, -0.3, 0, -0.5, -0.2, -0.5, -0.5)
-	pc.V(false, 0.5)
-	pc.C(true, 0, -0.3, 0.2, -0.5, 0.5, -0.5)
-	pc.H(true, 20.3)
-	pc.C(true, 0.3, 0, 0.5, 0.2, 0.5, 0.5)
-	pc.V(true, 7.9)
-	pc.C(true, 0, 0.6, 0.4, 1.1, 1.1, 1.1)
-	pc.H(false, 30)
-	pc.C(true, 0.3, 0, 0.5, 0.2, 0.5, 0.5)
-	pc.V(false, 36)
-	pc.C(false, 30.5, 36.3, 30.3, 36.5, 30, 36.5)
+	baseX := box.Width - PAGE_WIDTH
+	baseY := box.Height - PAGE_HEIGHT
+
+	pc := svg.NewSVGPathContext(box.TopLeft, 1., 1.)
+	pc.StartAt(pc.Absolute(baseX+64.91803, baseY+79.))
+	pc.H(false, 1.08196)
+	pc.C(true, -0.64918, 0, -1.08196, -0.43287, -1.08196, -1.08219)
+	pc.V(false, 1.08219)
+	pc.C(true, 0, -0.64931, 0.43278, -1.08219, 1.08196, -1.08219)
+
+	pc.H(true, baseX+43.27868)
+	pc.C(true, 0.64918, 0, 1.08196, 0.43287, 1.08196, 1.08219)
+	pc.V(true, 17.09863)
+	pc.C(true, 0, 1.29863, 0.86557, 2.38082, 2.38032, 2.38082)
+	pc.H(false, baseX+64.91803)
+	pc.C(true, .64918, 0, 1.08196, 0.43287, 1.08196, 1.08196)
+	pc.V(false, baseY+77.91780)
+	pc.C(false, baseX+64.99999, baseY+78.56712, baseX+65.56721, baseY+79, baseX+64.91803, baseY+79)
 	pc.Z()
 	return pc
 }