feat: auto hide rect bounding when not hover

src/views/ProjectView.vue

@@ -9,15 +9,18 @@
             y: item.y,
             draggable: true,
             id: `group-${item.id}`,
-          }" @dragstart="handleDragStart" @dragend="handleDragEnd" @mouseover="handleCanvasObjectMouseOver">
-            <v-rect :config="item.config" />
+          }" @dragstart="handleDragStart" @dragend="handleDragEnd" @mouseover="handleCanvasObjectMouseOver"
+            @mouseout="handleCanvasObjectMouseOut">
             <v-rect v-show="!isUndefined(item.box)" :config="{
               ...item.box,
-              visible: !isUndefined(item.box),
-              stroke: 'red',
-              strokeWidth: 3,
+              visible: !isUndefined(item.box) && item.isHoverring,
+              stroke: 'rgb(125,193,239)',
+              strokeWidth: 2.5,
+              dash: [10, 5],
+              cornerRadius: 10
             }">
             </v-rect>
+            <v-rect :config="item.config" />
           </v-group>
         </template>
 
@@ -39,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { isNull, isUndefined } from "mathjs";
+import { isNull, isUndefined, ObjectNode } from "mathjs";
 import Konva from "konva";
 import type {
   VGroup,
@@ -68,6 +71,7 @@ type CanvasObject = {
   id: string;
   x: number;
   y: number;
+  isHoverring: boolean;
   box?: CanvasObjectBox;
 };
 
@@ -137,6 +141,7 @@ onMounted(() => {
       id: id,
       x: x,
       y: y,
+      isHoverring: false,
     });
   }
 });
@@ -327,7 +332,13 @@ function handleMouseUp() {
       node === selectRect.value?.getNode()
     )
       return false;
-    return Konva.Util.haveIntersection(selBox);
+
+    const nodeConfig = objMap.get(node.id());
+    if (isUndefined(nodeConfig) || isUndefined(nodeConfig.box)) {
+      return;
+    }
+
+    return Konva.Util.haveIntersection(selBox, nodeConfig.box);
   });
 
   selectedIds.value = selected.map((node: Konva.Node) => node.id());
@@ -351,9 +362,10 @@ function handleCanvasObjectMouseOver(evt: Event) {
   // Get client rect
   const objectConfig = objMap.get(object.id());
   if (isUndefined(objectConfig)) {
-    console.error(`Not found object id: ${object.id()}`);
     return;
   }
+
+  // Get clientBox for first time
   if (isUndefined(objectConfig.box)) {
     if (
       objectConfig.config.width &&
@@ -368,9 +380,44 @@ function handleCanvasObjectMouseOver(evt: Event) {
       );
     } else console.error("Could not calculate rect bounding");
   }
+
+  objectConfig.isHoverring = true;
+}
+
+
+function handleCanvasObjectMouseOut(evt: Event) {
+  if (isNull(evt.target)) return;
+  const target = evt.target;
+
+  let object = null;
+  if (target instanceof Konva.Group) {
+    if (!target.hasChildren()) return;
+    object = target.children[0];
+  } else if (target instanceof Konva.Rect) {
+    object = target;
+  } else {
+    console.trace(`Not Konva class: ${target}`);
+    return;
+  }
+
+  // Get client rect
+  const objectConfig = objMap.get(object.id());
+  if (isUndefined(objectConfig)) {
+    return;
+  }
+
+  objectConfig.isHoverring = false;
 }
 </script>
 
 <style>
 @import "../assets/main.css";
 </style>
+
+<style module>
+@import "../assets/main.css";
+
+.primary {
+  color: rgb(125, 193, 239)
+}
+</style>