From 1b33249937c7a993a22c9db0d12c1e3b31976060 Mon Sep 17 00:00:00 2001
From: Matheus Santos <matheus.r.d.s10@hotmail.com>
Date: Thu, 16 May 2024 15:37:10 -0300
Subject: [PATCH] Implement embedSvg

---
 apps/web/test19.html      |  8 ++---
 apps/web/test20.html      |  4 +--
 apps/web/test21.html      |  2 +-
 apps/web/test22.html      |  2 +-
 apps/web/test23.html      |  2 +-
 apps/web/test24.html      |  2 +-
 apps/web/test25.html      |  8 ++---
 apps/web/test26.html      |  2 +-
 apps/web/test27.html      |  6 ++--
 apps/web/test28.html      |  2 +-
 apps/web/test29.html      | 15 +++++++--
 src/api/PDFDocument.ts    | 28 +++++++++++++++
 src/api/PDFPage.ts        | 32 ++++--------------
 src/api/PDFPageOptions.ts |  2 --
 src/api/PDFSvg.ts         | 10 ++++++
 src/api/index.ts          |  1 +
 src/api/svg.ts            | 71 +++++++--------------------------------
 17 files changed, 90 insertions(+), 107 deletions(-)
 create mode 100644 src/api/PDFSvg.ts

diff --git a/apps/web/test19.html b/apps/web/test19.html
index bdfd30843..36b144b80 100644
--- a/apps/web/test19.html
+++ b/apps/web/test19.html
@@ -248,21 +248,21 @@
         y: 0,
         size: 20,
       });
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         x: 100,
         y: 841 /* 
           width: 427 / 3,
           height: 769 / 3 */,
       });
