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

2024-09-20 15:56:20 +09:00 · 2024-09-20 15:56:20 +09:00 · ea6ba4ef2c
commit ea6ba4ef2c
parent 357a5ad569 bd44c9e19f
4 changed files with 88 additions and 26 deletions
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@ -5,19 +5,24 @@ import MenuDepth01 from './MenuDepth01'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
 import { post } from '@/lib/Axios'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
-import { canvasZoomState, verticalHorizontalModeState } from '@/store/canvasAtom'
+import { canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
+import { outerLinePointsState } from '@/store/outerLineAtom'
+import { MENU } from '@/common/common'

 export default function CanvasMenu(props) {
  const [objectNo] = useState('test123240912001') // 이후 삭제 필요
  const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props
  const [menuNumber, setMenuNumber] = useState(null)
  const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
-  const [vertical, setVertical] = useState(true)
  const [type, setType] = useState('')
  const { getMessage } = useMessage()
  const canvasZoom = useRecoilValue(canvasZoomState)
+  const canvas = useRecoilValue(canvasState)
+  const setCurrentMenu = useSetRecoilState(currentMenuState)
+  const setPoints = useSetRecoilState(outerLinePointsState)
+
  const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
  const onClickNav = (number) => {
    setMenuNumber(number)
@ -91,6 +96,11 @@ export default function CanvasMenu(props) {
    }
  }

+  const handleClear = () => {
+    setPoints([])
+    canvas?.clear()
+  }
+
  return (
    <div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
      <div className="canvas-menu-inner">
@ -111,6 +121,7 @@ export default function CanvasMenu(props) {
            className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`}
            onClick={() => {
              onClickNav(2)
+              setCurrentMenu(MENU.ROOF_COVERING.DEFAULT)
            }}
          >
            <button>
@ -118,25 +129,49 @@ export default function CanvasMenu(props) {
              {getMessage('plan.menu.roof.cover')}
            </button>
          </li>
-          <li className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`} onClick={() => onClickNav(3)}>
+          <li
+            className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`}
+            onClick={() => {
+              onClickNav(3)
+              setCurrentMenu(MENU.BATCH_CANVAS.DEFAULT)
+            }}
+          >
            <button>
              <span className="menu-icon con03"></span>
              {getMessage('plan.menu.placement.surface')}
            </button>
          </li>
-          <li className={`canvas-menu-item ${menuNumber === 4 ? 'active' : ''}`} onClick={() => onClickNav(4)}>
+          <li
+            className={`canvas-menu-item ${menuNumber === 4 ? 'active' : ''}`}
+            onClick={() => {
+              onClickNav(4)
+              setCurrentMenu(MENU.MODULE_CIRCUIT_SETTING.DEFAULT)
+            }}
+          >
            <button>
              <span className="menu-icon con04"></span>
              {getMessage('plan.menu.module.circuit.setting')}
            </button>
          </li>
-          <li className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`} onClick={() => onClickNav(5)}>
+          <li
+            className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`}
+            onClick={() => {
+              onClickNav(5)
+              setCurrentMenu(MENU.ESTIMATE.DEFAULT)
+            }}
+          >
            <button>
              <span className="menu-icon con06"></span>
              {getMessage('plan.menu.estimate')}
            </button>
          </li>
-          <li className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`} onClick={() => onClickNav(6)}>
+          <li
+            className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`}
+            onClick={() => {
+              onClickNav(6)
+              setCurrentMenu(MENU.POWER_GENERATION_SIMULATION.DEFAULT)
+            }}
+          >
            <button>
              <span className="menu-icon con05"></span>
              {getMessage('plan.menu.simulation')}
@ -171,7 +206,7 @@ export default function CanvasMenu(props) {
                <button className="control-btn plus"></button>
              </div>
              <div className="btn-from">
-                <button className="btn07"></button>
+                <button className="btn07" onClick={handleClear}></button>
                <button className="btn08" onClick={handleSaveSettings}></button>
                <button className="btn09"></button>
              </div>
--- a/src/components/floor-plan/MenuDepth01.jsx
+++ b/src/components/floor-plan/MenuDepth01.jsx
@ -3,14 +3,19 @@
 import { ToggleonMouse } from '@/components/header/Header'
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useState } from 'react'
+import { MENU } from '@/common/common'
+import { currentMenuState } from '@/store/canvasAtom'
+import { useSetRecoilState } from 'recoil'

 export default function MenuDepth01(props) {
  const { setShowOutlineModal, type } = props
  const { getMessage } = useMessage()
  const [activeMenu, setActiveMenu] = useState()
-  const onClickMenu = (menuNum) => {
-    setActiveMenu(menuNum)
-    setShowOutlineModal(menuNum === 0)
+  const setCurrentMenu = useSetRecoilState(currentMenuState)
+  const onClickMenu = ({ id, menu, name }) => {
+    setActiveMenu(id)
+    setShowOutlineModal(menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
+    setCurrentMenu(menu)
  }

  const menus = [
@ -26,21 +31,21 @@ export default function MenuDepth01(props) {
  const menuInfo = {
    outline: [
      // 지붕덮개
-      { id: 0, name: 'plan.menu.roof.cover.outline.drawing' },
-      { id: 1, name: 'plan.menu.roof.cover.roof.shape.setting' },
-      { id: 2, name: 'plan.menu.roof.cover.roof.shape.edit' },
-      { id: 3, name: 'plan.menu.roof.cover.auxiliary.line.drawing' },
+      { id: 0, name: 'plan.menu.roof.cover.outline.drawing', menu: MENU.ROOF_COVERING.EXTERIOR_WALL_LINE },
+      { id: 1, name: 'plan.menu.roof.cover.roof.shape.setting', menu: MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS },
+      { id: 2, name: 'plan.menu.roof.cover.roof.shape.edit', menu: MENU.ROOF_COVERING.ROOF_SHAPE_EDITING },
+      { id: 3, name: 'plan.menu.roof.cover.auxiliary.line.drawing', menu: MENU.ROOF_COVERING.HELP_LINE_DRAWING },
    ],
    surface: [
      // 배치면
-      { id: 0, name: 'plan.menu.placement.surface.drawing' },
-      { id: 1, name: 'plan.menu.placement.surface.surface' },
-      { id: 2, name: 'plan.menu.placement.surface.object' },
+      { id: 0, name: 'plan.menu.placement.surface.drawing', menu: MENU.BATCH_CANVAS.BATCH_DRAWING },
+      { id: 1, name: 'plan.menu.placement.surface.surface', menu: MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH },
+      { id: 2, name: 'plan.menu.placement.surface.object', menu: MENU.BATCH_CANVAS.OBJECT_BATCH },
    ],
    module: [
      // 모듈, 회로 구성
-      { id: 0, name: 'plan.menu.module.circuit.setting.default' },
-      { id: 1, name: 'plan.menu.module.circuit.setting.circuit.trestle.setting' },
+      { id: 0, name: 'plan.menu.module.circuit.setting.default', menu: MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING },
+      { id: 1, name: 'plan.menu.module.circuit.setting.circuit.trestle.setting', menu: MENU.MODULE_CIRCUIT_SETTING.CIRCUIT_TRESTLE_SETTING },
    ],
  }

@ -55,7 +60,7 @@ export default function MenuDepth01(props) {
        {menuInfo[type].map((menu) => {
          return (
            <li key={menu.id} className={`canvas-depth2-item ${menu.id === activeMenu ? 'active' : ''}`}>
-              <button onClick={() => onClickMenu(menu.id)}>{getMessage(menu.name)}</button>
+              <button onClick={() => onClickMenu(menu)}>{getMessage(menu.name)}</button>
            </li>
          )
        })}
--- a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
+++ b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx
@ -22,7 +22,8 @@ import { distanceBetweenPoints } from '@/util/canvas-util'
 export default function OuterLineWall(props) {
  const { setShowOutlineModal } = props
  const { getMessage } = useMessage()
-  const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners } = useEvent()
+  const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
+    useEvent()
  const { addLineText, removeLineText } = useLine()
  const verticalHorizontalMode = useRecoilValue(verticalHorizontalModeState)

@ -40,8 +41,11 @@ export default function OuterLineWall(props) {
  const canvas = useRecoilValue(canvasState)

  useEffect(() => {
-    removeAllMouseEventListeners()
+    removeMouseEvent('mouse:down', mouseDown)
    addCanvasMouseEventListener('mouse:down', mouseDown)
+    return () => {
+      removeAllMouseEventListeners()
+    }
  }, [verticalHorizontalMode, points])

  useEffect(() => {
--- a/src/hooks/useEvent.js
+++ b/src/hooks/useEvent.js
@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { canvasState, canvasZoomState, currentMenuState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'

@ -8,7 +8,7 @@ export function useEvent() {
  const currentMenu = useRecoilValue(currentMenuState)
  const keyboardEventListeners = useRef([])
  const mouseEventListeners = useRef([])
-  const setCanvasZoom = useSetRecoilState(canvasZoomState)
+  const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)

  useEffect(() => {
    if (!canvas) {
@ -16,6 +16,13 @@ export function useEvent() {
    }
    removeAllMouseEventListeners()
    removeAllDocumentEventListeners()
+
+    /**
+     * wheelEvent
+     */
+    canvas?.off('mouse:wheel')
+    canvas?.on('mouse:wheel', wheelEvent)
+
    addDefaultEvent()
  }, [currentMenu, canvas])

@ -23,7 +30,7 @@ export function useEvent() {
    //default Event 추가
    addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent)
    addCanvasMouseEventListener('mouse:out', defaultMouseOutEvent)
-    addCanvasMouseEventListener('mouse:wheel', wheelEvent)
+
    addDocumentEventListener('keydown', document, defaultKeyboardEvent)
  }

@ -126,10 +133,21 @@ export function useEvent() {
    keyboardEventListeners.current.length = 0 // 배열 초기화
  }

+  const removeMouseEvent = (type, handler) => {
+    mouseEventListeners.current = mouseEventListeners.current.filter((event) => {
+      if (event.type === type && event.handler === handler) {
+        canvas.off(type, handler)
+        return false
+      }
+      return true
+    })
+  }
+
  return {
    addDocumentEventListener,
    addCanvasMouseEventListener,
    removeAllMouseEventListeners,
    removeAllDocumentEventListeners,
+    removeMouseEvent,
  }
 }