diff --git a/src/components/fabric/QPolygon.js b/src/components/fabric/QPolygon.js index 44cbfb37..7df9d495 100644 --- a/src/components/fabric/QPolygon.js +++ b/src/components/fabric/QPolygon.js @@ -137,6 +137,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { }) }) + //QPolygon 좌표 이동시 좌표 재계산 this.on('polygonMoved', () => { //폴리곤일때만 사용 let matrix = this.calcTransformMatrix() @@ -148,8 +149,9 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { .map((p) => { return fabric.util.transformPoint(p, matrix) }) - this.set('points', transformedPoints) - this.set('pathOffset', { x: this.left, y: this.top }) + this.points = transformedPoints + const { left, top } = this.calcOriginCoords() + this.set('pathOffset', { x: left, y: top }) this.setCoords() }) @@ -773,4 +775,32 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, { divideLine() { // splitPolygonWithLines(this) }, + calcOriginCoords() { + const points = this.points + const minX = Math.min(...points.map((p) => p.x)) + const maxX = Math.max(...points.map((p) => p.x)) + const minY = Math.min(...points.map((p) => p.y)) + const maxY = Math.max(...points.map((p) => p.y)) + + let left = 0 + let top = 0 + + if (this.originX === 'center') { + left = (minX + maxX) / 2 + } else if (this.originX === 'left') { + left = minX + } else if (this.originX === 'right') { + left = maxX + } + + if (this.originY === 'center') { + top = (minY + maxY) / 2 + } else if (this.originY === 'top') { + top = minY + } else if (this.originY === 'bottom') { + top = maxY + } + + return { left, top } + }, }) diff --git a/src/components/floor-plan/modal/object/SizeSetting.jsx b/src/components/floor-plan/modal/object/SizeSetting.jsx index 333150ea..cadfd461 100644 --- a/src/components/floor-plan/modal/object/SizeSetting.jsx +++ b/src/components/floor-plan/modal/object/SizeSetting.jsx @@ -18,7 +18,7 @@ export default function SizeSetting(props) { const { getMessage } = useMessage() const { closePopup } = usePopup() const { resizeObjectBatch } = useObjectBatch({}) - const { reSizePolygon } = useSurfaceShapeBatch() + const { resizeSurfaceShapeBatch } = useSurfaceShapeBatch() const widthRef = useRef(null) const heightRef = useRef(null) @@ -36,10 +36,11 @@ export default function SizeSetting(props) { target.name === BATCH_TYPE.OPENING || target.name === BATCH_TYPE.SHADOW || target.name === BATCH_TYPE.TRIANGLE_DORMER || - target.name === BATCH_TYPE.PENTAGON_DORMER || - target.name === POLYGON_TYPE.ROOF + target.name === BATCH_TYPE.PENTAGON_DORMER ) { resizeObjectBatch(settingTarget, target, width, height) + } else if (target.name === POLYGON_TYPE.ROOF) { + resizeSurfaceShapeBatch(settingTarget, target, width, height) } } diff --git a/src/hooks/common/useCanvasConfigInitialize.js b/src/hooks/common/useCanvasConfigInitialize.js index c4f137b0..a07d4a00 100644 --- a/src/hooks/common/useCanvasConfigInitialize.js +++ b/src/hooks/common/useCanvasConfigInitialize.js @@ -7,6 +7,7 @@ import { useFont } from '@/hooks/common/useFont' import { useGrid } from '@/hooks/common/useGrid' import { globalFontAtom } from '@/store/fontAtom' import { useRoof } from '@/hooks/common/useRoof' +import { usePolygon } from '@/hooks/usePolygon' export function useCanvasConfigInitialize() { const canvas = useRecoilValue(canvasState) @@ -20,6 +21,7 @@ export function useCanvasConfigInitialize() { const {} = useFont() const {} = useGrid() const {} = useRoof() + const { drawDirectionArrow } = usePolygon() useEffect(() => { if (!canvas) return @@ -173,6 +175,7 @@ export function useCanvasConfigInitialize() { //그룹 객체로 다시 만든다 (좌표때문에) const group = new fabric.Group(objectArray, { + ...objectArray, groupId: id, name: objectsName, selectable: true, diff --git a/src/hooks/object/useObjectBatch.js b/src/hooks/object/useObjectBatch.js index a16ce0f9..1820599b 100644 --- a/src/hooks/object/useObjectBatch.js +++ b/src/hooks/object/useObjectBatch.js @@ -374,6 +374,9 @@ export function useObjectBatch({ isHidden, setIsHidden }) { const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer)) const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface) + console.log('trianglePolygon', trianglePolygon) + console.log('selectedSurfacePolygon', selectedSurfacePolygon) + //지붕 밖으로 그렸을때 if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) { swalFire({ text: '도머를 배치할 수 없습니다.', icon: 'error' }) @@ -496,6 +499,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) { }) canvas?.add(objectGroup) + objectGroup.getObjects().forEach((obj, index) => { + console.log(`최초 pathOffset ${index}`, obj.get('pathOffset')) + }) + isDown = false initEvent() dbClickEvent() @@ -917,20 +924,17 @@ export function useObjectBatch({ isHidden, setIsHidden }) { originY: 'center', left: changedCoords.x, top: changedCoords.y, + width: width / 10, + height: height / 10, }) - if (target.name === 'roof') { - //얘는 일단 도머에 적용함 - if (target.type === 'group') { - target._objects.forEach((obj) => setSurfaceShapePattern(obj)) - } else { - setSurfaceShapePattern(target) - target.fire('modified') - } + //얘는 일단 도머에 적용함 + if (target.type === 'group') { + target._objects.forEach((obj) => setSurfaceShapePattern(obj)) } + // target.setCoords() canvas.renderAll() - if (target.type === 'group') reGroupObject(target) } diff --git a/src/hooks/surface/useSurfaceShapeBatch.js b/src/hooks/surface/useSurfaceShapeBatch.js index 9457169c..d2c6aee7 100644 --- a/src/hooks/surface/useSurfaceShapeBatch.js +++ b/src/hooks/surface/useSurfaceShapeBatch.js @@ -657,7 +657,7 @@ export function useSurfaceShapeBatch() { } function getAllRelatedObjects(id) { - const result = [] + const ult = [] const map = new Map() // Create a map of objects by their id @@ -688,52 +688,8 @@ export function useSurfaceShapeBatch() { const roof = canvas.getActiveObject() if (roof) { - let isDragging = false - const childrenObjects = canvas.getObjects().filter((obj) => obj.parentId === roof.id) - console.log('childrenObjects', childrenObjects) - - // const groupObjects = canvas.getObjects().filter((obj) => obj.parentId === roof.id && obj.type === 'group') - - // const ungroupObjects = [] // 그룹 해제된 객체들 - // const groupChildObjects = [] - - // groupObjects.forEach((obj) => { - // obj._restoreObjectsState() - // obj.getObjects().forEach((o) => { - // o.set({ - // ungroupYn: true, - // }) - // canvas.add(o) - // ungroupObjects.push(o) - // }) - // canvas.remove(obj) - // }) - - // const childObjects = findAllChildren(roof.id) - // groupObjects.forEach((obj) => { - // groupChildObjects.push(...obj.getObjects()) - // }) - - // console.log('ungroupObjects', ungroupObjects) - // console.log('childObjects', childObjects) - // console.log('groupChildObjects', groupChildObjects) - - // const children = canvas.getObjects().filter((obj) => obj.parentId === roof.id) - // let grandChildren = [] - - // children.forEach((child) => { - // if (child.type === 'group') { - // child.getObjects().forEach((grandChild) => { - // const groupObjects = canvas.getObjects().filter((obj) => obj.parentId === grandChild.id) - // grandChildren.push(...groupObjects) - // }) - // } else { - // grandChildren.push(...canvas.getObjects().filter((obj) => obj.parentId === child.id)) - // } - // }) - const selectionArray = [roof, ...childrenObjects] const selection = new fabric.ActiveSelection(selectionArray, { @@ -748,7 +704,6 @@ export function useSurfaceShapeBatch() { canvas.setActiveObject(selection) addCanvasMouseEventListener('mouse:up', (e) => { - isDragging = false canvas.selection = true canvas.discardActiveObject() // 모든 선택 해제 @@ -768,7 +723,6 @@ export function useSurfaceShapeBatch() { canvas.renderAll() roof.fire('polygonMoved') - if (roof.type === 'group') reGroupObject(obj) drawDirectionArrow(roof) initEvent() }) @@ -805,9 +759,74 @@ export function useSurfaceShapeBatch() { canvas?.remove(groupObj) } + const resizeSurfaceShapeBatch = (side, target, width, height) => { + const objectWidth = target.width + const objectHeight = target.height + const changeWidth = width / 10 / objectWidth + const changeHeight = height / 10 / objectHeight + let sideX = 'left' + let sideY = 'top' + + //그룹 중심점 변경 + if (side === 2) { + sideX = 'right' + sideY = 'top' + } else if (side === 3) { + sideX = 'left' + sideY = 'bottom' + } else if (side === 4) { + sideX = 'right' + sideY = 'bottom' + } + + //변경 전 좌표 + const newCoords = target.getPointByOrigin(sideX, sideY) + + target.set({ + originX: sideX, + originY: sideY, + left: newCoords.x, + top: newCoords.y, + }) + + target.scaleX = changeWidth + target.scaleY = changeHeight + + const currentPoints = target.getCurrentPoints() + + target.set({ + scaleX: 1, + scaleY: 1, + width: parseInt((width / 10).toFixed(0)), + height: parseInt((height / 10).toFixed(0)), + }) + //크기 변경후 좌표를 재 적용 + const changedCoords = target.getPointByOrigin('center', 'center') + + target.set({ + originX: 'center', + originY: 'center', + left: changedCoords.x, + top: changedCoords.y, + }) + + //면형상 리사이즈시에만 + target.fire('polygonMoved') + target.points = currentPoints + target.fire('modified') + + setSurfaceShapePattern(target, roofDisplay.column) + if (target.direction) { + drawDirectionArrow(target) + } + target.setCoords() + canvas.renderAll() + } + return { applySurfaceShape, deleteAllSurfacesAndObjects, moveSurfaceShapeBatch, + resizeSurfaceShapeBatch, } }