From db71681bdf7c1f30ffa66b48ba6fdc6dc04cebb9 Mon Sep 17 00:00:00 2001
From: SikongJueluo <selfconfusion@gmail.com>
Date: Fri, 13 Jun 2025 22:05:09 +0800
Subject: [PATCH] try to fix box select

---
 src/views/ProjectView.vue | 83 ++++++++++++++++++++++++++++-----------
 1 file changed, 61 insertions(+), 22 deletions(-)

diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 992aada..241733c 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -3,7 +3,7 @@
     <v-stage class="h-full w-full" ref="stage" :config="stageSize" @mousedown="handleMouseDown"
       @mousemove="handleMouseMove" @mouseup="handleMouseUp" @click="handleStageClick">
       <v-layer ref="layer">
-        <template v-for="item in objMap.values()" :key="item.id">
+        <template ref="canvasObjects" v-for="item in objMap.values()" :key="item.id">
           <v-group :config="{
             x: item.x,
             y: item.y,
@@ -13,7 +13,7 @@
             @mouseout="handleCanvasObjectMouseOut">
             <v-rect v-show="!isUndefined(item.box)" :config="{
               ...item.box,
-              visible: !isUndefined(item.box) && item.isHoverring,
+              visible: !isUndefined(item.box) && item.isHoverring && !isDragging,
               stroke: 'rgb(125,193,239)',
               strokeWidth: 2.5,
               dash: [10, 5],
@@ -42,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { isNull, isUndefined, ObjectNode } from "mathjs";
+import { isNull, isUndefined } from "mathjs";
 import Konva from "konva";
 import type {
   VGroup,
@@ -52,6 +52,8 @@ import type {
   VTransformer,
 } from "@/utils/VueKonvaType";
 import { ref, reactive, watch, onMounted, useTemplateRef } from "vue";
+import { list } from "postcss";
+import type { IRect } from "konva/lib/types";
 
 const stageSize = {
   width: window.innerWidth,
@@ -147,6 +149,7 @@ onMounted(() => {
 });
 
 const layer = useTemplateRef<VLayer>("layer");
+const canvasObjects = useTemplateRef<HTMLTemplateElement[]>("canvasObjects")
 const transformer = useTemplateRef<VTransformer>("transformer");
 const selectRect = useTemplateRef<VNode>("selectRect");
 const stage = useTemplateRef<VStage>("stage");
@@ -209,16 +212,17 @@ function handleDragEnd() {
 
 // Update transformer nodes when selection changes
 watch(selectedIds, () => {
-  if (!transformer.value) return;
+  if (isNull(transformer.value)) return;
 
   const nodes = selectedIds.value
     .map((id) => {
-      return layer.value
-        ?.getNode()
-        .find((ref: Konva.Node) => ref.attrs.id === id);
+      if (isNull(canvasObjects.value)) return;
+
+      return canvasObjects.value
+        .find((ref) => ref.firstChild?.id === id);
     })
     .flat()
-    .filter(Boolean) as Konva.Node[];
+    .filter(Boolean) as unknown as Konva.Node[];
 
   if (!isUndefined(nodes)) transformer.value.getNode().nodes(nodes);
 });
@@ -324,24 +328,59 @@ function handleMouseUp() {
     height: Math.abs(selectionRectangle.y2 - selectionRectangle.y1),
   };
 
-  if (isNull(layer.value)) return;
-  const selected = layer.value.getNode().children.filter((node: Konva.Node) => {
-    // Check if rectangle intersects with selection box
-    if (
-      node === transformer.value?.getNode() ||
-      node === selectRect.value?.getNode()
-    )
-      return false;
-
-    const nodeConfig = objMap.get(node.id());
-    if (isUndefined(nodeConfig) || isUndefined(nodeConfig.box)) {
+  for (let [key, shape] of objMap) {
+    const shapeConfig = objMap.get(shape.id);
+    if (isUndefined(shapeConfig)) {
       return;
+    } else if (isUndefined(shapeConfig.box)) {
+      if (isUndefined(shapeConfig.box)) {
+        if (
+          shapeConfig.config.width &&
+          shapeConfig.config.height &&
+          shapeConfig.config.rotation
+        ) {
+          shapeConfig.box = calculateRectBounding(
+            shapeConfig.config.width,
+            shapeConfig.config.height,
+            shapeConfig.config.rotation,
+            5,
+          );
+        } else {
+          console.error("Could not calculate rect bounding");
+          return;
+        }
+      }
     }
 
-    return Konva.Util.haveIntersection(selBox, nodeConfig.box);
-  });
+    if (Konva.Util.haveIntersection(selBox, shapeConfig.box as IRect))
+      selectedIds.value.push(shapeConfig.id)
+  }
 
-  selectedIds.value = selected.map((node: Konva.Node) => node.id());
+  /*  const selected = [...objMap.values()].filter((shape) => {
+     // Check if rectangle intersects with selection box
+     const shapeConfig = objMap.get(shape.id);
+     if (isUndefined(shapeConfig)) {
+       return;
+     } else if (isUndefined(shapeConfig.box)) {
+       if (isUndefined(shapeConfig.box)) {
+         if (
+           shapeConfig.config.width &&
+           shapeConfig.config.height &&
+           shapeConfig.config.rotation
+         ) {
+           shapeConfig.box = calculateRectBounding(
+             shapeConfig.config.width,
+             shapeConfig.config.height,
+             shapeConfig.config.rotation,
+             5,
+           );
+         } else console.error("Could not calculate rect bounding");
+       }
+ 
+       return Konva.Util.haveIntersection(selBox, shapeConfig.box as IRect);
+     });
+ 
+   selectedIds.value = selected.map((shapeConfig) => shapeConfig.id); */
 }
 
 function handleCanvasObjectMouseOver(evt: Event) {