From 36ccece28ad28de2ee6e84807e30df63bea8e732 Mon Sep 17 00:00:00 2001 From: Grant Forrest Date: Tue, 4 Jun 2024 11:20:36 -0400 Subject: [PATCH] tweak emphasis. keyboard overlay. --- apps/star-chart/web/index.html | 2 +- .../src/components/canvas/viewportHooks.ts | 68 +++++++++++++------ .../web/src/components/project/TaskNode.tsx | 3 +- 3 files changed, 49 insertions(+), 24 deletions(-) diff --git a/apps/star-chart/web/index.html b/apps/star-chart/web/index.html index 9c93129c..ebc63f84 100644 --- a/apps/star-chart/web/index.html +++ b/apps/star-chart/web/index.html @@ -3,7 +3,7 @@ Star Chart diff --git a/apps/star-chart/web/src/components/canvas/viewportHooks.ts b/apps/star-chart/web/src/components/canvas/viewportHooks.ts index 2d9841c3..3edeb21a 100644 --- 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 index 6627ad27..f431bda1 100644 --- 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) && ( 🔥