From c7d9a8739181f56dece8935116321665cf73eeb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matheus=20Lu=C3=ADs?= <matheus.bernardi@lnls.br>
Date: Thu, 29 Feb 2024 16:49:12 -0300
Subject: [PATCH] feat: add drag to brushmode

---
 apps/pianno/components/annotation.tsx         |  4 ++++
 apps/pianno/components/toolbar/open.tsx       |  6 +++---
 apps/pianno/components/toolbar/save.tsx       | 10 +++++-----
 .../components/toolbar/toggle-pairs.tsx       |  6 +++---
 apps/pianno/components/toolbar/toolbar.tsx    | 19 +++++++++----------
 apps/pianno/components/toolbar/tools.tsx      | 10 +++++++++-
 apps/pianno/components/viewport.tsx           |  2 +-
 apps/pianno/lib/types.ts                      |  4 ++--
 8 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/apps/pianno/components/annotation.tsx b/apps/pianno/components/annotation.tsx
index c0e3856..154e7a7 100644
--- a/apps/pianno/components/annotation.tsx
+++ b/apps/pianno/components/annotation.tsx
@@ -73,6 +73,8 @@ const Annotation = (props: AnnotationProps) => {
 
   useEffect(() => {
     const onPointerDown = (e: PIXI.FederatedPointerEvent) => {
+      if(brushMode === 'drag') return;
+
       if (!context) return;
       context.fillStyle = color;
       if (e.pointerType === 'mouse') {
@@ -85,6 +87,7 @@ const Annotation = (props: AnnotationProps) => {
       }
 
       setIsPainting(true);
+      viewport?.plugins.pause('drag');
       const pos = viewport?.toWorld(e.global) ?? e.global;
       prevPosition.current = pos;
 
@@ -134,6 +137,7 @@ const Annotation = (props: AnnotationProps) => {
     const onPointerUp = (e: PIXI.FederatedPointerEvent) => {
       if (!canvas) return;
       setIsPainting(false);
+      viewport?.plugins.resume('drag');
       setLabel(canvas.toDataURL());
     };
 
diff --git a/apps/pianno/components/toolbar/open.tsx b/apps/pianno/components/toolbar/open.tsx
index f8154df..c8c094e 100644
--- a/apps/pianno/components/toolbar/open.tsx
+++ b/apps/pianno/components/toolbar/open.tsx
@@ -44,7 +44,7 @@ const OpenImageDialog: FC<OpenImageDialogProps> = ({}) => {
 
   const { setImage, setImageMetadata, softReset } = useStoreActions();
 
-  useHotkeys(['3'], () => {
+  useHotkeys(['4'], () => {
     setOpen(true);
   });
 
@@ -215,11 +215,11 @@ const OpenImageDialog: FC<OpenImageDialogProps> = ({}) => {
         <Button
           className="group relative"
           size={'icon'}
-          title={'load image -- 3'}
+          title={'load image -- 4'}
           variant={'outline'}
         >
           <p className="absolute right-1 top-0 text-xs text-input group-hover:text-accent-foreground">
-            3
+            4
           </p>
           <ImageIcon className="h-4 w-4" />
         </Button>
diff --git a/apps/pianno/components/toolbar/save.tsx b/apps/pianno/components/toolbar/save.tsx
index 3af4fcf..2054b7e 100644
--- a/apps/pianno/components/toolbar/save.tsx
+++ b/apps/pianno/components/toolbar/save.tsx
@@ -84,7 +84,7 @@ const SaveDialog: FC<SaveDialogProps> = ({ disabled }) => {
   }, [label]);
 
   useHotkeys(
-    ['4'],
+    ['5'],
     () => {
       if (!toggled) {
         togglePairs();
@@ -167,11 +167,11 @@ const SaveDialog: FC<SaveDialogProps> = ({ disabled }) => {
               className="group relative"
               disabled={disabled}
               size={'icon'}
-              title={'save json -- 4'}
+              title={'save json -- 5'}
               variant={'outline'}
             >
               <p className="absolute right-1 top-0 text-xs text-input group-hover:text-accent-foreground">
-                4
+                5
               </p>
               <SaveIcon className="h-4 w-4 group-hover:hidden group-hover:animate-out" />
               <BanIcon className="hidden h-4 w-4 scale-125 stroke-red-600 group-hover:block group-hover:animate-in" />
@@ -209,11 +209,11 @@ const SaveDialog: FC<SaveDialogProps> = ({ disabled }) => {
               className="group relative"
               disabled={disabled}
               size={'icon'}
-              title={'save json -- 4'}
+              title={'save json -- 5'}
               variant={'outline'}
             >
               <p className="absolute right-1 top-0 text-xs text-input group-hover:text-accent-foreground">
-                4
+                5
               </p>
               <SaveIcon className="h-4 w-4" />
             </Button>
diff --git a/apps/pianno/components/toolbar/toggle-pairs.tsx b/apps/pianno/components/toolbar/toggle-pairs.tsx
index e1b8f7a..066628e 100644
--- a/apps/pianno/components/toolbar/toggle-pairs.tsx
+++ b/apps/pianno/components/toolbar/toggle-pairs.tsx
@@ -13,7 +13,7 @@ interface TogglePairsProps {
 
 const TogglePairs: FC<TogglePairsProps> = ({ disabled }) => {
   useHotkeys(
-    '5',
+    '6',
     () => {
       toggle();
     },
@@ -23,7 +23,7 @@ const TogglePairs: FC<TogglePairsProps> = ({ disabled }) => {
   const { toggle } = useStoreActions();
   return (
     <Toggle
-      aria-label="toggle pairs -- 5"
+      aria-label="toggle pairs -- 6"
       className="group relative"
       disabled={disabled}
       onPressedChange={toggle}
@@ -31,7 +31,7 @@ const TogglePairs: FC<TogglePairsProps> = ({ disabled }) => {
       title="toggle pairs -- 5"
     >
       <p className="absolute right-1 top-0 text-xs text-input group-hover:text-accent-foreground">
-        5
+        6
       </p>
       {toggled ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
     </Toggle>
diff --git a/apps/pianno/components/toolbar/toolbar.tsx b/apps/pianno/components/toolbar/toolbar.tsx
index 714d742..fa8dfa7 100644
--- a/apps/pianno/components/toolbar/toolbar.tsx
+++ b/apps/pianno/components/toolbar/toolbar.tsx
@@ -2,7 +2,6 @@
 
 import {
   useStoreActions,
-  useStoreBrushParams,
   useStoreImageMetadata,
   useStoreImg,
 } from '@/hooks/use-store';
@@ -79,20 +78,20 @@ const Toolbar = () => {
   const canClick = img.src !== '#';
 
   useHotkeys(
-    ['6', 'ctrl+z'],
+    ['7', 'ctrl+z'],
     () => {
       undo();
     },
     { enabled: canUndo },
   );
   useHotkeys(
-    ['7', 'ctrl+y'],
+    ['8', 'ctrl+y'],
     () => {
       redo();
     },
     { enabled: canRedo },
   );
-  useHotkeys(['8'], () => {
+  useHotkeys(['9'], () => {
     recenterViewport(
       img.width ? img.width : width,
       img.height ? img.height : height,
@@ -103,30 +102,30 @@ const Toolbar = () => {
     {
       children: <UndoIcon className="h-4 w-4" />,
       disabled: !canUndo,
-      hotkey: '6',
+      hotkey: '7',
       onClick: () => {
         undo();
       },
-      title: 'undo -- 6 or ctrl+z',
+      title: 'undo -- 7 or ctrl+z',
     },
     {
       children: <RedoIcon className="h-4 w-4" />,
       disabled: !canRedo,
-      hotkey: '7',
+      hotkey: '8',
       onClick: () => {
         redo();
       },
-      title: 'redo -- 7 or ctrl+y',
+      title: 'redo -- 8 or ctrl+y',
     },
     {
       children: <MaximizeIcon className="h-4 w-4" />,
-      hotkey: '8',
+      hotkey: '9',
       onClick: () =>
         recenterViewport(
           img.width ? img.width : width,
           img.height ? img.height : height,
         ),
-      title: 'fit-view -- 8',
+      title: 'fit-view -- 9',
     },
   ];
 
diff --git a/apps/pianno/components/toolbar/tools.tsx b/apps/pianno/components/toolbar/tools.tsx
index 20ff855..53092f5 100644
--- a/apps/pianno/components/toolbar/tools.tsx
+++ b/apps/pianno/components/toolbar/tools.tsx
@@ -3,7 +3,7 @@ import type { BrushMode } from '@/lib/types';
 import { Label } from '@/components/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 import { useStoreActions, useStoreBrushParams } from '@/hooks/use-store';
-import { EraserIcon, PenIcon } from 'lucide-react';
+import { EraserIcon, HandIcon, PenIcon } from 'lucide-react';
 import { FC } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
@@ -39,6 +39,11 @@ const tools: Tool[] = [
     icon: <EraserIcon className="h-4 w-4" />,
     title: 'eraser -- 2 or e',
   },
+  {
+    hotkey: '3',
+    icon: <HandIcon className="h-4 w-4" />,
+    title: 'drag -- 3 or d',
+  },
 ];
 
 interface ToolsProps {}
@@ -52,6 +57,9 @@ const Tools: FC<ToolsProps> = ({}) => {
   useHotkeys(['2', 'e'], () => setBrushMode('eraser'), {
     enabled: brushMode !== undefined,
   });
+  useHotkeys(['3', 'd'], () => setBrushMode('drag'), {
+    enabled: brushMode !== undefined,
+  });
   return (
     <RadioGroup
       className="flex flex-row gap-1"
diff --git a/apps/pianno/components/viewport.tsx b/apps/pianno/components/viewport.tsx
index 59dc96d..1e74bcf 100644
--- a/apps/pianno/components/viewport.tsx
+++ b/apps/pianno/components/viewport.tsx
@@ -32,7 +32,7 @@ export const PixiComponentViewport = PixiComponent('Viewport', {
       ticker: props.app.ticker,
     });
     viewport
-      .drag({mouseButtons: 'middle-right'})
+      .drag({mouseButtons: 'middle-left'})
       .pinch()
       .wheel()
       .decelerate()
diff --git a/apps/pianno/lib/types.ts b/apps/pianno/lib/types.ts
index 60e4273..90fda1c 100644
--- a/apps/pianno/lib/types.ts
+++ b/apps/pianno/lib/types.ts
@@ -3,12 +3,12 @@ import { z } from 'zod';
 
 import { ANNOTATION_DISTANCE_TYPES } from './constants';
 
-export type BrushMode = 'eraser' | 'pen';
+export type BrushMode = 'drag' | 'eraser' | 'pen';
 
 export type Brush = {
   eraserSize: number;
   maxSize: number;
-  mode: 'eraser' | 'pen' | undefined;
+  mode: BrushMode | undefined;
   penSize: number;
 };