implement

front/src/components/whiteboard/shapes/SvgRectangle.vue

@@ -1,17 +1,43 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import type { Rectangle } from '@/types/whiteboard.ts'
 
-const props = defineProps<{ rectangle: Rectangle }>()
+const props = withDefaults(defineProps<{ rectangle: Rectangle; isSelected?: boolean }>(), {
+  isSelected: false,
+})
+
+const x = computed(() => Math.min(props.rectangle.position.x, props.rectangle.endPosition.x))
+const y = computed(() => Math.min(props.rectangle.position.y, props.rectangle.endPosition.y))
+const w = computed(() => Math.abs(props.rectangle.endPosition.x - props.rectangle.position.x))
+const h = computed(() => Math.abs(props.rectangle.endPosition.y - props.rectangle.position.y))
 </script>
 
 <template>
-  <rect
-    :x="Math.min(props.rectangle.position.x, props.rectangle.endPosition.x)"
-    :y="Math.min(props.rectangle.position.y, props.rectangle.endPosition.y)"
-    :width="Math.abs(props.rectangle.endPosition.x - props.rectangle.position.x)"
-    :height="Math.abs(props.rectangle.endPosition.y - props.rectangle.position.y)"
-    :stroke="props.rectangle.color"
-    :stroke-width="props.rectangle.borderThickness"
-    fill="none"
-  />
+  <g :data-shape-id="props.rectangle.id" data-shape-type="rectangle">
+    <rect
+      :x="x"
+      :y="y"
+      :width="w"
+      :height="h"
+      :stroke="props.rectangle.color"
+      :stroke-width="props.rectangle.borderThickness"
+      fill="none"
+    />
+    <template v-if="isSelected">
+      <rect
+        :x="x"
+        :y="y"
+        :width="w"
+        :height="h"
+        stroke="#4f9dff"
+        stroke-width="1"
+        stroke-dasharray="4 2"
+        fill="none"
+      />
+      <circle :cx="x" :cy="y" r="4" fill="white" stroke="#4f9dff" stroke-width="1.5" />
+      <circle :cx="x + w" :cy="y" r="4" fill="white" stroke="#4f9dff" stroke-width="1.5" />
+      <circle :cx="x" :cy="y + h" r="4" fill="white" stroke="#4f9dff" stroke-width="1.5" />
+      <circle :cx="x + w" :cy="y + h" r="4" fill="white" stroke="#4f9dff" stroke-width="1.5" />
+    </template>
+  </g>
 </template>