Added token label to proxy token
This commit is contained in:
parent
2595c3be4b
commit
a1e85e490b
@ -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("");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -125,16 +128,21 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) {
|
|||||||
bottom: 0,
|
bottom: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
}}
|
}}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
sx={{ position: "absolute", display: "flex", flexDirection: "column" }}
|
||||||
|
ref={proxyRef}
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src={imageSource}
|
src={imageSource}
|
||||||
sx={{
|
sx={{
|
||||||
touchAction: "none",
|
touchAction: "none",
|
||||||
userSelect: "none",
|
userSelect: "none",
|
||||||
position: "absolute",
|
width: "100%",
|
||||||
}}
|
}}
|
||||||
ref={imageRef}
|
|
||||||
/>
|
/>
|
||||||
|
{label && <TokenLabel label={label} />}
|
||||||
|
</Box>
|
||||||
</Box>,
|
</Box>,
|
||||||
proxyContainer
|
proxyContainer
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user