🤏 Draggable Bottom To Resize Node

docker-compose.yml

@@ -24,5 +24,4 @@ services:
     volumes:
       - './frontend/src:/app/src'
       - './frontend/public:/app/public'
-    command: "npm start"
-    
+    command: "npm start"

frontend/src/components/Navagation/navbar.js

@@ -20,7 +20,6 @@ export default class Navbar extends Component{
             mode : false,
             modal : false,
             error : false
-
            }
     }
 

frontend/src/components/Nodes/Custom.js

@@ -68,15 +68,15 @@ export default class CustomNodeIframe extends React.Component {
 
     }
     
-    // (Experimental) resize nodes by dragging
-    // initial = (e) => {
-    //   this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height , size : this.state.size, iframe : this.state.iframe, initial_pos :  e.clientY, initial_size : this.myRef.current.offsetHeight })
-    // }
+    //(Experimental) resize nodes by dragging
+    initial = (e) => {
+      this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width : this.state.width, height : this.state.height , size : this.state.size, iframe : this.state.iframe, initial_pos :  e.clientY, initial_size : this.myRef.current.offsetHeight })
+    }
 
-    // resize = (e) => {
-    //   this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  this.state.width, height : this.state.height, size : this.state.size, iframe : this.state.iframe, initial_pos : this.state.initial_pos, initial_size : this.state.initial_size})
-    //   this.myRef.current.style.height = `${parseInt(this.state.initial_size) + parseInt(e.clientY - this.state.initial_pos)}px`
-    // }
+    resize = (e) => {
+      this.setState({id : this.state.id, reachable : this.state.reachable, selected : this.state.selected, data : this.state.data, width :  this.state.width, height : this.state.height, size : this.state.size, iframe : this.state.iframe, initial_pos : this.state.initial_pos, initial_size : this.state.initial_size})
+      this.myRef.current.style.height = `${parseInt(this.state.initial_size) + parseInt(e.clientY - this.state.initial_pos)}px`
+    }
 
     Counter(focus, size){
       return (<div className="custom-number-input h-10 w-32 dark:text-white text-black ">
@@ -125,12 +125,12 @@ export default class CustomNodeIframe extends React.Component {
                         className=" -z-10 container h-full p-2 flex-grow space-iframe overflow-scroll " 
                         sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
                   </div>
-                  {// (Experimental) Do not uncomment
-                  /* <div className={`absolute bottom-0 w-full h-10 bg-transparent border-1 shadow-2xl rounded-xl z-10 cursor-ns-resize`} 
+                  {/* (Experimental) Do not uncomment */}
+                   <div className={`absolute bottom-0 w-full h-10 bg-transparent border-1 shadow-2xl rounded-xl z-10 cursor-ns-resize`} 
                        draggable
                        onDragStart={(e) => { this.initial(e)}}
                        onDrag={(e) => { this.resize(e)}}
-                       ></div> */}
+                       ></div> 
                 </>
         </>)
     }

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -44,28 +44,30 @@ export default function ReactEnviorment() {
     const onDrop = useCallback(
       (event) => {
         event.preventDefault();
-        console.log(event.dataTransfer.getData('application/reactflow'))
-        const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
-        const type = event.dataTransfer.getData('application/reactflow');
-        const item  = JSON.parse(event.dataTransfer.getData('application/item'));
-        const colour = event.dataTransfer.getData('application/colour');
-        // check if the dropped element is valid
-        if (typeof type === 'undefined' || !type) {
-          return;
-        }
-  
-        const position = reactFlowInstance.project({
-          x: event.clientX - reactFlowBounds.left,
-          y: event.clientY - reactFlowBounds.top,
-        });
-        const newNode = {
-          id: `${item.name}-${nodes.length}`,
-          type,
-          position,
-          dragHandle : `#draggable`,
-          data: { label: `${item.name}`, host : `${item.host}`, colour : `${colour}`, delete : deleteNode },
-        };
-        setNodes((nds) => nds.concat(newNode));
+
+        if(event.dataTransfer.getData('application/reactflow')  !== ""){
+          const reactFlowBounds = reactFlowWrapper.current.getBoundingClientRect();
+          const type = event.dataTransfer.getData('application/reactflow');
+          const item  = JSON.parse(event.dataTransfer.getData('application/item'));
+          const colour = event.dataTransfer.getData('application/colour');
+          // check if the dropped element is valid
+          if (typeof type === 'undefined' || !type) {
+            return;
+          }
+    
+          const position = reactFlowInstance.project({
+            x: event.clientX - reactFlowBounds.left,
+            y: event.clientY - reactFlowBounds.top,
+          });
+          const newNode = {
+            id: `${item.name}-${nodes.length}`,
+            type,
+            position,
+            dragHandle : `#draggable`,
+            data: { label: `${item.name}`, host : `${item.host}`, colour : `${colour}`, delete : deleteNode },
+          };
+          setNodes((nds) => nds.concat(newNode));
+      }
       },
       [reactFlowInstance, nodes]);
 

frontend/src/css/dist/output.css

@@ -583,10 +583,6 @@ video {
   }
 }
 
