Custom connected edge 🔗

frontend/src/components/Edges/Custom.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import {BiX} from 'react-icons/bi'
+import { getBezierPath, getEdgeCenter } from 'react-flow-renderer';
+
+import '../../css/dist/output.css';
+
+const foreignObjectSize = 40;
+
+const onEdgeClick = (evt, id) => {
+  evt(id)
+};
+
+export default function CustomEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+  data
+}) {
+  const edgePath = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+  const [edgeCenterX, edgeCenterY] = getEdgeCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  });
+
+  return (
+    <>
+      <path
+        id={id}
+        style={style}
+        className="react-flow__edge-path"
+        d={edgePath}
+        markerEnd={markerEnd}
+      />
+      <foreignObject
+        width={foreignObjectSize}
+        height={200}
+        x={edgeCenterX - foreignObjectSize / 2}
+        y={edgeCenterY - foreignObjectSize / 2}
+        className="edgebutton-foreignobject"
+        requiredExtensions="http://www.w3.org/1999/xhtml"
+      >
+          <div className=" flex w-10 h-10 dark:bg-black bg-white border-2 rounded-xl hover:shadow-lg text-center duration-200" onClick={() => onEdgeClick(data.delete, id)}>
+            <BiX className=' flex-1 w-9 h-9 text-black dark:text-white'/>
+          </div>
+      </foreignObject>
+    </>
+  );
+}

frontend/src/components/Modal/importer.js

@@ -105,97 +105,6 @@ function Local(props){
     )
 }
 
