update/refactor frontend

frontend/src/components/Nodes/Custom.js

@@ -82,8 +82,8 @@ export default class CustomNodeIframe extends React.Component {
       this.original_x = this.myRef.current.getBoundingClientRect().left;
       this.original_y = this.myRef.current.getBoundingClientRect().top;
 
-      this.original_mouse_x = e.pageX
-      this.original_mouse_y = e.pageY
+      this.original_mouse_x = e.clientX
+      this.original_mouse_y = e.clientY
     }
 
     resize = (e, point) => {
@@ -91,56 +91,23 @@ export default class CustomNodeIframe extends React.Component {
       var width = 0;
       // e.dataTransfer.setDragImage(new Image(), 0, 0)
       if (point === 'bottom-right'){
-        width = this.original_width + (e.pageX - this.original_mouse_x);
-        height = this.original_height + (e.pageY - this.original_mouse_y)
+        width = this.original_width + (e.clientX - this.original_mouse_x);
+        height = this.original_height + (e.clientY - this.original_mouse_y)
         if (width > MINIMUM_WIDTH) {
           this.myRef.current.style.width = `${width}px`
-        }
-        if (height > MINIMUM_HEIGHT) {
-          this.myRef.current.style.height = `${height}px`
-        }
-
-      } else if (point === "bottom-left"){
-        height = this.original_height + (e.pageY - this.original_mouse_y)
-        width = this.original_width - (e.pageX - this.original_mouse_x);
-        if (height > MINIMUM_HEIGHT) {
-          this.myRef.current.style.height = `${height}px`
-        }
-        if (width > MINIMUM_WIDTH) {
-          this.myRef.current.style.width = `${width}px`
-          this.myRef.current.style.left = this.original_x + (e.pageX - this.original_mouse_x) + 'px'
+          this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  parseInt(width) , height : parseInt(height), size : this.state.size, iframe : this.state.iframe})
 
         }
-      } else if (point === "top-right"){
-        width = this.original_width + (e.pageX - this.original_mouse_x);
-        height = this.original_height - (e.pageY - this.original_mouse_y)
-
-        if (width > MINIMUM_WIDTH) {
-          this.myRef.current.style.width = `${width}px`
-        }
         if (height > MINIMUM_HEIGHT) {
           this.myRef.current.style.height = `${height}px`
-          this.myRef.current.style.top = this.original_y + (e.pageY - this.original_mouse_y) + 'px'
-        }
-      } else {
-        height = this.original_height - (e.pageY - this.original_mouse_y)
-        width = this.original_width - (e.pageX - this.original_mouse_x);
-        if (width > MINIMUM_WIDTH) {
-          this.myRef.current.style.width = `${width}px`
-          this.myRef.current.style.left = this.original_x + (e.pageX - this.original_mouse_x) + 'px'
+          this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  parseInt(width) , height : parseInt(height), size : this.state.size, iframe : this.state.iframe})
 
         }
-        if (height > MINIMUM_HEIGHT) {
-          this.myRef.current.style.height = `${height}px`
-          this.myRef.current.style.top = this.original_y + (e.pageY - this.original_mouse_y) + 'px'
-        }
-      }
-
-      this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  parseInt(width) , height : parseInt(height), size : this.state.size, iframe : this.state.iframe})
-      
+      } 
     }
 
     OnDragEnd = () => {
+      console.log("end")
       this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width : parseInt(this.myRef.current.style.width), height : parseInt(this.myRef.current.style.height), size : this.state.size, iframe : this.state.iframe})
       
     }

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -7,7 +7,9 @@ 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' 
+import {CgMoreVerticalAlt} from 'react-icons/cg'
+import {BsFillEraserFill} from 'react-icons/bs' 
+import {FaRegSave} from 'react-icons/fa'
 
 const types = {
     custom : CustomNodeIframe,
@@ -68,6 +70,16 @@ export default function ReactEnviorment() {
       }
     }, [reactFlowInstance]);
 
