@josephomills/esign 0.4.0 → 0.5.1

package/dist/ui/index.cjs

@@ -171,7 +171,7 @@ function ConsentBlock({ value, onChange, primaryColor = "#4f46e5" }) {
     ] })
   ] });
 }
-function PdfViewer({ url, placement, workerSrc, primaryColor = "#4f46e5" }) {
+function PdfViewer({ url, placements, workerSrc, primaryColor = "#4f46e5" }) {
   const containerRef = react.useRef(null);
   const [failed, setFailed] = react.useState(false);
   react.useEffect(() => {
@@ -202,12 +202,13 @@ function PdfViewer({ url, placement, workerSrc, primaryColor = "#4f46e5" }) {
           wrap.style.marginBottom = "14px";
           wrap.style.boxShadow = "0 1px 4px rgba(0,0,0,0.12)";
           wrap.appendChild(canvas);
-          if (placement && placement.page === p) {
+          for (const pl of placements ?? []) {
+            if (pl.page !== p) continue;
             const box = document.createElement("div");
-            box.style.cssText = `position:absolute;left:${placement.x * 100}%;top:${placement.y * 100}%;width:${placement.w * 100}%;height:${placement.h * 100}%;border:2px dashed ${primaryColor};background:${primaryColor}1a;border-radius:4px;pointer-events:none;`;
+            box.style.cssText = `position:absolute;left:${pl.x * 100}%;top:${pl.y * 100}%;width:${pl.w * 100}%;height:${pl.h * 100}%;border:2px dashed ${primaryColor};background:${primaryColor}1a;border-radius:4px;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden;`;
             const label = document.createElement("span");
-            label.textContent = "Signature";
-            label.style.cssText = `position:absolute;top:-18px;left:0;font-size:11px;font-weight:600;color:${primaryColor};`;
+            label.textContent = "\u270D Sign here";
+            label.style.cssText = `font-size:11px;font-weight:600;color:${primaryColor};opacity:0.85;white-space:nowrap;`;
             box.appendChild(label);
             wrap.appendChild(box);
           }
@@ -224,7 +225,7 @@ function PdfViewer({ url, placement, workerSrc, primaryColor = "#4f46e5" }) {
     return () => {
       cancelled = true;
     };
-  }, [url, placement, workerSrc, primaryColor]);
+  }, [url, placements, workerSrc, primaryColor]);
   if (failed) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -240,6 +241,10 @@ function PdfViewer({ url, placement, workerSrc, primaryColor = "#4f46e5" }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, style: { width: "100%" } });
 }
+var clamp = (v, min, max) => Math.min(Math.max(v, min), max);
+var MIN_W = 0.04;
+var MIN_H = 0.02;
+var newId = () => typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
 function FieldDesigner({
   pdfData,
   value,
@@ -248,13 +253,15 @@ function FieldDesigner({
   primaryColor = "#4f46e5"
 }) {
   const [numPages, setNumPages] = react.useState(0);
-  const [page, setPage] = react.useState(value?.page ?? 1);
+  const [page, setPage] = react.useState(value[0]?.page ?? 1);
   const [failed, setFailed] = react.useState(false);
+  const [selectedId, setSelectedId] = react.useState(value[0]?.id ?? null);
+  const [drawMode, setDrawMode] = react.useState(false);
+  const [drag, setDrag] = react.useState(null);
+  const [live, setLive] = react.useState(null);
   const stageRef = react.useRef(null);
   const canvasRef = react.useRef(null);
   const docRef = react.useRef(null);
-  const [drag, setDrag] = react.useState(null);
-  const startRef = react.useRef(null);
   react.useEffect(() => {
     let cancelled = false;
     void (async () => {
@@ -282,7 +289,7 @@ function FieldDesigner({
       if (!doc || !canvas) return;
       const pageObj = await doc.getPage(page);
       if (cancelled) return;
-      const width = stageRef.current?.clientWidth || 640;
+      const width = stageRef.current?.clientWidth || 480;
       const base = pageObj.getViewport({ scale: 1 });
       const viewport = pageObj.getViewport({ scale: width / base.width });
       const ratio = Math.max(window.devicePixelRatio || 1, 1);
@@ -300,79 +307,340 @@ function FieldDesigner({
     };
   }, [page, numPages]);
   function rel(e) {
-    const rect = stageRef.current.getBoundingClientRect();
+    const r = stageRef.current.getBoundingClientRect();
     return {
-      x: Math.min(Math.max((e.clientX - rect.left) / rect.width, 0), 1),
-      y: Math.min(Math.max((e.clientY - rect.top) / rect.height, 0), 1)
+      x: clamp((e.clientX - r.left) / r.width, 0, 1),
+      y: clamp((e.clientY - r.top) / r.height, 0, 1)
     };
   }
-  function onDown(e) {
-    startRef.current = rel(e);
-    setDrag({ ...startRef.current, w: 0, h: 0 });
-  }
-  function onMove(e) {
-    if (!startRef.current) return;
+  function onPointerMove(e) {
+    if (!drag) return;
     const p = rel(e);
-    const s = startRef.current;
-    setDrag({ x: Math.min(s.x, p.x), y: Math.min(s.y, p.y), w: Math.abs(p.x - s.x), h: Math.abs(p.y - s.y) });
+    let b;
+    if (drag.mode === "new") {
+      b = {
+        x: Math.min(drag.start.x, p.x),
+        y: Math.min(drag.start.y, p.y),
+        w: Math.abs(p.x - drag.start.x),
+        h: Math.abs(p.y - drag.start.y)
+      };
+    } else if (drag.mode === "move") {
+      const dx = p.x - drag.start.x;
+      const dy = p.y - drag.start.y;
+      b = {
+        x: clamp(drag.orig.x + dx, 0, 1 - drag.orig.w),
+        y: clamp(drag.orig.y + dy, 0, 1 - drag.orig.h),
+        w: drag.orig.w,
+        h: drag.orig.h
+      };
+    } else {
+      let x1 = drag.orig.x;
+      let y1 = drag.orig.y;
+      let x2 = drag.orig.x + drag.orig.w;
+      let y2 = drag.orig.y + drag.orig.h;
+      if (drag.handle[0] === "n") y1 = p.y;
+      else y2 = p.y;
+      if (drag.handle[1] === "w") x1 = p.x;
+      else x2 = p.x;
+      b = { x: Math.min(x1, x2), y: Math.min(y1, y2), w: Math.abs(x2 - x1), h: Math.abs(y2 - y1) };
+    }
+    setLive(b);
   }
-  function onUp() {
-    if (drag && drag.w > 0.02 && drag.h > 0.01) {
-      onChange({ page, x: drag.x, y: drag.y, w: drag.w, h: drag.h });
+  function onPointerUp() {
+    if (drag && live && live.w >= MIN_W && live.h >= MIN_H) {
+      if (drag.mode === "new") {
+        const f = {
+          id: newId(),
+          label: value.length === 0 ? "Signature" : `Signature ${value.length + 1}`,
+          page,
+          ...live
+        };
+        onChange([...value, f]);
+        setSelectedId(f.id);
+        setDrawMode(false);
+      } else {
+        onChange(value.map((x) => x.id === drag.id ? { ...x, ...live } : x));
+      }
     }
-    startRef.current = null;
     setDrag(null);
+    setLive(null);
   }
-  const box = drag ?? (value?.page === page ? value : null);
-  if (failed) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#b91c1c", fontSize: 14 }, children: "Could not render this PDF for placement. Please check the file is a valid, unencrypted PDF." });
+  function removeField(id) {
+    onChange(value.filter((f) => f.id !== id));
+    if (selectedId === id) setSelectedId(null);
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 13, color: "#6b7280" }, children: "Drag a box where the signature goes." }),
-      numPages > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { marginLeft: "auto", fontSize: 13, color: "#374151" }, children: [
-        "Page",
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsx("select", { value: page, onChange: (e) => setPage(Number(e.target.value)), children: Array.from({ length: numPages }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: i + 1, children: i + 1 }, i)) })
-      ] }) : null
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
+  function rename(id, label) {
+    onChange(value.map((f) => f.id === id ? { ...f, label } : f));
+  }
+  const handle = (id, geom, c) => {
+    const cx = c[1] === "w" ? geom.x : geom.x + geom.w;
+    const cy = c[0] === "n" ? geom.y : geom.y + geom.h;
+    const cursor = c === "nw" || c === "se" ? "nwse-resize" : "nesw-resize";
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        ref: stageRef,
-        onMouseDown: onDown,
-        onMouseMove: onMove,
-        onMouseUp: onUp,
-        onMouseLeave: onUp,
-        style: {
-          position: "relative",
-          cursor: "crosshair",
-          userSelect: "none",
-          border: "1px solid #e5e7eb",
-          borderRadius: 6,
-          overflow: "hidden"
+        onPointerDown: (e) => {
+          e.stopPropagation();
+          setDrag({ mode: "resize", id, handle: c, orig: geom });
         },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef }),
-          box ? /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left: `${box.x * 100}%`,
-                top: `${box.y * 100}%`,
-                width: `${box.w * 100}%`,
-                height: `${box.h * 100}%`,
-                border: `2px solid ${primaryColor}`,
-                background: `${primaryColor}22`,
-                borderRadius: 3,
-                pointerEvents: "none"
+        style: {
+          position: "absolute",
+          left: `${cx * 100}%`,
+          top: `${cy * 100}%`,
+          width: 13,
+          height: 13,
+          marginLeft: -7,
+          marginTop: -7,
+          background: "#fff",
+          border: `2px solid ${primaryColor}`,
+          borderRadius: 2,
+          cursor,
+          touchAction: "none"
+        }
+      },
+      c
+    );
+  };
+  if (failed) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#b91c1c", fontSize: 14 }, children: "Could not render this PDF for placement. Please check the file is a valid, unencrypted PDF." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexWrap: "wrap", gap: 16, alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: "1 1 340px", minWidth: 260 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+            marginBottom: 8,
+            flexWrap: "wrap"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setDrawMode((d) => !d),
+                style: {
+                  fontSize: 13,
+                  fontWeight: 600,
+                  padding: "5px 12px",
+                  borderRadius: 6,
+                  border: `1px solid ${primaryColor}`,
+                  background: drawMode ? primaryColor : "#fff",
+                  color: drawMode ? "#fff" : primaryColor,
+                  cursor: "pointer"
+                },
+                children: drawMode ? "Now drag on the page\u2026" : "+ Add field"
               }
-            }
-          ) : null
-        ]
-      }
-    )
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#6b7280" }, children: "or drag on the page (desktop)." }),
+            numPages > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("label", { style: { marginLeft: "auto", fontSize: 13, color: "#374151" }, children: [
+              "Page",
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsx("select", { value: page, onChange: (e) => setPage(Number(e.target.value)), children: Array.from({ length: numPages }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: i + 1, children: i + 1 }, i)) })
+            ] }) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: stageRef,
+          onPointerDown: (e) => {
+            if (drawMode || e.pointerType === "mouse") setDrag({ mode: "new", start: rel(e) });
+          },
+          onPointerMove,
+          onPointerUp,
+          onPointerLeave: onPointerUp,
+          style: {
+            position: "relative",
+            cursor: drawMode ? "crosshair" : "default",
+            userSelect: "none",
+            touchAction: drawMode ? "none" : "auto",
+            border: "1px solid #e5e7eb",
+            borderRadius: 6,
+            overflow: "hidden"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef }),
+            value.filter((f) => f.page === page).map((f) => {
+              const dragging = drag && drag.mode !== "new" && drag.id === f.id;
+              const geom = dragging && live ? live : f;
+              const isSel = f.id === selectedId;
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    onPointerDown: (e) => {
+                      e.stopPropagation();
+                      setSelectedId(f.id);
+                      setDrag({ mode: "move", id: f.id, start: rel(e), orig: geom });
+                    },
+                    style: {
+                      position: "absolute",
+                      left: `${geom.x * 100}%`,
+                      top: `${geom.y * 100}%`,
+                      width: `${geom.w * 100}%`,
+                      height: `${geom.h * 100}%`,
+                      border: `2px ${isSel ? "solid" : "dashed"} ${primaryColor}`,
+                      background: `${primaryColor}${isSel ? "22" : "14"}`,
+                      borderRadius: 3,
+                      cursor: "move",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      overflow: "hidden",
+                      touchAction: "none"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        style: {
+                          fontSize: 12,
+                          fontWeight: 600,
+                          color: primaryColor,
+                          opacity: 0.85,
+                          whiteSpace: "nowrap",
+                          padding: "0 4px"
+                        },
+                        children: [
+                          "\u270D ",
+                          f.label || "Signature"
+                        ]
+                      }
+                    )
+                  }
+                ),
+                isSel ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  ["nw", "ne", "sw", "se"].map((c) => handle(f.id, geom, c)),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Remove ${f.label}`,
+                      onPointerDown: (e) => e.stopPropagation(),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        removeField(f.id);
+                      },
+                      style: {
+                        position: "absolute",
+                        left: `${(geom.x + geom.w) * 100}%`,
+                        top: `${geom.y * 100}%`,
+                        transform: "translate(-50%, -50%)",
+                        marginTop: -18,
+                        width: 22,
+                        height: 22,
+                        borderRadius: "50%",
+                        background: primaryColor,
+                        color: "#fff",
+                        border: "2px solid #fff",
+                        boxShadow: "0 1px 3px rgba(0,0,0,0.3)",
+                        fontSize: 14,
+                        lineHeight: "16px",
+                        cursor: "pointer",
+                        padding: 0,
+                        touchAction: "none"
+                      },
+                      children: "\xD7"
+                    }
+                  )
+                ] }) : null
+              ] }, f.id);
+            }),
+            drag?.mode === "new" && live ? /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: `${live.x * 100}%`,
+                  top: `${live.y * 100}%`,
+                  width: `${live.w * 100}%`,
+                  height: `${live.h * 100}%`,
+                  border: `2px dashed ${primaryColor}`,
+                  background: `${primaryColor}22`,
+                  borderRadius: 3,
+                  pointerEvents: "none"
+                }
+              }
+            ) : null
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: "1 1 200px", minWidth: 180, maxWidth: 300 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { fontSize: 13, fontWeight: 600, color: "#374151", margin: "0 0 8px" }, children: [
+        "Signature fields (",
+        value.length,
+        ")"
+      ] }),
+      value.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: 13, color: "#6b7280" }, children: "Draw a box on the page to add a field. Add as many as you need." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: value.map((f) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          onClick: () => {
+            setSelectedId(f.id);
+            setPage(f.page);
+          },
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "6px 8px",
+            borderRadius: 8,
+            border: `1px solid ${f.id === selectedId ? primaryColor : "#e5e7eb"}`,
+            background: f.id === selectedId ? `${primaryColor}0f` : "#fff",
+            cursor: "pointer"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                value: f.label,
+                onClick: (e) => e.stopPropagation(),
+                onChange: (e) => rename(f.id, e.target.value),
+                placeholder: "Field name",
+                style: {
+                  flex: 1,
+                  minWidth: 0,
+                  border: "none",
+                  outline: "none",
+                  background: "transparent",
+                  fontSize: 13
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 11, color: "#9ca3af" }, children: [
+              "p",
+              f.page
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Remove ${f.label}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  removeField(f.id);
+                },
+                style: {
+                  border: "none",
+                  background: "transparent",
+                  color: "#9ca3af",
+                  cursor: "pointer",
+                  fontSize: 16,
+                  lineHeight: 1,
+                  padding: 0
+                },
+                children: "\xD7"
+              }
+            )
+          ]
+        },
+        f.id
+      )) })
+    ] })
   ] });
 }
 function SigningExperience(props) {
@@ -428,7 +696,7 @@ function SigningExperience(props) {
           PdfViewer,
           {
             url: props.sourceUrl,
-            placement: props.placement,
+            placements: props.placements,
             workerSrc: props.workerSrc,
             primaryColor: primary
           }