WEBDIENSTE/OpenSign
1
0
Fork 0
mirror of https://github.com/OpenSignLabs/OpenSign.git synced 2026-08-21 07:02:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: widgets dragging issue in mobile view

Browse Source
This commit is contained in:
RaktimaNXG
2024-01-30 17:12:29 +05:30
parent bc90da4cf2
commit 882b97da5e
12 changed files with 307 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
microfrontends/SignDocuments/package-lock.json
Generated
+9
View File
@@ -17,6 +17,7 @@
"file-saver": "^2.0.5",
"gh-pages": "^6.0.0",
"mf-cra": "^0.0.5",
"moment": "^2.30.1",
"parse": "^4.2.0",
"pdf-lib": "^1.17.1",
"print-js": "^1.6.0",
@@ -15206,6 +15207,14 @@
"mkdirp": "bin/cmd.js"
}
},
"node_modules/moment": {
"version": "2.30.1",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
"engines": {
"node": "*"
}
},
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
microfrontends/SignDocuments/package.json
+1
View File
@@ -13,6 +13,7 @@
"file-saver": "^2.0.5",
"gh-pages": "^6.0.0",
"mf-cra": "^0.0.5",
"moment": "^2.30.1",
"parse": "^4.2.0",
"pdf-lib": "^1.17.1",
"print-js": "^1.6.0",
microfrontends/SignDocuments/src/Component/LegaDrive/LegaDrive.js
+5
View File
@@ -40,6 +40,11 @@ function PdfFile() {
const jsonCurrentUser = JSON.parse(currentUser);
useEffect(() => {
// localStorage.setItem('accesstoken', 'r:6d093ee320d70354f4e92cccc537180b');
// localStorage.setItem('baseUrl', 'https://staging-app.opensignlabs.com/api/app/');
// localStorage.setItem('parseAppId', 'opensignstgn');
// localStorage.setItem('Parse/opensignstgn/currentUser', '{"name":"Raktima chaurasiya","email":"raktimachaurasiya@gmail.com","phone":"5645676534","username":"raktimachaurasiya@gmail.com","emailVerified":false,"createdAt":"2024-01-10T14:40:59.326Z","updatedAt":"2024-01-15T13:31:19.044Z","ProfilePic":"","ACL":{"9MUdPyX2ae":{"read":true,"write":true}},"sessionToken":"r:6d093ee320d70354f4e92cccc537180b","objectId":"9MUdPyX2ae","className":"_User"}');
// localStorage.setItem('_appName', 'contracts');
if (docId) {
getPdfFolderDocumentList();
} else {
microfrontends/SignDocuments/src/Component/SignYourselfPdf.js
+13 -1
View File
@@ -89,6 +89,7 @@ function SignYourSelf() {
});
const [isAlert, setIsAlert] = useState({ isShow: false, alertMessage: "" });
const [isDontShow, setIsDontShow] = useState(false);
const [isdraggingEnable, setIsDraggingEnable] = useState(false);
const divRef = useRef(null);
const nodeRef = useRef(null);
const [{ isOver }, drop] = useDrop({
@@ -108,6 +109,7 @@ function SignYourSelf() {
id: 1,
text: "signature"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragSign: !!monitor.isDragging()
@@ -120,6 +122,7 @@ function SignYourSelf() {
id: 2,
text: "stamp"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragStamp: !!monitor.isDragging()
@@ -134,7 +137,7 @@ function SignYourSelf() {
id: 3,
text: "drag me"
},
canDrag: false,
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragSignatureSS: !!monitor.isDragging()
})
@@ -147,6 +150,7 @@ function SignYourSelf() {
id: 4,
text: "drag me"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragStampSS: !!monitor.isDragging()
})
@@ -179,6 +183,9 @@ function SignYourSelf() {
if (documentId) {
getDocumentDetails(true);
}
if (!isMobile) {
setIsDraggingEnable(true);
}
}, []);
useEffect(() => {
@@ -456,6 +463,9 @@ function SignYourSelf() {
} else if (dragTypeValue === "initials") {
setIsInitial(true);
}
if (isMobile) {
setIsDraggingEnable(false);
}
};
//function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url
@@ -1030,6 +1040,8 @@ function SignYourSelf() {
isSignYourself={true}
addPositionOfSignature={addPositionOfSignature}
isMailSend={false}
setIsDraggingEnable={setIsDraggingEnable}
isdraggingEnable={isdraggingEnable}
/>
</div>
) : (
microfrontends/SignDocuments/src/Component/TemplatePlaceholder.js
+11 -2
View File
@@ -72,6 +72,7 @@ const TemplatePlaceholder = () => {
const [isResize, setIsResize] = useState(false);
const [isSigners, setIsSigners] = useState(false);
const [zIndex, setZIndex] = useState(1);
const [isdraggingEnable, setIsDraggingEnable] = useState(false);
const [pdfLoadFail, setPdfLoadFail] = useState({
status: false,
type: "load"
@@ -168,7 +169,9 @@ const TemplatePlaceholder = () => {
useEffect(() => {
fetchTemplate();
// eslint-disable-next-line
if (!isMobile) {
setIsDraggingEnable(true);
}
}, []);
useEffect(() => {
@@ -454,7 +457,9 @@ const TemplatePlaceholder = () => {
}
setSignerPos((prev) => [...prev, placeHolderPos]);
}
if (isMobile) {
setIsDraggingEnable(false);
}
setIsMailSend(false);
} else {
setIsReceipent(false);
@@ -1183,6 +1188,8 @@ const TemplatePlaceholder = () => {
handleOnBlur={handleOnBlur}
title={"Roles"}
initial={true}
setIsDraggingEnable={setIsDraggingEnable}
isdraggingEnable={isdraggingEnable}
/>
</div>
) : (
@@ -1223,6 +1230,8 @@ const TemplatePlaceholder = () => {
addPositionOfSignature={addPositionOfSignature}
title={"Roles"}
initial={true}
setIsDraggingEnable={setIsDraggingEnable}
isdraggingEnable={isdraggingEnable}
/>
</div>
</div>
microfrontends/SignDocuments/src/Component/WidgetComponent/allWidgets.js
+64 -12
View File
@@ -1,29 +1,81 @@
import React from "react";
import React, { useRef, useState } from "react";
import { getWidgetType } from "../../utils/Utils";
function AllWidgets(props) {
const [backgroundColor, setBackgroundColor] = useState("");
const timeoutRef = useRef(null);
const touchStartTimestamp = useRef(0);
const [selectWidgetType, setSelectWidgetType] = useState("");
const handleTouchStart = (type) => {
// Set a timeout for the long press event
touchStartTimestamp.current = Date.now();
// Set a timeout for the long press event
timeoutRef.current = setTimeout(() => {
// Check if the touch is still ongoing after the long press duration
if (Date.now() - touchStartTimestamp.current >= 1000) {
setBackgroundColor("lightblue"); // Change the color after the long press
setSelectWidgetType(type);
props.setIsDraggingEnable(true);
if ("vibrate" in navigator) {
// Vibrate for 200 milliseconds
navigator.vibrate(200);
}
}
}, 1000); // Adjust the duration as needed
};
const handleTouchMove = () => {
// If the touch moves (indicating a drag), cancel the long press effect
clearTimeout(timeoutRef.current);
};
const handleTouchEnd = () => {
// Clear the timeout when the touch ends before the long press duration
setTimeout(() => {
props.setIsDraggingEnable(false);
setBackgroundColor(""); // Change the color after the long press
setSelectWidgetType("");
}, 1000);
clearTimeout(timeoutRef.current);
};
return props.updateWidgets.map((item, ind) => {
return (
<div key={ind} style={{ marginBottom: "10px" }}>
<div
onClick={() =>
onClick={(e) => {
props.addPositionOfSignature &&
props.addPositionOfSignature("onclick", item)
}
props.addPositionOfSignature("onclick", item);
}}
className="draggable"
ref={(element) => {
if (!props.isMobile) {
item.ref(element);
if (element) {
if (props?.signRef) {
props.signRef.current = element;
}
// if (!props.isMobile) {
item.ref(element);
if (element) {
if (props?.signRef) {
props.signRef.current = element;
}
}
// }
}}
onMouseMove={props?.handleDivClick}
onMouseDown={props?.handleMouseLeave}
onMouseDown={() => {
props?.handleMouseLeave();
}}
>
{item.ref && getWidgetType(item, props?.marginLeft)}
{item.ref && props.isMobile
? getWidgetType(
item,
props?.marginLeft,
handleTouchStart,
handleTouchEnd,
handleTouchMove,
backgroundColor,
selectWidgetType
)
: getWidgetType(item)}
</div>
</div>
);
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholder.js
+94 -1
View File
@@ -1,12 +1,49 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import BorderResize from "../component/borderResize";
import PlaceholderBorder from "./placeholderBorder";
import { Rnd } from "react-rnd";
import { defaultWidthHeight, isMobile } from "../../utils/Utils";
import PlaceholderType from "./placeholderType";
import moment from "moment";
import "../LegaDrive/LegaDrive.css";
function Placeholder(props) {
const [isDraggingEnabled, setDraggingEnabled] = useState(true);
const [isShowDateFormat, setIsShowDateFormat] = useState(false);
const [selectDate, setSelectDate] = useState();
const [dateFormat, setDateFormat] = useState([]);
const dateFormatArr = ["L", "l", "LL", "ll", "LLL", "lll", "llll"];
const changeDateFormat = () => {
const updateDate = [];
dateFormatArr.map((data) => {
const date = new Date(selectDate);
const milliseconds = date.getTime();
const newDate = moment(milliseconds).format(data);
updateDate.push(newDate);
});
setDateFormat(updateDate);
};
useEffect(() => {
if (selectDate) {
changeDateFormat();
}
}, [selectDate]);
//handle to close drop down menu onclick screen
useEffect(() => {
const closeMenuOnOutsideClick = (e) => {
if (isShowDateFormat && !e.target.closest("#menu-container")) {
setIsShowDateFormat(!isShowDateFormat);
}
};
document.addEventListener("click", closeMenuOnOutsideClick);
return () => {
// Cleanup the event listener when the component unmounts
document.removeEventListener("click", closeMenuOnOutsideClick);
};
}, [isShowDateFormat]);
//onclick placeholder function to open signature pad
const handlePlaceholderClick = () => {
@@ -122,7 +159,59 @@ function Placeholder(props) {
></i>
</>
)}
{props.pos.type === "date" && selectDate && (
<div
id="menu-container"
style={{ zIndex: "99", top: "-20px", left: "6px" }}
className={isShowDateFormat ? "dropdown show" : "dropdown"}
onClick={() => setIsShowDateFormat(!isShowDateFormat)}
>
<div className=" sort " data-toggle="dropdown">
<i
// onClick={(e) => {
// console.log("click here");
// e.stopPropagation();
// props.setSignKey(props.pos.key);
// }}
// onTouchEnd={(e) => {
// e.stopPropagation();
// props.setSignKey(props.pos.key);
// }}
class="fa-solid fa-gear settingIcon"
style={{
color: "#188ae2"
// right: "2px",
// top: "-15px"
}}
></i>
</div>
<div
className={
isShowDateFormat ? "dropdown-menu show" : "dropdown-menu"
}
aria-labelledby="dropdownMenuButton"
aria-expanded={isShowDateFormat ? "true" : "false"}
>
{dateFormat.map((date) => {
return (
<span
onClick={() => {
// console.log("go here");
setIsShowDateFormat(!isShowDateFormat);
setSelectDate(date);
}}
className="dropdown-item itemColor"
style={{ fontSize: "12px" }}
>
{date}
</span>
);
})}
</div>
</div>
)}
<i
className="fa-regular fa-copy signCopy"
onClick={(e) => {
@@ -342,6 +431,8 @@ function Placeholder(props) {
setDraggingEnabled={setDraggingEnabled}
pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
isNeedSign={props.isNeedSign}
setSelectDate={setSelectDate}
selectDate={selectDate}
/>
</div>
) : (
@@ -363,6 +454,8 @@ function Placeholder(props) {
setDraggingEnabled={setDraggingEnabled}
pdfDetails={props?.pdfDetails && props?.pdfDetails[0]}
isNeedSign={props.isNeedSign}
setSelectDate={setSelectDate}
selectDate={selectDate}
/>
</>
)}
microfrontends/SignDocuments/src/Component/WidgetComponent/placeholderType.js
+24 -19
View File
@@ -290,25 +290,30 @@ function PlaceholderType(props) {
);
case "date":
return (
<input
placeholder="mm/dd/yyyy"
className="inputPlaceholder"
style={{ outlineColor: "#007bff" }}
type="date"
disabled={props.isPlaceholder ? true : false}
onBlur={handleInputBlur}
onChange={(e) =>
onChangeInput(
e.target.value,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.signerObjId,
false
)
}
/>
<div>
<input
placeholder="mm/dd/yyyy"
className="inputPlaceholder"
style={{ outlineColor: "#007bff" }}
type="date"
disabled={props.isPlaceholder ? true : false}
onBlur={handleInputBlur}
value={props.selectDate && props.selectDate}
onChange={(e) => {
props.setSelectDate(e.target.value);
onChangeInput(
e.target.value,
props.pos.key,
props.xyPostion,
props.index,
props.setXyPostion,
props.data && props.data.signerObjId,
false
);
}}
/>
{/* <div style={{ position: "absolute" }}>{props.selectDate}</div> */}
</div>
);
case "image":
microfrontends/SignDocuments/src/Component/component/fieldsComponent.js
+50 -25
View File
@@ -4,6 +4,7 @@ import RecipientList from "../../premitives/RecipientList";
import { useDrag } from "react-dnd";
import AllWidgets from "../WidgetComponent/allWidgets";
import { widgets } from "../../utils/Utils";
import Scrollbar from "react-scrollbars-custom";
function FieldsComponent({
pdfUrl,
@@ -37,12 +38,16 @@ function FieldsComponent({
signerPos,
handleRoleChange,
handleOnBlur,
title
title,
setIsDraggingEnable,
isdraggingEnable
}) {
const temp = ["1", "2", "3", "4", "5", "6", "7", "8", "0", "23"];
const [isSignersModal, setIsSignersModal] = useState(false);
const [initialTouchX, setInitialTouchX] = useState(0);
const [{ isDragDropdown }, dropdown] = useDrag({
type: "BOX",
canDrag: isdraggingEnable,
item: {
type: "BOX",
id: 5,
@@ -54,6 +59,7 @@ function FieldsComponent({
});
const [{ isDragCheck }, checkbox] = useDrag({
type: "BOX",
canDrag: isdraggingEnable,
item: {
type: "BOX",
id: 6,
@@ -65,6 +71,7 @@ function FieldsComponent({
});
const [{ isDragText }, text] = useDrag({
type: "BOX",
canDrag: isdraggingEnable,
item: {
type: "BOX",
id: 7,
@@ -76,6 +83,7 @@ function FieldsComponent({
});
const [{ isDragInitial }, initials] = useDrag({
type: "BOX",
canDrag: isdraggingEnable,
item: {
type: "BOX",
id: 8,
@@ -87,6 +95,7 @@ function FieldsComponent({
});
const [{ isDragName }, name] = useDrag({
type: "BOX",
canDrag: isdraggingEnable,
item: {
type: "BOX",
id: 9,
@@ -98,6 +107,7 @@ function FieldsComponent({
});
const [{ isDragCompany }, company] = useDrag({
type: "BOX",
canDrag: isdraggingEnable,
item: {
type: "BOX",
id: 10,
@@ -109,6 +119,7 @@ function FieldsComponent({
});
const [{ isDragJobtitle }, jobTitle] = useDrag({
type: "BOX",
canDrag: isdraggingEnable,
item: {
type: "BOX",
id: 11,
@@ -120,6 +131,7 @@ function FieldsComponent({
});
const [{ isDragDate }, date] = useDrag({
type: "BOX",
canDrag: isdraggingEnable,
item: {
type: "BOX",
id: 12,
@@ -131,6 +143,7 @@ function FieldsComponent({
});
const [{ isDragImage }, image] = useDrag({
type: "BOX",
canDrag: isdraggingEnable,
item: {
type: "BOX",
id: 13,
@@ -142,6 +155,7 @@ function FieldsComponent({
});
const [{ isDragEmail }, email] = useDrag({
type: "BOX",
canDrag: isdraggingEnable,
item: {
type: "BOX",
id: 14,
@@ -199,12 +213,6 @@ function FieldsComponent({
const filterWidgets = widget.filter((data) => data.type !== "dropdown");
const updateWidgets = isSignYourself ? filterWidgets : widget;
const handleScroll = (scrollOffset) => {
if (scrollContainerRef.current) {
scrollContainerRef.current.scrollLeft += scrollOffset;
}
};
return (
<>
{isMobile ? (
@@ -304,24 +312,41 @@ function FieldsComponent({
borderTop: `2px solid ${themeColor()}`
}}
>
<div
style={{
display: "flex",
overflowX: "scroll",
whiteSpace: "nowrap",
padding: "10px"
}}
<Scrollbar
style={{ height: "50px", width: "100%" }}
// onScroll={handleScrollStart}
// onScrollStop={handleScrollEnd}
// onTouchEnd={handleScrollStart}
noScrollY={true}
>
<AllWidgets
updateWidgets={updateWidgets}
handleDivClick={handleDivClick}
handleMouseLeave={handleMouseLeave}
signRef={signRef}
marginLeft={5}
addPositionOfSignature={addPositionOfSignature}
isMobile={isMobile}
/>
</div>
<div
style={{
display: "flex",
// overflowX: "scroll",
// whiteSpace: "nowrap",
padding: "10px"
}}
// onScroll={handleScroll}
// onTouchStart={handleScrollStart}
// onTouchMove={handleTouchMove}
// onTouchEnd={handleTouchEnd}
>
{/* {temp.map((data,ind) => {
return <div style={{border:"1px solid red",padding:"20px"}} key={ind}>{data}</div>;
})} */}
<AllWidgets
updateWidgets={updateWidgets}
handleDivClick={handleDivClick}
handleMouseLeave={handleMouseLeave}
signRef={signRef}
marginLeft={5}
addPositionOfSignature={addPositionOfSignature}
setIsDraggingEnable={setIsDraggingEnable}
isMobile={isMobile}
isdraggingEnable={isdraggingEnable}
/>
</div>
</Scrollbar>
</div>
</div>
)
microfrontends/SignDocuments/src/Component/placeHolderSign.js
+15
View File
@@ -86,6 +86,7 @@ function PlaceHolderSign() {
const [showDropdown, setShowDropdown] = useState(false);
const [isCheckboxRequired, setIsCheckboxRequired] = useState(false);
const [selectRequiredType, setSelectRequiredType] = useState("Optional");
const [isdraggingEnable, setIsDraggingEnable] = useState(false);
const color = [
"#93a3db",
"#e6c3db",
@@ -116,6 +117,7 @@ function PlaceHolderSign() {
id: 1,
text: "signature"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragSign: !!monitor.isDragging()
})
@@ -127,6 +129,7 @@ function PlaceHolderSign() {
id: 2,
text: "stamp"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragStamp: !!monitor.isDragging()
})
@@ -138,6 +141,7 @@ function PlaceHolderSign() {
id: 3,
text: "signature"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragSignatureSS: !!monitor.isDragging()
})
@@ -149,6 +153,7 @@ function PlaceHolderSign() {
id: 4,
text: "stamp"
},
canDrag: isdraggingEnable,
collect: (monitor) => ({
isDragStampSS: !!monitor.isDragging()
})
@@ -176,6 +181,9 @@ function PlaceHolderSign() {
if (documentId) {
getDocumentDetails();
}
if (!isMobile) {
setIsDraggingEnable(true);
}
}, []);
useEffect(() => {
@@ -458,6 +466,9 @@ function PlaceHolderSign() {
setIsCheckboxRequired(true);
setSignKey(key);
}
if (isMobile) {
setIsDraggingEnable(false);
}
}
}
};
@@ -1403,6 +1414,8 @@ function PlaceHolderSign() {
setUniqueId={setUniqueId}
setRoleName={setRoleName}
initial={true}
setIsDraggingEnable={setIsDraggingEnable}
isdraggingEnable={isdraggingEnable}
/>
</div>
) : (
@@ -1438,6 +1451,8 @@ function PlaceHolderSign() {
isSignYourself={false}
addPositionOfSignature={addPositionOfSignature}
initial={true}
setIsDraggingEnable={setIsDraggingEnable}
isdraggingEnable={isdraggingEnable}
/>
</div>
</div>
microfrontends/SignDocuments/src/css/signature.css
+5 -1
View File
@@ -123,6 +123,10 @@
height: 14px;
}
.dropdown-date-menu {
min-width: 7rem;
}
.mailBtn {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
@@ -131,7 +135,7 @@
border: none !important;
color: white !important;
}
.mailBtn:hover {
box-shadow: 0 2px 4px rgba(154, 36, 36, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
}
microfrontends/SignDocuments/src/utils/Utils.js
+16 -2
View File
@@ -1,6 +1,7 @@
import axios from "axios";
import { rgb } from "pdf-lib";
import { themeColor } from "./ThemeColor/backColor";
export const isMobile = window.innerWidth < 767;
//calculate width and height
@@ -223,15 +224,28 @@ export const widgets = [
}
];
export const getWidgetType = (item, marginLeft) => {
export const getWidgetType = (
item,
marginLeft,
handleTouchStart,
handleTouchEnd,
handleTouchMove,
backgroundColor,
selectWidgetType
) => {
return (
<>
<div
onTouchStart={() => handleTouchStart && handleTouchStart(item.type)}
onTouchEnd={handleTouchEnd && handleTouchEnd}
onTouchMove={handleTouchMove && handleTouchMove}
className="signatureBtn"
style={{
boxShadow:
"0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
marginLeft: marginLeft && `${marginLeft}px`
marginLeft: marginLeft && `${marginLeft}px`,
background:
selectWidgetType === item.type && backgroundColor && backgroundColor
}}
>
<div