feat: polish envelopes (#2090)

## Description

The rest of the owl

packages/lib/client-only/hooks/use-editor-fields.ts

@@ -123,7 +123,6 @@ export const useEditorFields = ({
     }
 
     if (bypassCheck) {
-      console.log(3);
       setSelectedFieldFormId(formId);
       return;
     }
@@ -136,6 +135,7 @@ export const useEditorFields = ({
       const field: TLocalField = {
         ...fieldData,
         formId: nanoid(12),
+        ...restrictFieldPosValues(fieldData),
       };
 
       append(field);
@@ -165,7 +165,15 @@ export const useEditorFields = ({
       const index = localFields.findIndex((field) => field.formId === formId);
 
       if (index !== -1) {
-        update(index, { ...localFields[index], ...updates });
+        const updatedField = {
+          ...localFields[index],
+          ...updates,
+        };
+
+        update(index, {
+          ...updatedField,
+          ...restrictFieldPosValues(updatedField),
+        });
         triggerFieldsUpdate();
       }
     },
@@ -279,3 +287,14 @@ export const useEditorFields = ({
     setSelectedRecipient,
   };
 };
+
+const restrictFieldPosValues = (
+  field: Pick<TLocalField, 'positionX' | 'positionY' | 'width' | 'height'>,
+) => {
+  return {
+    positionX: Math.max(0, Math.min(100, field.positionX)),
+    positionY: Math.max(0, Math.min(100, field.positionY)),
+    width: Math.max(0, Math.min(100, field.width)),
+    height: Math.max(0, Math.min(100, field.height)),
+  };
+};

packages/lib/client-only/hooks/use-page-renderer.ts

@@ -0,0 +1,126 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+import Konva from 'konva';
+import type { RenderParameters } from 'pdfjs-dist/types/src/display/api';
+import { usePageContext } from 'react-pdf';
+
+type RenderFunction = (props: { stage: Konva.Stage; pageLayer: Konva.Layer }) => void;
+
+export function usePageRenderer(renderFunction: RenderFunction) {
+  const pageContext = usePageContext();
+
+  if (!pageContext) {
+    throw new Error('Unable to find Page context.');
+  }
+
+  const { page, rotate, scale } = pageContext;
+
+  if (!page) {
+    throw new Error('Attempted to render page canvas, but no page was specified.');
+  }
+
+  const canvasElement = useRef<HTMLCanvasElement>(null);
+  const konvaContainer = useRef<HTMLDivElement>(null);
+
+  const stage = useRef<Konva.Stage | null>(null);
+  const pageLayer = useRef<Konva.Layer | null>(null);
+
+  /**
+   * The raw viewport with no scaling. Basically the actual PDF size.
+   */
+  const unscaledViewport = useMemo(
+    () => page.getViewport({ scale: 1, rotation: rotate }),
+    [page, rotate, scale],
+  );
+
+  /**
+   * The viewport scaled according to page width.
+   */
+  const scaledViewport = useMemo(
+    () => page.getViewport({ scale, rotation: rotate }),
+    [page, rotate, scale],
+  );
+
+  /**
+   * Viewport with the device pixel ratio applied so we can render the PDF
+   * in a higher resolution.
+   */
+  const renderViewport = useMemo(
+    () => page.getViewport({ scale: scale * window.devicePixelRatio, rotation: rotate }),
+    [page, rotate, scale],
+  );
+
+  /**
+   * Render the PDF and create the scaled Konva stage.
+   */
+  useEffect(
+    function drawPageOnCanvas() {
+      if (!page) {
+        return;
+      }
+
+      const { current: canvas } = canvasElement;
+      const { current: kContainer } = konvaContainer;
+
+      if (!canvas || !kContainer) {
+        return;
+      }
+
+      canvas.width = renderViewport.width;
+      canvas.height = renderViewport.height;
+
+      canvas.style.width = `${Math.floor(scaledViewport.width)}px`;
+      canvas.style.height = `${Math.floor(scaledViewport.height)}px`;
+
+      const renderContext: RenderParameters = {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        canvasContext: canvas.getContext('2d', { alpha: false }) as CanvasRenderingContext2D,
+        viewport: renderViewport,
+      };
+
+      const cancellable = page.render(renderContext);
+      const runningTask = cancellable;
+
+      cancellable.promise.catch(() => {
+        // Intentionally empty
+      });
+
+      void cancellable.promise.then(() => {
+        stage.current = new Konva.Stage({
+          container: kContainer,
+          width: scaledViewport.width,
+          height: scaledViewport.height,
+          scale: {
+            x: scale,
+            y: scale,
+          },
+        });
+
+        // Create the main layer for interactive elements.
+        pageLayer.current = new Konva.Layer();
+
+        stage.current.add(pageLayer.current);
+
+        renderFunction({
+          stage: stage.current,
+          pageLayer: pageLayer.current,
+        });
+      });
+
+      return () => {
+        runningTask.cancel();
+      };
+    },
+    [page, scaledViewport],
+  );
+
+  return {
+    canvasElement,
+    konvaContainer,
+    stage,
+    pageLayer,
+    unscaledViewport,
+    scaledViewport,
+    pageContext,
+  };
+}

packages/lib/client-only/providers/envelope-editor-provider.tsx

@@ -5,15 +5,14 @@ import { EnvelopeType } from '@prisma/client';
 
 import { trpc } from '@documenso/trpc/react';
 import type { TSetEnvelopeRecipientsRequest } from '@documenso/trpc/server/envelope-router/set-envelope-recipients.types';
-import type { RecipientColorStyles, TRecipientColor } from '@documenso/ui/lib/recipient-colors';
-import {
-  AVAILABLE_RECIPIENT_COLORS,
-  getRecipientColorStyles,
-} from '@documenso/ui/lib/recipient-colors';
+import type { TUpdateEnvelopeRequest } from '@documenso/trpc/server/envelope-router/update-envelope.types';
+import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
+import { AVAILABLE_RECIPIENT_COLORS } from '@documenso/ui/lib/recipient-colors';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import type { TDocumentEmailSettings } from '../../types/document-email';
 import type { TEnvelope } from '../../types/envelope';
+import { formatDocumentsPath, formatTemplatesPath } from '../../utils/teams';
 import { useEditorFields } from '../hooks/use-editor-fields';
 import type { TLocalField } from '../hooks/use-editor-fields';
 import { useEnvelopeAutosave } from '../hooks/use-envelope-autosave';
@@ -38,25 +37,35 @@ export const useDebounceFunction = <Args extends unknown[]>(
   );
 };
 
+type UpdateEnvelopePayload = Pick<TUpdateEnvelopeRequest, 'data' | 'meta'>;
+
 type EnvelopeEditorProviderValue = {
   envelope: TEnvelope;
   isDocument: boolean;
   isTemplate: boolean;
   setLocalEnvelope: (localEnvelope: Partial<TEnvelope>) => void;
 
-  updateEnvelope: (envelopeUpdates: Partial<TEnvelope>) => void;
+  updateEnvelope: (envelopeUpdates: UpdateEnvelopePayload) => void;
   setRecipientsDebounced: (recipients: TSetEnvelopeRecipientsRequest['recipients']) => void;
   setRecipientsAsync: (recipients: TSetEnvelopeRecipientsRequest['recipients']) => Promise<void>;
 
-  getFieldColor: (field: TLocalField) => RecipientColorStyles;
   getRecipientColorKey: (recipientId: number) => TRecipientColor;
 
   editorFields: ReturnType<typeof useEditorFields>;
 
   isAutosaving: boolean;
-  flushAutosave: () => void;
+  flushAutosave: () => Promise<void>;
   autosaveError: boolean;
 
+  relativePath: {
+    basePath: string;
+    envelopePath: string;
+    editorPath: string;
+    documentRootPath: string;
+    templateRootPath: string;
+  };
+
+  syncEnvelope: () => Promise<void>;
   // refetchEnvelope: () => Promise<void>;
   // updateEnvelope: (envelope: TEnvelope) => Promise<void>;
 };
@@ -86,12 +95,10 @@ export const EnvelopeEditorProvider = ({
   const { toast } = useToast();
 
   const [envelope, setEnvelope] = useState(initialEnvelope);
-
   const [autosaveError, setAutosaveError] = useState<boolean>(false);
 
   const envelopeUpdateMutationQuery = trpc.envelope.update.useMutation({
     onSuccess: (response, input) => {
-      console.log(input.meta?.emailSettings);
       setEnvelope({
         ...envelope,
         ...response,
@@ -106,7 +113,9 @@ export const EnvelopeEditorProvider = ({
 
       setAutosaveError(false);
     },
-    onError: (error) => {
+    onError: (err) => {
+      console.error(err);
+
       setAutosaveError(true);
 
       toast({
@@ -122,7 +131,9 @@ export const EnvelopeEditorProvider = ({
     onSuccess: () => {
       setAutosaveError(false);
     },
-    onError: (error) => {
+    onError: (err) => {
+      console.error(err);
+
       setAutosaveError(true);
 
       toast({
@@ -135,10 +146,17 @@ export const EnvelopeEditorProvider = ({
   });
 
   const envelopeRecipientSetMutationQuery = trpc.envelope.recipient.set.useMutation({
-    onSuccess: () => {
+    onSuccess: ({ recipients }) => {
+      setEnvelope((prev) => ({
+        ...prev,
+        recipients,
+      }));
+
       setAutosaveError(false);
     },
-    onError: (error) => {
+    onError: (err) => {
+      console.error(err);
+
       setAutosaveError(true);
 
       toast({
@@ -178,21 +196,28 @@ export const EnvelopeEditorProvider = ({
     triggerSave: setEnvelopeDebounced,
     flush: setEnvelopeAsync,
     isPending: isEnvelopeMutationPending,
-  } = useEnvelopeAutosave(async (envelopeUpdates: Partial<TEnvelope>) => {
+  } = useEnvelopeAutosave(async (envelopeUpdates: UpdateEnvelopePayload) => {
     await envelopeUpdateMutationQuery.mutateAsync({
       envelopeId: envelope.id,
       envelopeType: envelope.type,
-      data: {
-        ...envelopeUpdates,
-      },
+      data: envelopeUpdates.data,
+      meta: envelopeUpdates.meta,
     });
   }, 1000);
 
   /**
    * Updates the local envelope and debounces the update to the server.
    */
-  const updateEnvelope = (envelopeUpdates: Partial<TEnvelope>) => {
-    setEnvelope((prev) => ({ ...prev, ...envelopeUpdates }));
+  const updateEnvelope = (envelopeUpdates: UpdateEnvelopePayload) => {
+    setEnvelope((prev) => ({
+      ...prev,
+      ...envelopeUpdates.data,
+      meta: {
+        ...prev.documentMeta,
+        ...envelopeUpdates.meta,
+      },
+    }));
+
     setEnvelopeDebounced(envelopeUpdates);
   };
 
@@ -201,28 +226,17 @@ export const EnvelopeEditorProvider = ({
     handleFieldsUpdate: (fields) => setFieldsDebounced(fields),
   });
 
-  const getFieldColor = useCallback(
-    (field: TLocalField) => {
-      // Todo: Envelopes - Local recipients
-      const recipientIndex = envelope.recipients.findIndex(
-        (recipient) => recipient.id === field.recipientId,
-      );
-
-      return getRecipientColorStyles(Math.max(recipientIndex, 0));
-    },
-    [envelope.recipients], // Todo: Envelopes - Local recipients
-  );
-
   const getRecipientColorKey = useCallback(
     (recipientId: number) => {
-      // Todo: Envelopes - Local recipients
       const recipientIndex = envelope.recipients.findIndex(
         (recipient) => recipient.id === recipientId,
       );
 
-      return AVAILABLE_RECIPIENT_COLORS[Math.max(recipientIndex, 0)];
+      return AVAILABLE_RECIPIENT_COLORS[
+        Math.max(recipientIndex, 0) % AVAILABLE_RECIPIENT_COLORS.length
+      ];
     },
-    [envelope.recipients], // Todo: Envelopes - Local recipients
+    [envelope.recipients],
   );
 
   const { refetch: reloadEnvelope, isLoading: isReloadingEnvelope } = trpc.envelope.get.useQuery(
@@ -234,6 +248,21 @@ export const EnvelopeEditorProvider = ({
     },
   );
 
+  /**
+   * Fetch and sycn the envelope back into the editor.
+   *
+   * Overrides everything.
+   */
+  const syncEnvelope = async () => {
+    await flushAutosave();
+
+    const fetchedEnvelopeData = await reloadEnvelope();
+
+    if (fetchedEnvelopeData.data) {
+      setEnvelope(fetchedEnvelopeData.data);
+    }
+  };
+
   const setLocalEnvelope = (localEnvelope: Partial<TEnvelope>) => {
     setEnvelope((prev) => ({ ...prev, ...localEnvelope }));
   };
@@ -256,10 +285,23 @@ export const EnvelopeEditorProvider = ({
     isEnvelopeMutationPending,
   ]);
 
-  const flushAutosave = () => {
-    void setFieldsAsync();
-    void setRecipientsAsync();
-    void setEnvelopeAsync();
+  const relativePath = useMemo(() => {
+    const documentRootPath = formatDocumentsPath(envelope.team.url);
+    const templateRootPath = formatTemplatesPath(envelope.team.url);
+
+    const basePath = envelope.type === EnvelopeType.DOCUMENT ? documentRootPath : templateRootPath;
+
+    return {
+      basePath,
+      envelopePath: `${basePath}/${envelope.id}`,
+      editorPath: `${basePath}/${envelope.id}/edit`,
+      documentRootPath,
+      templateRootPath,
+    };
+  }, [envelope.type, envelope.id]);
+
+  const flushAutosave = async (): Promise<void> => {
+    await Promise.all([setFieldsAsync(), setRecipientsAsync(), setEnvelopeAsync()]);
   };
 
   return (
@@ -269,7 +311,6 @@ export const EnvelopeEditorProvider = ({
         isDocument: envelope.type === EnvelopeType.DOCUMENT,
         isTemplate: envelope.type === EnvelopeType.TEMPLATE,
         setLocalEnvelope,
-        getFieldColor,
         getRecipientColorKey,
         updateEnvelope,
         setRecipientsDebounced,
@@ -278,6 +319,8 @@ export const EnvelopeEditorProvider = ({
         autosaveError,
         flushAutosave,
         isAutosaving,
+        relativePath,
+        syncEnvelope,
       }}
     >
       {children}