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

Revert "useContext -> useEvent 원복"

Browse Source 
This reverts commit a084b5dbf3483b4884bdeb59bb422ef27bc85bba.
This commit is contained in:
minsik 2024-11-27 13:57:49 +09:00
parent a084b5dbf3
commit c92065b825
19 changed files with 115 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/floor-plan/layout.js
View File

@ -3,19 +3,20 @@
import FloorPlanProvider from './FloorPlanProvider'
import FloorPlan from '@/components/floor-plan/FloorPlan'
import CanvasLayout from '@/components/floor-plan/CanvasLayout'
import EventProvider from './EventProvider'
export default function FloorPlanLayout({ children }) {
console.log('🚀 ~ FloorPlanLayout ~ FloorPlanLayout:')
return (
<>
{/*<EventProvider>*/}
<FloorPlanProvider>
<FloorPlan>
<CanvasLayout>{children}</CanvasLayout>
</FloorPlan>
</FloorPlanProvider>
{/*</EventProvider>*/}
<EventProvider>
<FloorPlanProvider>
<FloorPlan>
<CanvasLayout>{children}</CanvasLayout>
</FloorPlan>
</FloorPlanProvider>
</EventProvider>
</>
)
}

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

@ -1,11 +1,12 @@
'use client'
import { useEffect } from 'react'
import { useContext, 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
@ -14,8 +15,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,12 +33,15 @@ import useMenu from '@/hooks/common/useMenu'
import { MENU } from '@/common/common'
import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
import { estimateState, floorPlanObjectState } from '@/store/floorPlanObjectAtom'
import { estimateState } 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
@ -68,8 +71,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 { useEffect, useRef, useState } from 'react'
import { useContext, 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,6 +11,7 @@ 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()
@ -18,8 +19,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,10 +3,11 @@ import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
import { useEffect, useState } from 'react'
import { useState, useEffect, useContext } 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)
@ -14,8 +15,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,11 +1,12 @@
import { useMessage } from '@/hooks/useMessage'
import { useEffect, useState } from 'react'
import { useContext, 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,11 +1,12 @@
import { useMessage } from '@/hooks/useMessage'
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import { forwardRef, useContext, 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 { useEffect } from 'react'
import { useContext, useEffect } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { wordDisplaySelector } from '@/store/settingAtom'
import { useEvent } from '@/hooks/useEvent'
@ -9,12 +9,13 @@ 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'))

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

@ -1,22 +1,25 @@
import { useRecoilState, useRecoilValue } from 'recoil'
import { canvasState, moduleIsSetupState, moduleSetupSurfaceState } from '@/store/canvasAtom'
import { useContext, useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { rectToPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
import { roofDisplaySelector } from '@/store/settingAtom'
import offsetPolygon from '@/util/qpolygon-utils'
import { QPolygon } from '@/components/fabric/QPolygon'
import { QLine } from '@/components/fabric/QLine'
import { moduleSetupSurfaceState, moduleIsSetupState } from '@/store/canvasAtom'
import { useEvent } from '@/hooks/useEvent'
import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
import { POLYGON_TYPE, BATCH_TYPE } from '@/common/common'
import * as turf from '@turf/turf'
import { EventContext } from '@/app/floor-plan/EventProvider'
export function useModuleBasicSetting() {
const canvas = useRecoilValue(canvasState)
const roofDisplay = useRecoilValue(roofDisplaySelector)
const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)
const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
// const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
// const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
let selectedModuleInstSurfaceArray = []
const makeModuleInstArea = () => {
@ -697,7 +700,7 @@ export function useModuleBasicSetting() {
}
if (leftBottomCnt + rightBottomCnt === 0) {
exposedBottom++
return
}
})
// 노출상면 체크
@ -725,7 +728,7 @@ export function useModuleBasicSetting() {
}
if (leftTopCnt + rightTopCnt === 0) {
exposedTop++
return
}
})
return {

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

@ -1,5 +1,5 @@
'use client'
import { useEffect } from 'react'
import { useContext, useEffect } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
@ -12,12 +12,13 @@ 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 { useEffect, useRef, useState } from 'react'
import { useContext, useEffect, useRef, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { adsorptionRangeState, canvasState, verticalHorizontalModeState } from '@/store/canvasAtom'
import { useEvent } from '@/hooks/useEvent'
@ -22,12 +22,13 @@ 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 { useEffect, useRef, useState } from 'react'
import { useContext, useEffect, useRef, useState } from 'react'
import { useRecoilValue } from 'recoil'
import { ANGLE_TYPE, canvasState, currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
import { useMessage } from '@/hooks/useMessage'
@ -10,13 +10,14 @@ 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,10 +2,12 @@ import { useRecoilValue } from 'recoil'
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
import { useEffect, useRef, useState } from 'react'
import { useContext, 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) {
@ -14,8 +16,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 { useEffect, useRef, useState } from 'react'
import { useContext, useEffect, useRef, useState } from 'react'
import { useLine } from '@/hooks/useLine'
import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
@ -11,6 +11,7 @@ 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) {
@ -25,8 +26,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)
@ -203,11 +204,7 @@ 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,11 +1,12 @@
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { useEffect, useRef, useState } from 'react'
import { useContext, 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) {
@ -14,8 +15,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 { useEffect, useRef } from 'react'
import { useContext, 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,104 +432,56 @@ 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 }]
})
}
@ -585,65 +537,35 @@ 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, POLYGON_TYPE } from '@/common/common'
import { MENU, BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
import { getIntersectionPoint, setSurfaceShapePattern } from '@/util/canvas-util'
import { degreesToRadians } from '@turf/turf'
import { QPolygon } from '@/components/fabric/QPolygon'
@ -15,6 +15,8 @@ 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()
@ -26,8 +28,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) => {
@ -327,14 +329,8 @@ 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 },
]
@ -345,18 +341,9 @@ 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,
@ -375,14 +362,8 @@ 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
@ -393,14 +374,8 @@ 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
}
@ -410,14 +385,8 @@ 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
}
@ -427,14 +396,8 @@ 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
}
@ -445,10 +408,7 @@ 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 },
{
@ -537,10 +497,7 @@ 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
}

