fix widget annotation position

jichang · Apr 27, 2024 · 3a9a83f · 3a9a83f
1 parent 4be9b7b
commit 3a9a83f
Show file tree

Hide file tree

Showing 11 changed files with 150 additions and 117 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/src/adapters/native/strings.tsx b/packages/react/src/adapters/native/strings.tsx
@@ -37,6 +37,7 @@ export const strings: UIStrings = {
   noSignatures: 'No Signatures',
   extract: 'Extract',
   pencil: 'Pencil',
+  fillForm: 'Fill Form',
   addTextBox: 'Add Text Box',
   addStamp: 'Add Stamp',
   addImage: 'Add Image',

diff --git a/packages/react/src/adapters/uicomponents.context.tsx b/packages/react/src/adapters/uicomponents.context.tsx
@@ -100,6 +100,9 @@ export type ButtonScenario =
   | {
       usage: 'editor-panel-pencil';
     }
+  | {
+      usage: 'editor-panel-fill-form';
+    }
   | {
       usage: 'start-create-stamp';
     }

diff --git a/packages/react/src/adapters/uistrings.context.tsx b/packages/react/src/adapters/uistrings.context.tsx
@@ -41,6 +41,7 @@ export interface UIStrings {
   noSignatures: string;
   extract: string;
   pencil: string;
+  fillForm: string;
   stamps: string;
   addTextBox: string;
   addStamp: string;

diff --git a/packages/react/src/components/annotations/widget.css b/packages/react/src/components/annotations/widget.css
@@ -1,3 +1,3 @@
 .pdf__page__annotation[data-subtype='20'] {
-  position: relative;
+  position: absolute;
 }
diff --git a/packages/react/src/components/editor/annotation.tsx b/packages/react/src/components/editor/annotation.tsx
@@ -16,6 +16,7 @@ import {
   PdfPageUnderlineAnnotation,
   PdfPageCaretAnnotation,
   PdfPageStrikeOutAnnotation,
+  PdfPageWidgetAnnotation,
 } from '../annotations';
 import classNames from 'classnames';
 import { PdfAnnotationTool, usePdfEditor } from './editor.context';
@@ -235,6 +236,17 @@ export function PdfPageEditorAnnotation(props: PdfPageEditorAnnotationProps) {
         />
       );
       break;
+    case PdfAnnotationSubtype.WIDGET:
+      content = (
+        <PdfPageWidgetAnnotation
+          key={annotation.id}
+          page={page}
+          annotation={annotation}
+          rotation={rotation}
+          scaleFactor={scaleFactor}
+        />
+      );
+      break;
     default:
       content = null;
   }
@@ -254,14 +266,18 @@ export function PdfPageEditorAnnotation(props: PdfPageEditorAnnotationProps) {
       onKeyDown={handleKeyDown}
       onKeyUp={handleKeyUp}
     >
-      <PdfPageAnnotationMover
-        page={page}
-        annotation={annotation}
-        rotation={rotation}
-        scaleFactor={scaleFactor}
-      >
-        {content}
-      </PdfPageAnnotationMover>
+      {isSelection ? (
+        <PdfPageAnnotationMover
+          page={page}
+          annotation={annotation}
+          rotation={rotation}
+          scaleFactor={scaleFactor}
+        >
+          {content}
+        </PdfPageAnnotationMover>
+      ) : (
+        content
+      )}
       {isSelection && isResizable ? (
         <>
           <PdfPageAnnotationResizer

diff --git a/packages/react/src/components/editor/annotations.tsx b/packages/react/src/components/editor/annotations.tsx
@@ -397,11 +397,7 @@ export function PdfPageEditableAnnotations(
   const editableAnnotations = useMemo(() => {
     const allOperations: Operation[] = [...operations, ...extraOperations];
 
-    return apply(annotations, allOperations).filter(
-      (annotation: PdfAnnotationObject) => {
-        return annotation.type !== PdfAnnotationSubtype.WIDGET;
-      },
-    );
+    return apply(annotations, allOperations);
   }, [page, operations, annotations, extraOperations]);
 
   return (

diff --git a/packages/react/src/components/editor/editor.context.tsx b/packages/react/src/components/editor/editor.context.tsx
@@ -46,6 +46,10 @@ export enum PdfAnnotationTool {
    * Drawing path
    */
   Pencil,
+  /**
+   * Fill form
+   */
+  FillForm,
 }
 
 /**

diff --git a/packages/react/src/components/editor/panel.tsx b/packages/react/src/components/editor/panel.tsx
@@ -58,6 +58,20 @@ export function PdfEditorPanel(props: PdfEditorPanelProps) {
         >
           {strings.pencil}
         </Button>
+        <Button
+          scenario={{ usage: 'editor-panel-fill-form' }}
+          onClick={() => {
+            setAnnotationTool(PdfAnnotationTool.FillForm);
+          }}
+          className={classNames(
+            annotationTool === PdfAnnotationTool.FillForm
+              ? 'pdf__ui__button--active'
+              : '',
+          )}
+          data-testid={`pdf__editor__panel__tool__${PdfAnnotationTool.FillForm}`}
+        >
+          {strings.fillForm}
+        </Button>
       </div>
     </div>
   );

diff --git a/packages/react/src/components/form/form.context.tsx b/packages/react/src/components/form/form.context.tsx
@@ -0,0 +1,62 @@
+import React, {
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import {
+  PdfAnnotationObject,
+  PdfPageObject,
+  Position,
+  Size,
+} from '@unionpdf/models';
+import { useLogger, usePdfDocument, usePdfEngine } from '../../core';
+
+export const FORM_CONTEXT_LOG_SOURCE = 'PdfFormContext';
+
+/**
+ * Value in PdfFormContext
+ */
+export interface PdfFormContextValue {
+  values: Record<string, string>;
+}
+
+export const PdfFormContext = React.createContext<PdfFormContextValue>({
+  values: {},
+});
+
+/**
+ * Properties of PdfFormContextProvider
+ */
+export interface PdfFormContextProviderProps {
+  /**
+   * Children nodes
+   */
+  children: ReactNode;
+}
+
+/**
+ * Provider of PdfFormContext, used to maintaining Form status and data
+ * @param props - properties of PdfFormContextProvider
+ * @returns
+ *
+ * @public
+ */
+export function PdfFormContextProvider(props: PdfFormContextProviderProps) {
+  const { children } = props;
+
+  return (
+    <PdfFormContext.Provider
+      value={{
+        values: {},
+      }}
+    >
+      {children}
+    </PdfFormContext.Provider>
+  );
+}
+
+export function usePdfForm() {
+  return useContext(PdfFormContext);
+}
diff --git a/packages/react/src/core/application.configuration.ts b/packages/react/src/core/application.configuration.ts
@@ -52,12 +52,30 @@ export enum PdfApplicatinPluginKey {
   Uploader,
 }
 
+export const ALL_PDF_APPLICATION_PLUGIN_KEYS: PdfApplicatinPluginKey[] = [
+  PdfApplicatinPluginKey.Attachments,
+  PdfApplicatinPluginKey.Bookmarks,
+  PdfApplicatinPluginKey.Downloader,
+  PdfApplicatinPluginKey.Editor,
+  PdfApplicatinPluginKey.Metadata,
+  PdfApplicatinPluginKey.Pages,
+  PdfApplicatinPluginKey.Printer,
+  PdfApplicatinPluginKey.Search,
+  PdfApplicatinPluginKey.Signatures,
+  PdfApplicatinPluginKey.Thumbnails,
+  PdfApplicatinPluginKey.Toolbar,
+  PdfApplicatinPluginKey.Uploader,
+];
+
 /**
  * Default configuration for plugins
  *
  * @public
  */
-export const DEFAULT_PLUGIN_CONFIGURATIONS = {
+export const DEFAULT_PLUGIN_CONFIGURATIONS: Record<
+  PdfApplicatinPluginKey,
+  PdfApplicatinPluginConfiguration
+> = {
   [PdfApplicatinPluginKey.Attachments]: {
     isEnabled: true,
     isVisible: false,
@@ -195,7 +213,9 @@ export interface PdfApplicationConfigurationProvider {
  *
  * @public
  */
-export class PdfApplicationConfigurationProviderBase {
+export class PdfApplicationConfigurationProviderBase
+  implements PdfApplicationConfigurationProvider
+{
   /**
    * Callbacks that subscribed to the configuration change event
    *
@@ -252,15 +272,7 @@ export class PdfApplicationConfigurationProviderBase {
       this.callbacks.splice(index, 1);
     }
   }
-}
 
-/**
- * Configuration provider that maintains configuration with variables in memory
- */
-export class MemoryPdfApplicationConfigurationProvider
-  extends PdfApplicationConfigurationProviderBase
-  implements PdfApplicationConfigurationProvider
-{
   /** @inheritDoc PdfApplicationConfigurationProvider.get  */
   get(): PdfApplicationConfiguration {
     return {
@@ -284,30 +296,20 @@ export class MemoryPdfApplicationConfigurationProvider
 
   /** @inheritDoc PdfApplicationConfigurationProvider.showPlugin */
   showPlugin(pluginKey: PdfApplicatinPluginKey) {
-    const pluginConfiguration = this.plugins[pluginKey];
-
-    this.plugins = {
-      ...this.plugins,
-      [pluginKey]: {
-        ...pluginConfiguration,
-        isVisible: true,
-      },
-    };
+    for (const key of ALL_PDF_APPLICATION_PLUGIN_KEYS) {
+      this.plugins[key].isVisible = key === pluginKey;
+    }
 
     this.broadcast();
   }
 
   /** @inheritDoc PdfApplicationConfigurationProvider.hidePlugin  */
   hidePlugin(pluginKey: PdfApplicatinPluginKey) {
-    const pluginConfiguration = this.plugins[pluginKey];
-
-    this.plugins = {
-      ...this.plugins,
-      [pluginKey]: {
-        ...pluginConfiguration,
-        isVisible: false,
-      },
-    };
+    for (const key of ALL_PDF_APPLICATION_PLUGIN_KEYS) {
+      if (pluginKey === key) {
+        this.plugins[key].isVisible = false;
+      }
+    }
 
     this.broadcast();
   }
@@ -323,6 +325,13 @@ export class MemoryPdfApplicationConfigurationProvider
   }
 }
 
+/**
+ * Configuration provider that maintains configuration with variables in memory
+ */
+export class MemoryPdfApplicationConfigurationProvider
+  extends PdfApplicationConfigurationProviderBase
+  implements PdfApplicationConfigurationProvider {}
+
 /**
  * Configuration provider that maintains configuration with variables in storage
  */
@@ -396,77 +405,4 @@ export class StoragePdfApplicationConfigurationProvider
       this.save();
     }
   }
-
-  /**
-   * @inheritdoc PdfApplicationConfigurationProvider.get
-   */
-  get(): PdfApplicationConfiguration {
-    return {
-      rotation: this.rotation,
-      scaleFactor: this.scaleFactor,
-      plugins: this.plugins,
-    };
-  }
-
-  /**
-   * @inheritdoc PdfApplicationConfigurationProvider.setRotation
-   */
-  setRotation(rotation: Rotation) {
-    this.rotation = rotation;
-    this.broadcast();
-  }
-
-  /**
-   * @inheritdoc PdfApplicationConfigurationProvider.setScaleFactor
-   */
-  setScaleFactor(scaleFactor: number) {
-    this.scaleFactor = scaleFactor;
-    this.broadcast();
-  }
-
-  /**
-   * @inheritdoc PdfApplicationConfigurationProvider.showPlugin
-   */
-  showPlugin(pluginKey: PdfApplicatinPluginKey) {
-    const pluginConfiguration = this.plugins[pluginKey];
-
-    this.plugins = {
-      ...this.plugins,
-      [pluginKey]: {
-        ...pluginConfiguration,
-        isVisible: true,
-      },
-    };
-
-    this.broadcast();
-  }
-
-  /**
-   * @inheritdoc PdfApplicationConfigurationProvider.hidePlugin
-   */
-  hidePlugin(pluginKey: PdfApplicatinPluginKey) {
-    const pluginConfiguration = this.plugins[pluginKey];
-
-    this.plugins = {
-      ...this.plugins,
-      [pluginKey]: {
-        ...pluginConfiguration,
-        isVisible: false,
-      },
-    };
-
-    this.broadcast();
-  }
-
-  /**
-   * @inheritdoc PdfApplicationConfigurationProvider.togglePlugin
-   */
-  togglePlugin(pluginKey: PdfApplicatinPluginKey) {
-    const pluginConfiguration = this.plugins[pluginKey];
-    if (pluginConfiguration.isVisible) {
-      this.hidePlugin(pluginKey);
-    } else {
-      this.showPlugin(pluginKey);
-    }
-  }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -100,6 +100,9 @@ export type ButtonScenario = @@
       | {
           usage: 'editor-panel-pencil';
         }
+      | {
+          usage: 'editor-panel-fill-form';
+        }
       | {
           usage: 'start-create-stamp';
         }
@@ Expand Down @@