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

Add back map edit bar and refactor select map modal edit functions

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-06-04 21:54:26 +10:00
parent e508511ab5
commit 0f2776d774
5 changed files with 283 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
src/components/map/MapEditBar.js Normal file
View 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
View 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;

4
src/contexts/TileDragContext.js
View File

@ -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 {

4
src/modals/EditMapModal.js
View File

@ -103,6 +103,10 @@ function EditMapModal({
const layout = useResponsiveLayout();
if (!map) {
return null;
}
return (
<Modal
isOpen={isOpen}

182
src/modals/SelectMapModal.js
View File

@ -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}