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) { +