From b7c3af0adbb950317ecf37c33a68410e3c08a59e Mon Sep 17 00:00:00 2001 From: yjnoh Date: Mon, 16 Dec 2024 13:07:38 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9C=A1=EC=A7=80=EB=B6=95=20=EC=88=98?= =?UTF-8?q?=EB=8F=99=20=EB=AA=A8=EB=93=88=20=EC=84=A4=EC=B9=98=20=EC=9E=91?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/module/useModuleBasicSetting.js | 107 ++++++++++------------ 1 file changed, 49 insertions(+), 58 deletions(-) diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js index 43e7e388..fea7dbf8 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -279,22 +279,22 @@ export function useModuleBasicSetting() { //설치된 셀에 좌측에 스냅 if (Math.abs(smallRight - holdCellLeft) < snapDistance) { - tempModule.left = holdCellLeft - width - 0.5 + tempModule.left = holdCellLeft - width - 1 } //설치된 셀에 우측에 스냅 if (Math.abs(smallLeft - holdCellRight) < snapDistance) { - tempModule.left = holdCellRight + 0.5 + tempModule.left = holdCellRight + 1 } //설치된 셀에 위쪽에 스냅 if (Math.abs(smallBottom - holdCellTop) < snapDistance) { - tempModule.top = holdCellTop - height - 0.5 + tempModule.top = holdCellTop - height - 1 } //설치된 셀에 밑쪽에 스냅 if (Math.abs(smallTop - holdCellBottom) < snapDistance) { - tempModule.top = holdCellBottom + 0.5 + tempModule.top = holdCellBottom + 1 } //가운데 -> 가운데 if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) { @@ -312,14 +312,14 @@ export function useModuleBasicSetting() { if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) { tempModule.top = holdCellCenterY - height / 2 } - //위쪽 -> 가운데 - if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) { - tempModule.top = holdCellCenterY - } - //아랫쪽 -> 가운데 - if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) { - tempModule.top = holdCellCenterY - height - } + // //위쪽 -> 가운데 + // if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) { + // tempModule.top = holdCellCenterY + // } + // //아랫쪽 -> 가운데 + // if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) { + // tempModule.top = holdCellCenterY - height + // } }) } @@ -393,13 +393,13 @@ export function useModuleBasicSetting() { if (!inside) return if (tempModule) { const rectPoints = [ - { x: tempModule.left + 0.5, y: tempModule.top + 0.5 }, - { x: tempModule.left + 0.5 + tempModule.width * tempModule.scaleX, y: tempModule.top + 0.5 }, + { x: tempModule.left, y: tempModule.top }, + { x: tempModule.left + tempModule.width * tempModule.scaleX, y: tempModule.top }, { - x: tempModule.left + tempModule.width * tempModule.scaleX + 0.5, - y: tempModule.top + tempModule.height * tempModule.scaleY + 0.5, + x: tempModule.left + tempModule.width * tempModule.scaleX, + y: tempModule.top + tempModule.height * tempModule.scaleY, }, - { x: tempModule.left + 0.5, y: tempModule.top + tempModule.height * tempModule.scaleY + 0.5 }, + { x: tempModule.left, y: tempModule.top + tempModule.height * tempModule.scaleY }, ] tempModule.set({ points: rectPoints }) @@ -1556,30 +1556,6 @@ export function useModuleBasicSetting() { name: 'module', } - // function getRotatedCorners(rect) { - // // 사각형의 중심점 - // const center = rect.getCenterPoint() - - // // 사각형의 원래 꼭짓점 좌표 (로컬 좌표 기준) - // const halfWidth = (rect.width / 2) * rect.scaleX - // const halfHeight = (rect.height / 2) * rect.scaleY - - // const corners = [ - // { x: -halfWidth, y: -halfHeight }, // 좌상단 - // { x: halfWidth, y: -halfHeight }, // 우상단 - // { x: halfWidth, y: halfHeight }, // 우하단 - // { x: -halfWidth, y: halfHeight }, // 좌하단 - // ] - - // // 각 꼭짓점 좌표를 캔버스 좌표로 변환 - // const transformedCorners = corners.map((corner) => { - // const point = new fabric.Point(corner.x, corner.y) - // return fabric.util.transformPoint(point, rect.calcTransformMatrix()) - // }) - - // return transformedCorners - // } - if (moduleSetupSurfaces.length !== 0) { let tempModule let manualDrawModules = [] @@ -1624,10 +1600,9 @@ export function useModuleBasicSetting() { const mousePoint = canvas.getPointer(e.e) for (let i = 0; i < moduleSetupSurfaces.length; i++) { - turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i], true) + turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i]) trestlePolygon = moduleSetupSurfaces[i] manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨 - flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향 let width = flowDirection === 'south' || flowDirection === 'north' ? 172 : 113 let height = flowDirection === 'south' || flowDirection === 'north' ? 113 : 172 @@ -1640,13 +1615,14 @@ export function useModuleBasicSetting() { ] const turfPoints = coordToTurfPolygon(points) + if (turf.booleanWithin(turfPoints, turfPolygon)) { let isDrawing = false if (isDrawing) return canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) //움직일때 일단 지워가면서 움직임 - tempModule = new QPolygon(points, { + tempModule = new fabric.Rect({ fill: 'white', stroke: 'black', strokeWidth: 1, @@ -1706,7 +1682,7 @@ export function useModuleBasicSetting() { //설치된 셀에 우측에 스냅 if (Math.abs(smallLeft - holdCellRight) < snapDistance) { - tempModule.left = holdCellRight + 0.5 + tempModule.left = holdCellRight + 1 } //설치된 셀에 위쪽에 스냅 @@ -1734,14 +1710,14 @@ export function useModuleBasicSetting() { if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) { tempModule.top = holdCellCenterY - height / 2 } - //위쪽 -> 가운데 - if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) { - tempModule.top = holdCellCenterY - } - //아랫쪽 -> 가운데 - if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) { - tempModule.top = holdCellCenterY - height - } + // //위쪽 -> 가운데 + // if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) { + // tempModule.top = holdCellCenterY + // } + // //아랫쪽 -> 가운데 + // if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) { + // tempModule.top = holdCellCenterY - height + // } }) } @@ -1814,6 +1790,17 @@ export function useModuleBasicSetting() { let isIntersection = true if (!inside) return if (tempModule) { + const rectPoints = [ + { x: tempModule.left, y: tempModule.top }, + { x: tempModule.left + tempModule.width * tempModule.scaleX, y: tempModule.top }, + { + x: tempModule.left + tempModule.width * tempModule.scaleX, + y: tempModule.top + tempModule.height * tempModule.scaleY, + }, + { x: tempModule.left, y: tempModule.top + tempModule.height * tempModule.scaleY }, + ] + + tempModule.set({ points: rectPoints }) const tempTurfModule = polygonToTurfPolygon(tempModule) //도머 객체를 가져옴 @@ -1844,6 +1831,8 @@ export function useModuleBasicSetting() { //마우스 클릭시 set으로 해당 위치에 셀을 넣음 const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인 if (!isOverlap) { + console.log('tempModule.points', tempModule.points) + let manualModule = new QPolygon(tempModule.points, { ...moduleOptions }) canvas?.add(manualModule) manualDrawModules.push(tempModule) @@ -2273,12 +2262,14 @@ export function useModuleBasicSetting() { moduleSetupSurface.set({ modules: setupedModules }) - // const moduleArray = [...moduleIsSetup] - // moduleArray.push({ - // surfaceId: moduleSetupSurface.surfaceId, - // moduleSetupArray: setupedModules, + // console.log('moduleSetupSurface', moduleSetupSurface) + // console.log('setupedModules', setupedModules) + + // const groupTest = new fabric.Group([moduleSetupSurface, ...setupedModules], { + // angle: compasDeg, // }) - // setModuleIsSetup(moduleArray) + + // canvas.add(groupTest) }) // console.log(calculateForApi()) }