add boarder

src/views/ProjectView.vue

@@ -3,23 +3,25 @@
     <v-stage class="h-full w-full" ref="stage" :config="stageSize" @mousedown="handleMouseDown"
       @mousemove="handleMouseMove" @mouseup="handleMouseUp" @click="handleStageClick">
       <v-layer ref="layer">
-        <v-star v-for="item in list" :key="item.id" :config="{
+        <template v-for="item in list" :key="item.id">
+          <v-group :config="{
             x: item.x,
             y: item.y,
-          rotation: item.rotation,
-          id: item.id,
             draggable: true,
-          numPoints: 5,
-          innerRadius: 30,
-          outerRadius: 50,
-          fill: '#89b717',
-          opacity: 0.8,
-          shadowColor: 'black',
-          shadowBlur: 10,
-          shadowOpacity: 0.6,
-          scaleX: item.scale,
-          scaleY: item.scale,
-        }" @dragstart="handleDragStart" @dragend="handleDragEnd" />
+            id: `group-${item.id}`,
+          }" @dragstart="handleDragStart" @dragend="handleDragEnd">
+            <v-rect :config="{
+              x: item.box.x,
+              y: item.box.y,
+              width: item.box.width,
+              height: item.box.height,
+              stroke: 'red',
+              strokeWidth: 1,
+            }">
+            </v-rect>
+          </v-group>
+        </template>
+
         <v-transformer ref="transformer" />
         <v-rect ref="selectRect" v-if="selectionRectangle.visible" :config="{
           x: Math.min(selectionRectangle.x1, selectionRectangle.x2),
@@ -54,15 +56,50 @@ const stageSize = {
   height: window.innerHeight,
 };
 
-const list = ref<Konva.NodeConfig[]>([]);
+type CanvasObject = {
+  id: string;
+  x: number;
+  y: number;
+  // rotation: number;
+  // scale: number;
+  object: Konva.Node;
+  box: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+};
+
+const list = ref<CanvasObject[]>([]);
 onMounted(() => {
   for (let n = 0; n < 100; n++) {
+    const id = Math.round(Math.random() * 10000).toString();
+    const x = Math.random() * stageSize.width;
+    const y = Math.random() * stageSize.height;
+    const rotation = Math.random() * 180;
+    const scale = Math.random();
+
+    const star = new Konva.Star({
+      rotation: rotation,
+      id: id,
+      numPoints: 5,
+      innerRadius: 30,
+      outerRadius: 50,
+      fill: "#89b717",
+      opacity: 0.8,
+      scaleX: scale,
+      scaleY: scale,
+    });
+
     list.value.push({
-      id: Math.round(Math.random() * 10000).toString(),
-      x: Math.random() * stageSize.width,
-      y: Math.random() * stageSize.height,
-      rotation: Math.random() * 180,
-      scale: Math.random(),
+      id: id,
+      x: x,
+      y: y,
+      // rotation: rotation,
+      // scale: scale,
+      object: star,
+      box: star.getClientRect(),
     });
   }
 });
@@ -85,6 +122,13 @@ const selectionRectangle = reactive({
   y2: 0,
 });
 
+onMounted(() => {
+  if (isNull(transformer.value)) return;
+
+  const selectedBox = transformer.value.getNode();
+  selectedBox.resizeEnabled(false);
+  selectedBox.rotateEnabled(false);
+});
 
 function degToRad(angle: number) {
   return (angle / 180) * Math.PI;
@@ -286,12 +330,11 @@ function handleMouseUp() {
       node === selectRect.value?.getNode()
     )
       return false;
-    return Konva.Util.haveIntersection(selBox, node.getClientRect());
+    return Konva.Util.haveIntersection(selBox);
   });
 
   selectedIds.value = selected.map((node: Konva.Node) => node.id());
 }
-
 </script>
 
 <style>