From b3bf3c359846a96a3cbf2c3f8155d4421a356f84 Mon Sep 17 00:00:00 2001 From: Mitchell McCaffrey Date: Tue, 28 Apr 2020 11:31:01 +1000 Subject: [PATCH] Made grid snapping have a threshold and removed the option to toggle it on and off --- src/components/map/Map.js | 4 +--- src/components/map/MapDrawing.js | 4 ++-- .../map/controls/BrushToolSettings.js | 7 ------- .../map/controls/FogToolSettings.js | 7 ------- .../map/controls/GridSnappingToggle.js | 21 ------------------- .../map/controls/ShapeToolSettings.js | 7 ------- src/helpers/drawing.js | 20 +++++++++--------- src/helpers/shared.js | 7 ------- src/helpers/vector2.js | 9 +++++++- src/icons/GridOffIcon.js | 20 ------------------ src/icons/GridOnIcon.js | 20 ------------------ 11 files changed, 21 insertions(+), 105 deletions(-) delete mode 100644 src/components/map/controls/GridSnappingToggle.js delete mode 100644 src/icons/GridOffIcon.js delete mode 100644 src/icons/GridOnIcon.js diff --git a/src/components/map/Map.js b/src/components/map/Map.js index 9fc32f0..4dfa503 100644 --- a/src/components/map/Map.js +++ b/src/components/map/Map.js @@ -49,18 +49,16 @@ function Map({ const [selectedToolId, setSelectedToolId] = useState("pan"); const [toolSettings, setToolSettings] = useState({ - fog: { type: "add", useGridSnapping: false, useEdgeSnapping: true }, + fog: { type: "add", useEdgeSnapping: true }, brush: { color: "darkGray", type: "stroke", useBlending: false, - useGridSnapping: false, }, shape: { color: "red", type: "rectangle", useBlending: true, - useGridSnapping: false, }, }); function handleToolSettingChange(tool, change) { diff --git a/src/components/map/MapDrawing.js b/src/components/map/MapDrawing.js index 57033c3..42b2e25 100644 --- a/src/components/map/MapDrawing.js +++ b/src/components/map/MapDrawing.js @@ -56,7 +56,7 @@ function MapDrawing({ setIsDrawing(true); const brushPosition = getBrushPositionForTool( position, - toolSettings, + selectedTool, gridSize, shapes ); @@ -97,7 +97,7 @@ function MapDrawing({ setPointerPosition(position); const brushPosition = getBrushPositionForTool( position, - toolSettings, + selectedTool, gridSize, shapes ); diff --git a/src/components/map/controls/BrushToolSettings.js b/src/components/map/controls/BrushToolSettings.js index 95996f4..b503972 100644 --- a/src/components/map/controls/BrushToolSettings.js +++ b/src/components/map/controls/BrushToolSettings.js @@ -3,7 +3,6 @@ import { Flex } from "theme-ui"; import ColorControl from "./ColorControl"; import AlphaBlendToggle from "./AlphaBlendToggle"; -import GridSnappingToggle from "./GridSnappingToggle"; import RadioIconButton from "./RadioIconButton"; import BrushStrokeIcon from "../../../icons/BrushStrokeIcon"; @@ -38,12 +37,6 @@ function BrushToolSettings({ settings, onSettingChange }) { useBlending={settings.useBlending} onBlendingChange={(useBlending) => onSettingChange({ useBlending })} /> - - onSettingChange({ useGridSnapping }) - } - /> ); } diff --git a/src/components/map/controls/FogToolSettings.js b/src/components/map/controls/FogToolSettings.js index ecb6a79..0dbb11b 100644 --- a/src/components/map/controls/FogToolSettings.js +++ b/src/components/map/controls/FogToolSettings.js @@ -1,7 +1,6 @@ import React from "react"; import { Flex } from "theme-ui"; -import GridSnappingToggle from "./GridSnappingToggle"; import EdgeSnappingToggle from "./EdgeSnappingToggle"; import RadioIconButton from "./RadioIconButton"; @@ -36,12 +35,6 @@ function BrushToolSettings({ settings, onSettingChange }) { - - onSettingChange({ useGridSnapping }) - } - /> diff --git a/src/components/map/controls/GridSnappingToggle.js b/src/components/map/controls/GridSnappingToggle.js deleted file mode 100644 index b09232a..0000000 --- a/src/components/map/controls/GridSnappingToggle.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from "react"; -import { IconButton } from "theme-ui"; - -import GridOnIcon from "../../../icons/GridOnIcon"; -import GridOffIcon from "../../../icons/GridOffIcon"; - -function GridSnappingToggle({ useGridSnapping, onGridSnappingChange }) { - return ( - onGridSnappingChange(!useGridSnapping)} - > - {useGridSnapping ? : } - - ); -} - -export default GridSnappingToggle; diff --git a/src/components/map/controls/ShapeToolSettings.js b/src/components/map/controls/ShapeToolSettings.js index bf50aa8..b332ca9 100644 --- a/src/components/map/controls/ShapeToolSettings.js +++ b/src/components/map/controls/ShapeToolSettings.js @@ -3,7 +3,6 @@ import { Flex } from "theme-ui"; import ColorControl from "./ColorControl"; import AlphaBlendToggle from "./AlphaBlendToggle"; -import GridSnappingToggle from "./GridSnappingToggle"; import RadioIconButton from "./RadioIconButton"; import ShapeRectangleIcon from "../../../icons/ShapeRectangleIcon"; @@ -46,12 +45,6 @@ function ShapeToolSettings({ settings, onSettingChange }) { useBlending={settings.useBlending} onBlendingChange={(useBlending) => onSettingChange({ useBlending })} /> - - onSettingChange({ useGridSnapping }) - } - /> ); } diff --git a/src/helpers/drawing.js b/src/helpers/drawing.js index e12b213..e0b8f5f 100644 --- a/src/helpers/drawing.js +++ b/src/helpers/drawing.js @@ -1,17 +1,17 @@ -import { snapPositionToGrid } from "./shared"; import * as Vector2 from "./vector2"; import { toDegrees } from "./shared"; import colors from "./colors"; -export function getBrushPositionForTool( - brushPosition, - settings, - gridSize, - shapes -) { +const snappingThreshold = 1 / 5; +export function getBrushPositionForTool(brushPosition, tool, gridSize, shapes) { let position = brushPosition; - if (settings && settings.useGridSnapping) { - position = snapPositionToGrid(position, gridSize); + if (tool === "shape") { + const snapped = Vector2.roundTo(position, gridSize); + const minGrid = Vector2.min(gridSize); + const distance = Vector2.length(Vector2.subtract(snapped, position)); + if (distance < minGrid * snappingThreshold) { + position = snapped; + } } return position; @@ -187,7 +187,7 @@ export function shapeToPath(shape, canvasWidth, canvasHeight) { canvasWidth, canvasHeight ); - } else if ((shape.shapeType === "rectangle", canvasWidth, canvasHeight)) { + } else if (shape.shapeType === "rectangle") { return rectangleToPath( data.x, data.y, diff --git a/src/helpers/shared.js b/src/helpers/shared.js index 377fa19..182272a 100644 --- a/src/helpers/shared.js +++ b/src/helpers/shared.js @@ -28,13 +28,6 @@ export function roundTo(x, to) { return Math.round(x / to) * to; } -export function snapPositionToGrid(position, gridSize) { - return { - x: roundTo(position.x, gridSize.x), - y: roundTo(position.y, gridSize.y), - }; -} - export function toRadians(angle) { return angle * (Math.PI / 180); } diff --git a/src/helpers/vector2.js b/src/helpers/vector2.js index 2f04f6d..3e3e7eb 100644 --- a/src/helpers/vector2.js +++ b/src/helpers/vector2.js @@ -1,4 +1,4 @@ -import { toRadians } from "./shared"; +import { toRadians, roundTo as roundToNumber } from "./shared"; export function lengthSquared(p) { return p.x * p.x + p.y * p.y; @@ -70,3 +70,10 @@ export function min(a) { export function max(a) { return a.x > a.y ? a.x : a.y; } + +export function roundTo(p, to) { + return { + x: roundToNumber(p.x, to.x), + y: roundToNumber(p.y, to.y), + }; +} diff --git a/src/icons/GridOffIcon.js b/src/icons/GridOffIcon.js deleted file mode 100644 index d7b2950..0000000 --- a/src/icons/GridOffIcon.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; - -function GridOffIcon() { - return ( - - - - - ); -} - -export default GridOffIcon; diff --git a/src/icons/GridOnIcon.js b/src/icons/GridOnIcon.js deleted file mode 100644 index 0511b25..0000000 --- a/src/icons/GridOnIcon.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; - -function GridOnIcon() { - return ( - - - - - ); -} - -export default GridOnIcon;