Feature/sign placement UI (#4891)

Show signature preview on hover Place signature smaller (mkatch preview size) Retain signature in modal on close/open Clean up ui generally Small bug fixes
2026-07-16 03:20:46 +02:00 · 2025-11-19 12:53:25 +00:00
parent 8ffe53536d
commit 0f73a1cf13
20 changed files with 1402 additions and 359 deletions
@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Stack, Alert, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { DrawingControls } from '@app/components/annotation/shared/DrawingControls';
 import { ColorPicker } from '@app/components/annotation/shared/ColorPicker';
 import { usePDFAnnotation } from '@app/components/annotation/providers/PDFAnnotationProvider';
+import { useSignature } from '@app/contexts/SignatureContext';

 export interface AnnotationToolConfig {
  enableDrawing?: boolean;
@@ -32,10 +33,34 @@ export const BaseAnnotationTool: React.FC<BaseAnnotationToolProps> = ({
    undo,
    redo
  } = usePDFAnnotation();
+  const { historyApiRef } = useSignature();

  const [selectedColor, setSelectedColor] = useState('#000000');
  const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
  const [signatureData, setSignatureData] = useState<string | null>(null);
+  const [historyAvailability, setHistoryAvailability] = useState({ canUndo: false, canRedo: false });
+  const historyApiInstance = historyApiRef.current;
+
+  useEffect(() => {
+    if (!historyApiInstance) {
+      setHistoryAvailability({ canUndo: false, canRedo: false });
+      return;
+    }
+
+    const updateAvailability = () => {
+      setHistoryAvailability({
+        canUndo: historyApiInstance.canUndo?.() ?? false,
+        canRedo: historyApiInstance.canRedo?.() ?? false,
+      });
+    };
+
+    const unsubscribe = historyApiInstance.subscribe?.(updateAvailability);
+    updateAvailability();
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [historyApiInstance]);

  const handleSignatureDataChange = (data: string | null) => {
    setSignatureData(data);
@@ -54,6 +79,8 @@ export const BaseAnnotationTool: React.FC<BaseAnnotationToolProps> = ({
      <DrawingControls
        onUndo={undo}
        onRedo={redo}
+        canUndo={historyAvailability.canUndo}
+        canRedo={historyAvailability.canRedo}
        onPlaceSignature={config.showPlaceButton ? handlePlaceSignature : undefined}
        hasSignatureData={!!signatureData}
        disabled={disabled}
@@ -86,4 +113,4 @@ export const BaseAnnotationTool: React.FC<BaseAnnotationToolProps> = ({
      />
    </Stack>
  );
-};
+};
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Modal, Stack, ColorPicker as MantineColorPicker, Group, Button, ColorSwatch } from '@mantine/core';
+import { useTranslation } from 'react-i18next';

 interface ColorPickerProps {
  isOpen: boolean;
@@ -14,13 +15,16 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
  onClose,
  selectedColor,
  onColorChange,
-  title = "Choose Color"
+  title
 }) => {
+  const { t } = useTranslation();
+  const resolvedTitle = title ?? t('colorPicker.title', 'Choose colour');
+
  return (
    <Modal
      opened={isOpen}
      onClose={onClose}
-      title={title}
+      title={resolvedTitle}
      size="sm"
      centered
    >
@@ -36,7 +40,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
        />
        <Group justify="flex-end">
          <Button onClick={onClose}>
-            Done
+            {t('common.done', 'Done')}
          </Button>
        </Group>
      </Stack>
@@ -64,4 +68,4 @@ export const ColorSwatchButton: React.FC<ColorSwatchButtonProps> = ({
      onClick={onClick}
    />
  );
-};
+};
@@ -1,5 +1,6 @@
-import React, { useRef, useState } from 'react';
-import { Paper, Button, Modal, Stack, Text, Popover, ColorPicker as MantineColorPicker } from '@mantine/core';
+import React, { useEffect, useRef, useState } from 'react';
+import { Paper, Button, Modal, Stack, Text, Group } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
 import { ColorSwatchButton } from '@app/components/annotation/shared/ColorPicker';
 import PenSizeSelector from '@app/components/tools/sign/PenSizeSelector';
 import SignaturePad from 'signature_pad';
@@ -20,6 +21,7 @@ interface DrawingCanvasProps {
  modalWidth?: number;
  modalHeight?: number;
  additionalButtons?: React.ReactNode;
+  initialSignatureData?: string;
 }

 export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
@@ -34,12 +36,14 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
  disabled = false,
  width = 400,
  height = 150,
+  initialSignatureData,
 }) => {
+  const { t } = useTranslation();
  const previewCanvasRef = useRef<HTMLCanvasElement>(null);
  const modalCanvasRef = useRef<HTMLCanvasElement>(null);
  const padRef = useRef<SignaturePad | null>(null);
  const [modalOpen, setModalOpen] = useState(false);
-  const [colorPickerOpen, setColorPickerOpen] = useState(false);
+  const [savedSignatureData, setSavedSignatureData] = useState<string | null>(null);

  const initPad = (canvas: HTMLCanvasElement) => {
    if (!padRef.current) {
@@ -55,6 +59,18 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
        minDistance: 5,
        velocityFilterWeight: 0.7,
      });
+
+      // Restore saved signature data if it exists
+      if (savedSignatureData) {
+        const img = new Image();
+        img.onload = () => {
+          const ctx = canvas.getContext('2d');
+          if (ctx) {
+            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          }
+        };
+        img.src = savedSignatureData;
+      }
    }
  };

@@ -104,36 +120,35 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
    return trimmedCanvas.toDataURL('image/png');
  };

+  const renderPreview = (dataUrl: string) => {
+    const canvas = previewCanvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const img = new Image();
+    img.onload = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
+      const scaledWidth = img.width * scale;
+      const scaledHeight = img.height * scale;
+      const x = (canvas.width - scaledWidth) / 2;
+      const y = (canvas.height - scaledHeight) / 2;
+
+      ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
+    };
+    img.src = dataUrl;
+  };
+
  const closeModal = () => {
    if (padRef.current && !padRef.current.isEmpty()) {
      const canvas = modalCanvasRef.current;
      if (canvas) {
        const trimmedPng = trimCanvas(canvas);
+        const untrimmedPng = canvas.toDataURL('image/png');
+        setSavedSignatureData(untrimmedPng); // Save untrimmed for restoration
        onSignatureDataChange(trimmedPng);
-
-        // Update preview canvas with proper aspect ratio
-        const img = new Image();
-        img.onload = () => {
-          if (previewCanvasRef.current) {
-            const ctx = previewCanvasRef.current.getContext('2d');
-            if (ctx) {
-              ctx.clearRect(0, 0, previewCanvasRef.current.width, previewCanvasRef.current.height);
-
-              // Calculate scaling to fit within preview canvas while maintaining aspect ratio
-              const scale = Math.min(
-                previewCanvasRef.current.width / img.width,
-                previewCanvasRef.current.height / img.height
-              );
-              const scaledWidth = img.width * scale;
-              const scaledHeight = img.height * scale;
-              const x = (previewCanvasRef.current.width - scaledWidth) / 2;
-              const y = (previewCanvasRef.current.height - scaledHeight) / 2;
-
-              ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
-            }
-          }
-        };
-        img.src = trimmedPng;
+        renderPreview(trimmedPng);

        if (onDrawingComplete) {
          onDrawingComplete();
@@ -157,6 +172,7 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
        ctx.clearRect(0, 0, previewCanvasRef.current.width, previewCanvasRef.current.height);
      }
    }
+    setSavedSignatureData(null); // Clear saved signature
    onSignatureDataChange(null);
  };

@@ -173,67 +189,70 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
    }
  };

