diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js index cc0d749..0b1aba5 100644 --- a/src/components/map/MapInteraction.js +++ b/src/components/map/MapInteraction.js @@ -17,6 +17,7 @@ import MapStageContext, { MapStageProvider, } from "../../contexts/MapStageContext"; import AuthContext from "../../contexts/AuthContext"; +import SettingsContext from "../../contexts/SettingsContext"; const wheelZoomSpeed = -0.001; const touchZoomSpeed = 0.005; @@ -313,6 +314,7 @@ function MapInteraction({ const mapImageRef = useRef(); const auth = useContext(AuthContext); + const settings = useContext(SettingsContext); const mapInteraction = { stageScale, @@ -357,11 +359,13 @@ function MapInteraction({ /> {/* Forward auth context to konva elements */} - - - {mapLoaded && children} - - + + + + {mapLoaded && children} + + + diff --git a/src/components/token/TokenLabel.js b/src/components/token/TokenLabel.js index 74c5e9d..bc107fe 100644 --- a/src/components/token/TokenLabel.js +++ b/src/components/token/TokenLabel.js @@ -1,15 +1,25 @@ import React, { useRef, useEffect, useState } from "react"; import { Rect, Text, Group } from "react-konva"; +import useSetting from "../../helpers/useSetting"; + const maxTokenSize = 3; function TokenLabel({ tokenState, width, height }) { + const [labelSize] = useSetting("map.labelSize"); + const fontSize = - (height / 6 / tokenState.size) * Math.min(tokenState.size, maxTokenSize); + (height / 6 / tokenState.size) * + Math.min(tokenState.size, maxTokenSize) * + labelSize; const paddingY = - (height / 16 / tokenState.size) * Math.min(tokenState.size, maxTokenSize); + (height / 16 / tokenState.size) * + Math.min(tokenState.size, maxTokenSize) * + labelSize; const paddingX = - (height / 8 / tokenState.size) * Math.min(tokenState.size, maxTokenSize); + (height / 8 / tokenState.size) * + Math.min(tokenState.size, maxTokenSize) * + labelSize; const [rectWidth, setRectWidth] = useState(0); useEffect(() => { diff --git a/src/modals/SettingsModal.js b/src/modals/SettingsModal.js index 0a9316b..2cfde8c 100644 --- a/src/modals/SettingsModal.js +++ b/src/modals/SettingsModal.js @@ -1,15 +1,27 @@ import React, { useState, useContext } from "react"; -import { Box, Label, Flex, Button, useColorMode, Checkbox } from "theme-ui"; +import { + Box, + Label, + Flex, + Button, + useColorMode, + Checkbox, + Slider, + Divider, +} from "theme-ui"; import Modal from "../components/Modal"; import AuthContext from "../contexts/AuthContext"; import DatabaseContext from "../contexts/DatabaseContext"; +import useSetting from "../helpers/useSetting"; + function SettingsModal({ isOpen, onRequestClose }) { const { database } = useContext(DatabaseContext); const { userId } = useContext(AuthContext); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); + const [labelSize, setLabelSize] = useSetting("map.labelSize"); async function handleEraseAllData() { localStorage.clear(); @@ -52,16 +64,30 @@ function SettingsModal({ isOpen, onRequestClose }) { + + + +