diff --git a/src/hooks/module/useModule.js b/src/hooks/module/useModule.js index c81c54cb..d4a0e7de 100644 --- a/src/hooks/module/useModule.js +++ b/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) => { - obj.set({ - parentId: module.parentId, - 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, - left, - top, - id: uuidv4(), - }) - copyModule = obj - canvas.add(obj) - copyModules.push(obj) - obj.setCoords() - }) + copyModule = createModuleCopy(module, left, top) + canvas.add(copyModule) + copyModules.push(copyModule) + copyModule.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) => { - obj.set({ - parentId: module.parentId, - 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, - left, - top, - id: uuidv4(), - }) - copyModules.push(obj) - copyModule = obj - canvas.add(obj) - canvas.renderAll() - }) + copyModule = createModuleCopy(module, left, top) + copyModules.push(copyModule) + canvas.add(copyModule) + 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) => { - obj.set({ - parentId: module.parentId, - initOptions: module.initOptions, - 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) - }) + copyModule = createModuleCopy(module, left, top, { stroke: 'black' }) + canvas.add(copyModule) + copyModules.push(copyModule) + copyModule.setCoords() 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 - module.clone((obj) => { - obj.set({ - parentId: module.parentId, - 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() - }) + const copyModule = createModuleCopy(module, left, top) + canvas.add(copyModule) + copyModules.push(copyModule) + copyModule.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 - module.clone((obj) => { - obj.set({ - parentId: module.parentId, - 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() - }) + const copyModule = createModuleCopy(module, left, top) + canvas.add(copyModule) + copyModules.push(copyModule) + copyModule.setCoords() canvas.renderAll() if (