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

Merge branch 'dev' into dev-yj

Browse Source 
# Conflicts:
#	src/components/Roof2.jsx
This commit is contained in:
yjnoh 2024-08-23 14:21:28 +09:00
commit f9b84f42d6
14 changed files with 199 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env.development
View File

@ -1,6 +1,7 @@
NEXT_PUBLIC_TEST="테스트변수입니다. development"
NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080"
# NEXT_PUBLIC_API_SERVER_PATH="http://localhost:8080"
DATABASE_URL="sqlserver://mssql.devgrr.kr:1433;database=qcast;user=qcast;password=Qwertqaz12345;trustServerCertificate=true"

2
package.json
View File

@ -27,7 +27,7 @@
"react-responsive-modal": "^6.4.2",
"react-toastify": "^10.0.5",
"recoil": "^0.7.7",
"uuid": "^9.0.1"
"uuid": "^10.0.0"
},
"devDependencies": {
"@turf/turf": "^7.0.0",

10
src/app/[locale]/roof2/page.jsx
View File

@ -3,7 +3,13 @@ import RoofSelect from '@/app/[locale]/roof2/RoofSelect'
import { initCheck } from '@/util/session-util'
export default async function Roof2Page() {
await initCheck()
const session = await initCheck()
const roof2Props = {
name: session.name || '',
userId: session.userId || '',
email: session.email || '',
isLoggedIn: session.isLoggedIn,
}
return (
<>
@ -13,7 +19,7 @@ export default async function Roof2Page() {
</div>
</div>
<div className="flex flex-col justify-center my-8 pt-20">
<Roof2 />
<Roof2 {...roof2Props} />
</div>
</>
)

1
src/components/Headers.jsx
View File

@ -10,6 +10,7 @@ export default function Headers() {
<div className="space-x-4 text-xl">
<Link href="/intro">Intro</Link>
<Link href="/playground">Playground</Link>
<Link href="/settings">Canvas Settings</Link>
<Link href="/roof">Roof</Link>
<Link href="/roof2">Roof2</Link>
</div>

41
src/components/Roof2.jsx
View File

@ -1,7 +1,8 @@
'use client'
import { useCanvas } from '@/hooks/useCanvas'
import { useEffect, useState, useRef } from 'react'
import { useEffect, useRef, useState } from 'react'
import { v4 as uuidv4 } from 'uuid'
import { useMode } from '@/hooks/useMode'
import { Mode } from '@/common/common'
import { Button } from '@nextui-org/react'
@ -26,7 +27,8 @@ import QContextMenu from './common/context-menu/QContextMenu'
import { modalContent, modalState } from '@/store/modalAtom'
import SettingsModal from './SettingsModal'
export default function Roof2() {
export default function Roof2(props) {
const { name, userId, email, isLoggedIn } = props
const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
const canvasRef = useRef(null)
@ -65,6 +67,7 @@ export default function Roof2() {
const [thumbnails, setThumbnails] = useState([])
const thumbnailProps = {
thumbnails,
canvas,
}
const {
@ -90,6 +93,23 @@ export default function Roof2() {
// const [canvasState, setCanvasState] = useRecoilState(canvasAtom)
useEffect(() => {
get({ url: `/api/canvas-management/canvas-statuses/by-object/test123240822001` }).then((res) => {
const arrangeData = res.map((item) => {
console.log(item.canvasStatus.replace(/##/g, '"').replace(/\\/g, ''))
const test = item.canvasStatus.replace(/##/g, '"').replace(/\\/g, '')
const test2 = test.substring(1, test.length - 1)
return {
id: item.id,
userId: item.userId,
imageName: `/canvasState/${item.imageName}.png`,
canvasStatus: JSON.stringify(test2),
}
})
setThumbnails(arrangeData)
})
}, [])
useEffect(() => {
if (!canvas) {
return
@ -531,6 +551,16 @@ export default function Roof2() {
setCompass(degree)
}
const changeLength = (e) => {
setScale(e)
const polygon = canvas?.getActiveObject()
if (polygon.type !== 'QPolygon') {
return
}
canvas?.renderAll()
}
return (
<>
{canvas && (
@ -636,7 +666,7 @@ export default function Roof2() {
<Button
className="m-1 p-2"
onClick={() => {
setCanvasBackgroundWithDots(canvas, 20)
setCanvasBackgroundWithDots(canvas, 200)
}}
>
점선 추가
@ -646,7 +676,7 @@ export default function Roof2() {
</Button>
</>
)}
<Button className="m-1 p-2" onClick={() => saveImage('title')}>
<Button className="m-1 p-2" onClick={() => saveImage(uuidv4(), userId, setThumbnails)}>
저장
</Button>
{/*<Button className="m-1 p-2" onClick={rotateShape}>
@ -714,6 +744,9 @@ export default function Roof2() {
<div className="m-2 p-2 w-80">
<RangeSlider title={`글자 크기${fontSize}`} initValue={fontSize} onchange={setFontSize} />
</div>
<div className="m-2 p-2 w-80">
<RangeSlider title={`선택한 obj 가로 늘리기${scale}`} initValue={scale} min={0.01} max={2.0} step={0.01} onchange={changeLength} />
</div>
</div>
</>
)}

23
src/components/ui/ThumbnailLIst.jsx
View File

@ -1,10 +1,18 @@
import { Card, Image } from '@nextui-org/react'
'use client'
import { memo } from 'react'
import { Card, Image } from '@nextui-org/react'
function ThumbnailList(props) {
const { thumbnails } = props
const { thumbnails, canvas } = props
console.log('ThumbnailList')
const handleSelectThumb = (canvasStatus) => {
console.log('canvasStatus', canvasStatus.length)
canvas?.clear() // 캔버스를 초기화합니다.
canvas?.loadFromJSON(JSON.parse(canvasStatus), function () {
canvas?.renderAll() // 캔버스를 다시 그립니다.
})
}
return (
<>
@ -12,7 +20,14 @@ function ThumbnailList(props) {
{thumbnails.length > 0 &&
thumbnails.map((thumbnail, index) => (
<Card isFooterBlurred radius="lg" className="border-none m-2">
<Image alt="Woman listing to music" className="object-cover" height={200} src="https://nextui.org/images/hero-card.jpeg" width={200} />
<Image
alt="Woman listing to music"
className="object-cover"
height={200}
src={thumbnail.imageName}
width={200}
onClick={() => handleSelectThumb(thumbnail.canvasStatus)}
/>
</Card>
))}
</div>

41
src/hooks/useCanvas.js
View File

@ -1,16 +1,17 @@
import { useEffect, useRef, useState } from 'react'
import { useEffect, useState } from 'react'
import { fabric } from 'fabric'
import { actionHandler, anchorWrapper, polygonPositionHandler } from '@/util/canvas-util'
import { useRecoilState } from 'recoil'
import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
import { useRecoilState, useSetRecoilState } from 'recoil'
import { canvasSizeState, fontSizeState, guidePointModeState } from '@/store/canvasAtom'
import { QLine } from '@/components/fabric/QLine'
import { QPolygon } from '@/components/fabric/QPolygon'
import { defineQLine } from '@/util/qline-utils'
import { defineQPloygon } from '@/util/qpolygon-utils'
import { writeImage } from '@/lib/canvas'
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
import { post } from '@/lib/Axios'
export function useCanvas(id) {
const [canvas, setCanvas] = useState()
@ -19,6 +20,7 @@ export function useCanvas(id) {
const [canvasSize] = useRecoilState(canvasSizeState)
const [fontSize] = useRecoilState(fontSizeState)
const { setCanvasForEvent, attachDefaultEventOnCanvas } = useCanvasEvent()
const setGuidePointMode = useSetRecoilState(guidePointModeState)
/**
* 처음 셋팅
@ -333,7 +335,7 @@ export function useCanvas(id) {
* 이미지로 저장하는 함수
* @param {string} title - 저장할 이미지 이름
*/
const saveImage = async (title = 'canvas') => {
const saveImage = async (title = 'canvas', userId, setThumbnails) => {
removeMouseLines()
await writeImage(title, canvas?.toDataURL('image/png').replace('data:image/png;base64,', ''))
.then((res) => {
@ -342,6 +344,19 @@ export function useCanvas(id) {
.catch((err) => {
console.log('err', err)
})
const canvasStatus = addCanvas()
const patternData = {
userId: userId,
imageName: title,
objectNo: 'test123240822001',
canvasStatus: JSON.stringify(canvasStatus).replace(/"/g, '##'),
}
await post({ url: '/api/canvas-management/canvas-statuses', data: patternData })
setThumbnails((prev) => [...prev, { imageName: `/canvasState/${title}.png`, userId, canvasStatus: JSON.stringify(canvasStatus) }])
}
const handleFlip = () => {
@ -386,6 +401,7 @@ export function useCanvas(id) {
}
const setCanvasBackgroundWithDots = (canvas, gap) => {
setGuidePointMode(true)
// Create a new canvas and fill it with dots
const tempCanvas = new fabric.StaticCanvas()
tempCanvas.setDimensions({
@ -435,15 +451,16 @@ export function useCanvas(id) {
const str = JSON.stringify(objs)
canvas?.clear()
return str
setTimeout(() => {
// 역직렬화하여 캔버스에 객체를 다시 추가합니다.
canvas?.loadFromJSON(JSON.parse(str), function () {
// 모든 객체가 로드되고 캔버스에 추가된 후 호출됩니다.
console.log(canvas?.getObjects().filter((obj) => obj.name === 'roof'))
canvas?.renderAll() // 캔버스를 다시 그립니다.
})
}, 1000)
// setTimeout(() => {
// // 역직렬화하여 캔버스에 객체를 다시 추가합니다.
// canvas?.loadFromJSON(JSON.parse(str), function () {
// // 모든 객체가 로드되고 캔버스에 추가된 후 호출됩니다.
// console.log(canvas?.getObjects().filter((obj) => obj.name === 'roof'))
// canvas?.renderAll() // 캔버스를 다시 그립니다.
// })
// }, 1000)
}
return {

3
src/hooks/useCanvasEvent.js
View File

@ -18,9 +18,6 @@ export function useCanvasEvent() {
canvas?.on('object:added', () => {
document.addEventListener('keydown', handleKeyDown)
})
canvas?.on('mouse:move', drawMouseLines)
canvas?.on('mouse:out', removeMouseLines)
}
const onChange = (e) => {

91
src/hooks/useMode.js
View File

@ -7,23 +7,22 @@ import {
getDirection,
getStartIndex,
rearrangeArray,
getRoofHeight,
getDegreeByChon,
} from '@/util/canvas-util'
import { useRecoilState, useRecoilValue } from 'recoil'
import {
canvasSizeState,
compassState,
drewRoofCellsState,
fontSizeState,
guidePointModeState,
modeState,
roofPolygonArrayState,
roofPolygonPatternArrayState,
roofState,
sortedPolygonArray,
templateTypeState,
wallState,
compassState,
modeState,
} from '@/store/canvasAtom'
import { QLine } from '@/components/fabric/QLine'
import { fabric } from 'fabric'
@ -46,6 +45,7 @@ export function useMode() {
const [sortedArray, setSortedArray] = useRecoilState(sortedPolygonArray)
const [roof, setRoof] = useRecoilState(roofState)
const [wall, setWall] = useRecoilState(wallState)
const isGuidePointMode = useRecoilValue(guidePointModeState)
const [endPoint, setEndPoint] = useState(null)
@ -71,7 +71,7 @@ export function useMode() {
// return
// }
document.addEventListener('keydown', handleKeyDown)
canvas?.on('mouse:move', drawMouseLines)
// 컴포넌트가 언마운트될 때 이벤트 리스너 제거
return () => {
document.removeEventListener('keydown', handleKeyDown)
@ -94,6 +94,15 @@ export function useMode() {
canvas?.on('mouse:move', (e) => addLineEndPointToMousePoint(e, endPoint))
}, [endPoint])
useEffect(() => {
canvas?.off('mouse:move')
canvas?.on('mouse:move', drawMouseLines)
if (mode === Mode.EDIT) {
canvas?.off('mouse:down')
canvas?.on('mouse:down', mouseEvent.editMode)
}
}, [mode, isGuidePointMode])
const drawMouseLines = (e) => {
// 현재 마우스 포인터의 위치를 가져옵니다.
const pointer = canvas?.getPointer(e.e)
@ -104,9 +113,17 @@ export function useMode() {
if (canvas?.getActiveObject()) {
return
}
let newX, newY
if (isGuidePointMode && mode === Mode.EDIT) {
newX = Math.round(pointer.x / 200) * 200
newY = Math.round(pointer.y / 200) * 200
} else {
newX = pointer.x
newY = pointer.y
}
// 가로선을 그립니다.
const horizontalLine = new fabric.Line([0, pointer.y, canvasSize.horizontal, pointer.y], {
const horizontalLine = new fabric.Line([0, newY, canvasSize.horizontal, newY], {
stroke: 'black',
strokeWidth: 1,
selectable: false,
@ -114,7 +131,7 @@ export function useMode() {
})
// 세로선을 그립니다.
const verticalLine = new fabric.Line([pointer.x, 0, pointer.x, canvasSize.vertical], {
const verticalLine = new fabric.Line([newX, 0, newX, canvasSize.vertical], {
stroke: 'black',
strokeWidth: 1,
selectable: false,
@ -206,8 +223,17 @@ export function useMode() {
const pointer = canvas?.getPointer(e.e)
let newX, newY
if (isGuidePointMode && mode === Mode.EDIT) {
newX = Math.round(pointer.x / 200) * 200
newY = Math.round(pointer.y / 200) * 200
} else {
newX = pointer.x
newY = pointer.y
}
// 마우스 포인터 위치랑 endPoint를 연결하는 line 생성
const line = new fabric.Line([endPoint.left, endPoint.top, pointer.x, pointer.y], {
const line = new fabric.Line([endPoint.left, endPoint.top, newX, newY], {
stroke: 'black',
strokeWidth: 1,
selectable: false,
@ -529,13 +555,18 @@ export function useMode() {
canvas?.renderAll()
},
editMode: (options) => {
const pointer = canvas?.getPointer(options.e)
// const pointer = canvas?.getPointer(options.e)
const mouseLines = canvas?._objects.filter((obj) => obj.name === 'mouseLine')
const pointer = calculateIntersection(mouseLines[0], mouseLines[1])
const circle = new fabric.Circle({
radius: 5,
fill: 'transparent', // 원 안을 비웁니다.
stroke: 'red', // 원 테두리 색상을 검은색으로 설정합니다.
left: pointer.x - 5,
top: pointer.y - 5,
left: pointer.x,
top: pointer.y,
originX: 'center',
originY: 'center',
selectable: false,
@ -544,14 +575,48 @@ export function useMode() {
startPoint.current = circle
pointCount.current = pointCount.current + 1
}
let prevEndPoint
setEndPoint(circle)
setEndPoint((prev) => {
prevEndPoint = prev
return circle
})
historyPoints.current.push(circle)
points.current.push(circle)
canvas?.add(circle)
if (points.current.length === 2) {
if (isGuidePointMode) {
const vector = {
x: points.current[1].left - points.current[0].left,
y: points.current[1].top - points.current[0].top,
}
const slope = Math.abs(vector.y / vector.x) // 기울기 계산
let scaledVector
if (slope >= 1) {
// 기울기가 1 이상이면 x축 방향으로 그림
scaledVector = {
x: 0,
y: pointer.y - prevEndPoint?.top,
}
} else {
// 기울기가 1 미만이면 y축 방향으로 그림
scaledVector = {
x: pointer.x - prevEndPoint?.left,
y: 0,
}
}
const verticalLength = scaledVector.y
const horizontalLength = scaledVector.x
drawCircleAndLine(verticalLength, horizontalLength)
canvas?.renderAll()
return
}
const length = Number(prompt('길이를 입력하세요:'))
// length 값이 숫자가 아닌 경우
@ -561,7 +626,7 @@ export function useMode() {
const lastPoint = historyPoints.current[historyPoints.current.length - 1]
canvas?.remove(lastPoint)
setEndPoint(prevEndPoint)
historyPoints.current.pop()
points.current.pop()
return

10
src/lib/Axios.js
View File

@ -24,32 +24,32 @@ axiosInstance.interceptors.request.use(undefined, (error) => {
// }
})
export const get = (url) =>
export const get = ({ url }) =>
axiosInstance
.get(url)
.then((res) => res.data)
.catch(console.error)
export const post = (url, data) =>
export const post = ({ url, data }) =>
axiosInstance
.post(url, data)
.then((res) => res.data)
.catch(console.error)
export const put = (url, data) =>
export const put = ({ url, data }) =>
axiosInstance
.put(url, data)
.then((res) => res.data)
.catch(console.error)
export const patch = (url, data) =>
export const patch = ({ url, data }) =>
axiosInstance
.patch(url, data)
.then((res) => res.data)
.catch(console.error)
export const del = (url) =>
export const del = ({ url }) =>
axiosInstance
.delete(url)
.then((res) => res.data)

5
src/lib/authActions.js
View File

@ -48,8 +48,9 @@ export async function login(formData) {
throw Error('Wrong Credentials!')
}
session.name = loginUser.USER_ID
session.email = loginUser.SALE_STORE_ID
session.name = loginUser.name
session.userId = loginUser.userId
session.email = loginUser.email
session.isLoggedIn = true
console.log('session:', session)

10
src/store/canvasAtom.js
View File

@ -10,6 +10,16 @@ export const modeState = atom({
default: 'default',
})
export const guidePointModeState = atom({
key: 'guidePointModeState',
default: false,
})
export const guideModeLineState = atom({
key: 'guideLineModeState',
default: false,
})
export const fontSizeState = atom({
key: 'fontSizeState',
default: 16,

2
src/util/session-util.js
View File

@ -7,4 +7,6 @@ export const initCheck = async () => {
if (!session.isLoggedIn) {
redirect('/login')
}
return session
}

10
yarn.lock
View File

@ -6108,16 +6108,16 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2:
resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
uuid@^10.0.0:
version "10.0.0"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
uuid@^8.3.0:
version "8.3.2"
resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
uuid@^9.0.1:
version "9.0.1"
resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz"
integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
w3c-hr-time@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz"