From 539f216cfefde61a44e7edd3650349a301740d74 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Fri, 2 Oct 2020 15:19:10 +1000 Subject: [PATCH] Added grid scale and offset to maps and refactored into grid object --- src/components/map/Map.js | 4 ++-- src/components/map/MapGrid.js | 4 ++-- src/components/map/MapSettings.js | 23 +++++++++++++++-------- src/components/map/MapTiles.js | 2 +- src/components/map/MapToken.js | 5 ++++- src/contexts/MapDataContext.js | 1 - src/database.js | 11 ++++++++++- src/maps/index.js | 8 ++++++-- src/modals/SelectMapModal.js | 10 ++++++---- 9 files changed, 46 insertions(+), 22 deletions(-) diff --git a/src/components/map/Map.js b/src/components/map/Map.js index e1c8f73..4b31a7b 100644 --- a/src/components/map/Map.js +++ b/src/components/map/Map.js @@ -40,8 +40,8 @@ function Map({ }) { const { tokensById } = useContext(TokenDataContext); - const gridX = map && map.gridX; - const gridY = map && map.gridY; + const gridX = map && map.grid.size.x; + const gridY = map && map.grid.size.y; const gridSizeNormalized = { x: gridX ? 1 / gridX : 0, y: gridY ? 1 / gridY : 0, diff --git a/src/components/map/MapGrid.js b/src/components/map/MapGrid.js index b968e47..f809f61 100644 --- a/src/components/map/MapGrid.js +++ b/src/components/map/MapGrid.js @@ -22,8 +22,8 @@ function MapGrid({ map, gridSize }) { const mapSource = useDataSource(mapSourceMap, defaultMapSources); const [mapImage, mapLoadingStatus] = useImage(mapSource); - const gridX = map && map.gridX; - const gridY = map && map.gridY; + const gridX = map && map.grid.size.x; + const gridY = map && map.grid.size.y; const { mapWidth, mapHeight } = useContext(MapInteractionContext); diff --git a/src/components/map/MapSettings.js b/src/components/map/MapSettings.js index 01233de..4f1fa3e 100644 --- a/src/components/map/MapSettings.js +++ b/src/components/map/MapSettings.js @@ -35,6 +35,17 @@ function MapSettings({ } } + function handleGridSizeChange(event, dimension) { + const value = parseInt(event.target.value); + onSettingsChange("grid", { + ...map.grid, + size: { + ...map.grid.size, + [dimension]: value, + }, + }); + } + function getMapSize() { let size = 0; if (map.quality === "original") { @@ -57,10 +68,8 @@ function MapSettings({ - onSettingsChange("gridX", parseInt(e.target.value)) - } + value={`${(map && map.grid.size.x) || 0}`} + onChange={(e) => handleGridSizeChange(e, "x")} disabled={mapEmpty || map.type === "default"} min={1} my={1} @@ -71,10 +80,8 @@ function MapSettings({ - onSettingsChange("gridY", parseInt(e.target.value)) - } + value={`${(map && map.grid.size.y) || 0}`} + onChange={(e) => handleGridSizeChange(e, "y")} disabled={mapEmpty || map.type === "default"} min={1} my={1} diff --git a/src/components/map/MapTiles.js b/src/components/map/MapTiles.js index 61915a3..5b014ac 100644 --- a/src/components/map/MapTiles.js +++ b/src/components/map/MapTiles.js @@ -68,7 +68,7 @@ function MapTiles({ canEdit={ isSelected && selectMode === "single" && selectedMaps.length === 1 } - badges={[`${map.gridX}x${map.gridY}`]} + badges={[`${map.grid.size.x}x${map.grid.size.y}`]} /> ); } diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js index 77877d1..0eab316 100644 --- a/src/components/map/MapToken.js +++ b/src/components/map/MapToken.js @@ -86,7 +86,10 @@ function MapToken({ x: tokenGroup.x() + tokenGroup.width() / 2, y: tokenGroup.y() + tokenGroup.height() / 2, }; - const gridSize = { x: mapWidth / map.gridX, y: mapHeight / map.gridY }; + const gridSize = { + x: mapWidth / map.grid.size.x, + y: mapHeight / map.grid.size.y, + }; const gridSnap = Vector2.roundTo(position, gridSize); const gridDistance = Vector2.length(Vector2.subtract(gridSnap, position)); const minGrid = Vector2.min(gridSize); diff --git a/src/contexts/MapDataContext.js b/src/contexts/MapDataContext.js index fe81c14..92488de 100644 --- a/src/contexts/MapDataContext.js +++ b/src/contexts/MapDataContext.js @@ -45,7 +45,6 @@ export function MapDataProvider({ children }) { // Emulate the time increasing to avoid sort errors created: Date.now() + i, lastModified: Date.now() + i, - gridType: "grid", showGrid: false, snapToGrid: true, group: "default", diff --git a/src/database.js b/src/database.js index d2c92e1..9af1e57 100644 --- a/src/database.js +++ b/src/database.js @@ -206,7 +206,7 @@ function loadVersions(db) { token.lastUsed = token.lastModified; }); }); - // v1.6.0 - Added map grouping + // v1.6.0 - Added map grouping and grid scale and offset db.version(13) .stores({}) .upgrade((tx) => { @@ -215,6 +215,15 @@ function loadVersions(db) { .toCollection() .modify((map) => { map.group = ""; + map.grid = { + size: { x: map.gridX, y: map.gridY }, + scale: { x: 1, y: 1 }, + offset: { x: 0, y: 0 }, + type: "square", + }; + delete map.gridX; + delete map.gridY; + delete map.gridType; }); }); // v1.6.0 - Added token grouping diff --git a/src/maps/index.js b/src/maps/index.js index 8f1bbbf..d008524 100644 --- a/src/maps/index.js +++ b/src/maps/index.js @@ -21,8 +21,12 @@ export const mapSources = { export const maps = Object.keys(mapSources).map((key) => ({ key, name: Case.capital(key), - gridX: 22, - gridY: 22, + grid: { + size: { x: 22, y: 22 }, + scale: { x: 1, y: 1 }, + offset: { x: 0, y: 0 }, + type: "square", + }, width: 1024, height: 1024, type: "default", diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js index 86edd84..d7ace9d 100644 --- a/src/modals/SelectMapModal.js +++ b/src/modals/SelectMapModal.js @@ -21,8 +21,6 @@ import AuthContext from "../contexts/AuthContext"; const defaultMapSize = 22; const defaultMapProps = { // Grid type - // TODO: add support for hex horizontal and hex vertical - gridType: "grid", showGrid: false, snapToGrid: true, quality: "original", @@ -167,8 +165,12 @@ function SelectMapModal({ resolutions, name, type: "file", - gridX: fileGridX, - gridY: fileGridY, + grid: { + size: { x: fileGridX, y: fileGridY }, + scale: { x: 1, y: 1 }, + offset: { x: 0, y: 0 }, + type: "square", + }, width: image.width, height: image.height, id: shortid.generate(),