diff --git a/src/app/api/html2canvas/route.js b/src/app/api/html2canvas/route.js deleted file mode 100644 index 21f93c82..00000000 --- a/src/app/api/html2canvas/route.js +++ /dev/null @@ -1,22 +0,0 @@ -'use server' - -import fs from 'fs/promises' - -import { NextResponse } from 'next/server' -import { writeImage, writeImageBuffer } from '@/lib/fileAction' - -export async function GET(req) { - const path = 'public/plan-map-images' - const q = req.nextUrl.searchParams.get('q') - const fileNm = req.nextUrl.searchParams.get('fileNm') - const zoom = req.nextUrl.searchParams.get('zoom') - const targetUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${q}&zoom=${zoom}&maptype=satellite&size=640x640&scale=1&key=AIzaSyDO7nVR1N_D2tKy60hgGFavpLaXkHpiHpc` - const decodeUrl = decodeURIComponent(targetUrl) - - const response = await fetch(decodeUrl) - const data = await response.arrayBuffer() - const buffer = Buffer.from(data) - await writeImage(fileNm, buffer) - - return NextResponse.json({ fileNm: `${fileNm}.png` }) -} diff --git a/src/app/api/image-upload/route.js b/src/app/api/image-upload/route.js deleted file mode 100644 index 219544fe..00000000 --- a/src/app/api/image-upload/route.js +++ /dev/null @@ -1,15 +0,0 @@ -'use server' - -import { NextResponse } from 'next/server' -import { writeImage } from '@/lib/fileAction' - -export async function POST(req) { - const formData = await req.formData() - const file = formData.get('file') - const fileName = formData.get('fileName') - const arrayBuffer = await file.arrayBuffer() - const buffer = Buffer.from(arrayBuffer) - await writeImage(fileName, buffer) - - return NextResponse.json({ fileNm: `${fileName}.png` }) -} diff --git a/src/app/api/swr-tutorial/route.js b/src/app/api/swr-tutorial/route.js deleted file mode 100644 index 99ebaf15..00000000 --- a/src/app/api/swr-tutorial/route.js +++ /dev/null @@ -1,25 +0,0 @@ -import { NextResponse } from 'next/server' - -const defaultData = [ - { - id: 1, - name: 'John Doe', - email: 'john.doe@example.com', - }, - { - id: 2, - name: 'Jane Lee', - email: 'jane.lee@example.com', - }, -] - -export async function GET(req, res) { - return NextResponse.json(defaultData) -} - -export const POST = async (req, res) => { - const { id, name, email } = await req.json() - const newData = { id, name, email } - console.log('๐Ÿš€ ~ POST ~ newData:', newData) - return NextResponse.json([...defaultData, newData]) -} diff --git a/src/app/playground/page.jsx b/src/app/playground/page.jsx deleted file mode 100644 index 3a3ad1d1..00000000 --- a/src/app/playground/page.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import Playground from '@/components/Playground' - -export default async function PlaygroundPage() { - return ( - <> - - - ) -} diff --git a/src/app/roof/page.jsx b/src/app/roof/page.jsx deleted file mode 100644 index 960ffa89..00000000 --- a/src/app/roof/page.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import Hero from '@/components/Hero' -import Roof from '@/components/Roof' - -export default async function RoofPage() { - return ( - <> - -
- -
- - ) -} diff --git a/src/app/roof2/page.jsx b/src/app/roof2/page.jsx deleted file mode 100644 index 94e86fbe..00000000 --- a/src/app/roof2/page.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import Roof2 from '@/components/Roof2' - -export default async function Roof2Page() { - return ( - <> -
- -
- - ) -} diff --git a/src/app/settings/page.jsx b/src/app/settings/page.jsx deleted file mode 100644 index ab714682..00000000 --- a/src/app/settings/page.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import Hero from '@/components/Hero' -import Settings from '@/components/Settings' - -export default async function SettingsPage() { - return ( - <> - -
- -
- - ) -} diff --git a/src/components/GridSettingsModal.jsx b/src/components/GridSettingsModal.jsx deleted file mode 100644 index 92b2e618..00000000 --- a/src/components/GridSettingsModal.jsx +++ /dev/null @@ -1,273 +0,0 @@ -import { useEffect, useRef, useState } from 'react' -import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input } from '@nextui-org/react' -import { useRecoilState, useRecoilValue } from 'recoil' -import { modalContent, modalState } from '@/store/modalAtom' -import { guideLineState, horiGuideLinesState, vertGuideLinesState } from '@/store/canvasAtom' -import { fabric } from 'fabric' -import { ColorPicker, useColor } from 'react-color-palette' -import 'react-color-palette/css' -import { gridColorState } from '@/store/gridAtom' - -export default function GridSettingsModal(props) { - const { canvasProps } = props - const [isCustomGridSetting, setIsCustomGridSetting] = useState(true) - const [gridCheckedValue, setGridCheckValue] = useState([]) - const [ratioValue, setRatioValue] = useState('1') - const moduleLength = useRef(null) //๋ชจ๋“ˆ mm ๊ธธ์ด ์ž…๋ ฅ - const customModuleHoriLength = useRef(null) - const customModuleVertLength = useRef(null) - - const [open, setOpen] = useRecoilState(modalState) - const [guideLine, setGuideLine] = useRecoilState(guideLineState) - const [horiGuideLines, setHoriGuideLines] = useRecoilState(horiGuideLinesState) - const [vertGuideLines, setVertGuideLines] = useRecoilState(vertGuideLinesState) - - const gridSettingArray = [] - - const gridColor = useRecoilValue(gridColorState) - const [colorPickerShow, setColorPickerShow] = useState(false) - - const boxStyle = { - width: '50px', - height: '30px', - border: '1px solid black', - backgroundColor: guideColor.hex, - } - useEffect(() => { - moduleLength.current.value = 90 - customModuleHoriLength.current.value = 90 - customModuleVertLength.current.value = 90 - }, []) - - useEffect(() => { - setIsCustomGridSetting(ratioValue !== 'custom') - }, [ratioValue]) - - const drawGridSettings = () => { - //๊ธฐ์กด์— ์„ ํƒ๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ์žˆ์œผ๋ฉด ๊ทธ ๋ฐ์ดํ„ฐ๋ฅผ ํฌํ•จํ•œ๋‹ค - if (!(Object.keys(guideLine).length === 0 && guideLine.constructor === Object)) { - gridSettingArray.push(...guideLine) - } - - let moduleHoriLength = moduleLength.current.value //๊ฐ€๋กœ ๊ฐ„๊ฒฉ - let moduleVertLength = moduleLength.current.value //์ƒˆ๋กœ ๊ฐ„๊ฒฉ - - if (ratioValue === 'custom') { - moduleHoriLength = customModuleHoriLength.current.value - moduleVertLength = customModuleVertLength.current.value - } else { - moduleHoriLength = moduleHoriLength / ratioValue - moduleVertLength = moduleVertLength / ratioValue - } - - if (gridCheckedValue.includes('line')) { - const horizontalLineArray = [] - const verticalLineArray = [] - - for (let i = 0; i < canvasProps.height / moduleVertLength + 1; i++) { - const horizontalLine = new fabric.Line( - [0, i * moduleVertLength - moduleVertLength / 2, canvasProps.width, i * moduleVertLength - moduleVertLength / 2], - { - stroke: gridColor, - strokeWidth: 1, - selectable: true, - lockMovementX: true, - lockMovementY: true, - lockRotation: true, - lockScalingX: true, - lockScalingY: true, - name: 'guideLine', - strokeDashArray: [5, 2], - opacity: 0.3, - direction: 'horizontal', - }, - ) - canvasProps.add(horizontalLine) - horizontalLineArray.push(horizontalLine) - } - - for (let i = 0; i < canvasProps.width / moduleHoriLength + 1; i++) { - const verticalLine = new fabric.Line( - [i * moduleHoriLength - moduleHoriLength / 2, 0, i * moduleHoriLength - moduleHoriLength / 2, canvasProps.height], - { - stroke: gridColor, - strokeWidth: 1, - selectable: true, - lockMovementX: true, - lockMovementY: true, - lockRotation: true, - lockScalingX: true, - lockScalingY: true, - name: 'guideLine', - strokeDashArray: [5, 2], - opacity: 0.3, - direction: 'vertical', - }, - ) - canvasProps.add(verticalLine) - verticalLineArray.push(verticalLine) - } - canvasProps.renderAll() - - const snapDistance = 10 - - const recoilObj = { - guideMode: 'guideLine', - horizontalLineArray, - verticalLineArray, - moduleVertLength: moduleVertLength, - moduleHoriLength: moduleHoriLength, - } - gridSettingArray.push(recoilObj) - const newHoriGuideLines = [...horiGuideLines] - horizontalLineArray.forEach((line) => { - newHoriGuideLines.push(line) - }) - const newVertGuideLines = [...vertGuideLines] - verticalLineArray.forEach((line) => { - newVertGuideLines.push(line) - }) - setHoriGuideLines(newHoriGuideLines) - setVertGuideLines(newVertGuideLines) - } - - if (gridCheckedValue.includes('dot')) { - const circle = new fabric.Circle({ - radius: 2, - fill: 'white', - stroke: guideColor.hex, - 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: moduleHoriLength, - height: moduleVertLength, - }) - - 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: canvasProps.width, y: 0 }, - { x: canvasProps.width, y: canvasProps.height }, - { x: 0, y: canvasProps.height }, - ], - { - fill: pattern, - selectable: false, - name: 'guideDot', - }, - ) - - canvasProps.add(backgroundPolygon) - backgroundPolygon.sendToBack() - canvasProps.renderAll() - - const recoilObj = { - guideMode: 'guideDot', - moduleVertLength: moduleVertLength, - moduleHoriLength: moduleHoriLength, - } - - gridSettingArray.push(recoilObj) - } - canvasProps.renderAll() - setGuideLine(gridSettingArray) - } - - const removeGuideLines = () => { - if (!(Object.keys(guideLine).length === 0 && guideLine.constructor === Object)) { - const guideLines = canvasProps._objects.filter((obj) => obj.name === 'guideLine' || obj.name === 'guideDot') - guideLines?.forEach((item) => canvasProps.remove(item)) - canvasProps.renderAll() - setGuideLine([]) - setHoriGuideLines([]) - setVertGuideLines([]) - } else { - alert('๊ทธ๋ฆฌ๋“œ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.') - return - } - } - - return ( - <> -
-
- -
-
- - mm -
-
- - ์›์น˜์ˆ˜ - 1/2 - 1/4 - 1/10 - ์ž„์˜๊ฐ„๊ฒฉ - -
-
- ๊ฐ€์ด๋“œ์ปฌ๋Ÿฌ
setColorPickerShow(!colorPickerShow)}>
-
- {colorPickerShow && ( - - )} - -
- - ์ข…ํšก์—ฐ๋™ - -
-
-
- - mm -
-
- - mm -
- -
- - - - -
- - ) -} diff --git a/src/components/Headers.jsx b/src/components/Headers.jsx deleted file mode 100644 index 02859c96..00000000 --- a/src/components/Headers.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import Link from 'next/link' - -export default function Headers() { - return ( -
- -
- ) -} diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx deleted file mode 100644 index a6e7761f..00000000 --- a/src/components/Hero.jsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function Hero(props) { - return ( -
-

{props.title}

-
- ) -} diff --git a/src/components/InitSettingsModal.jsx b/src/components/InitSettingsModal.jsx deleted file mode 100644 index 4cfc483d..00000000 --- a/src/components/InitSettingsModal.jsx +++ /dev/null @@ -1,253 +0,0 @@ -'use client' - -import { useEffect, useState, memo, useCallback } from 'react' -import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react' -import { useRecoilState, useRecoilValue } from 'recoil' -import { modalContent, modalState } from '@/store/modalAtom' -import { canvasSettingState } from '@/store/canvasAtom' -import { useAxios } from '@/hooks/useAxios' - -export default function InitSettingsModal(props) { - const [objectNo, setObjectNo] = useState('test123240909003') // ํ›„์— ์‚ญ์ œ ํ•„์š” - const [open, setOpen] = useRecoilState(modalState) - const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState) - const [roofMaterials, setRoofMaterials] = useState([]) - const [basicSetting, setBasicSettings] = useState({ - roofDrawingSet: '1', - roofSizeSet: '1', - roofAngleSet: 'slope', - roofs: [{ roofSeq: '1', roofType: '3', roofWidth: '200', roofHeight: '200', roofGap: '0', roofLayout: 'parallel' }], - }) - - const modelProps = { - open, - setOpen, - } - - const { get, post } = useAxios() - - useEffect(() => { - get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => { - if (res.length == 0) return - - // 'roofs' ๋ฐฐ์—ด์„ ์ƒ์„ฑํ•˜์—ฌ ๊ฐ ํ•ญ๋ชฉ์„ ์ถ”๊ฐ€ - const roofsRow = res.map((item) => { - return { - roofDrawingSet: String(item.roofDrawingSet), - roofSizeSet: String(item.roofSizeSet), - roofAngleSet: item.roofAngleSet, - } - }) - - const roofsArray = res.some((item) => !item.roofSeq) - ? //์ตœ์ดˆ ์ง€๋ถ•์žฌ ์ถ”๊ฐ€ ์ •๋ณด์˜ ๊ฒฝ์šฐ roofsArray๋ฅผ ์ดˆ๊ธฐํ™” ์„ค์ • - [{ roofSeq: '1', roofType: '3', roofWidth: '200', roofHeight: '200', roofGap: '0', roofLayout: 'parallel' }] - : res.map((item) => ({ - roofSeq: String(item.roofSeq), - roofType: String(item.roofType), - roofWidth: String(item.roofWidth), - roofHeight: String(item.roofHeight), - roofGap: String(item.roofGap), - roofLayout: item.roofLayout, - })) - - // ๋‚˜๋จธ์ง€ ๋ฐ์ดํ„ฐ์™€ ํ•จ๊ป˜ 'roofs' ๋ฐฐ์—ด์„ patternData์— ๋„ฃ์Œ - const patternData = { - roofDrawingSet: roofsRow[0].roofDrawingSet, // ์ฒซ ๋ฒˆ์งธ ํ•ญ๋ชฉ์˜ ๊ฐ’์„ ์‚ฌ์šฉ - roofSizeSet: roofsRow[0].roofSizeSet, // ์ฒซ ๋ฒˆ์งธ ํ•ญ๋ชฉ์˜ ๊ฐ’์„ ์‚ฌ์šฉ - roofAngleSet: roofsRow[0].roofAngleSet, // ์ฒซ ๋ฒˆ์งธ ํ•ญ๋ชฉ์˜ ๊ฐ’์„ ์‚ฌ์šฉ - roofs: roofsArray, // ๋งŒ๋“ค์–ด์ง„ roofs ๋ฐฐ์—ด - } - - // ๋ฐ์ดํ„ฐ ์„ค์ • - setBasicSettings({ ...patternData }) - }) - - if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) { - setBasicSettings({ ...canvasSetting }) - } - }, []) - - //๊ธฐ๋ณธ ์„ค์ •๊ฐ’ ๋ณ€๊ฒฝ ํ•จ์ˆ˜ - const handleBasicSetting = (event) => { - const newBasicSetting = { ...basicSetting, [event.target.name]: event.target.value } - setBasicSettings(newBasicSetting) - } - - //๋ฐฐ์—ด ๊ฐ’ ๋ณ€๊ฒฝ ํ•จ์ˆ˜ - const handleRoofSettings = (id, event) => { - // ๊ธฐ๋ณธ ์„ธํŒ…์—์„œ roofs ๋ฐฐ์—ด์„ ๋ณต์‚ฌ - const updatedRoofs = [...basicSetting.roofs] - - // roofSeq๊ฐ€ id์™€ ์ผ์น˜ํ•˜๋Š” ํ•ญ๋ชฉ์˜ ์ธ๋ฑ์Šค ์ฐพ๊ธฐ - const index = updatedRoofs.findIndex((roof) => roof.roofSeq === id) - - if (index !== -1) { - // ํ•ด๋‹น ์ธ๋ฑ์Šค์˜ ํ•ญ๋ชฉ์„ ์ˆ˜์ • - updatedRoofs[index] = { - ...updatedRoofs[index], - [event.target.name]: event.target.value, - } - - // ์ˆ˜์ •๋œ ๋ฐฐ์—ด์„ ์ƒํƒœ์— ๋ฐ˜์˜ - setBasicSettings((prevState) => ({ - ...prevState, - roofs: updatedRoofs, - })) - } - } - - //์ €์žฅ - const submitCanvasConfig = async () => { - if (!objectNo) { - alert('object_no๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”.') - return - } - - const patternData = { - objectNo, - roofDrawingSet: basicSetting.roofDrawingSet, - roofSizeSet: basicSetting.roofSizeSet, - roofAngleSet: basicSetting.roofAngleSet, - roofMaterialsAddList: basicSetting.roofs, - } - await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }) - - //Recoil ์„ค์ • - setCanvasSetting({ ...basicSetting }) - - // ์ €์žฅ ํ›„ ์žฌ์กฐํšŒ - //await handleSelect() - } - - return ( - <> -
-
๋ฐฐ์น˜๋ฉด ์ดˆ๊ธฐ์„ค์ •
- -
-
- - ์น˜์ˆ˜ ์ž…๋ ฅ์— ์˜ํ•œ ๋ฌผ๊ฑด์ž‘์„ฑ - -
-
- -
-
- - ๋ณต์‚ฌ๋„ ์ž…๋ ฅ - ์‹ค์ธก๊ฐ’ ์ž…๋ ฅ - ์œก์ง€๋ถ• - -
-
- -
-
- - ๊ฒฝ์‚ฌ - ๊ฐ๋„ - -
-
- - {/* Roofs Array Rendering */} - {basicSetting.roofs && - basicSetting.roofs.map((roof, index) => { - return ( -
- ํƒ€์ž… : - - ๋„ˆ๋น„ : - handleRoofSettings(roof.roofSeq, e)} - /> - mm - ๋†’์ด : - handleRoofSettings(roof.roofSeq, e)} - /> - mm - ์„œ๊นŒ๋ž˜ ๊ฐ„๊ฒฉ : - handleRoofSettings(roof.roofSeq, e)} - /> - mm -
- handleRoofSettings(roof.roofSeq, e)} - > - ๋ณ‘๋ ฌ์‹ - ๊ณ„๋‹จ์‹ - -
-
- ) - })} - -
- - - setObjectNo(e.target.value)} /> -
-
- - ) -} diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx deleted file mode 100644 index 8a365646..00000000 --- a/src/components/Playground.jsx +++ /dev/null @@ -1,919 +0,0 @@ -'use client' - -import { useRef, useState, useEffect, useContext } from 'react' -import Image from 'next/image' -import { useRecoilState } from 'recoil' -import { v4 as uuidv4 } from 'uuid' -import { FaAnglesUp } from 'react-icons/fa6' -import { FaAnglesDown } from 'react-icons/fa6' -import { Button } from '@nextui-org/react' -import ColorPicker from './common/color-picker/ColorPicker' -import { cadFileNameState, googleMapFileNameState, useCadFileState, useGoogleMapFileState } from '@/store/canvasAtom' - -import { useAxios } from '@/hooks/useAxios' -import { useMessage } from '@/hooks/useMessage' -import { useMasterController } from '@/hooks/common/useMasterController' -import { useSwal } from '@/hooks/useSwal' -import { convertDwgToPng } from '@/lib/cadAction' -import { GlobalDataContext } from '@/app/GlobalDataProvider' -import QInput from './common/input/Qinput' -import QSelect from './common/select/QSelect' -import QPagination from './common/pagination/QPagination' -import QSelectBox from './common/select/QSelectBox' -import SampleReducer from './sample/SampleReducer' - -import styles from './playground.module.css' -import useSWR from 'swr' -import useSWRMutation from 'swr/mutation' -import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupStatusController' -import { canvasPopupStatusStore } from '@/store/canvasPopupStatusAtom' -import { moduleSelectionDataPlanListState } from '@/store/selectedModuleOptions' -import { useRouter } from 'next/navigation' -import { QcastContext } from '@/app/QcastProvider' - -export default function Playground() { - const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState) - const [cadFileName, setCadFileName] = useRecoilState(cadFileNameState) - const [useGoogleMapFile, setUseGoogleMapFile] = useRecoilState(useGoogleMapFileState) - const [googleMapFileName, setGoogleMapFileName] = useRecoilState(googleMapFileNameState) - const fileRef = useRef(null) - const queryRef = useRef(null) - const [zoom, setZoom] = useState(20) - const { get, promiseGet, post, promisePost, getFetcher, postFetcher } = useAxios() - const testVar = process.env.NEXT_PUBLIC_TEST - const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL - const { getMessage } = useMessage() - const { swalFire } = useSwal() - const { getRoofMaterialList, getModuleTypeItemList, getTrestleList, getConstructionList, getTrestleDetailList } = useMasterController() - - const [color, setColor] = useState('#ff0000') - - const [textInput, setTextInput] = useState('') - const [numberInput, setNumberInput] = useState('') - const [radioInput, setRadioInput] = useState('') - const [checkboxInput, setCheckboxInput] = useState([]) - const [selectedValue, setSelectedValue] = useState('') - - const [users, setUsers] = useState([]) - - const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext) - - const router = useRouter() - const { setIsGlobalLoading } = useContext(QcastContext) - - useEffect(() => { - setIsGlobalLoading(false) - }, []) - - useEffect(() => { - console.log('textInput:', textInput) - }, [textInput]) - useEffect(() => { - console.log('numberInput:', numberInput) - }, [numberInput]) - useEffect(() => { - console.log('radioInput:', radioInput) - }, [radioInput]) - useEffect(() => { - console.log('checkboxInput:', checkboxInput) - }, [checkboxInput]) - useEffect(() => { - console.log('selectedValue:', selectedValue) - }, [selectedValue]) - - const handleUsers = async () => { - // const users = await get('/api/user/find-all') - const params = { - url: '/api/user/find-all', - } - const users = await get(params) - console.log('users', users) - } - - const handleConvert = async () => { - console.log('file', fileRef.current.files[0]) - - const formData = new FormData() - formData.append('file', fileRef.current.files[0]) - - await promisePost({ url: converterUrl, data: formData }) - .then((res) => { - console.log('response: ', res) - convertDwgToPng(res.data.Files[0].FileName, res.data.Files[0].FileData) - setUseCadFile(true) - setCadFileName(res.data.Files[0].FileName) - swalFire({ text: 'ํŒŒ์ผ ๋ณ€ํ™˜ ์™„๋ฃŒ' }) - }) - .catch((err) => { - console.error(err) - swalFire({ text: 'ํŒŒ์ผ ๋ณ€ํ™˜ ์‹คํŒจ' }) - }) - } - - const handleDownImage = async (fileName = '') => { - const fileNm = fileName === '' ? uuidv4() : fileName - const queryString = queryRef.current.value === '' ? '์„œ์šธ์‹œ ์„œ๋Œ€๋ฌธ๊ตฌ ์—ฐ์„ธ๋กœ5๋‹ค๊ธธ 22-3 ๋ฐœ๋ฆฌ๋นŒ๋ผ 3์ธต' : queryRef.current.value - const res = await get({ url: `http://localhost:3000/api/html2canvas?q=${queryString}&fileNm=${fileNm}&zoom=${zoom}` }) - console.log('res', res) - setGoogleMapFileName(res.fileNm) - swalFire({ text: '์ด๋ฏธ์ง€ ์ €์žฅ ์™„๋ฃŒ' }) - setUseGoogleMapFile(true) - } - - const handleZoom = async (type) => { - if (type === 'up') { - setZoom((prevState) => prevState + 1) - } else { - setZoom((prevState) => prevState - 1) - } - - await handleDownImage() - } - - const data = [ - { - id: 1, - author: 'SWYOO', - contents: '๋ฒ„ํŠผ ์ •๋ฆฌ(ํ…œํ”Œ๋ฆฟ ์ ์šฉ)', - date: '2024.07.16', - }, - { - id: 2, - author: 'SWYOO', - contents: 'README.md ํŒŒ์ผ ์ด๋ฏธ์ง€ ๊ฒฝ๋กœ ์ˆ˜์ •', - date: '2024.07.17', - }, - { - id: 3, - author: 'SWYOO', - contents: '', - date: '', - }, - ] - - const handleSwalAlert = () => { - swalFire({ - text: '์•Œ๋ฆผ ํ…Œ์ŠคํŠธ์ž…๋‹ˆ๋‹ค.', - }) - } - - const paginationProps = { - pageNo: 1, - pageSize: 10, - pagePerBlock: 10, - totalCount: 26, - handleChangePage: (page) => { - console.log('page', page) - }, - } - - useEffect(() => { - console.log('users:', users) - }, [users]) - - const codes = [ - { - clHeadCd: '203800', - clCode: 'HEI_455', - clCodeNm: '์„ธ๋กœใ€€455mm์ดํ•˜', - clPriority: 1, - name: '์„ธ๋กœใ€€455mm์ดํ•˜', - id: 'HEI_455', - }, - { - clHeadCd: '203800', - clCode: 'HEI_500', - clCodeNm: '์„ธ๋กœใ€€500mm์ดํ•˜', - clPriority: 2, - name: '์„ธ๋กœใ€€500mm์ดํ•˜', - id: 'HEI_500', - }, - { - clHeadCd: '203800', - clCode: 'HEI_606', - clCodeNm: '์„ธ๋กœใ€€606mm์ดํ•˜', - clPriority: 3, - name: '์„ธ๋กœใ€€606mm์ดํ•˜', - id: 'HEI_606', - }, - { - clHeadCd: '203800', - clCode: 'WID_606', - clCodeNm: '๊ฐ€๋กœใ€€606mm์ดํ•˜', - clPriority: 4, - name: '๊ฐ€๋กœใ€€606mm์ดํ•˜', - id: 'WID_606', - }, - { - clHeadCd: '203800', - clCode: 'ETC', - clCodeNm: '๊ธฐํƒ€', - clPriority: 5, - name: '๊ธฐํƒ€', - id: 'ETC', - }, - ] - - const [myData, setMyData] = useState({ - roofMatlCd: 'ROOF_ID_WA_53A', - roofMatlNm: 'ํ™”์™€ A', - roofMatlNmJp: 'ๅ’Œ็“ฆA', - widAuth: 'R', - widBase: '265.000', - lenAuth: 'R', - lenBase: '235.000', - roofPchAuth: null, - roofPchBase: null, - raftAuth: 'C', - raftBaseCd: 'HEI_455', - id: 'ROOF_ID_WA_53A', - name: 'ํ™”์™€ A', - selected: true, - nameJp: 'ๅ’Œ็“ฆA', - length: 235, - width: 265, - layout: 'P', - hajebichi: null, - }) - - const handleChangeMyData = () => { - setMyData({ ...myData, raftBaseCd: 'HEI_500' }) - } - - const [myData2, setMyData2] = useState({}) - - const handleChangeMyData2 = () => { - setMyData2({ - roofMatlCd: 'ROOF_ID_WA_53A', - roofMatlNm: 'ํ™”์™€ A', - roofMatlNmJp: 'ๅ’Œ็“ฆA', - widAuth: 'R', - widBase: '265.000', - lenAuth: 'R', - lenBase: '235.000', - roofPchAuth: null, - roofPchBase: null, - raftAuth: 'C', - raftBaseCd: 'HEI_455', - id: 'ROOF_ID_WA_53A', - name: 'ํ™”์™€ A', - selected: true, - nameJp: 'ๅ’Œ็“ฆA', - length: 235, - width: 265, - layout: 'P', - hajebichi: null, - }) - } - - // const [callFlag, setCallFlag] = useState(false) - // const { data: tutoData, error, isLoading } = useSWR('http://localhost:8080/api/tutorial', getFetcher) - // const { data: tutoData, error, isLoading } = useSWR(callFlag ? 'http://localhost:8080/api/tutorial' : null, getFetcher) - // const { trigger, isMutating } = useSWRMutation('http://localhost:8080/api/tutorial', postFetcher) - - // if (isLoading) { - // return
Loading...
- // } - - // if (error) { - // return
Error...
- // } - - // const [moduleSelectionDataPlanListStore, setModuleSelectionDataPlanListStore] = useRecoilState(moduleSelectionDataPlanListState) - // useEffect(() => { - // console.log('๐Ÿš€ ~ Playground ~ moduleSelectionDataPlanListStore:', moduleSelectionDataPlanListStore) - // }, [moduleSelectionDataPlanListStore]) - // const { trigger: canvasPopupStatusTrigger } = useCanvasPopupStatusController({ objectNo: 'R201T01241120001', planNo: 2, popupType: 2 }) - - return ( - <> -
-
์ด ์˜์—ญ์€ ํ…Œ์ŠคํŠธ์ž…๋‹ˆ๋‹ค.
-
- {' '} - {' '} - {' '} - {' '} - -
- -
- - - -
- - - -
- - -
- - -
-
-
- - - - -
-
{testVar}
-
-
- -
-
-
-

Sass ํ…Œ์ŠคํŠธ์ž…๋‹ˆ๋‹ค.

-
-
test']) }}>
-
-

React ColorPicker

- -
{color}
-
-
-

์บ๋“œ ํŒŒ์ผ ์ด๋ฏธ์ง€ ์‚ฌ์šฉ

- -
- -
-
-
-

๊ตฌ๊ธ€ ๋งต ์ด๋ฏธ์ง€ ์‚ฌ์šฉ

- -
- -
- {useGoogleMapFile && ( - <> -
-

Zoom Controller : {zoom}

- - -
-
- -
- - )} -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
- {/*
-

{managementStateLoaded?.objectNo}

-
*/} -
- -
- {/*
- {tutoData && - tutoData.map((item) => ( -
- {item.name} / {item.email} -
- ))} -
-
- -
-
- -
*/} -
- -
-
- -
-
- - ) -} diff --git a/src/components/Roof.jsx b/src/components/Roof.jsx deleted file mode 100644 index 51ba639e..00000000 --- a/src/components/Roof.jsx +++ /dev/null @@ -1,351 +0,0 @@ -'use client' - -import { useEffect } from 'react' -import { addDistanceTextToPolygon, getDistance } from '@/util/canvas-util' -import { useCanvas } from '@/hooks/useCanvas' -import { fabric } from 'fabric' -import { v4 as uuidv4 } from 'uuid' - -export default function Roof() { - const { - canvas, - addShape, - handleUndo, - handleRedo, - handleClear, - handleCopy, - handleDelete, - handleSave, - handlePaste, - handleRotate, - attachCustomControlOnPolygon, - saveImage, - handleFlip, - } = useCanvas('canvas') - - useEffect(() => { - let circle = new fabric.Circle({ - radius: 40, - fill: 'rgba(200, 0, 0, 0.3)', - originX: 'center', - originY: 'center', - }) - - let text = new fabric.Textbox('AJLoveChina', { - originX: 'center', - originY: 'center', - textAlign: 'center', - fontSize: 12, - }) - - let group = new fabric.Group([circle, text], { - left: 100, - top: 100, - originX: 'center', - originY: 'center', - }) - - group.on('mousedblclick', () => { - // textForEditing is temporary obj, - // and will be removed after editing - console.log(text.type) - let textForEditing = new fabric.Textbox(text.text, { - originX: 'center', - originY: 'center', - textAlign: text.textAlign, - fontSize: text.fontSize, - - left: group.left, - top: group.top, - }) - - // hide group inside text - text.visible = false - // note important, text cannot be hidden without this - group.addWithUpdate() - - textForEditing.visible = true - // do not give controls, do not allow move/resize/rotation on this - textForEditing.hasConstrols = false - - // now add this temporary obj to canvas - canvas.add(textForEditing) - canvas.setActiveObject(textForEditing) - // make the cursor showing - textForEditing.enterEditing() - textForEditing.selectAll() - - // editing:exited means you click outside of the textForEditing - textForEditing.on('editing:exited', () => { - let newVal = textForEditing.text - let oldVal = text.text - - // then we check if text is changed - if (newVal !== oldVal) { - text.set({ - text: newVal, - visible: true, - }) - - // comment before, you must call this - group.addWithUpdate() - - // we do not need textForEditing anymore - textForEditing.visible = false - canvas?.remove(textForEditing) - - // optional, buf for better user experience - canvas?.setActiveObject(group) - } - }) - }) - - canvas?.add(group) - }, [canvas]) - - const addRect = () => { - const rect = new fabric.Rect({ - height: 200, - width: 200, - top: 10, - left: 10, - opacity: 0.4, - fill: randomColor(), - stroke: 'red', - name: uuidv4(), - }) - - addShape(rect) - } - - const addHorizontalLine = () => { - const { x1, y1, x2, y2 } = { x1: 20, y1: 100, x2: 220, y2: 100 } - /** - * ์‹œ์ž‘X,์‹œ์ž‘Y,๋„์ฐฉX,๋„์ฐฉY ์ขŒํ‘œ - */ - const horizontalLine = new fabric.Line([x1, y1, x2, y2], { - name: uuidv4(), - stroke: 'red', - strokeWidth: 3, - selectable: true, - }) - - const text = new fabric.Text(getDistance(x1, y1, x2, y2).toString(), { - fontSize: 20, - left: (x2 - x1) / 2, - top: y1 - 20, - }) - - const group = new fabric.Group([horizontalLine, text], { - left: 20, - top: 20, - }) - - // addShape(horizontalLine) - addShape(group) - console.log(JSON.stringify(canvas)) - } - - const addVerticalLine = () => { - const verticalLine = new fabric.Line([10, 10, 10, 100], { - name: uuidv4(), - stroke: 'red', - strokeWidth: 3, - selectable: true, - }) - - addShape(verticalLine) - } - - const addTriangle = () => { - const triangle = new fabric.Triangle({ - name: uuidv4(), - top: 50, - left: 50, - width: 100, - stroke: randomColor(), - strokeWidth: 3, - }) - - addShape(triangle) - } - - const addTrapezoid = () => { - const trapezoid = new fabric.Polygon( - [ - { x: 100, y: 100 }, // ์ขŒ์ƒ๋‹จ - { x: 500, y: 100 }, // ์šฐ์ƒ๋‹จ - { x: 750, y: 700 }, // ์šฐํ•˜๋‹จ - { x: 250, y: 400 }, // ์ขŒํ•˜๋‹จ - ], - { - name: uuidv4(), - stroke: 'red', - opacity: 0.4, - strokeWidth: 3, - selectable: true, - objectCaching: false, - }, - ) - attachCustomControlOnPolygon(trapezoid) - const group = addDistanceTextToPolygon(trapezoid) - addGroupClickEvent(group) - canvas?.add(group) - canvas?.renderAll() - } - - // group์— ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ํด๋ฆญ ์‹œ group์„ ์ œ๊ฑฐํ•˜๊ณ  object๋“ค๋งŒ ๋‚จ๊ธฐ๋Š” ํ•จ์ˆ˜ - function addGroupClickEvent(group) { - group.on('selected', (e) => { - console.log(e) - }) - group.on('mousedblclick', (e) => { - // textForEditing is temporary obj, - // and will be removed after editing - const pointer = canvas?.getPointer(e.e) // ๋งˆ์šฐ์Šค ํด๋ฆญ ์œ„์น˜ ๊ฐ€์ ธ์˜ค๊ธฐ - let minDistance = Infinity - let closestTextbox = null - const groupPoint = group.getCenterPoint() - group.getObjects().forEach(function (object) { - if (object.type === 'textbox') { - // ๊ฐ์ฒด๊ฐ€ TextBox์ธ์ง€ ํ™•์ธ - - const objectCenter = object.getCenterPoint() // TextBox ๊ฐ์ฒด์˜ ์ค‘์‹ฌ์  ๊ฐ€์ ธ์˜ค๊ธฐ - const dx = objectCenter.x + groupPoint.x - pointer.x - const dy = objectCenter.y + groupPoint.y - pointer.y - const distance = Math.sqrt(dx * dx + dy * dy) // ๋งˆ์šฐ์Šค ํด๋ฆญ ์œ„์น˜์™€ TextBox ๊ฐ์ฒด ์‚ฌ์ด์˜ ๊ฑฐ๋ฆฌ ๊ณ„์‚ฐ - - if (distance < minDistance) { - // ๊ฐ€์žฅ ์งง์€ ๊ฑฐ๋ฆฌ๋ฅผ ๊ฐ€์ง„ TextBox ๊ฐ์ฒด ์ฐพ๊ธฐ - minDistance = distance - closestTextbox = object - } - } - }) - - let textForEditing = new fabric.Textbox(closestTextbox.text, { - originX: 'center', - originY: 'center', - textAlign: closestTextbox.textAlign, - fontSize: closestTextbox.fontSize, - left: closestTextbox.left + groupPoint.x, - top: closestTextbox.top + groupPoint.y, - }) - - // hide group inside text - closestTextbox.visible = false - // note important, text cannot be hidden without this - group.addWithUpdate() - - textForEditing.visible = true - // do not give controls, do not allow move/resize/rotation on this - textForEditing.hasConstrols = false - - // now add this temporary obj to canvas - canvas?.add(textForEditing) - canvas?.setActiveObject(textForEditing) - // make the cursor showing - textForEditing?.enterEditing() - textForEditing?.selectAll() - - // editing:exited means you click outside of the textForEditing - textForEditing?.on('editing:exited', () => { - let newVal = textForEditing.text - - // then we check if text is changed - closestTextbox.set({ - text: newVal, - visible: true, - }) - - // comment before, you must call this - group.addWithUpdate() - - // we do not need textForEditing anymore - textForEditing.visible = false - canvas?.remove(textForEditing) - - // optional, buf for better user experience - canvas?.setActiveObject(group) - }) - }) - } - - // IText๋ฅผ ์ˆ˜์ •ํ•  ๋•Œ ํ•ด๋‹น ๊ฐ’์„ ๊ธธ์ด๋กœ ๊ฐ–๋Š” ๋‹ค๋ฅธ polygon์„ ์ƒ์„ฑํ•˜๊ณ  ๋‹ค์‹œ ๊ทธ๋ฃนํ™”ํ•˜๋Š” ํ•จ์ˆ˜ - function addTextModifiedEvent(text, polygon, index) { - text.on('editing:exited', function () {}) - } - - const randomColor = () => { - return '#' + Math.round(Math.random() * 0xffffff).toString(16) - } - - return ( - <> -
- - - - - - - - - - - - - - - -
- -
- -
- - ) -} diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx deleted file mode 100644 index 731fe8c6..00000000 --- a/src/components/Roof2.jsx +++ /dev/null @@ -1,1099 +0,0 @@ -'use client' - -import { useCanvas } from '@/hooks/useCanvas' -import { useEffect, useRef, useState } from 'react' -import { v4 as uuidv4 } from 'uuid' -import { useMode } from '@/hooks/useMode' -import { LINE_TYPE, Mode } from '@/common/common' -import { Button } from '@nextui-org/react' -import RangeSlider from './ui/RangeSlider' -import { useRecoilState, useRecoilValue } from 'recoil' -import { - cadFileCompleteState, - cadFileNameState, - canvasSizeState, - compassState, - currentObjectState, - fontSizeState, - globalCompassState, - googleMapFileNameState, - roofMaterialState, - roofState, - sortedPolygonArray, - templateTypeState, - useCadFileState, - useGoogleMapFileState, - wallState, -} from '@/store/canvasAtom' -import { QLine } from '@/components/fabric/QLine' -import { getCanvasState, insertCanvasState } from '@/lib/canvas' -import { calculateIntersection } from '@/util/canvas-util' -import { QPolygon } from '@/components/fabric/QPolygon' -import QContextMenu from './common/context-menu/QContextMenu' -import { modalContent, modalState } from '@/store/modalAtom' -import { useAxios } from '@/hooks/useAxios' -import QPolygonContextMenu from '@/components/common/context-menu/QPolygonContextMenu' -import QLineContextMenu from '@/components/common/context-menu/QLineContextMenu' -import QEmptyContextMenu from '@/components/common/context-menu/QEmptyContextMenu' - -import InitSettingsModal from './InitSettingsModal' -import GridSettingsModal from './GridSettingsModal' -import { SurfaceShapeModal } from '@/components/ui/SurfaceShape' -import { changeCurrentRoof, drawDirectionStringToArrow } from '@/util/qpolygon-utils' -import ThumbnailList from '@/components/ui/ThumbnailLIst' -import ObjectPlacement from '@/components/ui/ObjectPlacement' -import { globalLocaleStore } from '@/store/localeAtom' - -export default function Roof2(props) { - const { name, userId, email, isLoggedIn } = props - const { - canvas, - handleRedo, - handleUndo, - setCanvasBackgroundWithDots, - saveImage, - addCanvas, - handleBackImageLoadToCanvas, - handleCadImageInit, - backImg, - setBackImg, - } = useCanvas('canvas') - - const globalLocaleState = useRecoilValue(globalLocaleStore) - - const { get } = useAxios(globalLocaleState) - - const canvasRef = useRef(null) - - //canvas ๊ธฐ๋ณธ ์‚ฌ์ด์ฆˆ - const [canvasSize, setCanvasSize] = useRecoilState(canvasSizeState) - - //canvas ๊ฐ€๋กœ ์‚ฌ์ด์ฆˆ - const [verticalSize, setVerticalSize] = useState(canvasSize.vertical) - //canvas ์„ธ๋กœ ์‚ฌ์ด์ฆˆ - const [horizontalSize, setHorizontalSize] = useState(canvasSize.horizontal) - // ๊ธ€์žํฌ๊ธฐ - const [fontSize, setFontSize] = useRecoilState(fontSizeState) - - const [sortedArray] = useRecoilState(sortedPolygonArray) - - const [angle, setAngle] = useState(0) - - const [showControl, setShowControl] = useState(false) - - //์ง€๋ถ•์žฌ - const roofMaterial = useRecoilValue(roofMaterialState) - - const [templateType, setTemplateType] = useRecoilState(templateTypeState) - - const [compass, setCompass] = useRecoilState(compassState) - - const roof = useRecoilValue(roofState) - - const wall = useRecoilValue(wallState) - - const [open, setOpen] = useRecoilState(modalState) - const [contents, setContent] = useRecoilState(modalContent) - - const [scale, setScale] = useState(1) - const currentObject = useRecoilValue(currentObjectState) - - //canvas ์ธ๋„ค์ผ - const [thumbnails, setThumbnails] = useState([]) - const thumbnailProps = { - thumbnails, - canvas, - } - - let imgPath - // cad ํŒŒ์ผ ์—…๋กœ๋“œ - const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState) - const [cadFileName, setCadFileName] = useRecoilState(cadFileNameState) - const [cadFileComplete, setCadFileComplete] = useRecoilState(cadFileCompleteState) - useCadFile && (imgPath = `/cadImages/${cadFileName}`) - - // ๊ตฌ๊ธ€๋งต ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ - const [useGoogleMapFile, setUseGoogleMapFile] = useRecoilState(useGoogleMapFileState) - const [googleMapFileName, setGoogleMapFileName] = useRecoilState(googleMapFileNameState) - useGoogleMapFile && (imgPath = `/mapImages/${googleMapFileName}`) - - const [globalCampass, setGlobalCampass] = useRecoilState(globalCompassState) - - const { - mode, - setMode, - changeMode, - handleClear, - zoomIn, - zoomOut, - zoom, - togglePolygonLine, - handleOuterlinesTest, - handleOuterlinesTest2, - applyTemplateB, - makeRoofPatternPolygon, - createRoofRack, - drawRoofPolygon, - drawCellInTrestle, - drawCellManualInTrestle, - setDirectionTrestles, - cutHelpLines, - } = useMode() - - // const [canvasState, setCanvasState] = useRecoilState(canvasAtom) - - useEffect(() => { - get({ url: `/api/canvas-management/canvas-statuses/by-object/test123240822001/${userId}` }).then((res) => { - // console.log(res) - - const arrangeData = res.map((item) => { - // console.log(item.canvasStatus.replace(/##/g, '"').replace(/\\/g, '')) - const test = item.canvasStatus.replace(/##/g, '"').replace(/\\/g, '') - const test2 = test.substring(1, test.length - 1) - return { - id: item.id, - userId: item.userId, - imageName: `/canvasState/${item.imageName}.png`, - canvasStatus: JSON.stringify(test2), - } - }) - setThumbnails(arrangeData) - }) - }, []) - - useEffect(() => { - if (!canvas) { - return - } - changeMode(canvas, mode) - - if (!cadFileComplete && useCadFile) { - // cad ํŒŒ์ผ ๋กœ๋“œ - useCadFile && handleBackImageLoadToCanvas(imgPath, canvas) - } - - if (useGoogleMapFile) { - handleBackImageLoadToCanvas(imgPath, canvas) - } - }, [canvas, mode]) - - const makeLine = () => { - if (canvas) { - const line = new QLine([50, 50, 200, 50], { - stroke: 'black', - selectable: true, - strokeWidth: 2, - fontSize: fontSize, - }) - - canvas?.add(line) - } - } - - const makePolygon = () => { - if (canvas) { - const polygon = new QPolygon( - [ - { x: 100, y: 100 }, - { x: 600, y: 200 }, - { x: 700, y: 800 }, - { x: 100, y: 800 }, - ], - { - fill: 'transparent', - stroke: 'black', - strokeWidth: 2, - selectable: true, - fontSize: fontSize, - }, - ) - canvas?.add(polygon) - - // polygon.fillCell({ width: 50, height: 30, padding: 10 }) - } - } - - useEffect(() => { - setCanvasSize({ ...canvasSize, vertical: parseInt(verticalSize), horizontal: parseInt(horizontalSize) }) - }, [verticalSize, horizontalSize]) - - /** - * ๊ฐ’ ๋ณ€๊ฒฝ์‹œ - */ - // useEffect(() => { - // canvasSizeMode() - // }, [verticalSize, horizontalSize]) - useEffect(() => { - const { vertical, horizontal } = canvasSize - if (vertical !== verticalSize || horizontal !== horizontalSize) { - canvas?.setWidth(horizontalSize) - canvas?.setHeight(verticalSize) - canvas?.renderAll() - } - }, [canvasSize, canvas]) - - const makeQPolygon = () => { - const type1 = [ - { x: 100, y: 100 }, - { x: 850, y: 100 }, - { x: 850, y: 800 }, - { x: 500, y: 800 }, - { x: 500, y: 400 }, - { x: 100, y: 400 }, - ] - const type2 = [ - { x: 200, y: 100 }, - { x: 200, y: 1000 }, - { x: 1100, y: 1000 }, - { x: 1100, y: 600 }, - { x: 650, y: 600 }, - { x: 650, y: 100 }, - ] - - const type3 = [ - { x: 200, y: 100 }, - { x: 200, y: 800 }, - { x: 500, y: 800 }, - { x: 500, y: 300 }, - { x: 800, y: 300 }, - { x: 800, y: 100 }, - ] - - const type4 = [ - { x: 150, y: 450 }, - { x: 150, y: 800 }, - { x: 750, y: 800 }, - { x: 750, y: 300 }, - { x: 550, y: 300 }, - { x: 550, y: 450 }, - ] - - const type1A = [ - { x: 67, y: 81 }, - { x: 67, y: 660 }, - { x: 437, y: 660 }, - { x: 437, y: 1190 }, - { x: 858, y: 1190 }, - { x: 858, y: 81 }, - ] - - const type1B = [ - { x: 137, y: 42 }, - { x: 137, y: 621 }, - { x: 667, y: 621 }, - { x: 667, y: 991 }, - { x: 1088, y: 991 }, - { x: 1088, y: 42 }, - ] - - const eightPoint = [ - { x: 240.1111, y: 130.1111 }, - { x: 240.1111, y: 630.1111 }, - { x: 640.1111, y: 630.1111 }, - { x: 640.1111, y: 480.1111 }, - { x: 440.1111, y: 480.1111 }, - { x: 440.1111, y: 280.1111 }, - { x: 740.1111, y: 280.1111 }, - { x: 740.1111, y: 130.1111 }, - ] - - const eightPoint2 = [ - { x: 197, y: 215 }, - { x: 197, y: 815 }, - { x: 397, y: 815 }, - { x: 397, y: 1115 }, - { x: 697, y: 1115 }, - { x: 697, y: 815 }, - { x: 897, y: 815 }, - { x: 897, y: 215 }, - ] - - const eightPoint3 = [ - { x: 190, y: 147 }, - { x: 190, y: 747 }, - { x: 490, y: 747 }, - { x: 490, y: 497 }, - { x: 640, y: 497 }, - { x: 640, y: 747 }, - { x: 1090, y: 747 }, - { x: 1090, y: 147 }, - ] - - const eightPoint4 = [ - { x: 200, y: 200 }, - { x: 200, y: 400 }, - { x: 500, y: 400 }, - { x: 500, y: 700 }, - { x: 800, y: 700 }, - { x: 800, y: 400 }, - { x: 1100, y: 400 }, - { x: 1100, y: 200 }, - ] - - const eightPoint5 = [ - { x: 140, y: 101 }, - { x: 140, y: 601 }, - { x: 440, y: 601 }, - { x: 440, y: 801 }, - { x: 840, y: 801 }, - { x: 840, y: 601 }, - { x: 1140, y: 601 }, - { x: 1140, y: 101 }, - ] - - const twelvePoint = [ - { x: 195, y: 166 }, - { x: 195, y: 466 }, - { x: 395, y: 466 }, - { x: 395, y: 766 }, - { x: 545, y: 766 }, - { x: 545, y: 466 }, - { x: 695, y: 466 }, - { x: 695, y: 666 }, - { x: 845, y: 666 }, - { x: 845, y: 466 }, - { x: 995, y: 466 }, - { x: 995, y: 166 }, - ] - - const twelvePoint2 = [ - { x: 165, y: 81 }, - { x: 165, y: 1081 }, - { x: 465, y: 1081 }, - { x: 465, y: 781 }, - { x: 765, y: 781 }, - { x: 765, y: 1081 }, - { x: 1065, y: 1081 }, - { x: 1065, y: 581 }, - { x: 765, y: 581 }, - { x: 765, y: 281 }, - { x: 1065, y: 281 }, - { x: 1065, y: 81 }, - ] - - const complicatedType = [ - { x: 100, y: 100 }, - { x: 100, y: 1100 }, - { x: 400, y: 1100 }, - { x: 400, y: 800 }, - { x: 700, y: 800 }, - { x: 700, y: 1100 }, - { x: 1000, y: 1100 }, - { x: 1000, y: 600 }, - { x: 700, y: 600 }, - { x: 700, y: 300 }, - { x: 1000, y: 300 }, - { x: 1000, y: 100 }, - ] - - const testType = [ - { x: 500, y: 400 }, - { x: 650, y: 550 }, - { x: 575, y: 625 }, - { x: 325, y: 625 }, - { x: 100, y: 400 }, - ] - - const testType2 = [ - { x: 100, y: 400 }, - { x: 325, y: 625 }, - { x: 575, y: 625 }, - { x: 650, y: 550 }, - { x: 500, y: 400 }, - ] - - const triangleType = [ - { x: 100, y: 100 }, - { x: 100, y: 600 }, - { x: 600, y: 600 }, - { x: 600, y: 100 }, - ] - - const rectangleType1 = [ - { x: 500, y: 100 }, - { x: 500, y: 800 }, - { x: 900, y: 800 }, - { x: 900, y: 100 }, - ] - - const rectangleType2 = [ - { x: 100, y: 100 }, - { x: 100, y: 300 }, - { x: 600, y: 300 }, - { x: 600, y: 100 }, - ] - - const types = [type1, type2, type3, type4, type1A, type1B, eightPoint, eightPoint2, eightPoint3, eightPoint4, twelvePoint] - const newP = [ - { x: 450, y: 450 }, - { x: 650, y: 250 }, - { x: 675, y: 275 }, - { x: 450, y: 850 }, - ] - - const test1 = [ - { x: 381, y: 178 }, - { x: 381, y: 659.3 }, - { x: 773.3, y: 659.3 }, - { x: 773.3, y: 497.9 }, - { x: 1457, y: 497.9 }, - { x: 1457, y: 178 }, - ] - - const test2 = [ - { x: 113, y: 114.9 }, - { x: 113, y: 371.9 }, - { x: 762, y: 371.9 }, - { x: 762, y: 818.7 }, - { x: 1478.6, y: 818.7 }, - { x: 1478.6, y: 114.9 }, - ] - - const test3 = [ - { x: 100, y: 100 }, - { x: 100, y: 600 }, - { x: 600, y: 600 }, - { x: 600, y: 100 }, - { x: 500, y: 100 }, - { x: 500, y: 200 }, - { x: 200, y: 200 }, - { x: 200, y: 100 }, - ] - - const test4 = [ - { x: 100, y: 100 }, - { x: 100, y: 1000 }, - { x: 1100, y: 1000 }, - { x: 1100, y: 550 }, - { x: 500, y: 550 }, - { x: 500, y: 100 }, - ] - - const polygon = new QPolygon(test4, { - fill: 'transparent', - stroke: 'green', - strokeWidth: 1, - selectable: false, - fontSize: fontSize, - name: 'wall', - }) - - canvas?.add(polygon) - handleOuterlinesTest2(polygon, 50) - setTemplateType(1) - } - - const rotateShape = () => { - if (canvas) { - const activeObject = canvas?.getActiveObject() - - if (activeObject) { - activeObject.rotate(angle) - canvas?.renderAll() - } - } - } - - const makeQLine = () => { - if (canvas) { - const line = new QLine([50, 250, 900, 250], { - stroke: 'black', - strokeWidth: 5, - fontSize: fontSize, - selectable: true, - }) - - const line2 = new QLine([450, 450, 821, 78], { - stroke: 'black', - strokeWidth: 5, - fontSize: fontSize, - selectable: true, - }) - - canvas?.add(line) - canvas?.add(line2) - - const interSectionPoint = calculateIntersection(line, line2) - - if (interSectionPoint) { - const circle = new fabric.Circle({ - radius: 5, - fill: 'red', - left: interSectionPoint.x - 5, - top: interSectionPoint.y - 5, - }) - - canvas?.add(circle) - } - } - } - - const addBackgroundInPolygon = (polygon) => { - fabric.Image.fromURL('assets/img/check2.png', function (img) { - // ํŒจํ„ด ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. - const pattern = new fabric.Pattern({ - source: img.getElement(), - repeat: 'repeat', - }) - - polygon.fillBackground(pattern) - }) - } - - function PolygonToLine() { - const polygon = canvas?.getActiveObject() - - if (polygon.type !== 'QPolygon') { - return - } - - const lines = togglePolygonLine(polygon) - } - - /** - * canvas ๋‚ด์šฉ ์ €์žฅํ•˜๊ธฐ - */ - const handleSaveCanvas = async () => { - // const jsonStr = JSON.stringify(canvas?.toDatalessJSON(['type', 'fontSize'])) - const jsonObj = JSON.stringify(canvas?.toDatalessJSON(['type', 'fontSize', 'lines'])) - console.log(jsonObj) - - const param = { - loginId: 'test', - canvas: jsonObj, - } - console.log(param) - - await insertCanvasState(param) - handleClear() - } - - const drawRoofMaterial = () => { - const { width, height, roofStyle } = roofMaterial - - const wallPolygon = canvas?.getObjects().find((obj) => obj.name === 'wall') - - wallPolygon.set('strokeDashArray', [10, 5, 2, 5]) - wallPolygon.set('stroke', 'blue') - wallPolygon.set('strokeWidth', 1) - - const roofs = canvas?.getObjects().filter((obj) => obj.name === 'roof') - - roofs.forEach((roof) => { - let maxLengthLine = roof.lines.reduce((acc, cur) => { - return acc.length > cur.length ? acc : cur - }) - - const roofRatio = window.devicePixelRatio || 1 - - // ํŒจํ„ด ์†Œ์Šค๋ฅผ ์œ„ํ•œ ์ž„์‹œ ์บ”๋ฒ„์Šค ์ƒ์„ฑ - const patternSourceCanvas = document.createElement('canvas') - if (roofStyle === 1) { - if (maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left') { - patternSourceCanvas.width = width * roofRatio - patternSourceCanvas.height = height * roofRatio - } else { - patternSourceCanvas.width = height * roofRatio - patternSourceCanvas.height = width * roofRatio - } - } else if (roofStyle === 2) { - if (maxLengthLine.direction === 'right' || maxLengthLine.direction === 'left') { - patternSourceCanvas.width = width * 2 - patternSourceCanvas.height = height * 2 - } else { - patternSourceCanvas.width = height * 2 - patternSourceCanvas.height = width * 2 - } - } - - const ctx = patternSourceCanvas.getContext('2d') - - ctx.scale(roofRatio, roofRatio) - ctx.strokeStyle = 'green' - ctx.lineWidth = 0.4 - // ๋ฒฝ๋Œ ํŒจํ„ด ๊ทธ๋ฆฌ๊ธฐ - if (roofStyle === 1) { - ctx.strokeRect(0, 0, 50, 30) - } else if (roofStyle === 2) { - // ์ง€๊ทธ์žฌ๊ทธ - ctx.strokeRect(0, 0, 200, 100) - ctx.strokeRect(100, 100, 200, 100) - } - - // ํŒจํ„ด ์ƒ์„ฑ - const pattern = new fabric.Pattern({ - source: patternSourceCanvas, - repeat: 'repeat', - }) - roof.set('fill', null) - - roof.set('fill', pattern) - canvas?.renderAll() - }) - } - - /** - * canvas ๋‚ด์šฉ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ - */ - const handleLoadCanvas = async () => { - const canvasStates = await getCanvasState() - console.log(JSON.parse(canvasStates.canvas)) - canvas?.loadFromJSON(JSON.parse(canvasStates.canvas)) - } - - /** - * ์ปจํŠธ๋กค๋Ÿฌ ๋ณด์ด๊ธฐ/์ˆจ๊ธฐ๊ธฐ - */ - const handleShowController = () => { - setShowControl(!showControl) - } - - const drawRoofPatterns = (roofStyle) => { - makeRoofPatternPolygon(roofStyle) - } - - const deleteCell = () => { - const selectedCells = canvas?.getObjects().filter((obj) => obj.name === 'cell' && obj.selected) - - selectedCells.forEach((cell) => { - canvas?.remove(cell) - }) - } - - const setCompassState = (degree) => { - setCompass(degree) - } - - const changeLength = (e) => { - const polygon = canvas?.getActiveObject() - - if (polygon?.type !== 'QPolygon') { - return - } - setScale(e) - polygon.setScaleX(e) - - canvas?.renderAll() - } - - const moduleConfiguration = () => { - createRoofRack() - } - - const setDirectionStringToArrow = () => { - drawDirectionStringToArrow(canvas, globalCampass) - - /** - * ๋‚˜์ค‘์— ์œ ํ‹ธ๋กœ ๋‹ค์‹œ ๊ตฌํ˜„ - */ - // const groupShapes = canvas?.getObjects().filter((obj) => obj.name === 'cellGroup') - - // console.log('groupShapes', groupShapes) - - // groupShapes.forEach((obj) => { - // let originAngle = obj._objects.find((array) => array.originAngle !== undefined).originAngle - - // console.log('originAngle', originAngle) - - // let rotateAngle = globalCampass - - // // let rotateAngle = originAngle + globalCampass - // // if (rotateAngle > 360) { - // // rotateAngle -= 360 - // // } - - // console.log('rotateAngle', rotateAngle) - - // obj.set({ angle: rotateAngle, originX: 'center', originY: 'center' }) - // obj.setCoords() - // }) - canvas?.renderAll() - } - - const setHipRoof = () => { - const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof') - const currentRoof = polygon.lines[2] - currentRoof.attributes.type = LINE_TYPE.WALLLINE.EAVES - currentRoof.attributes.offset = 50 - changeCurrentRoof(currentRoof, canvas) - } - const setGableRoof = () => { - const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof') - const currentRoof = polygon.lines[2] - currentRoof.attributes.type = LINE_TYPE.WALLLINE.GABLE - currentRoof.attributes.offset = 30 - changeCurrentRoof(currentRoof, canvas) - } - const setHipAndGableRoof = () => { - let offset = Number(prompt('ํŒ”์ž‘์ง€๋ถ• ํญ', '50')) - if (!isNaN(offset) && offset > 0) { - const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof') - const currentRoof = polygon.lines[2] - currentRoof.attributes.type = LINE_TYPE.WALLLINE.HIPANDGABLE - currentRoof.attributes.width = offset - changeCurrentRoof(currentRoof, canvas) - } else { - alert('ํญ์€ 0 ๋ณด๋‹ค ์ปค์•ผ ํ•จ') - } - } - const setJerkInHeadRoof = () => { - let offset = Number(prompt('ํŒ”์ž‘์ง€๋ถ• ํญ', '50')) - if (!isNaN(offset) && offset > 0) { - const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof') - const currentRoof = polygon.lines[2] - currentRoof.attributes.type = LINE_TYPE.WALLLINE.JERKINHEAD - currentRoof.attributes.width = offset - changeCurrentRoof(currentRoof, canvas) - } else { - alert('ํญ์€ 0 ๋ณด๋‹ค ์ปค์•ผ ํ•จ') - } - } - const setWallRoof = () => { - let offset = Number(prompt('์†Œ๋งค ํญ', '0')) - const polygon = canvas?.getObjects().find((obj) => obj.name === 'roof') - const currentRoof = polygon.lines[2] - currentRoof.attributes.type = LINE_TYPE.WALLLINE.WALL - currentRoof.attributes.width = offset - changeCurrentRoof(currentRoof, canvas) - } - return ( - <> - {canvas && ( - <> -
- - - - - - - - - - - - - - - - - - - - - - - - - - { - - } - - ํ˜„์žฌ ์คŒ : {zoom}% - - - {/*{templateType === 0 && (*/} - {/* <>*/} - - {/* */} - {/*)}*/} - - - - - - - - - {/**/} - {/* - - */} - - {templateType === 1 && ( - <> - - - - - - )} - - - - - - - -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - )} - - {/*
-

๊ฐ๋„ ์ž…๋ ฅ(0~360) ํ›„ ๋ฐฉํ–ฅ์„ค์ • ํด๋ฆญ

- { - const val = e.target.value.replace(/[^-0-9]/g, '') - if (val < 0 || val > 360) { - setGlobalCampass(0) - } else { - setGlobalCampass(Number(val)) - } - }} - /> - -
*/} - {/*
- Compass Circle -
- N, S, E, W Labels -
N
-
S
-
- E -
-
- W -
-
- - Compass Pointer -
- Red Upper Triangle -
-
-
*/} -
- - {!canvas ? null : mode === Mode.DRAW_LINE ? ( - - ) : currentObject?.type === 'QPolygon' ? ( - - ) : currentObject?.type === 'QLine' ? ( - - ) : ( - - )} -
- - ) -} diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx deleted file mode 100644 index 51680711..00000000 --- a/src/components/Settings.jsx +++ /dev/null @@ -1,324 +0,0 @@ -'use client' - -import React, { useEffect, useState } from 'react' -import { Button } from '@nextui-org/react' - -import { useAxios } from '@/hooks/useAxios' - -import { useRecoilState } from 'recoil' -import { customSettingsState } from '@/store/canvasAtom' -import { modalContent, modalState } from '@/store/modalAtom' - -import ColorPicker from './common/color-picker/ColorPicker' - -export default function Settings() { - const [objectNo, setObjectNo] = useState('test123240829010') - const [error, setError] = useState(null) - const [customSettings, setCustomSettings] = useRecoilState(customSettingsState) - - const [color, setColor] = useState('#ff0000') - - const [open, setOpen] = useRecoilState(modalState) - const [contents, setContent] = useRecoilState(modalContent) - - const { get, post } = useAxios() - - const handleSavePopup = () => { - console.log('color ', color) - } - - const handleClosePopup = () => { - setContent('') - setOpen(false) - console.log('colorSetting ', color) - } - - const colorSetting = ( - <> -
-

React ColorPicker

- -
{color}
-
-

- -

- - ) - - const customStyles = { - overlay: { - backgroundColor: 'rgba(0,0,0,0.5)', - }, - content: { - width: '300px', - height: '400px', - margin: 'auto', - borderRadius: '4px', - boxShadow: '0 2px 4px rgba(0,0,0,0.2)', - padding: '20px', - }, - } - - // ์ƒํƒœ๋ฅผ ํ•˜๋‚˜์˜ ๊ฐ์ฒด๋กœ ๊ด€๋ฆฌ - const [settings, setSettings] = useState({ - display1: Array(11).fill(false), // ํ™”๋ฉด ํ‘œ์‹œ1 - display2: Array(3).fill(false), // ํ™”๋ฉด ํ‘œ์‹œ2 - rangeSetting: 0, // ํก์ฐฉ ๋ฒ”์œ„ ์„ค์ • - gridSettings: Array(5).fill(false), // ๊ทธ๋ฆฌ๋“œ ์„ค์ • - }) - - const gridItems = { - display1: [ - 'ํ• ๋‹น ํ‘œ์‹œ', - '๋„๋ฉด ํ‘œ์‹œ', - '๊ทธ๋ฆฌ๋“œ ํ‘œ์‹œ', - '๋ฌธ์ž ํ‘œ์‹œ', - 'ํ๋ฆ„๋ฐฉํ–ฅ ํ‘œ์‹œ', - '๋ณต๋„์น˜์ˆ˜ ํ‘œ์‹œ', - '์‹ค์ œ์น˜์ˆ˜ ํ‘œ์‹œ', - '์น˜์ˆ˜ ํ‘œ์‹œ ์—†์Œ', - '๊ฐ€๋Œ€ ํ‘œ์‹œ', - '์ขŒํ‘œ ํ‘œ์‹œ', - '๋„๋ฉด์ „ํ™˜ ํ‘œ์‹œ', - ], - display2: ['ํ…Œ๋‘๋ฆฌ๋งŒ', '๋ผ์ธํ•ด์น˜', 'All Painted'], - rangeSetting: ['๊ทน์†Œ', '์†Œ', '์ค‘', '๋Œ€'], - gridSettings: ['์ž„์˜ ๊ทธ๋ฆฌ๋“œ', '์‹ค์„  ๊ทธ๋ฆฌ๋“œ', '์  ๊ทธ๋ฆฌ๋“œ', '๊ทธ๋ฆฌ๋“œ ์ƒ‰ ์„ค์ •', 'ํก์ฐฉ์  ์ถ”๊ฐ€'], - } - - // ์ดˆ๊ธฐ ์กฐํšŒ - useEffect(() => { - if (!objectNo) { - alert('object_no๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”.') - } - }, []) - - // ํด๋ฆญ ์‹œ ์ƒํƒœ ๋ณ€๊ฒฝ ํ•จ์ˆ˜ - const handleToggle = (type, index) => { - // '์‹ค์„  ๊ทธ๋ฆฌ๋“œ' ํด๋ฆญ ์‹œ ํŒ์—… ์—ด๊ธฐ - if (type === 'gridSettings' && gridItems.gridSettings[index] === '์‹ค์„  ๊ทธ๋ฆฌ๋“œ') { - //openGridPopup() - } - - // '๊ทธ๋ฆฌ๋“œ ์ƒ‰ ์„ค์ •' ํด๋ฆญ ์‹œ ํŒ์—… ์—ด๊ธฐ - if (type === 'gridSettings' && gridItems.gridSettings[index] === '๊ทธ๋ฆฌ๋“œ ์ƒ‰ ์„ค์ •') { - //setSelectedGridSetting(gridItems.gridSettings[index]) - //setIsPopupOpen(true) - //return prevSettings // ์„ค์ •์€ ๋ณ€๊ฒฝํ•˜์ง€ ์•Š์Œ - - setOpen(true) - setContent({ ...colorSetting }) - } - - setSettings((prevSettings) => { - // prevSettings[type]์ด ๋ฐฐ์—ด์ธ์ง€ ํ™•์ธํ•˜๊ณ , ๊ทธ๋ ‡์ง€ ์•Š์€ ๊ฒฝ์šฐ ๋นˆ ๋ฐฐ์—ด๋กœ ์ดˆ๊ธฐํ™” - let updated = Array.isArray(prevSettings[type]) ? [...prevSettings[type]] : [] - - if (type === 'rangeSetting') { - return { ...prevSettings, [type]: index } - } - - updated[index] = updated[index] === false ? true : false - return { ...prevSettings, [type]: updated } - }) - } - - // '์‹ค์„  ๊ทธ๋ฆฌ๋“œ' ํด๋ฆญ ์‹œ ํŒ์—…์„ ์—ด๊ธฐ ์œ„ํ•œ ํ•จ์ˆ˜ - const openGridPopup = () => { - const popupWidth = 500 - const popupHeight = 300 - - // ํŒ์—… ์ฐฝ ์œ„์น˜๋ฅผ ํ™”๋ฉด ์ค‘์•™์œผ๋กœ ์กฐ์ •ํ•˜๊ธฐ ์œ„ํ•ด ๊ณ„์‚ฐ - const left = window.innerWidth / 2 - popupWidth / 2 - const top = window.innerHeight / 2 - popupHeight / 2 - - // ์ƒˆ ์ฐฝ ์—ด๊ธฐ - window - .open - //'./components/intro', // ํŒ์—…์œผ๋กœ ๋„์šธ ํŽ˜์ด์ง€์˜ URL - //'_blank', // ์ƒˆ ์ฐฝ์œผ๋กœ ์—ด๊ธฐ - //`width=${popupWidth},height=${popupHeight},top=${top},left=${left}`, // ํฌ๊ธฐ์™€ ์œ„์น˜ ์ง€์ • - () - } - - // Canvas Setting ์กฐํšŒ ๋ฐ ์ดˆ๊ธฐํ™” - const handleSelect = async () => { - try { - if (!objectNo) { - alert('object_no๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”.') - return - } - - const res = await get({ url: `/api/canvas-management/canvas-settings/by-object/${objectNo}` }) - - // ๋ฐ์ดํ„ฐ๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ - if (!res) { - console.warn('์กฐํšŒ ๊ฒฐ๊ณผ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.') - // ๊ธฐ๋ณธ๊ฐ’์„ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ์‚ฌ์šฉ์ž์—๊ฒŒ ์•Œ๋ฆผ ํ‘œ์‹œ - setSettings({ - display1: Array(11).fill(false), // ํ™”๋ฉด ํ‘œ์‹œ1 ๊ธฐ๋ณธ๊ฐ’ - display2: Array(3).fill(false), // ํ™”๋ฉด ํ‘œ์‹œ2 ๊ธฐ๋ณธ๊ฐ’ - rangeSetting: 0, // ํก์ฐฉ ๋ฒ”์œ„ ์„ค์ • ๊ธฐ๋ณธ๊ฐ’ - gridSettings: Array(5).fill(false), // ๊ทธ๋ฆฌ๋“œ ์„ค์ • ๊ธฐ๋ณธ๊ฐ’ - }) - - alert('์กฐํšŒ๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ์„ค์ •์ด ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.') - return // ์ดํ›„ ์ฝ”๋“œ ์‹คํ–‰์„ ์ค‘๋‹จ - } - - const data = { - display1: [ - res.assignDisplay, - res.drawDisplay, - res.gridDisplay, - res.charDisplay, - res.flowDisplay, - res.hallwayDimenDisplay, - res.actualDimenDisplay, - res.noDimenDisplay, - res.trestleDisplay, - res.coordiDisplay, - res.drawConverDisplay, - ], - display2: [res.onlyBorder, res.lineHatch, res.allPainted], - rangeSetting: res.adsorpRangeSetting, - gridSettings: [res.randomGrid, res.solidGrid, res.dotGrid, res.gridColorSet, res.adsorpPointAdd], - } - - // ๋ฐ์ดํ„ฐ ์„ค์ • - setSettings({ - display1: data.display1, - display2: data.display2, - rangeSetting: data.rangeSetting, - gridSettings: data.gridSettings, - }) - } catch (error) { - console.error('Data fetching error:', error) - } - } - - // Canvas Setting ์ €์žฅ - const handleSubmit = async () => { - if (!objectNo) { - alert('object_no๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”.') - return - } - - const patternData = { - objectNo, - assignDisplay: settings.display1[0], - drawDisplay: settings.display1[1], - gridDisplay: settings.display1[2], - charDisplay: settings.display1[3], - flowDisplay: settings.display1[4], - hallwayDimenDisplay: settings.display1[5], - actualDimenDisplay: settings.display1[6], - noDimenDisplay: settings.display1[7], - trestleDisplay: settings.display1[8], - coordiDisplay: settings.display1[9], - drawConverDisplay: settings.display1[10], - onlyBorder: settings.display2[0], - lineHatch: settings.display2[1], - allPainted: settings.display2[2], - adsorpRangeSetting: settings.rangeSetting, - randomGrid: settings.gridSettings[0], - solidGrid: settings.gridSettings[1], - dotGrid: settings.gridSettings[2], - gridColorSet: settings.gridSettings[3], - adsorpPointAdd: settings.gridSettings[4], - } - - console.log('patternData', patternData) - - await post({ url: `/api/canvas-management/canvas-settings`, data: patternData }) - - //Recoil ์„ค์ • - setCustomSettings({ ...patternData }) - - // ์ €์žฅ ํ›„ ์žฌ์กฐํšŒ - await handleSelect() - } - - return ( - <> -
-
- setObjectNo(e.target.value)} /> - - -
-
-

