diff --git a/src/components/process/processStepTwo/DocumentContainer.tsx b/src/components/process/processStepTwo/DocumentContainer.tsx index c6b44a4..8f7286b 100644 --- a/src/components/process/processStepTwo/DocumentContainer.tsx +++ b/src/components/process/processStepTwo/DocumentContainer.tsx @@ -999,6 +999,7 @@ const handleGroupBorderPosition = (groupElements: NodeListOf, conta // NEW DIRECTIONAL MOVEMENT HANDLER - START + const handleDirectionalMove = (direction: 'up' | 'down' | 'left' | 'right', stepSize: number = 5) => { if (!selectedTag) return; @@ -1037,11 +1038,44 @@ const handleGroupBorderPosition = (groupElements: NodeListOf, conta }); }; - // Create a wrapper that matches DirectionalControls' expected signature const directionalControlsHandler = (direction: 'up' | 'down' | 'left' | 'right') => { handleDirectionalMove(direction, 5); // Use default stepSize of 5 }; + // Add this new handler function to your parent component +const handleDirectPositionChange = (newLeft: number, newTop: number) => { + console.log("handleDirectPositionChange",newLeft,newTop) + if (!selectedTag) return; + + const { key, index } = selectedTag; + const currentItem = droppedItems[key]?.[index]; + + if (!currentItem) return; + + // Ensure values are not negative + const clampedLeft = Math.max(0, newLeft); + const clampedTop = Math.max(0, newTop); + + setDroppedItems({ + ...droppedItems, + [key]: Array.isArray(droppedItems[key]) + ? droppedItems[key].map((item, i) => + i === index + ? { + ...item, + dimensions: { + ...item.dimensions, + left: clampedLeft, + top: clampedTop + }, + update: true + } + : item + ) + : [], + }); +}; + return ( <> {/* Center Doc Container - START */} @@ -1201,6 +1235,7 @@ const handleGroupBorderPosition = (groupElements: NodeListOf, conta {selectedTag && void; + onPositionChange?: (left: number, top: number) => void; disabled?: boolean; stepSize?: number; className?: string; @@ -16,23 +17,67 @@ interface DirectionalControlsProps { const DirectionalControls: React.FC = ({ onMove, + onPositionChange, disabled = false, stepSize = 1, className = '', selectedType, }) => { const onMoveRef = useRef(onMove); + const [leftValue, setLeftValue] = useState(''); + const [topValue, setTopValue] = useState(''); useEffect(() => { onMoveRef.current = onMove; }, [onMove]); + useEffect(() => { + const { top = 0, left = 0 } = selectedType || {}; + setLeftValue(Math.round(left).toString()); + setTopValue(Math.round(top).toString()); + }, [selectedType]); + const handleMove = (direction: 'up' | 'down' | 'left' | 'right') => { if (!disabled) { onMoveRef.current(direction, stepSize); } }; + const handlePositionInputChange = (type: 'left' | 'top', value: string) => { + if (type === 'left') { + setLeftValue(value); + } else { + setTopValue(value); + } + }; + + const handlePositionInputBlur = (type: 'left' | 'top') => { + if (!onPositionChange) return; + + const numericValue = parseFloat(type === 'left' ? leftValue : topValue); + if (isNaN(numericValue)) { + const { top = 0, left = 0 } = selectedType || {}; + if (type === 'left') { + setLeftValue(Math.round(left).toString()); + } else { + setTopValue(Math.round(top).toString()); + } + return; + } + + const { top = 0, left = 0 } = selectedType || {}; + const newLeft = type === 'left' ? numericValue : left; + const newTop = type === 'top' ? numericValue : top; + + onPositionChange(newLeft, newTop); + }; + + const handleKeyPress = (e: React.KeyboardEvent, type: 'left' | 'top') => { + if (e.key === 'Enter') { + handlePositionInputBlur(type); + } + }; + useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (disabled) return; @@ -64,57 +109,113 @@ const DirectionalControls: React.FC = ({ const buttonClass = ` p-1 rounded-sm transition-all duration-200 border shadow-sm text-[10px] ${disabled - ? 'bg-gray-100 text-gray-400 cursor-not-allowed' - : 'bg-white text-gray-600 hover:bg-blue-100 active:bg-blue-200 cursor-pointer'} - flex items-center justify-center w-6 h-6 -`; + ? 'bg-gray-100 text-gray-400 cursor-not-allowed' + : 'bg-white text-gray-600 hover:bg-blue-100 active:bg-blue-200 cursor-pointer'} + flex items-center justify-center w-6 h-6 `; + const inputClass = ` + w-12 h-6 text-[10px] text-center border rounded px-1 bg-white + ${disabled + ? 'bg-gray-100 text-gray-400 cursor-not-allowed border-gray-300' + : 'text-gray-600 border-gray-300 focus:border-blue-400 focus:outline-none'} + `; const { top = 0, left = 0, width = 0, height = 0 } = selectedType || {}; - const right = left + width; - const bottom = top + height; - return ( -
- {/* Top Row */} -
-
- - Top: {Math.round(top)}px -
-
- - {/* Middle Row */} -
- - Left: {Math.round(left)}px +
+ {/* Top Button */} +
+
+ + Top +
-
+ {/* Middle Row: Left - Center (Inputs) - Right */} +
+ {/* Left Button */} +
+ + Left +
-
- - {/* Right: {Math.round(right)}px */} + {/* Center Panel */} +
+ {/* Floating dimensions tooltip */} +
+ handlePositionInputChange('left', e.target.value)} + onBlur={() => handlePositionInputBlur('left')} + onKeyPress={(e) => handleKeyPress(e, 'left')} + disabled={disabled} + className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono" + /> + × + handlePositionInputChange('top', e.target.value)} + onBlur={() => handlePositionInputBlur('top')} + onKeyPress={(e) => handleKeyPress(e, 'top')} + disabled={disabled} + className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono" + /> +
+
+ + + {/* Right Button */} +
+ + Right +
- {/* Bottom Row */} -
-
- - {/* Bottom: {Math.round(bottom)}px */} + {/* Bottom Button */} +
+
+ + Bottom +
-
); + }; -export default DirectionalControls; +export default DirectionalControls; \ No newline at end of file diff --git a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx index 1666439..ec08e9c 100644 --- a/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx +++ b/src/components/process/processStepTwo/rightSideBar/RightSideBar.tsx @@ -180,16 +180,26 @@ const RightSideBar: React.FC = ({ selectedTag, setDroppedItems if (!is24Hrs) { val = timeFormats[1].format } - setDroppedItems((prev) => ( - { + console.log("val", val) + + setDroppedItems((prev) => { + const updatedArray = Array.isArray(prev[selTagKey]) + ? prev[selTagKey].map((item, i) => { + if (i === selTagIndx) { + const updatedItem = { ...item, [changeTo]: changeWith + " " + val, update: true }; + console.log('Updating item at index', i, 'with:', updatedItem); + return updatedItem; + } + return item; + }) + : []; + + return { ...prev, - [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array - ? prev[selTagKey].map((item, i) => - i === selTagIndx ? { ...item, [changeTo]: changeWith + " " + val, update: true } : item - ) - : [], - }// Provide a fallback in case it's undefined or not an array - )); + [selTagKey]: updatedArray, + }; + }); + } else { setDroppedItems((prev) => { @@ -397,7 +407,7 @@ const RightSideBar: React.FC = ({ selectedTag, setDroppedItems - { + {(selectedTag.type.toLowerCase() !== TagsTypes.SIGNATURE && selectedTag.type.toLowerCase() !== TagsTypes.INITIALS) &&
setStyleOpen(!styleOpen)} diff --git a/src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx b/src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx index d47aca8..0d07995 100644 --- a/src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx +++ b/src/components/process/processStepTwo/rightSideBar/TemporalDateAttr.tsx @@ -86,6 +86,7 @@ const TemporalDateAttr: React.FC = ({ subType, format, drop val = val + " " + timeFormats[1].format; } } + console.log('line 89' , val ) return (