clickWasDragged helper

Author: roryaronson

frontend/three_d_garden/bed/objects/pointer_objects.tsx

@@ -41,6 +41,7 @@ import {
   getPlantIconTexture,
   getPlantIconTextureUrl,
 } from "../../garden/plant_icon_atlas";
+import { clickWasDragged } from "../../click_event";
 
 export type PointerPlantRef = React.RefObject<GroupType | null>;
 export type RadiusRef = React.RefObject<MeshType | null>;
@@ -178,14 +179,12 @@ export interface SoilClickProps {
   getZ(x: number, y: number): number;
 }
 
-export const MAX_SOIL_CLICK_DELTA = 2;
-
 export const soilClick = (props: SoilClickProps) =>
   (e: ThreeEvent<MouseEvent>) => {
     const { config, navigate, addPlantProps, pointerPlantRef } = props;
     const getGardenPosition = getGardenPositionFunc(config);
     e.stopPropagation();
-    if ((e.delta || 0) > MAX_SOIL_CLICK_DELTA) { return; }
+    if (clickWasDragged(e)) { return; }
     if (addPlantProps) {
       if (getMode() == Mode.clickToAdd) {
         dropPlant({

frontend/three_d_garden/click_event.ts

@@ -0,0 +1,7 @@
+import type { ThreeEvent } from "@react-three/fiber";
+
+export const MAX_POINTER_CLICK_DELTA = 1;
+
+export const clickWasDragged = (
+  event: Pick<ThreeEvent<MouseEvent>, "delta">,
+) => (event.delta || 0) > MAX_POINTER_CLICK_DELTA;

frontend/three_d_garden/garden/__tests__/plant_instances_test.tsx

@@ -185,6 +185,19 @@ describe("<PlantInstances />", () => {
     expect(mockNavigate).toHaveBeenCalledWith(Path.plants("1"));
   });
 
+  it("doesn't navigate after orbiting over a plant icon", () => {
+    const p = fakeProps();
+    const dispatch = jest.fn();
+    p.dispatch = mockDispatch(dispatch);
+    const wrapper = createRenderer(<PlantInstances {...p} />);
+    const mesh = wrapper.root.findAll(node =>
+      (node.type as string) == "instancedMesh")[0];
+    mesh.props.onClick({ instanceId: 0, delta: 3 });
+    unmountRenderer(wrapper);
+    expect(dispatch).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
   it("doesn't navigate without dispatch", () => {
     setMockInstanceId(0);
     const p = fakeProps();

frontend/three_d_garden/garden/__tests__/plants_test.tsx

@@ -253,6 +253,20 @@ describe("<ThreeDPlantSpread />", () => {
     expect(mockNavigate).toHaveBeenCalledWith(Path.plants("1"));
   });
 
+  it("doesn't navigate after orbiting over a spread sphere", () => {
+    queueMeshRef();
+    const p = fakeProps();
+    const dispatch = jest.fn();
+    p.dispatch = mockDispatch(dispatch);
+    const wrapper = createRenderer(<PlantSpreadInstances {...p} />);
+    const mesh = wrapper.root.findAll(node =>
+      (node.type as string) == "instancedMesh")[0];
+    mesh.props.onClick({ instanceId: 0, delta: 3 });
+    unmountRenderer(wrapper);
+    expect(dispatch).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
   it("doesn't navigate on spread click in camera selection mode", () => {
     setMockInstanceId(0);
     getModeSpy.mockReturnValue(Mode.cameraSelection);

frontend/three_d_garden/garden/__tests__/point_test.tsx

@@ -78,6 +78,20 @@ describe("<Point />", () => {
     expect(mockNavigate).toHaveBeenCalledWith(Path.points("1"));
   });
 
+  it("doesn't navigate after orbiting over a point", () => {
+    const p = fakeProps();
+    const dispatch = jest.fn();
+    p.dispatch = mockDispatch(dispatch);
+    p.point.body.id = 1;
+    const wrapper = createRenderer(<Point {...p} />);
+    mountedWrappers.push(wrapper);
+    const point = wrapper.root
+      .findAll(node => node.props.name == "marker")[0];
+    point.props.onClick({ delta: 3 });
+    expect(dispatch).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
   it("doesn't navigate to point info", () => {
     const p = fakeProps();
     p.dispatch = undefined;
@@ -119,6 +133,20 @@ describe("<Point />", () => {
     });
     expect(mockNavigate).toHaveBeenCalledWith(Path.points("1"));
   });
+
+  it("doesn't navigate after orbiting over a point instance", () => {
+    const p = fakeInstanceProps();
+    const dispatch = jest.fn();
+    p.dispatch = mockDispatch(dispatch);
+    p.points[0].body.id = 1;
+    const wrapper = createRenderer(<PointInstances {...p} />);
+    mountedWrappers.push(wrapper);
+    const marker = wrapper.root
+      .findAll(node => node.props.name == "marker")[0];
+    marker.props.onClick({ instanceId: 0, delta: 3 });
+    expect(dispatch).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
 });
 
 describe("<DrawnPoint />", () => {

frontend/three_d_garden/garden/__tests__/weed_test.tsx

@@ -9,23 +9,29 @@ import { Actions } from "../../../constants";
 import { mockDispatch } from "../../../__test_support__/fake_dispatch";
 import * as mapUtil from "../../../farm_designer/map/util";
 import { Mode } from "../../../farm_designer/map/interfaces";
+import { useFrame } from "@react-three/fiber";
+import { Quaternion } from "three";
 import {
   createRenderer,
   unmountRenderer,
 } from "../../../__test_support__/test_renderer";
 
 describe("<Weed />", () => {
   let getModeSpy: jest.SpyInstance;
+  let reactUseRefSpy: jest.SpyInstance | undefined;
   const mountedWrappers: ReturnType<typeof createRenderer>[] = [];
 
   beforeEach(() => {
     getModeSpy = jest.spyOn(mapUtil, "getMode").mockReturnValue(Mode.none);
+    (useFrame as jest.Mock).mockClear();
   });
 
   afterEach(() => {
     mountedWrappers.splice(0).forEach(wrapper =>
       unmountRenderer(wrapper));
     getModeSpy.mockRestore();
+    reactUseRefSpy?.mockRestore();
+    reactUseRefSpy = undefined;
   });
 
   const fakeProps = (): WeedProps => ({
@@ -66,6 +72,20 @@ describe("<Weed />", () => {
     expect(mockNavigate).toHaveBeenCalledWith(Path.weeds("1"));
   });
 
+  it("doesn't navigate after orbiting over a weed", () => {
+    const p = fakeProps();
+    const dispatch = jest.fn();
+    p.dispatch = mockDispatch(dispatch);
+    p.weed.body.id = 1;
+    const wrapper = createRenderer(<Weed {...p} />);
+    mountedWrappers.push(wrapper);
+    const weed = wrapper.root
+      .findAll(node => node.props.name == "weed-1")[0];
+    weed.props.onClick({ delta: 3 });
+    expect(dispatch).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
   it("doesn't navigate to weed info", () => {
     const p = fakeProps();
     p.dispatch = undefined;
@@ -108,4 +128,64 @@ describe("<Weed />", () => {
     });
     expect(mockNavigate).toHaveBeenCalledWith(Path.weeds("1"));
   });
+
+  it("navigates from a weed radius instance", () => {
+    const p = fakeInstanceProps();
+    const dispatch = jest.fn();
+    p.dispatch = mockDispatch(dispatch);
+    p.weeds[0].body.id = 1;
+    const wrapper = createRenderer(<WeedInstances {...p} />);
+    mountedWrappers.push(wrapper);
+    const weedRadius = wrapper.root
+      .findAll(node => node.props.name == "weed-radius")[0];
+    weedRadius.props.onClick({ instanceId: 0 });
+    expect(dispatch).toHaveBeenCalledWith({
+      type: Actions.SET_PANEL_OPEN, payload: true,
+    });
+    expect(mockNavigate).toHaveBeenCalledWith(Path.weeds("1"));
+  });
+
+  it("doesn't navigate after orbiting over weed instances", () => {
+    const p = fakeInstanceProps();
+    const dispatch = jest.fn();
+    p.dispatch = mockDispatch(dispatch);
+    p.weeds[0].body.id = 1;
+    const wrapper = createRenderer(<WeedInstances {...p} />);
+    mountedWrappers.push(wrapper);
+    const weedIcons = wrapper.root
+      .findAll(node => node.props.name == "weed-icons")[0];
+    const weedRadius = wrapper.root
+      .findAll(node => node.props.name == "weed-radius")[0];
+    weedIcons.props.onClick({ instanceId: 0, delta: 3 });
+    weedRadius.props.onClick({ instanceId: 0, delta: 3 });
+    expect(dispatch).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it("updates weed icon matrices on frame", () => {
+    const iconRef = {
+      current: {
+        setMatrixAt: jest.fn(),
+        instanceMatrix: { needsUpdate: false },
+      },
+    };
+    const radiusRef = {
+      current: {
+        setMatrixAt: jest.fn(),
+        instanceMatrix: { needsUpdate: false },
+      },
+    };
+    const updateStateRef = { current: {} };
+    reactUseRefSpy = jest.spyOn(React, "useRef")
+      .mockImplementationOnce(() => iconRef)
+      .mockImplementationOnce(() => updateStateRef)
+      .mockImplementationOnce(() => radiusRef)
+      .mockImplementation(value => ({ current: value }));
+    const wrapper = createRenderer(<WeedInstances {...fakeInstanceProps()} />);
+    mountedWrappers.push(wrapper);
+    const frameFn = (useFrame as jest.Mock).mock.calls[0][0];
+    frameFn({ camera: { quaternion: new Quaternion() } });
+    expect(iconRef.current.setMatrixAt).toHaveBeenCalled();
+    expect(iconRef.current.instanceMatrix.needsUpdate).toEqual(true);
+  });
 });

frontend/three_d_garden/garden/plant_instances.tsx

@@ -29,6 +29,7 @@ import { Mode } from "../../farm_designer/map/interfaces";
 import {
   calcSunCoordinate, calcSunI, getAnimatedSeasonDate,
 } from "./sun";
+import { clickWasDragged } from "../click_event";
 
 export interface PlantInstancesProps {
   plants: ThreeDGardenPlant[];
@@ -162,6 +163,7 @@ const PlantIconInstances = (props: PlantIconInstancesProps) => {
   });
 
   const onClick = (event: ThreeEvent<MouseEvent>) => {
+    if (clickWasDragged(event)) { return; }
     const instanceId = event.instanceId;
     if (isUndefined(instanceId)) { return; }
     const plant = plants[instanceId];

frontend/three_d_garden/garden/plants.tsx

@@ -35,6 +35,7 @@ import { ActivePositionRef } from "../bed/objects/pointer_objects";
 import { Mode } from "../../farm_designer/map/interfaces";
 import { findCrop } from "../../crops/find";
 import { perfMeasure } from "../../performance/perf";
+import { clickWasDragged } from "../click_event";
 
 export interface ThreeDGardenPlant {
   id?: number | undefined;
@@ -286,6 +287,7 @@ export const PlantSpreadInstances = React.memo((props: PlantSpreadInstancesProps
   });
 
   const onClick = (event: ThreeEvent<MouseEvent>) => {
+    if (clickWasDragged(event)) { return; }
     const instanceId = event.instanceId;
     if (isUndefined(instanceId)) { return; }
     const plant = plants[instanceId];

frontend/three_d_garden/garden/point.tsx

@@ -28,6 +28,7 @@ import { HOVER_OBJECT_MODES, RenderOrder } from "../constants";
 import {
   BillboardRef, ImageRef, RadiusRef, TorusRef,
 } from "../bed/objects/pointer_objects";
+import { clickWasDragged } from "../click_event";
 
 const POINT_PIN_RADIUS = 12.5;
 const POINT_PIN_HEIGHT = 50;
@@ -58,7 +59,8 @@ export const Point = (props: PointProps) => {
       y: point.body.y,
       z: props.getZ(point.body.x, point.body.y),
     }}
-    onClick={() => {
+    onClick={(event) => {
+      if (clickWasDragged(event)) { return; }
       if (point.body.id && !isUndefined(props.dispatch) && props.visible &&
         !HOVER_OBJECT_MODES.includes(getMode())) {
         props.dispatch(setPanelOpen(true));
@@ -186,6 +188,7 @@ const PointBucketInstances = (props: PointInstanceBucketProps) => {
 
   const onClick = (instances: PointInstance[]) =>
     (event: ThreeEvent<MouseEvent>) => {
+      if (clickWasDragged(event)) { return; }
       const instanceId = event.instanceId;
       if (isUndefined(instanceId)) { return; }
       const point = instances[instanceId]?.point;
@@ -292,7 +295,7 @@ export const DrawnPoint = (props: DrawnPointProps) => {
 interface PointBaseProps {
   pointName: string;
   position?: Record<Xyz, number>;
-  onClick?: () => void;
+  onClick?: (event: ThreeEvent<MouseEvent>) => void;
   color: string | undefined;
   radius: number;
   alpha: number;

frontend/three_d_garden/garden/weed.tsx

@@ -20,6 +20,7 @@ import { isUndefined } from "lodash";
 import { setPanelOpen } from "../../farm_designer/panel_header";
 import { getMode } from "../../farm_designer/map/util";
 import { RadiusRef, BillboardRef, ImageRef } from "../bed/objects/pointer_objects";
+import { clickWasDragged } from "../click_event";
 
 export const WEED_IMG_SIZE_FRACTION = 0.89;
 
@@ -37,7 +38,8 @@ export const Weed = (props: WeedProps) => {
   return <WeedBase
     pointName={"" + weed.body.id}
     alpha={1}
-    onClick={() => {
+    onClick={(event) => {
+      if (clickWasDragged(event)) { return; }
       if (weed.body.id && !isUndefined(props.dispatch) && props.visible &&
         !HOVER_OBJECT_MODES.includes(getMode())) {
         props.dispatch(setPanelOpen(true));
@@ -57,7 +59,7 @@ export const Weed = (props: WeedProps) => {
 interface WeedBaseProps {
   pointName: string;
   position?: Record<Xyz, number>;
-  onClick?: () => void;
+  onClick?: (event: ThreeEvent<MouseEvent>) => void;
   color: string | undefined;
   radius: number;
   alpha: number;
@@ -241,6 +243,7 @@ const WeedIconInstances = (props: WeedIconInstancesProps) => {
   });
 
   const onClick = (event: ThreeEvent<MouseEvent>) => {
+    if (clickWasDragged(event)) { return; }
     const instanceId = event.instanceId;
     if (isUndefined(instanceId)) { return; }
     navigateToWeed(weedInstances[instanceId]?.weed);
@@ -289,6 +292,7 @@ const WeedRadiusInstances = (props: WeedRadiusInstancesProps) => {
   }, [bucket.weeds, noRotation, tempMatrix, tempPosition, tempScale]);
 
   const onClick = (event: ThreeEvent<MouseEvent>) => {
+    if (clickWasDragged(event)) { return; }
     const instanceId = event.instanceId;
     if (isUndefined(instanceId)) { return; }
     navigateToWeed(bucket.weeds[instanceId]?.weed);