diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 04f68a25..3471701e 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -19,7 +19,7 @@ export default function CanvasMenu(props) { const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState) const [type, setType] = useState('') const { getMessage } = useMessage() - const canvasZoom = useRecoilValue(canvasZoomState) + const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState) const canvas = useRecoilValue(canvasState) const setCurrentMenu = useSetRecoilState(currentMenuState) const setPoints = useSetRecoilState(outerLinePointsState) @@ -54,6 +54,13 @@ export default function CanvasMenu(props) { canvas?.clear() } + const handleZoomClear = () => { + setCanvasZoom(100) + canvas.set({ zoom: 1 }) + canvas.viewportTransform = [1, 0, 0, 1, 0, 0] + canvas.renderAll() + } + return (
@@ -156,7 +163,7 @@ export default function CanvasMenu(props) {
{canvasZoom}% - +
diff --git a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx index 1b99f039..05278e3c 100644 --- a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx +++ b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx @@ -16,11 +16,11 @@ import { outerLinePointsState, outerLineTypeState, } from '@/store/outerLineAtom' -import { QLine } from '@/components/fabric/QLine' import { useLine } from '@/hooks/useLine' import { distanceBetweenPoints } from '@/util/canvas-util' import { calculateAngle } from '@/util/qpolygon-utils' import { usePolygon } from '@/hooks/usePolygon' +import { onlyNumberInputChange, onlyNumberWithDotInputChange } from '@/util/input-utils' export default function OuterLineWall(props) { const { setShowOutlineModal } = props @@ -578,10 +578,7 @@ export default function OuterLineWall(props) { className="input-origin block" value={length1} ref={length1Ref} - onChange={(e) => { - const value = e.target.value.replace(/^0+/, '') - setLength1(value.replace(/[^-0-9]/g, '')) - }} + onChange={(e) => onlyNumberInputChange(e, setLength1)} placeholder="3000" />
@@ -599,10 +596,7 @@ export default function OuterLineWall(props) { className="input-origin block" value={length1} ref={length1Ref} - onChange={(e) => { - const value = e.target.value.replace(/^0+/, '') - setLength1(value.replace(/[^-0-9]/g, '')) - }} + onChange={(e) => onlyNumberInputChange(e, setLength1)} placeholder="3000" />
@@ -617,10 +611,7 @@ export default function OuterLineWall(props) { className="input-origin block" value={length2} ref={length2Ref} - onChange={(e) => { - const value = e.target.value.replace(/^0+/, '') - setLength2(value.replace(/[^-0-9]/g, '')) - }} + onChange={(e) => onlyNumberInputChange(e, setLength2)} placeholder="3000" />
@@ -638,10 +629,7 @@ export default function OuterLineWall(props) { className="input-origin block" value={length1} ref={length1Ref} - onChange={(e) => { - const value = e.target.value.replace(/^0+/, '') - setLength1(value.replace(/[^-0-9]/g, '')) - }} + onChange={(e) => onlyNumberInputChange(e, setLength1)} placeholder="3000" /> @@ -651,18 +639,7 @@ export default function OuterLineWall(props) { type="text" value={angle1} ref={angle1Ref} - onChange={(e) => { - const val = e.target.value - // const pattern = /(^\d+$)|(^\d{1,}.\d{0,2}$)/ - const pattern = /^-?(\d{1,3}([.]\d{0,2})?)?$/ - if (!pattern.test(val)) { - // prev에서 마지막 자리 제거 - setAngle1(val.slice(0, val.length - 1)) - return - } - - setAngle1(val) - }} + onChange={(e) => onlyNumberWithDotInputChange(e, setAngle1)} className="input-origin block" /> diff --git a/src/util/input-utils.js b/src/util/input-utils.js new file mode 100644 index 00000000..e2409cab --- /dev/null +++ b/src/util/input-utils.js @@ -0,0 +1,20 @@ +// 숫자만 입력 가능한 input onChange 함수 +export const onlyNumberInputChange = (e, callback) => { + let value = e.target.value.replace(/^0+/, '') + value = value.replace(/[^-0-9]/g, '') + callback(value) +} + +//소수점 둘째자리 숫자만 입력가능 +export const onlyNumberWithDotInputChange = (e, callback) => { + const val = e.target.value + + const pattern = /^-?(\d{1,4}([.]\d{0,2})?)?$/ + if (!pattern.test(val)) { + // prev에서 마지막 자리 제거 + callback(val.slice(0, val.length - 1)) + return + } + + callback(val) +}