kewl schematics

frontend/pages/sch.js

@@ -1,71 +1,229 @@
 import React, { useRef } from "react";
-import { Box } from "@chakra-ui/react";
-import Schematic from "../src/components/schematic";
-import Xarrow, { Xwrapper, useXarrow } from "react-xarrows";
+import { Box, Button } from "@chakra-ui/react";
+import DragOnGrid from "../src/components/DragOnGrid";
+import Xarrow from "react-xarrows";
 
 const Sch = () => {
-  const updateXarrow = useXarrow();
   const ref1 = useRef(null);
   const ref2 = useRef(null);
   const ref3 = useRef(null);
   const ref4 = useRef(null);
+  const ref5 = useRef(null);
+  const ref6 = useRef(null);
+  const ref7 = useRef(null);
+  const ref8 = useRef(null);
   return (
-    <Box minH="100vh" w="100%" overflow="scroll">
-      <Xwrapper>
-        <Schematic ref={ref1} def={{ x: 0, y: 0 }} />
-        <Schematic ref={ref2} def={{ x: 60, y: 0 }} />
-        <Schematic ref={ref3} def={{ x: 120, y: 0 }} />
-        <Schematic ref={ref4} def={{ x: 180, y: 0 }} />
-        <Xarrow
-          // showXarrow={!!box0Ref.current && !!box1Ref.current}
-          dashness={{
-            strokeLen: 10,
-            nonStrokeLen: 15,
-            animation: 1 * 1,
-          }}
-          // animateDrawing={true}
-          color="#920050"
-          path="grid"
-          gridBreak="30px"
-          //   startAnchor={"top"}
-          showHead={false}
-          start={ref1} //can be react ref
-          end={ref2} //or an id
-        />
-        <Xarrow
-          // showXarrow={!!box0Ref.current && !!box1Ref.current}
-          dashness={{
-            strokeLen: 10,
-            nonStrokeLen: 15,
-            animation: 1 * 1,
-          }}
-          // animateDrawing={true}
-          color="#113350"
-          path="grid"
-          gridBreak="30px"
-          //   startAnchor={"auto"}
-          showHead={false}
-          start={ref2} //can be react ref
-          end={ref3} //or an id
-        />
-        <Xarrow
-          // showXarrow={!!box0Ref.current && !!box1Ref.current}
-          dashness={{
-            strokeLen: 10,
-            nonStrokeLen: 15,
-            animation: 1 * 1,
-          }}
-          // animateDrawing={true}
-          color="#92D0F0"
-          gridBreak="30px"
-          path="grid"
-          //   startAnchor={"top"}
-          showHead={false}
-          start={ref4} //can be react ref
-          end={ref1} //or an id
-        />
-      </Xwrapper>
-    </Box>
+    <>
+      <Box minH="100vh" w="100%" className="bgGrid">
+        <DragOnGrid ref={ref1} defaultPosition={{ x: 0, y: 0 }}>
+          <Button
+            m={0}
+            ref={ref1}
+            className="handle"
+            boxSize="60px"
+            bg="green.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            ERC20
+          </Button>
+        </DragOnGrid>
+        <DragOnGrid ref={ref2} defaultPosition={{ x: 120, y: 0 }}>
+          <Button
+            m={0}
+            ref={ref2}
+            className="handle"
+            boxSize="60px"
+            bg="blue.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            DEX
+          </Button>
+        </DragOnGrid>
+        <DragOnGrid ref={ref3} defaultPosition={{ x: 180, y: 0 }}>
+          <Button
+            m={0}
+            ref={ref3}
+            className="handle"
+            boxSize="60px"
+            bg="orange.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            NFT
+          </Button>
+        </DragOnGrid>
+        <DragOnGrid ref={ref4} defaultPosition={{ x: 240, y: 0 }}>
+          <Button
+            m={0}
+            ref={ref4}
+            className="handle"
+            boxSize="60px"
+            bg="red.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            MSTR
+          </Button>
+        </DragOnGrid>
+        <DragOnGrid ref={ref4} defaultPosition={{ x: 240, y: 0 }}>
+          <Button
+            m={0}
+            ref={ref5}
+            className="handle"
+            boxSize="60px"
+            bg="red.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            EIP1155
+          </Button>
+        </DragOnGrid>
+        <DragOnGrid ref={ref4} defaultPosition={{ x: 240, y: 0 }}>
+          <Button
+            m={0}
+            ref={ref6}
+            className="handle"
+            boxSize="60px"
+            bg="blue.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            ERC721
+          </Button>
+        </DragOnGrid>
+        <DragOnGrid ref={ref4} defaultPosition={{ x: 240, y: 0 }}>
+          <Button
+            m={0}
+            ref={ref7}
+            className="handle"
+            boxSize="60px"
+            bg="green.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            DAO
+          </Button>
+        </DragOnGrid>
+        <DragOnGrid ref={ref4} defaultPosition={{ x: 240, y: 0 }}>
+          <Button
+            m={0}
+            ref={ref8}
+            className="handle"
+            boxSize="60px"
+            bg="orange.900"
+            color="white"
+            textAlign="center"
+            zIndex={10}
+          >
+            ORACLE
+          </Button>
+        </DragOnGrid>
+      </Box>
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#920050"
+        path="grid"
+        gridBreak="30px"
+        //   startAnchor={"top"}
+        showHead={false}
+        start={ref3} //can be react ref
+        end={ref4} //or an id
+      />
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#113350"
+        path="grid"
+        gridBreak="30px"
+        showHead={false}
+        start={ref2} //can be react ref
+        end={ref4} //or an id
+      />
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#92D0F0"
+        gridBreak="30px"
+        path="grid"
+        //   startAnchor={"top"}
+        showHead={false}
+        start={ref1} //can be react ref
+        end={ref4} //or an id
+      />
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#92D0F0"
+        gridBreak="30px"
+        path="grid"
+        //   startAnchor={"top"}
+        showHead={false}
+        start={ref5} //can be react ref
+        end={ref4} //or an id
+      />
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#92D0F0"
+        gridBreak="30px"
+        path="grid"
+        //   startAnchor={"top"}
+        showHead={false}
+        start={ref6} //can be react ref
+        end={ref4} //or an id
+      />
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#92D0F0"
+        gridBreak="30px"
+        path="grid"
+        showHead={false}
+        start={ref7} //can be react ref
+        end={ref4} //or an id
+      />
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#92D0F0"
+        gridBreak="30px"
+        path="grid"
+        showHead={false}
+        start={ref8} //can be react ref
+        end={ref4} //or an id
+      />
+    </>
   );
 };
 

