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

fix: changeMode 두번 실행 문제 해결

Browse Source
This commit is contained in:
yoosangwook 2024-08-01 16:50:43 +09:00
parent 7b3db8e8b7
commit 4c96ad2b99
2 changed files with 24 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/Roof2.jsx
View File

@ -35,6 +35,7 @@ export default function Roof2() {
const {
mode,
setMode,
changeMode,
handleClear,
fillCellInPolygon,
@ -109,7 +110,6 @@ export default function Roof2() {
}
useEffect(() => {
console.log('horizontalSize', horizontalSize)
setCanvasSize({ ...canvasSize, vertical: parseInt(verticalSize), horizontal: parseInt(horizontalSize) })
}, [verticalSize, horizontalSize])
@ -121,10 +121,7 @@ export default function Roof2() {
// }, [verticalSize, horizontalSize])
useEffect(() => {
const { vertical, horizontal } = canvasSize
console.log('canvasSize', canvasSize)
console.log('horizontalSize', horizontalSize)
if (vertical !== verticalSize || horizontal !== horizontalSize) {
console.log('setCanvasSize!!')
canvas.setWidth(horizontalSize)
canvas.setHeight(verticalSize)
canvas.renderAll()
@ -391,23 +388,19 @@ export default function Roof2() {
<Button className="m-1 p-2" color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`} onClick={fillCellInPolygon}>
모드 DEFAULT
</Button>
<Button
className="m-1 p-2"
color={`${mode === Mode.DRAW_LINE ? 'primary' : 'default'}`}
onClick={() => changeMode(canvas, Mode.DRAW_LINE)}
>
<Button className="m-1 p-2" color={`${mode === Mode.DRAW_LINE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DRAW_LINE)}>
기준선 긋기 모드
</Button>
<Button className="m-1 p-2" color={`${mode === Mode.EDIT ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.EDIT)}>
<Button className="m-1 p-2" color={`${mode === Mode.EDIT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.EDIT)}>
에디팅모드
</Button>
<Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEMPLATE)}>
<Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.TEMPLATE)}>
템플릿(기둥)
</Button>
<Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.PATTERNA)}>
<Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.PATTERNA)}>
템플릿(A 패턴)
</Button>
<Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.PATTERNB)}>
<Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.PATTERNB)}>
템플릿(B 패턴)
</Button>
<Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(1)}>
@ -416,28 +409,16 @@ export default function Roof2() {
<Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(2)}>
지붕패턴2
</Button>
<Button
className="m-1 p-2"
color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
onClick={() => changeMode(canvas, Mode.ROOF_TRESTLE)}
>
<Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.ROOF_TRESTLE)}>
지붕가대생성
</Button>
<Button
className="m-1 p-2"
color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
onClick={() => changeMode(canvas, Mode.FILL_CELLS)}
>
<Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => setMode(Mode.FILL_CELLS)}>
태양광셀생성
</Button>
<Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEXTBOX)}>
<Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => setMode(Mode.TEXTBOX)}>
텍스트박스 모드
</Button>
<Button
className="m-1 p-2"
color={`${mode === Mode.DRAW_RECT ? 'primary' : 'default'}`}
onClick={() => changeMode(canvas, Mode.DRAW_RECT)}
>
<Button className="m-1 p-2" color={`${mode === Mode.DRAW_RECT ? 'primary' : 'default'}`} onClick={() => setMode(Mode.DRAW_RECT)}>
사각형 생성 모드
</Button>
<Button className="m-1 p-2" onClick={handleUndo}>

24
src/hooks/useMode.js
View File

@ -16,6 +16,7 @@ import {
import { QLine } from '@/components/fabric/QLine'
import { fabric } from 'fabric'
import { QPolygon } from '@/components/fabric/QPolygon'
import { input } from '@nextui-org/react'
export const Mode = {
DRAW_LINE: 'drawLine', // 기준선 긋기모드
@ -214,9 +215,6 @@ export function useMode() {
const addEvent = (mode) => {
switch (mode) {
case 'default':
canvas?.off('mouse:down')
break
case 'drawLine':
drawLineMode()
break
@ -247,6 +245,9 @@ export function useMode() {
case 'fillCells':
makeRoofFillCells()
break
case 'default':
canvas?.off('mouse:down')
break
}
}
@ -3324,25 +3325,28 @@ export function useMode() {
}
const makeRoofFillCells = () => {
const selectedCellRoofs = selectedCellRoofArray
if (selectedCellRoofs.length === 0) {
alert('선택된 영역이 없습니다.')
// const selectedCellRoofs = selectedCellRoofArray
if (selectedCellRoofArray.length === 0) {
console.log('선택된 영역이 없습니다.')
return
}
let inputCellSize = { width: 172, height: 113 }
let cellSize = { ...inputCellSize } //기본으로 가로형으로 넣고
const inputCellSize = { width: 172, height: 113 }
const cellSize = { ...inputCellSize } //기본으로 가로형으로 넣고
if (templateType === 2) {
;[cellSize.width, cellSize.height] = [cellSize.height, cellSize.width]
// ;[cellSize.width, cellSize.height] = [cellSize.height, cellSize.width]
cellSize.width = inputCellSize.height
cellSize.height = inputCellSize.width
}
selectedCellRoofs.forEach((polygon, index) => {
selectedCellRoofArray.forEach((polygon, index) => {
polygon.fillCell({ width: cellSize.width, height: cellSize.height, padding: 10 })
})
}
return {
mode,
setMode,
changeMode,
setCanvas,
handleClear,