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

View File

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

View File

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