작업중 임시저장 dev반영 금지

src/components/common/context-menu/QContextMenu.jsx

@@ -6,8 +6,10 @@ import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
 import { useTempGrid } from '@/hooks/useTempGrid'
 import { useContextMenu } from '@/hooks/useContextMenu'
 import { useEvent } from '@/hooks/useEvent'
+import { canvasState } from '@/store/canvasAtom'
 
 export default function QContextMenu(props) {
+  const canvas = useRecoilValue(canvasState)
   const { contextRef, canvasProps } = props
   const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
   const contextMenuList = useRecoilValue(contextMenuListState)
@@ -44,7 +46,7 @@ export default function QContextMenu(props) {
         x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
         y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,
       }
-      setContextMenu({ visible: true, ...position })
+      setContextMenu({ visible: true, ...position, currentMousePos: canvasProps.getPointer(e) })
       addDocumentEventListener('keyup', document, handleKeyup)
       canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
     }

src/hooks/common/useRoofFn.js

@@ -3,6 +3,8 @@ import { canvasState, currentObjectState } from '@/store/canvasAtom'
 import { selectedRoofMaterialSelector } from '@/store/settingAtom'
 import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 import { POLYGON_TYPE } from '@/common/common'
+import { useEvent } from '@/hooks/useEvent'
+
 const ROOF_COLOR = {
   0: 'rgb(199,240,213)',
   1: 'rgb(178,238,255)',
@@ -13,6 +15,7 @@ export function useRoofFn() {
   const canvas = useRecoilValue(canvasState)
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
   const currentObject = useRecoilValue(currentObjectState)
+  const { addCanvasMouseEventListener, initEvent } = useEvent()
 
   //면형상 선택 클릭시 지붕 패턴 입히기
   function setSurfaceShapePattern(polygon, mode = 'onlyBorder', trestleMode = false, roofMaterial = selectedRoofMaterial) {
@@ -169,5 +172,128 @@ export function useRoofFn() {
     })
   }
 
-  return { setSurfaceShapePattern, removeRoofMaterial, removeAllRoofMaterial }
+  function moveRoofMaterial(currentMousePos) {
+    console.log('moveRoofMaterial', currentMousePos)
+
+    const roofBase = canvas
+      .getObjects()
+      .filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+      .filter((roof) => roof.inPolygon(currentMousePos))
+
+    if (roofBase.length === 0) {
+      return
+    }
+
+    const roof = roofBase[0]
+    const wall = roof.wall
+
+    console.log('roof.points', roof.points)
+
+    const checkPolygon = new fabric.Polygon(roof.points, {
+      name: 'moveRoofPolygon',
+      stroke: '#ff0000',
+      strokeWidth: 5,
+      fill: 'transparent',
+      selectable: false,
+      originX: 'center',
+      originY: 'center',
+    })
+    canvas.add(checkPolygon)
+    canvas.renderAll()
+
+    canvas.on('mouse:move', (event) => {
+      const mousePos = canvas.getPointer(event.e)
+      checkPolygon.left = mousePos.x
+      checkPolygon.top = mousePos.y
+      canvas.renderAll()
+    })
+
+    canvas.on('mouse:down', (event) => {
+      const mousePos = canvas.getPointer(event.e)
+
+      const texts = canvas.getObjects().filter((obj) => obj.type === 'text' && (obj.attributes?.roofId === roof.id || obj.parentId === roof.id))
+      texts.forEach((text) => canvas.remove(text))
+
+      const allRoofObject = canvas
+        .getObjects()
+        .filter((obj) => obj !== roof && obj !== wall && (obj.attributes?.roofId === roof.id || obj.parentId === roof.id || obj.parentId === wall.id))
+
+      // // Calculate the movement delta
+      // const deltaX = mousePos.x - roof.left - roof.width / 2
+      // const deltaY = mousePos.y - roof.top - roof.height / 2
+
+      const originalRoofLeft = roof.left
+      const originalRoofTop = roof.top
+      const originalRoofWidth = roof.width
+      const originalRoofHeight = roof.height
+
+      console.log(
+        'originalRoofLeft',
+        originalRoofLeft,
+        'originalRoofTop',
+        originalRoofTop,
+        'originalRoofWidth',
+        originalRoofWidth,
+        'originalRoofHeight',
+        originalRoofHeight,
+      )
+
+      roof.set({
+        left: mousePos.x,
+        top: mousePos.y,
+        originX: 'center',
+        originY: 'center',
+        objectCaching: false,
+      })
+      roof.fire('polygonMoved')
+      roof.fire('modified')
+
+      wall.set({
+        left: mousePos.x,
+        top: mousePos.y,
+        originX: 'center',
+        originY: 'center',
+        objectCaching: false,
+      })
+      wall.fire('polygonMoved')
+      wall.fire('modified')
+
+      const newRoofLeft = roof.left
+      const newRoofTop = roof.top
+
+      console.log('originalRoofLeft', originalRoofLeft, 'originalRoofTop', originalRoofTop, 'newRoofLeft', newRoofLeft, 'newRoofTop', newRoofTop)
+
+      const deltaX = newRoofLeft - originalRoofLeft - originalRoofWidth / 2
+      const deltaY = newRoofTop - originalRoofTop - originalRoofHeight / 2
+
+      // Move all related objects by the delta
+      allRoofObject.forEach((obj) => {
+        // console.log('obj.type : ', obj.type, obj)
+        obj.set({
+          left: obj.left + deltaX,
+          top: obj.top + deltaY,
+          objectCaching: false,
+        })
+        // obj._calcDimensions()
+        obj.setCoords()
+
+        if (obj.type === 'QLine') {
+          // const thisText = canvas.getObjects().find((o) => o.name === 'lengthText' && o.parentId === obj.id)
+          // canvas.remove(thisText)
+          obj.addLengthText()
+        }
+      })
+
+      canvas.off('mouse:move')
+      canvas.off('mouse:down')
+      canvas.remove(checkPolygon)
+      canvas.requestRenderAll()
+    })
+  }
+
+  function convertAbsolutePoint(area) {
+    return area.points.map((p) => fabric.util.transformPoint({ x: p.x - area.pathOffset.x, y: p.y - area.pathOffset.y }, area.calcTransformMatrix()))
+  }
+
+  return { setSurfaceShapePattern, removeRoofMaterial, removeAllRoofMaterial, moveRoofMaterial }
 }

