feat: added Form Annotation support

packages/examples/src/form/index.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import {
+  Document,
+  Page,
+  View,
+  Text,
+  Form,
+  FormField,
+  TextInput,
+  Picker,
+  FormPushButton,
+  FormList,
+} from '@react-pdf/renderer';
+
+const FormPdf = () => (
+  <Document>
+    <Page>
+      <View
+        style={{
+          backgroundColor: 'rgba(182,28,28,0.62)',
+          width: '30%',
+          height: '100%',
+        }}
+      >
+        <Form>
+          <FormField name="user-info" style={{ flexDirection: 'column' }}>
+            <Text>TextInput</Text>
+            <TextInput
+              name="username"
+              value="foo"
+              align="center"
+              style={{ height: '50px' }}
+            />
+
+            {/* Nested works as well */}
+            <View>
+              <Text>TextInput</Text>
+              <TextInput
+                name="password"
+                value="bar"
+                align="center"
+                style={{ height: '50px' }}
+                password
+              />
+            </View>
+
+            <Text>Picker</Text>
+            <Picker
+              name="combo"
+              select={['', 'option 1', 'option 2']}
+              value=""
+              defaultValue=""
+              style={{ height: '20px' }}
+            />
+
+            <Text>FormList</Text>
+            <FormList
+              name="list"
+              select={['', 'option 1', 'option 2']}
+              value=""
+              defaultValue=""
+              style={{ height: '50px' }}
+            />
+
+            <Text>FormPushButton</Text>
+            <FormPushButton
+              name="bouton"
+              label="push button"
+              style={{ height: '50px' }}
+            />
+          </FormField>
+        </Form>
+      </View>
+    </Page>
+
+    <Page>
+      <View
+        style={{
+          backgroundColor: 'rgba(182,28,28,0.62)',
+          width: '30%',
+          height: '100%',
+        }}
+      >
+        <Form>
+          <FormField name="user-details" style={{ flexDirection: 'column' }}>
+            <Text>TextInput</Text>
+            <TextInput
+              name="details"
+              value="hello"
+              align="center"
+              style={{ height: '50px' }}
+            />
+          </FormField>
+        </Form>
+      </View>
+    </Page>
+  </Document>
+);
+
+export default FormPdf;

packages/pdfkit/src/mixins/acroform.js

