kopia lustrzana https://github.com/bugout-dev/moonstream
kinda works with pictures
Tim Pechersky
rodzic
7e2ffd8499
commit
b75634d00c
|
|
@ -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 })}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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="green.900"
|
||||
color="white"
|
||||
textAlign="center"
|
||||
bg="transparent"
|
||||
zIndex={10}
|
||||
>
|
||||
MSTR
|
||||
</Button>
|
||||
<Image
|
||||
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"
|
||||
color="white"
|
||||
textAlign="center"
|
||||
bg="transparent"
|
||||
zIndex={10}
|
||||
bgColor="red.900"
|
||||
>
|
||||
DEX
|
||||
</Button>
|
||||
<Image
|
||||
m={0}
|
||||
ref={ref2}
|
||||
p={0}
|
||||
pointerEvents="none"
|
||||
borderRadius="sm"
|
||||
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}
|
||||
src={`https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/NFT.png`}
|
||||
></Image>
|
||||
</Box>
|
||||
</DragOnGrid>
|
||||
<DragOnGrid
|
||||
ref={ref3}
|
||||
gridStep={gridCellSize}
|
||||
defaultPosition={{ x: 3, y: 4 }}
|
||||
defaultPosition={{ x: 8, y: -1 }}
|
||||
>
|
||||
<Button
|
||||
<Box
|
||||
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="orange.900"
|
||||
color="white"
|
||||
textAlign="center"
|
||||
bg="transparent"
|
||||
zIndex={10}
|
||||
bgColor="red.900"
|
||||
>
|
||||
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`}
|
||||
fontSize={(gridCellSize / 4).toString() + `px`}
|
||||
boxSize={`${gridCellSize.toString()}` + "px"}
|
||||
bg="red.900"
|
||||
color="white"
|
||||
textAlign="center"
|
||||
zIndex={10}
|
||||
>
|
||||
ERC20
|
||||
</Button>
|
||||
<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"
|
||||
color="white"
|
||||
textAlign="center"
|
||||
bg="transparent"
|
||||
zIndex={10}
|
||||
bgColor="red.900"
|
||||
>
|
||||
EIP1155
|
||||
</Button>
|
||||
</DragOnGrid>
|
||||
<DragOnGrid
|
||||
ref={ref4}
|
||||
gridStep={gridCellSize}
|
||||
defaultPosition={{ x: 3, y: 3 }}
|
||||
>
|
||||
<Button
|
||||
m={0}
|
||||
ref={ref6}
|
||||
p={0}
|
||||
borderRadius="sm"
|
||||
className="handle"
|
||||
minW={`${gridCellSize.toString}` + `px`}
|
||||
fontSize={(gridCellSize / 4).toString() + `px`}
|
||||
boxSize={`${gridCellSize.toString()}` + "px"}
|
||||
bg="blue.900"
|
||||
color="white"
|
||||
textAlign="center"
|
||||
zIndex={10}
|
||||
>
|
||||
ERC721
|
||||
</Button>
|
||||
</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>
|
||||
<Image
|
||||
m={0}
|
||||
ref={ref5}
|
||||
p={0}
|
||||
pointerEvents="none"
|
||||
borderRadius="sm"
|
||||
minW={`${gridCellSize.toString}` + `px`}
|
||||
minH={`${gridCellSize.toString}` + `px`}
|
||||
fontSize={(gridCellSize / 4).toString() + `px`}
|
||||
boxSize={`${gridCellSize.toString()}` + "px"}
|
||||
bg="gray.900"
|
||||
color="white"
|
||||
textAlign="center"
|
||||
// zIndex={10}
|
||||
src={`https://s3.amazonaws.com/static.simiotics.com/moonstream/assets/crypto+traders.png`}
|
||||
></Image>
|
||||
</Box>
|
||||
</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
|
||||
end={ref4} //or an id
|
||||
start={ref1} //can be react ref
|
||||
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
|
||||
end={ref4} //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
|
||||
start={ref1} //can be react ref
|
||||
end={ref5} //or an id
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue