@agilemotion/oui-react-js 1.8.78 → 2.0.0

package/dist/components/signatures/DynamicSignatureDocumentContainer.js

@@ -0,0 +1,487 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactPdf = require("react-pdf");
+var _Utils = _interopRequireDefault(require("../../Utils"));
+require("./DocumentContainer.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+_reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = "//cdnjs.cloudflare.com/ajax/libs/pdf.js/".concat(_reactPdf.pdfjs.version, "/pdf.worker.js");
+const SIGN_DEFAULTS = {
+  width: 200,
+  height: 48
+};
+const INITIAL_DEFAULTS = {
+  width: 40,
+  height: 40
+};
+const HANDLE_SIZE = 8;
+const HANDLE_CURSORS = {
+  tl: 'nwse-resize',
+  t: 'ns-resize',
+  tr: 'nesw-resize',
+  l: 'ew-resize',
+  r: 'ew-resize',
+  bl: 'nesw-resize',
+  b: 'ns-resize',
+  br: 'nwse-resize'
+};
+const HANDLE_POSITIONS = {
+  tl: {
+    top: -HANDLE_SIZE / 2,
+    left: -HANDLE_SIZE / 2
+  },
+  t: {
+    top: -HANDLE_SIZE / 2,
+    left: '50%',
+    marginLeft: -HANDLE_SIZE / 2
+  },
+  tr: {
+    top: -HANDLE_SIZE / 2,
+    right: -HANDLE_SIZE / 2
+  },
+  l: {
+    top: '50%',
+    left: -HANDLE_SIZE / 2,
+    marginTop: -HANDLE_SIZE / 2
+  },
+  r: {
+    top: '50%',
+    right: -HANDLE_SIZE / 2,
+    marginTop: -HANDLE_SIZE / 2
+  },
+  bl: {
+    bottom: -HANDLE_SIZE / 2,
+    left: -HANDLE_SIZE / 2
+  },
+  b: {
+    bottom: -HANDLE_SIZE / 2,
+    left: '50%',
+    marginLeft: -HANDLE_SIZE / 2
+  },
+  br: {
+    bottom: -HANDLE_SIZE / 2,
+    right: -HANDLE_SIZE / 2
+  }
+};
+const DynamicSignatureDocumentContainer = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    file,
+    grabbedItem,
+    onDrop,
+    onPlacementsChange
+  } = props;
+  const [pageNumber, setPageNumber] = _react.default.useState(1);
+  const [numPages, setNumPages] = _react.default.useState(null);
+  const [placements, setPlacements] = _react.default.useState([]);
+  const [dragState, setDragState] = _react.default.useState(null);
+  const [resizeState, setResizeState] = _react.default.useState(null);
+  const [selectedId, setSelectedId] = _react.default.useState(null);
+  const idCounter = _react.default.useRef(0);
+  const overlayRef = _react.default.useRef(null);
+  const [pageDimensions, setPageDimensions] = _react.default.useState(null);
+  const [cursorPos, setCursorPos] = _react.default.useState(null);
+  const getScaledPlacements = () => {
+    const overlay = overlayRef.current;
+    if (!overlay || !pageDimensions) return placements;
+    const canvasWidth = overlay.offsetWidth;
+    const canvasHeight = overlay.offsetHeight;
+    const scaleX = pageDimensions.width / canvasWidth;
+    const scaleY = pageDimensions.height / canvasHeight;
+    return placements.map(p => ({
+      pageNumber: p.pageNumber,
+      x: p.x * scaleX,
+      y: p.y * scaleY,
+      width: p.width * scaleX,
+      height: p.height * scaleY,
+      type: p.type,
+      imageDataUrl: p.imageDataUrl,
+      content: p.content
+    }));
+  };
+  _react.default.useImperativeHandle(ref, () => ({
+    clearPlacements: () => {
+      setPlacements([]);
+      setSelectedId(null);
+      setDragState(null);
+      setResizeState(null);
+      idCounter.current = 0;
+    },
+    getPlacements: () => getScaledPlacements()
+  }));
+  const onDocumentLoadSuccess = _ref => {
+    let {
+      numPages
+    } = _ref;
+    setNumPages(numPages);
+  };
+  const onPageLoadSuccess = page => {
+    const rotation = page.rotate || 0;
+    const isRotated = rotation === 90 || rotation === 270;
+    setPageDimensions({
+      width: isRotated ? page.originalHeight : page.originalWidth,
+      height: isRotated ? page.originalWidth : page.originalHeight,
+      rotation: rotation
+    });
+  };
+  const changePage = offset => {
+    setPageNumber(pageNumber + offset);
+  };
+  const handleOverlayClick = e => {
+    if (!grabbedItem) return;
+    const overlay = overlayRef.current;
+    if (!overlay) return;
+    const rect = overlay.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const isTextType = grabbedItem.type === 'TEXT' || grabbedItem.type === 'DATE';
+    const defaults = isTextType ? {
+      width: grabbedItem.width,
+      height: grabbedItem.height
+    } : grabbedItem.type === 'SIGN' ? SIGN_DEFAULTS : INITIAL_DEFAULTS;
+    const newPlacement = {
+      id: idCounter.current++,
+      pageNumber: pageNumber,
+      x: x - defaults.width / 2,
+      y: y - defaults.height / 2,
+      width: defaults.width,
+      height: defaults.height,
+      type: grabbedItem.type,
+      imageDataUrl: grabbedItem.imageDataUrl || null,
+      content: grabbedItem.content || null
+    };
+    setPlacements(prev => [...prev, newPlacement]);
+    setSelectedId(newPlacement.id);
+    document.body.style.cursor = 'default';
+    if (onDrop) {
+      onDrop(newPlacement);
+    }
+  };
+  const handleItemMouseDown = (e, placement) => {
+    e.stopPropagation();
+    setSelectedId(placement.id);
+    const overlay = overlayRef.current;
+    if (!overlay) return;
+    const rect = overlay.getBoundingClientRect();
+    setDragState({
+      id: placement.id,
+      offsetX: e.clientX - rect.left - placement.x,
+      offsetY: e.clientY - rect.top - placement.y
+    });
+    document.body.style.cursor = 'move';
+  };
+  const handleResizeMouseDown = (e, placement, handle) => {
+    e.stopPropagation();
+    e.preventDefault();
+    setSelectedId(placement.id);
+    setResizeState({
+      id: placement.id,
+      handle: handle,
+      startX: e.clientX,
+      startY: e.clientY,
+      startWidth: placement.width,
+      startHeight: placement.height,
+      startLeft: placement.x,
+      startTop: placement.y
+    });
+    document.body.style.cursor = HANDLE_CURSORS[handle];
+  };
+  const deletePlacement = (e, id) => {
+    e.stopPropagation();
+    setPlacements(prev => prev.filter(p => p.id !== id));
+    if (selectedId === id) setSelectedId(null);
+    if (onPlacementsChange) onPlacementsChange();
+  };
+  const handleMouseMove = e => {
+    if (dragState) {
+      const overlay = overlayRef.current;
+      if (!overlay) return;
+      const rect = overlay.getBoundingClientRect();
+      const x = e.clientX - rect.left - dragState.offsetX;
+      const y = e.clientY - rect.top - dragState.offsetY;
+      setPlacements(prev => prev.map(p => p.id === dragState.id ? _objectSpread(_objectSpread({}, p), {}, {
+        x,
+        y
+      }) : p));
+    } else if (resizeState) {
+      const dx = e.clientX - resizeState.startX;
+      const dy = e.clientY - resizeState.startY;
+      const h = resizeState.handle;
+      const movesLeft = h === 'l' || h === 'tl' || h === 'bl';
+      const movesRight = h === 'r' || h === 'tr' || h === 'br';
+      const movesTop = h === 't' || h === 'tl' || h === 'tr';
+      const movesBottom = h === 'b' || h === 'bl' || h === 'br';
+      let newWidth = resizeState.startWidth;
+      let newHeight = resizeState.startHeight;
+      let newX = resizeState.startLeft;
+      let newY = resizeState.startTop;
+      if (movesRight) {
+        newWidth = Math.max(40, resizeState.startWidth + dx);
+      }
+      if (movesLeft) {
+        newWidth = Math.max(40, resizeState.startWidth - dx);
+        newX = resizeState.startLeft + (resizeState.startWidth - newWidth);
+      }
+      if (movesBottom) {
+        newHeight = Math.max(24, resizeState.startHeight + dy);
+      }
+      if (movesTop) {
+        newHeight = Math.max(24, resizeState.startHeight - dy);
+        newY = resizeState.startTop + (resizeState.startHeight - newHeight);
+      }
+      setPlacements(prev => prev.map(p => p.id === resizeState.id ? _objectSpread(_objectSpread({}, p), {}, {
+        x: newX,
+        y: newY,
+        width: newWidth,
+        height: newHeight
+      }) : p));
+    }
+  };
+  const handleMouseUp = () => {
+    if (dragState || resizeState) {
+      setDragState(null);
+      setResizeState(null);
+      document.body.style.cursor = 'default';
+      if (onPlacementsChange) onPlacementsChange();
+    }
+  };
+  const handleOverlayDeselect = e => {
+    if (e.target === overlayRef.current) {
+      setSelectedId(null);
+    }
+  };
+  _react.default.useEffect(() => {
+    if (dragState || resizeState) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [dragState, resizeState]);
+
+  // Cursor follower — track mouse position while item is grabbed
+  _react.default.useEffect(() => {
+    if (grabbedItem) {
+      const trackCursor = e => setCursorPos({
+        x: e.clientX,
+        y: e.clientY
+      });
+      window.addEventListener('mousemove', trackCursor);
+      return () => {
+        window.removeEventListener('mousemove', trackCursor);
+        setCursorPos(null);
+      };
+    }
+  }, [grabbedItem]);
+  const replicateToAllPages = placement => {
+    if (!numPages || numPages <= 1) return;
+    const newPlacements = [];
+    for (let page = 1; page <= numPages; page++) {
+      if (page === placement.pageNumber) continue;
+      newPlacements.push(_objectSpread(_objectSpread({}, placement), {}, {
+        id: idCounter.current++,
+        pageNumber: page
+      }));
+    }
+    setPlacements(prev => [...prev, ...newPlacements]);
+    setSelectedId(null);
+    if (onPlacementsChange) onPlacementsChange();
+  };
+  const currentPagePlacements = placements.filter(p => p.pageNumber === pageNumber);
+  if (_Utils.default.isNull(file)) return null;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Document, {
+    file: 'data:application/pdf;base64,' + file.base64,
+    onLoadSuccess: onDocumentLoadSuccess
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'relative',
+      display: 'inline-block'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactPdf.Page, {
+    pageNumber: pageNumber,
+    onLoadSuccess: onPageLoadSuccess
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: overlayRef,
+    onClick: e => {
+      handleOverlayClick(e);
+      handleOverlayDeselect(e);
+    },
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      cursor: grabbedItem ? 'grabbing' : 'default',
+      zIndex: 1,
+      border: '2px dashed #2e7d32',
+      boxSizing: 'border-box'
+    }
+  }, currentPagePlacements.map(placement => {
+    const isSelected = selectedId === placement.id;
+    const isActive = (dragState === null || dragState === void 0 ? void 0 : dragState.id) === placement.id || (resizeState === null || resizeState === void 0 ? void 0 : resizeState.id) === placement.id;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: placement.id,
+      onMouseDown: e => handleItemMouseDown(e, placement),
+      style: {
+        position: 'absolute',
+        left: placement.x + 'px',
+        top: placement.y + 'px',
+        width: placement.width + 'px',
+        height: placement.height + 'px',
+        border: isActive ? '2px dashed green' : isSelected ? '2px dashed #1976d2' : '1px solid transparent',
+        borderRadius: '4px',
+        cursor: 'move',
+        userSelect: 'none',
+        display: 'flex',
+        alignItems: 'flex-end',
+        justifyContent: 'flex-start'
+      }
+    }, placement.imageDataUrl ? /*#__PURE__*/_react.default.createElement("img", {
+      src: placement.imageDataUrl,
+      alt: placement.type,
+      draggable: false,
+      style: {
+        width: '100%',
+        height: '100%',
+        objectFit: placement.type === 'INITIAL' ? 'fill' : 'contain',
+        pointerEvents: 'none'
+      }
+    }) : /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        pointerEvents: 'none',
+        fontSize: Math.max(10, placement.height - 8) + 'px',
+        lineHeight: placement.height + 'px',
+        fontWeight: 500,
+        color: '#000',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        width: 'calc(100% - 6px)',
+        padding: '0 3px'
+      }
+    }, placement.content), isSelected && /*#__PURE__*/_react.default.createElement("div", {
+      onClick: e => deletePlacement(e, placement.id),
+      style: {
+        position: 'absolute',
+        top: '-22px',
+        right: '-22px',
+        width: '20px',
+        height: '20px',
+        borderRadius: '50%',
+        backgroundColor: '#d32f2f',
+        color: '#fff',
+        fontSize: '12px',
+        lineHeight: '20px',
+        textAlign: 'center',
+        cursor: 'pointer',
+        zIndex: 2
+      }
+    }, "\xD7"), isSelected && numPages > 1 && /*#__PURE__*/_react.default.createElement("div", {
+      onClick: e => {
+        e.stopPropagation();
+        replicateToAllPages(placement);
+      },
+      title: "Copy to all pages",
+      style: {
+        position: 'absolute',
+        top: '-22px',
+        left: '-22px',
+        width: '20px',
+        height: '20px',
+        borderRadius: '50%',
+        backgroundColor: '#1976d2',
+        color: '#fff',
+        fontSize: '12px',
+        lineHeight: '20px',
+        textAlign: 'center',
+        cursor: 'pointer',
+        zIndex: 2
+      }
+    }, "\u2295"), isSelected && Object.entries(HANDLE_POSITIONS).map(_ref2 => {
+      let [key, pos] = _ref2;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: key,
+        onMouseDown: e => handleResizeMouseDown(e, placement, key),
+        style: _objectSpread(_objectSpread({
+          position: 'absolute'
+        }, pos), {}, {
+          width: HANDLE_SIZE + 'px',
+          height: HANDLE_SIZE + 'px',
+          backgroundColor: '#1976d2',
+          cursor: HANDLE_CURSORS[key],
+          zIndex: 2
+        })
+      });
+    }));
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '12px',
+      padding: '12px 0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    disabled: pageNumber <= 1,
+    onClick: () => changePage(-1)
+  }, "Previous"), /*#__PURE__*/_react.default.createElement("span", null, "Page ", pageNumber || (numPages ? 1 : '--'), " of ", numPages || '--'), /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    disabled: pageNumber >= numPages,
+    onClick: () => changePage(1)
+  }, "Next")), grabbedItem && cursorPos && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'fixed',
+      left: cursorPos.x + 12,
+      top: cursorPos.y + 12,
+      pointerEvents: 'none',
+      zIndex: 9999,
+      border: '1px dashed rgba(0,0,0,0.4)',
+      borderRadius: '4px',
+      backgroundColor: 'rgba(255,255,255,0.9)',
+      padding: '4px 8px',
+      maxWidth: '160px',
+      display: 'flex',
+      alignItems: 'center',
+      gap: '6px',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.15)'
+    }
+  }, grabbedItem.imageDataUrl ? /*#__PURE__*/_react.default.createElement("img", {
+    src: grabbedItem.imageDataUrl,
+    alt: grabbedItem.type,
+    style: {
+      maxHeight: '28px',
+      maxWidth: '80px',
+      objectFit: 'contain'
+    }
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      fontSize: '12px',
+      fontWeight: 500,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      maxWidth: '120px'
+    }
+  }, grabbedItem.content || grabbedItem.type), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      fontSize: '10px',
+      color: '#888'
+    }
+  }, grabbedItem.type)));
+});
+var _default = exports.default = DynamicSignatureDocumentContainer;

