feat: add new field overflow methods (#2715)

apps/remix/app/components/forms/editor/editor-field-date-form.tsx

@@ -7,6 +7,7 @@ import type { z } from 'zod';
 import {
   DEFAULT_FIELD_FONT_SIZE,
   type TDateFieldMeta as DateFieldMeta,
+  FIELD_DATE_META_DEFAULT_VALUES,
   FIELD_DEFAULT_GENERIC_ALIGN,
   ZDateFieldMeta,
 } from '@documenso/lib/types/field-meta';
@@ -20,12 +21,13 @@ import {
 const ZDateFieldFormSchema = ZDateFieldMeta.pick({
   fontSize: true,
   textAlign: true,
+  overflow: true,
 });
 
 type TDateFieldFormSchema = z.infer<typeof ZDateFieldFormSchema>;
 
 type EditorFieldDateFormProps = {
-  value: DateFieldMeta | undefined;
+  value: z.input<typeof ZDateFieldMeta> | undefined;
   onValueChange: (value: DateFieldMeta) => void;
 };
 
@@ -41,6 +43,7 @@ export const EditorFieldDateForm = ({
     defaultValues: {
       fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
       textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
+      overflow: value.overflow || FIELD_DATE_META_DEFAULT_VALUES.overflow,
     },
   });
 

apps/remix/app/components/forms/editor/editor-field-email-form.tsx

@@ -8,6 +8,7 @@ import {
   DEFAULT_FIELD_FONT_SIZE,
   type TEmailFieldMeta as EmailFieldMeta,
   FIELD_DEFAULT_GENERIC_ALIGN,
+  FIELD_EMAIL_META_DEFAULT_VALUES,
   ZEmailFieldMeta,
 } from '@documenso/lib/types/field-meta';
 import { Form } from '@documenso/ui/primitives/form/form';
@@ -20,12 +21,13 @@ import {
 const ZEmailFieldFormSchema = ZEmailFieldMeta.pick({
   fontSize: true,
   textAlign: true,
+  overflow: true,
 });
 
 type TEmailFieldFormSchema = z.infer<typeof ZEmailFieldFormSchema>;
 
 type EditorFieldEmailFormProps = {
-  value: EmailFieldMeta | undefined;
+  value: z.input<typeof ZEmailFieldMeta> | undefined;
   onValueChange: (value: EmailFieldMeta) => void;
 };
 
@@ -41,6 +43,7 @@ export const EditorFieldEmailForm = ({
     defaultValues: {
       fontSize: value.fontSize || DEFAULT_FIELD_FONT_SIZE,
       textAlign: value.textAlign ?? FIELD_DEFAULT_GENERIC_ALIGN,
+      overflow: value.overflow || FIELD_EMAIL_META_DEFAULT_VALUES.overflow,
     },
   });
 

apps/remix/app/components/forms/editor/editor-field-signature-form.tsx

@@ -6,19 +6,24 @@ import { useForm, useWatch } from 'react-hook-form';
 import type { z } from 'zod';
 
 import { DEFAULT_SIGNATURE_TEXT_FONT_SIZE } from '@documenso/lib/constants/pdf';
-import { type TSignatureFieldMeta, ZSignatureFieldMeta } from '@documenso/lib/types/field-meta';
+import {
+  FIELD_SIGNATURE_META_DEFAULT_VALUES,
+  type TSignatureFieldMeta,
+  ZSignatureFieldMeta,
+} from '@documenso/lib/types/field-meta';
 import { Form } from '@documenso/ui/primitives/form/form';
 
 import { EditorGenericFontSizeField } from './editor-field-generic-field-forms';
 
 const ZSignatureFieldFormSchema = ZSignatureFieldMeta.pick({
   fontSize: true,
+  overflow: true,
 });
 
 type TSignatureFieldFormSchema = z.infer<typeof ZSignatureFieldFormSchema>;
 
 type EditorFieldSignatureFormProps = {
-  value: TSignatureFieldMeta | undefined;
+  value: z.input<typeof ZSignatureFieldMeta> | undefined;
   onValueChange: (value: TSignatureFieldMeta) => void;
 };
 
@@ -32,6 +37,7 @@ export const EditorFieldSignatureForm = ({
     resolver: zodResolver(ZSignatureFieldFormSchema),
     mode: 'onChange',
     defaultValues: {
+      overflow: value.overflow || FIELD_SIGNATURE_META_DEFAULT_VALUES.overflow,
       fontSize: value.fontSize || DEFAULT_SIGNATURE_TEXT_FONT_SIZE,
     },
   });
@@ -60,7 +66,7 @@ export const EditorFieldSignatureForm = ({
         <fieldset className="flex flex-col gap-2">
           <div>
             <EditorGenericFontSizeField formControl={form.control} />
-            <p className="text-muted-foreground mt-0.5 text-xs">
+            <p className="mt-0.5 text-xs text-muted-foreground">
               <Trans>The typed signature font size</Trans>
             </p>
           </div>

apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx

@@ -167,7 +167,9 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
       const currentTarget = e.currentTarget as Konva.Group;
       const target = e.target as Konva.Shape;
 
-      const { width: fieldWidth, height: fieldHeight } = fieldGroup.getClientRect();
+      const fieldRect = fieldGroup.findOne('.field-rect');
+      const fieldWidth = fieldRect ? fieldRect.width() : fieldGroup.width();
+      const fieldHeight = fieldRect ? fieldRect.height() : fieldGroup.height();
 
       const foundField = localPageFields.find((f) => f.id === unparsedField.id);
       const foundLoadingGroup = currentTarget.findOne('.loading-spinner-group');
@@ -195,8 +197,8 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
       }
 
       const loadingSpinnerGroup = createSpinner({
-        fieldWidth: fieldWidth / scale,
-        fieldHeight: fieldHeight / scale,
+        fieldWidth,
+        fieldHeight,
       });
 
       const parsedFoundField = ZFullFieldSchema.parse(foundField);