diff --git a/src/components/PageReader.test.tsx b/src/components/PageReader.test.tsx index b69d46a..4408041 100644 --- a/src/components/PageReader.test.tsx +++ b/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' }) diff --git a/src/components/PageReader.tsx b/src/components/PageReader.tsx index 4e52098..418fdca 100644 --- a/src/components/PageReader.tsx +++ b/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)