Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added checks for zero grid sizes

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-10-09 12:57:48 +11:00
parent 400ccc43fe
commit f5c1cf8c98
3 changed files with 48 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/map/MapGrid.js
View File

@ -11,6 +11,8 @@ import { getStrokeWidth } from "../../helpers/drawing";
import { getImageLightness } from "../../helpers/image";
function MapGrid({ map, strokeWidth }) {
const { mapWidth, mapHeight } = useContext(MapInteractionContext);
let mapSourceMap = map;
// Use lowest resolution for grid lightness
if (map && map.type === "file" && map.resolutions) {
@ -22,16 +24,28 @@ function MapGrid({ map, strokeWidth }) {
const mapSource = useDataSource(mapSourceMap, defaultMapSources);
const [mapImage, mapLoadingStatus] = useImage(mapSource);
const [isImageLight, setIsImageLight] = useState(true);
// When the map changes find the average lightness of its pixels
useEffect(() => {
if (mapLoadingStatus === "loaded") {
setIsImageLight(getImageLightness(mapImage));
}
}, [mapImage, mapLoadingStatus]);
const gridX = map && map.grid.size.x;
const gridY = map && map.grid.size.y;
if (!gridX || !gridY) {
return null;
}
const gridSizeNormalized = {
x: gridX ? 1 / gridX : 0,
y: gridY ? 1 / gridY : 0,
x: 1 / gridX,
y: 1 / gridY,
};
const gridInset = map && map.grid.inset;
const { mapWidth, mapHeight } = useContext(MapInteractionContext);
const insetWidth = (gridInset.bottomRight.x - gridInset.topLeft.x) * mapWidth;
const insetHeight =
(gridInset.bottomRight.y - gridInset.topLeft.y) * mapHeight;
@ -42,15 +56,6 @@ function MapGrid({ map, strokeWidth }) {
const offsetX = gridInset.topLeft.x * mapWidth * -1;
const offsetY = gridInset.topLeft.y * mapHeight * -1;
const [isImageLight, setIsImageLight] = useState(true);
// When the map changes find the average lightness of its pixels
useEffect(() => {
if (mapLoadingStatus === "loaded") {
setIsImageLight(getImageLightness(mapImage));
}
}, [mapImage, mapLoadingStatus]);
const lines = [];
for (let x = 1; x < gridX; x++) {
lines.push(

37
src/components/map/MapGridEditor.js
View File

@ -15,6 +15,24 @@ function MapGridEditor({ map, onGridChange }) {
const mapSize = { x: mapWidth, y: mapHeight };
function getHandlePositions() {
const topLeft = Vector2.multiply(map.grid.inset.topLeft, mapSize);
const bottomRight = Vector2.multiply(map.grid.inset.bottomRight, mapSize);
const size = Vector2.subtract(bottomRight, topLeft);
const offset = Vector2.multiply(topLeft, -1);
return {
topLeft,
topRight: { x: bottomRight.x, y: topLeft.y },
bottomRight,
bottomLeft: { x: topLeft.x, y: bottomRight.y },
size,
offset,
};
}
const handlePositions = getHandlePositions();
const handlePreviousPositionRef = useRef();
function handleScaleCircleDragStart(event) {
@ -127,23 +145,6 @@ function MapGridEditor({ map, onGridChange }) {
}
}
function getHandlePositions() {
const topLeft = Vector2.multiply(map.grid.inset.topLeft, mapSize);
const bottomRight = Vector2.multiply(map.grid.inset.bottomRight, mapSize);
const size = Vector2.subtract(bottomRight, topLeft);
const offset = Vector2.multiply(topLeft, -1);
return {
topLeft,
topRight: { x: bottomRight.x, y: topLeft.y },
bottomRight,
bottomLeft: { x: topLeft.x, y: bottomRight.y },
size,
offset,
};
}
function getHandleNormalizedPosition(handle) {
return Vector2.divide({ x: handle.x(), y: handle.y() }, mapSize);
}
@ -174,8 +175,6 @@ function MapGridEditor({ map, onGridChange }) {
strokeWidth: editCircleRadius / 10,
};
const handlePositions = getHandlePositions();
return (
<Group>
<Rect

20
src/components/map/MapSettings.js
View File

@ -36,14 +36,16 @@ function MapSettings({
}
function handleGridSizeXChange(event) {
const value = parseInt(event.target.value);
const value = parseInt(event.target.value) || 0;
const gridY = map.grid.size.y;
let inset = map.grid.inset;
const gridScale =
((inset.bottomRight.x - inset.topLeft.x) * map.width) / value;
inset.bottomRight.y = (gridY * gridScale) / map.height;
if (value > 0) {
const gridScale =
((inset.bottomRight.x - inset.topLeft.x) * map.width) / value;
inset.bottomRight.y = (gridY * gridScale) / map.height;
}
onSettingsChange("grid", {
...map.grid,
@ -56,14 +58,16 @@ function MapSettings({
}
function handleGridSizeYChange(event) {
const value = parseInt(event.target.value);
const value = parseInt(event.target.value) || 0;
const gridX = map.grid.size.x;
let inset = map.grid.inset;
const gridScale =
((inset.bottomRight.x - inset.topLeft.x) * map.width) / gridX;
inset.bottomRight.y = (value * gridScale) / map.height;
if (value > 0) {
const gridScale =
((inset.bottomRight.x - inset.topLeft.x) * map.width) / gridX;
inset.bottomRight.y = (value * gridScale) / map.height;
}
onSettingsChange("grid", {
...map.grid,