[๋””์Šคํ”Œ๋ ˆ์ด ์„ค์ •]

-

* ๋„๋ฉด์— ํ‘œ์‹œํ•  ํ•ญ๋ชฉ์„ ํด๋ฆญํ•˜๋ฉด ์ ์šฉ ๋ฉ๋‹ˆ๋‹ค.

-
- {gridItems.display1.map((item, index) => ( -
handleToggle('display1', index)} - > - {settings.display1[index]} {item} -
- ))} -
-
-

* ํ™”๋ฉด ํ‘œ์‹œ

-
- {gridItems.display2.map((item, index) => ( -
handleToggle('display2', index)} - > - {settings.display2[index]} {item} -
- ))} -
-

[๊ธ€๊ผด/๋„๋ฉดํฌ๊ธฐ ์„ค์ •]

-

* ๊ธ€๊ผด ๋ฐ ํฌ๊ธฐ ๋ณ€๊ฒฝ

-
-
๋ฌธ์ž ๊ธ€๊ผด ๋ณ€๊ฒฝ
-
ํ๋ฆ„๋ฐฉํ–ฅ ๊ธ€๊ผด ๋ณ€๊ฒฝ
-
์น˜์ˆ˜ ๊ธ€๊ผด ๋ณ€๊ฒฝ
-
ํšŒ๋กœ๋ฒˆํ˜ธ ๊ธ€๊ผด ๋ณ€๊ฒฝ
-
- `` -

