@multiplatform.one/forms 6.0.0

package/dist/cjs/fields/Signature/index.cjs

@@ -0,0 +1,520 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var Signature_exports = {};
+__export(Signature_exports, {
+  Signature: () => Signature,
+  signatureValueToSvg: () => signatureValueToSvg
+});
+module.exports = __toCommonJS(Signature_exports);
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_perfect_freehand = require("perfect-freehand");
+var import_react_native_svg = __toESM(require("react-native-svg"));
+var import_Button = require("../../Button/index.cjs");
+var import_fieldLayout = require("../../fieldLayout.cjs");
+var import_Skeleton = require("../../Skeleton/index.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_utils = require("../../shared/utils.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function encodeBase64(str) {
+  if (typeof btoa === "function") {
+    return btoa(unescape(encodeURIComponent(str)));
+  }
+  if (typeof Buffer !== "undefined") {
+    return Buffer.from(str, "utf-8").toString("base64");
+  }
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+  const bytes = new TextEncoder().encode(str);
+  let result = "";
+  for (let i = 0; i < bytes.length; i += 3) {
+    const b1 = bytes[i];
+    const b2 = bytes[i + 1] ?? 0;
+    const b3 = bytes[i + 2] ?? 0;
+    result += chars[b1 >> 2];
+    result += chars[(b1 & 3) << 4 | b2 >> 4];
+    result += i + 1 < bytes.length ? chars[(b2 & 15) << 2 | b3 >> 6] : "=";
+    result += i + 2 < bytes.length ? chars[b3 & 63] : "=";
+  }
+  return result;
+}
+function decodeBase64(base64) {
+  if (typeof atob === "function") {
+    return decodeURIComponent(escape(atob(base64)));
+  }
+  if (typeof Buffer !== "undefined") {
+    return Buffer.from(base64, "base64").toString("utf-8");
+  }
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+  const bytes = [];
+  for (let i = 0; i < base64.length; i += 4) {
+    const e1 = chars.indexOf(base64[i]);
+    const e2 = chars.indexOf(base64[i + 1]);
+    const e3 = chars.indexOf(base64[i + 2]);
+    const e4 = chars.indexOf(base64[i + 3]);
+    bytes.push(e1 << 2 | e2 >> 4);
+    if (e3 !== 64) bytes.push((e2 & 15) << 4 | e3 >> 2);
+    if (e4 !== 64) bytes.push((e3 & 3) << 6 | e4);
+  }
+  return new TextDecoder().decode(new Uint8Array(bytes));
+}
+const minPointDistance = 1;
+const baseStrokeSize = 8;
+const referenceWidth = 500;
+const referenceHeight = 200;
+const strokeOptionsBase = {
+  thinning: 0.65,
+  // Moderate pressure effect (fast=thin, slow=thick)
+  smoothing: 0.2,
+  streamline: 0,
+  // No streamline = preserve point spacing for pressure
+  easing: t => t,
+  start: {
+    taper: 0,
+    cap: true
+  },
+  end: {
+    taper: 0,
+    cap: true
+  }
+};
+function normalizeStroke(stroke, width, height) {
+  if (width <= 0 || height <= 0) return stroke;
+  return stroke.map(([x, y, p]) => [x / width, y / height, p]);
+}
+function denormalizeStroke(stroke, width, height) {
+  if (width <= 0 || height <= 0) return stroke;
+  return stroke.map(([x, y, p]) => [x * width, y * height, p]);
+}
+function getScaledStrokeSize(width, height) {
+  const scale = Math.sqrt(width * height / (referenceWidth * referenceHeight));
+  return Math.max(4, Math.round(baseStrokeSize * scale));
+}
+function pointDistance(p1, p2) {
+  return Math.sqrt((p1[0] - p2[0]) ** 2 + (p1[1] - p2[1]) ** 2);
+}
+function hasRealPressure(points) {
+  return points.some(p => p[2] !== void 0 && p[2] !== 0.5 && p[2] > 0 && p[2] < 1);
+}
+const slowDistance = 4;
+const fastDistance = 25;
+function pressureFromSpacing(points) {
+  if (points.length < 2) return points;
+  if (hasRealPressure(points)) return points;
+  const distances = [];
+  for (let i = 0; i < points.length; i++) {
+    const d = i === 0 ? points.length > 1 ? pointDistance(points[1], points[0]) : slowDistance : pointDistance(points[i], points[i - 1]);
+    distances.push(d);
+  }
+  return points.map((p, i) => {
+    const d = distances[i];
+    const t = Math.max(0, Math.min(1, (d - slowDistance) / (fastDistance - slowDistance)));
+    const pressure = 0.7 - t * 0.35;
+    return [p[0], p[1], Math.max(0.3, Math.min(0.8, pressure))];
+  });
+}
+function getStrokeOptions(_points, strokeSize) {
+  return {
+    ...strokeOptionsBase,
+    size: strokeSize,
+    simulatePressure: false
+  };
+}
+function getSvgPathFromStroke(stroke) {
+  if (!stroke.length) return "";
+  const d = stroke.reduce((acc, [x0, y0], i, arr) => {
+    const [x1, y1] = arr[(i + 1) % arr.length];
+    acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2);
+    return acc;
+  }, ["M", ...stroke[0], "Q"]);
+  d.push("Z");
+  return d.join(" ");
+}
+function parseSignatureValue(value) {
+  if (!value || !value.startsWith("data:application/json;base64,")) return [];
+  try {
+    const base64 = value.replace("data:application/json;base64,", "");
+    const json = decodeBase64(base64);
+    const parsed = JSON.parse(json);
+    if (parsed?.v === 2 && Array.isArray(parsed.s)) return parsed.s;
+    if (Array.isArray(parsed)) {
+      const allX = parsed.flatMap(s => s.map(p => p[0]));
+      const allY = parsed.flatMap(s => s.map(p => p[1]));
+      const maxX = Math.max(...allX, 1);
+      const maxY = Math.max(...allY, 1);
+      return parsed.map(stroke => stroke.map(([x, y, p]) => [x / maxX, y / maxY, p]));
+    }
+  } catch {}
+  return [];
+}
+function signatureValueToSvg(value, width = 500, height = 200, penColor = "#000000") {
+  const strokes = parseSignatureValue(value);
+  if (strokes.length === 0) return "";
+  const strokeSize = getScaledStrokeSize(width, height);
+  const paths = strokes.map(stroke => {
+    const denormalized = denormalizeStroke(stroke, width, height);
+    const pointsWithPressure = pressureFromSpacing(denormalized);
+    const options = getStrokeOptions(pointsWithPressure, strokeSize);
+    const outlinePoints = (0, import_perfect_freehand.getStroke)(pointsWithPressure, options);
+    return getSvgPathFromStroke(outlinePoints);
+  });
+  const pathElements = paths.filter(Boolean).map(d => `<path d="${d}" fill="${penColor}" stroke="${penColor}" stroke-width="1"/>`).join("\n");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">${pathElements}</svg>`;
+}
+const signatureHeightRows = 3;
+function SignatureCanvasImpl({
+  value,
+  onValueChange,
+  disabled,
+  readOnly,
+  width,
+  height,
+  penColor,
+  backgroundColor,
+  knobProps,
+  size,
+  error,
+  clearIcon,
+  required,
+  hasError
+}) {
+  const [strokes, setStrokes] = (0, import_react.useState)([]);
+  const [currentStroke, setCurrentStroke] = (0, import_react.useState)(null);
+  const [dimensions, setDimensions] = (0, import_react.useState)({
+    width: 0,
+    height: 0
+  });
+  const svgRef = (0, import_react.useRef)(null);
+  const isDrawing = (0, import_react.useRef)(false);
+  const aspectRatio = width / height;
+  const resolvedSizeToken = size ?? knobProps.sizeToken;
+  const minHeightPx = (0, import_utils.getFieldHeight)(resolvedSizeToken, signatureHeightRows);
+  const cappedRadius = (0, import_utils.clampRadiusForLargeComponent)(knobProps.borderRadius.borderRadius);
+  (0, import_react.useEffect)(() => {
+    if (!value) {
+      setStrokes([]);
+      return;
+    }
+    if (value.startsWith("data:application/json;base64,")) {
+      try {
+        const base64 = value.replace("data:application/json;base64,", "");
+        const json = decodeBase64(base64);
+        const parsed = JSON.parse(json);
+        if (parsed?.v === 2 && Array.isArray(parsed.s)) {
+          setStrokes(parsed.s);
+        } else {
+          setStrokes([]);
+        }
+      } catch {
+        setStrokes([]);
+      }
+    }
+  }, [value]);
+  const saveStrokes = (0, import_react.useCallback)(newStrokes => {
+    if (newStrokes.length === 0) {
+      onValueChange("");
+      return;
+    }
+    const payload = {
+      v: 2,
+      s: newStrokes
+    };
+    const json = JSON.stringify(payload);
+    const base64 = encodeBase64(json);
+    onValueChange(`data:application/json;base64,${base64}`);
+  }, [onValueChange]);
+  const handleLayout = (0, import_react.useCallback)(event => {
+    const {
+      width: w,
+      height: h
+    } = event.nativeEvent.layout;
+    setDimensions({
+      width: w,
+      height: h
+    });
+  }, []);
+  const getPoint = (0, import_react.useCallback)(event => {
+    if (import_tamagui.isWeb) {
+      const webEvent = event;
+      const svg = webEvent.currentTarget;
+      const rect = svg.getBoundingClientRect();
+      const x = webEvent.clientX - rect.left;
+      const y = webEvent.clientY - rect.top;
+      const pressure = webEvent.pressure ?? 0.5;
+      return [x, y, pressure];
+    }
+    const nativeEvent = event.nativeEvent;
+    return [nativeEvent.locationX, nativeEvent.locationY, 0.5];
+  }, []);
+  const handleStart = (0, import_react.useCallback)(event => {
+    if (disabled || readOnly) return;
+    isDrawing.current = true;
+    const point = getPoint(event);
+    setCurrentStroke([point]);
+    if (import_tamagui.isWeb) {
+      const target = event.currentTarget;
+      const pointerId = event.pointerId;
+      target.setPointerCapture(pointerId);
+    }
+  }, [disabled, getPoint]);
+  const handleMove = (0, import_react.useCallback)(event => {
+    if (!isDrawing.current || disabled) return;
+    const point = getPoint(event);
+    setCurrentStroke(prev => {
+      if (!prev) return [point];
+      const lastPoint = prev[prev.length - 1];
+      if (pointDistance(point, lastPoint) < minPointDistance) {
+        return prev;
+      }
+      return [...prev, point];
+    });
+  }, [disabled, getPoint]);
+  const handleEnd = (0, import_react.useCallback)(() => {
+    if (!isDrawing.current) return;
+    isDrawing.current = false;
+    if (currentStroke && currentStroke.length > 0 && dimensions.width > 0 && dimensions.height > 0) {
+      const normalized = normalizeStroke(currentStroke, dimensions.width, dimensions.height);
+      const newStrokes = [...strokes, normalized];
+      setStrokes(newStrokes);
+      saveStrokes(newStrokes);
+    }
+    setCurrentStroke(null);
+  }, [currentStroke, strokes, saveStrokes, dimensions]);
+  const handleClear = (0, import_react.useCallback)(() => {
+    setStrokes([]);
+    setCurrentStroke(null);
+    onValueChange("");
+  }, [onValueChange]);
+  const strokeSize = getScaledStrokeSize(dimensions.width || width, dimensions.height || height);
+  const canvasW = dimensions.width || width;
+  const canvasH = dimensions.height || height;
+  const completedPaths = strokes.map(stroke => {
+    const denormalized = denormalizeStroke(stroke, canvasW, canvasH);
+    const pointsWithPressure = pressureFromSpacing(denormalized);
+    const options = getStrokeOptions(pointsWithPressure, strokeSize);
+    const outlinePoints = (0, import_perfect_freehand.getStroke)(pointsWithPressure, options);
+    return getSvgPathFromStroke(outlinePoints);
+  });
+  const currentPath = currentStroke ? (() => {
+    const pointsWithPressure = pressureFromSpacing(currentStroke);
+    const options = getStrokeOptions(pointsWithPressure, strokeSize);
+    return getSvgPathFromStroke((0, import_perfect_freehand.getStroke)(pointsWithPressure, options));
+  })() : null;
+  const paths = currentPath ? [...completedPaths, currentPath] : completedPaths;
+  const svgProps = import_tamagui.isWeb ? {
+    onPointerDown: handleStart,
+    onPointerMove: handleMove,
+    onPointerUp: handleEnd,
+    // No onPointerLeave - pointer capture lets us draw outside the canvas
+    onLostPointerCapture: handleEnd,
+    // End stroke if pointer capture is lost
+    style: {
+      touchAction: "none",
+      cursor: disabled ? "not-allowed" : readOnly ? "default" : "crosshair",
+      backgroundColor
+    }
+  } : {
+    onStartShouldSetResponder: () => !disabled,
+    onMoveShouldSetResponder: () => !disabled,
+    onResponderGrant: handleStart,
+    onResponderMove: handleMove,
+    onResponderRelease: handleEnd,
+    onResponderTerminate: handleEnd,
+    style: {
+      backgroundColor
+    }
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    position: "relative",
+    onLayout: handleLayout,
+    ...knobProps.inputSurface,
+    borderRadius: cappedRadius,
+    borderWidth: knobProps.borderRadius.borderWidth,
+    borderColor: error ? import_colorRamps.formCommonColors.error : import_colorRamps.formInputColors.border.base,
+    overflow: "hidden",
+    opacity: disabled ? 0.6 : 1,
+    aspectRatio,
+    minHeight: minHeightPx,
+    ...(knobProps.transition ? {
+      animation: knobProps.transition
+    } : void 0),
+    "aria-required": required || void 0,
+    "aria-invalid": hasError || void 0,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native_svg.default, {
+      ref: svgRef,
+      width: "100%",
+      height: "100%",
+      viewBox: `0 0 ${dimensions.width || 100} ${dimensions.height || 100}`,
+      ...svgProps,
+      children: paths.map((d, i) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native_svg.Path, {
+        d,
+        fill: penColor,
+        stroke: penColor,
+        strokeWidth: 1
+      }, i))
+    }), !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      position: "absolute",
+      bottom: "$2",
+      right: "$2",
+      pointerEvents: "box-none",
+      alignItems: "flex-end",
+      justifyContent: "flex-end",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+        size: "$2",
+        disabled: disabled || strokes.length === 0,
+        onPress: handleClear,
+        icon: clearIcon,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
+          children: "Clear"
+        })
+      })
+    })]
+  });
+}
+function Signature({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  size,
+  id: idProp,
+  value,
+  defaultValue,
+  onChange,
+  onBlur,
+  disabled,
+  readOnly,
+  width = 500,
+  height = 200,
+  penColor: penColorProp,
+  backgroundColor: backgroundColorProp,
+  clearIcon,
+  skeleton,
+  compact
+}) {
+  const {
+    resolvedForm,
+    knobProps,
+    id
+  } = (0, import_utils.useFormField)({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  const tamaguiTheme = (0, import_tamagui.useTheme)();
+  if (skeleton) {
+    const resolvedSizeToken = size ?? knobProps.sizeToken;
+    const minHeightPx = (0, import_utils.getFieldHeight)(resolvedSizeToken, signatureHeightRows);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      size,
+      knobProps,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: minHeightPx
+      })
+    });
+  }
+  const penColor = penColorProp ?? tamaguiTheme.color12?.val ?? "#000000";
+  const backgroundColor = backgroundColorProp ?? tamaguiTheme.color2?.val ?? "#ffffff";
+  const canvasProps = {
+    disabled: !!disabled,
+    readOnly: !!readOnly,
+    width,
+    height,
+    penColor,
+    backgroundColor,
+    knobProps,
+    size,
+    clearIcon
+  };
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      helperText,
+      required,
+      size,
+      knobProps,
+      onBlur,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SignatureCanvasImpl, {
+        ...canvasProps,
+        value: value ?? defaultValue ?? "",
+        onValueChange: v => onChange?.(v),
+        error,
+        required,
+        hasError: !!error
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = (0, import_utils.getFieldError)(field, error);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        helperText,
+        required,
+        size,
+        knobProps,
+        onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SignatureCanvasImpl, {
+          ...canvasProps,
+          value: field.state.value ?? "",
+          onValueChange: v => {
+            field.handleChange(v);
+            onChange?.(v);
+          },
+          error: resolvedError,
+          required,
+          hasError: !!resolvedError
+        })
+      });
+    }
+  });
+}