feat: right mouse down to drag canvas

package-lock.json

@@ -2300,9 +2300,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

src/components/LabCanvas/LabCanvas.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full relative">
+  <div class="w-full h-full relative" @contextmenu.prevent>
     <v-stage
       class="h-full w-full"
       ref="stageRef"
@@ -9,6 +9,7 @@
       @mouseup="handleMouseUp"
       @wheel="handleWheel"
       @click="handleStageClick"
+      @contextmenu="handleContextMenu"
     >
       <v-layer ref="layerRef">
         <template
@@ -200,6 +201,9 @@ const stageRef = useTemplateRef<VStage>("StageRef");
 const isDragging = ref(false);
 const dragItemId = ref<string | null>(null);
 
+const isRightDragging = ref(false);
+const lastPointerPosition = ref<{ x: number; y: number } | null>(null);
+
 const isSelecting = ref(false);
 const selectedIds = ref<string[]>([]);
 const selectionRectangle = reactive({
@@ -303,9 +307,28 @@ function handleStageClick(e: { target: any; evt: MouseEvent }) {
   }
 }
 
+function handleContextMenu(e: Event) {
+  // 防止默认右键菜单弹出
+  e.preventDefault();
+}
+
 function handleMouseDown(e: Event) {
   if (isNull(e.target)) return;
   const target = e.target as unknown as Konva.Container;
+  const stage = target.getStage();
+
+  // 获取鼠标事件信息
+  const mouseEvent = (e as any).evt as MouseEvent;
+  
+  // 如果是右键按下，开始右键拖拽
+  if (mouseEvent.button === 2) {
+    isRightDragging.value = true;
+    const pos = stage?.getPointerPosition();
+    if (pos) {
+      lastPointerPosition.value = { x: pos.x, y: pos.y };
+    }
+    return;
+  }
 
   // do nothing if we mousedown on any shape
   if ((e.target as unknown) !== target.getStage()) {
@@ -314,7 +337,6 @@ function handleMouseDown(e: Event) {
 
   // start selection rectangle
   isSelecting.value = true;
-  const stage = target.getStage();
   const pos = stage?.getPointerPosition();
   if (!isNull(pos) && !isUndefined(pos) && !isNull(stage)) {
     // Convert pointer position to relative coordinates considering scale and position
@@ -334,13 +356,31 @@ function handleMouseDown(e: Event) {
 function handleMouseMove(e: Event) {
   if (isNull(e.target)) return;
   const target = e.target as unknown as Konva.Container;
+  const stage = target.getStage();
+
+  // 如果正在右键拖拽，移动画布
+  if (isRightDragging.value && lastPointerPosition.value && stage) {
+    const pos = stage.getPointerPosition();
+    if (pos) {
+      const dx = pos.x - lastPointerPosition.value.x;
+      const dy = pos.y - lastPointerPosition.value.y;
+      
+      const currentPos = stage.position();
+      stage.position({
+        x: currentPos.x + dx,
+        y: currentPos.y + dy,
+      });
+      
+      lastPointerPosition.value = { x: pos.x, y: pos.y };
+    }
+    return;
+  }
 
   // do nothing if we didn't start selection
   if (!isSelecting.value) {
     return;
   }
 
-  const stage = target.getStage();
   const pos = stage?.getPointerPosition();
   if (!isNull(pos) && !isUndefined(pos) && !isNull(stage)) {
     // Convert pointer position to relative coordinates considering scale and position
@@ -354,7 +394,15 @@ function handleMouseMove(e: Event) {
   }
 }
 
-function handleMouseUp() {
+function handleMouseUp(e: Event) {
+  // 如果是右键释放，结束右键拖拽
+  const mouseEvent = (e as any).evt as MouseEvent;
+  if (mouseEvent.button === 2 && isRightDragging.value) {
+    isRightDragging.value = false;
+    lastPointerPosition.value = null;
+    return;
+  }
+
   // do nothing if we didn't start selection
   if (!isSelecting.value) {
     return;