Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added token label to proxy token

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-04-13 11:22:10 +10:00
parent 2595c3be4b
commit a1e85e490b
1 changed files with 23 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/ProxyToken.js
View File

@ -4,12 +4,14 @@ import { Image, Box } from "theme-ui";
import interact from "interactjs"; import interact from "interactjs";
import usePortal from "../helpers/usePortal"; import usePortal from "../helpers/usePortal";
import TokenLabel from "./TokenLabel";
function ProxyToken({ tokenClassName, onProxyDragEnd }) { function ProxyToken({ tokenClassName, onProxyDragEnd }) {
const proxyContainer = usePortal("root"); const proxyContainer = usePortal("root");
const [imageSource, setImageSource] = useState(""); const [imageSource, setImageSource] = useState("");
const imageRef = useRef(); const [label, setLabel] = useState("");
const proxyRef = useRef();
const proxyOnMap = useRef(false); const proxyOnMap = useRef(false);
@ -19,10 +21,11 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
start: (event) => { start: (event) => {
let target = event.target; let target = event.target;
// Hide the token and copy it's image to the proxy // Hide the token and copy it's image to the proxy
target.style.opacity = "0.25"; target.parentElement.style.opacity = "0.25";
setImageSource(target.src); setImageSource(target.src);
setLabel(target.dataset.label || "");
let proxy = imageRef.current; let proxy = proxyRef.current;
if (proxy) { if (proxy) {
// Find and set the initial offset of the token to the proxy // Find and set the initial offset of the token to the proxy
const proxyRect = proxy.getBoundingClientRect(); const proxyRect = proxy.getBoundingClientRect();
@ -40,7 +43,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
}, },
move: (event) => { move: (event) => {
let proxy = imageRef.current; let proxy = proxyRef.current;
// Move the proxy based off of the movment of the token // Move the proxy based off of the movment of the token
if (proxy) { if (proxy) {
// keep the dragged position in the data-x/data-y attributes // keep the dragged position in the data-x/data-y attributes
@ -69,7 +72,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
end: (event) => { end: (event) => {
let target = event.target; let target = event.target;
let proxy = imageRef.current; let proxy = proxyRef.current;
if (proxy) { if (proxy) {
if (onProxyDragEnd) { if (onProxyDragEnd) {
// TODO: look at cleaning this up with a props instead of // TODO: look at cleaning this up with a props instead of
@ -103,7 +106,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
} }
// Show the token // Show the token
target.style.opacity = "1"; target.parentElement.style.opacity = "1";
setImageSource(""); setImageSource("");
}, },
}, },
@ -126,15 +129,20 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
right: 0, right: 0,
}} }}
> >
<Image <Box
src={imageSource} sx={{ position: "absolute", display: "flex", flexDirection: "column" }}
sx={{ ref={proxyRef}
touchAction: "none", >
userSelect: "none", <Image
position: "absolute", src={imageSource}
}} sx={{
ref={imageRef} touchAction: "none",
/> userSelect: "none",
width: "100%",
}}
/>
{label && <TokenLabel label={label} />}
</Box>
</Box>, </Box>,
proxyContainer proxyContainer
); );