(
+
+ {content}
+
+ )}
+ overlayElement={(props, content) => (
+ {
+ // Prevent drag event from triggering with a modal open
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ {...props}
+ >
+ {content}
+
+ )}
{...props}
>
{children}
diff --git a/src/components/NumberInput.js b/src/components/NumberInput.js
deleted file mode 100644
index e6985f8..0000000
--- a/src/components/NumberInput.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react";
-import { Box, Flex, IconButton, Text } from "theme-ui";
-
-function NumberInput({ value, onChange, title, min, max }) {
- return (
-
-
- {title}
-
-
- value > min && onChange(value - 1)}
- >
-
-
-
- {value}
-
- value < max && onChange(value + 1)}
- >
-
-
-
-
- );
-}
-
-NumberInput.defaultProps = {
- value: 1,
- onChange: () => {},
- title: "Number",
- min: 0,
- max: 10,
-};
-
-export default NumberInput;
diff --git a/src/components/Select.js b/src/components/Select.js
index 413df18..d39c797 100644
--- a/src/components/Select.js
+++ b/src/components/Select.js
@@ -24,7 +24,7 @@ function Select({ creatable, ...props }) {
}),
control: (provided, state) => ({
...provided,
- backgroundColor: theme.colors.background,
+ backgroundColor: "transparent",
color: theme.colors.text,
borderColor: theme.colors.text,
opacity: state.isDisabled ? 0.5 : 1,
@@ -53,6 +53,10 @@ function Select({ creatable, ...props }) {
color: theme.colors.text,
opacity: state.isDisabled ? 0.5 : 1,
}),
+ container: (provided) => ({
+ ...provided,
+ margin: "4px 0",
+ }),
}}
theme={(t) => ({
...t,
@@ -63,6 +67,7 @@ function Select({ creatable, ...props }) {
primary25: theme.colors.highlight,
},
})}
+ captureMenuScroll={false}
{...props}
/>
);
diff --git a/src/components/TextareaAutoSize.css b/src/components/TextareaAutoSize.css
new file mode 100644
index 0000000..4868f44
--- /dev/null
+++ b/src/components/TextareaAutoSize.css
@@ -0,0 +1,22 @@
+.textarea-auto-size {
+ box-sizing: border-box;
+ margin: 0;
+ min-width: 0;
+ display: block;
+ width: 100%;
+ appearance: none;
+ font-size: inherit;
+ line-height: inherit;
+ border-radius: 4px;
+ color: inherit;
+ background-color: transparent;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ "Helvetica Neue", sans-serif;
+ padding: 4px;
+ border: none;
+ resize: none;
+}
+
+.textarea-auto-size:focus {
+ outline: none;
+}
diff --git a/src/components/TextareaAutoSize.js b/src/components/TextareaAutoSize.js
new file mode 100644
index 0000000..53e58aa
--- /dev/null
+++ b/src/components/TextareaAutoSize.js
@@ -0,0 +1,8 @@
+import TextareaAutosize from "react-textarea-autosize";
+import "./TextareaAutoSize.css";
+
+function StyledTextareaAutoSize(props) {
+ return ;
+}
+
+export default StyledTextareaAutoSize;
diff --git a/src/components/UpgradingLoadingOverlay.js b/src/components/UpgradingLoadingOverlay.js
new file mode 100644
index 0000000..c284cbb
--- /dev/null
+++ b/src/components/UpgradingLoadingOverlay.js
@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from "react";
+import { Text } from "theme-ui";
+
+import LoadingOverlay from "./LoadingOverlay";
+
+import { shuffle } from "../helpers/shared";
+
+const facts = [
+ "Owls can rotate their necks 270 degrees",
+ "Not all owls hoot",
+ "Owl flight is almost completely silent",
+ "Owls are used to represent the Goddess Athena in Greek mythology",
+ "Owls have the best night vision of any animal",
+ "Bears can run up to 40 mi (~64 km) per hour ",
+ "A hibernating bear’s heart beats at 8 bpm",
+ "Bears can see in colour",
+ "Koala bears are not bears",
+ "A polar bear can swim up to 100 mi (~161 km) without resting",
+ "A group of bears is called a sleuth or sloth",
+ "Not all bears hibernate",
+];
+
+function UpgradingLoadingOverlay() {
+ const [subText, setSubText] = useState();
+
+ useEffect(() => {
+ let index = 0;
+ let randomFacts = shuffle(facts);
+
+ function updateFact() {
+ setSubText(randomFacts[index % (randomFacts.length - 1)]);
+ index += 1;
+ }
+
+ // Show first fact after 10 seconds then every 20 seconds after that
+ let interval;
+ let timeout = setTimeout(() => {
+ updateFact();
+ interval = setInterval(() => {
+ updateFact();
+ }, 20 * 1000);
+ }, 10 * 1000);
+
+ return () => {
+ clearTimeout(timeout);
+ if (interval) {
+ clearInterval(interval);
+ }
+ };
+ }, []);
+
+ return (
+
+
+ Database upgrading, please wait...
+
+ {subText && (
+ <>
+
+ We're still working on the upgrade. In the meantime, did you know?
+
+
+ {subText}
+
+
+ )}
+
+ );
+}
+
+export default UpgradingLoadingOverlay;
diff --git a/src/components/dice/DiceTile.js b/src/components/dice/DiceTile.js
index 101e390..b9e1eb1 100644
--- a/src/components/dice/DiceTile.js
+++ b/src/components/dice/DiceTile.js
@@ -1,17 +1,20 @@
import React from "react";
+import { Image } from "theme-ui";
-import Tile from "../Tile";
+import Tile from "../tile/Tile";
-function DiceTile({ dice, isSelected, onDiceSelect, onDone, size }) {
+function DiceTile({ dice, isSelected, onDiceSelect, onDone }) {
return (
- onDiceSelect(dice)}
- onDoubleClick={() => onDone(dice)}
- size={size}
- />
+
+ onDiceSelect(dice)}
+ onDoubleClick={() => onDone(dice)}
+ >
+
+
+
);
}
diff --git a/src/components/dice/DiceTiles.js b/src/components/dice/DiceTiles.js
index 86ef58a..671848b 100644
--- a/src/components/dice/DiceTiles.js
+++ b/src/components/dice/DiceTiles.js
@@ -1,5 +1,5 @@
import React from "react";
-import { Flex } from "theme-ui";
+import { Grid } from "theme-ui";
import SimpleBar from "simplebar-react";
import DiceTile from "./DiceTile";
@@ -10,19 +10,17 @@ function DiceTiles({ dice, onDiceSelect, selectedDice, onDone }) {
const layout = useResponsiveLayout();
return (
-
-
+
{dice.map((dice) => (
))}
-
+
);
}
diff --git a/src/components/drag/Draggable.js b/src/components/drag/Draggable.js
new file mode 100644
index 0000000..e138e94
--- /dev/null
+++ b/src/components/drag/Draggable.js
@@ -0,0 +1,23 @@
+import React from "react";
+import { useDraggable } from "@dnd-kit/core";
+
+function Draggable({ id, children, data }) {
+ const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+ id,
+ data,
+ });
+
+ const style = {
+ cursor: isDragging ? "grabbing" : "grab",
+ touchAction: "none",
+ opacity: isDragging ? 0.5 : undefined,
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+export default Draggable;
diff --git a/src/components/drag/Droppable.js b/src/components/drag/Droppable.js
new file mode 100644
index 0000000..d11d00f
--- /dev/null
+++ b/src/components/drag/Droppable.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { useDroppable } from "@dnd-kit/core";
+
+function Droppable({ id, children, disabled, ...props }) {
+ const { setNodeRef } = useDroppable({ id, disabled });
+
+ return (
+
+ {children}
+
+ );
+}
+
+Droppable.defaultProps = {
+ disabled: false,
+};
+
+export default Droppable;
diff --git a/src/components/image/GlobalImageDrop.js b/src/components/image/GlobalImageDrop.js
new file mode 100644
index 0000000..f36ad2f
--- /dev/null
+++ b/src/components/image/GlobalImageDrop.js
@@ -0,0 +1,248 @@
+import React, { useState, useRef } from "react";
+import { Box, Flex, Text } from "theme-ui";
+import { useToasts } from "react-toast-notifications";
+
+import LoadingOverlay from "../LoadingOverlay";
+
+import ConfirmModal from "../../modals/ConfirmModal";
+
+import { createMapFromFile } from "../../helpers/map";
+import { createTokenFromFile } from "../../helpers/token";
+import {
+ createTokenState,
+ clientPositionToMapPosition,
+} from "../../helpers/token";
+import Vector2 from "../../helpers/Vector2";
+
+import { useUserId } from "../../contexts/UserIdContext";
+import { useMapData } from "../../contexts/MapDataContext";
+import { useTokenData } from "../../contexts/TokenDataContext";
+import { useAssets } from "../../contexts/AssetsContext";
+import { useMapStage } from "../../contexts/MapStageContext";
+
+import useImageDrop from "../../hooks/useImageDrop";
+
+function GlobalImageDrop({ children, onMapChange, onMapTokensStateCreate }) {
+ const { addToast } = useToasts();
+
+ const userId = useUserId();
+ const { addMap, getMapState } = useMapData();
+ const { addToken } = useTokenData();
+ const { addAssets } = useAssets();
+
+ const mapStageRef = useMapStage();
+
+ const [isLargeImageWarningModalOpen, setShowLargeImageWarning] = useState(
+ false
+ );
+ const [isLoading, setIsLoading] = useState(false);
+
+ const droppedImagesRef = useRef();
+ const dropPositionRef = useRef();
+ // maps or tokens
+ const [droppingType, setDroppingType] = useState("maps");
+
+ async function handleDrop(files, dropPosition) {
+ if (navigator.storage) {
+ // Attempt to enable persistant storage
+ await navigator.storage.persist();
+ }
+
+ dropPositionRef.current = dropPosition;
+
+ droppedImagesRef.current = [];
+ for (let file of files) {
+ if (file.size > 5e7) {
+ addToast(`Unable to import image ${file.name} as it is over 50MB`);
+ } else {
+ droppedImagesRef.current.push(file);
+ }
+ }
+
+ // Any file greater than 20MB
+ if (droppedImagesRef.current.some((file) => file.size > 2e7)) {
+ setShowLargeImageWarning(true);
+ return;
+ }
+
+ if (droppingType === "maps") {
+ await handleMaps();
+ } else {
+ await handleTokens();
+ }
+ }
+
+ function handleLargeImageWarningCancel() {
+ droppedImagesRef.current = undefined;
+ setShowLargeImageWarning(false);
+ }
+
+ async function handleLargeImageWarningConfirm() {
+ setShowLargeImageWarning(false);
+ if (droppingType === "maps") {
+ await handleMaps();
+ } else {
+ await handleTokens();
+ }
+ }
+
+ async function handleMaps() {
+ setIsLoading(true);
+ let maps = [];
+ for (let file of droppedImagesRef.current) {
+ const { map, assets } = await createMapFromFile(file, userId);
+ await addMap(map);
+ await addAssets(assets);
+ maps.push(map);
+ }
+
+ // Change map if only 1 dropped
+ if (maps.length === 1) {
+ const mapState = await getMapState(maps[0].id);
+ onMapChange(maps[0], mapState);
+ }
+
+ setIsLoading(false);
+ droppedImagesRef.current = undefined;
+ }
+
+ async function handleTokens() {
+ setIsLoading(true);
+ // Keep track of tokens so we can add them to the map
+ let tokens = [];
+ for (let file of droppedImagesRef.current) {
+ const { token, assets } = await createTokenFromFile(file, userId);
+ await addToken(token);
+ await addAssets(assets);
+ tokens.push(token);
+ }
+ setIsLoading(false);
+ droppedImagesRef.current = undefined;
+
+ const dropPosition = dropPositionRef.current;
+ const mapStage = mapStageRef.current;
+ if (mapStage && dropPosition) {
+ const mapPosition = clientPositionToMapPosition(mapStage, dropPosition);
+ if (mapPosition) {
+ let tokenStates = [];
+ let offset = new Vector2(0, 0);
+ for (let token of tokens) {
+ if (token) {
+ tokenStates.push(
+ createTokenState(token, Vector2.add(mapPosition, offset), userId)
+ );
+ offset = Vector2.add(offset, 0.01);
+ }
+ }
+ if (tokenStates.length > 0) {
+ onMapTokensStateCreate(tokenStates);
+ }
+ }
+ }
+ }
+
+ function handleMapsOver() {
+ setDroppingType("maps");
+ }
+
+ function handleTokensOver() {
+ setDroppingType("tokens");
+ }
+
+ const { dragging, containerListeners, overlayListeners } = useImageDrop(
+ handleDrop
+ );
+
+ return (
+
+ {children}
+ {dragging && (
+
+
+
+
+ Drop as map
+
+
+
+
+
+ Drop as token
+
+
+
+ )}
+
+ {isLoading && }
+
+ );
+}
+
+export default GlobalImageDrop;
diff --git a/src/components/image/ImageDrop.js b/src/components/image/ImageDrop.js
new file mode 100644
index 0000000..d46e14f
--- /dev/null
+++ b/src/components/image/ImageDrop.js
@@ -0,0 +1,37 @@
+import React from "react";
+import { Box, Flex, Text } from "theme-ui";
+
+import useImageDrop from "../../hooks/useImageDrop";
+
+function ImageDrop({ onDrop, dropText, children }) {
+ const { dragging, containerListeners, overlayListeners } = useImageDrop(
+ onDrop
+ );
+ return (
+
+ {children}
+ {dragging && (
+
+
+ {dropText || "Drop image to import"}
+
+
+ )}
+
+ );
+}
+
+export default ImageDrop;
diff --git a/src/components/DragOverlay.js b/src/components/map/DragOverlay.js
similarity index 97%
rename from src/components/DragOverlay.js
rename to src/components/map/DragOverlay.js
index a89f02d..57f140e 100644
--- a/src/components/DragOverlay.js
+++ b/src/components/map/DragOverlay.js
@@ -1,7 +1,7 @@
import React, { useEffect, useRef, useState } from "react";
import { Box, IconButton } from "theme-ui";
-import RemoveTokenIcon from "../icons/RemoveTokenIcon";
+import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
function DragOverlay({ dragging, node, onRemove }) {
const [isRemoveHovered, setIsRemoveHovered] = useState(false);
diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index 340749e..af5e9bc 100644
--- a/src/components/map/Map.js
+++ b/src/components/map/Map.js
@@ -1,4 +1,6 @@
import React, { useState } from "react";
+import { Box } from "theme-ui";
+import { useToasts } from "react-toast-notifications";
import MapControls from "./MapControls";
import MapInteraction from "./MapInteraction";
@@ -48,6 +50,8 @@ function Map({
disabledTokens,
session,
}) {
+ const { addToast } = useToasts();
+
const { tokensById } = useTokenData();
const [selectedToolId, setSelectedToolId] = useState("move");
@@ -231,6 +235,7 @@ function Map({
onShapesCut={handleFogShapesCut}
onShapesRemove={handleFogShapesRemove}
onShapesEdit={handleFogShapesEdit}
+ onShapeError={addToast}
active={selectedToolId === "fog"}
toolSettings={settings.fog}
editable={allowFogDrawing && !settings.fog.preview}
@@ -336,30 +341,32 @@ function Map({
);
return (
-
- {mapControls}
- {tokenMenu}
- {noteMenu}
- {tokenDragOverlay}
- {noteDragOverlay}
-
- }
- selectedToolId={selectedToolId}
- onSelectedToolChange={setSelectedToolId}
- disabledControls={disabledControls}
- >
- {mapGrid}
- {mapDrawing}
- {mapNotes}
- {mapTokens}
- {mapFog}
- {mapPointer}
- {mapMeasure}
-
+
+
+ {mapControls}
+ {tokenMenu}
+ {noteMenu}
+ {tokenDragOverlay}
+ {noteDragOverlay}
+
+ }
+ selectedToolId={selectedToolId}
+ onSelectedToolChange={setSelectedToolId}
+ disabledControls={disabledControls}
+ >
+ {mapGrid}
+ {mapDrawing}
+ {mapNotes}
+ {mapTokens}
+ {mapFog}
+ {mapPointer}
+ {mapMeasure}
+
+
);
}
diff --git a/src/components/map/MapDrawing.js b/src/components/map/MapDrawing.js
index 54e1234..ccce9fd 100644
--- a/src/components/map/MapDrawing.js
+++ b/src/components/map/MapDrawing.js
@@ -119,8 +119,7 @@ function MapDrawing({
}
const simplified = simplifyPoints(
[...prevPoints, brushPosition],
- gridCellNormalizedSize,
- stageScale
+ 1 / 1000 / stageScale
);
return {
...prevShape,
diff --git a/src/components/map/MapEditBar.js b/src/components/map/MapEditBar.js
new file mode 100644
index 0000000..c1ec6a4
--- /dev/null
+++ b/src/components/map/MapEditBar.js
@@ -0,0 +1,159 @@
+import React, { useState, useEffect } from "react";
+import { Flex, Close, IconButton } from "theme-ui";
+
+import { groupsFromIds, itemsFromGroups } from "../../helpers/group";
+
+import ConfirmModal from "../../modals/ConfirmModal";
+
+import ResetMapIcon from "../../icons/ResetMapIcon";
+import RemoveMapIcon from "../../icons/RemoveMapIcon";
+
+import { useGroup } from "../../contexts/GroupContext";
+import { useMapData } from "../../contexts/MapDataContext";
+import { useKeyboard } from "../../contexts/KeyboardContext";
+
+import shortcuts from "../../shortcuts";
+
+function MapEditBar({ currentMap, disabled, onMapChange, onMapReset, onLoad }) {
+ const [hasMapState, setHasMapState] = useState(false);
+
+ const { maps, mapStates, removeMaps, resetMap } = useMapData();
+
+ const { activeGroups, selectedGroupIds, onGroupSelect } = useGroup();
+
+ useEffect(() => {
+ const selectedGroups = groupsFromIds(selectedGroupIds, activeGroups);
+ const selectedMapStates = itemsFromGroups(
+ selectedGroups,
+ mapStates,
+ "mapId"
+ );
+
+ let _hasMapState = false;
+ for (let state of selectedMapStates) {
+ if (
+ Object.values(state.tokens).length > 0 ||
+ Object.values(state.drawShapes).length > 0 ||
+ Object.values(state.fogShapes).length > 0 ||
+ Object.values(state.notes).length > 0
+ ) {
+ _hasMapState = true;
+ break;
+ }
+ }
+
+ setHasMapState(_hasMapState);
+ }, [selectedGroupIds, mapStates, activeGroups]);
+
+ function getSelectedMaps() {
+ const selectedGroups = groupsFromIds(selectedGroupIds, activeGroups);
+ return itemsFromGroups(selectedGroups, maps);
+ }
+
+ const [isMapsRemoveModalOpen, setIsMapsRemoveModalOpen] = useState(false);
+ async function handleMapsRemove() {
+ onLoad(true);
+ setIsMapsRemoveModalOpen(false);
+ const selectedMaps = getSelectedMaps();
+ const selectedMapIds = selectedMaps.map((map) => map.id);
+ onGroupSelect();
+ await removeMaps(selectedMapIds);
+ // Removed the map from the map screen if needed
+ if (currentMap && selectedMapIds.includes(currentMap.id)) {
+ onMapChange(null, null);
+ }
+ onLoad(false);
+ }
+
+ const [isMapsResetModalOpen, setIsMapsResetModalOpen] = useState(false);
+ async function handleMapsReset() {
+ onLoad(true);
+ setIsMapsResetModalOpen(false);
+ const selectedMaps = getSelectedMaps();
+ const selectedMapIds = selectedMaps.map((map) => map.id);
+ for (let id of selectedMapIds) {
+ const newState = await resetMap(id);
+ // Reset the state of the current map if needed
+ if (currentMap && currentMap.id === id) {
+ onMapReset(newState);
+ }
+ }
+ onLoad(false);
+ }
+
+ /**
+ * Shortcuts
+ */
+ function handleKeyDown(event) {
+ if (disabled) {
+ return;
+ }
+ if (shortcuts.delete(event)) {
+ const selectedMaps = getSelectedMaps();
+ if (selectedMaps.length > 0) {
+ setIsMapsResetModalOpen(false);
+ setIsMapsRemoveModalOpen(true);
+ }
+ }
+ }
+
+ useKeyboard(handleKeyDown);
+
+ if (selectedGroupIds.length === 0) {
+ return null;
+ }
+
+ return (
+
+ onGroupSelect()}
+ />
+
+ setIsMapsResetModalOpen(true)}
+ disabled={!hasMapState}
+ >
+
+
+ setIsMapsRemoveModalOpen(true)}
+ >
+
+
+
+ setIsMapsResetModalOpen(false)}
+ onConfirm={handleMapsReset}
+ confirmText="Reset"
+ label="Reset Selected Map(s)"
+ description="This will remove all fog, drawings and tokens from the selected maps."
+ />
+ setIsMapsRemoveModalOpen(false)}
+ onConfirm={handleMapsRemove}
+ confirmText="Remove"
+ label="Remove Selected Map(s)"
+ description="This operation cannot be undone."
+ />
+
+ );
+}
+
+export default MapEditBar;
diff --git a/src/components/map/MapEditor.js b/src/components/map/MapEditor.js
index f8dbb8a..1040468 100644
--- a/src/components/map/MapEditor.js
+++ b/src/components/map/MapEditor.js
@@ -23,7 +23,7 @@ import MapGrid from "./MapGrid";
import MapGridEditor from "./MapGridEditor";
function MapEditor({ map, onSettingsChange }) {
- const [mapImageSource] = useMapImage(map);
+ const [mapImage] = useMapImage(map);
const [stageWidth, setStageWidth] = useState(1);
const [stageHeight, setStageHeight] = useState(1);
@@ -93,14 +93,14 @@ function MapEditor({ map, onSettingsChange }) {
interactionEmitter: null,
};
- const canEditGrid = map.type !== "default";
-
const gridChanged =
map.grid.inset.topLeft.x !== defaultInset.topLeft.x ||
map.grid.inset.topLeft.y !== defaultInset.topLeft.y ||
map.grid.inset.bottomRight.x !== defaultInset.bottomRight.x ||
map.grid.inset.bottomRight.y !== defaultInset.bottomRight.y;
+ const gridValid = map.grid.size.x !== 0 && map.grid.size.y !== 0;
+
const layout = useResponsiveLayout();
return (
@@ -132,12 +132,8 @@ function MapEditor({ map, onSettingsChange }) {
)}
>
-
- {showGridControls && canEditGrid && (
+
+ {showGridControls && gridValid && (
<>
@@ -146,7 +142,7 @@ function MapEditor({ map, onSettingsChange }) {
- {gridChanged && (
+ {gridChanged && gridValid && (
)}
- {canEditGrid && (
- setShowGridControls(!showGridControls)}
- bg="overlay"
- sx={{
- borderRadius: "50%",
- position: "absolute",
- bottom: 0,
- right: 0,
- }}
- m={2}
- p="6px"
- >
- {showGridControls ? : }
-
- )}
+ setShowGridControls(!showGridControls)}
+ bg="overlay"
+ sx={{
+ borderRadius: "50%",
+ position: "absolute",
+ bottom: 0,
+ right: 0,
+ }}
+ m={2}
+ p="6px"
+ >
+ {showGridControls ? : }
+
diff --git a/src/components/map/MapFog.js b/src/components/map/MapFog.js
index 95527c2..7614328 100644
--- a/src/components/map/MapFog.js
+++ b/src/components/map/MapFog.js
@@ -1,7 +1,8 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback } from "react";
import shortid from "shortid";
-import { Group, Rect, Line } from "react-konva";
+import { Group, Line } from "react-konva";
import useImage from "use-image";
+import Color from "color";
import diagonalPattern from "../../images/DiagonalPattern.png";
@@ -37,8 +38,10 @@ import {
Tick,
getRelativePointerPosition,
} from "../../helpers/konva";
+import { keyBy } from "../../helpers/shared";
import SubtractShapeAction from "../../actions/SubtractShapeAction";
+import CutShapeAction from "../../actions/CutShapeAction";
import useSetting from "../../hooks/useSetting";
@@ -51,6 +54,7 @@ function MapFog({
onShapesCut,
onShapesRemove,
onShapesEdit,
+ onShapeError,
active,
toolSettings,
editable,
@@ -175,8 +179,7 @@ function MapFog({
}
const simplified = simplifyPoints(
[...prevPoints, brushPosition],
- gridCellNormalizedSize,
- stageScale / 4
+ 1 / 1000 / stageScale
);
return {
...prevShape,
@@ -214,6 +217,8 @@ function MapFog({
) {
const cut = toolSettings.useFogCut;
let drawingShapes = [drawingShape];
+
+ // Filter out hidden or visible shapes if single layer enabled
if (!toolSettings.multilayer) {
const shapesToSubtract = shapes.filter((shape) =>
cut ? !shape.visible : shape.visible
@@ -228,22 +233,32 @@ function MapFog({
}
if (drawingShapes.length > 0) {
- drawingShapes = drawingShapes.map((shape) => {
- if (cut) {
- return {
- id: shape.id,
- type: shape.type,
- data: shape.data,
- };
- } else {
- return { ...shape, color: "black" };
- }
- });
-
if (cut) {
- onShapesCut(drawingShapes);
+ // Run a pre-emptive cut action to check whether we've cut anything
+ const cutAction = new CutShapeAction(drawingShapes);
+ const state = cutAction.execute(keyBy(shapes, "id"));
+
+ if (Object.keys(state).length === shapes.length) {
+ onShapeError("No fog to cut");
+ } else {
+ onShapesCut(
+ drawingShapes.map((shape) => ({
+ id: shape.id,
+ type: shape.type,
+ data: shape.data,
+ }))
+ );
+ }
} else {
- onShapesAdd(drawingShapes);
+ onShapesAdd(
+ drawingShapes.map((shape) => ({ ...shape, color: "black" }))
+ );
+ }
+ } else {
+ if (cut) {
+ onShapeError("Fog already cut");
+ } else {
+ onShapeError("Fog already placed");
}
}
setDrawingShape(null);
@@ -373,6 +388,7 @@ function MapFog({
};
let polygonShapes = [polygonShape];
+ // Filter out hidden or visible shapes if single layer enabled
if (!toolSettings.multilayer) {
const shapesToSubtract = shapes.filter((shape) =>
cut ? !shape.visible : shape.visible
@@ -388,7 +404,15 @@ function MapFog({
if (polygonShapes.length > 0) {
if (cut) {
- onShapesCut(polygonShapes);
+ // Run a pre-emptive cut action to check whether we've cut anything
+ const cutAction = new CutShapeAction(polygonShapes);
+ const state = cutAction.execute(keyBy(shapes, "id"));
+
+ if (Object.keys(state).length === shapes.length) {
+ onShapeError("No fog to cut");
+ } else {
+ onShapesCut(polygonShapes);
+ }
} else {
onShapesAdd(
polygonShapes.map((shape) => ({
@@ -399,10 +423,23 @@ function MapFog({
}))
);
}
+ } else {
+ if (cut) {
+ onShapeError("Fog already cut");
+ } else {
+ onShapeError("Fog already placed");
+ }
}
setDrawingShape(null);
- }, [toolSettings, drawingShape, onShapesCut, onShapesAdd, shapes]);
+ }, [
+ toolSettings,
+ drawingShape,
+ onShapesCut,
+ onShapesAdd,
+ onShapeError,
+ shapes,
+ ]);
// Add keyboard shortcuts
function handleKeyDown(event) {
@@ -489,6 +526,15 @@ function MapFog({
const holes =
shape.data.holes &&
shape.data.holes.map((hole) => hole.reduce(reducePoints, []));
+ const opacity = editable ? editOpacity : 1;
+ // Control opacity only on fill as using opacity with stroke leads to performance issues
+ const fill = new Color(colors[shape.color] || shape.color)
+ .alpha(opacity)
+ .string();
+ const stroke =
+ editable && active
+ ? colors.lightGray
+ : colors[shape.color] || shape.color;
return (
-
- {/* Render a blank shape so cache works with no fog shapes */}
-
- {fogShapes.map(renderShape)}
-
+ {fogShapes.map(renderShape)}
{shouldRenderGuides && renderGuides()}
{drawingShape && renderShape(drawingShape)}
{drawingShape &&
diff --git a/src/components/map/MapGrid.js b/src/components/map/MapGrid.js
index 5cfbf94..be5e9ba 100644
--- a/src/components/map/MapGrid.js
+++ b/src/components/map/MapGrid.js
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from "react";
import useImage from "use-image";
-import { useImageSource } from "../../contexts/ImageSourceContext";
+import { useDataURL } from "../../contexts/AssetsContext";
import { mapSources as defaultMapSources } from "../../maps";
@@ -11,15 +11,13 @@ import Grid from "../Grid";
function MapGrid({ map }) {
let mapSourceMap = map;
- // Use lowest resolution for grid lightness
- if (map && map.type === "file" && map.resolutions) {
- const resolutionArray = Object.keys(map.resolutions);
- if (resolutionArray.length > 0) {
- mapSourceMap = map.resolutions[resolutionArray[0]];
- }
- }
- const mapSource = useImageSource(mapSourceMap, defaultMapSources);
- const [mapImage, mapLoadingStatus] = useImage(mapSource);
+ const mapURL = useDataURL(
+ mapSourceMap,
+ defaultMapSources,
+ undefined,
+ map.type === "file"
+ );
+ const [mapImage, mapLoadingStatus] = useImage(mapURL);
const [isImageLight, setIsImageLight] = useState(true);
diff --git a/src/components/map/MapGridEditor.js b/src/components/map/MapGridEditor.js
index 8962654..a059180 100644
--- a/src/components/map/MapGridEditor.js
+++ b/src/components/map/MapGridEditor.js
@@ -77,7 +77,10 @@ function MapGridEditor({ map, onGridChange }) {
Vector2.subtract(position, previousPosition)
);
- const inset = map.grid.inset;
+ const inset = {
+ topLeft: { ...map.grid.inset.topLeft },
+ bottomRight: { ...map.grid.inset.bottomRight },
+ };
if (direction.x === 0 && direction.y === 0) {
return inset;
diff --git a/src/components/map/MapImage.js b/src/components/map/MapImage.js
new file mode 100644
index 0000000..c9c71f8
--- /dev/null
+++ b/src/components/map/MapImage.js
@@ -0,0 +1,18 @@
+import React from "react";
+import { Image } from "theme-ui";
+
+import { useDataURL } from "../../contexts/AssetsContext";
+import { mapSources as defaultMapSources } from "../../maps";
+
+const MapTileImage = React.forwardRef(({ map, ...props }, ref) => {
+ const mapURL = useDataURL(
+ map,
+ defaultMapSources,
+ undefined,
+ map.type === "file"
+ );
+
+ return ;
+});
+
+export default MapTileImage;
diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js
index e1bb369..61ba335 100644
--- a/src/components/map/MapInteraction.js
+++ b/src/components/map/MapInteraction.js
@@ -28,22 +28,16 @@ function MapInteraction({
onSelectedToolChange,
disabledControls,
}) {
- const [mapImageSource, mapImageSourceStatus] = useMapImage(map);
+ const [mapImage, mapImageStatus] = useMapImage(map);
- // Map loaded taking in to account different resolutions
const [mapLoaded, setMapLoaded] = useState(false);
useEffect(() => {
- if (
- !map ||
- !mapState ||
- (map.type === "file" && !map.file && !map.resolutions) ||
- mapState.mapId !== map.id
- ) {
+ if (!map || !mapState || mapState.mapId !== map.id) {
setMapLoaded(false);
- } else if (mapImageSourceStatus === "loaded") {
+ } else if (mapImageStatus === "loaded") {
setMapLoaded(true);
}
- }, [mapImageSourceStatus, map, mapState]);
+ }, [mapImageStatus, map, mapState]);
const [stageWidth, setStageWidth] = useState(1);
const [stageHeight, setStageHeight] = useState(1);
@@ -187,11 +181,12 @@ function MapInteraction({
{
if (!active) {
diff --git a/src/components/map/MapNotes.js b/src/components/map/MapNotes.js
index c2706c8..d28f364 100644
--- a/src/components/map/MapNotes.js
+++ b/src/components/map/MapNotes.js
@@ -4,7 +4,7 @@ import { Group } from "react-konva";
import { useInteractionEmitter } from "../../contexts/MapInteractionContext";
import { useMapStage } from "../../contexts/MapStageContext";
-import { useAuth } from "../../contexts/AuthContext";
+import { useUserId } from "../../contexts/UserIdContext";
import Vector2 from "../../helpers/Vector2";
import { getRelativePointerPosition } from "../../helpers/konva";
@@ -28,7 +28,7 @@ function MapNotes({
fadeOnHover,
}) {
const interactionEmitter = useInteractionEmitter();
- const { userId } = useAuth();
+ const userId = useUserId();
const mapStageRef = useMapStage();
const [isBrushDown, setIsBrushDown] = useState(false);
const [noteData, setNoteData] = useState(null);
diff --git a/src/components/map/MapSettings.js b/src/components/map/MapSettings.js
index c8f3276..8f05c3b 100644
--- a/src/components/map/MapSettings.js
+++ b/src/components/map/MapSettings.js
@@ -1,11 +1,12 @@
-import React from "react";
-import { Flex, Box, Label, Input, Checkbox, IconButton } from "theme-ui";
-
-import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
+import React, { useEffect, useState } from "react";
+import { Flex, Box, Label, Input, Checkbox } from "theme-ui";
import { isEmpty } from "../../helpers/shared";
import { getGridUpdatedInset } from "../../helpers/grid";
+import { useDataURL } from "../../contexts/AssetsContext";
+import { mapSources as defaultMapSources } from "../../maps";
+
import Divider from "../Divider";
import Select from "../Select";
@@ -40,8 +41,6 @@ function MapSettings({
mapState,
onSettingsChange,
onStateSettingsChange,
- showMore,
- onShowMoreChange,
}) {
function handleFlagChange(event, flag) {
if (event.target.checked) {
@@ -116,16 +115,22 @@ function MapSettings({
onSettingsChange("grid", grid);
}
- function getMapSize() {
- let size = 0;
- if (map.quality === "original") {
- size = map.file.length;
- } else {
- size = map.resolutions[map.quality].file.length;
+ const mapURL = useDataURL(map, defaultMapSources);
+ const [mapSize, setMapSize] = useState(0);
+ useEffect(() => {
+ async function updateMapSize() {
+ if (mapURL) {
+ const response = await fetch(mapURL);
+ const blob = await response.blob();
+ let size = blob.size;
+ size /= 1000000; // Bytes to Megabytes
+ setMapSize(size.toFixed(2));
+ } else {
+ setMapSize(0);
+ }
}
- size /= 1000000; // Bytes to Megabytes
- return `${size.toFixed(2)}MB`;
- }
+ updateMapSize();
+ }, [mapURL]);
const mapEmpty = !map || isEmpty(map);
const mapStateEmpty = !mapState || isEmpty(mapState);
@@ -140,7 +145,7 @@ function MapSettings({
name="gridX"
value={`${(map && map.grid.size.x) || 0}`}
onChange={handleGridSizeXChange}
- disabled={mapEmpty || map.type === "default"}
+ disabled={mapEmpty}
min={1}
my={1}
/>
@@ -152,7 +157,7 @@ function MapSettings({
name="gridY"
value={`${(map && map.grid.size.y) || 0}`}
onChange={handleGridSizeYChange}
- disabled={mapEmpty || map.type === "default"}
+ disabled={mapEmpty}
min={1}
my={1}
/>
@@ -164,176 +169,146 @@ function MapSettings({
name="name"
value={(map && map.name) || ""}
onChange={(e) => onSettingsChange("name", e.target.value)}
- disabled={mapEmpty || map.type === "default"}
+ disabled={mapEmpty}
my={1}
/>
- {showMore && (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {!mapEmpty && map.type !== "default" && (
-
-
-
-
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
- )}
- {
- e.stopPropagation();
- e.preventDefault();
- onShowMoreChange(!showMore);
- }}
- sx={{
- transform: `rotate(${showMore ? "180deg" : "0"})`,
- alignSelf: "center",
- }}
- aria-label={showMore ? "Show Less" : "Show More"}
- title={showMore ? "Show Less" : "Show More"}
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {!mapEmpty && map.type !== "default" && (
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/components/map/MapTest.js b/src/components/map/MapTest.js
deleted file mode 100644
index 25a914b..0000000
--- a/src/components/map/MapTest.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from "react";
-
-function MapTest() {}
-
-export default MapTest;
diff --git a/src/components/map/MapTile.js b/src/components/map/MapTile.js
index f09a620..c061b19 100644
--- a/src/components/map/MapTile.js
+++ b/src/components/map/MapTile.js
@@ -1,40 +1,30 @@
import React from "react";
-import Tile from "../Tile";
-
-import { useImageSource } from "../../contexts/ImageSourceContext";
-import { mapSources as defaultMapSources, unknownSource } from "../../maps";
+import Tile from "../tile/Tile";
+import MapImage from "./MapImage";
function MapTile({
map,
isSelected,
- onMapSelect,
- onMapEdit,
- onDone,
- size,
+ onSelect,
+ onEdit,
+ onDoubleClick,
canEdit,
badges,
}) {
- const mapSource = useImageSource(
- map,
- defaultMapSources,
- unknownSource,
- map.type === "file"
- );
-
return (
onMapSelect(map)}
- onEdit={() => onMapEdit(map.id)}
- onDoubleClick={() => canEdit && onDone()}
- size={size}
+ onSelect={() => onSelect(map.id)}
+ onEdit={() => onEdit(map.id)}
+ onDoubleClick={() => canEdit && onDoubleClick()}
canEdit={canEdit}
badges={badges}
editTitle="Edit Map"
- />
+ >
+
+
);
}
diff --git a/src/components/map/MapTileGroup.js b/src/components/map/MapTileGroup.js
new file mode 100644
index 0000000..753fc63
--- /dev/null
+++ b/src/components/map/MapTileGroup.js
@@ -0,0 +1,41 @@
+import React from "react";
+import { Grid } from "theme-ui";
+
+import Tile from "../tile/Tile";
+import MapImage from "./MapImage";
+
+import useResponsiveLayout from "../../hooks/useResponsiveLayout";
+
+function MapTileGroup({ group, maps, isSelected, onSelect, onDoubleClick }) {
+ const layout = useResponsiveLayout();
+
+ return (
+ onSelect(group.id)}
+ onDoubleClick={onDoubleClick}
+ >
+
+ {maps
+ .slice(0, layout.groupGridColumns * layout.groupGridColumns)
+ .map((map) => (
+
+ ))}
+
+
+ );
+}
+
+export default MapTileGroup;
diff --git a/src/components/map/MapTiles.js b/src/components/map/MapTiles.js
index 3b86589..811bb0c 100644
--- a/src/components/map/MapTiles.js
+++ b/src/components/map/MapTiles.js
@@ -1,179 +1,68 @@
import React from "react";
-import { Flex, Box, Text, IconButton, Close, Label } from "theme-ui";
-import SimpleBar from "simplebar-react";
-import Case from "case";
-
-import RemoveMapIcon from "../../icons/RemoveMapIcon";
-import ResetMapIcon from "../../icons/ResetMapIcon";
-import GroupIcon from "../../icons/GroupIcon";
import MapTile from "./MapTile";
-import Link from "../Link";
-import FilterBar from "../FilterBar";
+import MapTileGroup from "./MapTileGroup";
-import { useDatabase } from "../../contexts/DatabaseContext";
+import SortableTiles from "../tile/SortableTiles";
+import SortableTilesDragOverlay from "../tile/SortableTilesDragOverlay";
-import useResponsiveLayout from "../../hooks/useResponsiveLayout";
+import { getGroupItems } from "../../helpers/group";
-function MapTiles({
- maps,
- groups,
- selectedMaps,
- selectedMapStates,
- onMapSelect,
- onMapsRemove,
- onMapsReset,
- onMapAdd,
- onMapEdit,
- onDone,
- selectMode,
- onSelectModeChange,
- search,
- onSearchChange,
- onMapsGroup,
-}) {
- const { databaseStatus } = useDatabase();
- const layout = useResponsiveLayout();
+import { useGroup } from "../../contexts/GroupContext";
- let hasMapState = false;
- for (let state of selectedMapStates) {
- if (
- Object.values(state.tokens).length > 0 ||
- Object.values(state.drawShapes).length > 0 ||
- Object.values(state.fogShapes).length > 0 ||
- Object.values(state.notes).length > 0
- ) {
- hasMapState = true;
- break;
+function MapTiles({ mapsById, onMapEdit, onMapSelect, subgroup }) {
+ const {
+ selectedGroupIds,
+ selectMode,
+ onGroupOpen,
+ onGroupSelect,
+ } = useGroup();
+
+ function renderTile(group) {
+ if (group.type === "item") {
+ const map = mapsById[group.id];
+ if (map) {
+ const isSelected = selectedGroupIds.includes(group.id);
+ const canEdit =
+ isSelected &&
+ selectMode === "single" &&
+ selectedGroupIds.length === 1;
+ return (
+ canEdit && onMapSelect(group.id)}
+ canEdit={canEdit}
+ badges={[`${map.grid.size.x}x${map.grid.size.y}`]}
+ />
+ );
+ }
+ } else {
+ const isSelected = selectedGroupIds.includes(group.id);
+ const items = getGroupItems(group);
+ const canOpen =
+ isSelected && selectMode === "single" && selectedGroupIds.length === 1;
+ return (
+ mapsById[item.id])}
+ isSelected={isSelected}
+ onSelect={onGroupSelect}
+ onDoubleClick={() => canOpen && onGroupOpen(group.id)}
+ />
+ );
}
}
- let hasSelectedDefaultMap = selectedMaps.some(
- (map) => map.type === "default"
- );
-
- function mapToTile(map) {
- const isSelected = selectedMaps.includes(map);
- return (
-
- );
- }
-
- const multipleSelected = selectedMaps.length > 1;
-
return (
-
- onMapSelect()}
- search={search}
- onSearchChange={onSearchChange}
- selectMode={selectMode}
- onSelectModeChange={onSelectModeChange}
- onAdd={onMapAdd}
- addTitle="Add Map"
- />
-
- onMapSelect()}
- >
- {groups.map((group) => (
-
-
- {maps[group].map(mapToTile)}
-
- ))}
-
-
- {databaseStatus === "disabled" && (
-
-
- Map saving is unavailable. See FAQ for
- more information.
-
-
- )}
- {selectedMaps.length > 0 && (
-
- onMapSelect()}
- />
-
- onMapsGroup()}
- disabled={hasSelectedDefaultMap}
- >
-
-
- onMapsReset()}
- disabled={!hasMapState}
- >
-
-
- onMapsRemove()}
- disabled={hasSelectedDefaultMap}
- >
-
-
-
-
- )}
-
+ <>
+
+
+
);
}
diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js
index 1f7258f..9a4d6a5 100644
--- a/src/components/map/MapToken.js
+++ b/src/components/map/MapToken.js
@@ -1,30 +1,29 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useRef } from "react";
import { Image as KonvaImage, Group } from "react-konva";
import { useSpring, animated } from "react-spring/konva";
import useImage from "use-image";
-import Konva from "konva";
-import useDebounce from "../../hooks/useDebounce";
import usePrevious from "../../hooks/usePrevious";
import useGridSnapping from "../../hooks/useGridSnapping";
-import { useAuth } from "../../contexts/AuthContext";
+import { useUserId } from "../../contexts/UserIdContext";
import {
useSetPreventMapInteraction,
useMapWidth,
useMapHeight,
- useDebouncedStageScale,
} from "../../contexts/MapInteractionContext";
import { useGridCellPixelSize } from "../../contexts/GridContext";
-import { useImageSource } from "../../contexts/ImageSourceContext";
+import { useDataURL } from "../../contexts/AssetsContext";
import TokenStatus from "../token/TokenStatus";
import TokenLabel from "../token/TokenLabel";
+import TokenOutline from "../token/TokenOutline";
-import { tokenSources, unknownSource } from "../../tokens";
+import { Intersection, getScaledOutline } from "../../helpers/token";
+
+import { tokenSources } from "../../tokens";
function MapToken({
- token,
tokenState,
onTokenStateChange,
onTokenMenuOpen,
@@ -34,34 +33,31 @@ function MapToken({
fadeOnHover,
map,
}) {
- const { userId } = useAuth();
+ const userId = useUserId();
- const stageScale = useDebouncedStageScale();
const mapWidth = useMapWidth();
const mapHeight = useMapHeight();
const setPreventMapInteraction = useSetPreventMapInteraction();
const gridCellPixelSize = useGridCellPixelSize();
- const tokenSource = useImageSource(token, tokenSources, unknownSource);
- const [tokenSourceImage, tokenSourceStatus] = useImage(tokenSource);
- const [tokenAspectRatio, setTokenAspectRatio] = useState(1);
+ const tokenURL = useDataURL(tokenState, tokenSources);
+ const [tokenImage] = useImage(tokenURL);
- useEffect(() => {
- if (tokenSourceImage) {
- setTokenAspectRatio(tokenSourceImage.width / tokenSourceImage.height);
- }
- }, [tokenSourceImage]);
+ const tokenAspectRatio = tokenState.width / tokenState.height;
const snapPositionToGrid = useGridSnapping();
function handleDragStart(event) {
const tokenGroup = event.target;
- const tokenImage = imageRef.current;
- if (token && token.category === "vehicle") {
- // Enable hit detection for .intersects() function
- Konva.hitOnDragEnabled = true;
+ if (tokenState.category === "vehicle") {
+ const tokenIntersection = new Intersection(
+ getScaledOutline(tokenState, tokenWidth, tokenHeight),
+ { x: tokenX - tokenWidth / 2, y: tokenY - tokenHeight / 2 },
+ { x: tokenX, y: tokenY },
+ tokenState.rotation
+ );
// Find all other tokens on the map
const layer = tokenGroup.getLayer();
@@ -70,12 +66,7 @@ function MapToken({
if (other === tokenGroup) {
continue;
}
- const otherRect = other.getClientRect();
- const otherCenter = {
- x: otherRect.x + otherRect.width / 2,
- y: otherRect.y + otherRect.height / 2,
- };
- if (tokenImage.intersects(otherCenter)) {
+ if (tokenIntersection.intersects(other.position())) {
// Save and restore token position after moving layer
const position = other.absolutePosition();
other.moveTo(tokenGroup);
@@ -99,9 +90,7 @@ function MapToken({
const tokenGroup = event.target;
const mountChanges = {};
- if (token && token.category === "vehicle") {
- Konva.hitOnDragEnabled = false;
-
+ if (tokenState.category === "vehicle") {
const parent = tokenGroup.getParent();
const mountedTokens = tokenGroup.find(".character");
for (let mountedToken of mountedTokens) {
@@ -185,33 +174,6 @@ function MapToken({
const tokenWidth = minCellSize * tokenState.size;
const tokenHeight = (minCellSize / tokenAspectRatio) * tokenState.size;
- const debouncedStageScale = useDebounce(stageScale, 50);
- const imageRef = useRef();
- useEffect(() => {
- const image = imageRef.current;
- if (!image) {
- return;
- }
-
- const canvas = image.getCanvas();
- const pixelRatio = canvas.pixelRatio || 1;
-
- if (tokenSourceStatus === "loaded" && tokenWidth > 0 && tokenHeight > 0) {
- const maxImageSize = token ? Math.max(token.width, token.height) : 512; // Default to 512px
- const maxTokenSize = Math.max(tokenWidth, tokenHeight);
- // Constrain image buffer to original image size
- const maxRatio = maxImageSize / maxTokenSize;
-
- image.cache({
- pixelRatio: Math.min(
- Math.max(debouncedStageScale * pixelRatio, 1),
- maxRatio
- ),
- });
- image.drawHitFromCache();
- }
- }, [debouncedStageScale, tokenWidth, tokenHeight, tokenSourceStatus, token]);
-
// Animate to new token positions if edited by others
const tokenX = tokenState.x * mapWidth;
const tokenY = tokenState.y * mapHeight;
@@ -232,8 +194,8 @@ function MapToken({
// Token name is used by on click to find whether a token is a vehicle or prop
let tokenName = "";
- if (token) {
- tokenName = token.category;
+ if (tokenState) {
+ tokenName = tokenState.category;
}
if (tokenState && tokenState.locked) {
tokenName = tokenName + "-locked";
@@ -260,28 +222,46 @@ function MapToken({
name={tokenName}
id={tokenState.id}
>
-
+
+
+ {}}
/>
-
-
+ {tokenState.statuses?.length > 0 ? (
+
+ ) : null}
+ {tokenState.label ? (
+
+ ) : null}
);
diff --git a/src/components/map/MapTokens.js b/src/components/map/MapTokens.js
index 426dcfe..957d038 100644
--- a/src/components/map/MapTokens.js
+++ b/src/components/map/MapTokens.js
@@ -1,10 +1,8 @@
-import React, { useEffect } from "react";
+import React from "react";
import { Group } from "react-konva";
import MapToken from "./MapToken";
-import { useTokenData } from "../../contexts/TokenDataContext";
-
function MapTokens({
map,
mapState,
@@ -15,31 +13,6 @@ function MapTokens({
selectedToolId,
disabledTokens,
}) {
- const { tokensById, loadTokens } = useTokenData();
-
- // Ensure tokens files have been loaded into the token data
- useEffect(() => {
- async function loadFileTokens() {
- const tokenIds = new Set(
- Object.values(mapState.tokens).map((state) => state.tokenId)
- );
- const tokensToLoad = [];
- for (let tokenId of tokenIds) {
- const token = tokensById[tokenId];
- if (token && token.type === "file" && !token.file) {
- tokensToLoad.push(tokenId);
- }
- }
- if (tokensToLoad.length > 0) {
- await loadTokens(tokensToLoad);
- }
- }
-
- if (mapState) {
- loadFileTokens();
- }
- }, [mapState, tokensById, loadTokens]);
-
function getMapTokenCategoryWeight(category) {
switch (category) {
case "character":
@@ -55,38 +28,28 @@ function MapTokens({
// Sort so vehicles render below other tokens
function sortMapTokenStates(a, b, tokenDraggingOptions) {
- const tokenA = tokensById[a.tokenId];
- const tokenB = tokensById[b.tokenId];
- if (tokenA && tokenB) {
- // If categories are different sort in order "prop", "vehicle", "character"
- if (tokenB.category !== tokenA.category) {
- const aWeight = getMapTokenCategoryWeight(tokenA.category);
- const bWeight = getMapTokenCategoryWeight(tokenB.category);
- return bWeight - aWeight;
- } else if (
- tokenDraggingOptions &&
- tokenDraggingOptions.dragging &&
- tokenDraggingOptions.tokenState.id === a.id
- ) {
- // If dragging token a move above
- return 1;
- } else if (
- tokenDraggingOptions &&
- tokenDraggingOptions.dragging &&
- tokenDraggingOptions.tokenState.id === b.id
- ) {
- // If dragging token b move above
- return -1;
- } else {
- // Else sort so last modified is on top
- return a.lastModified - b.lastModified;
- }
- } else if (tokenA) {
+ // If categories are different sort in order "prop", "vehicle", "character"
+ if (b.category !== a.category) {
+ const aWeight = getMapTokenCategoryWeight(a.category);
+ const bWeight = getMapTokenCategoryWeight(b.category);
+ return bWeight - aWeight;
+ } else if (
+ tokenDraggingOptions &&
+ tokenDraggingOptions.dragging &&
+ tokenDraggingOptions.tokenState.id === a.id
+ ) {
+ // If dragging token a move above
return 1;
- } else if (tokenB) {
+ } else if (
+ tokenDraggingOptions &&
+ tokenDraggingOptions.dragging &&
+ tokenDraggingOptions.tokenState.id === b.id
+ ) {
+ // If dragging token b move above
return -1;
} else {
- return 0;
+ // Else sort so last modified is on top
+ return a.lastModified - b.lastModified;
}
}
@@ -97,7 +60,6 @@ function MapTokens({
.map((tokenState) => (
1}
+ onClick={handleSelectClick}
+ mt={2}
+ >
+ Select
+
+ );
+}
+
+export default SelectMapSelectButton;
diff --git a/src/components/note/Note.js b/src/components/note/Note.js
index 461d8b1..a5cd5af 100644
--- a/src/components/note/Note.js
+++ b/src/components/note/Note.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef } from "react";
import { Rect, Text } from "react-konva";
import { useSpring, animated } from "react-spring/konva";
-import { useAuth } from "../../contexts/AuthContext";
+import { useUserId } from "../../contexts/UserIdContext";
import {
useSetPreventMapInteraction,
useMapWidth,
@@ -15,7 +15,7 @@ import colors from "../../helpers/colors";
import usePrevious from "../../hooks/usePrevious";
import useGridSnapping from "../../hooks/useGridSnapping";
-const minTextSize = 16;
+const defaultFontSize = 16;
function Note({
note,
@@ -27,7 +27,7 @@ function Note({
onNoteDragEnd,
fadeOnHover,
}) {
- const { userId } = useAuth();
+ const userId = useUserId();
const mapWidth = useMapWidth();
const mapHeight = useMapHeight();
@@ -118,7 +118,7 @@ function Note({
}
}
- const [fontSize, setFontSize] = useState(1);
+ const [fontScale, setFontScale] = useState(1);
useEffect(() => {
const text = textRef.current;
@@ -127,10 +127,10 @@ function Note({
}
function findFontSize() {
- // Create an array from 1 / minTextSize of the note height to the full note height
- const sizes = Array.from(
+ // Create an array from 1 / defaultFontSize of the note height to the full note height
+ let sizes = Array.from(
{ length: Math.ceil(noteHeight - notePadding * 2) },
- (_, i) => i + Math.ceil(noteHeight / minTextSize)
+ (_, i) => i + Math.ceil(noteHeight / defaultFontSize)
);
if (sizes.length > 0) {
@@ -144,8 +144,7 @@ function Note({
return prev;
}
});
-
- setFontSize(size);
+ setFontScale(size / defaultFontSize);
}
}
@@ -215,11 +214,14 @@ function Note({
}
align="left"
verticalAlign="middle"
- padding={notePadding}
- fontSize={fontSize}
+ padding={notePadding / fontScale}
+ fontSize={defaultFontSize}
+ // Scale font instead of changing font size to avoid kerning issues with Firefox
+ scaleX={fontScale}
+ scaleY={fontScale}
+ width={noteWidth / fontScale}
+ height={note.textOnly ? undefined : noteHeight / fontScale}
wrap="word"
- width={noteWidth}
- height={note.textOnly ? undefined : noteHeight}
/>
{/* Use an invisible text block to work out text sizing */}
diff --git a/src/components/note/NoteDragOverlay.js b/src/components/note/NoteDragOverlay.js
index 9df0713..bcd2179 100644
--- a/src/components/note/NoteDragOverlay.js
+++ b/src/components/note/NoteDragOverlay.js
@@ -1,6 +1,6 @@
import React from "react";
-import DragOverlay from "../DragOverlay";
+import DragOverlay from "../map/DragOverlay";
function NoteDragOverlay({ onNoteRemove, noteId, noteGroup, dragging }) {
function handleNoteRemove() {
diff --git a/src/components/note/NoteMenu.js b/src/components/note/NoteMenu.js
index 9724c2c..8060fd8 100644
--- a/src/components/note/NoteMenu.js
+++ b/src/components/note/NoteMenu.js
@@ -1,7 +1,8 @@
import React, { useEffect, useState } from "react";
-import { Box, Flex, Text, IconButton, Textarea } from "theme-ui";
+import { Box, Flex, Text, IconButton } from "theme-ui";
import Slider from "../Slider";
+import TextareaAutosize from "../TextareaAutoSize";
import MapMenu from "../map/MapMenu";
@@ -16,7 +17,7 @@ import HideIcon from "../../icons/TokenHideIcon";
import NoteIcon from "../../icons/NoteToolIcon";
import TextIcon from "../../icons/NoteTextIcon";
-import { useAuth } from "../../contexts/AuthContext";
+import { useUserId } from "../../contexts/UserIdContext";
const defaultNoteMaxSize = 6;
@@ -28,7 +29,7 @@ function NoteMenu({
onNoteChange,
map,
}) {
- const { userId } = useAuth();
+ const userId = useUserId();
const wasOpen = usePrevious(isOpen);
@@ -128,20 +129,12 @@ function NoteMenu({
}}
sx={{ alignItems: "center" }}
>
-
+ {inView ? (
+ children
+ ) : (
+
+ )}
+
+ );
+}
+
+export default LazyTile;
diff --git a/src/components/tile/SortableTile.js b/src/components/tile/SortableTile.js
new file mode 100644
index 0000000..cc9c8a0
--- /dev/null
+++ b/src/components/tile/SortableTile.js
@@ -0,0 +1,100 @@
+import React from "react";
+import { Box } from "theme-ui";
+import { useDroppable } from "@dnd-kit/core";
+import { useSortable } from "@dnd-kit/sortable";
+import { animated, useSpring } from "react-spring";
+
+import { GROUP_ID_PREFIX } from "../../contexts/TileDragContext";
+
+function SortableTile({
+ id,
+ disableGrouping,
+ disableSorting,
+ hidden,
+ children,
+ isDragging,
+ cursor,
+}) {
+ const {
+ attributes,
+ listeners,
+ setDroppableNodeRef,
+ setDraggableNodeRef,
+ over,
+ active,
+ } = useSortable({ id });
+
+ const { setNodeRef: setGroupNodeRef } = useDroppable({
+ id: `${GROUP_ID_PREFIX}${id}`,
+ disabled: disableGrouping,
+ });
+
+ const dragStyle = {
+ cursor,
+ opacity: isDragging ? 0.25 : undefined,
+ };
+
+ // Sort div left aligned
+ const sortDropStyle = {
+ position: "absolute",
+ left: "-5px",
+ top: 0,
+ width: "2px",
+ height: "100%",
+ borderRadius: "2px",
+ visibility: over?.id === id && !disableSorting ? "visible" : "hidden",
+ };
+
+ // Group div center aligned
+ const groupDropStyle = {
+ position: "absolute",
+ top: 0,
+ left: 0,
+ width: "100%",
+ height: "100%",
+ borderWidth: "4px",
+ borderRadius: "4px",
+ borderStyle:
+ over?.id === `${GROUP_ID_PREFIX}${id}` && active.id !== id
+ ? "solid"
+ : "none",
+ };
+
+ const { opacity } = useSpring({ opacity: hidden ? 0 : 1 });
+
+ return (
+
+
+ {children}
+
+
+
+
+
+
+ );
+}
+
+SortableTile.defaultProps = {
+ cursor: "pointer",
+};
+
+export default SortableTile;
diff --git a/src/components/tile/SortableTiles.js b/src/components/tile/SortableTiles.js
new file mode 100644
index 0000000..a42bfbd
--- /dev/null
+++ b/src/components/tile/SortableTiles.js
@@ -0,0 +1,103 @@
+import React from "react";
+import { SortableContext } from "@dnd-kit/sortable";
+
+import { moveGroupsInto } from "../../helpers/group";
+import { keyBy } from "../../helpers/shared";
+
+import SortableTile from "./SortableTile";
+import LazyTile from "./LazyTile";
+
+import {
+ useTileDragId,
+ useTileDragCursor,
+ useTileOverGroupId,
+ BASE_SORTABLE_ID,
+ GROUP_SORTABLE_ID,
+} from "../../contexts/TileDragContext";
+import { useGroup } from "../../contexts/GroupContext";
+
+function SortableTiles({ renderTile, subgroup }) {
+ const dragId = useTileDragId();
+ const dragCursor = useTileDragCursor();
+ const overGroupId = useTileOverGroupId();
+ const {
+ groups,
+ selectedGroupIds: allSelectedIds,
+ filter,
+ openGroupId,
+ openGroupItems,
+ filteredGroupItems,
+ } = useGroup();
+
+ const activeGroups = subgroup
+ ? openGroupItems
+ : filter
+ ? filteredGroupItems
+ : groups;
+
+ const sortableId = subgroup ? GROUP_SORTABLE_ID : BASE_SORTABLE_ID;
+
+ // Only populate selected groups if needed
+ let selectedGroupIds = [];
+ if ((subgroup && openGroupId) || (!subgroup && !openGroupId)) {
+ selectedGroupIds = allSelectedIds;
+ }
+ const disableSorting = (openGroupId && !subgroup) || filter;
+ const disableGrouping = subgroup || disableSorting || filter;
+
+ function renderSortableGroup(group, selectedGroups) {
+ if (overGroupId === group.id && dragId && group.id !== dragId) {
+ // If dragging over a group render a preview of that group
+ const previewGroup = moveGroupsInto(
+ [group, ...selectedGroups],
+ 0,
+ selectedGroups.map((_, i) => i + 1)
+ )[0];
+ return renderTile(previewGroup);
+ }
+ return renderTile(group);
+ }
+
+ function renderTiles() {
+ const groupsByIds = keyBy(activeGroups, "id");
+ const selectedGroupIdsSet = new Set(selectedGroupIds);
+ let selectedGroups = [];
+ let hasSelectedContainerGroup = false;
+ for (let groupId of selectedGroupIds) {
+ const group = groupsByIds[groupId];
+ if (group) {
+ selectedGroups.push(group);
+ if (group.type === "group") {
+ hasSelectedContainerGroup = true;
+ }
+ }
+ }
+ return activeGroups.map((group) => {
+ const isDragging = dragId && selectedGroupIdsSet.has(group.id);
+ const disableTileGrouping =
+ disableGrouping || isDragging || hasSelectedContainerGroup;
+ return (
+
+
+ {renderSortableGroup(group, selectedGroups)}
+
+
+ );
+ });
+ }
+
+ return (
+
+ {renderTiles()}
+
+ );
+}
+
+export default SortableTiles;
diff --git a/src/components/tile/SortableTilesDragOverlay.js b/src/components/tile/SortableTilesDragOverlay.js
new file mode 100644
index 0000000..848b793
--- /dev/null
+++ b/src/components/tile/SortableTilesDragOverlay.js
@@ -0,0 +1,93 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { DragOverlay } from "@dnd-kit/core";
+import { animated, useSpring, config } from "react-spring";
+import { Badge } from "theme-ui";
+
+import Vector2 from "../../helpers/Vector2";
+
+import { useTileDragId } from "../../contexts/TileDragContext";
+import { useGroup } from "../../contexts/GroupContext";
+
+function SortableTilesDragOverlay({ renderTile, subgroup }) {
+ const dragId = useTileDragId();
+ const {
+ groups,
+ selectedGroupIds: allSelectedIds,
+ filter,
+ openGroupId,
+ openGroupItems,
+ filteredGroupItems,
+ } = useGroup();
+
+ const activeGroups = subgroup
+ ? openGroupItems
+ : filter
+ ? filteredGroupItems
+ : groups;
+
+ // Only populate selected groups if needed
+ let selectedGroupIds = [];
+ if ((subgroup && openGroupId) || (!subgroup && !openGroupId)) {
+ selectedGroupIds = allSelectedIds;
+ }
+ const dragBounce = useSpring({
+ transform: !!dragId ? "scale(0.9)" : "scale(1)",
+ config: config.wobbly,
+ position: "relative",
+ });
+
+ function renderDragOverlays() {
+ let selectedIndices = selectedGroupIds.map((groupId) =>
+ activeGroups.findIndex((group) => group.id === groupId)
+ );
+ const activeIndex = activeGroups.findIndex((group) => group.id === dragId);
+ // Sort so the draging tile is the first element
+ selectedIndices = selectedIndices.sort((a, b) =>
+ a === activeIndex ? -1 : b === activeIndex ? 1 : 0
+ );
+
+ selectedIndices = selectedIndices.slice(0, 5);
+
+ let coords = selectedIndices.map(
+ (_, index) => new Vector2(5 * index, 5 * index)
+ );
+
+ // Reverse so the first element is rendered on top
+ selectedIndices = selectedIndices.reverse();
+ coords = coords.reverse();
+
+ const selectedGroups = selectedIndices.map((index) => activeGroups[index]);
+
+ return selectedGroups.map((group, index) => (
+
+
+
+ {renderTile(group)}
+ {index === selectedIndices.length - 1 &&
+ selectedGroupIds.length > 1 && (
+
+ {selectedGroupIds.length}
+
+ )}
+
+