diff --git a/src/components/ui/SurfaceShape.jsx b/src/components/ui/SurfaceShape.jsx
index 01c557ff..3923108d 100644
--- a/src/components/ui/SurfaceShape.jsx
+++ b/src/components/ui/SurfaceShape.jsx
@@ -1,4 +1,3 @@
-import { Button, Input } from '@nextui-org/react'
import { useState } from 'react'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import { modalState } from '@/store/modalAtom'
@@ -780,9 +779,9 @@ export const SurfaceShapeModal = ({ canvas }) => {
const buttons = []
for (let i = 1; i <= 29; i++) {
buttons.push(
-
,
)
}
@@ -798,97 +797,97 @@ export const SurfaceShapeModal = ({ canvas }) => {
{type === 1 ? (
길이1
-
+
{length3 === 0 && (
<>
길이2
-
+
)}
- 대각선
+ 대각선
) : [2, 4, 5].includes(type) ? (
길이1
-
+
길이2
-
+
) : [3, 6, 7, 8, 9, 24, 28, 29].includes(type) ? (
<>
길이1
-
+
길이2
-
+
길이3
-
+
) : [11, 12, 19, 20, 21, 22, 25, 26, 27].includes(type) ? (
<>
길이1
-
+
길이2
-
+
길이3
-
+
길이4
-
+
) : [10, 13, 14, 15, 16, 17, 18, 23].includes(type) ? (
<>
길이1
-
+
길이2
-
+
길이3
-
+
길이4
-
+
길이5
-
+
) : (
<>
)}
-
+
-
-
-
+
-
)
diff --git a/src/components/ui/ThumbnailLIst.jsx b/src/components/ui/ThumbnailLIst.jsx
deleted file mode 100644
index 1d67dbe8..00000000
--- a/src/components/ui/ThumbnailLIst.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client'
-
-import { memo } from 'react'
-import { Card, Image } from '@nextui-org/react'
-
-function ThumbnailList(props) {
- const { thumbnails, canvas } = props
-
- const handleSelectThumb = (canvasStatus) => {
- console.log('canvasStatus', canvasStatus.length)
- canvas?.clear() // 캔버스를 초기화합니다.
- canvas?.loadFromJSON(JSON.parse(canvasStatus), function () {
- canvas?.renderAll() // 캔버스를 다시 그립니다.
- })
- }
-
- return (
- <>
-
- {thumbnails.length > 0 &&
- thumbnails.map((thumbnail, index) => (
-
- handleSelectThumb(thumbnail.canvasStatus)}
- />
-
- ))}
-
-
- )
-}
-
-export default memo(ThumbnailList)
diff --git a/src/hooks/main/useMainContentsController.js b/src/hooks/main/useMainContentsController.js
index 5b620475..f065c90f 100644
--- a/src/hooks/main/useMainContentsController.js
+++ b/src/hooks/main/useMainContentsController.js
@@ -16,7 +16,7 @@ export const useMainContentsController = () => {
useEffect(() => {
checkSession().then((res) => {
if (!res) {
- router.replace('/login')
+ router.replace('/login', undefined, { shallow: true })
}
})
setIsGlobalLoading(true)
diff --git a/src/hooks/module/useTrestle.js b/src/hooks/module/useTrestle.js
index bb359cb9..8abbae3c 100644
--- a/src/hooks/module/useTrestle.js
+++ b/src/hooks/module/useTrestle.js
@@ -1665,13 +1665,13 @@ export const useTrestle = () => {
canvas.add(bracket)
canvas.renderAll()
if (direction === 'south') {
- startPointY -= height
+ startPointY -= height - moduleIntvlVer / 10
} else if (direction === 'north') {
- startPointY += height
+ startPointY += height + moduleIntvlVer / 10
} else if (direction === 'east') {
- startPointX -= width
+ startPointX -= width - moduleIntvlHor / 10
} else if (direction === 'west') {
- startPointX += width
+ startPointX += width + moduleIntvlHor / 10
}
}
}
diff --git a/src/hooks/object/useObjectBatch.js b/src/hooks/object/useObjectBatch.js
index 8a6c797a..2671ed77 100644
--- a/src/hooks/object/useObjectBatch.js
+++ b/src/hooks/object/useObjectBatch.js
@@ -12,6 +12,7 @@ import {
triangleToPolygon,
getDegreeByChon,
toFixedWithoutRounding,
+ getTrianglePoints,
} from '@/util/canvas-util'
import { useSwal } from '@/hooks/useSwal'
import * as turf from '@turf/turf'
@@ -28,13 +29,11 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useEvent()
// const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useContext(EventContext)
const { swalFire } = useSwal()
- const { drawDirectionArrow } = usePolygon()
+ const { drawDirectionArrow, addPolygon, addLengthText } = usePolygon()
const { setSurfaceShapePattern } = useRoofFn()
const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
const roofDisplay = useRecoilValue(roofDisplaySelector)
- const { addPolygon } = usePolygon()
-
useEffect(() => {
if (canvas) {
// dbClickEvent()
@@ -419,7 +418,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
addCanvasMouseEventListener('mouse:up', (e) => {
if (dormer) {
- const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer))
+ const trianglePolygon = pointsToTurfPolygon(offsetRef > 0 ? getTrianglePoints(dormerOffset) : getTrianglePoints(dormer))
const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
//지붕 밖으로 그렸을때
@@ -448,8 +447,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
direction = 'north'
}
- let { leftPoints, rightPoints, groupPoints } =
- offsetRef > 0 ? splitDormerTriangle(dormerOffset, directionRef) : splitDormerTriangle(dormer, directionRef)
+ let { leftPoints, rightPoints, groupPoints, dormerPoints } =
+ offsetRef > 0 ? splitDormerTriangle(dormerOffset, directionRef, dormer) : splitDormerTriangle(dormer, directionRef)
canvas?.remove(offsetRef > 0 ? dormerOffset : dormer)
if (offsetRef > 0)
@@ -512,10 +511,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
false,
)
- leftTriangle.texts.forEach((text) => {
- text.bringToFront()
- })
-
const rightTriangle = addPolygon(
rightPoints,
{
@@ -587,7 +582,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
canvas?.remove(dormer)
offsetPolygon = addPolygon(
- triangleToPolygon(dormer),
+ dormerPoints,
{
selectable: true,
lockMovementX: true, // X 축 이동 잠금
@@ -604,7 +599,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
fontSize: lengthTextFont.fontSize.value,
fontStyle: lengthTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
fontWeight: lengthTextFont.fontWeight.value,
- angle: originAngle,
+ // angle: originAngle,
pitch: pitch,
dormerAttributes: {
height: height,
@@ -639,6 +634,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
)
}
+ addLengthText(leftTriangle)
+ addLengthText(rightTriangle)
+ addLengthText(offsetPolygon)
+
const groupPolygon = offsetPolygon ? [leftTriangle, rightTriangle, offsetPolygon] : [leftTriangle, rightTriangle]
const objectGroup = new fabric.Group(groupPolygon, {
@@ -667,9 +666,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
}
})
} else if (buttonAct === 4) {
- const heightLength = height - (width / 2) * (pitch * 0.25)
- const heightOffsetLength = height + offsetRef - (width / 2 + offsetWidthRef) * (pitch * 0.25)
-
addCanvasMouseEventListener('mouse:move', (e) => {
isDown = true
if (!isDown) return
@@ -774,7 +770,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
addCanvasMouseEventListener('mouse:up', (e) => {
if (dormer) {
- const pentagonPolygon = pointsToTurfPolygon(dormer.points)
+ const pentagonPolygon = pointsToTurfPolygon(offsetRef > 0 ? dormerOffset.getCurrentPoints() : dormer.getCurrentPoints())
const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
//지붕 밖으로 그렸을때
@@ -804,11 +800,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
direction = 'north'
}
- const offsetMode = offsetRef > 0 || offsetWidthRef > 0 ? 'offset' : 'normal'
let { leftPoints, rightPoints, groupPoints } =
- offsetRef > 0 || offsetWidthRef > 0
- ? splitDormerPentagon(dormerOffset, directionRef, offsetMode)
- : splitDormerPentagon(dormer, directionRef, offsetMode)
+ offsetRef > 0 || offsetWidthRef > 0 ? splitDormerPentagon(dormerOffset, directionRef) : splitDormerPentagon(dormer, directionRef)
canvas?.remove(offsetRef > 0 || offsetWidthRef > 0 ? dormerOffset : dormer)
if (offsetRef > 0)
@@ -948,7 +941,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
canvas?.remove(dormer)
offsetPolygon = addPolygon(
- dormer.points,
+ dormer.getCurrentPoints(),
{
selectable: true,
lockMovementX: true, // X 축 이동 잠금
@@ -965,7 +958,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
fontSize: lengthTextFont.fontSize.value,
fontStyle: lengthTextFont.fontWeight.value.toLowerCase().includes('italic') ? 'italic' : 'normal',
fontWeight: lengthTextFont.fontWeight.value,
- angle: originAngle,
+ // angle: originAngle,
groupPoints: groupPoints,
dormerAttributes: {
height: height,
@@ -1012,6 +1005,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
)
}
+ addLengthText(leftPentagon)
+ addLengthText(rightPentagon)
+ addLengthText(offsetPolygon)
+
const groupPolygon = offsetPolygon ? [leftPentagon, rightPentagon, offsetPolygon] : [leftPentagon, rightPentagon]
const objectGroup = new fabric.Group(groupPolygon, {
@@ -1058,13 +1055,18 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
if (setIsHidden) setIsHidden(false)
}
- const splitDormerTriangle = (triangle, direction) => {
+ const splitDormerTriangle = (triangle, direction, dormer = null) => {
const halfWidth = triangle.width / 2
+ let dormerPoints = []
let leftPoints = []
let rightPoints = []
let groupPoints = []
+ if (dormer) {
+ dormerPoints = getTrianglePoints(dormer)
+ }
+
if (direction === 'down') {
leftPoints = [
{ x: triangle.left, y: triangle.top },
@@ -1122,23 +1124,23 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
} else if (direction === 'right') {
leftPoints = [
{ x: triangle.left, y: triangle.top },
+ { x: triangle.left + triangle.height, y: triangle.top + halfWidth },
{ x: triangle.left + triangle.height, y: triangle.top },
- { x: triangle.left + triangle.height, y: triangle.top + triangle.height },
]
rightPoints = [
{ x: triangle.left, y: triangle.top },
- { x: triangle.left + triangle.height, y: triangle.top + triangle.height },
- { x: triangle.left + triangle.height, y: triangle.top - triangle.height },
+ { x: triangle.left + triangle.height, y: triangle.top },
+ { x: triangle.left + triangle.height, y: triangle.top - halfWidth },
]
groupPoints = [
{ x: triangle.left, y: triangle.top },
- { x: triangle.left + triangle.height, y: triangle.top + triangle.height },
- { x: triangle.left + triangle.height, y: triangle.top - triangle.height },
+ { x: triangle.left + triangle.height, y: triangle.top + halfWidth },
+ { x: triangle.left + triangle.height, y: triangle.top - halfWidth },
]
}
- return { leftPoints, rightPoints, groupPoints }
+ return { leftPoints, rightPoints, groupPoints, dormerPoints }
}
const splitDormerPentagon = (pentagon, direction, offsetMode) => {
@@ -1326,15 +1328,24 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
const reGroupObject = (groupObj) => {
groupObj._restoreObjectsState() //이건 실행만 되도 그룹이 변경됨
+
+ console.log('groupObj', groupObj)
+
const reGroupObjects = []
groupObj._objects.forEach((obj) => {
- const newObj = new QPolygon(obj.getCurrentPoints(), {
- ...obj,
- points: obj.getCurrentPoints(),
- scaleX: 1,
- scaleY: 1,
- texts: [],
- })
+ const newObj = addPolygon(
+ obj.getCurrentPoints(),
+ {
+ ...obj,
+ points: obj.getCurrentPoints(),
+ scaleX: 1,
+ scaleY: 1,
+ lines: obj.lines ?? [],
+ groupPoints: groupObj.groupPoints ?? [],
+ groupId: groupObj.groupId ?? '',
+ },
+ false,
+ )
reGroupObjects.push(newObj)
canvas.remove(obj)
if (newObj.direction) {
@@ -1342,6 +1353,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
}
newObj.fire('modified')
})
+
const reGroup = new fabric.Group(reGroupObjects, {
subTargetCheck: true,
name: groupObj.name,
@@ -1350,10 +1362,20 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
parentId: groupObj.parentId,
originX: 'center',
originY: 'center',
+ groupPoints: groupObj.groupPoints ?? [],
+ groupId: groupObj.groupId ?? '',
})
canvas?.add(reGroup)
canvas?.remove(groupObj)
+ reGroup._objects.forEach((obj) => {
+ if (obj.hasOwnProperty('texts')) {
+ obj.texts.forEach((text) => {
+ text.bringToFront()
+ })
+ }
+ })
+
return reGroup
}
@@ -1368,6 +1390,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
})
const originObj = { ...obj }
+ const turfSurface = pointsToTurfPolygon(parentSurface.points)
+ const originLeft = obj.left
+ const originTop = obj.top
+
addCanvasMouseEventListener('mouse:up', (e) => {
//개구, 그림자 타입일 경우 폴리곤 타입 변경
if (BATCH_TYPE.OPENING === obj.name || BATCH_TYPE.SHADOW === obj.name) {
@@ -1375,7 +1401,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
points: rectToPolygon(obj),
})
- const turfSurface = pointsToTurfPolygon(parentSurface.points)
const turfObject = pointsToTurfPolygon(obj.points)
if (turf.booleanWithin(turfObject, turfSurface)) {
@@ -1398,8 +1423,36 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
lockMovementY: true,
})
- if (obj.type === 'group') reGroupObject(obj)
- obj.setCoords()
+ if (obj.name === BATCH_TYPE.TRIANGLE_DORMER || obj.name === BATCH_TYPE.PENTAGON_DORMER) {
+ const calcLeft = obj.left - originLeft
+ const calcTop = obj.top - originTop
+
+ const currentDormerPoints = obj.groupPoints.map((item) => {
+ return {
+ x: item.x + calcLeft,
+ y: item.y + calcTop,
+ }
+ })
+
+ const turfObject = pointsToTurfPolygon(currentDormerPoints)
+
+ if (turf.booleanWithin(turfObject, turfSurface)) {
+ obj.set({
+ lockMovementX: true,
+ lockMovementY: true,
+ groupPoints: currentDormerPoints,
+ })
+
+ if (obj.type === 'group') reGroupObject(obj)
+ obj.setCoords()
+ } else {
+ swalFire({
+ title: getMessage('batch.object.outside.roof'),
+ icon: 'warning',
+ })
+ obj.set({ ...originObj, lockMovementX: true, lockMovementY: true })
+ }
+ }
}
canvas.discardActiveObject()
initEvent()
@@ -1512,8 +1565,27 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
length2 = parseInt(length2) / 10
const dormer = canvas.getActiveObject()
- if (length1) dormer.top = arrow1 === 'down' ? dormer.top + length1 : dormer.top - length1
- if (length2) dormer.left = arrow2 === 'left' ? dormer.left - length2 : dormer.left + length2
+ if (length1) {
+ if (!arrow1) {
+ swalFire({
+ title: getMessage('length.direction.is.required'),
+ icon: 'warning',
+ })
+ } else {
+ dormer.top = arrow1 === 'down' ? dormer.top + length1 : dormer.top - length1
+ }
+ }
+
+ if (length2) {
+ if (!arrow2) {
+ swalFire({
+ title: getMessage('length.direction.is.required'),
+ icon: 'warning',
+ })
+ } else {
+ dormer.left = arrow2 === 'left' ? dormer.left - length2 : dormer.left + length2
+ }
+ }
if (dormer.type === 'group') {
const newDormer = reGroupObject(dormer)
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index 5219a6a5..539c43ec 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -146,13 +146,9 @@ export function useCanvasSetting(executeEffect = true) {
if (!executeEffect) {
return
}
- const tempFetchRoofMaterials = !fetchRoofMaterials
/** 초 1회만 실행하도록 처리 */
- setFetchRoofMaterials(tempFetchRoofMaterials)
- if (tempFetchRoofMaterials) {
- addRoofMaterials()
- }
+ addRoofMaterials()
}, [])
/**
diff --git a/src/hooks/surface/useSurfaceShapeBatch.js b/src/hooks/surface/useSurfaceShapeBatch.js
index 2bfcde38..bc82aebd 100644
--- a/src/hooks/surface/useSurfaceShapeBatch.js
+++ b/src/hooks/surface/useSurfaceShapeBatch.js
@@ -197,7 +197,6 @@ export function useSurfaceShapeBatch({ isHidden, setIsHidden }) {
surfaceId: surfaceId,
direction: direction,
})
- canvas?.add(batchSurface)
canvas.setActiveObject(batchSurface)
setSurfaceShapePattern(batchSurface, roofDisplay.column)
drawDirectionArrow(batchSurface)
diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js
index 2afbe126..f1451bd1 100644
--- a/src/hooks/useCanvas.js
+++ b/src/hooks/useCanvas.js
@@ -3,8 +3,8 @@ import { fabric } from 'fabric'
import { actionHandler, anchorWrapper, polygonPositionHandler } from '@/util/canvas-util'
-import { useRecoilState, useRecoilValue } from 'recoil'
-import { canvasSizeState, canvasState, fontSizeState } from '@/store/canvasAtom'
+import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
+import { canvasSizeState, canvasState, canvasZoomState, fontSizeState } from '@/store/canvasAtom'
import { QLine } from '@/components/fabric/QLine'
import { QPolygon } from '@/components/fabric/QPolygon'
import { defineQLine } from '@/util/qline-utils'
@@ -27,6 +27,7 @@ export function useCanvas(id) {
const { setCanvasForEvent, attachDefaultEventOnCanvas } = useCanvasEvent()
const isImageDisplay = useRecoilValue(imageDisplaySelector)
const {} = useFont()
+ const resetCanvasZoom = useResetRecoilState(canvasZoomState)
/**
* 처음 셋팅
@@ -43,7 +44,7 @@ export function useCanvas(id) {
setCanvas(c)
setCanvasForEvent(c)
attachDefaultEventOnCanvas()
-
+ resetCanvasZoom()
return () => {
// c.dispose()
c.clear()
diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js
index 66116af8..935097b0 100644
--- a/src/util/canvas-util.js
+++ b/src/util/canvas-util.js
@@ -1040,3 +1040,17 @@ export function calculateVisibleModuleHeight(sourceWidth, sourceHeight, angle, d
export function toFixedWithoutRounding(number, decimals) {
return Math.floor(number * Math.pow(10, decimals)) / Math.pow(10, decimals)
}
+
+export function getTrianglePoints(triangle) {
+ const matrix = triangle.calcTransformMatrix()
+ const w = triangle.width / 2
+ const h = triangle.height / 2
+
+ const points = [
+ { x: 0, y: -h },
+ { x: -w, y: h },
+ { x: w, y: h },
+ ]
+
+ return points.map((point) => fabric.util.transformPoint(point, matrix))
+}
diff --git a/startscript.js b/startscript.js
index 350b2c06..37f52696 100644
--- a/startscript.js
+++ b/startscript.js
@@ -1,2 +1,2 @@
var exec = require('child_process').exec
-exec('yarn serve', { windowsHide: true })
+exec('yarn start', { windowsHide: true })
diff --git a/tailwind.config.js b/tailwind.config.js
index efe48113..ae588bc1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,3 @@
-const { nextui } = require('@nextui-org/react')
-
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
@@ -12,11 +10,10 @@ module.exports = {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
- 'gradient-conic':
- 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+ 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
},
darkMode: 'class',
- plugins: [nextui()],
+ plugins: [],
}