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

살짝 수정

Browse Source
This commit is contained in:
hyojun.choi 2024-06-24 20:05:26 +09:00
parent 1898adc005
commit 0acf115396
3 changed files with 35 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Roof2.jsx
View File

@ -1,49 +1,49 @@
import { useCanvas } from '@/hooks/useCanvas'
import { useEffect } from 'react'
import { UseMode, useMode } from '@/hooks/useMode'
import { Mode, UseMode, useMode } from '@/hooks/useMode'
export default function Roof2() {
const { canvas, handleRedo, handleUndo, handleClear } = useCanvas('canvas')
const { canvas, handleRedo, handleUndo } = useCanvas('canvas')
const { mode, changeMode, setCanvas } = useMode()
const { mode, changeMode, setCanvas, handleClear } = useMode()
useEffect(() => {
// canvas가 없는 경우
if (!canvas) return
// canvas가 있는 경우
if (!canvas) {
return
}
changeMode(canvas, mode)
}, [mode, canvas])
}, [canvas, mode])
return (
<>
<div className="flex justify-center my-8">
<button
className={`w-30 mx-2 p-2 rounded ${mode === UseMode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
onClick={() => changeMode(canvas, UseMode.DRAW_LINE)}
className={`w-30 mx-2 p-2 rounded ${mode === Mode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
onClick={() => changeMode(canvas, Mode.DRAW_LINE)}
>
기준선 긋기 모드
</button>
<button
className={`w-30 mx-2 p-2 rounded ${mode === UseMode.EDIT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
onClick={() => changeMode(canvas, UseMode.EDIT)}
className={`w-30 mx-2 p-2 rounded ${mode === Mode.EDIT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
onClick={() => changeMode(canvas, Mode.EDIT)}
>
에디팅모드
</button>
<button
className={`w-30 mx-2 p-2 rounded ${mode === UseMode.TEMPLATE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
onClick={() => changeMode(canvas, UseMode.TEMPLATE)}
className={`w-30 mx-2 p-2 rounded ${mode === Mode.TEMPLATE ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
onClick={() => changeMode(canvas, Mode.TEMPLATE)}
>
템플릿모드
</button>
<button
className={`w-30 mx-2 p-2 rounded ${mode === UseMode.TEXTBOX ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
onClick={() => changeMode(canvas, UseMode.TEXTBOX)}
className={`w-30 mx-2 p-2 rounded ${mode === Mode.TEXTBOX ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
onClick={() => changeMode(canvas, Mode.TEXTBOX)}
>
텍스트박스 모드
</button>
<button
className={`w-30 mx-2 p-2 rounded ${mode === UseMode.DRAW_RECT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
onClick={() => changeMode(canvas, UseMode.DRAW_RECT)}
className={`w-30 mx-2 p-2 rounded ${mode === Mode.DRAW_RECT ? 'bg-blue-500' : 'bg-gray-500'} text-white`}
onClick={() => changeMode(canvas, Mode.DRAW_RECT)}
>
사각형 생성 모드
</button>

9
src/hooks/useCanvas.js
View File

@ -238,14 +238,6 @@ export function useCanvas(id) {
}
}
/**
* 해당 캔버스를 비운다.
*/
const handleClear = () => {
canvas?.clear()
initialize()
}
/**
* 선택한 도형을 복사한다.
*/
@ -506,7 +498,6 @@ export function useCanvas(id) {
addShape,
handleUndo,
handleRedo,
handleClear,
handleCopy,
handleDelete,
handleSave,

28
src/hooks/useMode.js
View File

@ -1,6 +1,6 @@
import { useRef, useState } from 'react'
export const UseMode = {
export const Mode = {
DRAW_LINE: 'drawLine', // 기준선 긋기모드
EDIT: 'edit',
TEMPLATE: 'template',
@ -9,13 +9,13 @@ export const UseMode = {
}
export function useMode() {
const [mode, setMode] = useState(UseMode.EDIT)
const [mode, setMode] = useState(Mode.EDIT)
const points = useRef([])
const historyPoints = useRef([])
const historyLines = useRef([])
const [canvas, setCanvas] = useState(null)
const addEvent = (mode) => {
const addEvent = (mode = Mode.EDIT) => {
switch (mode) {
case 'drawLine':
drawLineMode()
@ -35,11 +35,11 @@ export function useMode() {
}
}
const changeMode = (canvas, mode) => {
const changeMode = (canvas, mode = Mode.EDIT) => {
setMode(mode)
// mode변경 시 이전 이벤트 제거
canvas?.off('mouse:down')
setCanvas(canvas)
canvas?.off('mouse:down')
addEvent(mode)
}
@ -112,7 +112,6 @@ export function useMode() {
)
historyLines.current.push(line)
console.log(line)
const text = new fabric.Text(length.toString(), {
left:
(points.current[0].left +
@ -140,8 +139,6 @@ export function useMode() {
selectable: false,
})
console.log(endPointCircle)
canvas?.add(line)
canvas?.add(text)
canvas?.add(endPointCircle)
@ -160,7 +157,7 @@ export function useMode() {
}
const templateMode = () => {
changeMode(canvas, UseMode.EDIT)
changeMode(canvas, Mode.EDIT)
if (historyPoints.current.length >= 4) {
const firstPoint = historyPoints.current[0]
@ -277,6 +274,7 @@ export function useMode() {
/**
* 두 점을 연결하는 선과 길이를 그립니다.
* a : 시작점, b : 끝점
*/
const drawLineWithLength = (a, b) => {
const vector = {
@ -333,5 +331,15 @@ export function useMode() {
canvas.renderAll()
}
return { mode, changeMode, setCanvas }
/**
* 해당 캔버스를 비운다.
*/
const handleClear = () => {
canvas?.clear()
points.current = []
historyPoints.current = []
historyLines.current = []
}
return { mode, changeMode, setCanvas, handleClear }
}