From 83b27582f7413ea5bd46316d9b887c92008dc342 Mon Sep 17 00:00:00 2001 From: yjnoh Date: Mon, 17 Mar 2025 15:01:25 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/module/useModuleBasicSetting.js | 161 ++++++++++++++-------- 1 file changed, 107 insertions(+), 54 deletions(-) diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js index c7b9ec38..5203a972 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -560,7 +560,8 @@ export function useModuleBasicSetting(tabNum) { /** * 스냅기능 */ - let snapDistance = flowDirection === 'south' || flowDirection === 'north' ? 10 : 10 + let snapDistance = flowDirection === 'south' || flowDirection === 'north' ? 50 : 50 + let sideSnapDistance = 15 let trestleSnapDistance = 15 let intvHor = @@ -600,51 +601,103 @@ export function useModuleBasicSetting(tabNum) { const holdCellCenterX = holdCellLeft + toFixedWithoutRounding(cell.width / 2, 2) const holdCellCenterY = holdCellTop + toFixedWithoutRounding(cell.height / 2, 2) + //흐름방향따라 달라야 한다. + if (flowDirection === 'south' || flowDirection === 'north') { + if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) { + tempModule.left = holdCellCenterX - toFixedWithoutRounding(width / 2, 2) + } + + //왼쪽 -> 가운데 + if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) { + // console.log('holdCellCenterX', holdCellCenterX) + // console.log('smallLeft', smallLeft) + + // console.log('모듈 센터에 스냅') + tempModule.left = holdCellCenterX + intvHor / 2 + + // console.log('tempModule.left', tempModule.left) + } + // 오른쪽 -> 가운데 + if (Math.abs(smallRight - holdCellCenterX) < snapDistance) { + tempModule.left = holdCellCenterX - width - intvHor / 2 + } + + //설치된 셀에 좌측에 스냅 + if (Math.abs(smallRight - holdCellLeft) < snapDistance) { + // console.log('모듈 좌측 스냅') + tempModule.left = holdCellLeft - width - intvHor + } + + //설치된 셀에 우측에 스냅 + if (Math.abs(smallLeft - holdCellRight) < snapDistance) { + // console.log('모듈 우측 스냅') + tempModule.left = holdCellRight + intvHor + } + //설치된 셀에 위쪽에 스냅 + if (Math.abs(smallBottom - holdCellTop) < sideSnapDistance) { + tempModule.top = holdCellTop - height - intvVer + } + + //설치된 셀에 밑쪽에 스냅 + if (Math.abs(smallTop - holdCellBottom) < sideSnapDistance) { + tempModule.top = holdCellBottom + intvVer + } + + //설치된 셀에 윗쪽에 스냅 + if (Math.abs(smallTop - holdCellTop) < sideSnapDistance) { + tempModule.top = holdCellTop + } + } else { + //흐름방향 west, east + + //가운데 가운데 + if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) { + tempModule.top = holdCellCenterY - toFixedWithoutRounding(width / 2, 2) + } + + //위쪽 -> 가운데 + if (Math.abs(smallTop - holdCellCenterY) < snapDistance) { + // console.log('holdCellCenterX', holdCellCenterX) + // console.log('smallLeft', smallLeft) + + // console.log('모듈 센터에 스냅') + tempModule.top = holdCellCenterY + intvHor / 2 + + // console.log('tempModule.left', tempModule.left) + } + // 밑 -> 가운데 + if (Math.abs(smallBottom - holdCellCenterY) < snapDistance) { + tempModule.top = holdCellCenterY - height - intvHor / 2 + } + + //설치된 셀에 좌측에 스냅 + if (Math.abs(smallRight - holdCellLeft) < snapDistance) { + // console.log('모듈 좌측 스냅') + tempModule.left = holdCellLeft - width - intvHor + } + + //설치된 셀에 우측에 스냅 + if (Math.abs(smallLeft - holdCellRight) < snapDistance) { + // console.log('모듈 우측 스냅') + tempModule.left = holdCellRight + intvHor + } + //설치된 셀에 위쪽에 스냅 + if (Math.abs(smallBottom - holdCellTop) < sideSnapDistance) { + tempModule.top = holdCellTop - height - intvVer + } + + //설치된 셀에 밑쪽에 스냅 + if (Math.abs(smallTop - holdCellBottom) < sideSnapDistance) { + tempModule.top = holdCellBottom + intvVer + } + + //설치된 셀에 윗쪽에 스냅 + if (Math.abs(smallTop - holdCellTop) < sideSnapDistance) { + tempModule.top = holdCellTop + } + } + //가운데 -> 가운대 - if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) { - tempModule.left = holdCellCenterX - toFixedWithoutRounding(width / 2, 2) - } - - //왼쪽 -> 가운데 - if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) { - // console.log('holdCellCenterX', holdCellCenterX) - // console.log('smallLeft', smallLeft) - - // console.log('모듈 센터에 스냅') - tempModule.left = holdCellCenterX + intvHor / 2 - - // console.log('tempModule.left', tempModule.left) - } - // 오른쪽 -> 가운데 - if (Math.abs(smallRight - holdCellCenterX) < snapDistance) { - tempModule.left = holdCellCenterX - width - intvHor / 2 - } - - //설치된 셀에 좌측에 스냅 - if (Math.abs(smallRight - holdCellLeft) < snapDistance) { - // console.log('모듈 좌측 스냅') - tempModule.left = holdCellLeft - width - intvHor - } - - //설치된 셀에 우측에 스냅 - if (Math.abs(smallLeft - holdCellRight) < snapDistance) { - // console.log('모듈 우측 스냅') - tempModule.left = holdCellRight + intvHor - } - //설치된 셀에 위쪽에 스냅 - if (Math.abs(smallBottom - holdCellTop) < 10) { - tempModule.top = holdCellTop - height - intvVer - } - - //설치된 셀에 밑쪽에 스냅 - if (Math.abs(smallTop - holdCellBottom) < 10) { - tempModule.top = holdCellBottom + intvVer - } - - //설치된 셀에 윗쪽에 스냅 - if (Math.abs(smallTop - holdCellTop) < 10) { - tempModule.top = holdCellTop - } //세로 가운데 -> 가운데 // if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) { @@ -653,14 +706,10 @@ export function useModuleBasicSetting(tabNum) { // //위쪽 -> 가운데 // if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) { // tempModule.top = holdCellCenterY - // } - // //아랫쪽 -> 가운데 - // if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) { - // tempModule.top = holdCellCenterY - height - // } }) } + //여기서부턴 배치면 설치 외곽선 라인 // 위쪽 변에 스냅 if (Math.abs(smallTop - trestleTop) < trestleSnapDistance) { tempModule.top = trestleTop + 1 @@ -962,11 +1011,11 @@ export function useModuleBasicSetting(tabNum) { }, { x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)), - y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)), + y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)), }, { x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)), - y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)), + y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)), }, ] @@ -1146,8 +1195,8 @@ export function useModuleBasicSetting(tabNum) { if (!inside) { // tempModule.set({ fill: 'red' }) - // canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) - // canvas?.renderAll() + canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) + canvas?.renderAll() } }) @@ -1235,6 +1284,7 @@ export function useModuleBasicSetting(tabNum) { //오브젝트와 겹치지 않으면 넣는다 if (isDisjoint) { canvas?.add(manualModule) + canvas?.renderAll() manualDrawModules.push(manualModule) setModuleStatisticsData() installedLastHeightCoord = tempY - height - tempHeightMargin @@ -1317,6 +1367,7 @@ export function useModuleBasicSetting(tabNum) { //오브젝트와 겹치지 않으면 넣는다 if (isDisjoint) { canvas?.add(manualModule) + canvas?.renderAll() manualDrawModules.push(manualModule) setModuleStatisticsData() installedLastHeightCoord = tempY + height + tempHeightMargin @@ -1398,6 +1449,7 @@ export function useModuleBasicSetting(tabNum) { //오브젝트와 겹치지 않으면 넣는다 if (isDisjoint) { canvas?.add(manualModule) + canvas?.renderAll() manualDrawModules.push(manualModule) setModuleStatisticsData() installedLastHeightCoord = tempX + width + tempWidthMargin @@ -1479,6 +1531,7 @@ export function useModuleBasicSetting(tabNum) { //오브젝트와 겹치지 않으면 넣는다 if (isDisjoint) { canvas?.add(manualModule) + canvas?.renderAll() manualDrawModules.push(manualModule) setModuleStatisticsData() installedLastHeightCoord = tempX - width - tempWidthMargin