diff --git a/src/components/floor-plan/modal/grid/DotLineGrid.jsx b/src/components/floor-plan/modal/grid/DotLineGrid.jsx index db700207..e9d32a3a 100644 --- a/src/components/floor-plan/modal/grid/DotLineGrid.jsx +++ b/src/components/floor-plan/modal/grid/DotLineGrid.jsx @@ -1,12 +1,15 @@ import WithDraggable from '@/components/common/draggable/withDraggable' import QSelectBox from '@/components/common/select/QSelectBox' -import { useState } from 'react' +import { useEffect, useState } from 'react' import { useMessage } from '@/hooks/useMessage' import { canvasState, dotLineGridSettingState, dotLineIntervalSelector } from '@/store/canvasAtom' import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil' import { onlyNumberInputChange } from '@/util/input-utils' import { fabric } from 'fabric' +import { useAxios } from '@/hooks/useAxios' +import { useSwal } from '@/hooks/useSwal' import { gridColorState } from '@/store/gridAtom' +import { settingModalGridOptionsState } from '@/store/settingAtom' const TYPE = { DOT: 'DOT', @@ -15,6 +18,7 @@ const TYPE = { export default function DotLineGrid(props) { // const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state + const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 const [close, setClose] = useState(false) const { setShowDotLineGridModal } = props const gridColor = useRecoilValue(gridColorState) @@ -25,6 +29,11 @@ export default function DotLineGrid(props) { const interval = useRecoilValue(dotLineIntervalSelector) const { getMessage } = useMessage() + const { get, post } = useAxios() + const { swalFire } = useSwal() + + const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState) + const SelectOption = [ { id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 }, { id: 2, name: '1/2', value: 1 / 2 }, @@ -34,13 +43,23 @@ export default function DotLineGrid(props) { const [selectOption, setSelectOption] = useState(SelectOption[0]) const HandleClickClose = () => { - // setClose(true) - // setTimeout(() => { - // setModalOption({ ...modalOption, gridoption: false }) - // setClose(false) - // }, 180) + setShowDotLineGridModal(false) // 모달 닫기 처리 + + const newGridOptions = [...gridOptions] // 모달 닫으면서 점선그리드 버튼 비활성화 + newGridOptions.map((item) => { + if (item.id === 2) { + item.selected = false + } + }) + setGridOptions(newGridOptions) } + // 데이터를 최초 한 번만 조회 + useEffect(() => { + console.log('DotLineGrid useEffect 실행') + fetchGridSettings() + }, [objectNo]) + const handleCheckBoxChange = (e) => { const { value, checked } = e.target setDotLineGridSettingState((prev) => { @@ -51,118 +70,174 @@ export default function DotLineGrid(props) { }) } - const handleSave = () => { - // 1. 점.선 그리드 설정으로 만들어진 기존 오브젝트 제거 - canvas - ?.getObjects() - .filter((obj) => obj.name === 'lineGrid') - .forEach((obj) => canvas?.remove(obj)) - canvas - ?.getObjects() - .filter((obj) => obj.name === 'dotGrid') - .forEach((obj) => canvas?.remove(obj)) + // Canvas Grid Setting 조회 및 초기화 + const fetchGridSettings = async () => { + try { + const res = await get({ url: `/api/canvas-management/canvas-grid-settings/by-object/${objectNo}` }) - const horizontalInterval = interval.horizontalInterval - const verticalInterval = interval.verticalInterval - - if (dotLineGridSetting.DOT) { - const circle = new fabric.Circle({ - radius: 2, - fill: 'red', - strokeWidth: 0.7, - originX: 'center', - originY: 'center', - selectable: false, - lockMovementX: true, - lockMovementY: true, - lockRotation: true, - lockScalingX: true, - lockScalingY: true, - }) - - const patternSourceCanvas = new fabric.StaticCanvas(null, { - width: horizontalInterval, - height: verticalInterval, - }) - - patternSourceCanvas.add(circle) - - circle.set({ - left: patternSourceCanvas.width / 2, - top: patternSourceCanvas.height / 2, - }) - - patternSourceCanvas.renderAll() - - const pattern = new fabric.Pattern({ - source: patternSourceCanvas.getElement(), - repeat: 'repeat', - }) - - const backgroundPolygon = new fabric.Polygon( - [ - { x: 0, y: 0 }, - { x: canvas.width, y: 0 }, - { x: canvas.width, y: canvas.height }, - { x: 0, y: canvas.height }, - ], - { - fill: pattern, - selectable: false, - name: 'dotGrid', + const patternData = { + INTERVAL: { + type: res.gridType, + horizontalInterval: res.gridHorizon, + verticalInterval: res.gridVertical, + ratioInterval: res.gridRatio, }, - ) + dimension: res.gridDimen, + DOT: res.dotGridDisplay, + LINE: res.lineGridDisplay, + } - canvas.add(backgroundPolygon) - backgroundPolygon.sendToBack() - canvas.renderAll() + const matchedOption = SelectOption.find((option) => option.value == res.gridDimen) + + // dimension 값에 맞는 옵션을 선택 + setSelectOption(matchedOption) + + // 서버에서 받은 데이터로 상태 업데이트 + setDotLineGridSettingState(patternData) + } catch (error) { + console.error('Data fetching error:', error) } + } - if (dotLineGridSetting.LINE) { - for (let i = 0; i < canvas.height / verticalInterval + 1; i++) { - const horizontalLine = new fabric.Line( - [0, i * verticalInterval - verticalInterval / 2, canvas.width, i * verticalInterval - verticalInterval / 2], - { - stroke: gridColor, - strokeWidth: 1, - selectable: true, + // 저장 버튼 클릭 시 + const handleSave = async () => { + try { + const patternData = { + objectNo, + dotGridDisplay: dotLineGridSetting.DOT, + lineGridDisplay: dotLineGridSetting.LINE, + gridType: dotLineGridSetting.INTERVAL.type, + gridHorizon: dotLineGridSetting.INTERVAL.horizontalInterval, + gridVertical: dotLineGridSetting.INTERVAL.verticalInterval, + gridRatio: dotLineGridSetting.INTERVAL.ratioInterval, + gridDimen: dotLineGridSetting.INTERVAL.dimension, + } + + // HTTP POST 요청 보내기 + await post({ url: `/api/canvas-management/canvas-grid-settings`, data: patternData }).then((res) => { + swalFire({ text: getMessage(res.returnMessage) }) + + // 1. 점.선 그리드 설정으로 만들어진 기존 오브젝트 제거 + canvas + ?.getObjects() + .filter((obj) => obj.name === 'lineGrid') + .forEach((obj) => canvas?.remove(obj)) + canvas + ?.getObjects() + .filter((obj) => obj.name === 'dotGrid') + .forEach((obj) => canvas?.remove(obj)) + + if (patternData.dotGridDisplay) { + const circle = new fabric.Circle({ + radius: 2, + fill: 'red', + strokeWidth: 0.7, + originX: 'center', + originY: 'center', + selectable: false, lockMovementX: true, lockMovementY: true, lockRotation: true, lockScalingX: true, lockScalingY: true, - name: 'lineGrid', - strokeDashArray: [5, 2], - opacity: 0.3, - direction: 'horizontal', - }, - ) - canvas.add(horizontalLine) - } + }) - for (let i = 0; i < canvas.width / horizontalInterval + 1; i++) { - const verticalLine = new fabric.Line( - [i * horizontalInterval - horizontalInterval / 2, 0, i * horizontalInterval - horizontalInterval / 2, canvas.height], - { - stroke: 'black', - strokeWidth: 1, - selectable: true, - lockMovementX: true, - lockMovementY: true, - lockRotation: true, - lockScalingX: true, - lockScalingY: true, - name: 'lineGrid', - strokeDashArray: [5, 2], - opacity: 0.3, - direction: 'vertical', - }, - ) - canvas.add(verticalLine) - } + const patternSourceCanvas = new fabric.StaticCanvas(null, { + width: patternData.gridHorizon, + height: patternData.gridVertical, + }) + + patternSourceCanvas.add(circle) + + circle.set({ + left: patternSourceCanvas.width / 2, + top: patternSourceCanvas.height / 2, + }) + + patternSourceCanvas.renderAll() + + const pattern = new fabric.Pattern({ + source: patternSourceCanvas.getElement(), + repeat: 'repeat', + }) + + const backgroundPolygon = new fabric.Polygon( + [ + { x: 0, y: 0 }, + { x: canvas.width, y: 0 }, + { x: canvas.width, y: canvas.height }, + { x: 0, y: canvas.height }, + ], + { + fill: pattern, + selectable: false, + name: 'dotGrid', + }, + ) + + canvas.add(backgroundPolygon) + backgroundPolygon.sendToBack() + canvas.renderAll() + } + + if (patternData.lineGridDisplay) { + for (let i = 0; i < canvas.height / patternData.gridVertical + 1; i++) { + const horizontalLine = new fabric.Line( + [ + 0, + i * patternData.gridVertical - patternData.gridVertical / 2, + canvas.width, + i * patternData.gridVertical - patternData.gridVertical / 2, + ], + { + stroke: gridColor, + strokeWidth: 1, + selectable: true, + lockMovementX: true, + lockMovementY: true, + lockRotation: true, + lockScalingX: true, + lockScalingY: true, + name: 'lineGrid', + strokeDashArray: [5, 2], + opacity: 0.3, + direction: 'horizontal', + }, + ) + canvas.add(horizontalLine) + } + + for (let i = 0; i < canvas.width / patternData.gridHorizon + 1; i++) { + const verticalLine = new fabric.Line( + [ + i * patternData.gridHorizon - patternData.gridHorizon / 2, + 0, + i * patternData.gridHorizon - patternData.gridHorizon / 2, + canvas.height, + ], + { + stroke: 'black', + strokeWidth: 1, + selectable: true, + lockMovementX: true, + lockMovementY: true, + lockRotation: true, + lockScalingX: true, + lockScalingY: true, + name: 'lineGrid', + strokeDashArray: [5, 2], + opacity: 0.3, + direction: 'vertical', + }, + ) + canvas.add(verticalLine) + } + } + canvas.renderAll() + }) + } catch (error) { + swalFire({ text: getMessage(res.returnMessage), icon: 'error' }) } - - canvas.renderAll() } const handleRadioChange = (e) => { @@ -224,7 +299,7 @@ export default function DotLineGrid(props) {

