From fe856298194fb4488fec7c12a8d700420efcb2db Mon Sep 17 00:00:00 2001 From: minsik Date: Wed, 6 Nov 2024 15:45:40 +0900 Subject: [PATCH 1/5] =?UTF-8?q?context=20menu=20=EB=B2=84=EA=B7=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/context-menu/QContextMenu.jsx | 20 ++++++++++++------- src/components/floor-plan/CanvasFrame.jsx | 4 ++-- src/hooks/useContextMenu.js | 3 +-- src/hooks/useEvent.js | 14 +++++++++---- 4 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/components/common/context-menu/QContextMenu.jsx b/src/components/common/context-menu/QContextMenu.jsx index 9d3eb4f3..f6665930 100644 --- a/src/components/common/context-menu/QContextMenu.jsx +++ b/src/components/common/context-menu/QContextMenu.jsx @@ -1,16 +1,20 @@ 'use client' import { useEffect } from 'react' import '@/styles/contents.scss' -import { useRecoilState } from 'recoil' +import { useRecoilState, useRecoilValue } from 'recoil' import { contextMenuListState, contextMenuState } from '@/store/contextMenu' import { useTempGrid } from '@/hooks/useTempGrid' +import { useContextMenu } from '@/hooks/useContextMenu' +import { useEvent } from '@/hooks/useEvent' export default function QContextMenu(props) { - const { contextRef, canvasProps, handleKeyup } = props + const { contextRef, canvasProps } = props const [contextMenu, setContextMenu] = useRecoilState(contextMenuState) - const [contextMenuList, setContextMenuList] = useRecoilState(contextMenuListState) + const contextMenuList = useRecoilValue(contextMenuListState) const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴 const { tempGridMode, setTempGridMode } = useTempGrid() + const { handleKeyup } = useContextMenu() + const { addDocumentEventListener, removeDocumentEvent } = useEvent() let contextType = '' @@ -22,13 +26,13 @@ export default function QContextMenu(props) { } } } - const getYPosition = (e) => { const contextLength = contextMenuList.reduce((acc, cur, index) => { return acc + cur.length }, 0) return e?.clientY - (contextLength * 25 + contextMenuList.length * 2 * 17) } + useEffect(() => { if (!contextRef.current) return @@ -40,7 +44,7 @@ export default function QContextMenu(props) { y: window.innerHeight / 2 < e.pageY ? getYPosition(e) : e.pageY, } setContextMenu({ visible: true, ...position }) - document.addEventListener('keyup', (e) => handleKeyup(e)) + addDocumentEventListener('keyup', document, handleKeyup) canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제 } @@ -51,8 +55,9 @@ export default function QContextMenu(props) { const handleOutsideClick = (e) => { // e.preventDefault() - if (contextMenu.visible && !ref.current.contains(e.target)) { + if (contextMenu.visible) { setContextMenu({ ...contextMenu, visible: false }) + removeDocumentEvent('keyup') } } @@ -61,10 +66,11 @@ export default function QContextMenu(props) { document.addEventListener('click', handleOutsideClick) return () => { + removeDocumentEvent('keyup') document.removeEventListener('click', handleClick) document.removeEventListener('click', handleOutsideClick) } - }, [contextRef, contextMenu]) + }, [contextRef, contextMenuList]) const handleObjectMove = () => { activeObject.set({ diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index b0881b6e..ad10485c 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -19,7 +19,7 @@ export default function CanvasFrame() { const { canvas } = useCanvas('canvas') const { canvasLoadInit, gridInit } = useCanvasConfigInitialize() const currentMenu = useRecoilValue(currentMenuState) - const { contextMenu, handleClick, handleKeyup } = useContextMenu() + const { contextMenu, handleClick } = useContextMenu() const { selectedPlan, modifiedPlanFlag, checkCanvasObjectEvent, resetModifiedPlans } = usePlan() useEvent() @@ -57,7 +57,7 @@ export default function CanvasFrame() {
- + {contextMenu?.map((menus, index) => (
    {menus.map((menu) => ( diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js index 979675be..f2ad1a65 100644 --- a/src/hooks/useContextMenu.js +++ b/src/hooks/useContextMenu.js @@ -230,12 +230,12 @@ export function useContextMenu() { y: 180, }) setCurrentContextMenu(menu) + currentMenuSetting() setQContextMenu({ ...qContextMenu, visible: false }) } const handleKeyup = (e) => { let menu = null - for (let i = 0; i < contextMenu.length; i++) { const temp = contextMenu[i].filter((menu) => { return menu.shortcut?.includes(e.key) @@ -257,7 +257,6 @@ export function useContextMenu() { useEffect(() => { if (currentObject?.name) { - console.log(currentObject?.name) switch (currentObject.name) { case 'triangleDormer': case 'pentagonDormer': diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js index a84dea38..891ad101 100644 --- a/src/hooks/useEvent.js +++ b/src/hooks/useEvent.js @@ -1,12 +1,11 @@ import { useEffect, useRef } from 'react' -import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' +import { useRecoilValue, useSetRecoilState } from 'recoil' import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom' import { fabric } from 'fabric' -import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util' +import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util' import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint' import { useDotLineGrid } from '@/hooks/useDotLineGrid' import { useTempGrid } from '@/hooks/useTempGrid' -import { gridDisplaySelector } from '@/store/settingAtom' export function useEvent() { const canvas = useRecoilValue(canvasState) @@ -100,7 +99,13 @@ export function useEvent() { const distance = calculateDistance(pointer, closestLine) if (distance < adsorptionRange) { - arrivalPoint = closestLine.direction === 'vertical' ? { x: closestLine.x1, y: pointer.y } : { x: pointer.x, y: closestLine.y1 } + arrivalPoint = + closestLine.direction === 'vertical' + ? { x: closestLine.x1, y: pointer.y } + : { + x: pointer.x, + y: closestLine.y1, + } } } } @@ -261,6 +266,7 @@ export function useEvent() { addCanvasMouseEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, + removeDocumentEvent, removeMouseEvent, removeMouseLine, initEvent, From d921078aaa776b6a9ad8a46060e61d2f9ccf13d6 Mon Sep 17 00:00:00 2001 From: minsik Date: Wed, 6 Nov 2024 15:46:23 +0900 Subject: [PATCH 2/5] =?UTF-8?q?useRecoilState=20->=20useRecoilValue=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/popupManager/PopupManager.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/common/popupManager/PopupManager.jsx b/src/components/common/popupManager/PopupManager.jsx index f24a8526..e84ee610 100644 --- a/src/components/common/popupManager/PopupManager.jsx +++ b/src/components/common/popupManager/PopupManager.jsx @@ -1,10 +1,10 @@ 'use client' -import { useRecoilState } from 'recoil' +import { useRecoilValue } from 'recoil' import { popupState } from '@/store/popupAtom' import { Fragment } from 'react' export default function PopupManager() { - const [popup, setPopup] = useRecoilState(popupState) + const popup = useRecoilValue(popupState) return [ ...popup?.config.map((child) => {child.component}), From dbbb575fddaa00528ac3f222755985e12d38751c Mon Sep 17 00:00:00 2001 From: minsik Date: Wed, 6 Nov 2024 15:46:40 +0900 Subject: [PATCH 3/5] =?UTF-8?q?=EB=8B=A4=EA=B5=AD=EC=96=B4=20=ED=82=A4=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/color-picker/ColorPickerModal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/color-picker/ColorPickerModal.jsx b/src/components/common/color-picker/ColorPickerModal.jsx index 9d0074e0..03d9899f 100644 --- a/src/components/common/color-picker/ColorPickerModal.jsx +++ b/src/components/common/color-picker/ColorPickerModal.jsx @@ -52,7 +52,7 @@ export default function ColorPickerModal(props) { closePopup(id, isConfig) }} > - {getMessage('common.message.save')} + {getMessage('modal.common.save')}
From b0a9e91d077e161208a329a66442ec2fcb97990f Mon Sep 17 00:00:00 2001 From: minsik Date: Wed, 6 Nov 2024 15:47:04 +0900 Subject: [PATCH 4/5] =?UTF-8?q?=EC=B4=88=EA=B8=B0=20position=20=EC=84=B8?= =?UTF-8?q?=ED=8C=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/draggable/WithDraggable.jsx | 12 ++++++------ .../placementSurface/PlacementSurfaceSetting.jsx | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/common/draggable/WithDraggable.jsx b/src/components/common/draggable/WithDraggable.jsx index 29952981..76656837 100644 --- a/src/components/common/draggable/WithDraggable.jsx +++ b/src/components/common/draggable/WithDraggable.jsx @@ -1,18 +1,18 @@ 'use client' -import { useEffect, useState } from 'react' +import { useState } from 'react' import Draggable from 'react-draggable' -export default function WithDraggable({ isShow, children, pos, handle = '' }) { - const [position, setPosition] = useState({ x: 0, y: 0 }) +export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, handle = '' }) { + const [position, setPosition] = useState(pos) const handleOnDrag = (e, data) => { e.stopPropagation() setPosition({ x: data.x, y: data.y }) } - useEffect(() => { - setPosition({ ...pos }) - }, []) + // useEffect(() => { + // setPosition({ ...pos }) + // }, []) return ( <> diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx index c22d2248..431e0f85 100644 --- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx +++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx @@ -240,7 +240,7 @@ export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } }) }, []) return ( - +

{getMessage('plan.menu.placement.surface.arrangement')}

From c53653d0819915325297fd6bab8f7b60f71e5e42 Mon Sep 17 00:00:00 2001 From: minsik Date: Wed, 6 Nov 2024 15:47:54 +0900 Subject: [PATCH 5/5] =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../floor-plan/modal/setting01/SettingModal01.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx index e1bef1f0..222226c1 100644 --- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx +++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx @@ -11,12 +11,12 @@ import { useRecoilValue } from 'recoil' import { usePopup } from '@/hooks/usePopup' export default function SettingModal01(props) { - const { setShowDotLineGridModal, setShowFontSettingModal, id, isConfig } = props - console.log(props) + const { id } = props const [buttonAct, setButtonAct] = useState(1) const { getMessage } = useMessage() const canGridOptionSeletorValue = useRecoilValue(canGridOptionSeletor) - const { addPopup, closePopup } = usePopup() + const { closePopup } = usePopup() + const handleBtnClick = (num) => { setButtonAct(num) }