@@ -46,6 +46,10 @@ export default {
    * this method to set the default font.
    */
   initForm() {
+    if (!!this._root.data.AcroForm) {
+      // Form is already initialized
+      return this;
+    }
     if (!this._font) {
       throw new Error('Must set a font before calling initForm method');
     }
@@ -141,15 +145,15 @@ export default {
     return this._addToParent(annotRef);
   },
 
-  formText(name, x, y, w, h, options = {}) {
+  textInput(name, x, y, w, h, options = {}) {
     return this.formAnnotation(name, 'text', x, y, w, h, options);
   },
 
   formPushButton(name, x, y, w, h, options = {}) {
     return this.formAnnotation(name, 'pushButton', x, y, w, h, options);
   },
 
-  formCombo(name, x, y, w, h, options = {}) {
+  picker(name, x, y, w, h, options = {}) {
     return this.formAnnotation(name, 'combo', x, y, w, h, options);
   },
 

packages/primitives/src/index.js

@@ -8,6 +8,12 @@ export const Note = 'NOTE';
 export const Path = 'PATH';
 export const Rect = 'RECT';
 export const Line = 'LINE';
+export const Form = 'FORM';
+export const FormField = 'FORM_FIELD';
+export const TextInput = 'TEXT_INPUT';
+export const FormPushButton = 'FORM_PUSH_BUTTON';
+export const Picker = 'PICKER';
+export const FormList = 'FORM_LIST';
 export const Stop = 'STOP';
 export const Defs = 'DEFS';
 export const Image = 'IMAGE';

packages/primitives/tests/index.test.js

@@ -39,6 +39,30 @@ describe('primitives', () => {
     expect(primitives.Line).toBeTruthy();
   });
 
+  test('should export form', () => {
+    expect(primitives.Form).toBeTruthy();
+  });
+
+  test('should export form field', () => {
+    expect(primitives.FormField).toBeTruthy();
+  });
+
+  test('should export text input', () => {
+    expect(primitives.TextInput).toBeTruthy();
+  });
+
+  test('should export form list', () => {
+    expect(primitives.FormList).toBeTruthy();
+  });
+
+  test('should export picker', () => {
+    expect(primitives.Picker).toBeTruthy();
+  });
+
+  test('should export form push button', () => {
+    expect(primitives.FormPushButton).toBeTruthy();
+  });
+
   test('should export stop', () => {
     expect(primitives.Stop).toBeTruthy();
   });

packages/render/src/primitives/form/renderForm.js

@@ -0,0 +1,13 @@
+import renderNode from '../renderNode';
+
+const renderForm = (ctx, node, options) => {
+  ctx.save();
+  ctx.initForm();
+
+  const children = node.children || [];
+  children.forEach((child) => renderNode(ctx, child, options));
+
+  ctx.restore();
+};
+
+export default renderForm;

packages/render/src/primitives/form/renderFormField.js

@@ -0,0 +1,14 @@
+import renderNode from '../renderNode';
+
+const renderFormField = (ctx, node, options) => {
+  const name = node.props?.name || '';
+
+  const formField = ctx.formField(name);
+
+  const children = node.children || [];
+  children.forEach((child) =>
+    renderNode(ctx, child, { ...options, formField }),
+  );
+};
+
+export default renderFormField;

packages/render/src/primitives/form/renderFormList.js

@@ -0,0 +1,19 @@
+import { parsePickerAndListFieldOptions } from '../../utils/parseFormOptions';
+
+const renderFormList = (ctx, node) => {
+  const { top, left, width, height } = node.box || {};
+
+  // Element's name
+  const name = node.props?.name || '';
+
+  ctx.formList(
+    name,
+    left,
+    top,
+    width,
+    height,
+    parsePickerAndListFieldOptions(node),
+  );
+};
+
+export default renderFormList;

packages/render/src/primitives/form/renderFormPushButton.js

@@ -0,0 +1,19 @@
+import { parseButtonFieldOptions } from '../../utils/parseFormOptions';
+
+const renderFormPushButton = (ctx, node) => {
+  const { top, left, width, height } = node.box || {};
+
+  // Element's name
+  const name = node.props?.name || '';
+
+  ctx.formPushButton(
+    name,
+    left,
+    top,
+    width,
+    height,
+    parseButtonFieldOptions(node),
+  );
+};
+
+export default renderFormPushButton;

packages/render/src/primitives/form/renderPicker.js

@@ -0,0 +1,19 @@
+import { parsePickerAndListFieldOptions } from '../../utils/parseFormOptions';
+
+const renderPicker = (ctx, node) => {
+  const { top, left, width, height } = node.box || {};
+
+  // Element's name
+  const name = node.props?.name || '';
+
+  ctx.picker(
+    name,
+    left,
+    top,
+    width,
+    height,
+    parsePickerAndListFieldOptions(node),
+  );
+};
+
+export default renderPicker;

packages/render/src/primitives/form/renderTextInput.js

@@ -0,0 +1,24 @@
+import { parseTextFieldOptions } from '../../utils/parseFormOptions';
+
+const renderTextInput = (ctx, node, options) => {
+  const { top, left, width, height } = node.box || {};
+
+  // Element's name
+  const name = node.props?.name || '';
+
+  if (!options.formField)
+    throw new Error(
+      'The TextInput element must be a children of a FormField element.',
+    );
+
+  ctx.textInput(
+    name,
+    left,
+    top,
+    width,
+    height,
+    parseTextFieldOptions(node, options.formField),
+  );
+};
+
+export default renderTextInput;

packages/render/src/primitives/renderNode.js

@@ -12,8 +12,18 @@ import setLink from '../operations/setLink';
 import clipNode from '../operations/clipNode';
 import transform from '../operations/transform';
 import setDestination from '../operations/setDestination';
-
-const isRecursiveNode = (node) => node.type !== P.Text && node.type !== P.Svg;
+import renderForm from './form/renderForm';
+import renderFormField from './form/renderFormField';
+import renderTextInput from './form/renderTextInput';
+import renderFormPushButton from './form/renderFormPushButton';
+import renderPicker from './form/renderPicker';
+import renderFormList from './form/renderFormList';
+
+const isRecursiveNode = (node) =>
+  node.type !== P.Text &&
+  node.type !== P.Svg &&
+  node.type !== P.Form &&
+  node.type !== P.FormField;
 
 const renderChildren = (ctx, node, options) => {
   ctx.save();
@@ -34,6 +44,12 @@ const renderFns = {
   [P.Text]: renderText,
   [P.Note]: renderNote,
   [P.Image]: renderImage,
+  [P.Form]: renderForm,
+  [P.FormField]: renderFormField,
+  [P.TextInput]: renderTextInput,
+  [P.FormPushButton]: renderFormPushButton,
+  [P.Picker]: renderPicker,
+  [P.FormList]: renderFormList,
   [P.Canvas]: renderCanvas,
   [P.Svg]: renderSvg,
   [P.Link]: setLink,

packages/render/src/utils/parseFormOptions.js

@@ -0,0 +1,59 @@
+const clean = options => {
+  const opt = { ...options };
+
+  // We need to ensure the elements are no present if not true
+  Object.entries(opt).forEach(pair => {
+    if (!pair[1]) {
+      delete opt[pair[0]];
+    }
+  });
+
+  return opt;
+};
+
+const parseCommonFormOptions = node => {
+  // Common Options
+  return {
+    required: node.props?.required || false,
+    noExport: node.props?.noExport || false,
+    readOnly: node.props?.readOnly || false,
+    value: node.props?.value || undefined,
+    defaultValue: node.props?.defaultValue || undefined,
+  };
+};
+
+const parseTextFieldOptions = (node, formField) => {
+  return clean({
+    ...parseCommonFormOptions(node),
+    parent: formField || undefined,
+    align: node.props?.align || 'left',
+    multiline: node.props?.multiline || undefined,
+    password: node.props?.password || false,
+    noSpell: node.props?.noSpell || false,
+    format: node.props?.format || undefined,
+  });
+};
+
+const parsePickerAndListFieldOptions = node => {
+  return clean({
+    ...parseCommonFormOptions(node),
+    sort: node.props?.sort || false,
+    edit: node.props?.edit || false,
+    multiSelect: node.props?.multiSelect || false,
+    noSpell: node.props?.noSpell || false,
+    select: node.props?.select || [''],
+  });
+};
+
+const parseButtonFieldOptions = node => {
+  return clean({
+    ...parseCommonFormOptions(node),
+    label: node.props?.label || '???',
+  });
+};
+
+export {
+  parseTextFieldOptions,
+  parsePickerAndListFieldOptions,
+  parseButtonFieldOptions,
+};

packages/render/tests/ctx.js

@@ -48,6 +48,8 @@ const createCTX = () => {
   instance.lineCap = vi.fn().mockReturnValue(instance);
   instance.text = vi.fn().mockReturnValue(instance);
   instance.font = vi.fn().mockReturnValue(instance);
+  instance.formField = vi.fn().mockReturnValue(instance);
+  instance.textInput = vi.fn().mockReturnValue(instance);
 
   return instance;
 };