{getMessage('modal.wallline.offset.setting')}
-
diff --git a/src/hooks/roofcover/useAuxiliaryDrawing.js b/src/hooks/roofcover/useAuxiliaryDrawing.js
index e5e79740..7d18c5a2 100644
--- a/src/hooks/roofcover/useAuxiliaryDrawing.js
+++ b/src/hooks/roofcover/useAuxiliaryDrawing.js
@@ -1,19 +1,11 @@
import { useEffect, useRef, useState } from 'react'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import {
- adsorptionPointAddModeState,
- adsorptionPointModeState,
- adsorptionRangeState,
- canvasState,
- dotLineIntervalSelector,
- verticalHorizontalModeState,
-} from '@/store/canvasAtom'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { adsorptionRangeState, canvasState } from '@/store/canvasAtom'
import { useEvent } from '@/hooks/useEvent'
import { useMouse } from '@/hooks/useMouse'
import { useLine } from '@/hooks/useLine'
import { useTempGrid } from '@/hooks/useTempGrid'
import {
- OUTER_LINE_TYPE,
outerLineAngle1State,
outerLineAngle2State,
outerLineArrow1State,
@@ -23,14 +15,15 @@ import {
outerLineLength2State,
outerLineTypeState,
} from '@/store/outerLineAtom'
-import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util'
+import { calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util'
import { fabric } from 'fabric'
import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
import { useSwal } from '@/hooks/useSwal'
import { booleanPointInPolygon } from '@turf/turf'
+import { usePopup } from '@/hooks/usePopup'
// 보조선 작성
-export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
+export function useAuxiliaryDrawing(id) {
const canvas = useRecoilValue(canvasState)
const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useEvent()
const { getIntersectMousePoint } = useMouse()
@@ -38,6 +31,7 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
const { tempGridMode } = useTempGrid()
const { swalFire } = useSwal()
const { getAdsorptionPoints } = useAdsorptionPoint()
+ const { closePopup } = usePopup()
const adsorptionRange = useRecoilValue(adsorptionRangeState)
@@ -86,7 +80,7 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
const roofs = canvas?.getObjects().filter((obj) => obj.name === 'roofBase')
if (roofs.length === 0) {
swalFire({ text: '지붕형상이 없습니다.' })
- setShowAuxiliaryModal(false)
+ closePopup(id)
return
}
@@ -653,7 +647,7 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
roofBase.innerLines = [...roofInnerLines]
})
- setShowAuxiliaryModal(false)
+ closePopup(id)
}
return {
diff --git a/src/hooks/roofcover/useEavesGableEdit.js b/src/hooks/roofcover/useEavesGableEdit.js
index 083d8e03..66a7cb1a 100644
--- a/src/hooks/roofcover/useEavesGableEdit.js
+++ b/src/hooks/roofcover/useEavesGableEdit.js
@@ -8,12 +8,14 @@ import { useLine } from '@/hooks/useLine'
import { useMode } from '@/hooks/useMode'
import { outerLineFixState } from '@/store/outerLineAtom'
import { useSwal } from '@/hooks/useSwal'
+import { usePopup } from '@/hooks/usePopup'
// 처마.케라바 변경
-export function useEavesGableEdit(setShowEavesGableEditModal) {
+export function useEavesGableEdit(id) {
const canvas = useRecoilValue(canvasState)
const { getMessage } = useMessage()
const { addCanvasMouseEventListener, initEvent } = useEvent()
+ const { closePopup } = usePopup()
const TYPES = {
EAVES: 'eaves',
GABLE: 'gable',
@@ -44,7 +46,7 @@ export function useEavesGableEdit(setShowEavesGableEditModal) {
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
if (!outerLineFix || outerLines.length === 0) {
swalFire({ text: '외벽선이 없습니다.' })
- setShowEavesGableEditModal(false)
+ closePopup(id)
}
}, [])
diff --git a/src/hooks/roofcover/useOuterLineWall.js b/src/hooks/roofcover/useOuterLineWall.js
index 4b4987af..531aab48 100644
--- a/src/hooks/roofcover/useOuterLineWall.js
+++ b/src/hooks/roofcover/useOuterLineWall.js
@@ -1,12 +1,11 @@
import { useEffect, useRef } from 'react'
-import { distanceBetweenPoints, getDegreeByChon } from '@/util/canvas-util'
+import { distanceBetweenPoints } from '@/util/canvas-util'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import {
adsorptionPointAddModeState,
adsorptionPointModeState,
adsorptionRangeState,
canvasState,
- currentCanvasPlanState,
dotLineIntervalSelector,
verticalHorizontalModeState,
} from '@/store/canvasAtom'
@@ -29,11 +28,12 @@ import {
} from '@/store/outerLineAtom'
import { calculateAngle } from '@/util/qpolygon-utils'
import { fabric } from 'fabric'
-import { QLine } from '@/components/fabric/QLine'
import { outlineDisplaySelector } from '@/store/settingAtom'
+import { usePopup } from '@/hooks/usePopup'
+import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
//외벽선 그리기
-export function useOuterLineWall(setShowOutlineModal) {
+export function useOuterLineWall(id, propertiesId) {
const canvas = useRecoilValue(canvasState)
const {
initEvent,
@@ -71,6 +71,7 @@ export function useOuterLineWall(setShowOutlineModal) {
const [outerLineDiagonalLength, setOuterLineDiagonalLength] = useRecoilState(outerLineDiagonalState)
const arrow1Ref = useRef(arrow1)
const arrow2Ref = useRef(arrow2)
+ const { addPopup, closePopup } = usePopup()
const setOuterLineFix = useSetRecoilState(outerLineFixState)
@@ -221,7 +222,8 @@ export function useOuterLineWall(setShowOutlineModal) {
removeAllDocumentEventListeners()
canvas?.renderAll()
setOuterLineFix(true)
- setShowOutlineModal(false)
+ closePopup(id)
+ addPopup(propertiesId, 1,
)
}
if (points.length < 3) {
@@ -419,56 +421,104 @@ export function useOuterLineWall(setShowOutlineModal) {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x + length1Value / 10,
+ y: prev[prev.length - 1].y + length2Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '↓' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x - length1Value / 10,
+ y: prev[prev.length - 1].y + length2Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '↑' && arrow2Value === '→') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x + length1Value / 10,
+ y: prev[prev.length - 1].y - length2Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '↑' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x - length1Value / 10,
+ y: prev[prev.length - 1].y - length2Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '→' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x + length2Value / 10,
+ y: prev[prev.length - 1].y + length1Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '→' && arrow2Value === '↑') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x + length2Value / 10,
+ y: prev[prev.length - 1].y - length1Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '←' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x - length2Value / 10,
+ y: prev[prev.length - 1].y + length1Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '←' && arrow2Value === '↑') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x - length2Value / 10,
+ y: prev[prev.length - 1].y - length1Value / 10,
+ },
+ ]
})
}
@@ -524,35 +574,65 @@ export function useOuterLineWall(setShowOutlineModal) {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x + length2Value / 10,
+ y: prev[prev.length - 1].y + length1Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '↓' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x - length2Value / 10,
+ y: prev[prev.length - 1].y + length1Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '↑' && arrow2Value === '→') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x + length2Value / 10,
+ y: prev[prev.length - 1].y - length1Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '↑' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x - length2Value / 10,
+ y: prev[prev.length - 1].y - length1Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '→' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x + length1Value / 10,
+ y: prev[prev.length - 1].y + length2Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '→' && arrow2Value === '↑') {
setPoints((prev) => {
diff --git a/src/hooks/roofcover/usePropertiesSetting.js b/src/hooks/roofcover/usePropertiesSetting.js
index ad703356..df4267ff 100644
--- a/src/hooks/roofcover/usePropertiesSetting.js
+++ b/src/hooks/roofcover/usePropertiesSetting.js
@@ -1,14 +1,15 @@
import { useEffect, useRef } from 'react'
import { LINE_TYPE } from '@/common/common'
-import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
+import { useRecoilValue, useResetRecoilState } from 'recoil'
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { useMode } from '@/hooks/useMode'
import { usePolygon } from '@/hooks/usePolygon'
import { useLine } from '@/hooks/useLine'
import { outerLinePointsState } from '@/store/outerLineAtom'
+import { usePopup } from '@/hooks/usePopup'
// 외벽선 속성 설정
-export function usePropertiesSetting(setShowPropertiesSettingModal) {
+export function usePropertiesSetting(id) {
const canvas = useRecoilValue(canvasState)
const currentObject = useRecoilValue(currentObjectState)
@@ -18,6 +19,7 @@ export function usePropertiesSetting(setShowPropertiesSettingModal) {
const { addPolygonByLines } = usePolygon()
const { removeLine, hideLine } = useLine()
+ const { closePopup } = usePopup()
useEffect(() => {
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
@@ -142,6 +144,7 @@ export function usePropertiesSetting(setShowPropertiesSettingModal) {
setPoints([])
canvas.renderAll()
roof.drawHelpLine()
+ closePopup(id)
}
const closeModal = (fn) => {
@@ -161,7 +164,7 @@ export function usePropertiesSetting(setShowPropertiesSettingModal) {
canvas.renderAll()
setPoints([])
- setShowPropertiesSettingModal(false)
+ closePopup(id)
}
return { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal }
diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js
index 6eba271f..95f991d9 100644
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/src/hooks/roofcover/useRoofAllocationSetting.js
@@ -5,11 +5,13 @@ import { setSurfaceShapePattern } from '@/util/canvas-util'
import { splitPolygonWithLines } from '@/util/qpolygon-utils'
import { useSwal } from '@/hooks/useSwal'
import { usePolygon } from '@/hooks/usePolygon'
+import { usePopup } from '@/hooks/usePopup'
// 지붕면 할당
-export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
+export function useRoofAllocationSetting(id) {
const canvas = useRecoilValue(canvasState)
const { drawDirectionArrow } = usePolygon()
+ const { closePopup } = usePopup()
const { swalFire } = useSwal()
@@ -80,7 +82,7 @@ export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
if (roofBases.length === 0) {
swalFire({ text: '할당할 지붕이 없습니다.' })
- setShowRoofAllocationSettingModal(false)
+ closePopup(id)
}
}, [])
@@ -120,7 +122,7 @@ export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
setSurfaceShapePattern(roof)
drawDirectionArrow(roof)
})
- setShowRoofAllocationSettingModal(false)
+ closePopup(id)
}
const handleRadioOnChange = (e) => {
diff --git a/src/hooks/roofcover/useRoofShapePassivitySetting.js b/src/hooks/roofcover/useRoofShapePassivitySetting.js
index f7b8b9fd..d80774ab 100644
--- a/src/hooks/roofcover/useRoofShapePassivitySetting.js
+++ b/src/hooks/roofcover/useRoofShapePassivitySetting.js
@@ -9,9 +9,10 @@ import { useMode } from '@/hooks/useMode'
import { usePolygon } from '@/hooks/usePolygon'
import { outerLineFixState } from '@/store/outerLineAtom'
import { useSwal } from '@/hooks/useSwal'
+import { usePopup } from '@/hooks/usePopup'
//지붕형상 수동 설정
-export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingModal) {
+export function useRoofShapePassivitySetting(id) {
const TYPES = {
EAVES: 'eaves',
GABLE: 'gable',
@@ -28,16 +29,12 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
const offsetRef = useRef(null)
const pitchRef = useRef(null)
const currentLineRef = useRef(null)
-
const history = useRef([])
-
const [type, setType] = useState(TYPES.EAVES)
-
const isFix = useRef(false)
const initLines = useRef([])
-
const [isLoading, setIsLoading] = useState(false)
-
+ const { closePopup } = usePopup()
const buttons = [
{ id: 1, name: getMessage('eaves'), type: TYPES.EAVES },
{ id: 2, name: getMessage('gable'), type: TYPES.GABLE },
@@ -50,7 +47,7 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
if (!outerLineFix || outerLines.length === 0) {
swalFire({ text: '외벽선이 없습니다.' })
- setShowRoofShapePassivitySettingModal(false)
+ closePopup(id)
return
}
setIsLoading(true)
@@ -180,7 +177,7 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
isFix.current = true
handleLineToPolygon()
- setShowRoofShapePassivitySettingModal(false)
+ closePopup(id)
}
const handleLineToPolygon = () => {
diff --git a/src/hooks/roofcover/useRoofShapeSetting.js b/src/hooks/roofcover/useRoofShapeSetting.js
index 016cd365..bc7992cc 100644
--- a/src/hooks/roofcover/useRoofShapeSetting.js
+++ b/src/hooks/roofcover/useRoofShapeSetting.js
@@ -2,15 +2,16 @@ import { useEffect, useRef, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
-import { LINE_TYPE, MENU } from '@/common/common'
+import { LINE_TYPE } from '@/common/common'
import { usePolygon } from '@/hooks/usePolygon'
import { useMode } from '@/hooks/useMode'
import { useLine } from '@/hooks/useLine'
import { outerLineFixState } from '@/store/outerLineAtom'
import { useSwal } from '@/hooks/useSwal'
+import { usePopup } from '@/hooks/usePopup'
// 지붕형상 설정
-export function useRoofShapeSetting(setShowRoofShapeSettingModal) {
+export function useRoofShapeSetting(id) {
const [shapeNum, setShapeNum] = useState(1)
const [buttonAct, setButtonAct] = useState(1)
const { swalFire } = useSwal()
@@ -34,12 +35,14 @@ export function useRoofShapeSetting(setShowRoofShapeSettingModal) {
const outerLineFix = useRecoilValue(outerLineFixState)
const history = useRef([])
+ const { closePopup } = usePopup()
useEffect(() => {
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
if (!outerLineFix || outerLines.length === 0) {
swalFire({ text: '외벽선이 없습니다.' })
- setShowRoofShapeSettingModal(false)
+ // setShowRoofShapeSettingModal(false)
+ closePopup(id)
}
}, [])
@@ -259,7 +262,8 @@ export function useRoofShapeSetting(setShowRoofShapeSettingModal) {
canvas?.renderAll()
roof.drawHelpLine()
- setShowRoofShapeSettingModal(false)
+ // setShowRoofShapeSettingModal(false)
+ closePopup(id)
}
const initLineSetting = () => {
diff --git a/src/hooks/roofcover/useWallLineOffsetSetting.js b/src/hooks/roofcover/useWallLineOffsetSetting.js
index b84e9ef4..ba6453ef 100644
--- a/src/hooks/roofcover/useWallLineOffsetSetting.js
+++ b/src/hooks/roofcover/useWallLineOffsetSetting.js
@@ -5,12 +5,14 @@ import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
import { useLine } from '@/hooks/useLine'
import { useSwal } from '@/hooks/useSwal'
+import { usePopup } from '@/hooks/usePopup'
// 외벽선 편집 및 오프셋
-export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
+export function useWallLineOffsetSetting(id) {
const canvas = useRecoilValue(canvasState)
const { showLine, addLine } = useLine()
const { getMessage } = useMessage()
+ const { closePopup } = usePopup()
const { swalFire } = useSwal()
const { addCanvasMouseEventListener, initEvent } = useEvent()
const wallLineEditRef = useRef(null)
@@ -58,7 +60,7 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
if (outerLines.length === 0) {
swalFire({ text: '외벽선이 없습니다.' })
- setShowWallLineOffsetSettingModal(false)
+ closePopup(id)
return
}
outerLines.forEach((outerLine) => {
diff --git a/src/hooks/surface/usePlacementShapeDrawing.js b/src/hooks/surface/usePlacementShapeDrawing.js
index 40d25bf0..fe578365 100644
--- a/src/hooks/surface/usePlacementShapeDrawing.js
+++ b/src/hooks/surface/usePlacementShapeDrawing.js
@@ -29,9 +29,10 @@ import {
} from '@/store/placementShapeDrawingAtom'
import { usePolygon } from '@/hooks/usePolygon'
import { POLYGON_TYPE } from '@/common/common'
+import { usePopup } from '@/hooks/usePopup'
// 면형상 배치
-export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
+export function usePlacementShapeDrawing(id) {
const canvas = useRecoilValue(canvasState)
const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
useEvent()
@@ -62,11 +63,11 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
const setOuterLineFix = useSetRecoilState(placementShapeDrawingFixState)
const arrow1Ref = useRef(arrow1)
const arrow2Ref = useRef(arrow2)
-
const outerLineDiagonalLengthRef = useRef(null)
-
const isFix = useRef(false)
+ const { closePopup } = usePopup()
+
useEffect(() => {
if (adsorptionPointAddMode || tempGridMode) {
return
@@ -225,7 +226,7 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
})
canvas?.renderAll()
- setShowPlaceShapeDrawingModal(false)
+ closePopup(id)
}
if (points.length < 3) {
@@ -419,56 +420,104 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x + length1Value / 10,
+ y: prev[prev.length - 1].y + length2Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '↓' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x - length1Value / 10,
+ y: prev[prev.length - 1].y + length2Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '↑' && arrow2Value === '→') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x + length1Value / 10,
+ y: prev[prev.length - 1].y - length2Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '↑' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x - length1Value / 10,
+ y: prev[prev.length - 1].y - length2Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '→' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x + length2Value / 10,
+ y: prev[prev.length - 1].y + length1Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '→' && arrow2Value === '↑') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x + length2Value / 10,
+ y: prev[prev.length - 1].y - length1Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '←' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x - length2Value / 10,
+ y: prev[prev.length - 1].y + length1Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '←' && arrow2Value === '↑') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x - length2Value / 10,
+ y: prev[prev.length - 1].y - length1Value / 10,
+ },
+ ]
})
}
@@ -524,35 +573,65 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x + length2Value / 10,
+ y: prev[prev.length - 1].y + length1Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '↓' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x - length2Value / 10,
+ y: prev[prev.length - 1].y + length1Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '↑' && arrow2Value === '→') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x + length2Value / 10,
+ y: prev[prev.length - 1].y - length1Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '↑' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x - length2Value / 10,
+ y: prev[prev.length - 1].y - length1Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '→' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
- return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
+ return [
+ ...prev,
+ {
+ x: prev[prev.length - 1].x + length1Value / 10,
+ y: prev[prev.length - 1].y + length2Value / 10,
+ },
+ ]
})
} else if (arrow1Value === '→' && arrow2Value === '↑') {
setPoints((prev) => {
diff --git a/src/hooks/surface/useSurfaceShapeBatch.js b/src/hooks/surface/useSurfaceShapeBatch.js
index be421c8e..98e2b985 100644
--- a/src/hooks/surface/useSurfaceShapeBatch.js
+++ b/src/hooks/surface/useSurfaceShapeBatch.js
@@ -2,13 +2,14 @@
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
-import { MENU, BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
+import { BATCH_TYPE, MENU, POLYGON_TYPE } from '@/common/common'
import { getIntersectionPoint, setSurfaceShapePattern } from '@/util/canvas-util'
import { degreesToRadians } from '@turf/turf'
import { QPolygon } from '@/components/fabric/QPolygon'
import { useSwal } from '@/hooks/useSwal'
import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
+import { usePopup } from '@/hooks/usePopup'
export function useSurfaceShapeBatch() {
const { getMessage } = useMessage()
@@ -16,8 +17,9 @@ export function useSurfaceShapeBatch() {
const canvas = useRecoilValue(canvasState)
const { swalFire } = useSwal()
const { addCanvasMouseEventListener, initEvent } = useEvent()
+ const { closePopup } = usePopup()
- const applySurfaceShape = (surfaceRefs, selectedType, setShowPlacementSurfaceSettingModal) => {
+ const applySurfaceShape = (surfaceRefs, selectedType, id) => {
let length1, length2, length3, length4, length5
const surfaceId = selectedType?.id
const azimuth = surfaceRefs.azimuth.current
@@ -56,7 +58,6 @@ export function useSurfaceShapeBatch() {
let obj = null
let points = []
if (checkSurfaceShape(surfaceId, { length1, length2, length3, length4, length5 })) {
- setShowPlacementSurfaceSettingModal(false)
addCanvasMouseEventListener('mouse:move', (e) => {
if (!isDrawing) {
return
@@ -111,6 +112,7 @@ export function useSurfaceShapeBatch() {
obj.set({ originAngle: originAngle })
canvas?.renderAll()
+ closePopup(id)
})
addCanvasMouseEventListener('mouse:down', (e) => {
@@ -118,7 +120,7 @@ export function useSurfaceShapeBatch() {
obj.set('name', POLYGON_TYPE.ROOF)
initEvent()
setSurfaceShapePattern(obj)
- setShowPlacementSurfaceSettingModal(true)
+ closePopup(id)
})
}
}
@@ -292,8 +294,14 @@ export function useSurfaceShapeBatch() {
const angleInRadians = Math.asin(length2 / length3)
points = [
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
- { x: pointer.x - length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
- { x: pointer.x + length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
+ {
+ x: pointer.x - length1 / 2 + length3 * Math.cos(angleInRadians),
+ y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians),
+ },
+ {
+ x: pointer.x + length1 / 2 + length3 * Math.cos(angleInRadians),
+ y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians),
+ },
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
]
@@ -304,9 +312,18 @@ export function useSurfaceShapeBatch() {
{ x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y - (length4 + length5) / 2 },
{ x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y + (length4 + length5) / 2 },
{ x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 },
- { x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 - length5 },
- { x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 },
- { x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 + length5 },
+ {
+ x: pointer.x - (length1 + length2 + length3) / 2 + length1,
+ y: pointer.y + (length4 + length5) / 2 - length5,
+ },
+ {
+ x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2,
+ y: pointer.y + (length4 + length5) / 2 - length5,
+ },
+ {
+ x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2,
+ y: pointer.y + (length4 + length5) / 2 - length5 + length5,
+ },
{
x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
y: pointer.y + (length4 + length5) / 2 - length5 + length5,
@@ -325,8 +342,14 @@ export function useSurfaceShapeBatch() {
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length3 },
{ x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 },
- { x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
- { x: pointer.x - length1 / 2 + length1 - (length1 - length2) - length2, y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
+ {
+ x: pointer.x - length1 / 2 + length1 - (length1 - length2),
+ y: pointer.y + length4 / 2 - length3 + (length3 - length4),
+ },
+ {
+ x: pointer.x - length1 / 2 + length1 - (length1 - length2) - length2,
+ y: pointer.y + length4 / 2 - length3 + (length3 - length4),
+ },
]
break
@@ -337,8 +360,14 @@ export function useSurfaceShapeBatch() {
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
{ x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 },
- { x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
- { x: pointer.x - length1 / 2 + length1 - length3 - length2, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
+ {
+ x: pointer.x - length1 / 2 + length1 - length3,
+ y: pointer.y + length4 / 2 - length4 + (length4 - length5),
+ },
+ {
+ x: pointer.x - length1 / 2 + length1 - length3 - length2,
+ y: pointer.y + length4 / 2 - length4 + (length4 - length5),
+ },
]
break
}
@@ -348,8 +377,14 @@ export function useSurfaceShapeBatch() {
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
{ x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
- { x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
- { x: pointer.x + length1 / 2 - length1 + length2 + length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
+ {
+ x: pointer.x + length1 / 2 - length1 + length2,
+ y: pointer.y + length4 / 2 - length5 - (length4 - length5),
+ },
+ {
+ x: pointer.x + length1 / 2 - length1 + length2 + length3,
+ y: pointer.y + length4 / 2 - length5 - (length4 - length5),
+ },
]
break
}
@@ -359,8 +394,14 @@ export function useSurfaceShapeBatch() {
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length5 },
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 },
- { x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
- { x: pointer.x - length1 / 2 + length1 - length2 - length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
+ {
+ x: pointer.x - length1 / 2 + length1 - length2,
+ y: pointer.y + length4 / 2 - length5 - (length4 - length5),
+ },
+ {
+ x: pointer.x - length1 / 2 + length1 - length2 - length3,
+ y: pointer.y + length4 / 2 - length5 - (length4 - length5),
+ },
]
break
}
@@ -371,7 +412,10 @@ export function useSurfaceShapeBatch() {
const leftAngle = Math.acos((length1 - length2) / 2 / leftHypotenuse)
points = [
- { x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(leftAngle), y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(leftAngle) },
+ {
+ x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(leftAngle),
+ y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(leftAngle),
+ },
{ x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
{ x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
{
@@ -459,7 +503,10 @@ export function useSurfaceShapeBatch() {
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 },
{ x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 },
- { x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2, y: pointer.y + length4 / 2 - length4 + length5 },
+ {
+ x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2,
+ y: pointer.y + length4 / 2 - length4 + length5,
+ },
]
break
}
diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js
index 3fb6f164..4451c259 100644
--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@@ -165,10 +165,7 @@ export function useContextMenu({ externalFn }) {
}, [currentMenu])
useEffect(() => {
- console.log('currentObject', currentObject)
- console.log('currentMenu', currentMenu)
if (currentObject?.name) {
- console.log(currentObject)
switch (currentObject.name) {
case 'triangleDormer':
setContextMenu([
diff --git a/src/hooks/usePopup.js b/src/hooks/usePopup.js
index 4a8e3cfb..b54492b9 100644
--- a/src/hooks/usePopup.js
+++ b/src/hooks/usePopup.js
@@ -14,7 +14,21 @@ export function usePopup() {
}
const closePopup = (id) => {
- setPopup({ children: [...popup.children.filter((child) => child.id !== id)] })
+ console.log(id)
+ setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
+ }
+
+ const filterPopup = (depth) => {
+ setPopup({ children: [...filterDepth(depth)] })
+ }
+
+ const filterChildrenPopup = (id) => {
+ const target = popup.children.filter((child) => child.id === id)
+ if (target.length !== 0) {
+ return popup.children.filter((child) => child.depth <= target[0].depth)
+ }
+
+ return popup.children
}
const closePopups = (ids) => {