Add back map edit bar and refactor select map modal edit functions
This commit is contained in:
parent
e508511ab5
commit
0f2776d774
178
src/components/map/MapEditBar.js
Normal file
178
src/components/map/MapEditBar.js
Normal file
@ -0,0 +1,178 @@
|
||||
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 [hasSelectedDefaultMap, setHasSelectedDefaultMap] = useState(false);
|
||||
|
||||
const { maps, mapStates, removeMaps, resetMap } = useMapData();
|
||||
|
||||
const {
|
||||
groups: allGroups,
|
||||
selectedGroupIds,
|
||||
onGroupSelect,
|
||||
openGroupId,
|
||||
openGroupItems,
|
||||
} = useGroup();
|
||||
|
||||
const groups = openGroupId ? openGroupItems : allGroups;
|
||||
|
||||
useEffect(() => {
|
||||
const selectedGroups = groupsFromIds(selectedGroupIds, groups);
|
||||
const selectedMaps = itemsFromGroups(selectedGroups, maps);
|
||||
const selectedMapStates = itemsFromGroups(
|
||||
selectedGroups,
|
||||
mapStates,
|
||||
"mapId"
|
||||
);
|
||||
|
||||
setHasSelectedDefaultMap(
|
||||
selectedMaps.some((map) => map.type === "default")
|
||||
);
|
||||
|
||||
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, maps, mapStates, groups]);
|
||||
|
||||
function getSelectedMaps() {
|
||||
const selectedGroups = groupsFromIds(selectedGroupIds, groups);
|
||||
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);
|
||||
await removeMaps(selectedMapIds);
|
||||
onGroupSelect();
|
||||
// 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();
|
||||
// Selected maps and none are default
|
||||
if (
|
||||
selectedMaps.length > 0 &&
|
||||
!selectedMaps.some((map) => map.type === "default")
|
||||
) {
|
||||
setIsMapsResetModalOpen(false);
|
||||
setIsMapsRemoveModalOpen(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
useKeyboard(handleKeyDown);
|
||||
|
||||
if (selectedGroupIds.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
bg="overlay"
|
||||
>
|
||||
<Close
|
||||
title="Clear Selection"
|
||||
aria-label="Clear Selection"
|
||||
onClick={() => onGroupSelect()}
|
||||
/>
|
||||
<Flex>
|
||||
<IconButton
|
||||
aria-label="Reset Selected Map(s)"
|
||||
title="Reset Selected Map(s)"
|
||||
onClick={() => setIsMapsResetModalOpen(true)}
|
||||
disabled={!hasMapState}
|
||||
>
|
||||
<ResetMapIcon />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
aria-label="Remove Selected Map(s)"
|
||||
title="Remove Selected Map(s)"
|
||||
onClick={() => setIsMapsRemoveModalOpen(true)}
|
||||
disabled={hasSelectedDefaultMap}
|
||||
>
|
||||
<RemoveMapIcon />
|
||||
</IconButton>
|
||||
</Flex>
|
||||
<ConfirmModal
|
||||
isOpen={isMapsResetModalOpen}
|
||||
onRequestClose={() => setIsMapsResetModalOpen(false)}
|
||||
onConfirm={handleMapsReset}
|
||||
confirmText="Reset"
|
||||
label="Reset Selected Map(s)"
|
||||
description="This will remove all fog, drawings and tokens from the selected maps."
|
||||
/>
|
||||
<ConfirmModal
|
||||
isOpen={isMapsRemoveModalOpen}
|
||||
onRequestClose={() => setIsMapsRemoveModalOpen(false)}
|
||||
onConfirm={handleMapsRemove}
|
||||
confirmText="Remove"
|
||||
label="Remove Selected Map(s)"
|
||||
description="This operation cannot be undone."
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default MapEditBar;
|
39
src/components/map/SelectMapSelectButton.js
Normal file
39
src/components/map/SelectMapSelectButton.js
Normal file
@ -0,0 +1,39 @@
|
||||
import React from "react";
|
||||
import { Button } from "theme-ui";
|
||||
|
||||
import { useGroup } from "../../contexts/GroupContext";
|
||||
|
||||
import { findGroup } from "../../helpers/group";
|
||||
|
||||
function SelectMapSelectButton({ onMapSelect, disabled }) {
|
||||
const {
|
||||
groups: allGroups,
|
||||
selectedGroupIds,
|
||||
openGroupId,
|
||||
openGroupItems,
|
||||
} = useGroup();
|
||||
|
||||
const groups = openGroupId ? openGroupItems : allGroups;
|
||||
|
||||
function handleSelectClick() {
|
||||
if (selectedGroupIds.length === 1) {
|
||||
const group = findGroup(groups, selectedGroupIds[0]);
|
||||
if (group && group.type === "item") {
|
||||
onMapSelect(group.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="primary"
|
||||
disabled={disabled || selectedGroupIds.length > 1}
|
||||
onClick={handleSelectClick}
|
||||
mt={2}
|
||||
>
|
||||
Select
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export default SelectMapSelectButton;
|
@ -85,6 +85,7 @@ export function TileDragProvider({ onDragAdd, children }) {
|
||||
selectedIndices = selectedIndices.sort((a, b) => a - b);
|
||||
|
||||
if (over.id.startsWith(GROUP_ID_PREFIX)) {
|
||||
onGroupSelect();
|
||||
// Handle tile group
|
||||
const overId = over.id.slice(9);
|
||||
if (overId === active.id) {
|
||||
@ -96,8 +97,8 @@ export function TileDragProvider({ onDragAdd, children }) {
|
||||
moveGroupsInto(groups, overGroupIndex, selectedIndices),
|
||||
openGroupId
|
||||
);
|
||||
onGroupSelect();
|
||||
} else if (over.id.startsWith(UNGROUP_ID_PREFIX)) {
|
||||
onGroupSelect();
|
||||
// Handle tile ungroup
|
||||
const newGroups = ungroup(allGroups, openGroupId, selectedIndices);
|
||||
// Close group if it was removed
|
||||
@ -105,7 +106,6 @@ export function TileDragProvider({ onDragAdd, children }) {
|
||||
onGroupClose();
|
||||
}
|
||||
onGroupsChange(newGroups);
|
||||
onGroupSelect();
|
||||
} else if (over.id.startsWith(ADD_TO_MAP_ID_PREFIX)) {
|
||||
onDragAdd && onDragAdd(selectedGroupIds, over.rect);
|
||||
} else {
|
||||
|
@ -103,6 +103,10 @@ function EditMapModal({
|
||||
|
||||
const layout = useResponsiveLayout();
|
||||
|
||||
if (!map) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { useRef, useState } from "react";
|
||||
import { Button, Flex, Label, Box } from "theme-ui";
|
||||
import { Flex, Label, Box } from "theme-ui";
|
||||
import { useToasts } from "react-toast-notifications";
|
||||
import ReactResizeDetector from "react-resize-detector";
|
||||
|
||||
@ -11,25 +11,24 @@ import ImageDrop from "../components/ImageDrop";
|
||||
import LoadingOverlay from "../components/LoadingOverlay";
|
||||
|
||||
import MapTiles from "../components/map/MapTiles";
|
||||
import MapEditBar from "../components/map/MapEditBar";
|
||||
import SelectMapSelectButton from "../components/map/SelectMapSelectButton";
|
||||
|
||||
import TilesOverlay from "../components/tile/TilesOverlay";
|
||||
import TilesContainer from "../components/tile/TilesContainer";
|
||||
import TilesAddDroppable from "../components/tile/TilesAddDroppable";
|
||||
|
||||
import { groupsFromIds, itemsFromGroups, findGroup } from "../helpers/group";
|
||||
import { findGroup } from "../helpers/group";
|
||||
import { createMapFromFile } from "../helpers/map";
|
||||
|
||||
import useResponsiveLayout from "../hooks/useResponsiveLayout";
|
||||
|
||||
import { useMapData } from "../contexts/MapDataContext";
|
||||
import { useAuth } from "../contexts/AuthContext";
|
||||
import { useKeyboard } from "../contexts/KeyboardContext";
|
||||
import { useAssets } from "../contexts/AssetsContext";
|
||||
import { GroupProvider } from "../contexts/GroupContext";
|
||||
import { TileDragProvider } from "../contexts/TileDragContext";
|
||||
|
||||
import shortcuts from "../shortcuts";
|
||||
|
||||
function SelectMapModal({
|
||||
isOpen,
|
||||
onDone,
|
||||
@ -46,8 +45,6 @@ function SelectMapModal({
|
||||
mapStates,
|
||||
mapGroups,
|
||||
addMap,
|
||||
removeMaps,
|
||||
resetMap,
|
||||
mapsLoading,
|
||||
getMapState,
|
||||
getMap,
|
||||
@ -129,48 +126,6 @@ function SelectMapModal({
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Map Controls
|
||||
*/
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
const [selectedGroupIds, setSelectedGroupIds] = useState([]);
|
||||
|
||||
function getSelectedMaps() {
|
||||
const groups = groupsFromIds(selectedGroupIds, mapGroups);
|
||||
return itemsFromGroups(groups, maps);
|
||||
}
|
||||
|
||||
const [isMapsRemoveModalOpen, setIsMapsRemoveModalOpen] = useState(false);
|
||||
async function handleMapsRemove() {
|
||||
setIsLoading(true);
|
||||
setIsMapsRemoveModalOpen(false);
|
||||
const selectedMaps = getSelectedMaps();
|
||||
const selectedMapIds = selectedMaps.map((map) => map.id);
|
||||
await removeMaps(selectedMapIds);
|
||||
setSelectedGroupIds([]);
|
||||
// Removed the map from the map screen if needed
|
||||
if (currentMap && selectedMapIds.includes(currentMap.id)) {
|
||||
onMapChange(null, null);
|
||||
}
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
const [isMapsResetModalOpen, setIsMapsResetModalOpen] = useState(false);
|
||||
async function handleMapsReset() {
|
||||
setIsLoading(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);
|
||||
}
|
||||
}
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Modal Controls
|
||||
*/
|
||||
@ -179,69 +134,44 @@ function SelectMapModal({
|
||||
onDone();
|
||||
}
|
||||
|
||||
/**
|
||||
* Map Controls
|
||||
*/
|
||||
async function handleMapSelect(mapId) {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
if (mapId) {
|
||||
setIsLoading(true);
|
||||
const map = await getMap(mapId);
|
||||
const mapState = await getMapState(mapId);
|
||||
onMapChange(map, mapState);
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
onMapChange(null, null);
|
||||
}
|
||||
onDone();
|
||||
}
|
||||
|
||||
const [editingMapId, setEditingMapId] = useState();
|
||||
|
||||
const [canAddDraggedMap, setCanAddDraggedMap] = useState(false);
|
||||
function handleGroupsSelect(groupIds) {
|
||||
setSelectedGroupIds(groupIds);
|
||||
if (groupIds.length === 1) {
|
||||
if (!canAddDraggedMap && groupIds.length === 1) {
|
||||
// Only allow adding a map from dragging if there is a single group item selected
|
||||
const group = findGroup(mapGroups, groupIds[0]);
|
||||
setCanAddDraggedMap(group && group.type === "item");
|
||||
} else {
|
||||
} else if (canAddDraggedMap) {
|
||||
setCanAddDraggedMap(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSelectClick() {
|
||||
if (isLoading) {
|
||||
return;
|
||||
}
|
||||
if (selectedGroupIds.length === 1) {
|
||||
const group = findGroup(mapGroups, selectedGroupIds[0]);
|
||||
if (group && group.type === "item") {
|
||||
handleMapSelect(group.id);
|
||||
}
|
||||
} else {
|
||||
onMapChange(null, null);
|
||||
onDone();
|
||||
function handleDragAdd(groupIds) {
|
||||
if (groupIds.length === 1) {
|
||||
handleMapSelect(groupIds[0]);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Shortcuts
|
||||
*/
|
||||
function handleKeyDown(event) {
|
||||
if (!isOpen) {
|
||||
return;
|
||||
}
|
||||
if (shortcuts.delete(event)) {
|
||||
const selectedMaps = getSelectedMaps();
|
||||
// Selected maps and none are default
|
||||
if (
|
||||
selectedMaps.length > 0 &&
|
||||
!selectedMaps.some((map) => map.type === "default")
|
||||
) {
|
||||
// Ensure all other modals are closed
|
||||
setIsEditModalOpen(false);
|
||||
setIsMapsResetModalOpen(false);
|
||||
setIsMapsRemoveModalOpen(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
useKeyboard(handleKeyDown);
|
||||
|
||||
const layout = useResponsiveLayout();
|
||||
|
||||
const [modalSize, setModalSize] = useState({ width: 0, height: 0 });
|
||||
@ -268,6 +198,12 @@ function SelectMapModal({
|
||||
handleWidth
|
||||
handleHeight
|
||||
onResize={handleModalResize}
|
||||
>
|
||||
<GroupProvider
|
||||
groups={mapGroups}
|
||||
onGroupsChange={updateMapGroups}
|
||||
onGroupsSelect={handleGroupsSelect}
|
||||
disabled={!isOpen}
|
||||
>
|
||||
<Flex
|
||||
sx={{
|
||||
@ -278,83 +214,55 @@ function SelectMapModal({
|
||||
Select or import a map
|
||||
</Label>
|
||||
<Box sx={{ position: "relative" }}>
|
||||
<GroupProvider
|
||||
groups={mapGroups}
|
||||
onGroupsChange={updateMapGroups}
|
||||
onGroupsSelect={handleGroupsSelect}
|
||||
disabled={!isOpen}
|
||||
>
|
||||
<TileDragProvider
|
||||
onDragAdd={canAddDraggedMap && handleSelectClick}
|
||||
>
|
||||
<TileDragProvider onDragAdd={canAddDraggedMap && handleDragAdd}>
|
||||
<TilesAddDroppable containerSize={modalSize} />
|
||||
<TilesContainer>
|
||||
<MapTiles
|
||||
maps={maps}
|
||||
onMapEdit={() => setIsEditModalOpen(true)}
|
||||
onMapEdit={setEditingMapId}
|
||||
onMapSelect={handleMapSelect}
|
||||
/>
|
||||
</TilesContainer>
|
||||
</TileDragProvider>
|
||||
<TileDragProvider
|
||||
onDragAdd={canAddDraggedMap && handleSelectClick}
|
||||
>
|
||||
<TileDragProvider onDragAdd={canAddDraggedMap && handleDragAdd}>
|
||||
<TilesAddDroppable containerSize={modalSize} />
|
||||
<TilesOverlay>
|
||||
<MapTiles
|
||||
maps={maps}
|
||||
onMapEdit={() => setIsEditModalOpen(true)}
|
||||
onMapEdit={setEditingMapId}
|
||||
onMapSelect={handleMapSelect}
|
||||
subgroup
|
||||
/>
|
||||
</TilesOverlay>
|
||||
</TileDragProvider>
|
||||
</GroupProvider>
|
||||
<MapEditBar
|
||||
currentMap={currentMap}
|
||||
disabled={isLoading || editingMapId}
|
||||
onMapChange={onMapChange}
|
||||
onMapReset={onMapReset}
|
||||
onLoad={setIsLoading}
|
||||
/>
|
||||
</Box>
|
||||
<Button
|
||||
variant="primary"
|
||||
disabled={isLoading || selectedGroupIds.length > 1}
|
||||
onClick={handleSelectClick}
|
||||
mt={2}
|
||||
>
|
||||
Select
|
||||
</Button>
|
||||
<SelectMapSelectButton
|
||||
onMapSelect={handleMapSelect}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</Flex>
|
||||
</GroupProvider>
|
||||
</ReactResizeDetector>
|
||||
</ImageDrop>
|
||||
{(isLoading || mapsLoading) && <LoadingOverlay bg="overlay" />}
|
||||
<EditMapModal
|
||||
isOpen={isEditModalOpen}
|
||||
onDone={() => setIsEditModalOpen(false)}
|
||||
map={
|
||||
selectedGroupIds.length === 1 &&
|
||||
maps.find((map) => map.id === selectedGroupIds[0])
|
||||
}
|
||||
isOpen={!!editingMapId}
|
||||
onDone={() => setEditingMapId()}
|
||||
map={editingMapId && maps.find((map) => map.id === editingMapId)}
|
||||
mapState={
|
||||
selectedGroupIds.length === 1 &&
|
||||
mapStates.find((state) => state.mapId === selectedGroupIds[0])
|
||||
editingMapId &&
|
||||
mapStates.find((state) => state.mapId === editingMapId)
|
||||
}
|
||||
onUpdateMap={updateMap}
|
||||
onUpdateMapState={updateMapState}
|
||||
/>
|
||||
<ConfirmModal
|
||||
isOpen={isMapsResetModalOpen}
|
||||
onRequestClose={() => setIsMapsResetModalOpen(false)}
|
||||
onConfirm={handleMapsReset}
|
||||
confirmText="Reset"
|
||||
label={`Reset ${selectedGroupIds.length} Map${
|
||||
selectedGroupIds.length > 1 ? "s" : ""
|
||||
}`}
|
||||
description="This will remove all fog, drawings and tokens from the selected maps."
|
||||
/>
|
||||
<ConfirmModal
|
||||
isOpen={isMapsRemoveModalOpen}
|
||||
onRequestClose={() => setIsMapsRemoveModalOpen(false)}
|
||||
onConfirm={handleMapsRemove}
|
||||
confirmText="Remove"
|
||||
label="Remove Map(s)"
|
||||
description="This operation cannot be undone."
|
||||
/>
|
||||
<ConfirmModal
|
||||
isOpen={isLargeImageWarningModalOpen}
|
||||
onRequestClose={handleLargeImageWarningCancel}
|
||||
|
Loading…
Reference in New Issue
Block a user