[WC-3537]: Fix resizing issue with Signature pad (#2375)

Author: r0b1n

packages/pluggableWidgets/signature-web/CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+- We fixed an issue where strokes stopped being registered in some cases.
+
+- We fixed an issue where the signature canvas was initialized at the wrong size and did not fill its container.
+
 ## [2.0.1] - 2026-07-17
 
 ### Fixed

packages/pluggableWidgets/signature-web/src/Signature.editorPreview.tsx

@@ -26,9 +26,6 @@ export function preview(props: SignaturePreviewProps): ReactElement {
     return (
         <SizeContainer
             className={classNames("widget-signature-preview", props.class)}
-            classNameInner={classNames("widget-signature-wrapper", "form-control", "mx-textarea-input", "mx-textarea", {
-                disabled: props.readOnly
-            })}
             widthUnit={widthUnit}
             width={width || 100}
             heightUnit={heightUnit}

packages/pluggableWidgets/signature-web/src/__tests__/useSignaturePad.spec.tsx

@@ -0,0 +1,104 @@
+import "@testing-library/jest-dom";
+import { act, render } from "@testing-library/react";
+import { ReactElement } from "react";
+import SignaturePad from "signature_pad";
+import { EditableValueBuilder } from "@mendix/widget-plugin-test-utils";
+import { SignatureContainerProps } from "../../typings/SignatureProps";
+import { useSignaturePad } from "../utils/useSignaturePad";
+
+type ImageSource = SignatureContainerProps["imageSource"];
+
+jest.mock("signature_pad", () => ({
+    __esModule: true,
+    default: jest.fn().mockImplementation(function (this: any) {
+        this.on = jest.fn();
+        this.off = jest.fn();
+        this.redraw = jest.fn();
+        this.addEventListener = jest.fn();
+        this.isEmpty = jest.fn(() => true);
+    })
+}));
+
+const MockSignaturePad = SignaturePad as jest.MockedClass<typeof SignaturePad>;
+
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn()
+}));
+
+function buildImageSource(overrides: Partial<ImageSource> = {}): ImageSource {
+    return {
+        ...new EditableValueBuilder<string>().isUnavailable().build(),
+        ...overrides
+    } as unknown as ImageSource;
+}
+
+// Wrapper component that mounts both refs into real DOM nodes
+function TestHarness({ imageSource }: { imageSource: ImageSource }): ReactElement {
+    const { containerRef, canvasRef } = useSignaturePad({ imageSource, penType: "ballpoint", penColor: "#000000" });
+    return (
+        <div ref={containerRef} data-testid="container">
+            <canvas ref={canvasRef} data-testid="canvas" />
+        </div>
+    );
+}
+
+describe("useSignaturePad — canvas initialization", () => {
+    // jsdom doesn't do layout, so offsetWidth/Height are always 0.
+    // Stub them on the prototype before each test so the init effect reads real numbers.
+    let offsetWidthSpy: jest.SpyInstance;
+    let offsetHeightSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    afterEach(() => {
+        offsetWidthSpy?.mockRestore();
+        offsetHeightSpy?.mockRestore();
+    });
+
+    function stubContainerDimensions(width: number, height: number): void {
+        offsetWidthSpy = jest.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockReturnValue(width);
+        offsetHeightSpy = jest.spyOn(HTMLElement.prototype, "offsetHeight", "get").mockReturnValue(height);
+    }
+
+    it("sizes canvas to containerRef dimensions when imageSource is unavailable", () => {
+        stubContainerDimensions(400, 200);
+        const imageSource = buildImageSource();
+
+        const { getByTestId } = render(<TestHarness imageSource={imageSource} />);
+
+        const canvas = getByTestId("canvas") as HTMLCanvasElement;
+        expect(canvas.width).toBe(400);
+        expect(canvas.height).toBe(200);
+        expect(MockSignaturePad).toHaveBeenCalledWith(canvas, expect.any(Object));
+    });
+
+    it("sizes canvas to containerRef dimensions when imageSource is available with a value", () => {
+        stubContainerDimensions(600, 300);
+        const imageSource = buildImageSource({
+            status: "available" as any,
+            value: { uri: "data:image/png;base64,abc" } as any,
+            readOnly: false
+        });
+
+        const { getByTestId } = render(<TestHarness imageSource={imageSource} />);
+
+        const canvas = getByTestId("canvas") as HTMLCanvasElement;
+        expect(canvas.width).toBe(600);
+        expect(canvas.height).toBe(300);
+        expect(MockSignaturePad).toHaveBeenCalledWith(canvas, expect.any(Object));
+    });
+
+    it("does not initialize SignaturePad when imageSource is still loading", () => {
+        const imageSource = buildImageSource({ status: "loading" as any, readOnly: true });
+
+        render(<TestHarness imageSource={imageSource} />);
+
+        act(() => {});
+
+        expect(MockSignaturePad).not.toHaveBeenCalled();
+    });
+});

