qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/qcast-pub' into dev

Browse Source 
# Conflicts:
#	src/hooks/module/useModuleBasicSetting.js
This commit is contained in:
minsik 2024-11-27 14:50:59 +09:00
commit 6eacc36f46
16 changed files with 203 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/common/context-menu/QContextMenu.jsx
View File

@ -1,12 +1,11 @@
'use client'
import { useContext, useEffect } from 'react'
import { useEffect } from 'react'
import '@/styles/contents.scss'
import { useRecoilState, useRecoilValue } from 'recoil'
import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
import { useTempGrid } from '@/hooks/useTempGrid'
import { useContextMenu } from '@/hooks/useContextMenu'
import { useEvent } from '@/hooks/useEvent'
import { EventContext } from '@/app/floor-plan/EventProvider'
export default function QContextMenu(props) {
const { contextRef, canvasProps } = props
@ -15,8 +14,8 @@ export default function QContextMenu(props) {
const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
const { tempGridMode, setTempGridMode } = useTempGrid()
const { handleKeyup } = useContextMenu()
// const { addDocumentEventListener, removeDocumentEvent } = useEvent()
const { addDocumentEventListener, removeDocumentEvent } = useContext(EventContext)
const { addDocumentEventListener, removeDocumentEvent } = useEvent()
// const { addDocumentEventListener, removeDocumentEvent } = useContext(EventContext)
let contextType = ''

9
src/components/floor-plan/CanvasMenu.jsx
View File

@ -33,15 +33,12 @@ import useMenu from '@/hooks/common/useMenu'
import { MENU } from '@/common/common'
import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
import { estimateState } from '@/store/floorPlanObjectAtom'
import { estimateState, floorPlanObjectState } from '@/store/floorPlanObjectAtom'
import DocDownOptionPop from '../estimate/popup/DocDownOptionPop'
import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
import EstimateCopyPop from '../estimate/popup/EstimateCopyPop'
import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
import { pwrGnrSimTypeState } from '@/store/simulatorAtom'
import { useAxios } from '@/hooks/useAxios'
import { EventContext } from '@/app/floor-plan/EventProvider'
export default function CanvasMenu(props) {
const { menuNumber, setMenuNumber } = props
@ -71,8 +68,8 @@ export default function CanvasMenu(props) {
const { getMessage } = useMessage()
const { currentCanvasPlan, saveCanvas } = usePlan()
const { swalFire } = useSwal()
// const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useContext(EventContext)
const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
// const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useContext(EventContext)
const commonUtils = useRecoilValue(commonUtilsState)
const { commonFunctions } = useCommonUtils()
const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]

7
src/components/floor-plan/modal/basic/BasicSetting.jsx
View File

@ -1,6 +1,6 @@
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useContext, useEffect, useRef, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import Module from '@/components/floor-plan/modal/basic/step/Module'
import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule'
import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
@ -11,7 +11,6 @@ import { usePopup } from '@/hooks/usePopup'
import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
import { useEvent } from '@/hooks/useEvent'
import { EventContext } from '@/app/floor-plan/EventProvider'
export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
@ -19,8 +18,8 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
const [tabNum, setTabNum] = useState(1)
const canvasSetting = useRecoilValue(canvasSettingState)
const orientationRef = useRef(null)
// const { initEvent } = useEvent()
const { initEvent } = useContext(EventContext)
const { initEvent } = useEvent()
// const { initEvent } = useContext(EventContext)
const { makeModuleInstArea, manualModuleSetup, autoModuleSetup } = useModuleBasicSetting()
const handleBtnNextStep = () => {
if (tabNum === 1) {

7
src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx
View File

@ -3,11 +3,10 @@ import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
import { useState, useEffect, useContext } from 'react'
import { useEffect, useState } from 'react'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
import { useEvent } from '@/hooks/useEvent'
import { LINE_TYPE } from '@/common/common'
import { EventContext } from '@/app/floor-plan/EventProvider'
export default function LinePropertySetting(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@ -15,8 +14,8 @@ export default function LinePropertySetting(props) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const { changeSurfaceLinePropertyEvent, changeSurfaceLineProperty, changeSurfaceLinePropertyReset } = useSurfaceShapeBatch()
// const { initEvent } = useEvent()
const { initEvent } = useContext(EventContext)
const { initEvent } = useEvent()
// const { initEvent } = useContext(EventContext)
const properties = [
{ name: getMessage('eaves.line'), value: LINE_TYPE.WALLLINE.EAVES },

7
src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx
View File

@ -1,12 +1,11 @@
import { useMessage } from '@/hooks/useMessage'
import { useContext, useEffect, useState } from 'react'
import { useEffect, useState } from 'react'
import { useEvent } from '@/hooks/useEvent'
import { EventContext } from '@/app/floor-plan/EventProvider'
export default function Offset({ length1Ref, arrow1Ref, currentWallLineRef }) {
const { getMessage } = useMessage()
// const { addDocumentEventListener, initEvent } = useEvent()
const { addDocumentEventListener, initEvent } = useContext(EventContext)
const { addDocumentEventListener, initEvent } = useEvent()
// const { addDocumentEventListener, initEvent } = useContext(EventContext)
useEffect(() => {
addDocumentEventListener('keydown', document, keyDown)

7
src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx
View File

@ -1,12 +1,11 @@
import { useMessage } from '@/hooks/useMessage'
import { forwardRef, useContext, useEffect, useImperativeHandle, useState } from 'react'
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import { useEvent } from '@/hooks/useEvent'
import { EventContext } from '@/app/floor-plan/EventProvider'
export default forwardRef(function WallLine({ length1Ref, length2Ref, arrow1Ref, arrow2Ref, radioTypeRef, currentWallLineRef }, ref) {
const { getMessage } = useMessage()
// const { addDocumentEventListener, initEvent } = useEvent()
const { addDocumentEventListener, initEvent } = useContext(EventContext)
const { addDocumentEventListener, initEvent } = useEvent()
// const { addDocumentEventListener, initEvent } = useContext(EventContext)
const [type, setType] = useState(1)
const [arrow1, setArrow1] = useState('up')
const [arrow2, setArrow2] = useState('up')

7
src/hooks/common/useCommonUtils.js
View File

@ -1,4 +1,4 @@
import { useContext, useEffect } from 'react'
import { useEffect } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { wordDisplaySelector } from '@/store/settingAtom'
import { useEvent } from '@/hooks/useEvent'
@ -9,13 +9,12 @@ import { canvasState } from '@/store/canvasAtom'
import { v4 as uuidv4 } from 'uuid'
import { usePopup } from '@/hooks/usePopup'
import Distance from '@/components/floor-plan/modal/distance/Distance'
import { EventContext } from '@/app/floor-plan/EventProvider'
export function useCommonUtils() {
const canvas = useRecoilValue(canvasState)
const wordDisplay = useRecoilValue(wordDisplaySelector)
// const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useContext(EventContext)
const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
// const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useContext(EventContext)
const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText'))
const commonTextFont = useRecoilValue(fontSelector('commonText'))

1
src/hooks/module/useModuleBasicSetting.js
View File

@ -566,7 +566,6 @@ export function useModuleBasicSetting() {
opacity: 0.8,
parentId: moduleSetupSurface.parentId,
name: 'module',
selectable: true,
})
canvas?.add(tempModule)
moduleSetupArray.push(tempModule)

7
src/hooks/object/useObjectBatch.js
View File

@ -1,5 +1,5 @@
'use client'
import { useContext, useEffect } from 'react'
import { useEffect } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
@ -12,13 +12,12 @@ import { usePolygon } from '@/hooks/usePolygon'
import { QPolygon } from '@/components/fabric/QPolygon'
import { v4 as uuidv4 } from 'uuid'
import { fontSelector } from '@/store/fontAtom'
import { EventContext } from '@/app/floor-plan/EventProvider'
export function useObjectBatch({ isHidden, setIsHidden }) {
const { getMessage } = useMessage()
const canvas = useRecoilValue(canvasState)
// const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useEvent()
const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useContext(EventContext)
const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useEvent()
// const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useContext(EventContext)
const { swalFire } = useSwal()
const { drawDirectionArrow } = usePolygon()
const lengthTextFont = useRecoilValue(fontSelector('lengthText'))

7
src/hooks/roofcover/useAuxiliaryDrawing.js
View File

@ -1,4 +1,4 @@
import { useContext, useEffect, useRef, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { adsorptionRangeState, canvasState, verticalHorizontalModeState } from '@/store/canvasAtom'
import { useEvent } from '@/hooks/useEvent'
@ -22,13 +22,12 @@ import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
import { calculateAngle, isSamePoint } from '@/util/qpolygon-utils'
import { POLYGON_TYPE } from '@/common/common'
import { EventContext } from '@/app/floor-plan/EventProvider'
// 보조선 작성
export function useAuxiliaryDrawing(id) {
const canvas = useRecoilValue(canvasState)
// const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useEvent()
const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useContext(EventContext)
const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useEvent()
// const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useContext(EventContext)
const { getIntersectMousePoint } = useMouse()
const { addLine, removeLine } = useLine()
const { tempGridMode } = useTempGrid()

7
src/hooks/roofcover/useEavesGableEdit.js
View File

@ -1,4 +1,4 @@
import { useContext, useEffect, useRef, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { useRecoilValue } from 'recoil'
import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
import { useMessage } from '@/hooks/useMessage'
@ -10,14 +10,13 @@ import { outerLineFixState } from '@/store/outerLineAtom'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
import { getChonByDegree } from '@/util/canvas-util'
import { EventContext } from '@/app/floor-plan/EventProvider'
// 처마.케라바 변경
export function useEavesGableEdit(id) {
const canvas = useRecoilValue(canvasState)
const { getMessage } = useMessage()
// const { addCanvasMouseEventListener, initEvent } = useEvent()
const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
const { addCanvasMouseEventListener, initEvent } = useEvent()
// const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
const { closePopup } = usePopup()
const TYPES = {
EAVES: 'eaves',

8
src/hooks/roofcover/useMovementSetting.js
View File

@ -2,12 +2,10 @@ import { useRecoilValue } from 'recoil'
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
import { useContext, useEffect, useRef, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { useEvent } from '@/hooks/useEvent'
import { POLYGON_TYPE } from '@/common/common'
import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
import { QLine } from '@/components/fabric/QLine'
import { EventContext } from '@/app/floor-plan/EventProvider'
//동선이동 형 올림 내림
export function useMovementSetting(id) {
@ -16,8 +14,8 @@ export function useMovementSetting(id) {
UP_DOWN: 'updown', //형 올림내림
}
const canvas = useRecoilValue(canvasState)
// const { initEvent, addCanvasMouseEventListener } = useEvent()
const { initEvent, addCanvasMouseEventListener } = useContext(EventContext)
const { initEvent, addCanvasMouseEventListener } = useEvent()
// const { initEvent, addCanvasMouseEventListener } = useContext(EventContext)
const { closePopup } = usePopup()
const { getMessage } = useMessage()
const currentObject = useRecoilValue(currentObjectState)

13
src/hooks/roofcover/useRoofShapePassivitySetting.js
View File

@ -1,6 +1,6 @@
import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, currentObjectState, pitchTextSelector } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { useContext, useEffect, useRef, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { useLine } from '@/hooks/useLine'
import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
@ -11,7 +11,6 @@ import { outerLineFixState } from '@/store/outerLineAtom'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
import { getChonByDegree } from '@/util/canvas-util'
import { EventContext } from '@/app/floor-plan/EventProvider'
//지붕형상 수동 설정
export function useRoofShapePassivitySetting(id) {
@ -26,8 +25,8 @@ export function useRoofShapePassivitySetting(id) {
const { getMessage } = useMessage()
const { showLine, hideLine, addPitchTextsByOuterLines } = useLine()
const { swalFire } = useSwal()
// const { addCanvasMouseEventListener, initEvent } = useEvent()
const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
const { addCanvasMouseEventListener, initEvent } = useEvent()
// const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
const { drawRoofPolygon } = useMode()
const { addPolygonByLines } = usePolygon()
const currentObject = useRecoilValue(currentObjectState)
@ -204,7 +203,11 @@ export function useRoofShapePassivitySetting(id) {
wall = addPolygonByLines(lines, { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
} else {
// 그냥 닫을 경우 처리
wall = addPolygonByLines([...initLines.current], { name: POLYGON_TYPE.WALL, fill: 'transparent', stroke: 'black' })
wall = addPolygonByLines([...initLines.current], {
name: POLYGON_TYPE.WALL,
fill: 'transparent',
stroke: 'black',
})
lines.forEach((line, idx) => {
line.attributes = initLines.current[idx].attributes
})

7
src/hooks/roofcover/useWallLineOffsetSetting.js
View File

@ -1,12 +1,11 @@
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { useContext, useEffect, useRef, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
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'
import { EventContext } from '@/app/floor-plan/EventProvider'
// 외벽선 편집 및 오프셋
export function useWallLineOffsetSetting(id) {
@ -15,8 +14,8 @@ export function useWallLineOffsetSetting(id) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const { swalFire } = useSwal()
// const { addCanvasMouseEventListener, initEvent } = useEvent()
const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
const { addCanvasMouseEventListener, initEvent } = useEvent()
// const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
const wallLineEditRef = useRef(null)
const length1Ref = useRef(null)
const length2Ref = useRef(null)

114
src/hooks/surface/usePlacementShapeDrawing.js
View File

@ -12,7 +12,7 @@ import { useEvent } from '@/hooks/useEvent'
import { useMouse } from '@/hooks/useMouse'
import { useLine } from '@/hooks/useLine'
import { useTempGrid } from '@/hooks/useTempGrid'
import { useContext, useEffect, useRef } from 'react'
import { useEffect, useRef } from 'react'
import { distanceBetweenPoints, setSurfaceShapePattern } from '@/util/canvas-util'
import { fabric } from 'fabric'
import { calculateAngle } from '@/util/qpolygon-utils'
@ -33,15 +33,15 @@ import { POLYGON_TYPE } from '@/common/common'
import { usePopup } from '@/hooks/usePopup'
import { roofDisplaySelector } from '@/store/settingAtom'
import { EventContext } from '@/app/floor-plan/EventProvider'
// 면형상 배치
export function usePlacementShapeDrawing(id) {
const canvas = useRecoilValue(canvasState)
const roofDisplay = useRecoilValue(roofDisplaySelector)
// const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
// useEvent()
const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
useContext(EventContext)
useEvent()
// const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
// useContext(EventContext)
const { getIntersectMousePoint } = useMouse()
const { addLine, removeLine } = useLine()
const { addPolygonByLines, drawDirectionArrow } = usePolygon()
@ -432,56 +432,104 @@ export function usePlacementShapeDrawing(id) {
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,
},
]
})
}
@ -537,35 +585,65 @@ export function usePlacementShapeDrawing(id) {
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) => {

83
src/hooks/surface/useSurfaceShapeBatch.js
View File

@ -2,7 +2,7 @@
import { useRecoilValue } from 'recoil'
import { canvasState, globalPitchState } from '@/store/canvasAtom'
import { MENU, BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
import { MENU, POLYGON_TYPE } from '@/common/common'
import { getIntersectionPoint, setSurfaceShapePattern } from '@/util/canvas-util'
import { degreesToRadians } from '@turf/turf'
import { QPolygon } from '@/components/fabric/QPolygon'
@ -15,8 +15,6 @@ import { usePolygon } from '@/hooks/usePolygon'
import { fontSelector } from '@/store/fontAtom'
import { slopeSelector } from '@/store/commonAtom'
import { QLine } from '@/components/fabric/QLine'
import { EventContext } from '@/app/floor-plan/EventProvider'
import { useContext } from 'react'
export function useSurfaceShapeBatch() {
const { getMessage } = useMessage()
@ -28,8 +26,8 @@ export function useSurfaceShapeBatch() {
const roofDisplay = useRecoilValue(roofDisplaySelector)
const slope = useRecoilValue(slopeSelector(globalPitch))
const { swalFire } = useSwal()
// const { addCanvasMouseEventListener, initEvent } = useEvent()
const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
const { addCanvasMouseEventListener, initEvent } = useEvent()
// const { addCanvasMouseEventListener, initEvent } = useContext(EventContext)
const { closePopup } = usePopup()
const applySurfaceShape = (surfaceRefs, selectedType, id) => {
@ -329,8 +327,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 },
]
@ -341,9 +345,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,
@ -362,8 +375,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
@ -374,8 +393,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
}
@ -385,8 +410,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
}
@ -396,8 +427,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
}
@ -408,7 +445,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 },
{
@ -497,7 +537,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
}