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,
} 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 */}
<AuthContext.Provider value={auth}>
<SettingsContext.Provider value={settings}>
<MapInteractionProvider value={mapInteraction}>
<MapStageProvider value={mapStageRef}>
{mapLoaded && children}
</MapStageProvider>
</MapInteractionProvider>
</SettingsContext.Provider>
</AuthContext.Provider>
</Layer>
</Stage>

View File

@ -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(() => {

View File

@ -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 }) {
<Modal isOpen={isOpen} onRequestClose={onRequestClose}>
<Flex sx={{ flexDirection: "column" }}>
<Label py={2}>Settings</Label>
<Divider bg="text" />
<Label py={2}>Accesibility:</Label>
<Label py={2}>
Light theme
<span style={{ marginRight: "4px" }}>Light theme</span>
<Checkbox
checked={colorMode === "light"}
onChange={(e) =>
setColorMode(e.target.checked ? "light" : "default")
}
pl={1}
/>
</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}>
<Button sx={{ flexGrow: 1 }} onClick={handleClearCache}>
Clear cache

View File

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