-.fixed {
-  position: fixed;
-}
-
 .absolute {
   position: absolute;
 }
@@ -600,10 +596,6 @@ video {
   bottom: 0px;
 }
 
-.left-\[39\.15\%\] {
-  left: 39.15%;
-}
-
 .-right-3 {
   right: -0.75rem;
 }
@@ -632,22 +624,6 @@ video {
   right: 1.25rem;
 }
 
-.left-\[50\%\] {
-  left: 50%;
-}
-
-.right-\[50\%\] {
-  right: 50%;
-}
-
-.right-\[45\%\] {
-  right: 45%;
-}
-
-.right-\[39\.1\%\] {
-  right: 39.1%;
-}
-
 .-z-20 {
   z-index: -20;
 }
@@ -668,26 +644,6 @@ video {
   z-index: 50;
 }
 
-.-z-0 {
-  z-index: 0;
-}
-
-.z-30 {
-  z-index: 30;
-}
-
-.-z-40 {
-  z-index: -40;
-}
-
-.z-\[100\] {
-  z-index: 100;
-}
-
-.z-\[\] {
-  z-index: ;
-}
-
 .float-left {
   float: left;
 }
@@ -700,25 +656,14 @@ video {
   margin: 0px;
 }
 
-.my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.my-5 {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
-
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
 
+.-mt-2 {
+  margin-top: -0.5rem;
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -739,46 +684,6 @@ video {
   margin-top: -0.75rem;
 }
 
-.-mr-6 {
-  margin-right: -1.5rem;
-}
-
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
-.mb-10 {
-  margin-bottom: 2.5rem;
-}
-
-.mr-10 {
-  margin-right: 2.5rem;
-}
-
-.ml-10 {
-  margin-left: 2.5rem;
-}
-
-.ml-60 {
-  margin-left: 15rem;
-}
-
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
-
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
-.-mb-2 {
-  margin-bottom: -0.5rem;
-}
-
-.-mt-2 {
-  margin-top: -0.5rem;
-}
-
 .block {
   display: block;
 }
@@ -791,10 +696,6 @@ video {
   display: inline-flex;
 }
 
-.table {
-  display: table;
-}
-
 .hidden {
   display: none;
 }
@@ -1052,11 +953,6 @@ 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-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -1282,16 +1178,6 @@ video {
   padding-right: 1.5rem;
 }
 
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.px-9 {
-  padding-left: 2.25rem;
-  padding-right: 2.25rem;
-}
-
 .pt-8 {
   padding-top: 2rem;
 }
@@ -1324,10 +1210,6 @@ video {
   padding-top: 0.5rem;
 }
 
-.pl-10 {
-  padding-left: 2.5rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -1341,9 +1223,9 @@ video {
   line-height: 2.5rem;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
 }
 
 .text-3xl {
@@ -1361,11 +1243,6 @@ video {
   line-height: 2rem;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -1374,10 +1251,6 @@ video {
   font-weight: 600;
 }
 
-.font-extrabold {
-  font-weight: 800;
-}
-
 .leading-tight {
   line-height: 1.25;
 }
@@ -1387,14 +1260,14 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-black {
+.text-blue-50 {
   --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
+  color: rgb(239 246 255 / var(--tw-text-opacity));
 }
 
-.text-blue-50 {
+.text-black {
   --tw-text-opacity: 1;
-  color: rgb(239 246 255 / var(--tw-text-opacity));
+  color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
 .underline {
@@ -1402,10 +1275,6 @@ video {
           text-decoration-line: underline;
 }
 
-.opacity-70 {
-  opacity: 0.7;
-}
-
 .opacity-60 {
   opacity: 0.6;
 }
@@ -1570,51 +1439,17 @@ video {
 }
 
 @media (min-width: 640px) {
-  .sm\:left-\[38\.5\%\] {
-    left: 38.5%;
-  }
-
-  .sm\:left-\[50\%\] {
-    left: 50%;
-  }
-
-  .sm\:left-\[70\%\] {
-    left: 70%;
-  }
-
-  .sm\:right-\[\%\] {
-    right: %;
-  }
-
   .sm\:w-60 {
     width: 15rem;
   }
 
-  .sm\:pl-5 {
-    padding-left: 1.25rem;
-  }
-
   .sm\:text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem;
   }
 }
 
-@media (min-width: 768px) {
-  .md\:left-\[39\.15\%\] {
-    left: 39.15%;
-  }
-
-  .md\:right-\[\%\] {
-    right: %;
-  }
-}
-
 @media (min-width: 1024px) {
-  .lg\:left-\[40\%\] {
-    left: 40%;
-  }
-
   .lg\:w-72 {
     width: 18rem;
   }