Merge branch 'qcast-pub' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx

@@ -49,6 +49,7 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
     handleFix,
     buttonAct,
     setButtonAct,
+    cutAuxiliary,
   } = useAuxiliaryDrawing(id)
 
   const outerLineProps = {
@@ -151,6 +152,9 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
             <button className="btn-frame modal mr5" onClick={handleRollback}>
               {getMessage('modal.cover.outline.rollback')}
             </button>
+            <button className="btn-frame modal mr5" onClick={cutAuxiliary}>
+              {getMessage('contextmenu.auxiliary.cut')}
+            </button>
             <button className="btn-frame modal act" onClick={() => handleFix(id)}>
               {getMessage('apply')}
             </button>

src/components/floor-plan/modal/auxiliary/AuxiliaryEdit.jsx

@@ -5,8 +5,8 @@ import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { useState } from 'react'
 import { currentObjectState } from '@/store/canvasAtom'
-import { useLine } from '@/hooks/useLine'
 import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing'
+import { useSwal } from '@/hooks/useSwal'
 
 export default function AuxiliaryEdit(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -18,9 +18,13 @@ export default function AuxiliaryEdit(props) {
   const [horizonSize, setHorizonSize] = useState('0')
   const [arrow1, setArrow1] = useState(null)
   const [arrow2, setArrow2] = useState(null)
-  const { addLine, removeLine } = useLine()
   const currentObject = useRecoilValue(currentObjectState)
+  const { swalFire } = useSwal()
   const handleSave = () => {
+    if (!horizonSize || !verticalSize || !arrow1 || !arrow2) {
+      swalFire({ title: '길이와 방향을 입력하세요.', type: 'alert' })
+      return
+    }
     if (type === 'copy') {
       if (currentObject) {
         copy(

src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx

@@ -3,12 +3,14 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import { usePopup } from '@/hooks/usePopup'
 import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
+import { useCanvas } from '@/hooks/useCanvas'
 
 export default function AuxiliarySize(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  const { currentObject } = useCanvas()
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap xm mount`}>
@@ -26,7 +28,7 @@ export default function AuxiliarySize(props) {
             </div>
             <div className="outline-form mb15">
               <div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
-                <input type="text" className="input-origin block" defaultValue={100} />
+                <input type="text" className="input-origin block" defaultValue={currentObject?.length} readOnly={true} />
               </div>
               <span className="thin">mm</span>
             </div>
@@ -45,14 +47,14 @@ export default function AuxiliarySize(props) {
             </div>
             <div className="outline-form mb15">
               <div className="input-grid mr5" style={{ flex: '1 1 auto' }}>
-                <input type="text" className="input-origin block" defaultValue={100} />
+                <input type="text" className="input-origin block" defaultValue={100} readOnly={true} />
               </div>
               <span className="thin">mm</span>
             </div>
             <div className="outline-form">
               <span style={{ width: 'auto' }}>{getMessage('length')}</span>
               <div className="input-grid mr5">
-                <input type="text" className="input-origin block" defaultValue={100} />
+                <input type="text" className="input-origin block" defaultValue={currentObject?.length} readOnly={true} />
               </div>
               <span className="thin">mm</span>
             </div>

src/components/floor-plan/modal/object/type/PentagonDormer.jsx

@@ -82,7 +82,7 @@ const PentagonDormer = forwardRef((props, refs) => {
         </div>
       </div>
       <div className="discrimination-box">
-        <div className="discrimination-tit">方向の選択</div>
+        <div className="discrimination-tit">{getMessage('modal.object.setting.direction.select')}</div>
         <div className="object-direction-wrap">
           <div className="plane-direction">
             <span className="top">{getMessage('commons.north')}</span>

src/components/floor-plan/modal/object/type/TriangleDormer.jsx

@@ -60,7 +60,7 @@ const TriangleDormer = forwardRef((props, refs) => {
         </div>
       </div>
       <div className="discrimination-box">
-        <div className="discrimination-tit">方向の選択</div>
+        <div className="discrimination-tit">{getMessage('modal.object.setting.direction.select')}</div>
         <div className="object-direction-wrap">
           <div className="plane-direction">
             <span className="top">{getMessage('commons.north')}</span>

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -92,7 +92,7 @@ export function useAuxiliaryDrawing(id) {
 
     addCanvasMouseEventListener('mouse:move', mouseMove)
     addCanvasMouseEventListener('mouse:down', mouseDown)
-    addDocumentEventListener('contextmenu', document, cutAuxiliary)
+    // addDocumentEventListener('contextmenu', document, cutAuxiliary)
     addDocumentEventListener('keydown', document, keydown[type])
 
     return () => {
@@ -135,23 +135,6 @@ export function useAuxiliaryDrawing(id) {
     })
   }
 
-  const addBisectorLine = (target) => {
-    const slope = (target.y2 - target.y1) / (target.x2 - target.x1)
-    const bisectorSlope = -1 / slope
-    const length = target.length
-    const dx = length / Math.sqrt(1 + bisectorSlope * bisectorSlope)
-    const dy = bisectorSlope * dx
-    const endX = (target.x1 + target.x2) / 2
-    const endY = (target.y1 + target.y2) / 2
-
-    addLine([dx, dy, endX, endY], {
-      stroke: 'red',
-      strokeWidth: 1,
-      selectable: true,
-      name: 'auxiliaryLine',
-    })
-  }
-
   const keydown = {
     outerLine: (e) => {
       if (mousePointerArr.current.length === 0) {
@@ -565,8 +548,24 @@ export function useAuxiliaryDrawing(id) {
         otherAdsorptionPoints.push(intersectionPoint)
       })
     })
+    let innerLinePoints = []
+    canvas
+      .getObjects()
+      .filter((obj) => obj.innerLines)
+      .forEach((polygon) => {
+        polygon.innerLines.forEach((line) => {
+          innerLinePoints.push({ x: line.x1, y: line.y1 })
+          innerLinePoints.push({ x: line.x2, y: line.y2 })
+        })
+      })
 
-    const adsorptionPoints = [...getAdsorptionPoints(), ...roofAdsorptionPoints.current, ...otherAdsorptionPoints, ...intersectionPoints.current]
+    const adsorptionPoints = [
+      ...getAdsorptionPoints(),
+      ...roofAdsorptionPoints.current,
+      ...otherAdsorptionPoints,
+      ...intersectionPoints.current,
+      ...innerLinePoints,
+    ]
 
     let arrivalPoint = { x: pointer.x, y: pointer.y }
 
@@ -825,7 +824,6 @@ export function useAuxiliaryDrawing(id) {
 
     //lineHistory.current에 있는 선들 중 startPoint와 endPoint가 겹치는 line은 제거
     // 겹치는 선 하나는 canvas에서 제거한다.
-
     const tempLines = [...lineHistory.current]
     lineHistory.current = []
     tempLines.forEach((line) => {
@@ -849,27 +847,30 @@ export function useAuxiliaryDrawing(id) {
       const tempPolygonPoints = [...roofBase.points].map((obj) => {
         return { x: Math.round(obj.x), y: Math.round(obj.y) }
       })
-      const roofInnerLines = innerLines.filter((line) => {
+      const roofInnerLines = [...roofBase.innerLines, ...innerLines].filter((line) => {
         const inPolygon1 =
-          tempPolygonPoints.some((point) => point.x === line.x1 && point.y === line.y1) ||
+          tempPolygonPoints.some((point) => Math.round(point.x) === Math.round(line.x1) && Math.round(point.y) === Math.round(line.y1)) ||
-          roofBase.inPolygon({ x: line.x1, y: line.y1 }) ||
+          roofBase.inPolygon({ x: Math.round(line.x1), y: Math.round(line.y1) }) ||
-          roofBase.lines.some((line) => isPointOnLine(line, { x: line.x1, y: line.y1 }))
+          roofBase.lines.some((line) => isPointOnLine(line, { x: Math.round(line.x1), y: Math.round(line.y1) }))
         const inPolygon2 =
-          tempPolygonPoints.some((point) => point.x === line.x2 && point.y === line.y2) ||
+          tempPolygonPoints.some((point) => Math.round(point.x) === Math.round(line.x2) && Math.round(point.y) === Math.round(line.y2)) ||
-          roofBase.inPolygon({ x: line.x2, y: line.y2 }) ||
+          roofBase.inPolygon({ x: Math.round(line.x2), y: Math.round(line.y2) }) ||
-          roofBase.lines.some((line) => isPointOnLine(line, { x: line.x2, y: line.y2 }))
+          roofBase.lines.some((line) => isPointOnLine(line, { x: Math.round(line.x2), y: Math.round(line.y2) }))
 
         if (inPolygon1 && inPolygon2) {
-          line.attributes = { ...line.attributes, roofId: roofBase.id, actualSize: 0, planeSize: line.getLength() }
+          line.attributes = {
+            ...line.attributes,
+            roofId: roofBase.id,
+            actualSize: line.attributes?.actualSize ?? 0,
+            planeSize: line.getLength(),
+          }
           return true
         }
       })
 
-      roofBase.innerLines = [...roofInnerLines]
+      roofBase.innerLines = lineHistory.current.length !== 0 ? [...roofInnerLines] : roofBase.innerLines
-
       canvas.renderAll()
     })
-
     closePopup(id)
   }
 
@@ -903,6 +904,6 @@ export function useAuxiliaryDrawing(id) {
     setButtonAct,
     move,
     copy,
-    addBisectorLine,
+    cutAuxiliary,
   }
 }

src/hooks/useContextMenu.js

@@ -34,6 +34,7 @@ import { useObjectBatch } from '@/hooks/object/useObjectBatch'
 import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
 import { fontSelector, globalFontAtom } from '@/store/fontAtom'
 import { useLine } from '@/hooks/useLine'
+import { useSwal } from '@/hooks/useSwal'
 
 export function useContextMenu() {
   const canvas = useRecoilValue(canvasState)
@@ -56,6 +57,7 @@ export function useContextMenu() {
   const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
   const { addLine, removeLine } = useLine()
   const commonTextFont = useRecoilValue(fontSelector('commonText'))
+  const { swalFire } = useSwal()
 
   const currentMenuSetting = () => {
     switch (currentMenu) {
@@ -145,6 +147,9 @@ export function useContextMenu() {
               shortcut: ['d', 'D'],
               name: `${getMessage('contextmenu.auxiliary.remove')}(D)`,
               fn: () => {
+                const roof = canvas.getObjects().filter((obj) => obj.id === currentObject.attributes.roofId)[0]
+                const innerLines = roof.innerLines?.filter((line) => currentObject.id !== line.id)
+                roof.innerLines = [...innerLines]
                 canvas.remove(currentObject)
                 canvas.discardActiveObject()
               },
@@ -176,21 +181,34 @@ export function useContextMenu() {
                   endY = (currentObject.y1 + currentObject.y2) / 2 - dy
                 }
 
-                addLine([startX, startY, endX, endY], {
+                const line = addLine([startX, startY, endX, endY], {
                   stroke: 'red',
                   strokeWidth: 1,
                   selectable: true,
                   name: 'auxiliaryLine',
+                  attributes: { ...currentObject.attributes },
                 })
+                canvas
+                  .getObjects()
+                  .filter((obj) => obj.id === currentObject.attributes.roofId)[0]
+                  .innerLines.push(line)
               },
             },
-            {
-              id: 'auxiliaryCut',
-              name: getMessage('contextmenu.auxiliary.cut'),
-            },
             {
               id: 'auxiliaryRemoveAll',
               name: getMessage('contextmenu.auxiliary.remove.all'),
+              fn: () => {
+                if (!currentObject) {
+                  swalFire({ text: '지붕을 선택해주세요.' })
+                  return
+                }
+                const innerLines = canvas.getObjects().filter((obj) => obj.id === currentObject.attributes.roofId)[0].innerLines
+                innerLines.forEach((line) => {
+                  canvas.remove(line)
+                })
+                innerLines.length = 0
+                canvas.renderAll()
+              },
             },
           ],
         ])