From 09816c5c242b26674a0b213a3b92b69add60d399 Mon Sep 17 00:00:00 2001
From: Grant Forrest <gaforres@gmail.com>
Date: Thu, 6 Jun 2024 14:26:36 -0400
Subject: [PATCH] [sc] auto lock touchscreens

---
 .../web/src/components/project/TouchTools.tsx         | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/star-chart/web/src/components/project/TouchTools.tsx b/apps/star-chart/web/src/components/project/TouchTools.tsx
index 480d2f6a..7efc0660 100644
--- a/apps/star-chart/web/src/components/project/TouchTools.tsx
+++ b/apps/star-chart/web/src/components/project/TouchTools.tsx
@@ -5,6 +5,7 @@ import { Button } from '@a-type/ui/components/button';
 import { CanvasOverlayContent } from '../canvas/CanvasOverlay.jsx';
 import { useIsTouch } from '@biscuits/client';
 import { Icon } from '@a-type/ui/components/icon';
+import { useEffect } from 'react';
 
 export interface TouchToolsProps {
   className?: string;
@@ -17,6 +18,12 @@ export function TouchTools({ className }: TouchToolsProps) {
   const boxSelect = useBoxSelectEnabled();
 
   const isTouchscreen = useIsTouch();
+  // auto-lock on touch devices.
+  useEffect(() => {
+    if (isTouchscreen) {
+      canvas.tools.dragLocked = true;
+    }
+  }, [canvas, isTouchscreen]);
 
   return (
     <CanvasOverlayContent
@@ -32,7 +39,7 @@ export function TouchTools({ className }: TouchToolsProps) {
         aria-pressed={dragLocked}
         className={clsx(
           'flex-col gap-0 rounded-md px-1 py-0',
-          dragLocked && 'bg-primary-light text-primary-dark',
+          dragLocked && 'bg-primary-wash text-primary-dark',
         )}
       >
         <span>
@@ -48,7 +55,7 @@ export function TouchTools({ className }: TouchToolsProps) {
           aria-pressed={boxSelect}
           className={clsx(
             'flex-col gap-0 rounded-md px-1 py-0',
-            boxSelect && 'bg-primary-light text-primary-dark',
+            boxSelect && 'bg-primary-wash text-primary-dark',
           )}
         >
           <span>