fix: render decoded ink coordinates

src/components/PageReader.test.tsx

@@ -70,6 +70,24 @@ const page: OneNotePageDto = {
       size: 12,
       layout: {},
     },
+    {
+      kind: 'ink',
+      id: 'ink-1',
+      strokes: [
+        {
+          points: [
+            { x: 10, y: 20 },
+            { x: 15, y: 25 },
+            { x: 30, y: 40 },
+          ],
+          width: 2,
+          color: 0xff0000,
+        },
+      ],
+      children: [],
+      boundingBox: { x: 10, y: 20, width: 20, height: 20 },
+      layout: {},
+    },
   ],
   diagnostics: [],
 };
@@ -105,6 +123,13 @@ describe('PageReader structured content', () => {
       'https://example.com/'
     );
     expect(screen.getByRole('table')).toHaveTextContent('AB');
+    expect(
+      screen.getByRole('img', { name: '1 handwritten or drawn stroke' })
+    ).toHaveAttribute('viewBox', '-60 -50 160 160');
+    expect(document.querySelector('.onenote-ink path')).toHaveAttribute(
+      'd',
+      'M 10 20 L 15 25 30 40'
+    );
     await waitFor(() =>
       expect(
         screen.getByRole('img', { name: 'Embedded diagram' })

src/components/PageReader.tsx

@@ -472,10 +472,10 @@ function InkView({ ink }: { ink: OneNoteInkBlock }) {
 }
 
 function inkPath(stroke: OneNoteInkStroke): string {
-  const [first, ...deltas] = stroke.points;
+  const [first, ...points] = stroke.points;
   if (!first) return '';
-  if (deltas.length === 0) return `M ${first.x} ${first.y} l 0 0`;
-  return `M ${first.x} ${first.y} l ${deltas
+  if (points.length === 0) return `M ${first.x} ${first.y} l 0 0`;
+  return `M ${first.x} ${first.y} L ${points
     .map((point) => `${point.x} ${point.y}`)
     .join(' ')}`;
 }
@@ -488,21 +488,11 @@ function boundingBoxFromInk(
   let xMax = -Infinity;
   let yMax = -Infinity;
   for (const stroke of strokes) {
-    const [first, ...deltas] = stroke.points;
-    if (!first) continue;
-    let x = first.x;
-    let y = first.y;
-    xMin = Math.min(xMin, x);
-    yMin = Math.min(yMin, y);
-    xMax = Math.max(xMax, x);
-    yMax = Math.max(yMax, y);
-    for (const delta of deltas) {
-      x += delta.x;
-      y += delta.y;
-      xMin = Math.min(xMin, x);
-      yMin = Math.min(yMin, y);
-      xMax = Math.max(xMax, x);
-      yMax = Math.max(yMax, y);
+    for (const point of stroke.points) {
+      xMin = Math.min(xMin, point.x);
+      yMin = Math.min(yMin, point.y);
+      xMax = Math.max(xMax, point.x);
+      yMax = Math.max(yMax, point.y);
     }
   }
   return Number.isFinite(xMin)