From ef0291f382e222cc9d2573dce373edde262e1216 Mon Sep 17 00:00:00 2001
From: Ole Morud <olekr99@hotmail.com>
Date: Mon, 22 Aug 2022 13:56:21 +0200
Subject: [PATCH] add drag&drop to instruction menu

---
 src/components/InstructionMenu.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/InstructionMenu.tsx b/src/components/InstructionMenu.tsx
index 9394e70..cb7e3c6 100644
--- a/src/components/InstructionMenu.tsx
+++ b/src/components/InstructionMenu.tsx
@@ -15,6 +15,19 @@ const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
   }
 }))
 
+function handleDragStart(
+  instruction: Instruction,
+  event: React.DragEvent<HTMLDivElement> | undefined
+): void {
+  if (event === undefined) {
+    console.log("handleDragStart: event is undefined")
+    return
+  }
+
+  event.dataTransfer.dropEffect = "copy"
+  event.dataTransfer.setData("text/plain", instruction.symbol)
+}
+
 export default function InstructionMenu() {
   let key = 0
 
@@ -32,11 +45,13 @@ export default function InstructionMenu() {
                     <Typography>{instruction.description}</Typography>
                   </>
                 }>
+                <div draggable="true" onDragStart={(event) => handleDragStart(instruction, event)}>
                   <Card key={key++} sx={{ height: "3rem", width: "3rem" }}>
                     <CardContent>
                       <Typography sx={{ userSelect: "none" }}>{instruction.symbol}</Typography>
                     </CardContent>
                   </Card>
+                </div>
               </HtmlTooltip>
             </div>
           )