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

버튼 visible 상태 수정

Browse Source
This commit is contained in:
hyojun.choi 2024-08-05 13:18:12 +09:00
parent 060c8ce5b4
commit 20229c7ef7
3 changed files with 47 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/Roof2.jsx
View File

@ -5,7 +5,7 @@ import { Button } from '@nextui-org/react'
import RangeSlider from './ui/RangeSlider'
import { useRecoilState, useRecoilValue } from 'recoil'
import { canvasSizeState, fontSizeState, roofMaterialState, sortedPolygonArray } from '@/store/canvasAtom'
import { canvasSizeState, fontSizeState, roofMaterialState, sortedPolygonArray, templateTypeState } from '@/store/canvasAtom'
import { QLine } from '@/components/fabric/QLine'
import { getCanvasState, insertCanvasState } from '@/lib/canvas'
import { calculateIntersection } from '@/util/canvas-util'
@ -34,6 +34,8 @@ export default function Roof2() {
//지붕재
const roofMaterial = useRecoilValue(roofMaterialState)
const [templateType, setTemplateType] = useRecoilState(templateTypeState)
const {
mode,
setMode,
@ -260,6 +262,7 @@ export default function Roof2() {
canvas?.add(polygon)
handleOuterlinesTest2(polygon, 50)
setTemplateType(1)
}
const rotateShape = () => {
@ -477,21 +480,21 @@ export default function Roof2() {
<Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => setMode(Mode.TEXTBOX)}>
텍스트박스 모드
</Button>
<Button className="m-1 p-2" onClick={handleUndo}>
{/*<Button className="m-1 p-2" onClick={handleUndo}>
Undo
</Button>
<Button className="m-1 p-2" onClick={handleRedo}>
Redo
</Button>
</Button>*/}
<Button className="m-1 p-2" onClick={handleClear}>
clear
</Button>
<Button className="m-1 p-2" onClick={zoomIn}>
{/*<Button className="m-1 p-2" onClick={zoomIn}>
확대
</Button>
<Button className="m-1 p-2" onClick={zoomOut}>
축소
</Button>
</Button>*/}
현재 줌 : {zoom}%
<Button className="m-1 p-2" onClick={makeLine}>
선 추가
@ -499,52 +502,54 @@ export default function Roof2() {
<Button className="m-1 p-2" onClick={makePolygon}>
다각형 추가
</Button>
<Button
className="m-1 p-2"
onClick={() => {
setCanvasBackgroundWithDots(canvas, 10)
}}
>
점선 추가
</Button>
<Button
className="m-1 p-2"
onClick={() => {
setCanvasBackgroundWithDots(canvas, 20)
}}
>
점선 추가
</Button>
{templateType === 0 && (
<>
<Button
className="m-1 p-2"
onClick={() => {
setCanvasBackgroundWithDots(canvas, 10)
}}
>
점선 추가
</Button>
<Button
className="m-1 p-2"
onClick={() => {
setCanvasBackgroundWithDots(canvas, 20)
}}
>
점선 추가
</Button>
<Button className="m-1 p-2" onClick={makeQPolygon}>
QPolygon
</Button>
</>
)}
<Button className="m-1 p-2" onClick={saveImage}>
저장
</Button>
<Button className="m-1 p-2" onClick={makeQPolygon}>
QPolygon
</Button>
<Button className="m-1 p-2" onClick={rotateShape}>
{/*<Button className="m-1 p-2" onClick={rotateShape}>
회전
</Button>
<Button className="m-1 p-2" onClick={makeQLine}>
</Button>*/}
{/*<Button className="m-1 p-2" onClick={makeQLine}>
QLine
</Button>
<Button className="m-1 p-2" onClick={PolygonToLine}>
PolygonToLine
</Button>
{/*<Button className="m-1 p-2" onClick={handleSaveCanvas}>
canvas 내용 저장하기
</Button>
<Button className="m-1 p-2" onClick={handleLoadCanvas}>
canvas 내용 불러오기
</Button>*/}
<Button className="m-1 p-2" onClick={addCanvas}>
캔버스 추가
</Button>
<Button className="m-1 p-2" onClick={drawRoofMaterial}>
지붕타입 지붕재
</Button>
<Button className="m-1 p-2" onClick={createRoofRack}>
지붕가대
</Button>
</Button>*/}
{templateType === 1 && (
<>
<Button className="m-1 p-2" onClick={drawRoofMaterial}>
지붕타입 지붕재
</Button>
<Button className="m-1 p-2" onClick={createRoofRack}>
지붕가대
</Button>
</>
)}
<Button className="m-1 p-2" onClick={deleteCell}>
선택 셀 지우기
</Button>

1
src/hooks/useMode.js
View File

@ -710,6 +710,7 @@ export function useMode() {
canvas?.clear()
startPoint.current = null
setEndPoint(null)
setTemplateType(0)
points.current = []
historyPoints.current = []
historyLines.current = []

2
src/store/canvasAtom.js
View File

@ -50,7 +50,7 @@ export const roofPolygonArrayState = atom({
export const templateTypeState = atom({
key: 'templateType',
default: 1, //1:모임지붕, 2:A타입, 3:B타입
default: 0, //1:모임지붕, 2:A타입, 3:B타입
dangerouslyAllowMutability: true,
})