Tool Button 🔨

frontend/src/components/Navagation/navbar.js

@@ -45,7 +45,7 @@ export default class Navbar extends Component{
                 if(diff !== 0){
                    this.hanelTabs(menu, diff)
                 }
-        },1000);    
+        },1500);    
         }catch(e){
             console.log(e)
         }

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -7,7 +7,8 @@ import ReactFlow, { Background,
 import React ,{ useState, useCallback, useRef, useEffect } from 'react';
 import Navbar from '../Navagation/navbar';
 import { useThemeDetector } from '../../helper/visual'
- 
+import {CgMoreVerticalAlt} from 'react-icons/cg' 
+
 const types = {
     custom : CustomNodeIframe,
   }
@@ -18,18 +19,16 @@ export default function ReactEnviorment() {
     const [nodes, setNodes] = useState([]);
     const [reactFlowInstance, setReactFlowInstance] = useState(null);
     const reactFlowWrapper = useRef(null);
-
+    const [tool, setTool] = useState(false)
 
     useEffect(() => {
       const restore = () => {
       const flow = JSON.parse(localStorage.getItem('flowkey'));
         
         if(flow){
-          flow.nodes.map((nds) => {
-            nds.data.delete = deleteNode
-          })
+          flow.nodes.map((nds) => nds.data.delete = deleteNode)
           setNodes(flow.nodes || [])
-
+          console.log(flow)
         }
       }
       restore()
@@ -52,8 +51,8 @@ export default function ReactEnviorment() {
     
     const onSave = useCallback(() => {
       if (reactFlowInstance) {
-        alert("Saved")
         const flow = reactFlowInstance.toObject();
+        alert("The current nodes have been saved into the localstorage 💾")
         localStorage.setItem('flowkey', JSON.stringify(flow));
         var labels = [];
         var colour = [];
@@ -103,12 +102,13 @@ export default function ReactEnviorment() {
       [reactFlowInstance, nodes]);
 
     return (
-      <>          
-        <div className=' absolute top-4 right-5 z-50 cursor-default select-none text-4xl ' >
-          <h1 title={theme ? 'Dark Mode' : 'Light Mode'} onClick={() => setTheme(!theme)} >{theme  ? '🌙' : '☀️'}</h1> 
-          <h1 title="Save" className=" pt-5" onClick={() => onSave()}>💾</h1> 
+      <div className={`${theme ? "dark" : ""}`}>          
+        <div className={` absolute ${tool ? "h-[13rem]" : "h-[4rem]"} top-4 right-5 z-50 cursor-default select-none text-4xl bg-white dark:bg-stone-900 p-3  rounded-full border border-black dark:border-white duration-500`}  >
+          <CgMoreVerticalAlt className={`text-black dark:text-white ${tool ? "-rotate-0" : "rotate-90"} duration-150`} onClick={() => setTool(!tool)}/>
+          <h1 title={theme ? 'Dark Mode' : 'Light Mode'} className={`py-2 ${tool ? "visible delay-[170ms]" : "invisible"} `} onClick={() => setTheme(!theme)} >{theme  ? '🌙' : '☀️'}</h1> 
+          <h1 title="Save" className={`py-2 ${tool ? "visible delay-[170ms]" : "invisible"} `} onClick={() => onSave()}>💾</h1> 
         </div>
-        <div className={`flex h-screen w-screen ${theme ? "dark" : ""} transition-all`}>
+        <div className={`flex h-screen w-screen ${theme ? "dark" : ""} transition-all`}>    
           <Navbar onDelete={deleteNodeContains} colour={JSON.parse(localStorage.getItem('colour'))} emoji={JSON.parse(localStorage.getItem('emoji'))}/>
           <ReactFlowProvider>
             <div className="h-screen w-screen" ref={reactFlowWrapper}>
@@ -118,6 +118,7 @@ export default function ReactEnviorment() {
             </div>
           </ReactFlowProvider>
         </div>
-      </>
+      </div>
     );
   }
+

frontend/src/css/dist/output.css

@@ -583,6 +583,14 @@ video {
   }
 }
 
+.visible {
+  visibility: visible;
+}
+
+.invisible {
+  visibility: hidden;
+}
+
 .absolute {
   position: absolute;
 }
@@ -724,6 +732,46 @@ video {
   height: 600px;
 }
 
+.h-20 {
+  height: 5rem;
+}
+
+.h-12 {
+  height: 3rem;
+}
+
+.h-14 {
+  height: 3.5rem;
+}
+
+.h-16 {
+  height: 4rem;
+}
+
+.h-\[4\.5rem\] {
+  height: 4.5rem;
+}
+
+.h-60 {
+  height: 15rem;
+}
+
+.h-0 {
+  height: 0px;
+}
+
+.h-\[14rem\] {
+  height: 14rem;
+}
+
+.h-\[4rem\] {
+  height: 4rem;
+}
+
+.h-\[13rem\] {
+  height: 13rem;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -778,6 +826,30 @@ video {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-90 {
+  --tw-rotate: 90deg;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-rotate-90 {
+  --tw-rotate: -90deg;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-rotate-180 {
+  --tw-rotate: -180deg;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-rotate-0 {
+  --tw-rotate: -0deg;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .cursor-grab {
   cursor: grab;
 }
@@ -957,6 +1029,16 @@ video {
   background-color: rgb(254 169 89 / var(--tw-bg-opacity));
 }
 
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.bg-stone-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(28 25 23 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -1157,6 +1239,10 @@ video {
   padding: 0.5rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1182,6 +1268,11 @@ video {
   padding-right: 1.5rem;
 }
 
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
 .pt-8 {
   padding-top: 2rem;
 }
@@ -1327,6 +1418,22 @@ video {
   transition-duration: 150ms;
 }
 
+.delay-500 {
+  transition-delay: 500ms;
+}
+
+.delay-200 {
+  transition-delay: 200ms;
+}
+
+.delay-150 {
+  transition-delay: 150ms;
+}
+
+.delay-\[170ms\] {
+  transition-delay: 170ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
@@ -1335,6 +1442,10 @@ video {
   transition-duration: 500ms;
 }
 
+.duration-150 {
+  transition-duration: 150ms;
+}
+
 .placeholder\:italic::-webkit-input-placeholder {
   font-style: italic;
 }
@@ -1446,6 +1557,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 @media (min-width: 640px) {
   .sm\:w-60 {
     width: 15rem;