Temp (#484)

* feat and fix:add textbox is created and onDragMove added (#469) * fix:scrolling issue solved * feat and fix:add textbox is created and onDragMove added * Certiftaskbar (#481) * Added Taskbar for Changing file Properties (#471) Co-authored-by: Subramani E <[email protected]> * Fix: Build error --------- Co-authored-by: asil mehaboob <[email protected]> --------- Co-authored-by: Subramani E <[email protected]> Co-authored-by: asil mehaboob <[email protected]> * Fix: Build error * Fix: Updated taskbar * Fix: Build error * Fix: Build error * Fix: Build error part 2 --------- Co-authored-by: Krishnan E <[email protected]> Co-authored-by: asil mehaboob <[email protected]>
IEDCMEC · Oct 2, 2024 · 49207ee · 49207ee
1 parent d4ba60b
commit 49207ee
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 11,216 deletions.
diff --git a/apps/web-admin/package.json b/apps/web-admin/package.json
@@ -14,15 +14,15 @@
     "@auth0/nextjs-auth0": "^3.5.0",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.2",
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@hookform/resolvers": "^3.3.1",
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.9",
     "@mui/x-data-grid": "^6.19.3",
     "@next/font": "^14.2.13",
-    "autoprefixer": "10.4.16",
     "@radix-ui/react-slot": "^1.1.0",
+    "autoprefixer": "10.4.16",
     "axios": "^1.5.1",
     "canvas": "^2.11.2",
     "class-variance-authority": "^0.7.0",
@@ -32,7 +32,7 @@
     "eslint": "8.56.0",
     "eslint-config-custom": "workspace:*",
     "eslint-config-next": "14.0.4",
-    "framer-motion": "^11.0.6",
+    "framer-motion": "^11.5.4",
     "konva": "^9.3.15",
     "lucide-react": "^0.441.0",
     "next": "14.0.4",

diff --git a/apps/web-admin/src/components/CertificateUploadBox.jsx b/apps/web-admin/src/components/CertificateUploadBox.jsx
@@ -28,15 +28,18 @@ import {
   MdDelete,
 } from 'react-icons/md'; // Import MdDelete icon
 import dynamic from 'next/dynamic';
-
+// import { useEffect } from 'react';
+import { KonvaEventObject } from 'konva/lib/Node'; // Import for event types
 const Stage = dynamic(() => import('react-konva').then((mod) => mod.Stage), { ssr: false });
 const Layer = dynamic(() => import('react-konva').then((mod) => mod.Layer), { ssr: false });
 const KonvaImage = dynamic(() => import('react-konva').then((mod) => mod.Image), { ssr: false });
 const KonvaText = dynamic(() => import('react-konva').then((mod) => mod.Text), { ssr: false });
 
 function CertifcateUploadBox() {
+  const [position, setPosition] = useState({ x: 100, y: 100 });
   const [imageSrc, setImageSrc] = useState(null);
   const [konvaImage, setKonvaImage] = useState(null);
+  const [state, setState] = useState(false);
   const fileInputRef = useRef(null);
   const stageRef = useRef(null);
   const parentRef = useRef(null);
@@ -67,6 +70,11 @@ function CertifcateUploadBox() {
       fileInputRef.current.click();
     }
   };
+  /*const handleDrag = (e) => {
+    const newX = e.clientX - 50; // Adjust for mouse offset
+    const newY = e.clientY - 20; // Adjust for mouse offset
+    setPosition({ x: newX, y: newY });
+  };*/
 
   const handleFileChange = (event) => {
     const file = event.target.files[0];
@@ -104,14 +112,16 @@ function CertifcateUploadBox() {
   };
 
   const handleDoubleClick = (e) => {
-    const stage = e.target.getStage();
-    const pointerPosition = stage.getPointerPosition();
+    //const stage = e.target.getStage();
+    //const pointerPosition = stage.getPointerPosition();
+    //setPosition(pointerPosition);
+    //setState(true);
     setTexts((prevTexts) => [
       ...prevTexts,
       {
-        id: `text-${texts.length + 1}`,
-        x: pointerPosition.x,
-        y: pointerPosition.y,
+        id: texts.length + 1,
+        x: position.x,
+        y: position.y,
         text: 'Double-clicked Text',
         fontSize: 24,
         fontFamily: 'Arial',
@@ -120,14 +130,27 @@ function CertifcateUploadBox() {
         isItalic: false,
         isUnderline: false,
         draggable: true,
+        //color:'white'
       },
     ]);
   };
 
   const handleEditClick = (textObj) => {
     setSelectedText(textObj); // Set selected text to edit
+    //console.log(textObj);
+    //  setState(true);
+    //const stage = e.target.getStage();
+    //const pointerPosition = stage.getPointerPosition();
     onOpen(); // Open modal
   };
+  // useEffect(()=>{
+  //   console.log(selectedText)
+  //   if(selectedText){
+  //     console.log('hello world');
+  //     // console.log(selectedText.text)
+  //     onOpen();
+  //   }
+  // },[selectedText])
 
   const handleDeleteClick = (textId) => {
     // Filter out the text with the matching id
@@ -136,9 +159,20 @@ function CertifcateUploadBox() {
 
   const handleModalSubmit = () => {
     // Update the text object
+    //console.log(selectedText)
     setTexts((prevTexts) =>
       prevTexts.map((text) => (text.id === selectedText.id ? { ...text, ...selectedText } : text)),
     );
+    {
+      texts.map((text) => {
+        console.log(text);
+      });
+    }
+    console.log(selectedText);
+
+    //console.log(selectedText.currentTarget.id);
+    //console.log(selectedText.id);
+    //console.log()
     onClose(); // Close modal
   };
 
@@ -219,6 +253,14 @@ function CertifcateUploadBox() {
                         }`}
                         textDecoration={textObj.isUnderline ? 'underline' : ''}
                         draggable={textObj.draggable}
+                        onDragMove={(e) => {
+                          textObj.x = e.target.position().x;
+                          textObj.y = e.target.position().y;
+                          //console.log(textObj.id,e.target.position().x,e.target.position().y)
+                        }}
+                        onClick={() => {
+                          handleEditClick(textObj);
+                        }}
                       />
                     ))}
                   </Layer>
@@ -244,13 +286,14 @@ function CertifcateUploadBox() {
           />
         </Box>
       </AspectRatio>
+
       {konvaImage && (
         <VStack>
           <Button colorScheme="red" size="sm" marginTop={10} onClick={handleResetBackground}>
             Reset Canvas
           </Button>
-
-          {texts.length > 0 && (
+          {imageSrc ? <Button onClick={handleDoubleClick}>Add Text</Button> : null}
+          {/*texts.length > 0 && (
             <VStack width="100%">
               {texts.map((textObj) => (
                 <Box width="100%" key={textObj.id} display="flex" justifyContent="space-between">
@@ -273,7 +316,7 @@ function CertifcateUploadBox() {
                 </Box>
               ))}
             </VStack>
-          )}
+          )*/}
         </VStack>
       )}
 
@@ -338,12 +381,15 @@ function CertifcateUploadBox() {
                 </Box>
               </>
             )}
+            {/* You can add font and color selectors here */}
           </ModalBody>
-
           <ModalFooter>
-            <Button colorScheme="blue" onClick={handleModalSubmit}>
+            <Button colorScheme="teal" onClick={handleModalSubmit}>
               Save
             </Button>
+            <Button variant="ghost" onClick={onClose}>
+              Cancel
+            </Button>
           </ModalFooter>
         </ModalContent>
       </Modal>