feat: add background color and border with Note support (#1865)

diegomura · Jun 5, 2022 · 24f5c77 · 24f5c77
1 parent 205aa03
commit 24f5c77
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 41 deletions.
diff --git a/.changeset/little-emus-cry.md b/.changeset/little-emus-cry.md
@@ -0,0 +1,6 @@
+---
+'@react-pdf/pdfkit': patch
+'@react-pdf/render': patch
+---
+
+feat: add background color and border with Note support
diff --git a/packages/pdfkit/src/mixins/annotations.js b/packages/pdfkit/src/mixins/annotations.js
@@ -35,17 +35,23 @@ export default {
     options.Subtype = 'Text';
     options.Contents = new String(contents);
     options.Name = 'Comment';
+
     if (options.color == null) {
       options.color = [243, 223, 92];
     }
+
+    options.Border = [0, 0, options.borderWidth || 0];
+
+    delete options.borderWidth;
+
     return this.annotate(x, y, w, h, options);
   },
 
   goTo(x, y, w, h, name, options = {}) {
     options.Subtype = 'Link';
     options.A = this.ref({
       S: 'GoTo',
-      D: new String(name),
+      D: new String(name)
     });
     options.A.end();
     return this.annotate(x, y, w, h, options);
@@ -60,7 +66,7 @@ export default {
       if (url >= 0 && url < pages.Kids.length) {
         options.A = this.ref({
           S: 'GoTo',
-          D: [pages.Kids[url], 'XYZ', null, null, null],
+          D: [pages.Kids[url], 'XYZ', null, null, null]
         });
         options.A.end();
       } else {
@@ -70,7 +76,7 @@ export default {
       // Link to an external url
       options.A = this.ref({
         S: 'URI',
-        URI: new String(url),
+        URI: new String(url)
       });
       options.A.end();
     }
@@ -93,42 +99,6 @@ export default {
     return this._markup(x, y, w, h, options);
   },
 
-  underline(x, y, w, h, options = {}) {
-    options.Subtype = 'Underline';
-    return this._markup(x, y, w, h, options);
-  },
-
-  strike(x, y, w, h, options = {}) {
-    options.Subtype = 'StrikeOut';
-    return this._markup(x, y, w, h, options);
-  },
-
-  lineAnnotation(x1, y1, x2, y2, options = {}) {
-    options.Subtype = 'Line';
-    options.Contents = new String();
-    options.L = [x1, this.page.height - y1, x2, this.page.height - y2];
-    return this.annotate(x1, y1, x2, y2, options);
-  },
-
-  rectAnnotation(x, y, w, h, options = {}) {
-    options.Subtype = 'Square';
-    options.Contents = new String();
-    return this.annotate(x, y, w, h, options);
-  },
-
-  ellipseAnnotation(x, y, w, h, options = {}) {
-    options.Subtype = 'Circle';
-    options.Contents = new String();
-    return this.annotate(x, y, w, h, options);
-  },
-
-  textAnnotation(x, y, w, h, text, options = {}) {
-    options.Subtype = 'FreeText';
-    options.Contents = new String(text);
-    options.DA = new String();
-    return this.annotate(x, y, w, h, options);
-  },
-
   fileAnnotation(x, y, w, h, file = {}, options = {}) {
     // create hidden file
     const filespec = this.file(file.src, Object.assign({ hidden: true }, file));
@@ -162,5 +132,5 @@ export default {
     y2 = m1 * x2 + m3 * y2 + m5;
 
     return [x1, y1, x2, y2];
-  },
+  }
 };
diff --git a/packages/render/src/primitives/renderNote.js b/packages/render/src/primitives/renderNote.js
@@ -1,8 +1,10 @@
 const renderNote = (ctx, node) => {
   const { top, left } = node.box;
   const value = node?.children?.[0].value || '';
+  const color = node.style?.backgroundColor || null;
+  const borderWidth = node.style?.borderWidth || null;
 
-  ctx.note(left, top, 0, 0, value);
+  ctx.note(left, top, 0, 0, value, { color, borderWidth });
 };
 
 export default renderNote;