Adhere to map grid snapping settings for select tool

This commit is contained in:
Mitchell McCaffrey 2021-08-05 14:47:00 +10:00
parent 17defb0aec
commit 9e2d09cafd
3 changed files with 17 additions and 6 deletions

View File

@ -20,6 +20,7 @@ import { useEffect, useRef } from "react";
import Vector2 from "../../helpers/Vector2";
import { SelectionItemsChangeEventHandler } from "../../types/Events";
import { TokenState } from "../../types/TokenState";
import { Map } from "../../types/Map";
import { Note } from "../../types/Note";
import useGridSnapping from "../../hooks/useGridSnapping";
@ -32,6 +33,7 @@ type SelectionProps = {
onPreventSelectionChange: (preventSelection: boolean) => void;
onSelectionDragStart: () => void;
onSelectionDragEnd: () => void;
map: Map;
} & Konva.ShapeConfig;
function Selection({
@ -41,6 +43,7 @@ function Selection({
onPreventSelectionChange,
onSelectionDragStart,
onSelectionDragEnd,
map,
...props
}: SelectionProps) {
const userId = useUserId();
@ -89,11 +92,14 @@ function Selection({
initialDragPositionRef.current
);
for (let item of intersectingNodesRef.current) {
item.node.position(
snapPositionToGrid(
Vector2.add({ x: item.initialX, y: item.initialY }, deltaPosition)
)
let itemPosition = Vector2.add(
{ x: item.initialX, y: item.initialY },
deltaPosition
);
if (map.snapToGrid) {
itemPosition = snapPositionToGrid(itemPosition);
}
item.node.position(itemPosition);
}
}

View File

@ -28,6 +28,7 @@ import {
SelectToolSettings,
} from "../../types/Select";
import { RectData } from "../../types/Drawing";
import { Map } from "../../types/Map";
import { useGridCellNormalizedSize } from "../../contexts/GridContext";
import Selection from "../konva/Selection";
import { SelectionItemsChangeEventHandler } from "../../types/Events";
@ -44,6 +45,7 @@ type MapSelectProps = {
onSelectionDragEnd: () => void;
disabledTokens: Record<string, boolean>;
disabledNotes: Record<string, boolean>;
map: Map;
};
function SelectTool({
@ -57,6 +59,7 @@ function SelectTool({
onSelectionDragEnd,
disabledTokens,
disabledNotes,
map,
}: MapSelectProps) {
const stageScale = useDebouncedStageScale();
const mapWidth = useMapWidth();
@ -271,6 +274,7 @@ function SelectTool({
}
onSelectionDragStart={onSelectionDragStart}
onSelectionDragEnd={onSelectionDragEnd}
map={map}
/>
)}
</Group>

View File

@ -81,7 +81,7 @@ function useMapSelection(
onSelectionItemsRemove(tokenStateIds, noteIds);
}
const selectionTool = (
const selectionTool = map ? (
<SelectTool
active={active}
toolSettings={settings}
@ -93,8 +93,9 @@ function useMapSelection(
onSelectionDragEnd={handleSelectionDragEnd}
disabledTokens={disabledTokens}
disabledNotes={disabledNotes}
map={map}
/>
);
) : null;
const selectionMenu = (
<SelectionMenu