qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'dev_ysCha' (#436) from dev_ysCha into dev

Browse Source 
Reviewed-on: #436
This commit is contained in:
ysCha 2025-11-27 10:34:28 +09:00
commit d747aee284
10 changed files with 478 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/floor-plan/modal/lineTypes/Angle.jsx
View File

@ -1,6 +1,7 @@
import Image from 'next/image'
import { useMessage } from '@/hooks/useMessage'
import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Angle({ props }) {
const { getMessage } = useMessage()
@ -14,14 +15,29 @@ export default function Angle({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={angle1}*/}
{/* ref={angle1Ref}*/}
{/* onFocus={(e) => (angle1Ref.current.value = '')}*/}
{/* onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}*/}
{/* placeholder="45"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={angle1}
ref={angle1Ref}
onFocus={(e) => (angle1Ref.current.value = '')}
onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}
onChange={(value) => setAngle1(value)}
placeholder="45"
onFocus={() => (angle1Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: true
}}
/>
</div>
<button
@ -34,14 +50,29 @@ export default function Angle({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={length1}*/}
{/* ref={length1Ref}*/}
{/* onFocus={(e) => (length1Ref.current.value = '')}*/}
{/* onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={length1}
ref={length1Ref}
onFocus={(e) => (length1Ref.current.value = '')}
onChange={(e) => setLength1(normalizeDigits(e.target.value))}
onChange={(value) => setLength1(value)}
placeholder="3000"
onFocus={() => (length1Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<button

70
src/components/floor-plan/modal/lineTypes/Diagonal.jsx
View File

@ -1,5 +1,6 @@
import { useMessage } from '@/hooks/useMessage'
import { normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function Diagonal({ props }) {
const { getMessage } = useMessage()
@ -30,14 +31,29 @@ export default function Diagonal({ props }) {
{getMessage('modal.cover.outline.length')}
</span>
<div className="input-grid" style={{ width: '63px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={outerLineDiagonalLength}*/}
{/* ref={outerLineDiagonalLengthRef}*/}
{/* onFocus={(e) => (outerLineDiagonalLengthRef.current.value = '')}*/}
{/* onChange={(e) => setOuterLineDiagonalLength(normalizeDigits(e.target.value))}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={outerLineDiagonalLength}
ref={outerLineDiagonalLengthRef}
onFocus={(e) => (outerLineDiagonalLengthRef.current.value = '')}
onChange={(e) => setOuterLineDiagonalLength(normalizeDigits(e.target.value))}
onChange={(value) => setOuterLineDiagonalLength(value)}
placeholder="3000"
onFocus={() => (outerLineDiagonalLengthRef.current.value = '')}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<button
@ -52,14 +68,29 @@ export default function Diagonal({ props }) {
<div className="outline-form">
<span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={length1}*/}
{/* ref={length1Ref}*/}
{/* onFocus={(e) => (length1Ref.current.value = '')}*/}
{/* onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={length1}
ref={length1Ref}
onFocus={(e) => (length1Ref.current.value = '')}
onChange={(e) => setLength1(normalizeDigits(e.target.value))}
onChange={(value) => setLength1(value)}
placeholder="3000"
onFocus={() => (length1Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<button
@ -110,14 +141,29 @@ export default function Diagonal({ props }) {
<div className="outline-form">
<span className="mr10"> {getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '98px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={length2}*/}
{/* ref={length2Ref}*/}
{/* onChange={(e) => setLength2(normalizeDigits(e.target.value))}*/}
{/* readOnly={true}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={length2}
ref={length2Ref}
onChange={(e) => setLength2(normalizeDigits(e.target.value))}
readOnly={true}
onChange={(value) => setLength2(value)}
placeholder="3000"
onFocus={() => (length2Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
</div>

102
src/components/floor-plan/modal/lineTypes/DoublePitch.jsx
View File

@ -1,6 +1,7 @@
import { useMessage } from '@/hooks/useMessage'
import { normalizeDecimalLimit, normalizeDigits } from '@/util/input-utils'
import { getDegreeByChon } from '@/util/canvas-util'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function DoublePitch({ props }) {
const { getMessage } = useMessage()
@ -50,14 +51,29 @@ export default function DoublePitch({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={angle1}*/}
{/* ref={angle1Ref}*/}
{/* onFocus={(e) => (angle1Ref.current.value = '')}*/}
{/* onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}*/}
{/* placeholder="45"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={angle1}
ref={angle1Ref}
onFocus={(e) => (angle1Ref.current.value = '')}
onChange={(e) => setAngle1(normalizeDecimalLimit(e.target.value, 2))}
onChange={(value) => setAngle1(value)}
placeholder="45"
onFocus={() => (angle1Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: true
}}
/>
</div>
<button className="reset-btn" onClick={() => setAngle1(0)}></button>
@ -67,14 +83,29 @@ export default function DoublePitch({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={length1}*/}
{/* ref={length1Ref}*/}
{/* onFocus={(e) => (length1Ref.current.value = '')}*/}
{/* onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={length1}
ref={length1Ref}
onFocus={(e) => (length1Ref.current.value = '')}
onChange={(e) => setLength1(normalizeDigits(e.target.value))}
onChange={(value) => setLength1(value)}
placeholder="3000"
onFocus={() => (length1Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<button
@ -125,18 +156,36 @@ export default function DoublePitch({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.angle')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={angle2}*/}
{/* ref={angle2Ref}*/}
{/* onFocus={(e) => (angle2Ref.current.value = '')}*/}
{/* onChange={(e) => {*/}
{/* const v = normalizeDecimalLimit(e.target.value, 2)*/}
{/* setAngle2(v)*/}
{/* setLength2(getLength2())*/}
{/* }}*/}
{/* placeholder="45"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={angle2}
ref={angle2Ref}
onFocus={(e) => (angle2Ref.current.value = '')}
onChange={(e) => {
const v = normalizeDecimalLimit(e.target.value, 2)
setAngle2(v)
onChange={(value) => {
setAngle2(value)
setLength2(getLength2())
}}
placeholder="45"
onFocus={() => (angle2Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: true
}}
/>
</div>
<button
@ -151,15 +200,30 @@ export default function DoublePitch({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={length2}*/}
{/* ref={length2Ref}*/}
{/* onFocus={(e) => (length2Ref.current.value = '')}*/}
{/* onChange={(e) => setLength2(normalizeDigits(e.target.value))}*/}
{/* readOnly={true}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={length2}
ref={length2Ref}
onFocus={(e) => (length2Ref.current.value = '')}
onChange={(e) => setLength2(normalizeDigits(e.target.value))}
readOnly={true}
onChange={(value) => setLength2(value)}
placeholder="3000"
onFocus={() => (length2Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<button

49
src/components/floor-plan/modal/lineTypes/RightAngle.jsx
View File

@ -1,5 +1,6 @@
import { useMessage } from '@/hooks/useMessage'
import { normalizeDigits } from '@/util/input-utils'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function RightAngle({ props }) {
const { getMessage } = useMessage()
@ -22,14 +23,29 @@ export default function RightAngle({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={length1}*/}
{/* ref={length1Ref}*/}
{/* onFocus={(e) => (length1Ref.current.value = '')}*/}
{/* onChange={(e) => setLength1(normalizeDigits(e.target.value))}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
placeholder="3000"
value={length1}
ref={length1Ref}
onFocus={(e) => (length1Ref.current.value = '')}
onChange={(e) => setLength1(normalizeDigits(e.target.value))}
placeholder="3000"
onChange={(value) => setLength1(value)}
onFocus={() => (length1Ref.current.value = '')}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<button
@ -78,14 +94,29 @@ export default function RightAngle({ props }) {
<div className="outline-form">
<span className="mr10">{getMessage('modal.cover.outline.length')}</span>
<div className="input-grid" style={{ width: '63px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* value={length2}*/}
{/* ref={length2Ref}*/}
{/* onFocus={(e) => (length2Ref.current.value = '')}*/}
{/* onChange={(e) => setLength2(normalizeDigits(e.target.value))}*/}
{/* placeholder="3000"*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={length2}
ref={length2Ref}
onFocus={(e) => (length2Ref.current.value = '')}
onChange={(e) => setLength2(normalizeDigits(e.target.value))}
onFocus={() => (length2Ref.current.value = '')}
onChange={(value) => setLength2(value)}
placeholder="3000"
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<button

18
src/components/floor-plan/modal/object/DormerOffset.jsx
View File

@ -6,6 +6,7 @@ import { contextPopupPositionState } from '@/store/popupAtom'
import { usePopup } from '@/hooks/usePopup'
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
import { canvasState } from '@/store/canvasAtom'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function DormerOffset(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@ -16,6 +17,8 @@ export default function DormerOffset(props) {
const [arrow2, setArrow2] = useState(null)
const arrow1LengthRef = useRef()
const arrow2LengthRef = useRef()
const [arrow1Length, setArrow1Length] = useState(0)
const [arrow2Length, setArrow2Length] = useState(0)
const canvas = useRecoilValue(canvasState)
const { dormerOffsetKeyEvent, dormerOffset } = useObjectBatch({})
@ -50,7 +53,20 @@ export default function DormerOffset(props) {
<p className="mb5">{getMessage('length')}</p>
<div className="input-move-wrap mb5">
<div className="input-move">
<input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />
{/*<input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={arrow1LengthRef.current.value}
ref={arrow1LengthRef}
onChange={(value) => setArrow1Length(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span>mm</span>
<div className="direction-move-wrap">

51
src/components/floor-plan/modal/object/SizeSetting.jsx
View File

@ -5,10 +5,11 @@ import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { usePopup } from '@/hooks/usePopup'
import { contextPopupPositionState } from '@/store/popupAtom'
import { useRef, useState } from 'react'
import { useEffect, useRef, useState } from 'react'
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
import { BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
import { CalculatorInput } from '@/components/common/input/CalcInput'
export default function SizeSetting(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@ -20,7 +21,8 @@ export default function SizeSetting(props) {
const { resizeSurfaceShapeBatch } = useSurfaceShapeBatch({})
const widthRef = useRef(null)
const heightRef = useRef(null)
const [width, setWidth] = useState(target?.originWidth ? (target.originWidth * 10) : 0)
const [height, setHeight] = useState(target?.originHeight ? (target.originHeight * 10) : 0)
// const { initEvent } = useEvent()
// const { initEvent } = useContext(EventContext)
@ -28,6 +30,15 @@ export default function SizeSetting(props) {
// initEvent()
// }, [])
useEffect(() => {
if (target?.originWidth !== undefined) {
setWidth(target.originWidth * 10);
}
if (target?.originHeight !== undefined) {
setHeight(target.originHeight * 10);
}
}, [target]);
const handleReSizeObject = () => {
const width = widthRef.current.value
const height = heightRef.current.value
@ -47,11 +58,25 @@ export default function SizeSetting(props) {
<div className="size-option-top">
<div className="size-option-wrap">
<div className="size-option mb5">
<input type="text" className="input-origin mr5" value={(target?.originWidth * 10).toFixed(0)} readOnly={true} />
<input type="text" className="input-origin mr5" value={width}
onChange={(e) => setWidth(e.target.value)} readOnly={true} />
<span className="normal-font">mm</span>
</div>
<div className="size-option">
<input type="text" className="input-origin mr5" defaultValue={(target?.originWidth * 10).toFixed(0)} ref={widthRef} />
{/*<input type="text" className="input-origin mr5" defaultValue={(target?.originWidth * 10).toFixed(0)} ref={widthRef} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={width}
ref={widthRef}
onChange={(value) => setWidth(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
<span className="normal-font">mm</span>
</div>
</div>
@ -60,11 +85,25 @@ export default function SizeSetting(props) {
<div className="size-option-side">
<div className="size-option-wrap">
<div className="size-option mb5">
<input type="text" className="input-origin mr5" value={(target?.originHeight * 10).toFixed(0)} readOnly={true} />
<input type="text" className="input-origin mr5" value={height}
onChange={(e) => setHeight(e.target.value)} readOnly={true} />
<span className="normal-font">mm</span>
</div>
<div className="size-option">
<input type="text" className="input-origin mr5" defaultValue={(target?.originHeight * 10).toFixed(0)} ref={heightRef} />
{/*<input type="text" className="input-origin mr5" defaultValue={(target?.originHeight * 10).toFixed(0)} ref={heightRef} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={height}
ref={heightRef}
onChange={(value) => setHeight(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
<span className="normal-font">mm</span>
</div>
</div>

43
src/components/floor-plan/modal/object/type/OpenSpace.jsx
View File

@ -1,10 +1,13 @@
import { forwardRef, useState, useEffect } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { INPUT_TYPE } from '@/common/common'
import { CalculatorInput } from '@/components/common/input/CalcInput'
const OpenSpace = forwardRef((props, refs) => {
const { getMessage } = useMessage()
const [selectedType, setSelectedType] = useState(INPUT_TYPE.FREE)
const [width, setWidth] = useState(0)
const [height, setHeight] = useState(0)
useEffect(() => {
if (selectedType === INPUT_TYPE.FREE) {
@ -51,12 +54,26 @@ const OpenSpace = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* placeholder={0}*/}
{/* ref={refs.widthRef}*/}
{/* disabled={selectedType !== INPUT_TYPE.DIMENSION}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
placeholder={0}
value={width}
ref={refs.widthRef}
onChange={(value) => setWidth(value)}
disabled={selectedType !== INPUT_TYPE.DIMENSION}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span className="thin">mm</span>
@ -68,12 +85,26 @@ const OpenSpace = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* placeholder={0}*/}
{/* ref={refs.heightRef}*/}
{/* disabled={selectedType !== INPUT_TYPE.DIMENSION}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
placeholder={0}
value={height}
ref={refs.heightRef}
onChange={(value) => setHeight(value)}
disabled={selectedType !== INPUT_TYPE.DIMENSION}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span className="thin">mm</span>

81
src/components/floor-plan/modal/object/type/PentagonDormer.jsx
View File

@ -1,6 +1,7 @@
import Image from 'next/image'
import { useMessage } from '@/hooks/useMessage'
import { forwardRef, useState } from 'react'
import { CalculatorInput } from '@/components/common/input/CalcInput'
const PentagonDormer = forwardRef((props, refs) => {
const { getMessage } = useMessage()
@ -11,6 +12,11 @@ const PentagonDormer = forwardRef((props, refs) => {
setDirection(e.target.value)
refs.directionRef.current = e.target.value
}
const [pitch, setPitch] = useState(4) // pitch 상태 추가, 기본값 4로 설정
const [offsetWidth, setOffsetWidth] = useState(300) // offsetWidth 상태 추가, 기본값 300으로
const [offsetDepth, setOffsetDepth] = useState(400) // offsetDepth 상태 추가, 기본값 400으로
const [width, setWidth] = useState(2000) // width 상태 추가, 기본값 2000으로
const [height, setHeight] = useState(2000) // height 상태 추가, 기본값 2000으로
return (
<>
@ -30,7 +36,20 @@ const PentagonDormer = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
<input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={2000} />
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={2000} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={height}
ref={refs.heightRef}
onChange={(value) => setHeight(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span className="thin">mm</span>
</div>
@ -41,7 +60,20 @@ const PentagonDormer = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={offsetDepth}
ref={refs.offsetRef}
onChange={(value) => setOffsetDepth(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span className="thin">mm</span>
</div>
@ -55,7 +87,20 @@ const PentagonDormer = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
<input type="text" className="input-origin block" placeholder={0} ref={refs.widthRef} defaultValue={2000} />
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.widthRef} defaultValue={2000} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={width}
ref={refs.widthRef}
onChange={(value) => setWidth(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span className="thin">mm</span>
</div>
@ -66,7 +111,20 @@ const PentagonDormer = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetWidthRef} defaultValue={300} />
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetWidthRef} defaultValue={300} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={offsetWidth}
ref={refs.offsetWidthRef}
onChange={(value) => setOffsetWidth(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span className="thin">mm</span>
</div>
@ -77,7 +135,20 @@ const PentagonDormer = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
<input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
ref={refs.pitchRef}
value={pitch}
onChange={(value) => setPitch(value)}
options={{
allowNegative: false,
allowDecimal: true //(index !== 0),
}}
></CalculatorInput>
</div>
<span className="thin">寸</span>
</div>

43
src/components/floor-plan/modal/object/type/Shadow.jsx
View File

@ -1,11 +1,14 @@
import { forwardRef, useState, useEffect } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { INPUT_TYPE } from '@/common/common'
import { CalculatorInput } from '@/components/common/input/CalcInput'
const Shadow = forwardRef((props, refs) => {
const { getMessage } = useMessage()
const [selectedType, setSelectedType] = useState(INPUT_TYPE.FREE)
const [width, setWidth] = useState(0)
const [height, setHeight] = useState(0)
useEffect(() => {
if (selectedType === INPUT_TYPE.FREE) {
@ -51,12 +54,26 @@ const Shadow = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* placeholder={0}*/}
{/* ref={refs.widthRef}*/}
{/* disabled={selectedType !== INPUT_TYPE.DIMENSION}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
placeholder={0}
value={width}
ref={refs.widthRef}
onChange={(value) => setWidth(value)}
disabled={selectedType !== INPUT_TYPE.DIMENSION}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span className="thin">mm</span>
@ -68,12 +85,26 @@ const Shadow = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
<input
type="text"
{/*<input*/}
{/* type="text"*/}
{/* className="input-origin block"*/}
{/* placeholder={0}*/}
{/* ref={refs.heightRef}*/}
{/* disabled={selectedType !== INPUT_TYPE.DIMENSION}*/}
{/*/>*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
placeholder={0}
value={height}
ref={refs.heightRef}
onChange={(value) => setHeight(value)}
disabled={selectedType !== INPUT_TYPE.DIMENSION}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span className="thin">mm</span>

49
src/components/floor-plan/modal/object/type/TriangleDormer.jsx
View File

@ -1,6 +1,7 @@
import Image from 'next/image'
import { useMessage } from '@/hooks/useMessage'
import { forwardRef, useState } from 'react'
import { CalculatorInput } from '@/components/common/input/CalcInput'
const TriangleDormer = forwardRef((props, refs) => {
const { getMessage } = useMessage()
@ -11,6 +12,9 @@ const TriangleDormer = forwardRef((props, refs) => {
setDirection(e.target.value)
refs.directionRef.current = e.target.value
}
const [height, setHeight] = useState(1500)
const [offset, setOffset] = useState(400)
const [pitch, setPitch] = useState(4)
return (
<>
@ -30,7 +34,20 @@ const TriangleDormer = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
<input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={1500} />
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={1500} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={height}
ref={refs.heightRef}
onChange={(value) => setHeight(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span className="thin">mm</span>
</div>
@ -41,7 +58,20 @@ const TriangleDormer = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} defaultValue={400} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
value={offset}
ref={refs.offsetRef}
onChange={(value) => setOffset(value)}
options={{
allowNegative: false,
allowDecimal: false
}}
/>
</div>
<span className="thin">mm</span>
</div>
@ -52,7 +82,20 @@ const TriangleDormer = forwardRef((props, refs) => {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
<input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />
{/*<input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />*/}
<CalculatorInput
id=""
name=""
label=""
className="input-origin block"
ref={refs.pitchRef}
value={pitch}
onChange={(value) => setPitch(value)}
options={{
allowNegative: false,
allowDecimal: true
}}
/>
</div>
<span className="thin">寸</span>
</div>