frontend/src/components/DragOnGrid.js

@@ -0,0 +1,31 @@
+import React from "react";
+import Draggable from "react-draggable";
+import { useXarrow } from "react-xarrows";
+const DragOnGrid = React.forwardRef((props, ref) => {
+  const updateXarrow = useXarrow();
+
+  const handleDrag = (e) => {
+    console.log(e);
+    setTimeout(() => {
+      updateXarrow();
+    }, 50);
+  };
+
+  return (
+    <Draggable
+      nodeRef={ref}
+      axis="both"
+      handle=".handle"
+      {...props}
+      position={null}
+      grid={[60, 60]}
+      scale={1}
+      onDrag={handleDrag}
+      onStop={updateXarrow}
+    >
+      {props.children}
+    </Draggable>
+  );
+});
+
+export default DragOnGrid;

frontend/src/components/Schematic.js

@@ -1,49 +0,0 @@
-import React from "react";
-import Draggable from "react-draggable";
-import { Box, Container } from "@chakra-ui/react";
-import { useXarrow } from "react-xarrows";
-const Schematic = React.forwardRef(({ def }, ref) => {
-  const updateXarrow = useXarrow();
-  const eventLogger = (e, data) => {
-    console.log("Event: ", e);
-    console.log("Data: ", data);
-  };
-
-  const handleStart = (e) => {
-    console.log(e);
-  };
-
-  const handleDrag = (e) => {
-    console.log(e);
-  };
-
-  const handleStop = (e) => {
-    console.log(e);
-  };
-
-  console.log("def", def);
-
-  return (
-    <Draggable
-      nodeRef={ref}
-      axis="both"
-      handle=".handle"
-      defaultPosition={{ ...def }}
-      position={null}
-      grid={[60, 60]}
-      scale={1}
-      onStart={updateXarrow}
-      onDrag={updateXarrow}
-      onStop={updateXarrow}
-    >
-      <Box ref={ref} className="handle" boxSize="60px" bg="red.900">
-        hmm?
-      </Box>
-    </Draggable>
-    // <Box ref={ref} className="handle" boxSize="60px" bg="red.900">
-    //   hmm?
-    // </Box>
-  );
-});
-
-export default Schematic;

frontend/src/components/Scrollable.js

@@ -2,10 +2,12 @@ import { Flex, Box } from "@chakra-ui/react";
 import React, { useEffect, useRef, useState } from "react";
 import { useRouter } from "../core/hooks";
 import mixpanel from "mixpanel-browser";
+import { useXarrow, Xwrapper } from "react-xarrows";
 const Scrollable = (props) => {
   const scrollerRef = useRef();
   const router = useRouter();
   const [path, setPath] = useState();
+  const updateXarrow = useXarrow();
 
   const [scrollDepth, setScrollDepth] = useState(0);
 
@@ -17,6 +19,7 @@ const Scrollable = (props) => {
   };
 
   const handleScroll = (e) => {
+    updateXarrow();
     const currentScroll = Math.ceil(getScrollPrecent(e) / 10);
     if (currentScroll > scrollDepth) {
       setScrollDepth(currentScroll);
@@ -48,15 +51,17 @@ const Scrollable = (props) => {
       overflowY="hidden"
       maxH="100%"
     >
-      <Box
-        className="Scrollable"
-        direction="column"
-        ref={scrollerRef}
-        overflowY="scroll"
-        onScroll={(e) => handleScroll(e)}
-      >
-        {props.children}
-      </Box>
+      <Xwrapper>
+        <Box
+          className="Scrollable"
+          direction="column"
+          ref={scrollerRef}
+          overflowY="scroll"
+          onScroll={(e) => handleScroll(e)}
+        >
+          {props.children}
+        </Box>
+      </Xwrapper>
     </Flex>
   );
 };

frontend/styles/styles.css

@@ -198,3 +198,12 @@ code {
   transform: none;
   visibility: visible;
 }
+
+.bgGrid {
+  background-color: white;
+  background-size: 10px 10px, 60px 60px;
+  background-image: linear-gradient(to bottom, transparent 6px, white 6px),
+    linear-gradient(to right, #444 1px, transparent 1px),
+    linear-gradient(to right, transparent 6px, white 6px),
+    linear-gradient(to bottom, #444 1px, transparent 1px);
+}