update svg rendering

- add support for transparency masks
- add support for clip rect

Author: duncanwerner

src/api/PDFPage.ts

@@ -1243,13 +1243,14 @@ export default class PDFPage {
       opacity: options.opacity,
       borderOpacity: options.borderOpacity,
       blendMode: options.blendMode,
+      softmask: options.softmask,
     });
 
     if (!('color' in options) && !('borderColor' in options)) {
       options.borderColor = rgb(0, 0, 0);
     }
 
-    const contentStream = this.getContentStream();
+    const contentStream = options.content_stream || this.getContentStream();
     contentStream.push(
       ...drawSvgPath(path, {
         x: options.x ?? this.x,
@@ -1264,6 +1265,7 @@ export default class PDFPage {
         borderLineCap: options.borderLineCap ?? undefined,
         graphicsState: graphicsStateKey,
         pattern: options.pattern ?? undefined,
+        clip: options.clip ?? undefined,
       }),
     );
   }
@@ -1385,12 +1387,14 @@ export default class PDFPage {
       opacity: options.opacity,
       borderOpacity: options.borderOpacity,
       blendMode: options.blendMode,
+      softmask: options.softmask,
     });
 
     if (!('color' in options) && !('borderColor' in options)) {
       options.color = rgb(0, 0, 0);
     }
 
+    /*
     const test = drawRectangle({
       x: options.x ?? this.x,
       y: options.y ?? this.y,
@@ -1409,8 +1413,13 @@ export default class PDFPage {
       pattern: options.pattern ?? undefined,
     });
     console.info({test, options});
+    */
 
-    const contentStream = this.getContentStream();
+    if (options.content_stream) {
+      console.info('using passed content stream');
+    }
+
+    const contentStream = options.content_stream || this.getContentStream();
     contentStream.push(
       ...drawRectangle({
         x: options.x ?? this.x,
@@ -1603,13 +1612,15 @@ export default class PDFPage {
     opacity?: number;
     borderOpacity?: number;
     blendMode?: BlendMode;
+    softmask?: PDFDict;
   }): PDFName | undefined {
-    const { opacity, borderOpacity, blendMode } = options;
+    const { opacity, borderOpacity, blendMode, softmask } = options;
 
     if (
       opacity === undefined &&
       borderOpacity === undefined &&
-      blendMode === undefined
+      blendMode === undefined &&
+      softmask === undefined
     ) {
       return undefined;
     }
@@ -1619,6 +1630,7 @@ export default class PDFPage {
       ca: opacity,
       CA: borderOpacity,
       BM: blendMode,
+      SMask: softmask,
     });
 
     const key = this.node.newExtGState('GS', graphicsState);

src/api/PDFPageOptions.ts

@@ -2,7 +2,7 @@ import { Color } from 'src/api/colors';
 import PDFFont from 'src/api/PDFFont';
 import { Rotation } from 'src/api/rotations';
 import { LineCapStyle } from 'src/api/operators';
-import { PDFName } from '..';
+import { PDFContentStream, PDFDict, PDFName } from '..';
 
 export enum BlendMode {
   Normal = 'Normal',
@@ -75,7 +75,13 @@ export interface PDFPageDrawSVGOptions {
   borderDashPhase?: number;
   borderLineCap?: LineCapStyle;
   blendMode?: BlendMode;
+
   pattern?: string|PDFName;
+  softmask?: PDFDict;
+  content_stream?: PDFContentStream;
+
+  clip?: { x: number, y: number, width: number, height: number };
+
 }
 
 export interface PDFPageDrawLineOptions {
@@ -108,6 +114,8 @@ export interface PDFPageDrawRectangleOptions {
   borderLineCap?: LineCapStyle;
   blendMode?: BlendMode;
   pattern?: string|PDFName;
+  content_stream?: PDFContentStream;
+  softmask?: PDFDict;
 }
 
 export interface PDFPageDrawSquareOptions {

src/api/operations.ts

@@ -356,12 +356,25 @@ export const drawSvgPath = (
     borderLineCap?: LineCapStyle;
     graphicsState?: string | PDFName;
     pattern?: string | PDFName;
+    clip?: { x: number, y: number, width: number, height: number },
   },
 ) =>
   [
     pushGraphicsState(),
     options.graphicsState && setGraphicsState(options.graphicsState),
 
+    ///
+
+    options.clip && moveTo(options.clip.x, options.clip.y),
+    options.clip && lineTo(options.clip.x, options.clip.y + options.clip.height),
+    options.clip && lineTo(options.clip.x + options.clip.width, options.clip.y + options.clip.height),
+    options.clip && lineTo(options.clip.x + options.clip.width, options.clip.y),
+    options.clip && closePath(),
+    options.clip && clip(),
+    options.clip && endPath(),
+
+    ///
+    
     translate(options.x, options.y),
     rotateRadians(toRadians(options.rotate ?? degrees(0))),