+  useEffect(() => {
+    updatePenColor(selectedColor);
+  }, [selectedColor]);
+
+  useEffect(() => {
+    updatePenSize(penSize);
+  }, [penSize]);
+
+  useEffect(() => {
+    const canvas = previewCanvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    if (!initialSignatureData) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      return;
+    }
+
+    renderPreview(initialSignatureData);
+  }, [initialSignatureData]);
+
  return (
    <>
      <Paper withBorder p="md">
        <Stack gap="sm">
-          <Text fw={500}>Draw your signature</Text>
          <PrivateContent>
-            <canvas
-              ref={previewCanvasRef}
-              width={width}
-              height={height}
-              style={{
-                border: '1px solid #ccc',
-                borderRadius: '4px',
-                cursor: disabled ? 'default' : 'pointer',
-                backgroundColor: '#ffffff',
-                width: '100%',
-              }}
-              onClick={disabled ? undefined : openModal}
-            />
+          <Text fw={500}>{t('sign.canvas.heading', 'Draw your signature')}</Text>
+          <canvas
+            ref={previewCanvasRef}
+            width={width}
+            height={height}
+            style={{
+              border: '1px solid #ccc',
+              borderRadius: '4px',
+              cursor: disabled ? 'default' : 'pointer',
+              backgroundColor: '#ffffff',
+              width: '100%',
+            }}
+            onClick={disabled ? undefined : openModal}
+          />
          </PrivateContent>
          <Text size="sm" c="dimmed" ta="center">
-            Click to open drawing canvas
+            {t('sign.canvas.clickToOpen', 'Click to open the drawing canvas')}
          </Text>
        </Stack>
      </Paper>

-      <Modal opened={modalOpen} onClose={closeModal} title="Draw Your Signature" size="auto" centered>
+      <Modal opened={modalOpen} onClose={closeModal} title={t('sign.canvas.modalTitle', 'Draw your signature')} size="auto" centered>
        <Stack gap="md">
-          <div style={{ display: 'flex', gap: '20px', alignItems: 'flex-end' }}>
-            <div>
-              <Text size="sm" fw={500} mb="xs">Color</Text>
-              <Popover
-                opened={colorPickerOpen}
-                onChange={setColorPickerOpen}
-                position="bottom-start"
-                withArrow
-                withinPortal={false}
-              >
-                <Popover.Target>
-                  <div>
-                    <ColorSwatchButton
-                      color={selectedColor}
-                      onClick={() => setColorPickerOpen(!colorPickerOpen)}
-                    />
-                  </div>
-                </Popover.Target>
-                <Popover.Dropdown>
-                  <MantineColorPicker
-                    format="hex"
-                    value={selectedColor}
-                    onChange={(color) => {
-                      onColorSwatchClick();
-                      updatePenColor(color);
-                    }}
-                    swatches={['#000000', '#0066cc', '#cc0000', '#cc6600', '#009900', '#6600cc']}
-                  />
-                </Popover.Dropdown>
-              </Popover>
-            </div>
-            <div>
-              <Text size="sm" fw={500} mb="xs">Pen Size</Text>
+          <Group gap="lg" align="flex-end" wrap="wrap">
+            <Stack gap={4} style={{ minWidth: 120 }}>
+              <Text size="sm" fw={500}>
+                {t('sign.canvas.colorLabel', 'Colour')}
+              </Text>
+              <ColorSwatchButton
+                color={selectedColor}
+                onClick={onColorSwatchClick}
+              />
+            </Stack>
+            <Stack gap={4} style={{ minWidth: 120 }}>
+              <Text size="sm" fw={500}>
+                {t('sign.canvas.penSizeLabel', 'Pen size')}
+              </Text>
              <PenSizeSelector
                value={penSize}
                inputValue={penSizeInput}
@@ -242,12 +261,12 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
                  updatePenSize(size);
                }}
                onInputChange={onPenSizeInputChange}