src/hooks/useContextMenu.js

@@ -1,4 +1,4 @@
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useState } from 'react'
 import { MENU, POLYGON_TYPE } from '@/common/common'
@@ -45,7 +45,7 @@ import { MODULE_ALIGN_TYPE, useModule } from './module/useModule'
 export function useContextMenu() {
   const canvas = useRecoilValue(canvasState)
   const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
-  const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
+  const [contextPopupPosition, setContextPopupPosition] = useRecoilState(contextPopupPositionState) // 현재 메뉴
   const [contextMenu, setContextMenu] = useRecoilState(contextMenuListState) // 메뉴.object 별 context menu
   const [currentContextMenu, setCurrentContextMenu] = useRecoilState(contextPopupState) // 선택한 contextMenu
   const currentObject = useRecoilValue(currentObjectState)
@@ -68,7 +68,7 @@ export function useContextMenu() {
   const { settingsData, setSettingsDataSave } = useCanvasSetting()
   const { swalFire } = useSwal()
   const { alignModule } = useModule()
-  const { removeRoofMaterial, removeAllRoofMaterial } = useRoofFn()
+  const { removeRoofMaterial, removeAllRoofMaterial, moveRoofMaterial } = useRoofFn()
 
   const currentMenuSetting = () => {
     switch (currentMenu) {
@@ -143,6 +143,9 @@ export function useContextMenu() {
             {
               id: 'selectMove',
               name: getMessage('contextmenu.select.move'),
+              fn: (currentMousePos) => {
+                moveRoofMaterial(currentMousePos)
+              },
             },
             {
               id: 'wallLineRemove',
@@ -294,8 +297,9 @@ export function useContextMenu() {
   }
 
   const handleClick = (e, menu) => {
+    // console.log('handleClick', e.clientX, e.clientY, menu)
     if (menu?.fn) {
-      menu.fn()
+      menu.fn(qContextMenu.currentMousePos)
     }
 
     setContextPopupPosition({

src/store/contextMenu.js

@@ -6,6 +6,7 @@ export const contextMenuState = atom({
     visible: false,
     x: 0,
     y: 0,
+    currentMousePos: { x: 0, y: 0 },
   },
   dangerouslyAllowMutability: true,
 })
@@ -15,3 +16,8 @@ export const contextMenuListState = atom({
   default: [[]],
   dangerouslyAllowMutability: true,
 })
+
+export const contextMenuPositionState = atom({
+  key: 'contextMenuPositionState',
+  default: { x: 0, y: 0 },
+})

src/util/qpolygon-utils.js

@@ -726,7 +726,7 @@ export const drawRidgeRoof = (roofId, canvas) => {
   drawHips(roof, canvas)
   connectLinePoint(roof, canvas)
   modifyRidge(roof, canvas)
-  // drawCenterLine(roof, canvas)
+  drawCenterLine(roof, canvas)
 }
 
 /**
@@ -750,8 +750,7 @@ const drawRidge = (roof, canvas) => {
 
     const angle1 = calculateAngle(prevRoof.startPoint, prevRoof.endPoint)
     const angle2 = calculateAngle(nextRoof.startPoint, nextRoof.endPoint)
-
-    if (Math.abs(angle1 - angle2) === 180 && currentWall.attributes.planeSize <= currentRoof.attributes.planeSize) {
+    if (Math.round(Math.abs(angle1 - angle2)) === 180 && currentWall.attributes.planeSize <= currentRoof.attributes.planeSize) {
       ridgeRoof.push({ index: index, roof: currentRoof, length: currentRoof.attributes.planeSize })
     }
   })