From 53555c3568a79ce087452c8df9e19b2360e49fb2 Mon Sep 17 00:00:00 2001 From: yjnoh Date: Tue, 27 Aug 2024 13:43:09 +0900 Subject: [PATCH 1/4] =?UTF-8?q?colorpicker=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/components/SettingsModal.jsx | 41 ++++++++++++++++++++++++----- src/components/ui/ThumbnailLIst.jsx | 2 +- yarn.lock | 5 ++++ 4 files changed, 41 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 628550a1..cfafa961 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "postcss": "^8", "prettier": "^3.3.3", "prisma": "^5.18.0", + "react-color-palette": "^7.2.2", "sass": "^1.77.8", "tailwindcss": "^3.4.1" } diff --git a/src/components/SettingsModal.jsx b/src/components/SettingsModal.jsx index 3cf9997b..2db65293 100644 --- a/src/components/SettingsModal.jsx +++ b/src/components/SettingsModal.jsx @@ -4,6 +4,9 @@ import { useRecoilState, useRecoilValue } from 'recoil' import { modalContent, modalState } from '@/store/modalAtom' import { guideLineState } from '@/store/canvasAtom' import { fabric } from 'fabric' +import { ColorPicker, useColor } from 'react-color-palette' +import 'react-color-palette/css' +import { withRouter } from 'next/router' export default function SettingsModal(props) { const { canvasProps } = props @@ -19,6 +22,15 @@ export default function SettingsModal(props) { const gridSettingArray = [] + const [guideColor, setGuideColor] = useColor('rgb(200, 15, 15)') + 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 @@ -54,7 +66,7 @@ export default function SettingsModal(props) { const horizontalLine = new fabric.Line( [0, i * moduleVertLength - moduleVertLength / 2, canvasProps.width, i * moduleVertLength - moduleVertLength / 2], { - stroke: 'gray', + stroke: guideColor.hex, strokeWidth: 1, selectable: true, lockMovementX: true, @@ -63,6 +75,8 @@ export default function SettingsModal(props) { lockScalingX: true, lockScalingY: true, name: 'guideLine', + strokeDashArray: [5, 2], + opacity: 0.3, }, ) canvasProps.add(horizontalLine) @@ -73,7 +87,7 @@ export default function SettingsModal(props) { const verticalLine = new fabric.Line( [i * moduleHoriLength - moduleHoriLength / 2, 0, i * moduleHoriLength - moduleHoriLength / 2, canvasProps.height], { - stroke: 'gray', + stroke: guideColor.hex, strokeWidth: 1, selectable: true, lockMovementX: true, @@ -82,6 +96,8 @@ export default function SettingsModal(props) { lockScalingX: true, lockScalingY: true, name: 'guideLine', + strokeDashArray: [5, 2], + opacity: 0.3, }, ) canvasProps.add(verticalLine) @@ -104,7 +120,9 @@ export default function SettingsModal(props) { if (gridCheckedValue.includes('dot')) { const circle = new fabric.Circle({ radius: 2, - fill: 'red', + fill: 'white', + stroke: guideColor.hex, + strokeWidth: 0.7, originX: 'center', originY: 'center', selectable: false, @@ -200,10 +218,18 @@ export default function SettingsModal(props) { 임의간격 -
- - 종횡연동 - +
+ 가이드컬러
setColorPickerShow(!colorPickerShow)}>
+
+ {colorPickerShow && ( + + )} + +
+ + 종횡연동 + +
@@ -213,6 +239,7 @@ export default function SettingsModal(props) { mm
+
+ ※ 지붕재는 최대 4종까지 선택할 수 있습니다. +
+ + {roofSettings.map((setting, index) => { + return + })} + +
+ + +
+ + + ) +} + +const RoofSelectBox = (props) => { + return ( +
+ + props.onChange(props.setting.id, e)} + /> + mm + props.onChange(props.setting.id, e)} + /> + mm + props.onChange(props.setting.id, e)} + /> + mm +
+ props.onChange(props.setting.id, e)} + > + 병렬식 + 계단식 + +
+
+ ) +} diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index 217d0521..4e8b5a01 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -26,11 +26,13 @@ import { QPolygon } from '@/components/fabric/QPolygon' import ThumbnailList from './ui/ThumbnailLIst' import QContextMenu from './common/context-menu/QContextMenu' import { modalContent, modalState } from '@/store/modalAtom' -import SettingsModal from './SettingsModal' import { useAxios } from '@/hooks/useAxios' import QPolygonContextMenu from '@/components/common/context-menu/QPolygonContextMenu' import QLineContextMenu from '@/components/common/context-menu/QLineContextMenu' +import InitSettingsModal from './InitSettingsModal' +import GridSettingsModal from './GridSettingsModal' + export default function Roof2(props) { const { name, userId, email, isLoggedIn } = props const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas') @@ -578,7 +580,16 @@ export default function Roof2(props) { + + + From 8765b8934fddc2dfa5b38426547c85b2ab7a75a7 Mon Sep 17 00:00:00 2001 From: yjnoh Date: Mon, 2 Sep 2024 13:52:24 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=EB=B0=B0=EC=B9=98=EB=A9=B4=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/drawTemplates/153302.svg | 23 +++++ public/drawTemplates/shape21.svg | 4 + src/components/GridSettingsModal.jsx | 2 +- src/components/InitSettingsModal.jsx | 122 ++++++++++++++++----------- src/components/Roof2.jsx | 10 +++ src/store/canvasAtom.js | 5 ++ 6 files changed, 117 insertions(+), 49 deletions(-) create mode 100644 public/drawTemplates/153302.svg create mode 100644 public/drawTemplates/shape21.svg diff --git a/public/drawTemplates/153302.svg b/public/drawTemplates/153302.svg new file mode 100644 index 00000000..3b1c97b0 --- /dev/null +++ b/public/drawTemplates/153302.svg @@ -0,0 +1,23 @@ + + + + +Created by potrace 1.15, written by Peter Selinger 2001-2017 + + + + + + + diff --git a/public/drawTemplates/shape21.svg b/public/drawTemplates/shape21.svg new file mode 100644 index 00000000..a2d901e7 --- /dev/null +++ b/public/drawTemplates/shape21.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/GridSettingsModal.jsx b/src/components/GridSettingsModal.jsx index f1e77c94..35bb1793 100644 --- a/src/components/GridSettingsModal.jsx +++ b/src/components/GridSettingsModal.jsx @@ -7,7 +7,7 @@ import { fabric } from 'fabric' import { ColorPicker, useColor } from 'react-color-palette' import 'react-color-palette/css' -export default function SettingsModal(props) { +export default function GridSettingsModal(props) { const { canvasProps } = props const [isCustomGridSetting, setIsCustomGridSetting] = useState(true) const [gridCheckedValue, setGridCheckValue] = useState([]) diff --git a/src/components/InitSettingsModal.jsx b/src/components/InitSettingsModal.jsx index 8d0299f2..a79c7a9e 100644 --- a/src/components/InitSettingsModal.jsx +++ b/src/components/InitSettingsModal.jsx @@ -2,13 +2,21 @@ 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 [open, setOpen] = useRecoilState(modalState) + const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState) const [roofMaterials, setRoofMaterials] = useState([]) - const [roofSettings, setRoofSettings] = useState([]) - const { get } = useAxios() + const [basicSetting, setBasicSettings] = useState({ + type: '1', + inputType: '1', + angleType: 'slope', + roofs: [], + }) + + const { get, post } = useAxios() useEffect(() => { get({ url: '/api/roof-material/roof-material-infos' }).then((res) => { @@ -17,32 +25,56 @@ export default function InitSettingsModal(props) { setRoofMaterials(res) }) + + 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 addRoofSetting = () => { - if (roofSettings.length === 4) { - alert('지붕재는 최대 4개까지 선택할 수 있습니다.') + if (basicSetting.roofs.length === 4) { + alert('지붕재는 최대 4종까지 선택할 수 있습니다.') return } + //기본값 const newRoofSettings = { - id: roofSettings.length + 1, - roofId: '', - width: '', - height: '', - type: '', - gap: '', - layout: '병렬식', + id: basicSetting.roofs.length + 1, + roofId: '3', + width: '200', + height: '200', + gap: '0', + layout: 'parallel', } - setRoofSettings([...roofSettings, newRoofSettings]) + setBasicSettings((prevState) => ({ + ...prevState, + roofs: [...prevState.roofs, newRoofSettings], + })) } + //배열 값 변경 함수 const handleRoofSettings = (id, event) => { - const newRoofSettings = [...roofSettings] - let setting = newRoofSettings.find((setting) => setting.id === id) - setting[event.target.name] = event.target.value - setRoofSettings(newRoofSettings) + const roof = basicSetting.roofs.map((roof, i) => (id === roof.id ? { ...roof, [event.target.name]: event.target.value } : roof)) + setBasicSettings((prevState) => ({ + ...prevState, + roofs: [...roof], + })) + } + + const submitCanvasConfig = () => { + post({ url: '/api/canvas-config', data: basicSetting }).then((res) => { + if (!res) { + setCanvasSetting({ ...basicSetting }) + } + }) } return ( @@ -52,7 +84,7 @@ export default function InitSettingsModal(props) {
- + 치수 입력에 의한 물건작성
@@ -60,7 +92,7 @@ export default function InitSettingsModal(props) {
- + 복사도 입력 실측값 입력 육지붕 @@ -70,7 +102,7 @@ export default function InitSettingsModal(props) {
- + 경사 각도 @@ -84,12 +116,13 @@ export default function InitSettingsModal(props) { ※ 지붕재는 최대 4종까지 선택할 수 있습니다.
- {roofSettings.map((setting, index) => { - return - })} + {basicSetting.roofs && + basicSetting.roofs.map((roof, index) => { + return + })}
-