From f084212ce8b340f87f9c5c306ef5fbb923c76cd5 Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Tue, 17 Mar 2026 08:31:12 +0300
Subject: [PATCH] Inline context menu into EditorCanvas, delete
 CanvasContextMenu.vue

The wrapper component existed only to do hit-test + select on right-click,
which is now editor.selectAtPoint(). The 5-line Reka UI ContextMenu
composition belongs directly in EditorCanvas where the canvas ref lives.
---
 src/components/CanvasContextMenu.vue |  21 ------
 src/components/EditorCanvas.vue      | 102 +++++++++++++++------------
 2 files changed, 56 insertions(+), 67 deletions(-)
 delete mode 100644 src/components/CanvasContextMenu.vue

diff --git a/src/components/CanvasContextMenu.vue b/src/components/CanvasContextMenu.vue
deleted file mode 100644
index de5d7a5b1..000000000
--- a/src/components/CanvasContextMenu.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { ContextMenuRoot, ContextMenuTrigger, ContextMenuPortal } from 'reka-ui'
-
-import NodeContextMenuContent from './NodeContextMenuContent.vue'
-
-const { onContextMenu } = defineProps<{
-  onContextMenu?: (e: MouseEvent) => void
-}>()
-</script>
-
-<template>
-  <ContextMenuRoot :modal="false">
-    <ContextMenuTrigger as-child @contextmenu="onContextMenu">
-      <slot />
-    </ContextMenuTrigger>
-
-    <ContextMenuPortal>
-      <NodeContextMenuContent />
-    </ContextMenuPortal>
-  </ContextMenuRoot>
-</template>
diff --git a/src/components/EditorCanvas.vue b/src/components/EditorCanvas.vue
index 7edcb71a4..fa037094d 100644
--- a/src/components/EditorCanvas.vue
+++ b/src/components/EditorCanvas.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
+import { ContextMenuRoot, ContextMenuTrigger, ContextMenuPortal } from 'reka-ui'
 
 import { toolCursor, useCanvas, useCanvasDrop, useCanvasInput, useTextEdit } from '@open-pencil/vue'
 import { useCollabInjected } from '@/composables/use-collab'
 import { useEditorStore } from '@/stores/editor'
-import CanvasContextMenu from './CanvasContextMenu.vue'
+import NodeContextMenuContent from './NodeContextMenuContent.vue'
 
 const store = useEditorStore()
 const collab = useCollabInjected()
@@ -47,56 +48,65 @@ function onContextMenu(e: MouseEvent) {
 </script>
 
 <template>
-  <CanvasContextMenu :on-context-menu="onContextMenu">
-    <div
-      data-test-id="canvas-area"
-      class="canvas-area relative min-h-0 min-w-0 flex-1 overflow-hidden"
-    >
-      <canvas
-        ref="canvasRef"
-        data-test-id="canvas-element"
-        :style="{ cursor }"
-        class="block size-full touch-none"
-      />
-      <Transition
-        enter-active-class="transition-opacity duration-150"
-        enter-from-class="opacity-0"
-        leave-active-class="transition-opacity duration-150"
-        leave-to-class="opacity-0"
+  <ContextMenuRoot :modal="false">
+    <ContextMenuTrigger as-child @contextmenu="onContextMenu">
+      <div
+        data-test-id="canvas-area"
+        class="canvas-area relative min-h-0 min-w-0 flex-1 overflow-hidden"
       >
-        <div
-          v-if="isDraggingOver"
-          class="pointer-events-none absolute inset-0 z-40 border-2 border-dashed border-accent/60 bg-accent/5"
+        <canvas
+          ref="canvasRef"
+          data-test-id="canvas-element"
+          :style="{ cursor }"
+          class="block size-full touch-none"
         />
-      </Transition>
-      <Transition leave-active-class="transition-opacity duration-300" leave-to-class="opacity-0">
-        <div
-          v-if="store.state.loading"
-          data-test-id="canvas-loading"
-          class="absolute inset-0 z-50 flex items-center justify-center bg-canvas"
+        <Transition
+          enter-active-class="transition-opacity duration-150"
+          enter-from-class="opacity-0"
+          leave-active-class="transition-opacity duration-150"
+          leave-to-class="opacity-0"
         >
-          <svg
-            class="size-8 text-white opacity-40"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path
-              d="m15.232 5.232 3.536 3.536m-2.036-5.036a2.5 2.5 0 0 1 3.536 3.536L6.5 21.036H3v-3.572L16.732 3.732Z"
-            />
-          </svg>
           <div
-            class="absolute bottom-1/2 left-1/2 h-0.5 w-25 -translate-x-1/2 translate-y-10 overflow-hidden rounded-full bg-white/8"
+            v-if="isDraggingOver"
+            class="pointer-events-none absolute inset-0 z-40 border-2 border-dashed border-accent/60 bg-accent/5"
+          />
+        </Transition>
+        <Transition
+          leave-active-class="transition-opacity duration-300"
+          leave-to-class="opacity-0"
+        >
+          <div
+            v-if="store.state.loading"
+            data-test-id="canvas-loading"
+            class="absolute inset-0 z-50 flex items-center justify-center bg-canvas"
           >
+            <svg
+              class="size-8 text-white opacity-40"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path
+                d="m15.232 5.232 3.536 3.536m-2.036-5.036a2.5 2.5 0 0 1 3.536 3.536L6.5 21.036H3v-3.572L16.732 3.732Z"
+              />
+            </svg>
             <div
-              class="h-full w-2/5 animate-[slide_1s_ease-in-out_infinite] rounded-full bg-white/25"
-            />
+              class="absolute bottom-1/2 left-1/2 h-0.5 w-25 -translate-x-1/2 translate-y-10 overflow-hidden rounded-full bg-white/8"
+            >
+              <div
+                class="h-full w-2/5 animate-[slide_1s_ease-in-out_infinite] rounded-full bg-white/25"
+              />
+            </div>
           </div>
-        </div>
-      </Transition>
-    </div>
-  </CanvasContextMenu>
+        </Transition>
+      </div>
+    </ContextMenuTrigger>
+
+    <ContextMenuPortal>
+      <NodeContextMenuContent />
+    </ContextMenuPortal>
+  </ContextMenuRoot>
 </template>