-function Stream(props){
-    const [preview, setPreview] = useState("")
-    const [fetchable, setFetch] = useState(false)
-
-    const isFetchable = async (url) => {
-        const pattern = {
-            share : /^https?:\/\/*([0-9]{5})*(-gradio)*(.app)?(\/)?$/,
-            hugginFace : /^https?:\/\/*(hf.space)\/*(embed)\/*([a-zA-Z0-9+_-]+)\/*([a-zA-Z0-9+_-]+)\/*([+])?(\/)?$/
-        } 
-
-        if (!pattern.share.test(url) &&
-            !pattern.hugginFace.test(url)){
-                setFetch(false)
-                return
-            }
-
-        
-        fetch(url, {mode : "no-cors"}).then((re) => {
-            console.log(re)
-            if(re.url.includes("http://localhost:3000")){
-                setFetch(false)    
-            } else { 
-                setFetch(true)
-                props.catch ? props.handelError(false) : props.handelError(props.catch)  
-            }
-            
-          }).catch((err)=>{
-            setFetch(false)
-          })
-          setFetch(false)
-        }
-    
-    return (
-        <div className='w-full shadow-lg' onKeyPress={(e)=>{
-            if (e.key.includes("Enter")) props.appendHandler(props.type)
-        }}>
-            <div className='p-5'>
-            <Message floating>            
-                         <div className={`flex items-center rounded-md bg-light-white mt-6 border-dashed`}>
-                            <label className="relative block w-full p-5 focus:shadow-xl">
-                                <span className={`absolute inset-y-0 left-0 flex items-center pl-8`}>
-                                    <BsSearch className="block float-left cursor-pointer text-gray-500"/>
-                                </span>
-                                <input className={`placeholder:italic placeholder:text-slate-400 text-black dark:text-white block w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm bg-transparent`}  
-                                    placeholder={`URL`}
-                                    type="text" name="search"
-                                    onChange={(e) => {
-                                        props.textHandler(e, "text")
-                                        setPreview(e.target.value)
-                                         setFetch(isFetchable(e.target.value))
-                                    }}
-                                    />
-                            </label>
-                        </div>   
-                        { fetchable === true && <div className=' w-full'>
-                            <h1 className=' text-xl font-sans font-bold text-center text-black mb-2'> Preview </h1>
-                            <div className='p-3 px-1 w-3/4 h-80 bg-gray-200 mr-auto ml-auto rounded-xl'>
-                                <div className='w-full h-full overflow-hidden relative -ml-[5px]'>
-                                <iframe title='Preview' src={preview} className=' absolute top-0 bottom-0 left-0 -right-[25px] overflow-y-scroll w-full h-full mr-auto ml-auto'/>
-                                </div>
-                            </div>
-                        </div>}
-                        <div className={`flex items-center rounded-md bg-light-white dark:bg-[#1b1c1d] mt-6  border-dashed`}>
-                    <label className="relative block p-5 w-full focus:shadow-xl">
-                        <span className={`absolute inset-y-0 left-0 flex items-center pl-7`}>
-                            <Icon className=" text-gray-500 block float-left cursor-pointer mr-2" name="address card"/>
-                        </span>
-                        <input className={`placeholder:italic placeholder:text-slate-400 text-black dark:text-white block bg-transparent w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1  sm:text-sm`} 
-                            placeholder={`Name ( > 20 Characters)` }
-                            type="text" name="search"
-                            autoComplete='off'
-                            onChange={(e) => {
-                                props.textHandler(e, "name")
-                               }}
-                            />
-                    </label>
-                    </div> 
-                    <div className=' right-0 ml-5'>
-                        <button className="relative inline-flex justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-sans font-bold text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
-                                onClick={()=>{props.appendHandler(props.type)}}>
-                            <span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-[#1b1c1d] rounded-md group-hover:bg-opacity-0">
-                                Enter
-                            </span>
-                        </button>
-                    </div>
-                </Message>
-                </div>
-                </div>  
-    )
-}
-
 function Shared(props){
     const [preview, setPreview] = useState("")
     const [fetchable, setFetch] = useState(false)

frontend/src/components/Nodes/Custom.js

@@ -69,7 +69,7 @@ export default class CustomNodeIframe extends React.Component {
 
     handelSize(evt, increment, change){
       if (evt === "increment") {
-        this.setState(prevState => ({[`${change}`] :  change === "width" ? prevState.width + increment : prevState.height + increment }))
+        this.setState({[`${change}`] :  change === "width" ? this.state.width + increment : this.state.height + increment })
         change === "width" ? this.myRef.current.style.width = `${this.state.width + increment}px` : this.myRef.current.style.height = `${this.state.height + increment}px` 
       }
 

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -11,15 +11,21 @@ import ReactFlow, { Background,
                     } from 'react-flow-renderer';
 import React ,{ useState, useCallback, useRef, useEffect } from 'react';
 import Navbar from '../Navagation/navbar';
+import CustomEdge from '../Edges/Custom'
 import { useThemeDetector } from '../../helper/visual'
 import {CgMoreVerticalAlt} from 'react-icons/cg'
 import {BsFillEraserFill} from 'react-icons/bs' 
 import {FaRegSave} from 'react-icons/fa'
 
-const types = {
+const NODE = {
     custom : CustomNodeIframe,
   }
 
+const EDGE = {
+    custom : CustomEdge
+}
+
+
 export default function ReactEnviorment() {
 
     const [theme, setTheme] = useState(useThemeDetector)
@@ -42,6 +48,8 @@ export default function ReactEnviorment() {
       restore()
     },[])
 
+    const deleteEdge = (id) => setEdges((eds) => eds.filter(e => e.id !== id))
+
 
     const onNodesChange = useCallback(
       (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
@@ -61,7 +69,7 @@ export default function ReactEnviorment() {
     const onConnect = useCallback(
       (params) => {
         console.log(params)
-        setEdges((els) => addEdge({...params, animated : true, style : {stroke : "#00FF4A", strokeWidth : "3"}, markerEnd: {type: MarkerType.ArrowClosed, color : "#00FF4A"}}, els))
+        setEdges((els) => addEdge({...params, type: "custom", animated : true, style : {stroke : "#00FF4A", strokeWidth : "3"}, markerEnd: {type: MarkerType.ArrowClosed, color : "#00FF4A"}, data : { delete : deleteEdge}}, els))
         fetch("http://localhost:2000/api/append/connection", {method : "POST", mode : 'cors', headers : { 'Content-Type' : 'application/json' }, body: JSON.stringify({"source": params.source, "target" : params.target})}).then( res => {
           console.log(res)
         }).catch(error => {
@@ -80,7 +88,7 @@ export default function ReactEnviorment() {
 
     const deleteNodeContains = (id) =>{setNodes((nds) => nds.filter(n => !n.id.includes(`${id}-`) ))}
     const deleteNode = (id) =>{setNodes((nds) => nds.filter(n => n.id !== id ))}
-    
+
     const onSave = useCallback(() => {
       if (reactFlowInstance) {
         const flow = reactFlowInstance.toObject();
@@ -155,7 +163,7 @@ export default function ReactEnviorment() {
           <ReactFlowProvider>
           <Navbar onDelete={deleteNodeContains} colour={JSON.parse(localStorage.getItem('colour'))} emoji={JSON.parse(localStorage.getItem('emoji'))}/>
             <div className="h-screen w-screen" ref={reactFlowWrapper}>
-              <ReactFlow nodes={nodes} edges={edges} nodeTypes={types} onNodesChange={onNodesChange} onNodesDelete={deleteNode} onEdgesChange={onEdgesChange} onEdgeUpdate={onEdgeUpdate} onConnect={onConnect} onDragOver={onDragOver} onDrop={onDrop} onInit={setReactFlowInstance}  fitView>
+              <ReactFlow nodes={nodes} edges={edges} nodeTypes={NODE} edgeTypes={EDGE} onNodesChange={onNodesChange} onNodesDelete={deleteNode} onEdgesChange={onEdgesChange} onEdgeUpdate={onEdgeUpdate} onConnect={onConnect} onDragOver={onDragOver} onDrop={onDrop} onInit={setReactFlowInstance}  fitView>
                 <Background variant='dots' size={1} className=" bg-white dark:bg-neutral-800"/>
                 <Controls/>
               </ReactFlow>

frontend/src/css/dist/output.css

@@ -557,10 +557,6 @@ video {
   visibility: hidden;
 }
 
-.fixed {
-  position: fixed;
-}
-
 .absolute {
   position: absolute;
 }
@@ -638,14 +634,6 @@ video {
   z-index: 50;
 }
 
-.z-40 {
-  z-index: 40;
-}
-
-.z-30 {
-  z-index: 30;
-}
-
 .float-left {
   float: left;
 }
@@ -658,6 +646,14 @@ video {
   margin: 0px;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
 .mr-5 {
   margin-right: 1.25rem;
 }
@@ -670,14 +666,6 @@ video {
   margin-bottom: 0.5rem;
 }
 
-.mr-auto {
-  margin-right: auto;
-}
-
-.ml-auto {
-  margin-left: auto;
-}
-
 .-ml-\[5px\] {
   margin-left: -5px;
 }
@@ -706,12 +694,8 @@ video {
   margin-top: 0.25rem;
 }
 
-.mt-auto {
-  margin-top: auto;
-}
-
-.mb-auto {
-  margin-bottom: auto;
+.-mt-1 {
+  margin-top: -0.25rem;
 }
 
 .block {
@@ -738,6 +722,10 @@ video {
   height: 2.5rem;
 }
 
+.h-9 {
+  height: 2.25rem;
+}
+
 .h-\[20px\] {
   height: 20px;
 }
@@ -754,10 +742,6 @@ video {
   height: 100vh;
 }
 
-.h-9 {
-  height: 2.25rem;
-}
-
 .h-auto {
   height: auto;
 }
@@ -766,6 +750,10 @@ video {
   height: 600px;
 }
 
+.h-\[140px\] {
+  height: 140px;
+}
+
 .h-\[203\.3333px\] {
   height: 203.3333px;
 }
@@ -774,20 +762,28 @@ video {
   height: 41px;
 }
 
-.h-\[200px\] {
-  height: 200px;
+.h-8 {
+  height: 2rem;
 }
 
-.h-\[140px\] {
-  height: 140px;
+.h-11 {
+  height: 2.75rem;
+}
+
+.h-40 {
+  height: 10rem;
+}
+
+.h-60 {
+  height: 15rem;
 }
 
-.h-\[0px\] {
-  height: 0px;
+.w-10 {
+  width: 2.5rem;
 }
 
-.h-0 {
-  height: 0px;
+.w-9 {
+  width: 2.25rem;
 }
 
 .w-full {
@@ -806,14 +802,6 @@ video {
   width: 75%;
 }
 
-.w-10 {
-  width: 2.5rem;
-}
-
-.w-9 {
-  width: 2.25rem;
-}
-
 .w-32 {
   width: 8rem;
 }
@@ -846,12 +834,12 @@ video {
   width: 100vw;
 }
 
-.w-\[0px\] {
-  width: 0px;
+.w-8 {
+  width: 2rem;
 }
 
-.w-7 {
-  width: 1.75rem;
+.w-11 {
+  width: 2.75rem;
 }
 
 .max-w-full {
@@ -941,6 +929,10 @@ video {
   word-break: break-all;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -953,10 +945,6 @@ video {
   border-radius: 0.375rem;
 }
 
-.rounded-xl {
-  border-radius: 0.75rem;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
@@ -980,14 +968,14 @@ video {
   border-top-left-radius: 0.5rem;
 }
 
-.border {
-  border-width: 1px;
-}
-
 .border-2 {
   border-width: 2px;
 }
 
+.border {
+  border-width: 1px;
+}
+
 .border-y-2 {
   border-top-width: 2px;
   border-bottom-width: 2px;
@@ -1035,6 +1023,11 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1050,11 +1043,6 @@ video {
   background-color: rgb(212 212 212 / var(--tw-bg-opacity));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .bg-gray-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
@@ -1093,6 +1081,11 @@ 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));
 }
@@ -1396,16 +1389,12 @@ video {
   padding-top: 0.5rem;
 }
 
-.pb-0 {
-  padding-bottom: 0px;
-}
-
 .pt-10 {
   padding-top: 2.5rem;
 }
 
-.pt-9 {
-  padding-top: 2.25rem;
+.pb-0 {
+  padding-bottom: 0px;
 }
 
 .text-center {
@@ -1568,10 +1557,6 @@ video {
   transition-duration: 500ms;
 }
 
-.duration-100 {
-  transition-duration: 100ms;
-}
-
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -1598,6 +1583,10 @@ video {
   color: rgb(148 163 184 / var(--tw-text-opacity));
 }
 
+.hover\:h-52:hover {
+  height: 13rem;
+}
+
 @-webkit-keyframes pulse {
   50% {
     opacity: .5;
@@ -1630,6 +1619,16 @@ video {
   border-color: rgb(74 222 128 / var(--tw-border-opacity));
 }
 
+.hover\:border-white:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
+.hover\:border-black:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -1653,6 +1652,18 @@ video {
   opacity: 0.5;
 }
 
+.hover\:shadow-xl:hover {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:shadow-lg:hover {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:border-sky-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(14 165 233 / var(--tw-border-opacity));
@@ -1751,6 +1762,16 @@ video {
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -1775,6 +1796,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark .hover\:dark\:border-black:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .dark .dark\:hover\:bg-gray-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));