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/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/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)) +}