* ํก์ฐฉ ๋ฒ”์œ„ ์„ค์ •

-
- {gridItems.rangeSetting.map((item, index) => ( -
handleToggle('rangeSetting', index)} - > - {item} -
- ))} -
-
-
์น˜์ˆ˜์„  ์„ค์ •
-
๋„๋ฉด ํฌ๊ธฐ ์„ค์ •
-
ํก์ฐฉ์  ON
-
-

[๊ทธ๋ฆฌ๋“œ ์„ค์ •]

-
- -
{color}
-
-
- {gridItems.gridSettings.map((item, index) => ( -
handleToggle('gridSettings', index)} - > - {settings.gridSettings[index]} {item} -
- ))} -
-
-
- - ) -} diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index ed400f95..2fed8591 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -63,20 +63,21 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla /** * ์ง€๋ถ•์žฌ ์ดˆ๊ธฐ๊ฐ’ */ - const defaultRoofSettings = { - roofSizeSet: '1', // ๊ธฐ๋ณธ ์น˜์ˆ˜ ์ž…๋ ฅ ๋ฐฉ๋ฒ• - roofAngleSet: 'slope', // ๊ธฐ๋ณธ ์ง€๋ถ• ๊ฐ๋„ ์„ค์ • + const DEFAULT_ROOF_SETTINGS = { + roofSizeSet: '1', + roofAngleSet: 'slope', angle: 21.8, - hajebichi: '', + hajebichi: null, id: 'ROOF_ID_WA_53A', index: 0, layout: ROOF_MATERIAL_LAYOUT.PARALLEL, lenAuth: 'R', lenBase: '235.000', - length: '235', + length: 235, name: '์ผ๋ณธ๊ธฐ์™€ A', nameJp: 'ๅ’Œ็“ฆA', pitch: 4, + planNo: planNo, raft: '', raftAuth: 'C', raftBaseCd: 'HEI_455', @@ -89,12 +90,12 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla selected: true, widAuth: 'R', widBase: '265.000', - width: '265', + width: 265, } useEffect(() => { /** - * ๋ฉ”๋‰ด์—์„œ ๋ฐฐ์น˜๋ฉด์ดˆ๊ธฐ์„ค์ • ์„ ํƒ ์‹œ ์กฐํšŒ + * ๋ฉ”๋‰ด์—์„œ ๋ฐฐ์น˜๋ฉด์ดˆ๊ธฐ์„ค์ • ์„ ํƒ ์‹œ ์กฐํšŒ ํ›„ ํ™”๋ฉด ์˜คํ”ˆ */ if (openPoint && openPoint === 'canvasMenus') fetchBasicSettings(planNo, openPoint) }, []) @@ -103,18 +104,16 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla if (addedRoofs.length > 0) { const raftCodeList = findCommonCode('203800') setRaftCodes(raftCodeList) - - /** - * ๋ฐ์ดํ„ฐ ์„ค์ • ํ™•์ธ ํ›„ ๋ฐ์ดํ„ฐ๊ฐ€ ์—†์œผ๋ฉด ๊ธฐ๋ณธ ๋ฐ์ดํ„ฐ ์„ค์ • - */ - if (addedRoofs.length > 0) { - setCurrentRoof({ ...addedRoofs[0], planNo: basicSetting.planNo }) - } else { - setCurrentRoof(defaultRoofSettings) - } + setCurrentRoof({ ...addedRoofs[0], planNo: planNo, roofSizeSet: String(basicSetting.roofSizeSet), roofAngleSet: basicSetting.roofAngleSet }) + } else { + /** ๋ฐ์ดํ„ฐ ์„ค์ • ํ™•์ธ ํ›„ ๋ฐ์ดํ„ฐ๊ฐ€ ์—†์œผ๋ฉด ๊ธฐ๋ณธ ๋ฐ์ดํ„ฐ ์„ค์ • */ + setCurrentRoof({ ...DEFAULT_ROOF_SETTINGS }) } }, [addedRoofs]) + /** + * ๋ฐฐ์น˜๋ฉด์ดˆ๊ธฐ์„ค์ • ์ •๋ณด ๋ณ€๊ฒฝ ์‹œ basicSettings ์„ค์ • + */ useEffect(() => { if (!currentRoof) return setBasicSettings({ @@ -256,7 +255,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla id={item.id} name={item.name} value={item.value} - checked={currentRoof?.roofSizeSet === item.value} + checked={String(currentRoof?.roofSizeSet) === item.value} onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })} /> @@ -279,7 +278,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla id={item.id} name={item.name} value={item.value} - checked={currentRoof?.roofAngleSet === item.value} + checked={String(currentRoof?.roofAngleSet) === item.value} onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })} /> diff --git a/src/components/playground.module.css b/src/components/playground.module.css deleted file mode 100644 index 273a4a34..00000000 --- a/src/components/playground.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.test { - @apply bg-red-500; - @apply text-2xl; -} diff --git a/src/hooks/common/useMasterController.js b/src/hooks/common/useMasterController.js index e1c37915..60aab800 100644 --- a/src/hooks/common/useMasterController.js +++ b/src/hooks/common/useMasterController.js @@ -2,10 +2,6 @@ import { useAxios } from '@/hooks/useAxios' import { useMessage } from '@/hooks/useMessage' import { useSwal } from '@/hooks/useSwal' import { getQueryString } from '@/util/common-utils' -import { trestleRequest, constructionRequest, trestleDetailRequest } from '@/models/apiModels' -import { POST } from '@/app/api/image-upload/route' -import { canvasState } from '@/store/canvasAtom' -import { useRecoilValue } from 'recoil' /** * ๋งˆ์Šคํ„ฐ ์ปจํŠธ๋กค๋Ÿฌ ํ›… diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index 8cdecf1c..37f53f5e 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/src/hooks/option/useCanvasSetting.js @@ -43,21 +43,19 @@ import { v4 as uuidv4 } from 'uuid' const defaultDotLineGridSetting = { INTERVAL: { - type: 2, // 1: ๊ฐ€๋กœ,์„ธ๋กœ ๊ฐ„๊ฒฉ ์ˆ˜๋™, 2: ๋น„์œจ ๊ฐ„๊ฒฉ + type: 2 /* 1: ๊ฐ€๋กœ,์„ธ๋กœ ๊ฐ„๊ฒฉ ์ˆ˜๋™, 2: ๋น„์œจ ๊ฐ„๊ฒฉ */, ratioInterval: 910, verticalInterval: 910, horizontalInterval: 910, - dimension: 1, // ์น˜์ˆ˜ + dimension: 1 /* ์น˜์ˆ˜ */, }, DOT: false, LINE: false, } -// let previousRoofMaterialsYn = 'N' // ์ง€๋ถ•์žฌ select ์ •๋ณด ๋น„๊ต ํ›„ ๋ณ€๊ฒฝ๋œ ๊ฒƒ์ด ์—†์œผ๋ฉด 1ํšŒ๋งŒ ์‹คํ–‰ - export function useCanvasSetting() { const canvas = useRecoilValue(canvasState) - /* canvas๊ฐ€ null์ด ์•„๋‹ ๋•Œ์—๋งŒ getObjects ํ˜ธ์ถœ */ + /** canvas๊ฐ€ null์ด ์•„๋‹ ๋•Œ์—๋งŒ getObjects ํ˜ธ์ถœ */ const canvasObjects = canvas ? canvas.getObjects() : [] const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState) @@ -119,14 +117,14 @@ export function useCanvasSetting() { const [type, setType] = useRecoilState(menuTypeState) const setCurrentMenu = useSetRecoilState(currentMenuState) - const resetModuleSelectionData = useResetRecoilState(moduleSelectionDataState) //๋‹ค์Œ์œผ๋กœ ๋„˜์–ด๊ฐ€๋Š” ์ตœ์ข… ๋ฐ์ดํ„ฐ - const resetSelectedModules = useResetRecoilState(selectedModuleState) //์„ ํƒ๋œ ๋ชจ๋“ˆ + const resetModuleSelectionData = useResetRecoilState(moduleSelectionDataState) /* ๋‹ค์Œ์œผ๋กœ ๋„˜์–ด๊ฐ€๋Š” ์ตœ์ข… ๋ฐ์ดํ„ฐ */ + const resetSelectedModules = useResetRecoilState(selectedModuleState) /* ์„ ํƒ๋œ ๋ชจ๋“ˆ */ const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2) - const [raftCodes, setRaftCodes] = useState([]) // ์„œ๊นŒ๋ž˜ ์ •๋ณด + const [raftCodes, setRaftCodes] = useState([]) /* ์„œ๊นŒ๋ž˜ ์ •๋ณด */ const { findCommonCode } = useCommonCode() - const [currentRoof, setCurrentRoof] = useState(null) // ํ˜„์žฌ ์„ ํƒ๋œ ์ง€๋ถ•์žฌ ์ •๋ณด + const [currentRoof, setCurrentRoof] = useState(null) /* ํ˜„์žฌ ์„ ํƒ๋œ ์ง€๋ถ•์žฌ ์ •๋ณด */ const { addPopup } = usePopup() const [popupId, setPopupId] = useState(uuidv4()) @@ -144,7 +142,7 @@ export function useCanvasSetting() { useEffect(() => { const tempFetchRoofMaterials = !fetchRoofMaterials - /* ์ดˆ 1ํšŒ๋งŒ ์‹คํ–‰ํ•˜๋„๋ก ์ฒ˜๋ฆฌ */ + /** ์ดˆ 1ํšŒ๋งŒ ์‹คํ–‰ํ•˜๋„๋ก ์ฒ˜๋ฆฌ */ setFetchRoofMaterials(tempFetchRoofMaterials) if (tempFetchRoofMaterials) { addRoofMaterials() @@ -176,7 +174,23 @@ export function useCanvasSetting() { angle: item.angle ? parseInt(item.angle) : 21.8, })) setRoofMaterials(roofLists) - const selectedRoofMaterial = roofLists[0] + } + + useEffect(() => { + if (addedRoofs.length > 0 && addedRoofs[0].planNo === basicSetting.planNo) { + const raftCodeList = findCommonCode('203800') + setRaftCodes(raftCodeList) + setCurrentRoof({ + ...addedRoofs[0], + planNo: addedRoofs[0].planNo, + roofSizeSet: String(basicSetting.roofSizeSet), + roofAngleSet: basicSetting.roofAngleSet, + }) + } + }, [addedRoofs]) + + useEffect(() => { + const selectedRoofMaterial = roofMaterials[0] if (addedRoofs.length === 0) { const newAddedRoofs = [] @@ -184,19 +198,7 @@ export function useCanvasSetting() { setAddedRoofs(newAddedRoofs) } setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial }) - } - - /** - * ๋ฐฐ์น˜๋ฉด ์ดˆ๊ธฐ์„ค์ • ํ™”๋ฉด์ด ์—ด๋ฆฌ์ง€ ์•Š์•„๋„ ๋ฐ์ดํ„ฐ set ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์ถ”๊ฐ€ - */ - useEffect(() => { - if (addedRoofs.length > 0) { - const raftCodeList = findCommonCode('203800') - setRaftCodes(raftCodeList) - - setCurrentRoof({ ...addedRoofs[0] }) - } - }, [addedRoofs]) + }, [roofMaterials]) useEffect(() => { if (!canvas) { @@ -339,7 +341,7 @@ export function useCanvasSetting() { } }) - /* ๋ฐ์ดํ„ฐ ์กด์žฌ ์‹œ ํ™”๋ฉด ๋‹ซ๊ธฐ(๋ฉ”๋‰ด/์ €์žฅ ํด๋ฆญ ์‹œ ์ œ์™ธ) */ + /** ๋ฐ์ดํ„ฐ ์กด์žฌ ์‹œ ํ™”๋ฉด ๋‹ซ๊ธฐ(๋ฉ”๋‰ด/์ €์žฅ ํด๋ฆญ ์‹œ ์ œ์™ธ) */ if (openPoint !== 'canvasMenus' && openPoint !== 'basicSettingSave') { //closePopup(popupId) closeAll() @@ -369,9 +371,9 @@ export function useCanvasSetting() { }, ] - /* ๋ฉ”๋‰ด์—์„œ ๋ฐฐ์น˜๋ฉด ์ดˆ๊ธฐ์„ค์ • ํด๋ฆญ ์‹œ ์‹คํ–‰ํ•˜์ง€ ์•Š์Œ */ + /** ๋ฉ”๋‰ด์—์„œ ๋ฐฐ์น˜๋ฉด ์ดˆ๊ธฐ์„ค์ • ํด๋ฆญ ์‹œ ์‹คํ–‰ํ•˜์ง€ ์•Š์Œ */ if (openPoint === null) { - /* ๋ฐฐ์น˜๋ฉด ์ดˆ๊ธฐ์„ค์ • ๋ฏธ์ €์žฅ ์ƒํƒœ์ด๋ฉด ํ™”๋ฉด ์—ด๊ธฐ */ + /** ๋ฐฐ์น˜๋ฉด ์ดˆ๊ธฐ์„ค์ • ๋ฏธ์ €์žฅ ์ƒํƒœ์ด๋ฉด ํ™”๋ฉด ์—ด๊ธฐ */ const placementInitialProps = { id: popupId, pos: { @@ -385,7 +387,7 @@ export function useCanvasSetting() { } } - /* ๋ฐ์ดํ„ฐ ์„ค์ • */ + /** ๋ฐ์ดํ„ฐ ์„ค์ • */ const addRoofs = [] for (let i = 0; i < roofsArray.length; i++) { roofMaterials?.map((material) => { @@ -440,6 +442,21 @@ export function useCanvasSetting() { // setCanvasSetting({ ...basicSetting }) } + /** + * ์ €์žฅ/๋ณต์‚ฌ์ €์žฅ ์‹œ ์ง€๋ถ• ํฌ๊ธฐ์— ๋”ฐ๋ฅธ ๋ฉ”๋‰ด ์„ค์ • + */ + const setMenuByRoofSize = (roofSizeSet) => { + if (['2', '3'].includes(String(roofSizeSet))) { + setMenuNumber(3) + setType('surface') + setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING) + } else { + setMenuNumber(2) + setType('outline') + setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) + } + } + /** * ๊ธฐ๋ณธ์„ค์ •(PlacementShapeSetting) ์ €์žฅ */ @@ -471,31 +488,23 @@ export function useCanvasSetting() { await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => { swalFire({ text: getMessage(res.returnMessage) }) - /* BasicSettings Recoil ์„ค์ • */ + /** BasicSettings Recoil ์„ค์ • */ setBasicSettings({ ...params }) }) - /* CanvasSetting Recoil ์„ค์ • - roofSizeSet์„ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ */ + /** CanvasSetting Recoil ์„ค์ • - roofSizeSet์„ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ */ setCanvasSetting({ ...basicSetting, roofSizeSet: String(params.roofSizeSet), }) - /* ๋ฉ”๋‰ด ์„ค์ • */ - if (['2', '3'].includes(params.roofSizeSet)) { - setMenuNumber(3) - setType('surface') - setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING) - } else { - setMenuNumber(2) - setType('outline') - setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) - } + /** ๋ฉ”๋‰ด ์„ค์ • */ + setMenuByRoofSize(params.roofSizeSet) - /* ๋ฐฐ์น˜๋ฉด์ดˆ๊ธฐ์„ค์ • ์กฐํšŒ */ + /** ๋ฐฐ์น˜๋ฉด์ดˆ๊ธฐ์„ค์ • ์กฐํšŒ */ fetchBasicSettings(params.planNo, 'basicSettingSave') - /* ๋ชจ๋“ˆ ์„ ํƒ ๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™” */ + /** ๋ชจ๋“ˆ ์„ ํƒ ๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™” */ resetModuleSelectionData() moduleSelectedDataTrigger({ common: {}, module: {}, roofConstructions: [] }) const isModuleExist = canvas.getObjects().some((obj) => obj.name === POLYGON_TYPE.MODULE) @@ -536,27 +545,19 @@ export function useCanvasSetting() { swalFire({ text: getMessage(res.returnMessage) }) }) - /* CanvasSetting Recoil ์„ค์ • - roofSizeSet์„ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ */ + /** CanvasSetting Recoil ์„ค์ • - roofSizeSet์„ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ */ setCanvasSetting({ ...basicSetting, roofSizeSet: String(params.roofSizeSet), }) - /* ๋ฉ”๋‰ด ์„ค์ • */ - if (['2', '3'].includes(params?.roofSizeSet)) { - setMenuNumber(3) - setType('surface') - setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING) - } else { - setMenuNumber(2) - setType('outline') - setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) - } + /** ๋ฉ”๋‰ด ์„ค์ • */ + setMenuByRoofSize(params.roofSizeSet) - /* ๋ฐฐ์น˜๋ฉด์ดˆ๊ธฐ์„ค์ • ์กฐํšŒ */ + /** ๋ฐฐ์น˜๋ฉด์ดˆ๊ธฐ์„ค์ • ์กฐํšŒ */ fetchBasicSettings(Number(params.planNo), 'basicSettingSave') - /* ๋ชจ๋“ˆ ์„ ํƒ ๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™” */ + /** ๋ชจ๋“ˆ ์„ ํƒ ๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™” */ resetModuleSelectionData() moduleSelectedDataTrigger({ common: {}, module: {}, roofConstructions: [] }) const isModuleExist = canvas.getObjects().some((obj) => obj.name === POLYGON_TYPE.MODULE) @@ -582,24 +583,16 @@ export function useCanvasSetting() { const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] })) const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item })) - /** - * ํก์ฐฉ์  ON/OFF - */ + /** ํก์ฐฉ์  ON/OFF */ setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: res.adsorpPoint }) - /** - * ์น˜์ˆ˜์„  ์„ค์ • - */ + /** ์น˜์ˆ˜์„  ์„ค์ • */ setDimensionLineSettings({ ...dimensionLineSettings, pixel: res.originPixel, color: res.originColor }) - /** - * ๋„๋ฉดํฌ๊ธฐ ์„ค์ • - */ + /** ๋„๋ฉดํฌ๊ธฐ ์„ค์ • */ setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: res.originHorizon, originVertical: res.originVertical }) - /** - * ๋ฐ์ดํ„ฐ ์„ค์ • - */ + /** ๋ฐ์ดํ„ฐ ์„ค์ • */ setSettingModalFirstOptions({ ...settingModalFirstOptions, option1: optionData1, @@ -614,45 +607,35 @@ export function useCanvasSetting() { const fontPatternData = { commonText: { - /** - * ๋ฌธ์ž ๊ธ€๊ผด ์กฐํšŒ ๋ฐ์ดํ„ฐ - */ + /** ๋ฌธ์ž ๊ธ€๊ผด ์กฐํšŒ ๋ฐ์ดํ„ฐ */ fontFamily: getFonts(res.wordFont), fontWeight: getFontStyles(res.wordFontStyle), fontSize: getFontSizes(res.wordFontSize), fontColor: getFontColors(res.wordFontColor), }, flowText: { - /** - * ํ๋ฆ„๋ฐฉํ–ฅ ๊ธ€๊ผด ์กฐํšŒ ๋ฐ์ดํ„ฐ - */ + /** ํ๋ฆ„๋ฐฉํ–ฅ ๊ธ€๊ผด ์กฐํšŒ ๋ฐ์ดํ„ฐ */ fontFamily: getFonts(res.flowFont), fontWeight: getFontStyles(res.flowFontStyle), fontSize: getFontSizes(res.flowFontSize), fontColor: getFontColors(res.flowFontColor), }, dimensionLineText: { - /** - * ์น˜์ˆ˜ ๊ธ€๊ผด ์กฐํšŒ ๋ฐ์ดํ„ฐ - */ + /** ์น˜์ˆ˜ ๊ธ€๊ผด ์กฐํšŒ ๋ฐ์ดํ„ฐ */ fontFamily: getFonts(res.dimensioFont), fontWeight: getFontStyles(res.dimensioFontStyle), fontSize: getFontSizes(res.dimensioFontSize), fontColor: getFontColors(res.dimensioFontColor), }, circuitNumberText: { - /** - * ํšŒ๋กœ๋ฒˆํ˜ธ ๊ธ€๊ผด ์กฐํšŒ ๋ฐ์ดํ„ฐ - */ + /** ํšŒ๋กœ๋ฒˆํ˜ธ ๊ธ€๊ผด ์กฐํšŒ ๋ฐ์ดํ„ฐ */ fontFamily: getFonts(res.circuitNumFont), fontWeight: getFontStyles(res.circuitNumFontStyle), fontSize: getFontSizes(res.circuitNumFontSize), fontColor: getFontColors(res.circuitNumFontColor), }, lengthText: { - /** - * ์น˜์ˆ˜์„  ๊ธ€๊ผด ์กฐํšŒ ๋ฐ์ดํ„ฐ - */ + /** ์น˜์ˆ˜์„  ๊ธ€๊ผด ์กฐํšŒ ๋ฐ์ดํ„ฐ */ fontFamily: getFonts(res.lengthFont), fontWeight: getFontStyles(res.lengthFontStyle), fontSize: getFontSizes(res.lengthFontSize), @@ -660,14 +643,10 @@ export function useCanvasSetting() { }, } - /** - * ์กฐํšŒ๋œ ๊ธ€๊ผด ๋ฐ์ดํ„ฐ set - */ + /** ์กฐํšŒ๋œ ๊ธ€๊ผด ๋ฐ์ดํ„ฐ set */ setGlobalFont(fontPatternData) - /** - * ์ /์„  ๊ทธ๋ฆฌ๋“œ - */ + /** ์ /์„  ๊ทธ๋ฆฌ๋“œ */ const patternData = { INTERVAL: { type: res.gridType, @@ -682,47 +661,31 @@ export function useCanvasSetting() { setDotLineGridSettingState(patternData) - /** - * ๊ทธ๋ฆฌ๋“œ ์ƒ‰ ์„ค์ • - */ + /** ๊ทธ๋ฆฌ๋“œ ์ƒ‰ ์„ค์ • */ setGridColor(res.gridColor) } else { - //์กฐํšŒ๋œ ๊ธ€๊ผด ๋ฐ์ดํ„ฐ๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ (๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™”) + /** ์กฐํšŒ๋œ ๊ธ€๊ผด ๋ฐ์ดํ„ฐ๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ (๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™”) */ - /** - * ํก์ฐฉ์  ON/OFF - */ + /** ํก์ฐฉ์  ON/OFF */ setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: false }) - /** - * ์น˜์ˆ˜์„  ์„ค์ • - */ + /** ์น˜์ˆ˜์„  ์„ค์ • */ resetDimensionLineSettings() - /** - * ๋„๋ฉดํฌ๊ธฐ ์„ค์ • - */ + /** ๋„๋ฉดํฌ๊ธฐ ์„ค์ • */ resetPlanSizeSettingMode() - /** - * ๋ฐ์ดํ„ฐ ์„ค์ • - */ + /** ๋ฐ์ดํ„ฐ ์„ค์ • */ resetSettingModalFirstOptions() resetSettingModalSecondOptions() - /** - * ๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™” - */ + /** ๋ฐ์ดํ„ฐ ์ดˆ๊ธฐํ™” */ resetGlobalFont() - /** - * ์ /์„  ๊ทธ๋ฆฌ๋“œ - */ + /** ์ /์„  ๊ทธ๋ฆฌ๋“œ */ setDotLineGridSettingState({ ...defaultDotLineGridSetting }) - /** - * ๊ทธ๋ฆฌ๋“œ ์ƒ‰ ์„ค์ • - */ + /** ๊ทธ๋ฆฌ๋“œ ์ƒ‰ ์„ค์ • */ setGridColor('#FF0000') } @@ -736,9 +699,7 @@ export function useCanvasSetting() { * CanvasSetting ์˜ต์…˜ ํด๋ฆญ ํ›„ ์ €์žฅ */ const onClickOption2 = async () => { - /** - * ์„œ๋ฒ„์— ์ „์†กํ•  ๋ฐ์ดํ„ฐ - */ + /** ์„œ๋ฒ„์— ์ „์†กํ•  ๋ฐ์ดํ„ฐ */ const dataToSend = { firstOption1: option1.map((item) => ({ column: item.column, @@ -759,13 +720,9 @@ export function useCanvasSetting() { })), } const patternData = { - /** - * ๊ฒฌ์ ์„œ ๋ฒˆํ˜ธ - */ + /** ๊ฒฌ์ ์„œ ๋ฒˆํ˜ธ */ objectNo: correntObjectNo, - /** - * ๋””์Šคํ”Œ๋ ˆ์ด ์„ค์ •(๋‹ค์ค‘) - */ + /** ๋””์Šคํ”Œ๋ ˆ์ด ์„ค์ •(๋‹ค์ค‘) */ allocDisplay: dataToSend.firstOption1[0].selected, outlineDisplay: dataToSend.firstOption1[1].selected, gridDisplay: dataToSend.firstOption1[2].selected, @@ -776,85 +733,62 @@ export function useCanvasSetting() { trestleDisplay: dataToSend.firstOption1[7].selected, imageDisplay: dataToSend.firstOption1[8].selected, totalDisplay: dataToSend.firstOption1[9].selected, - /** - * ์ฐจ์ˆ˜ ํ‘œ์‹œ(๋‹จ ๊ฑด) - */ + /** ์ฐจ์ˆ˜ ํ‘œ์‹œ(๋‹จ ๊ฑด) */ corridorDimension: dataToSend.firstOption3[0].selected, realDimension: dataToSend.firstOption3[1].selected, noneDimension: dataToSend.firstOption3[2].selected, - /** - * ํ™”๋ฉด ํ‘œ์‹œ(๋‹จ ๊ฑด) - */ + /** ํ™”๋ฉด ํ‘œ์‹œ(๋‹จ ๊ฑด) */ onlyBorder: dataToSend.firstOption2[0].selected, lineHatch: dataToSend.firstOption2[1].selected, allPainted: dataToSend.firstOption2[2].selected, - /** - * ํก์ฐฉ๋ฒ”์œ„ ์„ค์ •(๋‹จ ๊ฑด) - */ + /** ํก์ฐฉ๋ฒ”์œ„ ์„ค์ •(๋‹จ ๊ฑด) */ adsorpRangeSmall: dataToSend.secondOption2[0].selected, adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected, adsorpRangeMedium: dataToSend.secondOption2[2].selected, adsorpRangeLarge: dataToSend.secondOption2[3].selected, - - /** - * ํก์ฐฉ์  ON/OFF - */ + /** ํก์ฐฉ์  ON/OFF */ adsorpPoint: adsorptionPointMode.adsorptionPoint, //??: adsorptionRange, ์‚ฌ์šฉ์—ฌ๋ถ€ ํ™•์ธ ํ•„์š” - /** - * ๊ธ€๊ผด ์„ค์ • - */ - //๋ฌธ์ž ๊ธ€๊ผด + /** ๋ฌธ์ž ๊ธ€๊ผด ์„ค์ • */ wordFont: globalFont.commonText.fontFamily?.value ?? 'MS PGothic', wordFontStyle: globalFont.commonText.fontWeight?.value ?? 'normal', wordFontSize: globalFont.commonText.fontSize?.value ?? 16, wordFontColor: globalFont.commonText.fontColor?.value ?? 'black', - /** - * ํ๋ฆ„๋ฐฉํ–ฅ ๊ธ€๊ผด - */ + /** ํ๋ฆ„๋ฐฉํ–ฅ ๊ธ€๊ผด ์„ค์ • */ flowFont: globalFont.flowText.fontFamily?.value ?? 'MS PGothic', flowFontStyle: globalFont.flowText.fontWeight?.value ?? 'normal', flowFontSize: globalFont.flowText.fontSize?.value ?? 16, flowFontColor: globalFont.flowText.fontColor?.value ?? 'black', - /** - * ์น˜์ˆ˜ ๊ธ€๊ผด - */ + /** ์น˜์ˆ˜ ๊ธ€๊ผด ์„ค์ • */ dimensioFont: globalFont.dimensionLineText.fontFamily?.value ?? 'MS PGothic', dimensioFontStyle: globalFont.dimensionLineText.fontWeight?.value ?? 'normal', dimensioFontSize: globalFont.dimensionLineText.fontSize?.value ?? 16, dimensioFontColor: globalFont.dimensionLineText.fontColor?.value ?? 'black', - /** - * ํšŒ๋กœ๋ฒˆํ˜ธ ๊ธ€๊ผด - */ + /** ํšŒ๋กœ๋ฒˆํ˜ธ ๊ธ€๊ผด ์„ค์ • */ circuitNumFont: globalFont.circuitNumberText.fontFamily?.value ?? 'MS PGothic', circuitNumFontStyle: globalFont.circuitNumberText.fontWeight?.value ?? 'normal', circuitNumFontSize: globalFont.circuitNumberText.fontSize?.value ?? 16, circuitNumFontColor: globalFont.circuitNumberText.fontColor?.value ?? 'black', - /** - * ์น˜์ˆ˜์„  ๊ธ€๊ผด - */ + /** ์น˜์ˆ˜์„  ๊ธ€๊ผด ์„ค์ • */ lengthFont: globalFont.lengthText.fontFamily?.value ?? 'MS PGothic', lengthFontStyle: globalFont.lengthText.fontWeight?.value ?? 'normal', lengthFontSize: globalFont.lengthText.fontSize?.value ?? 16, lengthFontColor: globalFont.lengthText.fontColor?.value ?? 'black', - /** - * ์น˜์ˆ˜์„  ์„ค์ • - */ + /** ์น˜์ˆ˜์„  ์„ค์ • */ originPixel: dimensionLineSettings.pixel, originColor: dimensionLineSettings.color, - /** - * ๋„๋ฉดํฌ๊ธฐ ์„ค์ • - */ + /** ๋„๋ฉดํฌ๊ธฐ ์„ค์ • */ originHorizon: planSizeSettingMode.originHorizon, originVertical: planSizeSettingMode.originVertical, + /** ์ /์„  ๊ทธ๋ฆฌ๋“œ */ dotGridDisplay: dotLineGridSetting.DOT, lineGridDisplay: dotLineGridSetting.LINE, gridType: dotLineGridSetting.INTERVAL.type, @@ -863,6 +797,7 @@ export function useCanvasSetting() { gridRatio: dotLineGridSetting.INTERVAL.ratioInterval / 10, gridDimen: dotLineGridSetting.INTERVAL.dimension, + /** ๊ทธ๋ฆฌ๋“œ ์ƒ‰ ์„ค์ • */ gridColor: gridColor, } @@ -875,13 +810,10 @@ export function useCanvasSetting() { .then((res) => { //swalFire({ text: getMessage(res.returnMessage) }) - /** - * Canvas ๋””์Šคํ”Œ๋ ˆ์ด ์„ค์ • ์‹œ ํ•ด๋‹น ์˜ต์…˜ ์ ์šฉ - */ + /** Canvas ๋””์Šคํ”Œ๋ ˆ์ด ์„ค์ • ์‹œ ํ•ด๋‹น ์˜ต์…˜ ์ ์šฉ */ frontSettings() - /** - * ์ €์žฅ ํ›„ ์žฌ์กฐํšŒ - */ + + /** ์ €์žฅ ํ›„ ์žฌ์กฐํšŒ */ fetchSettings() }) .catch((error) => { @@ -912,8 +844,8 @@ export function useCanvasSetting() { */ /** - * ์˜ต์…˜๋ช… - * ์˜ต์…˜์ƒํƒœ + * ์˜ต์…˜๋ช… optionName + * ์˜ต์…˜์ƒํƒœ optionSelected */ let optionName let optionSelected @@ -948,15 +880,11 @@ export function useCanvasSetting() { optionName = ['backGroundImage'] break case 'totalDisplay': - /** - * ์ž‘์—…ํ•  ํ•„์š” ์—†์Œ - */ + /** ์ž‘์—…ํ•  ํ•„์š” ์—†์Œ */ optionName = [] break } - /** - * ํ‘œ์‹œ ์„ ํƒ ์ƒํƒœ(true/false) - */ + /** ํ‘œ์‹œ ์„ ํƒ ์ƒํƒœ(true/false)*/ optionSelected = option1[i].selected canvasObjects