12
src/hooks/useCanvas.js
View File

@ -13,7 +13,7 @@ import { writeImage } from '@/lib/canvas'
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
import { useAxios } from '@/hooks/useAxios'
import { useFont } from '@/hooks/common/useFont'
import { OBJECT_PROTOTYPE, SAVE_KEY } from '@/common/common'
import { OBJECT_PROTOTYPE, RELOAD_TYPE_PROTOTYPE, SAVE_KEY } from '@/common/common'
export function useCanvas(id) {
const [canvas, setCanvas] = useRecoilState(canvasState)
@ -37,7 +37,6 @@ export function useCanvas(id) {
selection: false,
})
console.log('canvas', c)
setCanvas(c)
setCanvasForEvent(c)
attachDefaultEventOnCanvas()
@ -395,14 +394,7 @@ export function useCanvas(id) {
await post({ url: '/api/canvas-management/canvas-statuses', data: patternData })
setThumbnails((prev) => [
...prev,
{
imageName: `/canvasState/${title}.png`,
userId,
canvasStatus: JSON.stringify(canvasStatus),
},
])
setThumbnails((prev) => [...prev, { imageName: `/canvasState/${title}.png`, userId, canvasStatus: JSON.stringify(canvasStatus) }])
}
const handleFlip = () => {

3
src/hooks/useEvent.js
View File

@ -1,4 +1,4 @@
import { useEffect, useRef } from 'react'
import { useCallback, useEffect, useRef } from 'react'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom'
import { fabric } from 'fabric'
@ -41,7 +41,6 @@ export function useEvent() {
const addDefaultEvent = () => {
//default Event 추가
console.log('addDefaultEvent', canvas)
addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent)
addCanvasMouseEventListener('mouse:out', defaultMouseOutEvent)
addDocumentEventListener('contextmenu', document, defaultContextMenuEvent)