From 82009ef28152643721be485f94e451bad893ed03 Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 21 Oct 2024 16:27:19 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=9C=84=EC=B9=98=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/floor-plan/CanvasFrame.jsx | 11 +++++------ src/components/floor-plan/CanvasMenu.jsx | 14 ++++++++++++++ src/components/floor-plan/FloorPlan.jsx | 4 ++-- src/components/floor-plan/modal/Slope.jsx | 2 +- .../modal/auxiliary/AuxiliaryDrawing.jsx | 2 +- .../floor-plan/modal/basic/BasicSetting.jsx | 2 +- .../circuitTrestle/CircuitTrestleSetting.jsx | 2 +- .../modal/eavesGable/EavesGableEdit.jsx | 3 +-- .../modal/movement/MovementSetting.jsx | 2 +- .../floor-plan/modal/object/ObjectSetting.jsx | 5 ++--- .../modal/outerlinesetting/PropertiesSetting.jsx | 2 +- .../modal/outerlinesetting/WallLineSetting.jsx | 2 +- .../placementShape/PlacementShapeDrawing.jsx | 3 +-- .../placementShape/PlacementShapeSetting.jsx | 16 +++++++++++++--- .../placementSurface/PlacementSurfaceSetting.jsx | 4 ++-- .../roofAllocation/RoofAllocationSetting.jsx | 3 +-- .../roofShape/RoofShapePassivitySetting.jsx | 2 +- .../modal/roofShape/RoofShapeSetting.jsx | 13 +++++++++++-- .../wallLineOffset/WallLineOffsetSetting.jsx | 3 +-- 19 files changed, 61 insertions(+), 34 deletions(-) diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index d3cc9684..b7d9a5da 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -4,14 +4,15 @@ import { useEffect, useRef } from 'react' import { useCanvas } from '@/hooks/useCanvas' import { useEvent } from '@/hooks/useEvent' -import QContextMenu from '@/components/common/context-menu/QContextMenu' import { useContextMenu } from '@/hooks/useContextMenu' import { useRecoilValue } from 'recoil' import { currentObjectState } from '@/store/canvasAtom' import { useCanvasEvent } from '@/hooks/useCanvasEvent' +import QContextMenu from '@/components/common/context-menu/QContextMenu' export default function CanvasFrame({ plan }) { const canvasRef = useRef(null) + console.log(canvasRef) const { canvas } = useCanvas('canvas') const { handleZoomClear } = useCanvasEvent() const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu({ @@ -42,10 +43,8 @@ export default function CanvasFrame({ plan }) { const onClickContextMenu = (index) => {} return ( -
-
- -
+
+ {contextMenu.map((menus, index) => ( @@ -62,7 +61,7 @@ export default function CanvasFrame({ plan }) { > {menu.name} - ))} + ))} ))} diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 1836f4df..54c82ce8 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -23,6 +23,7 @@ import { useCanvasEvent } from '@/hooks/useCanvasEvent' import { popupState } from '@/store/popupAtom' import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01' import { usePopup } from '@/hooks/usePopup' +import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom' const canvasMenus = [ { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING }, @@ -79,6 +80,19 @@ export default function CanvasMenu(props) { const { swalFire } = useSwal() const [popup, setPopup] = useRecoilState(popupState) const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }] + useEffect(() => { + console.log(canvas) + if (canvas) { + const circle = new fabric.Circle({ + left: 300, + top: 300, + radius: 5, + stroke: 'black', + }) + canvas.add(circle) + canvas.renderAll() + } + }, []) const onClickNav = (menu) => { setMenuNumber(menu.index) setCurrentMenu(menu.title) diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index b115ca48..21b90616 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -128,8 +128,8 @@ export default function FloorPlan() { <>
-
- +
+ {showOutlineModal && } {showPropertiesSettingModal && } {showPlaceShapeModal && } diff --git a/src/components/floor-plan/modal/Slope.jsx b/src/components/floor-plan/modal/Slope.jsx index ba9ede2a..4e6d63aa 100644 --- a/src/components/floor-plan/modal/Slope.jsx +++ b/src/components/floor-plan/modal/Slope.jsx @@ -9,7 +9,7 @@ export default function Slope({ setShowSlopeSettingModal }) { const [globalPitch, setGlobalPitch] = useRecoilState(globalPitchState) const inputRef = useRef() return ( - +

{getMessage('plan.menu.placement.surface.slope.setting')}

diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx index 2aa5cd84..8ce885c4 100644 --- a/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx +++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx @@ -121,7 +121,7 @@ export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) { setType(button.type) } return ( - +

{getMessage('modal.auxiliary.drawing')}

diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx index 555cdfcb..94ad7317 100644 --- a/src/components/floor-plan/modal/basic/BasicSetting.jsx +++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx @@ -14,7 +14,7 @@ export default function BasicSetting({ setShowBasicSettingModal }) { const [tabNum, setTabNum] = useState(1) const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState) return ( - +

{getMessage('plan.menu.module.circuit.setting.default')}

diff --git a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx index f165bde0..6daf04b2 100644 --- a/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx +++ b/src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx @@ -14,7 +14,7 @@ export default function CircuitTrestleSetting({ setShowCircuitTrestleSettingModa setCircuitAllocationType, } return ( - +

{getMessage('modal.circuit.trestle.setting')}

diff --git a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx index bab1e696..b19f435e 100644 --- a/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx +++ b/src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx @@ -1,6 +1,5 @@ import { useMessage } from '@/hooks/useMessage' import WithDraggable from '@/components/common/draggable/WithDraggable' -import { useState } from 'react' import Eaves from '@/components/floor-plan/modal/eavesGable/type/Eaves' import Gable from '@/components/floor-plan/modal/eavesGable/type/Gable' import WallMerge from '@/components/floor-plan/modal/eavesGable/type/WallMerge' @@ -35,7 +34,7 @@ export default function EavesGableEdit({ setShowEavesGableEditModal }) { } return ( - +

{getMessage('modal.eaves.gable.edit')}

diff --git a/src/components/floor-plan/modal/movement/MovementSetting.jsx b/src/components/floor-plan/modal/movement/MovementSetting.jsx index 569249d6..2e6bd7ec 100644 --- a/src/components/floor-plan/modal/movement/MovementSetting.jsx +++ b/src/components/floor-plan/modal/movement/MovementSetting.jsx @@ -13,7 +13,7 @@ export default function MovementSetting({ setShowMovementModal }) { ] return ( - +

{getMessage('plan.menu.roof.cover.movement.shape.updown')}

diff --git a/src/components/floor-plan/modal/object/ObjectSetting.jsx b/src/components/floor-plan/modal/object/ObjectSetting.jsx index 764535e3..d028e9a7 100644 --- a/src/components/floor-plan/modal/object/ObjectSetting.jsx +++ b/src/components/floor-plan/modal/object/ObjectSetting.jsx @@ -1,9 +1,8 @@ 'use client' -import { useState, useRef, useEffect } from 'react' +import { useEffect, useRef, useState } from 'react' import { useRecoilValue } from 'recoil' import { useMessage } from '@/hooks/useMessage' -import { useEvent } from '@/hooks/useEvent' import { canvasState } from '@/store/canvasAtom' import { useSwal } from '@/hooks/useSwal' import { useObjectBatch } from '@/hooks/object/useObjectBatch' @@ -74,7 +73,7 @@ export default function ObjectSetting({ setShowObjectSettingModal }) { { id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') }, ] return ( - +

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

diff --git a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx index d26b2ef3..a1e848be 100644 --- a/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx +++ b/src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx @@ -9,7 +9,7 @@ export default function PropertiesSetting(props) { const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(setShowPropertiesSettingModal) return ( - +

{getMessage('modal.canvas.setting.wallline.properties.setting')}

diff --git a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx index 975a582a..84e59da4 100644 --- a/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx +++ b/src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx @@ -109,7 +109,7 @@ export default function WallLineSetting(props) { } return ( - +

{getMessage('modal.cover.outline.drawing')}

diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx index 0d2c301c..9374dbf9 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx @@ -5,7 +5,6 @@ import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle' import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch' import Angle from '@/components/floor-plan/modal/lineTypes/Angle' import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal' -import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall' import { OUTER_LINE_TYPE } from '@/store/outerLineAtom' import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall' import { usePlacementShapeDrawing } from '@/hooks/surface/usePlacementShapeDrawing' @@ -120,7 +119,7 @@ export default function PlacementShapeDrawing({ setShowPlaceShapeDrawingModal }) setType(button.type) } return ( - +

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

diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index 55cfcb6b..bc7ba2b7 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -1,7 +1,6 @@ import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide' import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide' import WithDraggable from '@/components/common/draggable/WithDraggable' -import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react' import { useRecoilState } from 'recoil' import { Fragment, useEffect, useState } from 'react' import { canvasSettingState } from '@/store/canvasAtom' @@ -18,7 +17,18 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) { const [basicSetting, setBasicSettings] = useState({ roofSizeSet: 1, roofAngleSet: 'slope', - roofs: [{ roofApply: true, roofSeq: 1, roofType: 1, roofWidth: 200, roofHeight: 200, roofHajebichi: 200, roofGap: 0, roofLayout: 'parallel' }], + roofs: [ + { + roofApply: true, + roofSeq: 1, + roofType: 1, + roofWidth: 200, + roofHeight: 200, + roofHajebichi: 200, + roofGap: 0, + roofLayout: 'parallel', + }, + ], }) const { getMessage } = useMessage() @@ -159,7 +169,7 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) { } return ( - +

{getMessage('plan.menu.placement.surface.initial.setting')}

diff --git a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx index e667667e..90e05dbf 100644 --- a/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx +++ b/src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx @@ -1,6 +1,6 @@ import { useMessage } from '@/hooks/useMessage' import WithDraggable from '@/components/common/draggable/WithDraggable' -import { useEffect, useState, useRef } from 'react' +import { useEffect, useRef, useState } from 'react' import Image from 'next/image' import PlacementSurface from '@/components/floor-plan/modal/placementSurface/PlacementSurface' import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch' @@ -239,7 +239,7 @@ export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSetting }, []) return ( - +

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

diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx index 72599bbe..52ee2e3f 100644 --- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx +++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx @@ -1,6 +1,5 @@ import { useMessage } from '@/hooks/useMessage' import WithDraggable from '@/components/common/draggable/WithDraggable' -import { useState } from 'react' import QSelectBox from '@/components/common/select/QSelectBox' import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting' @@ -10,7 +9,7 @@ export default function RoofAllocationSetting({ setShowRoofAllocationSettingModa useRoofAllocationSetting(setShowRoofAllocationSettingModal) return ( - +

{getMessage('plan.menu.estimate.roof.alloc')}

diff --git a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx index ec1684a6..9e9dc93f 100644 --- a/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx +++ b/src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx @@ -25,7 +25,7 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet } return ( - +

{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}

diff --git a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx index 60355848..d92ed807 100644 --- a/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx +++ b/src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx @@ -67,10 +67,19 @@ export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) { handleRollBack, } - const directionProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth } + const directionProps = { + pitch, + setPitch, + eavesOffset, + setEavesOffset, + gableOffset, + setGableOffset, + shedWidth, + setShedWidth, + } return ( - +

{getMessage('modal.roof.shape.setting')}

diff --git a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx index 7e5230b1..1e421440 100644 --- a/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx +++ b/src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx @@ -1,6 +1,5 @@ import { useMessage } from '@/hooks/useMessage' import WithDraggable from '@/components/common/draggable/WithDraggable' -import { useState } from 'react' import WallLine from '@/components/floor-plan/modal/wallLineOffset/type/WallLine' import Offset from '@/components/floor-plan/modal/wallLineOffset/type/Offset' import { useWallLineOffsetSetting } from '@/hooks/roofcover/useWallLineOffsetSetting' @@ -38,7 +37,7 @@ export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModa } return ( - +

{getMessage('modal.wallline.offset.setting')}