가장 작은 점의 index 구하는 함수 추가, 점 추가

src/app/util/canvas-util.js

@@ -131,43 +131,26 @@ export const distanceBetweenPoints = (point1, point2) => {
   return Math.sqrt(dx * dx + dy * dy)
 }
 
-function fillCanvasWithDots(canvas, gap) {
-  const width = canvas.getWidth()
-  const height = canvas.getHeight()
+/**
+ * line의 시작점을 찾는 함수
+ * @param lines
+ * @returns {number}
+ */
+export const getStartIndex = (lines) => {
+  let smallestIndex = 0
+  let smallestX1 = lines[0].x1
+  let smallestY1 = lines[0].y1
 
-  for (let x = 0; x < width; x += gap) {
-    for (let y = 0; y < height; y += gap) {
-      const circle = new fabric.Circle({
-        radius: 1,
-        fill: 'black',
-        left: x,
-        top: y,
-        selectable: false,
-      })
-      canvas.add(circle)
+  for (let i = 1; i < arr.length; i++) {
+    if (
+      lines[i].x1 < smallestX1 ||
+      (lines[i].x1 === smallestX1 && lines[i].y1 < smallestY1)
+    ) {
+      smallestIndex = i
+      smallestX1 = lines[i].x1
+      smallestY1 = lines[i].y1
     }
   }
 
-  canvas.renderAll()
-}
-
-export const setCanvasBackgroundWithDots = (canvas, gap) => {
-  // Create a new canvas and fill it with dots
-  const tempCanvas = new fabric.StaticCanvas()
-  tempCanvas.setDimensions({
-    width: canvas.getWidth(),
-    height: canvas.getHeight(),
-  })
-  fillCanvasWithDots(tempCanvas, gap)
-
-  // Convert the dotted canvas to an image
-  const dataUrl = tempCanvas.toDataURL({ format: 'png' })
-
-  // Set the image as the background of the original canvas
-  fabric.Image.fromURL(dataUrl, function (img) {
-    canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
-      scaleX: canvas.width / img.width,
-      scaleY: canvas.height / img.height,
-    })
-  })
+  return smallestIndex
 }

src/components/Roof2.jsx

@@ -4,10 +4,10 @@ import { Mode, useMode } from '@/hooks/useMode'
 import QRect from '@/components/fabric/QRect'
 import QLine from '@/components/fabric/QLine'
 import QPolygon from '@/components/fabric/QPolygon'
-import { setCanvasBackgroundWithDots } from '@/app/util/canvas-util'
 
 export default function Roof2() {
-  const { canvas, handleRedo, handleUndo } = useCanvas('canvas')
+  const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots } =
+    useCanvas('canvas')
 
   const {
     mode,

src/hooks/useCanvas.js

@@ -493,6 +493,47 @@ export function useCanvas(id) {
     canvas?.renderAll()
   }
 
+  function fillCanvasWithDots(canvas, gap) {
+    const width = canvas.getWidth()
+    const height = canvas.getHeight()
+
+    for (let x = 0; x < width; x += gap) {
+      for (let y = 0; y < height; y += gap) {
+        const circle = new fabric.Circle({
+          radius: 1,
+          fill: 'black',
+          left: x,
+          top: y,
+          selectable: false,
+        })
+        canvas.add(circle)
+      }
+    }
+
+    canvas.renderAll()
+  }
+
+  const setCanvasBackgroundWithDots = (canvas, gap) => {
+    // Create a new canvas and fill it with dots
+    const tempCanvas = new fabric.StaticCanvas()
+    tempCanvas.setDimensions({
+      width: canvas.getWidth(),
+      height: canvas.getHeight(),
+    })
+    fillCanvasWithDots(tempCanvas, gap)
+
+    // Convert the dotted canvas to an image
+    const dataUrl = tempCanvas.toDataURL({ format: 'png' })
+
+    // Set the image as the background of the original canvas
+    fabric.Image.fromURL(dataUrl, function (img) {
+      canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
+        scaleX: canvas.width / img.width,
+        scaleY: canvas.height / img.height,
+      })
+    })
+  }
+
   return {
     canvas,
     addShape,
@@ -506,5 +547,6 @@ export function useCanvas(id) {
     attachCustomControlOnPolygon,
     saveImage,
     handleFlip,
+    setCanvasBackgroundWithDots,
   }
 }