-      await firstPage.drawSvg(svgPowerTwo, {
+      firstPage.drawSvg(svgPowerTwo, {
         x: 550,
         y: 841,
       });
-      await secondPage.drawSvg(svgDemo, {
+      secondPage.drawSvg(svgDemo, {
         x: 100,
         y: 841,
       });
-      await secondPage.drawSvg(scienceSvgs, {
+      secondPage.drawSvg(scienceSvgs, {
         x: 100,
         y: 500,
       });
diff --git a/apps/web/test20.html b/apps/web/test20.html
index 91318c91b..3908d63f5 100644
--- a/apps/web/test20.html
+++ b/apps/web/test20.html
@@ -138,11 +138,11 @@
         x: 100,
         y: 1000
       }); */
-      await firstPage.drawSvg(svg3, {
+      firstPage.drawSvg(svg3, {
         x: 100,
         y: 950,
       });
-      await firstPage.drawSvg(svg2, {
+      firstPage.drawSvg(svg2, {
         x: 100,
         y: 800,
       });
diff --git a/apps/web/test21.html b/apps/web/test21.html
index 79e92b414..84e275e3c 100644
--- a/apps/web/test21.html
+++ b/apps/web/test21.html
@@ -104,7 +104,7 @@
       drawLines(firstPage);
       drawLines(secondPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         x: 100,
         y: 800,
       });
diff --git a/apps/web/test22.html b/apps/web/test22.html
index 1d09b45b2..746259dc4 100644
--- a/apps/web/test22.html
+++ b/apps/web/test22.html
@@ -179,7 +179,7 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 173.0060640625,
         width: 167.68455000000003,
         x: 100,
diff --git a/apps/web/test23.html b/apps/web/test23.html
index 22d2d4e5a..8c5dde7a6 100644
--- a/apps/web/test23.html
+++ b/apps/web/test23.html
@@ -177,7 +177,7 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 595.28,
         width: 841.89,
         // height: 100,
diff --git a/apps/web/test24.html b/apps/web/test24.html
index 6bf7fbb8c..b4780506a 100644
--- a/apps/web/test24.html
+++ b/apps/web/test24.html
@@ -171,7 +171,7 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 719,
         width: 611,
         // height: 100,
diff --git a/apps/web/test25.html b/apps/web/test25.html
index 74a9b3ad6..3c46d653f 100644
--- a/apps/web/test25.html
+++ b/apps/web/test25.html
@@ -140,7 +140,7 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 602,
         width: 409,
         // height: 32,
@@ -149,21 +149,21 @@
         y: 700,
       });
 
-      // await firstPage.drawSvg(svg3, {
+      // firstPage.drawSvg(svg3, {
       //   height: 100,
       //   width: 100,
       //   x: 100,
       //   y: 700
       // })
 
-      // await firstPage.drawSvg(svg2, {
+      // firstPage.drawSvg(svg2, {
       //   height: 100,
       //   width: 100,
       //   x: 100,
       //   y: 500
       // })
 
-      // await firstPage.drawSvg(svg4, {
+      // firstPage.drawSvg(svg4, {
       //   height: 100,
       //   width: 100,
       //   x: 100,
diff --git a/apps/web/test26.html b/apps/web/test26.html
index 535cd93b8..61d9526ba 100644
--- a/apps/web/test26.html
+++ b/apps/web/test26.html
@@ -145,7 +145,7 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 240.75,
         width: 249.75,
         x: 100,
diff --git a/apps/web/test27.html b/apps/web/test27.html
index 58d2b3f81..236285dd5 100644
--- a/apps/web/test27.html
+++ b/apps/web/test27.html
@@ -321,21 +321,21 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 246.75,
         width: 231,
         x: 100,
         y: 700,
       });
 
-      await firstPage.drawSvg(cutArrowSvg, {
+      firstPage.drawSvg(cutArrowSvg, {
         height: 246.75,
         width: 231,
         x: 500,
         y: 700,
       });
 
-      await firstPage.drawSvg(simpleCutArrowSvg, {
+      firstPage.drawSvg(simpleCutArrowSvg, {
         height: 246.75,
         width: 231,
         x: 500,
diff --git a/apps/web/test28.html b/apps/web/test28.html
index be48b50dc..ff1bff9eb 100644
--- a/apps/web/test28.html
+++ b/apps/web/test28.html
@@ -227,7 +227,7 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 300,
         width: 400,
         x: 100,
diff --git a/apps/web/test29.html b/apps/web/test29.html
index d8c000698..f0a38c1e6 100644
--- a/apps/web/test29.html
+++ b/apps/web/test29.html
@@ -32,7 +32,7 @@
     <iframe id="iframe"></iframe>
   </body>
 
-  <script type="text/javascript">
+  <script type="text/javascript" >
     // startFpsTracker('animation-target');
 
     const renderInIframe = (pdfBytes) => {
@@ -105,12 +105,23 @@
       // drawGrid(firstPage)
       drawLines(firstPage);
 
-      await firstPage.drawSvg(svg, {
+      firstPage.drawSvg(svg, {
         height: 100,
         width: 100,
         x: 100,
         y: 700,
       });
+
+      const svg2 = `<svg height="200" width="300">
+        <image width="300" height="200" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII" />
+        </svg>`
+      const pdfSvg = await pdfDoc.embedSvg(svg2)
+      firstPage.drawSvg(pdfSvg, {
+        height: 200,
+        width: 300,
+        x: 500,
+        y: 700,
+      });
       firstPage.moveUp(600);
       firstPage.moveRight(100);
       firstPage.drawSvgPath(
diff --git a/src/api/PDFDocument.ts b/src/api/PDFDocument.ts
index 88ee879a1..163bd3d2a 100644
--- a/src/api/PDFDocument.ts
+++ b/src/api/PDFDocument.ts
@@ -1,3 +1,8 @@
+import {
+  parse as parseHtml,
+  HTMLElement,
+  NodeType,
+} from 'node-html-better-parser';
 import Embeddable from './Embeddable';
 import {
   EncryptedPDFError,
@@ -68,6 +73,7 @@ import PDFEmbeddedFile from './PDFEmbeddedFile';
 import PDFJavaScript from './PDFJavaScript';
 import JavaScriptEmbedder from '../core/embedders/JavaScriptEmbedder';
 import { CipherTransformFactory } from '../core/crypto';
+import PDFSvg from './PDFSvg';
 
 /**
  * Represents a PDF document.
@@ -1110,6 +1116,28 @@ export default class PDFDocument {
     return pdfImage;
   }
 
+  async embedSvg(svg: string): Promise<PDFSvg> {
+    if (!svg) return new PDFSvg(svg)
+    const parsedSvg = parseHtml(svg)
+    const findImages = (element: HTMLElement): HTMLElement[] => {
+      if (element.tagName === 'image') return [element]
+      else return element.childNodes.map(child => child.nodeType === NodeType.ELEMENT_NODE ? findImages(child): []).flat()
+    }
+    const images = findImages(parsedSvg)
+    const imagesDict = {} as Record<string, PDFImage>
+    
+    await Promise.all(
+      images.map(async image => {
+        const href = image.attributes.href
+        if (!href || imagesDict[href]) return
+        const isPng = href.match(/\.png(\?|$)|^data:image\/png;base64/gim)
+        const pdfImage = isPng ? await this.embedPng(href) : await this.embedJpg(href)
+        imagesDict[href] = pdfImage
+      })
+    )
+    
+    return new PDFSvg(svg, imagesDict)
+  }
   /**
    * Embed one or more PDF pages into this document.
    *
diff --git a/src/api/PDFPage.ts b/src/api/PDFPage.ts
index eeb19553c..69dfa3c1d 100644
--- a/src/api/PDFPage.ts
+++ b/src/api/PDFPage.ts
@@ -20,6 +20,7 @@ import PDFDocument from './PDFDocument';
 import PDFEmbeddedPage from './PDFEmbeddedPage';
 import PDFFont from './PDFFont';
 import PDFImage from './PDFImage';
+import PDFSvg from './PDFSvg';
 import {
   PDFPageDrawCircleOptions,
   PDFPageDrawEllipseOptions,
@@ -57,7 +58,7 @@ import {
   assertRangeOrUndefined,
   assertIsOneOfOrUndefined,
 } from '../utils';
-import { drawSvg, drawSvgSync } from './svg';
+import { drawSvg } from './svg';
 
 /**
  * Represents a single page of a [[PDFDocument]].
@@ -1585,43 +1586,22 @@ export default class PDFPage {
    * @param svg The SVG to be drawn.
    * @param options The options to be used when drawing the SVG.
    */
-  async drawSvg(
-    svg: string,
-    options: PDFPageDrawSVGElementOptions = {},
-  ): Promise<void> {
-    assertIs(svg, 'svg', ['string']);
-    assertOrUndefined(options.x, 'options.x', ['number']);
-    assertOrUndefined(options.y, 'options.y', ['number']);
-    assertOrUndefined(options.width, 'options.width', ['number']);
-    assertOrUndefined(options.height, 'options.height', ['number']);
-
-    await drawSvg(this, svg, {
-      x: options.x ?? this.x,
-      y: options.y ?? this.y,
-      fonts: options.fonts,
-      width: options.width,
-      height: options.height,
-    });
-  }
-
-  drawSvgSync(
-    svg: string,
+  drawSvg(
+    svg: PDFSvg | string,
     options: PDFPageDrawSVGElementOptions = {},
   ): void {
-    assertIs(svg, 'svg', ['string']);
+    assertIs(svg, 'svg', ['string', [PDFSvg, 'PDFSvg']]);
     assertOrUndefined(options.x, 'options.x', ['number']);
     assertOrUndefined(options.y, 'options.y', ['number']);
     assertOrUndefined(options.width, 'options.width', ['number']);
     assertOrUndefined(options.height, 'options.height', ['number']);
-    assertOrUndefined(options.images, 'options.images', [[PDFImage, 'PDFImage']])
 
-    drawSvgSync(this, svg, {
+    drawSvg(this, svg, {
       x: options.x ?? this.x,
       y: options.y ?? this.y,
       fonts: options.fonts,
       width: options.width,
       height: options.height,
-      images: options.images
     });
   }
 
diff --git a/src/api/PDFPageOptions.ts b/src/api/PDFPageOptions.ts
index c170fcb39..c9b35a3b8 100644
--- a/src/api/PDFPageOptions.ts
+++ b/src/api/PDFPageOptions.ts
@@ -3,7 +3,6 @@ import PDFFont from './PDFFont';
 import { Rotation } from './rotations';
 import { FillRule, LineCapStyle, TextRenderingMode } from './operators';
 import type { Space, TransformationMatrix } from '../types';
-import PDFImage from './PDFImage';
 
 interface SvgOptions {
   matrix?: TransformationMatrix;
@@ -175,5 +174,4 @@ export interface PDFPageDrawSVGElementOptions {
   height?: number;
   fontSize?: number;
   fonts?: { [fontName: string]: PDFFont };
-  images?: Record<string, PDFImage>
 }
diff --git a/src/api/PDFSvg.ts b/src/api/PDFSvg.ts
new file mode 100644
index 000000000..2983f715b
--- /dev/null
+++ b/src/api/PDFSvg.ts
@@ -0,0 +1,10 @@
+import PDFImage from "./PDFImage";
+
+export default class PDFSvg {
+    svg: string
+    images: Record<string, PDFImage>
+    constructor(svg: string, images: Record<string, PDFImage> = {}) {
+        this.svg = svg
+        this.images = images
+    }
+}
\ No newline at end of file
diff --git a/src/api/index.ts b/src/api/index.ts
index dd469e403..74dec9883 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -18,3 +18,4 @@ export { default as PDFPage } from './PDFPage';
 export { default as PDFEmbeddedPage } from './PDFEmbeddedPage';
 export { default as PDFJavaScript } from './PDFJavaScript';
 export { default as Embeddable } from './Embeddable';
+export { default as PDFSvg } from './PDFSvg'
diff --git a/src/api/svg.ts b/src/api/svg.ts
index 14be9bc29..eb5352090 100644
--- a/src/api/svg.ts
+++ b/src/api/svg.ts
@@ -9,6 +9,7 @@ import { Color, colorString } from './colors';
 import { Degrees, degreesToRadians } from './rotations';
 import PDFFont from './PDFFont';
 import PDFPage from './PDFPage';
+import PDFSvg from './PDFSvg';
 import { PDFPageDrawSVGElementOptions } from './PDFPageOptions';
 import { LineCapStyle, LineJoinStyle, FillRule } from './operators';
 import { TransformationMatrix, identityMatrix } from '../types/matrix';
@@ -218,7 +219,7 @@ const StrokeLineJoinMap: Record<string, LineJoinStyle> = {
 /** methods to draw SVGElements onto a PDFPage */
 const runnersToPage = (
   page: PDFPage,
-  options: PDFPageDrawSVGElementOptions,
+  options: PDFPageDrawSVGElementOptions & { images?: PDFSvg['images'] },
 ): SVGElementToDrawMap => ({
   text(element) {
     const anchor = element.svgAttributes.textAnchor;
@@ -499,7 +500,7 @@ const parseAttributes = (
   };
 
   const svgAttributes: SVGAttributes = {
-    src: attributes.src || attributes['xlink:href'],
+    src: attributes.src ||  attributes.href || attributes['xlink:href'],
     textAnchor: attributes['text-anchor'],
     dominantBaseline: attributes['dominant-baseline'],
     preserveAspectRatio: attributes.preserveAspectRatio,
@@ -894,14 +895,15 @@ const parse = (
   );
 };
 
-const parseSvg = (
+export const drawSvg = (
   page: PDFPage,
-  svg: string,
-  options: PDFPageDrawSVGElementOptions,
+  svg: PDFSvg | string,
+  options: PDFPageDrawSVGElementOptions
 ) => {
-  if (!svg) return [];
+  const pdfSvg = typeof svg === 'string' ? new PDFSvg(svg) : svg
+  if (!pdfSvg.svg) return;
   const size = page.getSize();
-  const firstChild = parseHtml(svg).firstChild as HTMLElement;
+  const firstChild = parseHtml(pdfSvg.svg).firstChild as HTMLElement;
 
   const attributes = firstChild.attributes;
   const style = parseStyles(attributes.style);
@@ -951,44 +953,8 @@ const parseSvg = (
     baseTransformation,
   );
 
-  return elements
-};
-
-export const drawSvg = async (
-  page: PDFPage,
-  svg: string,
-  options: PDFPageDrawSVGElementOptions
-) => {
-  const elements = parseSvg(page, svg, options)
-  const runners = runnersToPage(page, options);
-
-  const parseImage = async (element: SVGElement) => {
-    const { src } = element.svgAttributes;
-    if (!src) return;
-    const isPng = src.match(/\.png(\?|$)|^data:image\/png;base64/gim);
-    const img = isPng
-      ? await page.doc.embedPng(src)
-      : await page.doc.embedJpg(src);
-
-    const { x, y, width, height } = getFittingRectangle(
-      img.width,
-      img.height,
-      element.svgAttributes.width || img.width,
-      element.svgAttributes.height || img.height,
-      element.svgAttributes.preserveAspectRatio,
-    );
-    page.drawImage(img, {
-      x,
-      y: -y - height,
-      width,
-      height,
-      opacity: element.svgAttributes.fillOpacity,
-      matrix: element.svgAttributes.matrix,
-      clipSpaces: element.svgAttributes.clipSpaces,
-    });
-  }
-  await elements.reduce(async (prev, elt) => {
-    await prev;
+  const runners = runnersToPage(page, { ...options, images: pdfSvg.images });
+  elements.forEach(elt => {
     // uncomment these lines to draw the clipSpaces
     // elt.svgAttributes.clipSpaces.forEach(space => {
     //   page.drawLine({
@@ -1019,17 +985,6 @@ export const drawSvg = async (
     //     thickness: 1
     //   })
     // })
-    if (elt.tagName === 'image') return parseImage(elt);
-    return runners[elt.tagName]?.(elt);
-  }, Promise.resolve());
-}
-
-export const drawSvgSync = (
-  page: PDFPage,
-  svg: string,
-  options: PDFPageDrawSVGElementOptions
-) => {
-  const elements = parseSvg(page, svg, options);
-  const runners = runnersToPage(page, options);
-  elements.forEach(elt => runners[elt.tagName]?.(elt));
+    runners[elt.tagName]?.(elt)
+  });
 }