tweak emphasis. keyboard overlay.

a-type · Jun 4, 2024 · 36ccece · 36ccece
1 parent 5d9fd58
commit 36ccece
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 24 deletions.
diff --git a/apps/star-chart/web/index.html b/apps/star-chart/web/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover"
+      content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover, interactive-widget=overlays-content"
     />
     <title>Star Chart</title>
     <meta name="description" content="A low-key personal project planner" />

diff --git a/apps/star-chart/web/src/components/canvas/viewportHooks.ts b/apps/star-chart/web/src/components/canvas/viewportHooks.ts
@@ -1,18 +1,15 @@
 import { hooks } from '@/store.js';
 import { useGesture } from '@use-gesture/react';
 import {
+  KeyboardEvent as ReactKeyboardEvent,
   RefObject,
   useCallback,
   useEffect,
   useRef,
-  KeyboardEvent as ReactKeyboardEvent,
 } from 'react';
-import { proxy } from 'valtio';
+import { useCanvas } from './CanvasProvider.jsx';
 import { Vector2 } from './types.js';
 import { Viewport } from './Viewport.js';
-import { isLeftClick } from '@a-type/utils';
-import { useCanvas } from './CanvasProvider.jsx';
-import { createMachine, setup } from 'xstate';
 
 /**
  * Tracks cursor position and sends updates to the socket connection
@@ -151,7 +148,10 @@ export function useViewportGestureControls(
 
   const canvas = useCanvas();
 
-  const gestureIsDragging = useRef(false);
+  const gestureDetails = useRef({
+    buttons: 0,
+    touches: 0,
+  });
   const bindPassiveGestures = useGesture(
     {
       onDrag: ({
@@ -170,10 +170,10 @@ export function useViewportGestureControls(
       }) => {
         if (!intentional || last) return;
 
-        console.log(touches, type);
-        gestureIsDragging.current = touches === 0 && (buttons & 1) !== 0;
+        gestureDetails.current.touches = touches;
+        gestureDetails.current.buttons = buttons;
 
-        if (gestureIsDragging.current) {
+        if (isCanvasDrag(gestureDetails.current)) {
           canvas.onCanvasDrag(
             { x: xy[0], y: xy[1] },
             {
@@ -203,8 +203,10 @@ export function useViewportGestureControls(
         altKey,
         touches,
       }) => {
-        gestureIsDragging.current = touches === 0 && (buttons & 1) !== 0;
-        if (gestureIsDragging.current) {
+        gestureDetails.current.touches = touches;
+        gestureDetails.current.buttons = buttons;
+
+        if (isCanvasDrag(gestureDetails.current)) {
           canvas.onCanvasDragStart(
             { x: xy[0], y: xy[1] },
             {
@@ -216,19 +218,27 @@ export function useViewportGestureControls(
           return;
         }
       },
-      onDragEnd: ({ xy, tap, metaKey, shiftKey, ctrlKey, altKey }) => {
-        if (gestureIsDragging.current) {
-          const info = {
-            shift: shiftKey,
-            alt: altKey,
-            ctrlOrMeta: ctrlKey || metaKey,
-          };
-          if (tap) {
-            canvas.onCanvasTap({ x: xy[0], y: xy[1] }, info);
-          }
+      onDragEnd: ({ xy, tap, metaKey, shiftKey, ctrlKey, altKey, type }) => {
+        const info = {
+          shift: shiftKey,
+          alt: altKey,
+          ctrlOrMeta: ctrlKey || metaKey,
+        };
+
+        if (isCanvasDrag(gestureDetails.current)) {
           canvas.onCanvasDragEnd({ x: xy[0], y: xy[1] }, info);
         }
-        gestureIsDragging.current = false;
+
+        // tap is triggered either by left click, or on touchscreens
+        if (
+          tap &&
+          (isCanvasDrag(gestureDetails.current) ||
+            isTouch(gestureDetails.current))
+        ) {
+          canvas.onCanvasTap({ x: xy[0], y: xy[1] }, info);
+        }
+        gestureDetails.current.buttons = 0;
+        gestureDetails.current.touches = 0;
       },
       onContextMenu: ({ event }) => {
         event.preventDefault();
@@ -357,3 +367,17 @@ export function useKeyboardControls(viewport: Viewport) {
     onKeyDown: handleKeyDown,
   };
 }
+
+function isCanvasDrag({
+  touches,
+  buttons,
+}: {
+  touches: number;
+  buttons: number;
+}) {
+  return (buttons & 1) > 0 && touches === 0;
+}
+
+function isTouch({ touches }: { touches: number; buttons: number }) {
+  return touches > 0;
+}
diff --git a/apps/star-chart/web/src/components/project/TaskNode.tsx b/apps/star-chart/web/src/components/project/TaskNode.tsx
@@ -60,6 +60,7 @@ export function TaskNode({ task }: TaskNodeProps) {
         upstreams > 0 && 'layer-variants:bg-wash',
         selected && 'layer-variants:border-primary',
         !selected && pendingSelect && 'layer-variants:border-primary-wash',
+        !!completedAt && 'opacity-50',
       )}
       canvasObject={canvasObject}
     >
@@ -141,7 +142,7 @@ function TaskFullContent({
               : 'line-through',
           )}
         >
-          {isPriority(upstreams, downstreams) && (
+          {!completedAt && isPriority(upstreams, downstreams) && (
             <Tooltip content="High impact!">
               <span>🔥</span>
             </Tooltip>