package/dist/components/signatures/ImageSignatureInput.js

@@ -46,7 +46,6 @@ const location = window.location.protocol + "//" + window.location.hostname;
 const ImageSignatureInput = exports.ImageSignatureInput = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const classes = useStyles();
   const width = '320px';
-  const height = '320px';
   const [value, setValue] = _react.default.useState(null);
   const [uploaded, setUploaded] = _react.default.useState(false);
   const [saveAsSystemImage, setSaveAsSystemImage] = _react.default.useState(false);
@@ -190,7 +189,7 @@ const ImageSignatureInput = exports.ImageSignatureInput = /*#__PURE__*/_react.de
     src: value.url,
     alt: "",
     style: {
-      height: '100%',
+      maxHeight: '60px',
       // 👈 fit by height
       width: 'auto',
       maxWidth: '100%',

package/dist/event/EventType.js

@@ -27,4 +27,6 @@ _defineProperty(EventType, "SOCKET_CONNECT", "SOCKET_CONNECT");
 _defineProperty(EventType, "MEETING_ENDED", "MEETING_ENDED");
 _defineProperty(EventType, "CUSTOM_EVENT", "CUSTOM_EVENT");
 _defineProperty(EventType, "ROW_GRAB_START", "ROW_GRAB_START");
-_defineProperty(EventType, "ROW_GRAB_END", "ROW_GRAB_END");
+_defineProperty(EventType, "ROW_GRAB_END", "ROW_GRAB_END");
+_defineProperty(EventType, "DOCUMENT_CACHED", "DOCUMENT_CACHED");
+_defineProperty(EventType, "FACIAL_VERIFICATION_SUCCESS", "FACIAL_VERIFICATION_SUCCESS");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.78",
+  "version": "2.0.0",
   "description": "AgileMotion React UI Component Library - A comprehensive collection of dashboard components, forms, media controls, and more",
   "license": "ISC",
   "author": "",
@@ -110,6 +110,7 @@
     "react-player": "^2.16.0",
     "react-promise-tracker": "^2.1.0",
     "react-redux": "^7.2.3",
+    "react-resizable-panels": "^4.10.0",
     "react-rnd": "^10.5.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",