Added token label size setting

This commit is contained in:
Mitchell McCaffrey 2020-09-08 15:06:15 +10:00
parent 170a8072c5
commit 73180ee1cd
4 changed files with 56 additions and 13 deletions

View File

@ -17,6 +17,7 @@ import MapStageContext, {
MapStageProvider, MapStageProvider,
} from "../../contexts/MapStageContext"; } from "../../contexts/MapStageContext";
import AuthContext from "../../contexts/AuthContext"; import AuthContext from "../../contexts/AuthContext";
import SettingsContext from "../../contexts/SettingsContext";
const wheelZoomSpeed = -0.001; const wheelZoomSpeed = -0.001;
const touchZoomSpeed = 0.005; const touchZoomSpeed = 0.005;
@ -313,6 +314,7 @@ function MapInteraction({
const mapImageRef = useRef(); const mapImageRef = useRef();
const auth = useContext(AuthContext); const auth = useContext(AuthContext);
const settings = useContext(SettingsContext);
const mapInteraction = { const mapInteraction = {
stageScale, stageScale,
@ -357,11 +359,13 @@ function MapInteraction({
/> />
{/* Forward auth context to konva elements */} {/* Forward auth context to konva elements */}
<AuthContext.Provider value={auth}> <AuthContext.Provider value={auth}>
<SettingsContext.Provider value={settings}>
<MapInteractionProvider value={mapInteraction}> <MapInteractionProvider value={mapInteraction}>
<MapStageProvider value={mapStageRef}> <MapStageProvider value={mapStageRef}>
{mapLoaded && children} {mapLoaded && children}
</MapStageProvider> </MapStageProvider>
</MapInteractionProvider> </MapInteractionProvider>
</SettingsContext.Provider>
</AuthContext.Provider> </AuthContext.Provider>
</Layer> </Layer>
</Stage> </Stage>

View File

@ -1,15 +1,25 @@
import React, { useRef, useEffect, useState } from "react"; import React, { useRef, useEffect, useState } from "react";
import { Rect, Text, Group } from "react-konva"; import { Rect, Text, Group } from "react-konva";
import useSetting from "../../helpers/useSetting";
const maxTokenSize = 3; const maxTokenSize = 3;
function TokenLabel({ tokenState, width, height }) { function TokenLabel({ tokenState, width, height }) {
const [labelSize] = useSetting("map.labelSize");
const fontSize = const fontSize =
(height / 6 / tokenState.size) * Math.min(tokenState.size, maxTokenSize); (height / 6 / tokenState.size) *
Math.min(tokenState.size, maxTokenSize) *
labelSize;
const paddingY = const paddingY =
(height / 16 / tokenState.size) * Math.min(tokenState.size, maxTokenSize); (height / 16 / tokenState.size) *
Math.min(tokenState.size, maxTokenSize) *
labelSize;
const paddingX = 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); const [rectWidth, setRectWidth] = useState(0);
useEffect(() => { useEffect(() => {

View File

@ -1,15 +1,27 @@
import React, { useState, useContext } from "react"; 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 Modal from "../components/Modal";
import AuthContext from "../contexts/AuthContext"; import AuthContext from "../contexts/AuthContext";
import DatabaseContext from "../contexts/DatabaseContext"; import DatabaseContext from "../contexts/DatabaseContext";
import useSetting from "../helpers/useSetting";
function SettingsModal({ isOpen, onRequestClose }) { function SettingsModal({ isOpen, onRequestClose }) {
const { database } = useContext(DatabaseContext); const { database } = useContext(DatabaseContext);
const { userId } = useContext(AuthContext); const { userId } = useContext(AuthContext);
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
const [labelSize, setLabelSize] = useSetting("map.labelSize");
async function handleEraseAllData() { async function handleEraseAllData() {
localStorage.clear(); localStorage.clear();
@ -52,16 +64,30 @@ function SettingsModal({ isOpen, onRequestClose }) {
<Modal isOpen={isOpen} onRequestClose={onRequestClose}> <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
<Flex sx={{ flexDirection: "column" }}> <Flex sx={{ flexDirection: "column" }}>
<Label py={2}>Settings</Label> <Label py={2}>Settings</Label>
<Divider bg="text" />
<Label py={2}>Accesibility:</Label>
<Label py={2}> <Label py={2}>
Light theme <span style={{ marginRight: "4px" }}>Light theme</span>
<Checkbox <Checkbox
checked={colorMode === "light"} checked={colorMode === "light"}
onChange={(e) => onChange={(e) =>
setColorMode(e.target.checked ? "light" : "default") setColorMode(e.target.checked ? "light" : "default")
} }
pl={1}
/> />
</Label> </Label>
<Label py={2}>
Token Label Size
<Slider
step={0.5}
min={1}
max={3}
ml={1}
sx={{ width: "initial" }}
value={labelSize}
onChange={(e) => setLabelSize(parseFloat(e.target.value))}
/>
</Label>
<Divider bg="text" />
<Flex py={2}> <Flex py={2}>
<Button sx={{ flexGrow: 1 }} onClick={handleClearCache}> <Button sx={{ flexGrow: 1 }} onClick={handleClearCache}>
Clear cache Clear cache

View File

@ -27,8 +27,11 @@ function loadVersions(settings) {
style: "galaxy", style: "galaxy",
}, },
})); }));
// v1.5.2 - Added full screen support for map // v1.5.2 - Added full screen support for map and label size
settings.version(2, (prev) => ({ ...prev, map: { fullScreen: false } })); settings.version(2, (prev) => ({
...prev,
map: { fullScreen: false, labelSize: 1 },
}));
} }
export function getSettings() { export function getSettings() {