packages/pluggableWidgets/signature-web/src/components/Signature.tsx

@@ -25,16 +25,13 @@ export function SignatureComponent(props: SignatureContainerProps): ReactElement
         }
     };
 
-    const { canvasRef, onResize } = useSignaturePad(props, handleSignEnd);
+    const { canvasRef, containerRef } = useSignaturePad(props, handleSignEnd);
 
     return (
         <SizeContainer
             {...props}
+            ref={containerRef}
             className={classNames("widget-signature", className)}
-            classNameInner={classNames("widget-signature-wrapper", "form-control", "mx-textarea-input", "mx-textarea", {
-                disabled: readOnly
-            })}
-            onResize={onResize}
             readOnly={readOnly}
         >
             {validation && <ValidationAlert>{validation}</ValidationAlert>}

packages/pluggableWidgets/signature-web/src/components/SizeContainer.tsx

@@ -1,23 +1,19 @@
 import classNames from "classnames";
-import { CSSProperties, FC, PropsWithChildren, RefObject, useMemo } from "react";
-import { useResizeObserver } from "@mendix/widget-plugin-hooks/useResizeObserver";
+import { CSSProperties, ForwardedRef, forwardRef, PropsWithChildren, useMemo } from "react";
 import { constructWrapperStyle, DimensionsProps } from "../utils/dimensions";
+
 export interface SizeProps extends DimensionsProps, PropsWithChildren {
     className: string;
-    classNameInner?: string;
     readOnly?: boolean;
     style?: CSSProperties;
-    onResize?: () => void;
     tabIndex?: number;
 }
 
-export const SizeContainer: FC<SizeProps> = (props: SizeProps) => {
+export const SizeContainer = forwardRef(function SizeContainer(props: SizeProps, ref: ForwardedRef<HTMLDivElement>) {
     const {
         className,
         children,
-        classNameInner,
         readOnly = false,
-        onResize,
         widthUnit,
         width,
         heightUnit,
@@ -29,7 +25,6 @@ export const SizeContainer: FC<SizeProps> = (props: SizeProps) => {
         overflowY,
         tabIndex
     } = props;
-    const ref = useResizeObserver(() => onResize?.()) as RefObject<HTMLDivElement>;
     const wrapperStyle = useMemo(
         () =>
             constructWrapperStyle({
@@ -55,9 +50,19 @@ export const SizeContainer: FC<SizeProps> = (props: SizeProps) => {
             }}
             tabIndex={tabIndex}
         >
-            <div className={classNames("size-box-inner", classNameInner)} aria-disabled={readOnly}>
+            <div
+                className={classNames(
+                    "size-box-inner",
+                    "widget-signature-wrapper",
+                    "form-control",
+                    "mx-textarea-input",
+                    "mx-textarea",
+                    { disabled: readOnly }
+                )}
+                aria-disabled={readOnly}
+            >
                 {children}
             </div>
         </div>
     );
-};
+});

packages/pluggableWidgets/signature-web/src/utils/useSignaturePad.ts

@@ -1,45 +1,23 @@
-import { RefObject, useCallback, useEffect, useMemo, useRef } from "react";
+import { RefObject, useCallback, useEffect, useRef } from "react";
 import SignaturePad, { Options } from "signature_pad";
-import { SignatureContainerProps } from "../../typings/SignatureProps";
-
-function usePrevious<T>(value: T): T | null {
-    const ref = useRef<T>(null);
-    useEffect(() => {
-        ref.current = value;
-    }, [value]);
-    return ref.current;
-}
+import { useResizeObserver } from "@mendix/widget-plugin-hooks/useResizeObserver";
+import { PenTypeEnum, SignatureContainerProps } from "../../typings/SignatureProps";
 
 export function useSignaturePad(
     props: Pick<SignatureContainerProps, "imageSource" | "hasSignatureAttribute" | "penType" | "penColor">,
     onSignEnd?: (imageDataURL?: string) => void
 ): {
-    signaturePadRef: RefObject<SignaturePad | null>;
     canvasRef: RefObject<HTMLCanvasElement | null>;
-    onResize?: () => void;
+    containerRef: RefObject<HTMLDivElement | null>;
 } {
     const { imageSource, hasSignatureAttribute, penType, penColor } = props;
     const readOnly = imageSource.readOnly;
     const signaturePadRef = useRef<SignaturePad | null>(null);
     const canvasRef = useRef<HTMLCanvasElement | null>(null);
-    const isSignatureInitialized = useRef(false);
     const hasSignature = usePrevious<boolean>(hasSignatureAttribute?.value ?? false) ?? false;
 
-    const signaturePadOptions: Options = useMemo(() => {
-        let options: Options = {};
-        if (penType === "fountain") {
-            options = { minWidth: 0.6, maxWidth: 2.6, velocityFilterWeight: 0.6 };
-        } else if (penType === "ballpoint") {
-            options = { minWidth: 1.4, maxWidth: 1.5, velocityFilterWeight: 1.5 };
-        } else if (penType === "marker") {
-            options = { minWidth: 2, maxWidth: 4, velocityFilterWeight: 0.9 };
-        }
-        return options;
-    }, [penType]);
-
     const handleSignEnd = useCallback(() => {
         const imageDataUrl = signaturePadRef.current?.toDataURL();
-
         if (hasSignatureAttribute) {
             hasSignatureAttribute.setValue(!signaturePadRef.current?.isEmpty());
         }
@@ -57,26 +35,31 @@ export function useSignaturePad(
         }
     }, [readOnly]);
 
-    const onResize = (): void => {
-        if (canvasRef.current && signaturePadRef.current) {
-            const data = signaturePadRef.current.toData();
-            canvasRef.current.width =
-                canvasRef.current && canvasRef.current.parentElement ? canvasRef.current.parentElement.offsetWidth : 0;
-            canvasRef.current.height =
-                canvasRef.current && canvasRef.current.parentElement ? canvasRef.current.parentElement.offsetHeight : 0;
-            signaturePadRef.current.clear();
-            signaturePadRef.current.fromData(data);
-        }
-    };
+    const handleResize = useCallback(
+        (element: HTMLDivElement) => {
+            const pad = signaturePadRef.current;
+            const canvas = canvasRef.current;
+            if (pad && canvas) {
+                // off()+on() resets _drawingStroke and clears stale pointer/move listeners,
+                // preventing pointerdown from being silently dropped after a mid-stroke resize.
+                pad.off();
+                canvas.width = element.offsetWidth;
+                canvas.height = element.offsetHeight;
+                pad.redraw();
+                if (!readOnly) {
+                    pad.on();
+                }
+            }
+        },
+        [readOnly]
+    );
+
+    const containerRef = useResizeObserver(handleResize) as RefObject<HTMLDivElement | null>;
 
     // Clear signature pad when hasSignature value changes from true to false
     useEffect(() => {
-        if (hasSignatureAttribute?.status === "available") {
-            if (hasSignatureAttribute?.value !== hasSignature) {
-                if (hasSignature === true) {
-                    signaturePadRef.current?.clear();
-                }
-            }
+        if (hasSignatureAttribute?.status === "available" && hasSignature && hasSignatureAttribute.value === false) {
+            signaturePadRef.current?.clear();
         }
     }, [hasSignature, hasSignatureAttribute?.status, hasSignatureAttribute?.value]);
 
@@ -88,19 +71,38 @@ export function useSignaturePad(
             const canInstantiateSignaturePad =
                 signaturePadRef.current === null &&
                 (imageSource?.status === "available" ? imageSource.value?.uri : imageSource.status === "unavailable");
-            if (canInstantiateSignaturePad && !isSignatureInitialized.current) {
-                signaturePadRef.current = new SignaturePad(localCanvas, {
-                    penColor,
-                    ...signaturePadOptions
-                });
+            if (canInstantiateSignaturePad) {
+                const container = containerRef.current;
+                if (container) {
+                    localCanvas.width = container.offsetWidth;
+                    localCanvas.height = container.offsetHeight;
+                }
+                signaturePadRef.current = new SignaturePad(localCanvas, { penColor, ...getPenOptions(penType) });
                 signaturePadRef.current.addEventListener("endStroke", handleSignEnd);
                 if (readOnly) {
-                    signaturePadRef.current?.off();
+                    signaturePadRef.current.off();
                 }
-                isSignatureInitialized.current = true;
             }
         }
-    }, [handleSignEnd, penColor, readOnly, signaturePadOptions, imageSource, hasSignatureAttribute]);
+    }, [handleSignEnd, penColor, penType, readOnly, imageSource, hasSignatureAttribute, containerRef]);
+
+    return { canvasRef, containerRef };
+}
+
+const PEN_OPTIONS: Record<PenTypeEnum, Options> = {
+    fountain: { minWidth: 0.6, maxWidth: 2.6, velocityFilterWeight: 0.6 },
+    ballpoint: { minWidth: 1.4, maxWidth: 1.5, velocityFilterWeight: 1.5 },
+    marker: { minWidth: 2, maxWidth: 4, velocityFilterWeight: 0.9 }
+};
+
+function getPenOptions(penType: PenTypeEnum): Options {
+    return PEN_OPTIONS[penType];
+}
 
-    return { signaturePadRef, canvasRef, onResize };
+function usePrevious<T>(value: T): T | null {
+    const ref = useRef<T>(null);
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
 }