-                placeholder="Size"
+                placeholder={t('sign.canvas.penSizePlaceholder', 'Size')}
                size="compact-sm"
-                style={{ width: '60px' }}
+                style={{ width: '80px' }}
              />
-            </div>
-          </div>
+            </Stack>
+          </Group>

          <PrivateContent>
            <canvas
@@ -263,7 +282,7 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
                backgroundColor: 'white',
                width: '100%',
                maxWidth: '800px',
-                height: '400px',
+                height: '25rem',
                cursor: 'crosshair',
              }}
            />
@@ -271,10 +290,10 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({

          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <Button variant="subtle" color="red" onClick={clear}>
-              Clear Canvas
+              {t('sign.canvas.clear', 'Clear canvas')}
            </Button>
            <Button onClick={closeModal}>
-              Done
+              {t('common.done', 'Done')}
            </Button>
          </div>
        </Stack>
@@ -1,6 +1,7 @@
 import React from 'react';
-import { Group, Button } from '@mantine/core';
+import { Group, Button, ActionIcon, Tooltip } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
+import { LocalIcon } from '@app/components/shared/LocalIcon';

 interface DrawingControlsProps {
  onUndo?: () => void;
@@ -8,8 +9,11 @@ interface DrawingControlsProps {
  onPlaceSignature?: () => void;
  hasSignatureData?: boolean;
  disabled?: boolean;
+  canUndo?: boolean;
+  canRedo?: boolean;
  showPlaceButton?: boolean;
  placeButtonText?: string;
+  additionalControls?: React.ReactNode;
 }

 export const DrawingControls: React.FC<DrawingControlsProps> = ({
@@ -18,30 +22,48 @@ export const DrawingControls: React.FC<DrawingControlsProps> = ({
  onPlaceSignature,
  hasSignatureData = false,
  disabled = false,
+  canUndo = true,
+  canRedo = true,
  showPlaceButton = true,
-  placeButtonText = "Update and Place"
+  placeButtonText = "Update and Place",
+  additionalControls,
 }) => {
  const { t } = useTranslation();
+  const undoDisabled = disabled || !canUndo;
+  const redoDisabled = disabled || !canRedo;

  return (
-    <Group gap="sm">
-      {/* Undo/Redo Controls */}
-      <Button
-        variant="outline"
-        onClick={onUndo}
-        disabled={disabled}
-        flex={1}
-      >
-        {t('sign.undo', 'Undo')}
-      </Button>
-      <Button
-        variant="outline"
-        onClick={onRedo}
-        disabled={disabled}
-        flex={1}
-      >
-        {t('sign.redo', 'Redo')}
-      </Button>
+    <Group gap="xs" wrap="nowrap" align="center">
+      {onUndo && (
+        <Tooltip label={t('sign.undo', 'Undo')}>
+          <ActionIcon
+            variant="subtle"
+            size="lg"
+            aria-label={t('sign.undo', 'Undo')}
+            onClick={onUndo}
+            disabled={undoDisabled}
+            color={undoDisabled ? 'gray' : 'blue'}
+          >
+            <LocalIcon icon="undo" width={20} height={20} style={{ color: 'currentColor' }} />
+          </ActionIcon>
+        </Tooltip>
+      )}
+      {onRedo && (
+        <Tooltip label={t('sign.redo', 'Redo')}>
+          <ActionIcon
+            variant="subtle"
+            size="lg"
+            aria-label={t('sign.redo', 'Redo')}
+            onClick={onRedo}
+            disabled={redoDisabled}
+            color={redoDisabled ? 'gray' : 'blue'}
+          >
+            <LocalIcon icon="redo" width={20} height={20} style={{ color: 'currentColor' }} />
+          </ActionIcon>
+        </Tooltip>
+      )}
+
+      {additionalControls}

      {/* Place Signature Button */}
      {showPlaceButton && onPlaceSignature && (
@@ -50,11 +72,11 @@ export const DrawingControls: React.FC<DrawingControlsProps> = ({
          color="blue"
          onClick={onPlaceSignature}
          disabled={disabled || !hasSignatureData}
-          flex={1}
+          ml="auto"
        >
          {placeButtonText}
        </Button>
      )}
    </Group>
  );
-};
+};
@@ -34,12 +34,18 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
  const [fontSizeInput, setFontSizeInput] = useState(fontSize.toString());
  const fontSizeCombobox = useCombobox();
  const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
+  const [colorInput, setColorInput] = useState(textColor);

  // Sync font size input with prop changes
  useEffect(() => {
    setFontSizeInput(fontSize.toString());
  }, [fontSize]);

+  // Sync color input with prop changes
+  useEffect(() => {
+    setColorInput(textColor);
+  }, [textColor]);
+
  const fontOptions = [
    { value: 'Helvetica', label: 'Helvetica' },
    { value: 'Times-Roman', label: 'Times' },
@@ -50,10 +56,15 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({

  const fontSizeOptions = ['8', '12', '16', '20', '24', '28', '32', '36', '40', '48', '56', '64', '72', '80', '96', '112', '128', '144', '160', '176', '192', '200'];

+  // Validate hex color
+  const isValidHexColor = (color: string): boolean => {
+    return /^#[0-9A-Fa-f]{6}$/.test(color);
+  };
+
  return (
    <Stack gap="sm">
      <TextInput
-        label={label || t('sign.text.name', 'Signer Name')}
+        label={label || t('sign.text.name', 'Signer name')}
        placeholder={placeholder || t('sign.text.placeholder', 'Enter your full name')}
        value={text}
        onChange={(e) => onTextChange(e.target.value)}
@@ -63,7 +74,7 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({

      {/* Font Selection */}
      <Select
-        label="Font"
+        label={t('sign.text.fontLabel', 'Font')}
        value={fontFamily}
        onChange={(value) => onFontFamilyChange(value || 'Helvetica')}
        data={fontOptions}
@@ -88,8 +99,8 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
        >
          <Combobox.Target>
            <TextInput
-              label="Font Size"
-              placeholder="Type or select font size (8-200)"
+              label={t('sign.text.fontSizeLabel', 'Font size')}
+              placeholder={t('sign.text.fontSizePlaceholder', 'Type or select font size (8-200)')}
              value={fontSizeInput}
              onChange={(event) => {
                const value = event.currentTarget.value;
@@ -135,14 +146,29 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
        {onTextColorChange && (
          <Box>
            <TextInput
-              label="Text Color"
-              value={textColor}
-              readOnly
+              label={t('sign.text.colorLabel', 'Text colour')}
+              value={colorInput}
+              placeholder="#000000"
              disabled={disabled}
-              onClick={() => !disabled && setIsColorPickerOpen(true)}
-              style={{ cursor: disabled ? 'default' : 'pointer' }}
+              onChange={(e) => {
+                const value = e.currentTarget.value;
+                setColorInput(value);
+
+                // Update color if valid hex
+                if (isValidHexColor(value)) {
+                  onTextColorChange(value);
+                }
+              }}
+              onBlur={() => {
+                // Revert to valid color on blur if invalid
+                if (!isValidHexColor(colorInput)) {
+                  setColorInput(textColor);
+                }
+              }}
+              style={{ width: '100%' }}
              rightSection={
                <Box
+                  onClick={() => !disabled && setIsColorPickerOpen(true)}
                  style={{
                    width: 24,
                    height: 24,
@@ -169,4 +195,4 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
      )}
    </Stack>
  );
-};
+};