fix: box select failed

src/views/ProjectView.vue

@@ -13,7 +13,7 @@
             @mouseout="handleCanvasObjectMouseOut">
             <v-rect v-show="!isUndefined(item.box)" :config="{
               ...item.box,
-              visible: !isUndefined(item.box) && item.isHoverring && !isDragging,
+              visible: !isUndefined(item.box) && item.isHoverring && !isDragging && selectedIds.length == 0,
               stroke: 'rgb(125,193,239)',
               strokeWidth: 2.5,
               dash: [10, 5],
@@ -24,7 +24,10 @@
           </v-group>
         </template>
 
-        <v-transformer ref="transformer" />
+        <v-transformer ref="transformer" :config="{
+          borderStroke: 'rgb(125,193,239)',
+          borderStrokeWidth: 3,
+        }" />
         <v-rect ref="selectRect" v-if="selectionRectangle.visible" :config="{
           x: Math.min(selectionRectangle.x1, selectionRectangle.x2),
           y: Math.min(selectionRectangle.y1, selectionRectangle.y2),
@@ -216,45 +219,41 @@ watch(selectedIds, () => {
 
   const nodes = selectedIds.value
     .map((id) => {
-      if (isNull(canvasObjects.value)) return;
+      if (isNull(layer.value)) {
+        console.error("layer is null")
+        return null;
+      }
 
-      return canvasObjects.value
+      for (let node of layer.value.getNode().children) {
-        .find((ref) => ref.firstChild?.id === id);
+        if (
-    })
+          node instanceof Konva.Group &&
-    .flat()
+          node.id() === `group-${id}`
-    .filter(Boolean) as unknown as Konva.Node[];
+        ) return node;
+      }
+    }) as Konva.Node[]
 
   if (!isUndefined(nodes)) transformer.value.getNode().nodes(nodes);
 });
 
 // Mouse event handlers
-function handleStageClick(e: Event) {
+function handleStageClick(e: { target: any, evt: MouseEvent }) {
   if (isNull(e.target)) return;
-  const target = e.target as unknown as Konva.Container;
+  const target = e.target as unknown as Konva.Shape | Konva.Group;
-
   // if we are selecting with rect, do nothing
   if (selectionRectangle.visible) {
     return;
   }
 
   // if click on empty area - remove all selections
-  if ((e.target as unknown) === target.getStage()) {
+  if (target === target.getStage()) {
     selectedIds.value = [];
     return;
   }
 
-  // do nothing if clicked NOT on our rectangles
-  if (!target.hasName("rect")) {
-    return;
-  }
-
   const clickedId = target.attrs.id;
 
   // do we pressed shift or ctrl?
-  const metaPressed =
+  const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
-    (e as any).evt?.shiftKey ||
-    (e as any).evt?.ctrlKey ||
-    (e as any).evt?.metaKey;
   const isSelected = selectedIds.value.includes(clickedId);
 
   if (!metaPressed && !isSelected) {
@@ -264,7 +263,7 @@ function handleStageClick(e: Event) {
   } else if (metaPressed && isSelected) {
     // if we pressed keys and node was selected
     // we need to remove it from selection:
-    selectedIds.value = selectedIds.value.filter((id) => id !== clickedId);
+    selectedIds.value = selectedIds.value.filter(id => id !== clickedId);
   } else if (metaPressed && !isSelected) {
     // add the node into selection
     selectedIds.value = [...selectedIds.value, clickedId];
@@ -328,11 +327,14 @@ function handleMouseUp() {
     height: Math.abs(selectionRectangle.y2 - selectionRectangle.y1),
   };
 
+  let currentSelectedIds = [];
   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 (isUndefined(shapeConfig.box)) {
         if (
           shapeConfig.config.width &&
@@ -352,35 +354,16 @@ function handleMouseUp() {
       }
     }
 
-    if (Konva.Util.haveIntersection(selBox, shapeConfig.box as IRect))
+    if (Konva.Util.haveIntersection(selBox, {
-      selectedIds.value.push(shapeConfig.id)
+      x: shapeConfig.box.x + shapeConfig.x,
+      y: shapeConfig.box.y + shapeConfig.y,
+      width: shapeConfig.box.width,
+      height: shapeConfig.box.height,
+    }))
+      currentSelectedIds.push(shapeConfig.id)
   }
 
-  /*  const selected = [...objMap.values()].filter((shape) => {
+  selectedIds.value = currentSelectedIds;
-     // 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) {