Merge branch 'qcast-pub' into dev

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

@@ -3,12 +3,14 @@ import { useEffect } from 'react'
 import '@/styles/contents.scss'
 import { useRecoilState } from 'recoil'
 import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
+import { useTempGrid } from '@/hooks/useTempGrid'
 
 export default function QContextMenu(props) {
   const { contextRef, canvasProps, handleKeyup } = props
   const [contextMenu, setContextMenu] = useRecoilState(contextMenuState)
   const [contextMenuList, setContextMenuList] = useRecoilState(contextMenuListState)
   const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
+  const { tempGridMode, setTempGridMode } = useTempGrid()
 
   let contextType = ''
 
@@ -32,6 +34,7 @@ export default function QContextMenu(props) {
 
     const handleContextMenu = (e) => {
       // e.preventDefault() //기존 contextmenu 막고
+      if (tempGridMode) return
       const position = {
         x: window.innerWidth / 2 < e.pageX ? e.pageX - 240 : e.pageX,
         y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY,

src/components/common/font/FontSetting.jsx

@@ -47,7 +47,7 @@ const fontColors = [
 ]
 export default function FontSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
-  const { id, setIsShow, pos = contextPopupPosition, type } = props
+  const { id, setIsShow, pos = contextPopupPosition, type, isConfig = false } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
   const [globalFont, setGlobalFont] = useRecoilState(globalFontAtom)
@@ -83,7 +83,7 @@ export default function FontSetting(props) {
             className="modal-close"
             onClick={() => {
               if (setIsShow) setIsShow(false)
-              closePopup(id)
+              closePopup(id, isConfig)
             }}
           >
             닫기

src/components/common/popupManager/PopupManager.jsx

@@ -5,5 +5,9 @@ import { Fragment } from 'react'
 
 export default function PopupManager() {
   const [popup, setPopup] = useRecoilState(popupState)
-  return popup.children?.map((child) => <Fragment key={child.id}>{child.component}</Fragment>)
+
+  return [
+    ...popup?.config.map((child) => <Fragment key={child.id}>{child.component}</Fragment>),
+    ...popup?.other.map((child) => <Fragment key={child.id}>{child.component}</Fragment>),
+  ]
 }

src/components/floor-plan/CanvasMenu.jsx

@@ -51,7 +51,7 @@ export default function CanvasMenu(props) {
   const sessionState = useRecoilValue(sessionStore)
   const globalLocale = useRecoilValue(globalLocaleStore)
   const canvas = useRecoilValue(canvasState)
-  const { handleZoomClear } = useCanvasEvent()
+  const { handleZoomClear, handleZoom } = useCanvasEvent()
   const { handleMenu } = useMenu()
   const { handleEstimateSubmit } = useEstimateController()
 
@@ -132,7 +132,7 @@ export default function CanvasMenu(props) {
 
   const handlePopup = () => {
     const id = uuidv4()
-    addPopup(id, 0, <SettingModal01 id={id} />)
+    addPopup(id, 1, <SettingModal01 id={id} />, true)
   }
 
   useEffect(() => {
@@ -204,14 +204,18 @@ export default function CanvasMenu(props) {
                 <button
                   className="control-btn minus"
                   onClick={() => {
-                    canvas.setZoom(canvas.getZoom() - 0.1)
+                    handleZoom(false)
                   }}
                 ></button>
                 <span>{canvasZoom}%</span>
-                <button className="control-btn plus" onClick={handleZoomClear}></button>
+                <button
+                  className="control-btn plus"
+                  onClick={() => {
+                    handleZoom(true)
+                  }}
+                ></button>
               </div>
               <div className="btn-from">
-                <button className="btn07" onClick={handleClear}></button>
                 <button className="btn08" onClick={handleSaveCanvas}></button>
                 <button className="btn09"></button>
               </div>

src/components/floor-plan/modal/setting01/GridOption.jsx

@@ -78,14 +78,14 @@ export default function GridOption() {
       // 점 선 그리드 설정 모달
       setShowDotLineGridModal(selectedOption.selected)
 
-      addPopup(dotLineId, 2, <DotLineGrid {...dotLineGridProps} />)
+      addPopup(dotLineId, 2, <DotLineGrid {...dotLineGridProps} />, true)
     } else if (selectedOption.id === 3) {
       // 흡착점 모드
       setAdsorptionPointAddMode(selectedOption.selected)
     } else if (selectedOption.id === 4) {
       // 그리드 색 설정 모달
       setShowColorPickerModal(selectedOption.selected)
-      addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} />)
+      addPopup(colorId, 2, <ColorPickerModal {...colorPickerProps} />, true)
     }
 
     setGridOptions(newGridOptions)

src/components/floor-plan/modal/setting01/SecondOption.jsx

@@ -1,4 +1,4 @@
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { useMessage } from '@/hooks/useMessage'
 import React, { useEffect, useState } from 'react'
 import DimensionLineSetting from '@/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting'
@@ -67,6 +67,7 @@ export default function SecondOption() {
     id: fontId,
     pos: { x: 745, y: 180 },
     setIsShow: setShowFontSettingModal,
+    isConfig: true,
   }
   const planSizeProps = {
     id: planSizeId,
@@ -86,36 +87,41 @@ export default function SecondOption() {
       case 'font1': {
         //문자 글꼴변경
         setShowFontSettingModal(true)
+        setShowDimensionLineSettingModal(false)
         fontProps.type = 'commonText'
         fontProps.id = fontId + 1
-        addPopup(fontId + 1, 2, <FontSetting {...fontProps} />)
+        addPopup(fontId + 1, 2, <FontSetting {...fontProps} />, true)
         break
       }
 
       case 'font2': {
         //흐름 방향 글꼴 변경
         setShowFontSettingModal(true)
+        setShowDimensionLineSettingModal(false)
         fontProps.type = 'flowText'
         fontProps.id = fontId + 2
-        addPopup(fontId + 2, 2, <FontSetting {...fontProps} />)
+        addPopup(fontId + 2, 2, <FontSetting {...fontProps} />, true)
         break
       }
 
       case 'font3': {
         //치수 글꼴변경
         setShowFontSettingModal(true)
+
+        setShowDimensionLineSettingModal(false)
         fontProps.type = 'lengthText'
         fontProps.id = fontId + 3
-        addPopup(fontId + 3, 2, <FontSetting {...fontProps} />)
+        addPopup(fontId + 3, 2, <FontSetting {...fontProps} />, true)
         break
       }
 
       case 'font4': {
         //회로번호 글꼴변경
         setShowFontSettingModal(true)
+        setShowDimensionLineSettingModal(false)
         fontProps.type = 'circuitNumberText'
         fontProps.id = fontId
-        addPopup(fontId, 2, <FontSetting {...fontProps} />)
+        addPopup(fontId, 2, <FontSetting {...fontProps} />, true)
         break
       }
 
@@ -123,7 +129,7 @@ export default function SecondOption() {
         //치수선 설정
         if (!showDimensionLineSettingModal) {
           setShowDimensionLineSettingModal(true)
-          addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
+          addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />, true)
         } else {
           setShowDimensionLineSettingModal(false)
           closePopup(dimensionId)
@@ -134,7 +140,8 @@ export default function SecondOption() {
       case 'planSize': {
         //도면크기 설정
         setShowPlanSizeSettingModal(true)
-        addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />)
+        setShowDimensionLineSettingModal(false)
+        addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />, true)
         break
       }
     }

src/components/floor-plan/modal/setting01/SettingModal01.jsx

@@ -11,7 +11,7 @@ import { useRecoilValue } from 'recoil'
 import { usePopup } from '@/hooks/usePopup'
 
 export default function SettingModal01(props) {
-  const { setShowDotLineGridModal, setShowFontSettingModal, id } = props
+  const { setShowDotLineGridModal, setShowFontSettingModal, id, isConfig } = props
   console.log(props)
   const [buttonAct, setButtonAct] = useState(1)
   const { getMessage } = useMessage()
@@ -27,7 +27,7 @@ export default function SettingModal01(props) {
         <div className={`modal-pop-wrap sm mount`}>
           <div className="modal-head">
             <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
-            <button className="modal-close" onClick={() => closePopup(id)}>
+            <button className="modal-close" onClick={() => closePopup(id, true)}>
               닫기
             </button>
           </div>

src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx

@@ -87,6 +87,7 @@ export default function DimensionLineSetting(props) {
     setFontColor: setOriginFontColor,
     fontSize: originFontSize,
     setFontSize: setOriginFontSize,
+    isConfig: true,
     id: fontModalId,
     pos: {
       x: 455,
@@ -97,17 +98,17 @@ export default function DimensionLineSetting(props) {
   const popupHandle = (type) => {
     switch (type) {
       case 'color':
-        addPopup(colorModalId, 3, <ColorPickerModal {...colorPickerProps} />)
+        addPopup(colorModalId, 3, <ColorPickerModal {...colorPickerProps} />, true)
         break
       case 'font':
-        addPopup(fontModalId, 3, <FontSetting {...fontProps} />)
+        addPopup(fontModalId, 3, <FontSetting {...fontProps} />, true)
         break
     }
   }
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xxxm`}>
+      <div className={`modal-pop-wrap xxxm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.dimension.line')} </h1>
           <button

src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx

@@ -15,14 +15,14 @@ export default function PlanSizeSetting(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap xsm`}>
+      <div className={`modal-pop-wrap xsm mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.canvas.setting.font.plan.absorption.plan.size.setting')}</h1>
           <button
             className="modal-close"
             onClick={() => {
               setIsShow(false)
-              closePopup(id)
+              closePopup(id, true)
             }}
           >
             닫기

src/hooks/useCanvasEvent.js

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
 import { canvasSizeState, canvasState, canvasZoomState, currentObjectState, fontFamilyState, fontSizeState } from '@/store/canvasAtom'
@@ -18,6 +18,10 @@ export function useCanvasEvent() {
   const lengthTextOption = useRecoilValue(fontSelector('lengthText'))
   const { modifiedPlanFlag, setModifiedPlanFlag } = usePlan()
 
+  useEffect(() => {
+    canvas?.setZoom(canvasZoom / 100)
+  }, [canvasZoom])
+
   // 기본적인 이벤트 필요시 추가
   const attachDefaultEventOnCanvas = () => {
     removeEventOnCanvas()
@@ -365,6 +369,14 @@ export function useCanvasEvent() {
     })
   }
 
+  const handleZoom = (isZoom) => {
+    if (isZoom) {
+      setCanvasZoom(canvasZoom + 10)
+    } else {
+      setCanvasZoom(canvasZoom - 10)
+    }
+  }
+
   const handleZoomClear = () => {
     setCanvasZoom(100)
     canvas.set({ zoom: 1 })
@@ -376,5 +388,6 @@ export function useCanvasEvent() {
     setCanvasForEvent,
     attachDefaultEventOnCanvas,
     handleZoomClear,
+    handleZoom,
   }
 }

src/hooks/useContextMenu.js

@@ -244,7 +244,7 @@ export function useContextMenu() {
       if (temp.length > 0) menu = temp
     }
 
-    handleClick(null, menu)
+    if (menu) handleClick(null, menu)
   }
 
   useEffect(() => {
@@ -256,8 +256,6 @@ export function useContextMenu() {
   }, [currentContextMenu])
 
   useEffect(() => {
-    console.log('currentObject', currentObject)
-
     if (currentObject?.name) {
       console.log(currentObject?.name)
       switch (currentObject.name) {
@@ -477,7 +475,7 @@ export function useContextMenu() {
               {
                 id: 'dimensionLineDisplayEdit',
                 name: getMessage('contextmenu.display.edit'),
-                component: <DimensionLineSetting id={popupId} />,
+                component: <DimensionLineSetting id={popupId} isConfig={false} />,
               },
             ],
           ])

src/hooks/usePopup.js

@@ -4,47 +4,90 @@ import { contextPopupState, popupState } from '@/store/popupAtom'
 export function usePopup() {
   const [popup, setPopup] = useRecoilState(popupState)
   const [contextMenuPopup, setContextMenuPopup] = useRecoilState(contextPopupState)
-  const addPopup = (id, depth, component) => {
+
-    setPopup({ children: [...filterDepth(depth), { id: id, depth: depth, component: component }] })
+  const addPopup = (id, depth, component, isConfig = false) => {
+    setPopup({
+      config: isConfig ? [...filterDepth(depth, isConfig), { id, depth, component, isConfig }] : [...popup.config],
+      other: !isConfig ? [...filterDepth(depth, isConfig), { id, depth, component, isConfig }] : [...popup.other],
+    })
   }
 
-  const closePopup = (id) => {
+  const closePopup = (id, isConfig = false) => {
     if (contextMenuPopup) setContextMenuPopup(null)
-    setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
+    if (isConfig) {
+      setPopup({
+        config: [...filterChildrenPopup(id, isConfig).filter((child) => child.id !== id)],
+        other: popup.other,
+      })
+    } else {
+      setPopup({
+        config: popup.config,
+        other: [...filterChildrenPopup(id, isConfig).filter((child) => child.id !== id)],
+      })
+    }
   }
 
   const filterPopup = (depth) => {
-    setPopup({ children: [...filterDepth(depth)] })
+    setPopup({
+      config: [...filterDepth(depth)],
+      other: [],
+    })
   }
 
-  const filterChildrenPopup = (id) => {
+  const filterChildrenPopup = (id, isConfig) => {
-    const target = popup.children.filter((child) => child.id === id)
+    let target = []
-    if (target.length !== 0) {
+    if (isConfig) {
-      return popup.children.filter((child) => child.depth <= target[0].depth)
+      target = popup?.config.filter((child) => child.id === id)
+    } else {
+      target = popup?.other.filter((child) => child.id === id)
     }
 
-    return popup.children
+    if (target.length !== 0) {
+      if (isConfig) {
+        return popup?.config.filter((child) => child.depth <= target[0].depth)
+      } else {
+        return popup?.other.filter((child) => child.depth <= target[0].depth)
+      }
+    } else {
+      if (isConfig) {
+        return popup.config
+      } else {
+        return popup.other
+      }
+    }
   }
 
   const closePopups = (ids) => {
-    setPopup({ children: [...popup.children.filter((child) => !ids.includes(child.id))] })
+    setPopup({
+      config: [...popup?.config.filter((child) => !ids.includes(child.id))],
+      other: [...popup?.other.filter((child) => !ids.includes(child.id))],
+    })
   }
 
   const closeAll = () => {
-    setPopup({ children: [] })
+    setPopup({
+      other: [],
+      config: [],
+    })
   }
 
   const closePrevPopup = () => {
-    setPopup({ children: [...popup.children.slice(popup.children.length - 1)] })
+    setPopup({
+      config: [...popup?.slice(popup?.length - 1)],
+      other: [],
+    })
   }
 
-  const filterDepth = (depth) => {
+  const filterDepth = (depth, isConfig) => {
-    return [...popup.children.filter((child) => child.depth !== depth)]
+    if (isConfig) {
+      return [...popup?.config.filter((child) => child.depth < depth)]
+    } else {
+      return [...popup?.other.filter((child) => child.depth < depth)]
+    }
   }
 
   return {
     popup,
-    setPopup,
     addPopup,
     closePopup,
     closePopups,

src/store/popupAtom.js

@@ -7,7 +7,8 @@ import { atom } from 'recoil'
 export const popupState = atom({
   key: 'popupState',
   default: {
-    children: [],
+    config: [],
+    other: [],
   },
   dangerouslyAllowMutability: true,
 })