From faddf03ecf9906a1c0a6628195a0afa5015585a0 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Sun, 31 May 2020 16:25:05 +1000 Subject: [PATCH] Added show map grid option to maps --- src/components/map/Map.js | 6 ++ src/components/map/MapGrid.js | 93 +++++++++++++++++++++++++++++++ src/components/map/MapSettings.js | 33 +++++++---- src/contexts/MapDataContext.js | 1 + src/database.js | 11 ++++ src/modals/SelectMapModal.js | 1 + 6 files changed, 135 insertions(+), 10 deletions(-) create mode 100644 src/components/map/MapGrid.js diff --git a/src/components/map/Map.js b/src/components/map/Map.js index 9be30fb..38b54dc 100644 --- a/src/components/map/Map.js +++ b/src/components/map/Map.js @@ -6,6 +6,7 @@ import MapToken from "./MapToken"; import MapDrawing from "./MapDrawing"; import MapFog from "./MapFog"; import MapDice from "./MapDice"; +import MapGrid from "./MapGrid"; import TokenDataContext from "../../contexts/TokenDataContext"; import MapLoadingContext from "../../contexts/MapLoadingContext"; @@ -294,6 +295,10 @@ function Map({ /> ); + const mapGrid = map && map.showGrid && ( + + ); + return ( + {mapGrid} {mapDrawing} {mapTokens} {mapFog} diff --git a/src/components/map/MapGrid.js b/src/components/map/MapGrid.js new file mode 100644 index 0000000..06df57a --- /dev/null +++ b/src/components/map/MapGrid.js @@ -0,0 +1,93 @@ +import React, { useContext, useEffect, useState } from "react"; +import { Line, Group } from "react-konva"; +import useImage from "use-image"; + +import MapInteractionContext from "../../contexts/MapInteractionContext"; + +import useDataSource from "../../helpers/useDataSource"; +import { mapSources as defaultMapSources } from "../../maps"; + +import { getStrokeWidth } from "../../helpers/drawing"; + +const lightnessDetectionOffset = 0.1; + +function MapGrid({ map, gridSize }) { + const mapSource = useDataSource(map, defaultMapSources); + const [mapImage, mapLoadingStatus] = useImage(mapSource); + + const gridX = map && map.gridX; + const gridY = map && map.gridY; + + const { mapWidth, mapHeight } = useContext(MapInteractionContext); + + const lineSpacingX = mapWidth / gridX; + const lineSpacingY = mapHeight / gridY; + + const [isImageLight, setIsImageLight] = useState(true); + + // When the map changes find the average lightness of its pixels + useEffect(() => { + if (mapLoadingStatus === "loaded") { + const imageWidth = mapImage.width; + const imageHeight = mapImage.height; + let canvas = document.createElement("canvas"); + canvas.width = imageWidth; + canvas.height = imageHeight; + let context = canvas.getContext("2d"); + context.drawImage(mapImage, 0, 0); + const imageData = context.getImageData(0, 0, imageWidth, imageHeight); + + const data = imageData.data; + let lightPixels = 0; + let darkPixels = 0; + // Loop over every pixels rgba values + for (let i = 0; i < data.length; i += 4) { + const r = data[i]; + const g = data[i + 1]; + const b = data[i + 2]; + + const max = Math.max(Math.max(r, g), b); + if (max < 128) { + darkPixels++; + } else { + lightPixels++; + } + } + + const norm = (lightPixels - darkPixels) / (imageWidth * imageHeight); + if (norm + lightnessDetectionOffset < 0) { + setIsImageLight(false); + } else { + setIsImageLight(true); + } + } + }, [mapImage, mapLoadingStatus]); + + const lines = []; + for (let x = 1; x < gridX; x++) { + lines.push( + + ); + } + for (let y = 1; y < gridY; y++) { + lines.push( + + ); + } + + return {lines}; +} + +export default MapGrid; diff --git a/src/components/map/MapSettings.js b/src/components/map/MapSettings.js index dcefccb..1861bd4 100644 --- a/src/components/map/MapSettings.js +++ b/src/components/map/MapSettings.js @@ -3,6 +3,8 @@ import { Flex, Box, Label, Input, Checkbox, IconButton } from "theme-ui"; import ExpandMoreIcon from "../../icons/ExpandMoreIcon"; +import Divider from "../Divider"; + function MapSettings({ map, mapState, @@ -57,6 +59,27 @@ function MapSettings({ {showMore && ( <> + + onSettingsChange("name", e.target.value)} + disabled={!map || map.type === "default"} + my={1} + /> + + + + + + - - - onSettingsChange("name", e.target.value)} - disabled={!map || map.type === "default"} - my={1} - /> - )} { + return tx + .table("maps") + .toCollection() + .modify((map) => { + map.showGrid = false; + }); + }); } // Get the dexie database used in DatabaseContext diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js index d721f6e..bebe250 100644 --- a/src/modals/SelectMapModal.js +++ b/src/modals/SelectMapModal.js @@ -17,6 +17,7 @@ const defaultMapProps = { // Grid type // TODO: add support for hex horizontal and hex vertical gridType: "grid", + showGrid: false, }; function SelectMapModal({