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

Merge branch 'feature/test' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into feature/test

Browse Source 
# Conflicts:
#	src/components/Roof2.jsx
This commit is contained in:
hyojun.choi 2024-07-08 14:18:34 +09:00
commit bbff6ca4b2
1 changed files with 56 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
src/components/Roof2.jsx
View File

@ -1,6 +1,7 @@
import { useCanvas } from '@/hooks/useCanvas' import { useCanvas } from '@/hooks/useCanvas'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { Mode, useMode } from '@/hooks/useMode' import { Mode, useMode } from '@/hooks/useMode'
import { Button } from '@nextui-org/react'
import QRect from '@/components/fabric/QRect' import QRect from '@/components/fabric/QRect'
import QPolygon from '@/components/fabric/QPolygon' import QPolygon from '@/components/fabric/QPolygon'
@ -182,145 +183,101 @@ export default function Roof2() {
{canvas && ( {canvas && (
<> <>
<div className=" my-8 w-full text:pretty"> <div className=" my-8 w-full text:pretty">
<button <Button
className={`w-30 m-2 p-2 rounded ${ className="m-1 p-2"
mode === Mode.DEFAULT ? 'bg-blue-500' : 'bg-gray-500' color={`${mode === Mode.DEFAULT ? 'primary' : 'default'}`}
} text-white`} onClick={fillCellInPolygon}
onClick={() => changeMode(canvas, Mode.DEFAULT)}
> >
모드 DEFAULT 모드 DEFAULT
</button> </Button>
<button <Button
className={`w-30 m-2 p-2 rounded ${ className="m-1 p-2"
mode === Mode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500' color={`${mode === Mode.DRAW_LINE ? 'primary' : 'default'}`}
} text-white`}
onClick={() => changeMode(canvas, Mode.DRAW_LINE)} onClick={() => changeMode(canvas, Mode.DRAW_LINE)}
> >
기준선 긋기 모드 기준선 긋기 모드
</button> </Button>
<button <Button
className={`w-30 m-2 p-2 rounded ${ className="m-1 p-2"
mode === Mode.EDIT ? 'bg-blue-500' : 'bg-gray-500' color={`${mode === Mode.EDIT ? 'primary' : 'default'}`}
} text-white`}
onClick={() => changeMode(canvas, Mode.EDIT)} onClick={() => changeMode(canvas, Mode.EDIT)}
> >
에디팅모드 에디팅모드
</button> </Button>
<button <Button
className={`w-30 m-2 p-2 rounded ${ className="m-1 p-2"
mode === Mode.TEMPLATE ? 'bg-blue-500' : 'bg-gray-500' color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`}
} text-white`}
onClick={() => changeMode(canvas, Mode.TEMPLATE)} onClick={() => changeMode(canvas, Mode.TEMPLATE)}
> >
템플릿 템플릿
</button> </Button>
<button <Button
className={`w-30 m-2 p-2 rounded ${ className="m-1 p-2"
mode === Mode.TEXTBOX ? 'bg-blue-500' : 'bg-gray-500' color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`}
} text-white`}
onClick={() => changeMode(canvas, Mode.TEXTBOX)} onClick={() => changeMode(canvas, Mode.TEXTBOX)}
> >
텍스트박스 모드 텍스트박스 모드
</button> </Button>
<button <Button
className={`w-30 m-2 p-2 rounded ${ className="m-1 p-2"
mode === Mode.DRAW_RECT ? 'bg-blue-500' : 'bg-gray-500' color={`${mode === Mode.DRAW_RECT ? 'primary' : 'default'}`}
} text-white`}
onClick={() => changeMode(canvas, Mode.DRAW_RECT)} onClick={() => changeMode(canvas, Mode.DRAW_RECT)}
> >
사각형 생성 모드 사각형 생성 모드
</button> </Button>
<button <Button className="m-1 p-2" onClick={handleUndo}>
className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={handleUndo}
>
Undo Undo
</button> </Button>
<button <Button className="m-1 p-2" onClick={handleRedo}>
className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={handleRedo}
>
Redo Redo
</button> </Button>
<button <Button className="m-1 p-2" onClick={handleClear}>
className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={handleClear}
>
clear clear
</button> </Button>
<button <Button className="m-1 p-2" onClick={zoomIn}>
className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={zoomIn}
>
확대 확대
</button> </Button>
<button <Button className="m-1 p-2" onClick={zoomOut}>
className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={zoomOut}
>
축소 축소
</button> </Button>
현재 줌 : {zoom}% 현재 줌 : {zoom}%
<button <Button className="m-1 p-2" onClick={makeRect}>
className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={makeRect}
>
사각형만들기 사각형만들기
</button> </Button>
<button <Button className="m-1 p-2" onClick={makeLine}>
className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={makeLine}
>
선 추가 선 추가
</button> </Button>
<button <Button className="m-1 p-2" onClick={makePolygon}>
className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={makePolygon}
>
다각형 추가 다각형 추가
</button> </Button>
<button <Button
className="w-30 m-2 p-2 rounded bg-gray-500 text-white" className="m-1 p-2"
onClick={() => { onClick={() => {
setCanvasBackgroundWithDots(canvas, 10) setCanvasBackgroundWithDots(canvas, 10)
}} }}
> >
점선 추가 점선 추가
</button> </Button>
<button <Button
className="w-30 m-2 p-2 rounded bg-gray-500 text-white" className="m-1 p-2"
onClick={() => { onClick={() => {
setCanvasBackgroundWithDots(canvas, 20) setCanvasBackgroundWithDots(canvas, 20)
}} }}
> >
점선 추가 점선 추가
</button> </Button>
<button <Button className="m-1 p-2" onClick={saveImage}>
className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={() => {
saveImage()
}}
>
저장 저장
</button> </Button>
<button <Button className="m-1 p-2" onClick={makeQPolygon}>
className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={makeQPolygon}
>
QPolygon QPolygon
</button> </Button>
<button <Button className="m-1 p-2" onClick={rotateShape}>
className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={rotateShape}
>
회전 회전
</button> </Button>
<button <Button className="m-1 p-2" onClick={makeQLine}>
className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={makeQLine}
>
QLine QLine
</button> </Button>
</div> </div>
<div className="flex justify-center flex-col items-center"> <div className="flex justify-center flex-col items-center">
<div className="m-2 p-2 w-80"> <div className="m-2 p-2 w-80">