+    const onErase = useCallback(() => {
+      const flow = localStorage.getItem("flowkey")
+      if (reactFlowInstance && flow){
+        alert("The current nodes have been erased from the localstorage")
+        localStorage.removeItem("flowkey")
+        localStorage.removeItem('colour')
+        localStorage.removeItem('emoji')
+      }
+    },[reactFlowInstance])
+
 
     const onDrop = useCallback(
       (event) => {
@@ -103,10 +115,11 @@ export default function ReactEnviorment() {
 
     return (
       <div className={`${theme ? "dark" : ""}`}>          
-        <div className={` absolute w-auto h-auto text-4xl top-4 right-5 z-50 cursor-default select-none bg-white dark:bg-stone-900 rounded-full border border-black dark:border-white duration-500`}  >
-          <CgMoreVerticalAlt className={` text-black dark:text-white ${tool ? "-rotate-0 mr-auto ml-auto" : "rotate-90 m-1"} duration-15 `} onClick={() => setTool(!tool)}/>
-          <h1 title={theme ? 'Dark Mode' : 'Light Mode'} className={`p-4 px-1 ${tool ? "visible delay-[170ms]" : "hidden invisible"} text-3xl`} onClick={() => setTheme(!theme)} >{theme  ? '🌙' : '☀️'}</h1> 
-          <h1 title="Save" className={`p-4 px-1 ${tool ? "visible delay-[170ms]" : " hidden invisible"} text-3xl`} onClick={() => onSave()}>💾</h1> 
+        <div className={` absolute text-center ${tool ? "h-[203.3333px]" : "h-[41px]"} overflow-hidden w-[41px] text-4xl top-4 right-5 z-50 cursor-default select-none bg-white dark:bg-stone-900 rounded-full border border-black dark:border-white duration-500`}  >
+          <CgMoreVerticalAlt className={` text-black dark:text-white ${tool ? "-rotate-0 mr-auto ml-auto mt-1" : " rotate-180 mr-auto ml-auto mt-1"} duration-300`} onClick={() => setTool(!tool)}/>
+          <h1 title={theme ? 'Dark Mode' : 'Light Mode'} className={`p-4 px-1 pb-0 ${tool ? "visible" : "invisible"} text-3xl`} onClick={() => setTheme(!theme)} >{theme  ? '🌙' : '☀️'}</h1> 
+          <FaRegSave title="Save" className={`mt-6 text-black dark:text-white ${tool ? "visible" : " invisible"} ml-auto mr-auto `} onClick={() => onSave()}/> 
+          <BsFillEraserFill title="Erase" className={`mt-6 text-black dark:text-white ml-auto mr-auto ${tool ? "visible" : " invisible"} `} onClick={() => onErase()}/>
         </div>
         <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'))}/>

frontend/src/css/dist/output.css

@@ -728,6 +728,10 @@ video {
   margin-top: auto;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .block {
   display: block;
 }
@@ -796,6 +800,22 @@ video {
   height: 39.750px;
 }
 
+.h-\[157px\] {
+  height: 157px;
+}
+
+.h-\[41px\] {
+  height: 41px;
+}
+
+.h-\[203\.3px\] {
+  height: 203.3px;
+}
+
+.h-\[203\.3333px\] {
+  height: 203.3333px;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -848,6 +868,10 @@ video {
   width: 29.5px;
 }
 
+.w-\[41px\] {
+  width: 41px;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -1347,6 +1371,22 @@ video {
   padding-top: 0.5rem;
 }
 
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+
+.pb-0 {
+  padding-bottom: 0px;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1479,6 +1519,18 @@ video {
   transition-delay: 170ms;
 }
 
+.delay-\[270ms\] {
+  transition-delay: 270ms;
+}
+
+.delay-\[100ms\] {
+  transition-delay: 100ms;
+}
+
+.delay-\[200ms\] {
+  transition-delay: 200ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }