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

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

Browse Source
This commit is contained in:
changkyu choi 2024-08-28 08:33:22 +09:00
commit cebe226491
4 changed files with 118 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Roof2.jsx
View File

@ -30,6 +30,7 @@ import SettingsModal from './SettingsModal'
import { useAxios } from '@/hooks/useAxios'
import QPolygonContextMenu from '@/components/common/context-menu/QPolygonContextMenu'
import QLineContextMenu from '@/components/common/context-menu/QLineContextMenu'
import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMenu'
export default function Roof2(props) {
const { name, userId, email, isLoggedIn } = props
@ -588,7 +589,7 @@ export default function Roof2(props) {
모드 DEFAULT
</Button>
<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={() => setMode(Mode.EDIT)}>
에디팅모드
@ -632,6 +633,9 @@ export default function Roof2(props) {
<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={() => setMode(Mode.DRAW_RECT)}>
도머 추가 모드
</Button>
<Button
className="m-1 p-2"
color={`${mode === Mode.ADSORPTION_POINT ? 'primary' : 'default'}`}
@ -753,7 +757,9 @@ export default function Roof2(props) {
<ThumbnailList {...thumbnailProps} />
<div className="flex justify-start my-8 mx-2 w-full">
<canvas ref={canvasRef} id="canvas" style={{ border: '1px solid black' }} />
{!canvas ? null : currentObject?.type === 'QPolygon' ? (
{!canvas ? null : mode === Mode.DRAW_LINE ? (
<QEmptyContextMenu contextRef={canvasRef} canvasProps={canvas} />
) : currentObject?.type === 'QPolygon' ? (
<QPolygonContextMenu contextRef={canvasRef} canvasProps={canvas} />
) : currentObject?.type === 'QLine' ? (
<QLineContextMenu contextRef={canvasRef} canvasProps={canvas} />

16
src/components/SettingsModal.jsx
View File

@ -56,7 +56,12 @@ export default function SettingsModal(props) {
{
stroke: 'gray',
strokeWidth: 1,
selectable: false,
selectable: true,
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
lockScalingX: true,
lockScalingY: true,
name: 'guideLine',
},
)
@ -70,7 +75,12 @@ export default function SettingsModal(props) {
{
stroke: 'gray',
strokeWidth: 1,
selectable: false,
selectable: true,
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
lockScalingX: true,
lockScalingY: true,
name: 'guideLine',
},
)
@ -137,7 +147,9 @@ export default function SettingsModal(props) {
name: 'guideDot',
},
)
canvasProps.add(backgroundPolygon)
backgroundPolygon.sendToBack()
canvasProps.renderAll()
const recoilObj = {

50
src/components/common/context-menu/QEmptyContextMenu.jsx Normal file
View File

@ -0,0 +1,50 @@
'use client'
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
export default function QEmptyContextMenu(props) {
const { contextRef, canvasProps } = props
// const children = useRecoilValue(modalContent)
const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
useEffect(() => {
if (!contextRef.current) return
const handleContextMenu = (e) => {
e.preventDefault() //기존 contextmenu 막고
setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
}
const handleClick = (e) => {
e.preventDefault()
setContextMenu({ ...contextMenu, visible: false })
}
const handleOutsideClick = (e) => {
e.preventDefault()
if (contextMenu.visible && !ref.current.contains(e.target)) {
setContextMenu({ ...contextMenu, visible: false })
}
}
// Prevent the default context menu from appearing on the canvas
canvasProps.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
document.addEventListener('click', handleClick)
document.addEventListener('click', handleOutsideClick)
return () => {
// canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu)
document.removeEventListener('click', handleClick)
document.removeEventListener('click', handleOutsideClick)
}
}, [contextRef, contextMenu])
const handleMenuClick = (option) => {
alert(`option ${option} clicked`)
setContextMenu({ ...contextMenu, visible: false })
}
return <></>
}

69
src/hooks/useMode.js
View File

@ -365,10 +365,13 @@ export function useMode() {
canvas?.off('mouse:down')
switch (mode) {
case 'drawLine':
canvas?.on('mouse:down', mouseEvent.drawLineMode)
canvas?.on('mouse:down', mouseEvent.drawLineModeLeftClick)
window.document.removeEventListener('contextmenu', mouseEvent.drawLineModeRightClick)
window.document.addEventListener('contextmenu', mouseEvent.drawLineModeRightClick)
break
case 'edit':
canvas?.on('mouse:down', mouseEvent.editMode)
break
case 'textbox':
canvas?.on('mouse:down', mouseEvent.textboxMode)
@ -655,7 +658,7 @@ export function useMode() {
}
const mouseEvent = {
drawLineMode: (options) => {
drawLineModeLeftClick: (options) => {
const pointer = canvas?.getPointer(options.e)
const line = new QLine(
@ -672,6 +675,21 @@ export function useMode() {
canvas?.add(line)
canvas?.renderAll()
},
drawLineModeRightClick: (options) => {
const line = new fabric.Line(
[0, options.offsetY, canvas.width, options.offsetY], // y축에 1자 선을 그립니다.
{
stroke: 'black',
strokeWidth: 2,
viewLengthText: true,
selectable: false,
fontSize: fontSize,
},
)
canvas?.add(line)
canvas?.renderAll()
},
editMode: (options) => {
let pointer = canvas?.getPointer(options.e)
@ -802,31 +820,29 @@ export function useMode() {
changeMode(canvas, Mode.EDIT)
})
},
drawRectMode: () => {
drawRectMode: (o) => {
let rect, isDown, origX, origY
canvas.on('mouse:down', function (o) {
isDown = true
const pointer = canvas.getPointer(o.e)
origX = pointer.x
origY = pointer.y
rect = new fabric.Rect({
left: origX,
top: origY,
originX: 'left',
originY: 'top',
width: pointer.x - origX,
height: pointer.y - origY,
angle: 0,
fill: 'transparent',
stroke: 'black',
transparentCorners: false,
})
canvas.add(rect)
isDown = true
const pointer = canvas.getPointer(o.e)
origX = pointer.x
origY = pointer.y
rect = new fabric.Rect({
left: origX,
top: origY,
originX: 'left',
originY: 'top',
width: pointer.x - origX,
height: pointer.y - origY,
angle: 0,
fill: 'transparent',
stroke: 'black',
transparentCorners: false,
})
canvas.add(rect)
canvas.on('mouse:move', function (o) {
canvas.on('mouse:move', function (e) {
if (!isDown) return
const pointer = canvas.getPointer(o.e)
const pointer = canvas.getPointer(e.e)
if (origX > pointer.x) {
rect.set({ left: Math.abs(pointer.x) })
}
@ -837,6 +853,13 @@ export function useMode() {
rect.set({ width: Math.abs(origX - pointer.x) })
rect.set({ height: Math.abs(origY - pointer.y) })
})
canvas.on('mouse:up', function (o) {
isDown = false
canvas.off('mouse:move')
canvas.off('mouse:up')
setMode(Mode.DEFAULT)
})
},
// 흡착점 추가
adsorptionPoint(o) {