{getMessage('modal.canvas.setting.grid.dot.line.setting')}

-
diff --git a/src/components/floor-plan/modal/setting01/FirstOption.jsx b/src/components/floor-plan/modal/setting01/FirstOption.jsx index ac8f08d6..c4e75ea4 100644 --- a/src/components/floor-plan/modal/setting01/FirstOption.jsx +++ b/src/components/floor-plan/modal/setting01/FirstOption.jsx @@ -116,11 +116,21 @@ export default function FirstOption() { } } - const onClickDimension = async (item) => { - const options = settingModalFirstOptions?.dimensionDisplay.map((option) => { - option.selected = option.id === item.id - return option - }) + const onClickOnlyOne = async (item) => { + //화면 표시 + if (item.column === 'onlyBorder' || item.column === 'lineHatch' || item.column === 'allPainted') { + const options2 = settingModalFirstOptions?.option2.map((option2) => { + option2.selected = option2.id === item.id + return option2 + }) + + //치수 표시 + } else { + const options = settingModalFirstOptions?.dimensionDisplay.map((option) => { + option.selected = option.id === item.id + return option + }) + } setSettingModalFirstOptions({ option1, option2, dimensionDisplay }) @@ -205,7 +215,7 @@ export default function FirstOption() {
{settingModalFirstOptions && settingModalFirstOptions.dimensionDisplay.map((item) => ( - @@ -217,7 +227,7 @@ export default function FirstOption() {
{settingModalFirstOptions && settingModalFirstOptions.option2.map((item) => ( - diff --git a/src/components/floor-plan/modal/setting01/GridOption.jsx b/src/components/floor-plan/modal/setting01/GridOption.jsx index edf1e802..c5502d6f 100644 --- a/src/components/floor-plan/modal/setting01/GridOption.jsx +++ b/src/components/floor-plan/modal/setting01/GridOption.jsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react' +import React, { useEffect, useState } from 'react' import { useRecoilState } from 'recoil' import { settingModalGridOptionsState } from '@/store/settingAtom' import { useMessage } from '@/hooks/useMessage' @@ -16,9 +16,11 @@ export default function GridOption(props) { const { tempGridMode, setTempGridMode } = useTempGrid() const [color, setColor] = useColor(gridColor) + const [colorPickerShow, setColorPickerShow] = useState(false) useEffect(() => { - console.log(color) + console.log('GridOption useEffect 실행') + //console.log(color) setGridColor(color.hex) }, [color])