refactor: renames reducers to modes in interactionManager

src/interaction/modes/AreaTool.ts

@@ -1,9 +1,9 @@
-import { InteractionReducer } from 'src/types';
+import { ModeActions } from 'src/types';
 import { produce } from 'immer';
 import { generateId, hasMovedTile, setWindowCursor } from 'src/utils';
 import { DEFAULT_COLOR } from 'src/config';
 
-export const AreaTool: InteractionReducer = {
+export const AreaTool: ModeActions = {
   type: 'AREA_TOOL',
   entry: () => {
     setWindowCursor('crosshair');

src/interaction/modes/Connector.ts

@@ -8,9 +8,9 @@ import {
   hasMovedTile,
   setWindowCursor
 } from 'src/utils';
-import { InteractionReducer } from 'src/types';
+import { ModeActions } from 'src/types';
 
-export const Connector: InteractionReducer = {
+export const Connector: ModeActions = {
   type: 'CONNECTOR',
   entry: () => {
     setWindowCursor('crosshair');

src/interaction/modes/Cursor.ts

@@ -1,8 +1,8 @@
 import { produce } from 'immer';
-import { ItemControlsTypeEnum, InteractionReducer } from 'src/types';
+import { ItemControlsTypeEnum, ModeActions } from 'src/types';
 import { filterNodesByTile, getItemById, hasMovedTile } from 'src/utils';
 
-export const Cursor: InteractionReducer = {
+export const Cursor: ModeActions = {
   type: 'CURSOR',
   mousemove: ({ uiState }) => {
     if (uiState.mode.type !== 'CURSOR' || !hasMovedTile(uiState.mouse)) return;

src/interaction/modes/DragItems.ts

@@ -1,7 +1,7 @@
 import { hasMovedTile } from 'src/utils';
-import { InteractionReducer } from 'src/types';
+import { ModeActions } from 'src/types';
 
-export const DragItems: InteractionReducer = {
+export const DragItems: ModeActions = {
   type: 'DRAG_ITEMS',
   entry: ({ uiState, scene, rendererRef }) => {
     const renderer = rendererRef;

src/interaction/modes/Lasso.ts

@@ -1,7 +1,7 @@
 // import { CoordsUtils, isWithinBounds } from 'src/utils';
-// import { InteractionReducer } from 'src/types';
+// import { ModeActions } from 'src/types';
 
-// export const Lasso: InteractionReducer = {
+// export const Lasso: ModeActions = {
 //   type: 'LASSO',
 //   mousemove: ({ uiState, scene }) => {
 //     if (uiState.mode.type !== 'LASSO') return;

src/interaction/modes/Pan.ts

@@ -1,8 +1,8 @@
 import { produce } from 'immer';
 import { CoordsUtils, setWindowCursor } from 'src/utils';
-import { InteractionReducer } from 'src/types';
+import { ModeActions } from 'src/types';
 
-export const Pan: InteractionReducer = {
+export const Pan: ModeActions = {
   type: 'PAN',
   entry: () => {
     setWindowCursor('grab');

src/interaction/modes/PlaceElement.ts

@@ -1,8 +1,8 @@
 import { produce } from 'immer';
-import { InteractionReducer } from 'src/types';
+import { ModeActions } from 'src/types';
 import { filterNodesByTile, generateId } from 'src/utils';
 
-export const PlaceElement: InteractionReducer = {
+export const PlaceElement: ModeActions = {
   type: 'PLACE_ELEMENT',
   mousemove: () => {},
   mousedown: ({ uiState, scene }) => {

src/interaction/useInteractionManager.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 import { useSceneStore } from 'src/stores/sceneStore';
 import { useUiStateStore } from 'src/stores/uiStateStore';
-import { InteractionReducer, State } from 'src/types';
+import { ModeActions, State } from 'src/types';
 import { getMouse } from 'src/utils';
 import { Cursor } from './modes/Cursor';
 import { DragItems } from './modes/DragItems';
@@ -10,7 +10,7 @@ import { Connector } from './modes/Connector';
 import { Pan } from './modes/Pan';
 import { PlaceElement } from './modes/PlaceElement';
 
-const reducers: { [k in string]: InteractionReducer } = {
+const modes: { [k in string]: ModeActions } = {
   CURSOR: Cursor,
   DRAG_ITEMS: DragItems,
   AREA_TOOL: AreaTool,
@@ -30,24 +30,30 @@ export const useInteractionManager = () => {
   });
 
   const onMouseEvent = useCallback(
-    (e: MouseEvent) => {
+    (e: MouseEvent | TouchEvent) => {
       if (!rendererRef.current || !uiState.interactionsEnabled) return;
 
-      const reducer = reducers[uiState.mode.type];
+      const mode = modes[uiState.mode.type];
 
-      if (
-        !reducer ||
-        !(
-          e.type === 'mousemove' ||
-          e.type === 'mouseup' ||
-          e.type === 'mousedown'
-        )
-      )
-        return;
+      const getModeFunction = () => {
+        switch (e.type) {
+          case 'touchmove':
+          case 'mousemove':
+            return mode.mousemove;
+          case 'touchstart':
+          case 'mousedown':
+            return mode.mousedown;
+          case 'touchend':
+          case 'mouseup':
+            return mode.mouseup;
+          default:
+            return null;
+        }
+      };
 
-      const reducerAction = reducer[e.type];
+      const modeFunction = getModeFunction();
 
-      if (!reducerAction) return;
+      if (!modeFunction) return;
 
       const nextMouse = getMouse({
         interactiveElement: rendererRef.current,
@@ -67,22 +73,22 @@ export const useInteractionManager = () => {
         isRendererInteraction: rendererRef.current === e.target
       };
 
-      if (reducerTypeRef.current !== reducer.type) {
+      if (reducerTypeRef.current !== mode.type) {
         const prevReducer = reducerTypeRef.current
-          ? reducers[reducerTypeRef.current]
+          ? modes[reducerTypeRef.current]
           : null;
 
         if (prevReducer && prevReducer.exit) {
           prevReducer.exit(baseState);
         }
 
-        if (reducer.entry) {
-          reducer.entry(baseState);
+        if (mode.entry) {
+          mode.entry(baseState);
         }
       }
 
-      reducerAction(baseState);
-      reducerTypeRef.current = reducer.type;
+      modeFunction(baseState);
+      reducerTypeRef.current = mode.type;
     },
     [scene, uiState]
   );
@@ -93,6 +99,7 @@ export const useInteractionManager = () => {
     el.addEventListener('mousemove', onMouseEvent);
     el.addEventListener('mousedown', onMouseEvent);
     el.addEventListener('mouseup', onMouseEvent);
+    el.addEventListener('touchmove', onMouseEvent, false);
 
     return () => {
       el.removeEventListener('mousemove', onMouseEvent);

src/types/interactions.ts

@@ -7,13 +7,13 @@ export interface State {
   isRendererInteraction: boolean;
 }
 
-export type InteractionReducerAction = (state: State) => void;
+export type ModeActionsAction = (state: State) => void;
 
-export type InteractionReducer = {
+export type ModeActions = {
   type: string;
-  entry?: InteractionReducerAction;
-  exit?: InteractionReducerAction;
-  mousemove?: InteractionReducerAction;
-  mousedown?: InteractionReducerAction;
-  mouseup?: InteractionReducerAction;
+  entry?: ModeActionsAction;
+  exit?: ModeActionsAction;
+  mousemove?: ModeActionsAction;
+  mousedown?: ModeActionsAction;
+  mouseup?: ModeActionsAction;
 };

src/utils/renderer.ts

@@ -229,7 +229,7 @@ interface GetMouse {
   zoom: number;
   scroll: Scroll;
   lastMouse: Mouse;
-  mouseEvent: MouseEvent;
+  mouseEvent: MouseEvent | TouchEvent;
   rendererSize: Size;
 }
 
@@ -247,9 +247,16 @@ export const getMouse = ({
     y: componentOffset?.top ?? 0
   };
 
+  const clientX =
+    (mouseEvent as MouseEvent).clientX ??
+    (mouseEvent as TouchEvent).touches[0].clientX;
+  const clientY =
+    (mouseEvent as MouseEvent).clientY ??
+    (mouseEvent as TouchEvent).touches[0].clientY;
+
   const mousePosition = {
-    x: mouseEvent.clientX - offset.x,
-    y: mouseEvent.clientY - offset.y
+    x: clientX - offset.x,
+    y: clientY - offset.y
   };
 
   const newPosition: Mouse['position'] = {