#1522 모듈 단삽입 오류 수정

src/hooks/module/useModule.js

@@ -1,4 +1,5 @@
 import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
+import { QPolygon } from '@/components/fabric/QPolygon'
 import { canvasState } from '@/store/canvasAtom'
 import { polygonToTurfPolygon } from '@/util/canvas-util'
 import { useRecoilValue } from 'recoil'
@@ -44,6 +45,42 @@ export function useModule() {
   const { clear: removeTrestleMaterials } = useTrestle()
   const { checkModuleDisjointSurface } = useTurf()
 
+  // clone() 대신 직접 새 QPolygon을 생성하여 Maximum call stack 방지
+  const createModuleCopy = (module, newLeft, newTop, overrides = {}) => {
+    const deltaX = newLeft - module.left
+    const deltaY = newTop - module.top
+    const newPoints = module.points.map((p) => ({
+      x: p.x + deltaX,
+      y: p.y + deltaY,
+    }))
+    return new QPolygon(newPoints, {
+      fill: module.fill,
+      stroke: module.stroke,
+      strokeWidth: module.strokeWidth,
+      opacity: module.opacity,
+      selectable: module.selectable,
+      lockMovementX: module.lockMovementX,
+      lockMovementY: module.lockMovementY,
+      lockRotation: module.lockRotation,
+      lockScalingX: module.lockScalingX,
+      lockScalingY: module.lockScalingY,
+      parentId: module.parentId,
+      initOptions: module.initOptions,
+      direction: module.direction,
+      arrow: module.arrow,
+      name: module.name,
+      surfaceId: module.surfaceId,
+      moduleInfo: module.moduleInfo,
+      left: newLeft,
+      top: newTop,
+      width: module.width,
+      height: module.height,
+      toFixed: 2,
+      sort: false,
+      ...overrides,
+    })
+  }
+
   const moduleMove = (length, direction) => {
     const selectedObj = canvas.getActiveObjects() //선택된 객체들을 가져옴
     const selectedIds = selectedObj.map((obj) => obj.id) // selectedObj의 ID 추출
@@ -256,27 +293,10 @@ export function useModule() {
 
       modules.forEach((module) => {
         const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength) * 10, false)
-        module.clone((obj) => {
+        copyModule = createModuleCopy(module, left, top)
-          obj.set({
+        canvas.add(copyModule)
-            parentId: module.parentId,
+        copyModules.push(copyModule)
-            initOptions: module.initOptions,
+        copyModule.setCoords()
-            direction: module.direction,
-            arrow: module.arrow,
-            name: module.name,
-            type: module.type,
-            length: module.length,
-            points: module.points,
-            surfaceId: module.surfaceId,
-            moduleInfo: module.moduleInfo,
-            left,
-            top,
-            id: uuidv4(),
-          })
-          copyModule = obj
-          canvas.add(obj)
-          copyModules.push(obj)
-          obj.setCoords()
-        })
         if (isOverlapObjects(copyModule, objects) || isOutsideSurface(copyModule, surface)) {
           isWarning = true
           copyModule.set({ fill: 'red' })
@@ -318,27 +338,10 @@ export function useModule() {
     canvas.discardActiveObject() //선택해제
     modules.forEach((module) => {
       const { top, left } = getPosotion(module, direction, length, true)
-      module.clone((obj) => {
+      copyModule = createModuleCopy(module, left, top)
-        obj.set({
+      copyModules.push(copyModule)
-          parentId: module.parentId,
+      canvas.add(copyModule)
-          initOptions: module.initOptions,
+      canvas.renderAll()
-          direction: module.direction,
-          arrow: module.arrow,
-          name: module.name,
-          type: module.type,
-          length: module.length,
-          points: module.points,
-          surfaceId: module.surfaceId,
-          moduleInfo: module.moduleInfo,
-          left,
-          top,
-          id: uuidv4(),
-        })
-        copyModules.push(obj)
-        copyModule = obj
-        canvas.add(obj)
-        canvas.renderAll()
-      })
 
       if (
         isOverlapOtherModules(copyModule, otherModules) ||
@@ -412,29 +415,10 @@ export function useModule() {
 
     modules.forEach((module) => {
       const { top, left } = getPosotion(module, direction, Number(length), true)
-      module.clone((obj) => {
+      copyModule = createModuleCopy(module, left, top, { stroke: 'black' })
-        obj.set({
+      canvas.add(copyModule)
-          parentId: module.parentId,
+      copyModules.push(copyModule)
-          initOptions: module.initOptions,
+      copyModule.setCoords()
-          stroke: 'black',
-          direction: module.direction,
-          arrow: module.arrow,
-          name: module.name,
-          type: module.type,
-          length: module.length,
-          points: module.points,
-          moduleInfo: module.moduleInfo,
-          surfaceId: module.surfaceId,
-          left,
-          top,
-          id: uuidv4(),
-        })
-        copyModule = obj
-        canvas.add(obj)
-        copyModules.push(obj)
-        obj.setCoords()
-        console.log(obj)
-      })
       if (
         isOverlapOtherModules(copyModule, otherModules) ||
         isOverlapObjects(copyModule, objects) ||
@@ -770,28 +754,10 @@ export function useModule() {
     otherModules = getOtherModules(columnModules)
     columnModules.forEach((module) => {
       const { top, left } = getPosotion(module, type, moduleIntvlHor, true)
-      let copyModule = null
+      const copyModule = createModuleCopy(module, left, top)
-      module.clone((obj) => {
+      canvas.add(copyModule)
-        obj.set({
+      copyModules.push(copyModule)
-          parentId: module.parentId,
+      copyModule.setCoords()
-          initOptions: module.initOptions,
-          direction: module.direction,
-          arrow: module.arrow,
-          name: module.name,
-          type: module.type,
-          length: module.length,
-          points: module.points,
-          moduleInfo: module.moduleInfo,
-          surfaceId: module.surfaceId,
-          left,
-          top,
-          id: uuidv4(),
-        })
-        copyModule = obj
-        canvas.add(obj)
-        copyModules.push(obj)
-        obj.setCoords()
-      })
       canvas.renderAll()
 
       if (
@@ -879,29 +845,10 @@ export function useModule() {
     otherModules = getOtherModules(rowModules)
     rowModules.forEach((module) => {
       const { top, left } = getPosotion(module, type, moduleIntvlVer, true)
-      let copyModule = null
+      const copyModule = createModuleCopy(module, left, top)
-      module.clone((obj) => {
+      canvas.add(copyModule)
-        obj.set({
+      copyModules.push(copyModule)
-          parentId: module.parentId,
+      copyModule.setCoords()
-          initOptions: module.initOptions,
-          direction: module.direction,
-          arrow: module.arrow,
-          name: module.name,
-          type: module.type,
-          length: module.length,
-          points: module.points,
-          surfaceId: module.surfaceId,
-          moduleInfo: module.moduleInfo,
-          fill: module.fill,
-          left,
-          top,
-          id: uuidv4(),
-        })
-        copyModule = obj
-        canvas.add(obj)
-        copyModules.push(obj)
-        obj.setCoords()
-      })
       canvas.renderAll()
 
       if (