feat: polish envelopes (#2090)

## Description The rest of the owl
2026-07-25 09:25:08 +10:00 · 2025-10-24 16:22:06 +11:00
parent 88836404d1
commit 03eb6af69a
141 changed files with 5171 additions and 2402 deletions
@@ -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)),
+  };
+};
@@ -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,
+  };
+}
@@ -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}