From f5b60749e0faf8dc0ecfd394af3cb1524facd4bf Mon Sep 17 00:00:00 2001 From: yjnoh Date: Fri, 19 Jul 2024 16:47:51 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=EC=86=8C=EC=8A=A4=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useMode.js | 486 +++++++++++-------------------------------- 1 file changed, 119 insertions(+), 367 deletions(-) diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 483ac98f..5a0027db 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -1,8 +1,8 @@ -import { useEffect, useRef, useState } from 'react' +import { useRef, useState } from 'react' import QRect from '@/components/fabric/QRect' import QPolygon from '@/components/fabric/QPolygon' -import { getStartIndex, rearrangeArray, findTopTwoIndexesByDistance, getDirection, getCenterPoint } from '@/util/canvas-util' -import { useRecoilState, useSetRecoilState } from 'recoil' +import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util' +import { useRecoilState } from 'recoil' import { fontSizeState, roofState, sortedPolygonArray, wallState } from '@/store/canvasAtom' import { QLine } from '@/components/fabric/QLine' @@ -935,13 +935,12 @@ export function useMode() { return line }) - const edgeIndexArray = [] - const normalIndexArray = [] + let edgeIndexArray = [] + let normalIndexArray = [] lines.forEach((line, i) => { if (i % 2 === 0) { - line.set('stroke', 'skyblue') - line.set('property', 'edge') + line.set('stroke', 'skyblue').set('property', 'edge') edgeIndexArray.push(i) } else { normalIndexArray.push(i) @@ -1031,6 +1030,21 @@ export function useMode() { let lines = [] let outLines = [] + const dashedCenterLineOpt = { + stroke: 'black', + strokeWidth: 4, + property: 'centerLine', + strokeDashArray: [5, 5], + fontSize: 14, + } + + const centerLineOpt = { + stroke: 'blue', + strokeWidth: 5, + property: 'bigHoriCenter', + fontSize: 14, + } + // 폴리곤의 각 변을 선으로 생성 for (let i = 0; i < polygon.points.length; i++) { const start = polygon.points[i] @@ -1065,8 +1079,7 @@ export function useMode() { if (!(i % 2) == 0) { //홀수일떄 - line.line.set('stroke', 'skyblue') - line.line.set('property', 'egde') + line.line.set('stroke', 'skyblue').set('property', 'egde') let length = Math.abs(line.get('x1') - line.get('x2')) + Math.abs(line.get('y1') - line.get('y2')) if (length > prevHighLength) { @@ -1076,16 +1089,10 @@ export function useMode() { highLineLength = length } - if (prevLowLength === 0) { + if (prevLowLength === 0 || length <= prevLowLength) { //최초에는 없어서 한번 넣음 prevLowIndex = i prevLowLength = length - } - - if (length <= prevLowLength) { - //그뒤부터는 짧은거 대로 넣음 - prevLowIndex = i - prevLowLength = length lowLineLength = length } @@ -1141,12 +1148,7 @@ export function useMode() { vertCenterPoint, firstSubLine.y2 - edge, //다음 선의 높이만큼 가져옴 edge길이를 합함 ], - { - stroke: 'blue', - strokeWidth: 5, - property: 'bigHoriCenter', - fontSize: 14, - }, + centerLineOpt, ) canvas.add(vertCenterLine) @@ -1154,14 +1156,9 @@ export function useMode() { let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2 let horiCenterLine1 = new QLine( [firstLine.x1 - eaves, horiCenterPoint, firstLine.x1 - eaves + firstLine.length / 2 + eaves, horiCenterPoint], - { - stroke: 'black', - strokeWidth: 4, - property: 'centerLine', - strokeDashArray: [5, 5], - fontSize: 14, - }, + dashedCenterLineOpt, ) + canvas.add(horiCenterLine1) let horiCenterLine2 = new QLine( @@ -1171,24 +1168,13 @@ export function useMode() { firstLine.x1 - eaves + firstLine.length / 2 + eaves + firstLine.length / 2 + eaves, horiCenterPoint, ], - { - stroke: 'black', - strokeWidth: 4, - property: 'centerLine', - strokeDashArray: [5, 5], - fontSize: 14, - }, + dashedCenterLineOpt, ) canvas.add(horiCenterLine2) //작은 지붕쪽 높이 길이를 구하는 로직 let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2 - secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1, secondVertCenterPoint, middleSubLine.y2 - edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1, secondVertCenterPoint, middleSubLine.y2 - edge], centerLineOpt) canvas.add(secondVertCenterLine) @@ -1198,37 +1184,22 @@ export function useMode() { let secondHoriCenterLine = new QLine( [secondVertCenterLine.x1, secondHoriCenterPoint, secondVertCenterLine.x1 + secondHoriCenterLength + eaves, secondHoriCenterPoint], - { - stroke: 'black', - strokeWidth: 4, - property: 'centerLine', - strokeDashArray: [5, 5], - fontSize: 14, - }, + dashedCenterLineOpt, ) canvas.add(secondHoriCenterLine) //일반라인 외각선 그리기 normalIndexArray.forEach((index) => { const line = lines[index] + let points = [] if (index === 0) { - let drawline = new QLine([line.x1 - eaves, line.y1 - edge, line.x2 - eaves, line.y2 + edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) - canvas.add(drawline) + points.push(line.x1 - eaves, line.y1 - edge, line.x2 - eaves, line.y2 + edge) } else { let tmpEdge = index === 2 ? edge : 0 - let drawline = new QLine([line.x1 + eaves, line.y1 + tmpEdge, line.x2 + eaves, line.y2 - edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) - canvas.add(drawline) + points.push(line.x1 + eaves, line.y1 + tmpEdge, line.x2 + eaves, line.y2 - edge) } + let drawline = new QLine(points, centerLineOpt) + canvas.add(drawline) }) //케라바 라인 외각선 그리기 @@ -1240,67 +1211,41 @@ export function useMode() { let halfLength = firstOuterLine.length / 2 let drawFirstLine1 = new QLine( [firstOuterLine.x1 - eaves, firstOuterLine.y1 + edge, firstOuterLine.x1 + halfLength, firstOuterLine.y2 + edge], - { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }, + centerLineOpt, ) canvas.add(drawFirstLine1) //첫번째 외곽선 2번 - let drawFirstLine2 = new QLine([drawFirstLine1.x2, firstOuterLine.y1 + edge, firstOuterLine.x2 + eaves, firstOuterLine.y2 + edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawFirstLine2 = new QLine( + [drawFirstLine1.x2, firstOuterLine.y1 + edge, firstOuterLine.x2 + eaves, firstOuterLine.y2 + edge], + centerLineOpt, + ) canvas.add(drawFirstLine2) //중간라인 외각선 - let drawMiddleLine = new QLine([drawFirstLine2.x2, middleOuterLine.y1 - edge, drawFirstLine2.x1, middleOuterLine.y2 - edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawMiddleLine = new QLine([drawFirstLine2.x2, middleOuterLine.y1 - edge, drawFirstLine2.x1, middleOuterLine.y2 - edge], centerLineOpt) canvas.add(drawMiddleLine) //마지막 외각선 halfLength = lastLine.length / 2 - let drawLastLine1 = new QLine([lastOuterLine.x2 + halfLength, lastOuterLine.y1 - edge, lastOuterLine.x2 - eaves, lastOuterLine.y2 - edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawLastLine1 = new QLine( + [lastOuterLine.x2 + halfLength, lastOuterLine.y1 - edge, lastOuterLine.x2 - eaves, lastOuterLine.y2 - edge], + centerLineOpt, + ) canvas.add(drawLastLine1) - let drawLastLine2 = new QLine([drawLastLine1.x1, lastOuterLine.y1 - edge, lastOuterLine.x1 + length + eaves, lastOuterLine.y2 - edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawLastLine2 = new QLine( + [drawLastLine1.x1, lastOuterLine.y1 - edge, lastOuterLine.x1 + length + eaves, lastOuterLine.y2 - edge], + centerLineOpt, + ) canvas.add(drawLastLine2) let drawLastInLine1 = new QLine( [secondVertCenterLine.x1, secondVertCenterLine.y1, secondVertCenterLine.x1 + halfLength + eaves, secondVertCenterLine.y1], - { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }, + centerLineOpt, ) canvas.add(drawLastInLine1) - let drawLastInLine2 = new QLine([secondVertCenterLine.x1, vertCenterLine.y2, vertCenterLine.x2, vertCenterLine.y2], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawLastInLine2 = new QLine([secondVertCenterLine.x1, vertCenterLine.y2, vertCenterLine.x2, vertCenterLine.y2], centerLineOpt) canvas.add(drawLastInLine2) } else { //아래쪽 길게 오른쪽 방향 @@ -1323,12 +1268,7 @@ export function useMode() { vertCenterPoint, firstSubLine.y2 + edge, //다음 선의 높이만큼 가져옴 edge길이를 합함 ], - { - stroke: 'blue', - strokeWidth: 5, - property: 'bigHoriCenter', - fontSize: 14, - }, + centerLineOpt, ) canvas.add(vertCenterLine) @@ -1336,13 +1276,7 @@ export function useMode() { let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2 let horiCenterLine1 = new QLine( [firstLine.x1 - eaves, horiCenterPoint, firstLine.x1 - eaves + firstLine.length / 2 + eaves, horiCenterPoint], - { - stroke: 'black', - strokeWidth: 4, - property: 'centerLine', - strokeDashArray: [5, 5], - fontSize: 14, - }, + dashedCenterLineOpt, ) canvas.add(horiCenterLine1) @@ -1353,24 +1287,13 @@ export function useMode() { firstLine.x1 - eaves + firstLine.length / 2 + eaves + firstLine.length / 2 + eaves, horiCenterPoint, ], - { - stroke: 'black', - strokeWidth: 4, - property: 'centerLine', - strokeDashArray: [5, 5], - fontSize: 14, - }, + dashedCenterLineOpt, ) canvas.add(horiCenterLine2) //작은 지붕쪽 높이 길이를 구하는 로직 let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2 - secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1 - edge, secondVertCenterPoint, middleSubLine.y2], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1 - edge, secondVertCenterPoint, middleSubLine.y2], centerLineOpt) canvas.add(secondVertCenterLine) @@ -1380,37 +1303,22 @@ export function useMode() { let secondHoriCenterLine = new QLine( [secondVertCenterLine.x1 - secondHoriCenterLength - eaves, secondHoriCenterPoint, secondVertCenterLine.x1, secondHoriCenterPoint], - { - stroke: 'black', - strokeWidth: 4, - property: 'centerLine', - strokeDashArray: [5, 5], - fontSize: 14, - }, + dashedCenterLineOpt, ) canvas.add(secondHoriCenterLine) //일반라인 외각선 그리기 normalIndexArray.forEach((index) => { const line = lines[index] + let points = [] if (index === 0 || index === 4) { let tmpEdge = index === 4 ? 0 : edge - let drawline = new QLine([line.x1 - eaves, line.y1 - edge, line.x2 - eaves, line.y2 + tmpEdge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) - canvas.add(drawline) + points = [line.x1 - eaves, line.y1 - edge, line.x2 - eaves, line.y2 + tmpEdge] } else { - let drawline = new QLine([line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) - canvas.add(drawline) + points = [line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - edge] } + let drawline = new QLine(points, centerLineOpt) + canvas.add(drawline) }) //케라바 라인 외각선 그리기 @@ -1422,31 +1330,19 @@ export function useMode() { let halfLength = firstOuterLine.length / 2 let drawFirstLine1 = new QLine( [firstOuterLine.x1 - eaves, firstOuterLine.y1 + edge, firstOuterLine.x1 + halfLength, firstOuterLine.y2 + edge], - { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }, + centerLineOpt, ) canvas.add(drawFirstLine1) //첫번째 외곽선 2번 - let drawFirstLine2 = new QLine([drawFirstLine1.x2, firstOuterLine.y1 + edge, firstOuterLine.x2 + eaves, firstOuterLine.y2 + edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawFirstLine2 = new QLine( + [drawFirstLine1.x2, firstOuterLine.y1 + edge, firstOuterLine.x2 + eaves, firstOuterLine.y2 + edge], + centerLineOpt, + ) canvas.add(drawFirstLine2) //중간라인 외각선 - let drawMiddleLine = new QLine([drawFirstLine1.x1, middleOuterLine.y1 - edge, drawFirstLine1.x2, middleOuterLine.y2 - edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawMiddleLine = new QLine([drawFirstLine1.x1, middleOuterLine.y1 - edge, drawFirstLine1.x2, middleOuterLine.y2 - edge], centerLineOpt) canvas.add(drawMiddleLine) //마지막 외각선 @@ -1454,39 +1350,25 @@ export function useMode() { console.log(lastOuterLine) - let drawLastLine1 = new QLine([lastOuterLine.x2 - eaves, lastOuterLine.y1 - edge, lastOuterLine.x1 - halfLength, lastOuterLine.y2 - edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawLastLine1 = new QLine( + [lastOuterLine.x2 - eaves, lastOuterLine.y1 - edge, lastOuterLine.x1 - halfLength, lastOuterLine.y2 - edge], + centerLineOpt, + ) canvas.add(drawLastLine1) - let drawLastLine2 = new QLine([drawLastLine1.x1, lastOuterLine.y1 - edge, lastOuterLine.x1 + length + eaves, lastOuterLine.y2 - edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawLastLine2 = new QLine( + [drawLastLine1.x1, lastOuterLine.y1 - edge, lastOuterLine.x1 + length + eaves, lastOuterLine.y2 - edge], + centerLineOpt, + ) canvas.add(drawLastLine2) let drawLastInLine1 = new QLine( [secondVertCenterLine.x1, secondVertCenterLine.y2, secondVertCenterLine.x1 - halfLength - eaves, secondVertCenterLine.y2], - { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }, + centerLineOpt, ) canvas.add(drawLastInLine1) - let drawLastInLine2 = new QLine([secondVertCenterLine.x2, vertCenterLine.y1, vertCenterLine.x1, vertCenterLine.y1], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawLastInLine2 = new QLine([secondVertCenterLine.x2, vertCenterLine.y1, vertCenterLine.x1, vertCenterLine.y1], centerLineOpt) canvas.add(drawLastInLine2) } } else { @@ -1510,12 +1392,7 @@ export function useMode() { vertCenterPoint, firstSubLine.y1 + edge, //다음 선의 높이만큼 가져옴 edge길이를 합함 ], - { - stroke: 'blue', - strokeWidth: 5, - property: 'bigHoriCenter', - fontSize: 14, - }, + centerLineOpt, ) canvas.add(vertCenterLine) @@ -1523,13 +1400,7 @@ export function useMode() { let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2 let horiCenterLine1 = new QLine( [firstLine.x2 - eaves, horiCenterPoint, firstLine.x2 - eaves + firstLine.length / 2 + eaves, horiCenterPoint], - { - stroke: 'black', - strokeWidth: 4, - property: 'centerLine', - strokeDashArray: [5, 5], - fontSize: 14, - }, + dashedCenterLineOpt, ) canvas.add(horiCenterLine1) @@ -1540,64 +1411,37 @@ export function useMode() { firstLine.x2 - eaves + firstLine.length / 2 + eaves + firstLine.length / 2 + eaves, horiCenterPoint, ], - { - stroke: 'black', - strokeWidth: 4, - property: 'centerLine', - strokeDashArray: [5, 5], - fontSize: 14, - }, + dashedCenterLineOpt, ) canvas.add(horiCenterLine2) //작은 지붕쪽 높이 길이를 구하는 로직 let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2 - secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1 + edge, secondVertCenterPoint, middleSubLine.y2], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) - + secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1 + edge, secondVertCenterPoint, middleSubLine.y2], centerLineOpt) canvas.add(secondVertCenterLine) //작은 지붕쪽 너비 길이를 구한는 로직 let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2 let secondHoriCenterPoint = (secondVertCenterLine.y1 + secondVertCenterLine.y2) / 2 - let secondHoriCenterLine = new QLine( [secondVertCenterLine.x1 + secondHoriCenterLength + eaves, secondHoriCenterPoint, secondVertCenterLine.x1, secondHoriCenterPoint], - { - stroke: 'black', - strokeWidth: 4, - property: 'centerLine', - strokeDashArray: [5, 5], - fontSize: 14, - }, + dashedCenterLineOpt, ) canvas.add(secondHoriCenterLine) //일반라인 외각선 그리기 normalIndexArray.forEach((index) => { const line = lines[index] + let points = [] if (index === 0) { - let drawline = new QLine([line.x1 - eaves, line.y1 - edge, line.x2 - eaves, line.y2 + edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) - canvas.add(drawline) + points = [line.x1 - eaves, line.y1 - edge, line.x2 - eaves, line.y2 + edge] } else { let tmpEdge = index === 2 ? 0 : edge - let drawline = new QLine([line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - tmpEdge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) - canvas.add(drawline) + points = [line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - tmpEdge] } + + let drawline = new QLine(points, centerLineOpt) + canvas.add(drawline) }) //케라바 라인 외각선 그리기 @@ -1609,31 +1453,19 @@ export function useMode() { let halfLength = firstOuterLine.length / 2 let drawFirstLine1 = new QLine( [firstOuterLine.x2 - eaves, firstOuterLine.y1 - edge, firstOuterLine.x2 + halfLength, firstOuterLine.y2 - edge], - { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }, + centerLineOpt, ) canvas.add(drawFirstLine1) //첫번째 외곽선 2번 - let drawFirstLine2 = new QLine([drawFirstLine1.x2, drawFirstLine1.y1, drawFirstLine1.x2 + halfLength + eaves, drawFirstLine1.y2], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawFirstLine2 = new QLine( + [drawFirstLine1.x2, drawFirstLine1.y1, drawFirstLine1.x2 + halfLength + eaves, drawFirstLine1.y2], + centerLineOpt, + ) canvas.add(drawFirstLine2) //중간라인 외각선 - let drawMiddleLine = new QLine([drawFirstLine2.x1, middleOuterLine.y1 + edge, drawFirstLine2.x2, middleOuterLine.y2 + edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawMiddleLine = new QLine([drawFirstLine2.x1, middleOuterLine.y1 + edge, drawFirstLine2.x2, middleOuterLine.y2 + edge], centerLineOpt) canvas.add(drawMiddleLine) //마지막 외각선 @@ -1641,39 +1473,22 @@ export function useMode() { console.log(lastOuterLine) - let drawLastLine1 = new QLine([lastOuterLine.x1 - eaves, lastOuterLine.y1 + edge, lastOuterLine.x1 + halfLength, lastOuterLine.y2 + edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawLastLine1 = new QLine( + [lastOuterLine.x1 - eaves, lastOuterLine.y1 + edge, lastOuterLine.x1 + halfLength, lastOuterLine.y2 + edge], + centerLineOpt, + ) canvas.add(drawLastLine1) - let drawLastLine2 = new QLine([drawLastLine1.x2, drawLastLine1.y1, drawLastLine1.x2 + halfLength + eaves, drawLastLine1.y1], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawLastLine2 = new QLine([drawLastLine1.x2, drawLastLine1.y1, drawLastLine1.x2 + halfLength + eaves, drawLastLine1.y1], centerLineOpt) canvas.add(drawLastLine2) let drawLastInLine1 = new QLine( [secondVertCenterLine.x1, secondVertCenterLine.y2, secondVertCenterLine.x1 + halfLength + eaves, secondVertCenterLine.y2], - { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }, + centerLineOpt, ) canvas.add(drawLastInLine1) - let drawLastInLine2 = new QLine([vertCenterLine.x1, vertCenterLine.y2, secondVertCenterLine.x2, vertCenterLine.y2], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawLastInLine2 = new QLine([vertCenterLine.x1, vertCenterLine.y2, secondVertCenterLine.x2, vertCenterLine.y2], centerLineOpt) canvas.add(drawLastInLine2) } else { //윗쪽 길게 오른쪽 방향 @@ -1695,12 +1510,7 @@ export function useMode() { vertCenterPoint, firstSubLine.y2 + edge, //다음 선의 높이만큼 가져옴 edge길이를 합함 ], - { - stroke: 'blue', - strokeWidth: 5, - property: 'bigHoriCenter', - fontSize: 14, - }, + centerLineOpt, ) canvas.add(vertCenterLine) @@ -1708,13 +1518,7 @@ export function useMode() { let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2 let horiCenterLine1 = new QLine( [firstLine.x2 - eaves, horiCenterPoint, firstLine.x2 - eaves + firstLine.length / 2 + eaves, horiCenterPoint], - { - stroke: 'black', - strokeWidth: 4, - property: 'centerLine', - strokeDashArray: [5, 5], - fontSize: 14, - }, + dashedCenterLineOpt, ) canvas.add(horiCenterLine1) @@ -1725,13 +1529,7 @@ export function useMode() { firstLine.x2 - eaves + firstLine.length / 2 + eaves + firstLine.length / 2 + eaves, horiCenterPoint, ], - { - stroke: 'black', - strokeWidth: 4, - property: 'centerLine', - strokeDashArray: [5, 5], - fontSize: 14, - }, + dashedCenterLineOpt, ) canvas.add(horiCenterLine2) @@ -1752,13 +1550,7 @@ export function useMode() { let secondHoriCenterLine = new QLine( [secondVertCenterLine.x1, secondHoriCenterPoint, secondVertCenterLine.x1 - secondHoriCenterLength - eaves, secondHoriCenterPoint], - { - stroke: 'black', - strokeWidth: 4, - property: 'centerLine', - strokeDashArray: [5, 5], - fontSize: 14, - }, + dashedCenterLineOpt, ) canvas.add(secondHoriCenterLine) @@ -1767,20 +1559,10 @@ export function useMode() { const line = lines[index] if (index === 0 || index === 2) { let tmpEdge = index === 2 ? 0 : edge - let drawline = new QLine([line.x1 - eaves, line.y1 - tmpEdge, line.x2 - eaves, line.y2 + edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawline = new QLine([line.x1 - eaves, line.y1 - tmpEdge, line.x2 - eaves, line.y2 + edge], centerLineOpt) canvas.add(drawline) } else { - let drawline = new QLine([line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawline = new QLine([line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - edge], centerLineOpt) canvas.add(drawline) } }) @@ -1794,66 +1576,36 @@ export function useMode() { let halfLength = firstOuterLine.length / 2 let drawFirstLine1 = new QLine( [firstOuterLine.x2 - eaves, firstOuterLine.y1 - edge, firstOuterLine.x2 + halfLength, firstOuterLine.y2 - edge], - { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }, + centerLineOpt, ) canvas.add(drawFirstLine1) //첫번째 외곽선 2번 - let drawFirstLine2 = new QLine([drawFirstLine1.x2, drawFirstLine1.y1, drawFirstLine1.x2 + halfLength + eaves, drawFirstLine1.y2], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawFirstLine2 = new QLine( + [drawFirstLine1.x2, drawFirstLine1.y1, drawFirstLine1.x2 + halfLength + eaves, drawFirstLine1.y2], + centerLineOpt, + ) canvas.add(drawFirstLine2) //중간라인 외각선 - let drawMiddleLine = new QLine([drawFirstLine1.x1, middleOuterLine.y1 + edge, drawFirstLine1.x2, middleOuterLine.y2 + edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawMiddleLine = new QLine([drawFirstLine1.x1, middleOuterLine.y1 + edge, drawFirstLine1.x2, middleOuterLine.y2 + edge], centerLineOpt) canvas.add(drawMiddleLine) //마지막 외각선 halfLength = lastLine.length / 2 - - let drawLastLine1 = new QLine([lastOuterLine.x1 - eaves, lastOuterLine.y1 + edge, lastOuterLine.x1 + halfLength, lastOuterLine.y2 + edge], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawLastLine1 = new QLine( + [lastOuterLine.x1 - eaves, lastOuterLine.y1 + edge, lastOuterLine.x1 + halfLength, lastOuterLine.y2 + edge], + centerLineOpt, + ) canvas.add(drawLastLine1) - let drawLastLine2 = new QLine([drawLastLine1.x2, drawLastLine1.y1, drawLastLine1.x2 + halfLength + eaves, drawLastLine1.y1], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawLastLine2 = new QLine([drawLastLine1.x2, drawLastLine1.y1, drawLastLine1.x2 + halfLength + eaves, drawLastLine1.y1], centerLineOpt) canvas.add(drawLastLine2) - let drawLastInLine1 = new QLine([vertCenterLine.x2, vertCenterLine.y2, secondVertCenterLine.x1, vertCenterLine.y2], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawLastInLine1 = new QLine([vertCenterLine.x2, vertCenterLine.y2, secondVertCenterLine.x1, vertCenterLine.y2], centerLineOpt) canvas.add(drawLastInLine1) - let drawLastInLine2 = new QLine([secondLine.x2 - eaves, secondLine.y1, drawLastLine1.x2, secondLine.y1], { - stroke: 'blue', - strokeWidth: 4, - property: 'centerLine', - fontSize: 14, - }) + let drawLastInLine2 = new QLine([secondLine.x2 - eaves, secondLine.y1, drawLastLine1.x2, secondLine.y1], centerLineOpt) canvas.add(drawLastInLine2) } } From 9e075deb91a9bab10871620cf339177d6314a055 Mon Sep 17 00:00:00 2001 From: yjnoh Date: Fri, 19 Jul 2024 18:02:42 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=EB=A9=B4=20=ED=8F=B4=EB=A6=AC=EA=B3=A4=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useMode.js | 55 ++++++++++++++++++++++++++++++----------- src/store/canvasAtom.js | 6 +++++ src/util/canvas-util.js | 6 ++--- 3 files changed, 50 insertions(+), 17 deletions(-) diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 73cc50e7..721162c5 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -1,9 +1,15 @@ import { useRef, useState } from 'react' import QRect from '@/components/fabric/QRect' import QPolygon from '@/components/fabric/QPolygon' -import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util' +import { + findTopTwoIndexesByDistance, + getCenterPoint, + getDirection, + getStartIndex, + rearrangeArray, +} from '@/util/canvas-util' import { useRecoilState } from 'recoil' -import { fontSizeState, roofState, sortedPolygonArray, wallState } from '@/store/canvasAtom' +import { fontSizeState, roofState, sortedPolygonArray, templatePolygonArrayState, wallState } from '@/store/canvasAtom' import { QLine } from '@/components/fabric/QLine' export const Mode = { @@ -29,6 +35,7 @@ export function useMode() { const [sortedArray, setSortedArray] = useRecoilState(sortedPolygonArray) const [roof, setRoof] = useRecoilState(roofState) const [wall, setWall] = useRecoilState(wallState) + const [templatePolygonState, setTemplatePolygonState] = useRecoilState(templatePolygonArrayState) const addEvent = (mode) => { switch (mode) { @@ -68,7 +75,7 @@ export function useMode() { } const editMode = () => { - canvas?.on('mouse:down', function (options) { + canvas?.on('mouse:down', function(options) { const pointer = canvas?.getPointer(options.e) const circle = new fabric.Circle({ radius: 1, @@ -219,7 +226,7 @@ export function useMode() { } const textboxMode = () => { - canvas?.on('mouse:down', function (options) { + canvas?.on('mouse:down', function(options) { if (canvas?.getActiveObject()?.type === 'textbox') return const pointer = canvas?.getPointer(options.e) @@ -234,14 +241,14 @@ export function useMode() { canvas?.setActiveObject(textbox) // 생성된 텍스트박스를 활성 객체로 설정합니다. canvas?.renderAll() // textbox가 active가 풀린 경우 editing mode로 변경 - textbox?.on('editing:exited', function () { + textbox?.on('editing:exited', function() { changeMode(canvas, Mode.EDIT) }) }) } const drawLineMode = () => { - canvas?.on('mouse:down', function (options) { + canvas?.on('mouse:down', function(options) { const pointer = canvas?.getPointer(options.e) const line = new QLine( @@ -262,7 +269,7 @@ export function useMode() { const drawRectMode = () => { let rect, isDown, origX, origY - canvas.on('mouse:down', function (o) { + canvas.on('mouse:down', function(o) { isDown = true const pointer = canvas.getPointer(o.e) origX = pointer.x @@ -282,7 +289,7 @@ export function useMode() { canvas.add(rect) }) - canvas.on('mouse:move', function (o) { + canvas.on('mouse:move', function(o) { if (!isDown) return const pointer = canvas.getPointer(o.e) if (origX > pointer.x) { @@ -296,7 +303,7 @@ export function useMode() { rect.set({ height: Math.abs(origY - pointer.y) }) }) - canvas.on('mouse:up', function (o) { + canvas.on('mouse:up', function(o) { const pointer = canvas.getPointer(o.e) const qRect = new QRect({ left: origX, @@ -1018,6 +1025,8 @@ export function useMode() { let lines = [] let outLines = [] + let halfLength = 0 + const dashedCenterLineOpt = { stroke: 'black', strokeWidth: 4, @@ -1119,6 +1128,7 @@ export function useMode() { let lastLine = lines[5] let vertCenterLine let secondVertCenterLine + let templatePolygonObj = {} if (prevHighIndex === 1) { if (horizontalDirection === 'left') { @@ -1139,6 +1149,7 @@ export function useMode() { centerLineOpt, ) canvas.add(vertCenterLine) + outLines.push(vertCenterLine) //긴면 가로선 그리기 let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2 @@ -1160,11 +1171,12 @@ export function useMode() { ) canvas.add(horiCenterLine2) + //작은 지붕쪽 높이 길이를 구하는 로직 let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2 secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1, secondVertCenterPoint, middleSubLine.y2 - edge], centerLineOpt) - canvas.add(secondVertCenterLine) + outLines.push(secondVertCenterLine) //작은 지붕쪽 너비 길이를 구한는 로직 let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2 @@ -1188,6 +1200,7 @@ export function useMode() { } let drawline = new QLine(points, centerLineOpt) canvas.add(drawline) + outLines.push(drawline) }) //케라바 라인 외각선 그리기 @@ -1196,22 +1209,26 @@ export function useMode() { const lastOuterLine = lines[5] //첫번째 외곽선 1번 - let halfLength = firstOuterLine.length / 2 + halfLength = firstOuterLine.length / 2 let drawFirstLine1 = new QLine( [firstOuterLine.x1 - eaves, firstOuterLine.y1 + edge, firstOuterLine.x1 + halfLength, firstOuterLine.y2 + edge], centerLineOpt, ) canvas.add(drawFirstLine1) + outLines.push(drawFirstLine1) + //첫번째 외곽선 2번 let drawFirstLine2 = new QLine( [drawFirstLine1.x2, firstOuterLine.y1 + edge, firstOuterLine.x2 + eaves, firstOuterLine.y2 + edge], centerLineOpt, ) canvas.add(drawFirstLine2) + outLines.push(drawFirstLine2) //중간라인 외각선 let drawMiddleLine = new QLine([drawFirstLine2.x2, middleOuterLine.y1 - edge, drawFirstLine2.x1, middleOuterLine.y2 - edge], centerLineOpt) canvas.add(drawMiddleLine) + outLines.push(drawMiddleLine) //마지막 외각선 halfLength = lastLine.length / 2 @@ -1220,21 +1237,31 @@ export function useMode() { centerLineOpt, ) canvas.add(drawLastLine1) + outLines.push(drawLastLine1) let drawLastLine2 = new QLine( [drawLastLine1.x1, lastOuterLine.y1 - edge, lastOuterLine.x1 + length + eaves, lastOuterLine.y2 - edge], centerLineOpt, ) canvas.add(drawLastLine2) + outLines.push(drawLastLine2) let drawLastInLine1 = new QLine( [secondVertCenterLine.x1, secondVertCenterLine.y1, secondVertCenterLine.x1 + halfLength + eaves, secondVertCenterLine.y1], centerLineOpt, ) canvas.add(drawLastInLine1) + outLines.push(drawLastInLine1) let drawLastInLine2 = new QLine([secondVertCenterLine.x1, vertCenterLine.y2, vertCenterLine.x2, vertCenterLine.y2], centerLineOpt) canvas.add(drawLastInLine2) + outLines.push(drawLastInLine2) + + const bigPolygon = [ + { x1: outLines[2].x1, y1: outLines[2].y1 }, + ] + + } else { //아래쪽 길게 오른쪽 방향 //배열 순서대로 뒤에꺼를 찾아서 계산한다 @@ -1315,7 +1342,7 @@ export function useMode() { const lastOuterLine = lines[3] //첫번째 외곽선 1번 - let halfLength = firstOuterLine.length / 2 + halfLength = firstOuterLine.length / 2 let drawFirstLine1 = new QLine( [firstOuterLine.x1 - eaves, firstOuterLine.y1 + edge, firstOuterLine.x1 + halfLength, firstOuterLine.y2 + edge], centerLineOpt, @@ -1438,7 +1465,7 @@ export function useMode() { const lastOuterLine = lines[1] //첫번째 외곽선 1번 - let halfLength = firstOuterLine.length / 2 + halfLength = firstOuterLine.length / 2 let drawFirstLine1 = new QLine( [firstOuterLine.x2 - eaves, firstOuterLine.y1 - edge, firstOuterLine.x2 + halfLength, firstOuterLine.y2 - edge], centerLineOpt, @@ -1561,7 +1588,7 @@ export function useMode() { const lastOuterLine = lines[3] //첫번째 외곽선 1번 - let halfLength = firstOuterLine.length / 2 + halfLength = firstOuterLine.length / 2 let drawFirstLine1 = new QLine( [firstOuterLine.x2 - eaves, firstOuterLine.y1 - edge, firstOuterLine.x2 + halfLength, firstOuterLine.y2 - edge], centerLineOpt, diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index 7d1d63fc..2f6f7ac5 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -35,3 +35,9 @@ export const wallState = atom({ default: {}, dangerouslyAllowMutability: true, }) + +export const templatePolygonArrayState = atom({ + key: 'templatePolygon', + default: {}, //object ex) big, mid, sht = {point : [{x1, y1}, {x2, y1}], direction : left or right or top or bottom} +}) + diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js index 2b4f10a3..fc76c9e1 100644 --- a/src/util/canvas-util.js +++ b/src/util/canvas-util.js @@ -1,4 +1,4 @@ -import { atan2, chain, derivative, e, evaluate, log, pi, pow, round, sqrt, intersect } from 'mathjs' +import { intersect } from 'mathjs' /** * Collection of function to use on canvas @@ -38,7 +38,7 @@ export function actionHandler(eventData, transform, x, y) { // define a function that can keep the polygon in the same position when we change its width/height/top/left export function anchorWrapper(anchorIndex, fn) { - return function (eventData, transform, x, y) { + return function(eventData, transform, x, y) { let fabricObject = transform.target let originX = fabricObject?.points[anchorIndex].x - fabricObject.pathOffset.x let originY = fabricObject.points[anchorIndex].y - fabricObject.pathOffset.y @@ -447,4 +447,4 @@ export function calculateDistance(point, line) { const numerator = Math.abs((y2 - y1) * x0 - (x2 - x1) * y0 + x2 * y1 - y2 * x1) const denominator = Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2)) return numerator / denominator -} +} \ No newline at end of file From e5de66bc94ea65a9767ea554c71868829b94b576 Mon Sep 17 00:00:00 2001 From: yjnoh Date: Sat, 20 Jul 2024 15:20:41 +0900 Subject: [PATCH 3/5] =?UTF-8?q?6=EA=B0=81=ED=98=95=20polygon=20make=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useMode.js | 47 ++++++++++++++++++++++++++++---------------- 1 file changed, 30 insertions(+), 17 deletions(-) diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 721162c5..26d9a050 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -1,13 +1,7 @@ import { useRef, useState } from 'react' import QRect from '@/components/fabric/QRect' import QPolygon from '@/components/fabric/QPolygon' -import { - findTopTwoIndexesByDistance, - getCenterPoint, - getDirection, - getStartIndex, - rearrangeArray, -} from '@/util/canvas-util' +import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util' import { useRecoilState } from 'recoil' import { fontSizeState, roofState, sortedPolygonArray, templatePolygonArrayState, wallState } from '@/store/canvasAtom' import { QLine } from '@/components/fabric/QLine' @@ -75,7 +69,7 @@ export function useMode() { } const editMode = () => { - canvas?.on('mouse:down', function(options) { + canvas?.on('mouse:down', function (options) { const pointer = canvas?.getPointer(options.e) const circle = new fabric.Circle({ radius: 1, @@ -226,7 +220,7 @@ export function useMode() { } const textboxMode = () => { - canvas?.on('mouse:down', function(options) { + canvas?.on('mouse:down', function (options) { if (canvas?.getActiveObject()?.type === 'textbox') return const pointer = canvas?.getPointer(options.e) @@ -241,14 +235,14 @@ export function useMode() { canvas?.setActiveObject(textbox) // 생성된 텍스트박스를 활성 객체로 설정합니다. canvas?.renderAll() // textbox가 active가 풀린 경우 editing mode로 변경 - textbox?.on('editing:exited', function() { + textbox?.on('editing:exited', function () { changeMode(canvas, Mode.EDIT) }) }) } const drawLineMode = () => { - canvas?.on('mouse:down', function(options) { + canvas?.on('mouse:down', function (options) { const pointer = canvas?.getPointer(options.e) const line = new QLine( @@ -269,7 +263,7 @@ export function useMode() { const drawRectMode = () => { let rect, isDown, origX, origY - canvas.on('mouse:down', function(o) { + canvas.on('mouse:down', function (o) { isDown = true const pointer = canvas.getPointer(o.e) origX = pointer.x @@ -289,7 +283,7 @@ export function useMode() { canvas.add(rect) }) - canvas.on('mouse:move', function(o) { + canvas.on('mouse:move', function (o) { if (!isDown) return const pointer = canvas.getPointer(o.e) if (origX > pointer.x) { @@ -303,7 +297,7 @@ export function useMode() { rect.set({ height: Math.abs(origY - pointer.y) }) }) - canvas.on('mouse:up', function(o) { + canvas.on('mouse:up', function (o) { const pointer = canvas.getPointer(o.e) const qRect = new QRect({ left: origX, @@ -1171,7 +1165,6 @@ export function useMode() { ) canvas.add(horiCenterLine2) - //작은 지붕쪽 높이 길이를 구하는 로직 let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2 secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1, secondVertCenterPoint, middleSubLine.y2 - edge], centerLineOpt) @@ -1257,11 +1250,31 @@ export function useMode() { canvas.add(drawLastInLine2) outLines.push(drawLastInLine2) - const bigPolygon = [ - { x1: outLines[2].x1, y1: outLines[2].y1 }, + console.log('outLines', outLines) + + const bigPolygonArray = [ + { x: outLines[2].x1, y: outLines[2].y1 }, + { x: outLines[5].x1, y: outLines[5].y1 }, + { x: outLines[0].x1, y: outLines[0].y1 }, + { x: outLines[0].x2, y: outLines[0].y2 }, + { x: outLines[11].x1, y: outLines[11].y1 }, + { x: outLines[1].x2, y: outLines[1].y2 }, ] + // 점 배열을 사용하여 새로운 다각형 객체를 생성합니다. + const bigPolygon = new QPolygon( + bigPolygonArray, + { + stroke: 'black', + fill: 'red', + viewLengthText: true, + selectable: true, + fontSize: fontSize, + }, + canvas, + ) + canvas.add(bigPolygon) } else { //아래쪽 길게 오른쪽 방향 //배열 순서대로 뒤에꺼를 찾아서 계산한다 From 4c1fb002c12a63b522ad666b7b43ec9d46746bcd Mon Sep 17 00:00:00 2001 From: nalpari Date: Sun, 21 Jul 2024 23:20:34 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=EA=B2=A8=EC=9A=B0=20=EC=84=B1=EA=B3=B5(?= =?UTF-8?q?=ED=9A=A8=EC=A4=80=EC=A7=B1=ED=95=9C=ED=85=8C=20=ED=98=BC?= =?UTF-8?q?=EB=82=A0=EB=BB=94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 아오 술땡겨 --- .env | 12 ++++ package.json | 3 + prisma/schema.prisma | 19 +++++++ src/components/Roof2.jsx | 42 +++++++++++++- src/lib/canvas.js | 38 +++++++++++++ src/lib/prisma.js | 14 +++++ src/store/canvasAtom.js | 5 ++ yarn.lock | 118 ++++++++++++++++++++++++++++++++++++++- 8 files changed, 249 insertions(+), 2 deletions(-) create mode 100644 .env create mode 100644 prisma/schema.prisma create mode 100644 src/lib/canvas.js create mode 100644 src/lib/prisma.js diff --git a/.env b/.env new file mode 100644 index 00000000..50ab0d74 --- /dev/null +++ b/.env @@ -0,0 +1,12 @@ +# Environment variables declared in this file are automatically made available to Prisma. +# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema + +# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB. +# See the documentation for all the connection string options: https://pris.ly/d/connection-strings + +# DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public" +# DATABASE_URL="mongodb://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/sample_mflix?retryWrites=true&w=majority" +#DATABASE_URL = "mongodb%2Bsrv%3A%2F%2Fyoo32767%3AGuCtswjLGqUaNL0G%40cluster0.vsdtcnb.mongodb.net%2F%3FretryWrites%3Dtrue%26w%3Dmajority%26appName%3DCluster0" +# DATABASE_URL = "mongodb+srv://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/Cluster0?retryWrites=true&w=majority" +# DATABASE_URL="mongodb://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/sample_mflix?retryWrites=true&w=majority" +DATABASE_URL="mongodb+srv://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/mytest" \ No newline at end of file diff --git a/package.json b/package.json index f7fa513c..9c745fdf 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,11 @@ }, "dependencies": { "@nextui-org/react": "^2.4.2", + "@prisma/client": "^5.17.0", "fabric": "^5.3.0", "framer-motion": "^11.2.13", "mathjs": "^13.0.2", + "mongodb": "^6.8.0", "next": "14.2.3", "react": "^18", "react-dom": "^18", @@ -21,6 +23,7 @@ }, "devDependencies": { "postcss": "^8", + "prisma": "^5.17.0", "tailwindcss": "^3.4.1" } } diff --git a/prisma/schema.prisma b/prisma/schema.prisma new file mode 100644 index 00000000..327b757a --- /dev/null +++ b/prisma/schema.prisma @@ -0,0 +1,19 @@ +generator client { + provider = "prisma-client-js" +} + +datasource db { + provider = "mongodb" + url = env("DATABASE_URL") +} + +model test { + id String @id @default(auto()) @map("_id") @db.ObjectId + content String +} + +model canvas { + id String @id @default(auto()) @map("_id") @db.ObjectId + loginId String + canvas Json +} \ No newline at end of file diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index 108303b3..67462c3a 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -7,8 +7,9 @@ import QPolygon from '@/components/fabric/QPolygon' import RangeSlider from './ui/RangeSlider' import { useRecoilState, useRecoilValue } from 'recoil' -import { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom' +import { canvasAtom, canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom' import { QLine } from '@/components/fabric/QLine' +import { getTests, getCanvasState, insertCanvasState } from '@/lib/canvas' export default function Roof2() { const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage } = useCanvas('canvas') @@ -32,6 +33,8 @@ export default function Roof2() { const { mode, changeMode, handleClear, fillCellInPolygon, zoomIn, zoomOut, zoom, togglePolygonLine, handleOuterlinesTest2, applyTemplateB } = useMode() + // const [canvasState, setCanvasState] = useRecoilState(canvasAtom) + useEffect(() => { if (!canvas) { return @@ -236,6 +239,37 @@ export default function Roof2() { const lines = togglePolygonLine(polygon) } + /** + * canvas 내용 저장하기 + */ + const handleSaveCanvas = async () => { + // const jsonStr = JSON.stringify(canvas?.toDatalessJSON(['type', 'fontSize'])) + const jsonObj = canvas?.toDatalessJSON(['type', 'fontSize']) + console.log(jsonObj) + + const param = { + loginId: 'test', + canvas: jsonObj, + } + console.log(param) + + await insertCanvasState(param) + handleClear() + } + + /** + * canvas 내용 불러오기 + */ + const handleLoadCanvas = async () => { + const tests = await getTests() + console.log(tests) + const canvasStates = await getCanvasState() + console.log(canvasStates) + } + + /** + * 컨트롤러 보이기/숨기기 + */ const handleShowController = () => { setShowControl(!showControl) } @@ -333,6 +367,12 @@ export default function Roof2() { + + diff --git a/src/lib/canvas.js b/src/lib/canvas.js new file mode 100644 index 00000000..c2dd207f --- /dev/null +++ b/src/lib/canvas.js @@ -0,0 +1,38 @@ +'use server' + +import { PrismaClient } from '@prisma/client' + +const prisma = new PrismaClient() + +export const getTests = () => { + return prisma.test.findMany() +} + +export const insertTest = async (param) => { + return prisma.test.create({ + data: { + content: param, + }, + }) +} + +export const getCanvasStateAll = () => { + return prisma.canvas.findMany() +} + +export const getCanvasState = () => { + return prisma.canvas.findFirst({ + where: { + loginId: 'test', + }, + orderBy: { + id: 'desc', + }, + }) +} + +export const insertCanvasState = (param) => { + return prisma.canvas.create({ + data: param, + }) +} diff --git a/src/lib/prisma.js b/src/lib/prisma.js new file mode 100644 index 00000000..aa946098 --- /dev/null +++ b/src/lib/prisma.js @@ -0,0 +1,14 @@ +import { PrismaClient } from '@prisma/client' + +let prisma + +if (process.env.NODE_ENV === 'production') { + prisma = new PrismaClient() +} else { + if (!global.prisma) { + global.prisma = new PrismaClient() + } + prisma = global.prisma +} + +export default prisma diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index 2f6f7ac5..9682d277 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -41,3 +41,8 @@ export const templatePolygonArrayState = atom({ default: {}, //object ex) big, mid, sht = {point : [{x1, y1}, {x2, y1}], direction : left or right or top or bottom} }) +export const canvasAtom = atom({ + key: 'canvasState', + default: [], + dangerouslyAllowMutability: true, +}) diff --git a/yarn.lock b/yarn.lock index bd27ddfe..94bdd351 100644 --- a/yarn.lock +++ b/yarn.lock @@ -148,6 +148,13 @@ semver "^7.3.5" tar "^6.1.11" +"@mongodb-js/saslprep@^1.1.5": + version "1.1.8" + resolved "https://registry.yarnpkg.com/@mongodb-js/saslprep/-/saslprep-1.1.8.tgz#d39744540be8800d17749990b0da95b4271840d1" + integrity sha512-qKwC/M/nNNaKUBMQ0nuzm47b7ZYWQHN3pcXq4IIcoSBc2hOIrflAxJduIvvqmhoz3gR2TacTAs8vlsCVPkiEdQ== + dependencies: + sparse-bitfield "^3.0.3" + "@next/env@14.2.3": version "14.2.3" resolved "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz" @@ -1143,6 +1150,47 @@ resolved "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz" integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg== +"@prisma/client@^5.17.0": + version "5.17.0" + resolved "https://registry.yarnpkg.com/@prisma/client/-/client-5.17.0.tgz#9079947bd749689c2dabfb9ecc70a24ebefb1f43" + integrity sha512-N2tnyKayT0Zf7mHjwEyE8iG7FwTmXDHFZ1GnNhQp0pJUObsuel4ZZ1XwfuAYkq5mRIiC/Kot0kt0tGCfLJ70Jw== + +"@prisma/debug@5.17.0": + version "5.17.0" + resolved "https://registry.yarnpkg.com/@prisma/debug/-/debug-5.17.0.tgz#a765105848993984535b6066f8ebc6e6ead26533" + integrity sha512-l7+AteR3P8FXiYyo496zkuoiJ5r9jLQEdUuxIxNCN1ud8rdbH3GTxm+f+dCyaSv9l9WY+29L9czaVRXz9mULfg== + +"@prisma/engines-version@5.17.0-31.393aa359c9ad4a4bb28630fb5613f9c281cde053": + version "5.17.0-31.393aa359c9ad4a4bb28630fb5613f9c281cde053" + resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-5.17.0-31.393aa359c9ad4a4bb28630fb5613f9c281cde053.tgz#3c7cc1ef3ebc34cbd069e5873b9982f2aabf5acd" + integrity sha512-tUuxZZysZDcrk5oaNOdrBnnkoTtmNQPkzINFDjz7eG6vcs9AVDmA/F6K5Plsb2aQc/l5M2EnFqn3htng9FA4hg== + +"@prisma/engines@5.17.0": + version "5.17.0" + resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-5.17.0.tgz#74dd1aabb22675892760b3cf69a448e3aef4616b" + integrity sha512-+r+Nf+JP210Jur+/X8SIPLtz+uW9YA4QO5IXA+KcSOBe/shT47bCcRMTYCbOESw3FFYFTwe7vU6KTWHKPiwvtg== + dependencies: + "@prisma/debug" "5.17.0" + "@prisma/engines-version" "5.17.0-31.393aa359c9ad4a4bb28630fb5613f9c281cde053" + "@prisma/fetch-engine" "5.17.0" + "@prisma/get-platform" "5.17.0" + +"@prisma/fetch-engine@5.17.0": + version "5.17.0" + resolved "https://registry.yarnpkg.com/@prisma/fetch-engine/-/fetch-engine-5.17.0.tgz#f718dc7426411d1ebeeee53e2d0d38652387f87c" + integrity sha512-ESxiOaHuC488ilLPnrv/tM2KrPhQB5TRris/IeIV4ZvUuKeaicCl4Xj/JCQeG9IlxqOgf1cCg5h5vAzlewN91Q== + dependencies: + "@prisma/debug" "5.17.0" + "@prisma/engines-version" "5.17.0-31.393aa359c9ad4a4bb28630fb5613f9c281cde053" + "@prisma/get-platform" "5.17.0" + +"@prisma/get-platform@5.17.0": + version "5.17.0" + resolved "https://registry.yarnpkg.com/@prisma/get-platform/-/get-platform-5.17.0.tgz#89fdcae2adddebbbf0e7bd0474a6c49d6023519b" + integrity sha512-UlDgbRozCP1rfJ5Tlkf3Cnftb6srGrEQ4Nm3og+1Se2gWmCZ0hmPIi+tQikGDUVLlvOWx3Gyi9LzgRP+HTXV9w== + dependencies: + "@prisma/debug" "5.17.0" + "@react-aria/breadcrumbs@3.5.13": version "3.5.13" resolved "https://registry.yarnpkg.com/@react-aria/breadcrumbs/-/breadcrumbs-3.5.13.tgz#2686f7f460f20d67fe5cdfe185e32e3e78186962" @@ -2023,6 +2071,18 @@ resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.6.tgz#193ced6a40c8006cfc1ca3f4553444fb38f0e543" integrity sha512-OpXEVoCKSS3lQqjx9GGGOapBeuW5eUboYHRlHP9urXPX25IKZ6AnP5ZRxtVf63iieUbsHxLn8NQ5Nlftc6yzAA== +"@types/webidl-conversions@*": + version "7.0.3" + resolved "https://registry.yarnpkg.com/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz#1306dbfa53768bcbcfc95a1c8cde367975581859" + integrity sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA== + +"@types/whatwg-url@^11.0.2": + version "11.0.5" + resolved "https://registry.yarnpkg.com/@types/whatwg-url/-/whatwg-url-11.0.5.tgz#aaa2546e60f0c99209ca13360c32c78caf2c409f" + integrity sha512-coYR071JRaHa+xoEvvYqvnIHaVqaYrLPbsufM9BF63HkwI5Lgmy2QR8Q5K/lYDYo5AK82wOvSOS0UsLTpTG7uQ== + dependencies: + "@types/webidl-conversions" "*" + abab@^2.0.5, abab@^2.0.6: version "2.0.6" resolved "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz" @@ -2158,6 +2218,11 @@ browser-process-hrtime@^1.0.0: resolved "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz" integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow== +bson@^6.7.0: + version "6.8.0" + resolved "https://registry.yarnpkg.com/bson/-/bson-6.8.0.tgz#5063c41ba2437c2b8ff851b50d9e36cb7aaa7525" + integrity sha512-iOJg8pr7wq2tg/zSlCCHMi3hMm5JTOxLTagf3zxhcenHsFp+c6uOs6K7W5UE7A4QIJGtqh/ZovFNMP4mOPJynQ== + busboy@1.6.0: version "1.6.0" resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz" @@ -2852,6 +2917,11 @@ mathjs@^13.0.2: tiny-emitter "^2.1.0" typed-function "^4.2.1" +memory-pager@^1.0.2: + version "1.5.0" + resolved "https://registry.yarnpkg.com/memory-pager/-/memory-pager-1.5.0.tgz#d8751655d22d384682741c972f2c3d6dfa3e66b5" + integrity sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg== + merge2@^1.3.0: version "1.4.1" resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz" @@ -2926,6 +2996,23 @@ mkdirp@^1.0.3: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== +mongodb-connection-string-url@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/mongodb-connection-string-url/-/mongodb-connection-string-url-3.0.1.tgz#c13e6ac284ae401752ebafdb8cd7f16c6723b141" + integrity sha512-XqMGwRX0Lgn05TDB4PyG2h2kKO/FfWJyCzYQbIhXUxz7ETt0I/FqHjUeqj37irJ+Dl1ZtU82uYyj14u2XsZKfg== + dependencies: + "@types/whatwg-url" "^11.0.2" + whatwg-url "^13.0.0" + +mongodb@^6.8.0: + version "6.8.0" + resolved "https://registry.yarnpkg.com/mongodb/-/mongodb-6.8.0.tgz#680450f113cdea6d2d9f7121fe57cd29111fd2ce" + integrity sha512-HGQ9NWDle5WvwMnrvUxsFYPd3JEbqD3RgABHBQRuoCEND0qzhsd0iH5ypHsf1eJ+sXmvmyKpP+FLOKY8Il7jMw== + dependencies: + "@mongodb-js/saslprep" "^1.1.5" + bson "^6.7.0" + mongodb-connection-string-url "^3.0.0" + ms@2.1.2: version "2.1.2" resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz" @@ -3134,12 +3221,19 @@ postcss@^8, postcss@^8.4.23: picocolors "^1.0.0" source-map-js "^1.2.0" +prisma@^5.17.0: + version "5.17.0" + resolved "https://registry.yarnpkg.com/prisma/-/prisma-5.17.0.tgz#267b43921ab94805b010537cffa5ccaf530fa066" + integrity sha512-m4UWkN5lBE6yevqeOxEvmepnL5cNPEjzMw2IqDB59AcEV6w7D8vGljDLd1gPFH+W6gUxw9x7/RmN5dCS/WTPxA== + dependencies: + "@prisma/engines" "5.17.0" + psl@^1.1.33: version "1.9.0" resolved "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz" integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag== -punycode@^2.1.1: +punycode@^2.1.1, punycode@^2.3.0: version "2.3.1" resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz" integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg== @@ -3378,6 +3472,13 @@ source-map@~0.6.1: resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== +sparse-bitfield@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz#ff4ae6e68656056ba4b3e792ab3334d38273ca11" + integrity sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ== + dependencies: + memory-pager "^1.0.2" + streamsearch@^1.1.0: version "1.1.0" resolved "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz" @@ -3563,6 +3664,13 @@ tr46@^3.0.0: dependencies: punycode "^2.1.1" +tr46@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/tr46/-/tr46-4.1.1.tgz#281a758dcc82aeb4fe38c7dfe4d11a395aac8469" + integrity sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw== + dependencies: + punycode "^2.3.0" + tr46@~0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" @@ -3690,6 +3798,14 @@ whatwg-url@^11.0.0: tr46 "^3.0.0" webidl-conversions "^7.0.0" +whatwg-url@^13.0.0: + version "13.0.0" + resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-13.0.0.tgz#b7b536aca48306394a34e44bda8e99f332410f8f" + integrity sha512-9WWbymnqj57+XEuqADHrCJ2eSXzn8WXIW/YSGaZtb2WKAInQ6CHfaUUcTyyver0p8BDg5StLQq8h1vtZuwmOig== + dependencies: + tr46 "^4.1.1" + webidl-conversions "^7.0.0" + whatwg-url@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d" From 19df114848e26f97b8a8be86867136453468ff93 Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Mon, 22 Jul 2024 11:47:38 +0900 Subject: [PATCH 5/5] test --- src/components/Roof2.jsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index 67462c3a..fc9b8b85 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -244,7 +244,7 @@ export default function Roof2() { */ const handleSaveCanvas = async () => { // const jsonStr = JSON.stringify(canvas?.toDatalessJSON(['type', 'fontSize'])) - const jsonObj = canvas?.toDatalessJSON(['type', 'fontSize']) + const jsonObj = JSON.stringify(canvas?.toDatalessJSON(['type', 'fontSize', 'lines'])) console.log(jsonObj) const param = { @@ -261,10 +261,9 @@ export default function Roof2() { * canvas 내용 불러오기 */ const handleLoadCanvas = async () => { - const tests = await getTests() - console.log(tests) const canvasStates = await getCanvasState() - console.log(canvasStates) + console.log(JSON.parse(canvasStates.canvas)) + canvas?.loadFromJSON(JSON.parse(canvasStates.canvas)) } /**