Merge branch 'feature/test' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into feature/test

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 QPolygon2 from '@/components/fabric/QPolygon2'
+
 import RangeSlider from './ui/RangeSlider'
 import { useRecoilState } from 'recoil'
-import { fontSizeState, canvasSizeState } from '@/store/canvasAtom'
+import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
 
 export default function Roof2() {
   const {
@@ -89,12 +89,13 @@ export default function Roof2() {
           selectable: true,
           fontSize: fontSize,
         },
+        canvas,
       )
 
       canvas?.add(polygon)
       console.log(polygon)
 
-      // polygon.fillCell({ width: 50, height: 30, padding: 10 })
+      polygon.fillCell({ width: 50, height: 30, padding: 10 })
     }
   }
 
@@ -139,6 +140,7 @@ export default function Roof2() {
           selectable: true,
           fontSize: fontSize,
         },
+        canvas,
       )
 
       canvas?.add(polygon)
@@ -162,7 +164,7 @@ export default function Roof2() {
 
   const makeQPolygon2 = () => {
     if (canvas) {
-      const polygon2 = new QPolygon2(
+      const polygon2 = new QPolygon(
         [
           { x: 100, y: 100 },
           { x: 800, y: 100 },

src/components/fabric/QPolygon.js

@@ -1,87 +1,63 @@
 import { fabric } from 'fabric'
 import { distanceBetweenPoints } from '@/util/canvas-util'
-export default class QPolygon extends fabric.Polygon {
-  #viewLengthText
-  #text = []
-  #fontSize
-  type = 'QPolygon'
 
-  constructor(points, option) {
+export default class QPolygon extends fabric.Group {
-    if (!option.fontSize) {
+  type = 'QPolygon'
+  polygon
+  points
+  texts = []
+  canvas
+  fontSize
+  constructor(points, options, canvas) {
+    if (!options.fontSize) {
       throw new Error('Font size is required.')
     }
-    super(points, option)
+    if (!canvas) {
-    this.#fontSize = option.fontSize
+      throw new Error('Canvas is required.')
-    this.#init(points)
-    this.#addControl()
     }
 
-  #init(points) {
+    const polygon = new fabric.Polygon(points, options)
-    this.#viewLengthText = points.viewLengthText ?? true
+    super([polygon], {})
+    this.fontSize = options.fontSize
+    this.points = points
+    this.polygon = polygon
+    this.canvas = canvas
+
+    this.#init()
+    this.#addEvent()
   }
 
-  setViewLengthText(bool) {
+  #init() {
-    this.#viewLengthText = bool
     this.#addLengthText()
   }
 
-  #addControl() {
+  #addEvent() {
-    this.on('removed', () => {
-      if (this.#text.length > 0) {
-        this.#text.forEach((text) => {
-          this.canvas.remove(text)
-        })
-        this.#text = []
-      }
-    })
-
-    this.on('added', () => {
-      this.#addLengthText()
-    })
-
-    this.on('modified', (e) => {
-      console.log(this)
-      this.#addLengthText()
-    })
-
     this.on('scaling', (e) => {
-      this.#addLengthText()
+      this.#updateLengthText()
-    })
-
-    this.on('moving', () => {
-      this.#addLengthText()
     })
   }
 
-  setTexts(texts) {
+  setFontSize(fontSize) {
-    this.#text = texts
+    this.texts.forEach((text) => {
-  }
+      text.set({ fontSize })
-
+      this.canvas.requestRenderAll()
-  getTexts() {
+    })
-    return this.#text
+    this.fontSize = fontSize
   }
 
   #addLengthText() {
-    if (this.#text.length > 0) {
+    if (this.texts.length > 0) {
-      this.#text.forEach((text) => {
+      this.texts.forEach((text) => {
         this.canvas.remove(text)
       })
-      this.#text = []
+      this.texts = []
     }
-    if (!this.#viewLengthText) {
-      return
-    }
-
-    const scaleX = this.scaleX
-    const scaleY = this.scaleY
-
     const points = this.getCurrentPoints()
 
-    for (let i = 0; i < points.length; i++) {
+    points.forEach((start, i) => {
-      const start = points[i]
       const end = points[(i + 1) % points.length]
-      const dx = (end.x - start.x) * scaleX
+      const dx = end.x - start.x
-      const dy = (end.y - start.y) * scaleY
+      const dy = end.y - start.y
       const length = Math.sqrt(dx * dx + dy * dy)
 
       const midPoint = new fabric.Point(
@@ -89,69 +65,39 @@ export default class QPolygon extends fabric.Polygon {
         (start.y + end.y) / 2,
       )
 
+      // Create new text object if it doesn't exist
       const text = new fabric.Text(length.toFixed(0), {
         left: midPoint.x,
         top: midPoint.y,
-        fontSize: this.#fontSize,
+        fontSize: this.fontSize,
         selectable: false,
       })
-      this.#text.push(text)
-      this.canvas.add(text)
-    }
-  }
 
-  setFontSize(fontSize) {
+      this.texts.push(text)
-    this.#fontSize = fontSize
+      this.addWithUpdate(text)
-    this.#addLengthText()
-  }
-
-  getCurrentPoints() {
-    const scaleX = this.scaleX
-    const scaleY = this.scaleY
-
-    return this.points.map((point) => {
-      return {
-        x: point.x * scaleX + this.left,
-        y: point.y * scaleY + this.top,
-      }
     })
+
+    this.canvas.renderAll()
   }
 
-  #distanceFromEdge(point) {
+  #updateLengthText() {
-    const vertices = this.points
+    const points = this.getCurrentPoints()
-    let minDistance = Infinity
 
-    for (let i = 0; i < vertices.length; i++) {
+    points.forEach((start, i) => {
-      let vertex1 = vertices[i]
+      const end = points[(i + 1) % points.length]
-      let vertex2 = vertices[(i + 1) % vertices.length]
+      const dx = end.x - start.x
+      const dy = end.y - start.y
+      const length = Math.sqrt(dx * dx + dy * dy)
 
-      const dx = vertex2.x - vertex1.x
+      // Update the text object with the new length
-      const dy = vertex2.y - vertex1.y
+      this.texts[i].set({ text: length.toFixed(0) })
+    })
 
-      const t =
+    this.canvas.renderAll()
-        ((point.x - vertex1.x) * dx + (point.y - vertex1.y) * dy) /
-        (dx * dx + dy * dy)
-
-      let closestPoint
-      if (t < 0) {
-        closestPoint = vertex1
-      } else if (t > 1) {
-        closestPoint = vertex2
-      } else {
-        closestPoint = new fabric.Point(vertex1.x + t * dx, vertex1.y + t * dy)
-      }
-
-      const distance = distanceBetweenPoints(point, closestPoint)
-      if (distance < minDistance) {
-        minDistance = distance
-      }
-    }
-
-    return minDistance
   }
 
   fillCell(cell = { width: 50, height: 100, padding: 10 }) {
-    const points = this.points
+    const points = this.getCurrentPoints()
     let bounds
 
     try {
@@ -195,7 +141,7 @@ export default class QPolygon extends fabric.Polygon {
         )
 
         if (isInside) {
-          this.canvas.add(rect)
+          this.addWithUpdate(rect)
         }
       }
     }
@@ -204,7 +150,7 @@ export default class QPolygon extends fabric.Polygon {
   }
 
   inPolygon(point) {
-    const vertices = this.points
+    const vertices = this.getCurrentPoints()
     let intersects = 0
 
     for (let i = 0; i < vertices.length; i++) {
@@ -236,4 +182,57 @@ export default class QPolygon extends fabric.Polygon {
 
     return intersects % 2 === 1
   }
+
+  #distanceFromEdge(point) {
+    const vertices = this.getCurrentPoints()
+    let minDistance = Infinity
+
+    for (let i = 0; i < vertices.length; i++) {
+      let vertex1 = vertices[i]
+      let vertex2 = vertices[(i + 1) % vertices.length]
+
+      const dx = vertex2.x - vertex1.x
+      const dy = vertex2.y - vertex1.y
+
+      const t =
+        ((point.x - vertex1.x) * dx + (point.y - vertex1.y) * dy) /
+        (dx * dx + dy * dy)
+
+      let closestPoint
+      if (t < 0) {
+        closestPoint = vertex1
+      } else if (t > 1) {
+        closestPoint = vertex2
+      } else {
+        closestPoint = new fabric.Point(vertex1.x + t * dx, vertex1.y + t * dy)
+      }
+
+      const distance = distanceBetweenPoints(point, closestPoint)
+      if (distance < minDistance) {
+        minDistance = distance
+      }
+    }
+
+    return minDistance
+  }
+
+  setViewLengthText(boolean) {
+    this.texts.forEach((text) => {
+      text.visible = boolean
+    })
+
+    this.canvas.renderAll()
+  }
+
+  getCurrentPoints() {
+    const scaleX = this.scaleX
+    const scaleY = this.scaleY
+
+    return this.points.map((point) => {
+      return {
+        x: point.x * scaleX,
+        y: point.y * scaleY,
+      }
+    })
+  }
 }

src/components/fabric/QPolygon2.js

@@ -1,79 +0,0 @@
-import { fabric } from 'fabric'
-
-export default class QPolygon2 extends fabric.Group {
-  type = 'QPolygon2'
-  polygon
-  points
-  texts = []
-  canvas
-  constructor(points, options, canvas) {
-    const polygon = new fabric.Polygon(points, options)
-    super([polygon], {})
-    this.points = points
-    this.polygon = polygon
-    this.canvas = canvas
-
-    this.#init()
-    this.#addEvent()
-  }
-
-  #init() {
-    this.#addLengthText()
-  }
-
-  #addEvent() {
-    this.on('modified', () => {
-      // this.#addLengthText()
-    })
-  }
-
-  #addLengthText() {
-    const points = this.getCurrentPoints()
-
-    points.forEach((start, i) => {
-      const end = points[(i + 1) % points.length]
-      const dx = end.x - start.x
-      const dy = end.y - start.y
-      const length = Math.sqrt(dx * dx + dy * dy)
-
-      const midPoint = new fabric.Point(
-        (start.x + end.x) / 2,
-        (start.y + end.y) / 2,
-      )
-
-      if (this.texts[i]) {
-        // Update existing text
-        this.texts[i].set({
-          text: length.toFixed(0),
-          left: midPoint.x,
-          top: midPoint.y,
-        })
-      } else {
-        // Create new text object if it doesn't exist
-        const text = new fabric.Text(length.toFixed(0), {
-          left: midPoint.x,
-          top: midPoint.y,
-          fontSize: 16,
-          selectable: false,
-        })
-
-        this.texts.push(text)
-        this.addWithUpdate(text)
-      }
-    })
-
-    this.canvas.renderAll()
-  }
-
-  getCurrentPoints() {
-    const scaleX = this.scaleX
-    const scaleY = this.scaleY
-
-    return this.points.map((point) => {
-      return {
-        x: point.x * scaleX,
-        y: point.y * scaleY,
-      }
-    })
-  }
-}

src/hooks/useMode.js

@@ -405,13 +405,17 @@ export function useMode() {
     })
 
     // 점 배열을 사용하여 새로운 다각형 객체를 생성합니다.
-    const polygon = new QPolygon(points, {
+    const polygon = new QPolygon(
+      points,
+      {
         stroke: 'black',
         fill: 'transparent',
         viewLengthText: true,
         selectable: true,
         fontSize: fontSize,
-    })
+      },
+      canvas,
+    )
 
     // 새로운 다각형 객체를 캔버스에 추가합니다.
     canvas.add(polygon)
@@ -421,6 +425,7 @@ export function useMode() {
       polygon.fillCell()
       canvas.renderAll()
       polygon.setViewLengthText(false)
+      setMode(Mode.DEFAULT)
     }
   }