added select-cells button when on Mobile device, to place shift+click"

royerlab · Oct 1, 2024 · 9852c66 · 9852c66
1 parent d5b5541
commit 9852c66
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 3 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -321,6 +321,9 @@ export default function App() {
                                 dispatchCanvas({ type: ActionType.SELECTION_MODE, selectionMode: value });
                             }}
                             isMobile={isMobile}
+                            MobileSelectCells={() => {
+                                dispatchCanvas({ type: ActionType.MOBILE_SELECT_CELLS });
+                            }}
                         />
                     </Box>
                     <Divider />

diff --git a/src/components/CellControls.tsx b/src/components/CellControls.tsx
@@ -1,5 +1,5 @@
 import { Box, Stack } from "@mui/material";
-import { InputSlider, SegmentedControl, SingleButtonDefinition } from "@czi-sds/components";
+import { InputSlider, SegmentedControl, SingleButtonDefinition, Button } from "@czi-sds/components";
 import { FontS, SmallCapsButton, ControlLabel } from "@/components/Styled";
 
 import { PointSelectionMode } from "@/lib/PointSelector";
@@ -17,6 +17,7 @@ interface CellControlsProps {
     selectionMode: PointSelectionMode;
     setSelectionMode: (value: PointSelectionMode) => void;
     isMobile: boolean;
+    MobileSelectCells: () => void;
 }
 
 export default function CellControls(props: CellControlsProps) {
@@ -69,8 +70,15 @@ export default function CellControls(props: CellControlsProps) {
                     value={props.selectionMode}
                 />
             </Box>
+            <Box>
+                {props.isMobile && (
+                    <Button sdsStyle="square" sdsType="primary" onClick={props.MobileSelectCells}>
+                        Select cells
+                    </Button>
+                )}
+            </Box>
             <label htmlFor="points-brightness-slider">
-                <ControlLabel id="input-slider-points-brightness-slider">Point Brightness</ControlLabel>
+                <ControlLabel id="input-slider-points-brightness-slider">Cell Brightness</ControlLabel>
             </label>
             <InputSlider
                 id="points-brightness-slider"

diff --git a/src/hooks/usePointCanvas.ts b/src/hooks/usePointCanvas.ts
@@ -19,6 +19,7 @@ enum ActionType {
     MIN_MAX_TIME = "MIN_MAX_TIME",
     ADD_SELECTED_POINT_IDS = "ADD_SELECTED_POINT_IDS",
     UPDATE_WITH_STATE = "UPDATE_WITH_STATE",
+    MOBILE_SELECT_CELLS = "MOBILE_SELECT_CELLS",
 }
 
 interface AutoRotate {
@@ -92,6 +93,10 @@ interface UpdateWithState {
     state: ViewerState;
 }
 
+interface MobileSelectCells {
+    type: ActionType.MOBILE_SELECT_CELLS;
+}
+
 // setting up a tagged union for the actions
 type PointCanvasAction =
     | AutoRotate
@@ -107,7 +112,8 @@ type PointCanvasAction =
     | Size
     | MinMaxTime
     | AddSelectedPointIds
-    | UpdateWithState;
+    | UpdateWithState
+    | MobileSelectCells;
 
 function reducer(canvas: PointCanvas, action: PointCanvasAction): PointCanvas {
     console.debug("usePointCanvas.reducer: ", action);
@@ -182,6 +188,9 @@ function reducer(canvas: PointCanvas, action: PointCanvasAction): PointCanvas {
         case ActionType.UPDATE_WITH_STATE:
             newCanvas.updateWithState(action.state);
             break;
+        case ActionType.MOBILE_SELECT_CELLS:
+            newCanvas.MobileSelectCells();
+            break;
         default:
             console.warn("usePointCanvas reducer - unknown action type: %s", action);
             return canvas;

diff --git a/src/lib/PointCanvas.ts b/src/lib/PointCanvas.ts
@@ -372,4 +372,9 @@ export class PointCanvas {
             this.points.material.dispose();
         }
     }
+
+    MobileSelectCells() {
+        // if used on Mobile Device, this will select the cells upon button click
+        this.selector.sphereSelector.MobileFindAndSelect();
+    }
 }
diff --git a/src/lib/SpherePointSelector.ts b/src/lib/SpherePointSelector.ts
@@ -184,4 +184,28 @@ export class SpherePointSelector {
     pointerDown(_event: MouseEvent) {}
 
     pointerCancel(_event: MouseEvent) {}
+
+    MobileFindAndSelect() {
+        // if used on Mobile Device, this will select the cells upon button click
+        const radius = this.cursor.geometry.parameters.radius;
+        const normalMatrix = new Matrix3();
+        normalMatrix.setFromMatrix4(this.cursor.matrixWorld);
+        normalMatrix.invert();
+        const center = this.cursor.position;
+        const geometry = this.points.geometry;
+        const positions = geometry.getAttribute("position");
+        const numPoints = positions.count;
+        const selected = [];
+        for (let i = 0; i < numPoints; i++) {
+            const x = positions.getX(i);
+            const y = positions.getY(i);
+            const z = positions.getZ(i);
+            const vecToCenter = new Vector3(x, y, z).sub(center);
+            const scaledVecToCenter = vecToCenter.applyMatrix3(normalMatrix);
+            if (scaledVecToCenter.length() < radius) {
+                selected.push(i);
+            }
+        }
+        this.selectionChanged(selected);
+    }
 }