kinda works with pictures

frontend/pages/index.js

@@ -780,7 +780,6 @@ const Homepage = () => {
                   </Flex>
                   <Button
                     placeSelf="center"
-                    isExternal
                     w={["100%", "100%", "fit-content", null]}
                     maxW={["250px", null, "fit-content"]}
                     onClick={() => toggleModal({ type: MODAL_TYPES.SIGNUP })}

frontend/src/components/DragOnGrid.js

@@ -26,8 +26,11 @@ const DragOnGrid = React.forwardRef((props, ref) => {
     setPosition({ x: position.x + eData.deltaX, y: position.y + eData.deltaY });
   };
 
+  console.log("position:", position);
+
   return (
     <Draggable
+      // offsetParent={}
       nodeRef={ref}
       axis="both"
       handle=".handle"
@@ -36,6 +39,7 @@ const DragOnGrid = React.forwardRef((props, ref) => {
       scale={1}
       onDrag={handleDrag}
     >
+      {/* <div ref={ref}>Example Target</div> */}
       {props.children}
     </Draggable>
   );

frontend/src/components/SchematicPlayground.js

@@ -1,9 +1,9 @@
 import React, { useRef } from "react";
-import { Box, Button, useBreakpointValue } from "@chakra-ui/react";
+import { Box, useBreakpointValue, Image } from "@chakra-ui/react";
 import DragOnGrid from "./DragOnGrid";
 import Xarrow from "react-xarrows";
-
 const SchematicPlayground = () => {
+  // create an instance of the engine with all the defaults
   const gridCellSize = useBreakpointValue({
     base: 24,
     sm: 32,
@@ -17,11 +17,9 @@ const SchematicPlayground = () => {
   const ref3 = useRef(null);
   const ref4 = useRef(null);
   const ref5 = useRef(null);
-  const ref6 = useRef(null);
-  const ref7 = useRef(null);
-  const ref8 = useRef(null);
   if (!gridCellSize) return "";
   return (
+    // <CanvasWidget engine={engine} />
     <>
       <Box
         h={`${(gridCellSize * 5 + 1).toString()}` + `px`}
@@ -41,36 +39,50 @@ const SchematicPlayground = () => {
           linear-gradient(to bottom, #dee3ea 1px, transparent 1px)`}
         maxW={`${(gridCellSize * 11 + 1).toString()}` + `px`}
         placeSelf="center"
+        display="block"
       >
         <DragOnGrid
-          ref={ref4}
+          ref={ref1}
           gridStep={gridCellSize}
           defaultPosition={{ x: 5, y: 2 }}
         >
-          <Button
+          <Box
             m={0}
+            ref={ref1}
             p={0}
             borderRadius="sm"
-            ref={ref4}
             className="handle"
             minW={`${gridCellSize.toString}` + `px`}
+            minH={`${gridCellSize.toString}` + `px`}
             fontSize={(gridCellSize / 4).toString() + `px`}
             boxSize={`${gridCellSize.toString()}` + "px"}
-            borderStyle="inset"
+            bg="transparent"
-            bg="green.900"
-            color="white"
-            textAlign="center"
             zIndex={10}
           >
-            MSTR
+            <Image
-          </Button>
+              m={0}
+              ref={ref1}
+              p={0}
+              pointerEvents="none"
+              borderRadius="sm"
+              minW={`${gridCellSize.toString}` + `px`}
+              minH={`${gridCellSize.toString}` + `px`}
+              fontSize={(gridCellSize / 4).toString() + `px`}
+              boxSize={`${gridCellSize.toString()}` + "px"}
+              bg="blue.900"
+              color="white"
+              textAlign="center"
+              // zIndex={10}
+              src={`https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/Logo.png`}
+            ></Image>
+          </Box>
         </DragOnGrid>
         <DragOnGrid
           ref={ref2}
           gridStep={gridCellSize}
-          defaultPosition={{ x: 4, y: 0 }}
+          defaultPosition={{ x: 0, y: -1 }}
         >
-          <Button
+          <Box
             m={0}
             ref={ref2}
             p={0}
@@ -80,161 +92,140 @@ const SchematicPlayground = () => {
             minH={`${gridCellSize.toString}` + `px`}
             fontSize={(gridCellSize / 4).toString() + `px`}
             boxSize={`${gridCellSize.toString()}` + "px"}
-            bg="blue.900"
+            bg="transparent"
-            color="white"
-            textAlign="center"
             zIndex={10}
+            bgColor="red.900"
           >
-            DEX
+            <Image
-          </Button>
-        </DragOnGrid>
-        <DragOnGrid
-          ref={ref3}
-          gridStep={gridCellSize}
-          defaultPosition={{ x: 3, y: 4 }}
-        >
-          <Button
               m={0}
-            ref={ref3}
+              ref={ref2}
               p={0}
+              pointerEvents="none"
               borderRadius="sm"
-            className="handle"
-            minW={`${gridCellSize.toString}` + `px`}
-            fontSize={(gridCellSize / 4).toString() + `px`}
-            boxSize={`${gridCellSize.toString()}` + "px"}
-            bg="orange.900"
-            color="white"
-            textAlign="center"
-            zIndex={10}
-          >
-            NFT
-          </Button>
-        </DragOnGrid>
-        <DragOnGrid
-          ref={ref1}
-          gridStep={gridCellSize}
-          defaultPosition={{ x: -2, y: 1 }}
-        >
-          <Button
-            m={0}
-            ref={ref1}
-            p={0}
-            borderRadius="sm"
-            className="handle"
               minW={`${gridCellSize.toString}` + `px`}
+              minH={`${gridCellSize.toString}` + `px`}
               fontSize={(gridCellSize / 4).toString() + `px`}
               boxSize={`${gridCellSize.toString()}` + "px"}
               bg="red.900"
               color="white"
               textAlign="center"
-            zIndex={10}
+              // zIndex={10}
+              src={`https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/NFT.png`}
+            ></Image>
+          </Box>
+        </DragOnGrid>
+        <DragOnGrid
+          ref={ref3}
+          gridStep={gridCellSize}
+          defaultPosition={{ x: 8, y: -1 }}
         >
-            ERC20
+          <Box
-          </Button>
+            m={0}
+            ref={ref3}
+            p={0}
+            borderRadius="sm"
+            className="handle"
+            minW={`${gridCellSize.toString}` + `px`}
+            minH={`${gridCellSize.toString}` + `px`}
+            fontSize={(gridCellSize / 4).toString() + `px`}
+            boxSize={`${gridCellSize.toString()}` + "px"}
+            bg="transparent"
+            zIndex={10}
+            bgColor="red.900"
+          >
+            <Image
+              m={0}
+              ref={ref3}
+              p={0}
+              pointerEvents="none"
+              borderRadius="sm"
+              minW={`${gridCellSize.toString}` + `px`}
+              minH={`${gridCellSize.toString}` + `px`}
+              fontSize={(gridCellSize / 4).toString() + `px`}
+              boxSize={`${gridCellSize.toString()}` + "px"}
+              bg="orange.900"
+              color="white"
+              textAlign="center"
+              // zIndex={10}
+              src={`https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/DAO .png`}
+            ></Image>
+          </Box>
         </DragOnGrid>
         <DragOnGrid
           ref={ref4}
           gridStep={gridCellSize}
-          defaultPosition={{ x: -3, y: 4 }}
+          defaultPosition={{ x: 3, y: -1 }}
         >
-          <Button
+          <Box
+            m={0}
+            ref={ref4}
+            p={0}
+            borderRadius="sm"
+            className="handle"
+            minW={`${gridCellSize.toString}` + `px`}
+            minH={`${gridCellSize.toString}` + `px`}
+            fontSize={(gridCellSize / 4).toString() + `px`}
+            boxSize={`${gridCellSize.toString()}` + "px"}
+            bg="transparent"
+            zIndex={10}
+            bgColor="red.900"
+          >
+            <Image
+              m={0}
+              ref={ref4}
+              p={0}
+              pointerEvents="none"
+              borderRadius="sm"
+              minW={`${gridCellSize.toString}` + `px`}
+              minH={`${gridCellSize.toString}` + `px`}
+              fontSize={(gridCellSize / 4).toString() + `px`}
+              boxSize={`${gridCellSize.toString()}` + "px"}
+              bg="green.900"
+              color="white"
+              textAlign="center"
+              // zIndex={10}
+              src={`https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/ERC 20.png`}
+            ></Image>
+          </Box>
+        </DragOnGrid>
+        <DragOnGrid
+          ref={ref4}
+          gridStep={gridCellSize}
+          defaultPosition={{ x: 9, y: 0 }}
+        >
+          <Box
             m={0}
             ref={ref5}
             p={0}
             borderRadius="sm"
             className="handle"
             minW={`${gridCellSize.toString}` + `px`}
+            minH={`${gridCellSize.toString}` + `px`}
             fontSize={(gridCellSize / 4).toString() + `px`}
             boxSize={`${gridCellSize.toString()}` + "px"}
-            bg="red.900"
+            bg="transparent"
-            color="white"
-            textAlign="center"
             zIndex={10}
+            bgColor="red.900"
           >
-            EIP1155
+            <Image
-          </Button>
-        </DragOnGrid>
-        <DragOnGrid
-          ref={ref4}
-          gridStep={gridCellSize}
-          defaultPosition={{ x: 3, y: 3 }}
-        >
-          <Button
               m={0}
-            ref={ref6}
+              ref={ref5}
               p={0}
+              pointerEvents="none"
               borderRadius="sm"
-            className="handle"
               minW={`${gridCellSize.toString}` + `px`}
+              minH={`${gridCellSize.toString}` + `px`}
               fontSize={(gridCellSize / 4).toString() + `px`}
               boxSize={`${gridCellSize.toString()}` + "px"}
-            bg="blue.900"
+              bg="gray.900"
               color="white"
               textAlign="center"
-            zIndex={10}
+              // zIndex={10}
-          >
+              src={`https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/crypto+traders.png`}
-            ERC721
+            ></Image>
-          </Button>
+          </Box>
-        </DragOnGrid>
-        <DragOnGrid
-          ref={ref4}
-          gridStep={gridCellSize}
-          defaultPosition={{ x: 4, y: 4 }}
-        >
-          <Button
-            m={0}
-            ref={ref7}
-            p={0}
-            borderRadius="sm"
-            className="handle"
-            minW={`${gridCellSize.toString}` + `px`}
-            fontSize={(gridCellSize / 4).toString() + `px`}
-            boxSize={`${gridCellSize.toString()}` + "px"}
-            bg="green.900"
-            color="white"
-            textAlign="center"
-            zIndex={10}
-          >
-            DAO
-          </Button>
-        </DragOnGrid>
-        <DragOnGrid
-          ref={ref4}
-          gridStep={gridCellSize}
-          defaultPosition={{ x: 2, y: 0 }}
-        >
-          <Button
-            m={0}
-            ref={ref8}
-            p={0}
-            borderRadius="sm"
-            className="handle"
-            minW={`${gridCellSize.toString}` + `px`}
-            fontSize={(gridCellSize / 4).toString() + `px`}
-            boxSize={`${gridCellSize.toString()}` + "px"}
-            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={(gridCellSize * 0.5).toString() + "px"}
-        //   startAnchor={"top"}
-        showHead={false}
-        start={ref3} //can be react ref
-        end={ref4} //or an id
-      />
       <Xarrow
         dashness={{
           strokeLen: 10,
@@ -245,8 +236,21 @@ const SchematicPlayground = () => {
         path="grid"
         gridBreak={(gridCellSize * 0.5).toString() + "px"}
         showHead={false}
-        start={ref2} //can be react ref
+        start={ref1} //can be react ref
-        end={ref4} //or an id
+        end={ref2} //or an id
+      />
+      <Xarrow
+        dashness={{
+          strokeLen: 10,
+          nonStrokeLen: 15,
+          animation: 1 * 1,
+        }}
+        color="#92D0F0"
+        gridBreak={(gridCellSize * 0.5).toString() + "px"}
+        path="grid"
+        showHead={false}
+        start={ref1} //can be react ref
+        end={ref3} //or an id
       />
       <Xarrow
         dashness={{
@@ -273,48 +277,8 @@ const SchematicPlayground = () => {
         path="grid"
         //   startAnchor={"top"}
         showHead={false}
-        start={ref5} //can be react ref
+        start={ref1} //can be react ref
-        end={ref4} //or an id
+        end={ref5} //or an id
-      />
-      <Xarrow
-        dashness={{
-          strokeLen: 10,
-          nonStrokeLen: 15,
-          animation: 1 * 1,
-        }}
-        color="#92D0F0"
-        gridBreak={(gridCellSize * 0.5).toString() + "px"}
-        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={(gridCellSize * 0.5).toString() + "px"}
-        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={(gridCellSize * 0.5).toString() + "px"}
-        path="grid"
-        showHead={false}
-        start={ref8} //can be react ref
-        end={ref4} //or an id
       />
     </>
   );