dev #489
@ -8,6 +8,7 @@ import { currentObjectState } from '@/store/canvasAtom'
|
||||
import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing'
|
||||
import { useSwal } from '@/hooks/useSwal'
|
||||
import { normalizeDigits } from '@/util/input-utils'
|
||||
import { CalculatorInput } from '@/components/common/input/CalcInput'
|
||||
|
||||
export default function AuxiliaryEdit(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
@ -66,7 +67,19 @@ export default function AuxiliaryEdit(props) {
|
||||
<p className="mb5">{getMessage('length')}</p>
|
||||
<div className="input-move-wrap mb5">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" value={verticalSize} onChange={(e) => setVerticalSize(normalizeDigits(e.target.value))} />
|
||||
{/*<input type="text" className="input-origin" value={verticalSize} onChange={(e) => setVerticalSize(normalizeDigits(e.target.value))} />*/}
|
||||
<CalculatorInput
|
||||
id=""
|
||||
name=""
|
||||
label=""
|
||||
className="input-origin block"
|
||||
value={verticalSize}
|
||||
onChange={(value) => setVerticalSize(value)}
|
||||
options={{
|
||||
allowNegative: false,
|
||||
allowDecimal: false
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
@ -88,7 +101,19 @@ export default function AuxiliaryEdit(props) {
|
||||
</div>
|
||||
<div className="input-move-wrap">
|
||||
<div className="input-move">
|
||||
<input type="text" className="input-origin" value={horizonSize} onChange={(e) => setHorizonSize(normalizeDigits(e.target.value))} />
|
||||
{/*<input type="text" className="input-origin" value={horizonSize} onChange={(e) => setHorizonSize(normalizeDigits(e.target.value))} />*/}
|
||||
<CalculatorInput
|
||||
id=""
|
||||
name=""
|
||||
label=""
|
||||
className="input-origin block"
|
||||
value={horizonSize}
|
||||
onChange={(value) => setHorizonSize(value)}
|
||||
options={{
|
||||
allowNegative: false,
|
||||
allowDecimal: false
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span>mm</span>
|
||||
<div className="direction-move-wrap">
|
||||
|
||||
@ -8,19 +8,21 @@ import { useEffect, useState } from 'react'
|
||||
import Big from 'big.js'
|
||||
import { calcLineActualSize, calcLinePlaneSize } from '@/util/qpolygon-utils'
|
||||
import { normalizeDigits } from '@/util/input-utils'
|
||||
import { CalculatorInput } from '@/components/common/input/CalcInput'
|
||||
|
||||
export default function AuxiliarySize(props) {
|
||||
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
|
||||
const { id, pos = contextPopupPosition } = props
|
||||
const [checkedRadio, setCheckedRadio] = useState(null)
|
||||
const [value1, setValue1] = useState(null)
|
||||
const [value2, setValue2] = useState(null)
|
||||
const [value1, setValue1] = useState('')
|
||||
const [value2, setValue2] = useState('')
|
||||
const [size, setSize] = useState(0)
|
||||
const { getMessage } = useMessage()
|
||||
const { closePopup } = usePopup()
|
||||
const currentObject = useRecoilValue(currentObjectState)
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
canvas?.discardActiveObject()
|
||||
@ -37,7 +39,7 @@ export default function AuxiliarySize(props) {
|
||||
}, [currentObject])
|
||||
|
||||
const handleInput = (e) => {
|
||||
let value = e.target.value.replace(/^0+/, '')
|
||||
let value = e.replace(/^0+/, '')
|
||||
if (value === '') {
|
||||
if (checkedRadio === 1) setValue1(value)
|
||||
if (checkedRadio === 2) setValue2(value)
|
||||
@ -130,7 +132,20 @@ export default function AuxiliarySize(props) {
|
||||
<div className="outline-form">
|
||||
<span style={{ width: 'auto' }}>{getMessage('length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" value={value1} readOnly={checkedRadio !== 1} onChange={handleInput} />
|
||||
{/*<input type="text" className="input-origin block" value={value1} readOnly={checkedRadio !== 1} onChange={handleInput} />*/}
|
||||
<CalculatorInput
|
||||
id=""
|
||||
name=""
|
||||
label=""
|
||||
className="input-origin block"
|
||||
value={value1}
|
||||
onChange={handleInput}
|
||||
readOnly={checkedRadio !== 1}
|
||||
options={{
|
||||
allowNegative: false,
|
||||
allowDecimal: false
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
@ -149,7 +164,20 @@ export default function AuxiliarySize(props) {
|
||||
<div className="outline-form">
|
||||
<span style={{ width: 'auto' }}>{getMessage('length')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" value={value2} readOnly={checkedRadio !== 2} onChange={handleInput} />
|
||||
{/*<input type="text" className="input-origin block" value={value2} readOnly={checkedRadio !== 2} onChange={handleInput} />*/}
|
||||
<CalculatorInput
|
||||
id=""
|
||||
name=""
|
||||
label=""
|
||||
className="input-origin block"
|
||||
value={value2}
|
||||
onChange={handleInput}
|
||||
readOnly={checkedRadio !== 2}
|
||||
options={{
|
||||
allowNegative: false,
|
||||
allowDecimal: false
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
|
||||
@ -2,6 +2,7 @@ import { useMessage } from '@/hooks/useMessage'
|
||||
import { useState } from 'react'
|
||||
import { currentObjectState } from '@/store/canvasAtom'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { CalculatorInput } from '@/components/common/input/CalcInput'
|
||||
|
||||
const FLOW_LINE_TYPE = {
|
||||
DOWN_LEFT: 'downLeft',
|
||||
@ -69,13 +70,27 @@ export default function FlowLine({ FLOW_LINE_REF }) {
|
||||
<div className="outline-form">
|
||||
<span>{getMessage('modal.movement.flow.line.movement')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input
|
||||
type="text"
|
||||
{/*<input*/}
|
||||
{/* type="text"*/}
|
||||
{/* className="input-origin block"*/}
|
||||
{/* ref={FLOW_LINE_REF.FILLED_INPUT_REF}*/}
|
||||
{/* value={filledInput}*/}
|
||||
{/* onFocus={handleFocus}*/}
|
||||
{/* onChange={handleInput}*/}
|
||||
{/*/>*/}
|
||||
<CalculatorInput
|
||||
id=""
|
||||
name=""
|
||||
label=""
|
||||
className="input-origin block"
|
||||
ref={FLOW_LINE_REF.FILLED_INPUT_REF}
|
||||
value={filledInput}
|
||||
onFocus={handleFocus}
|
||||
onChange={handleInput}
|
||||
onChange={(value)=>{setFilledInput(value)}}
|
||||
options={{
|
||||
allowNegative: false,
|
||||
allowDecimal: false
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
|
||||
@ -3,6 +3,7 @@ import { useState } from 'react'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { currentObjectState } from '@/store/canvasAtom'
|
||||
import { normalizeDigits } from '@/util/input-utils'
|
||||
import { CalculatorInput } from '@/components/common/input/CalcInput'
|
||||
|
||||
const UP_DOWN_TYPE = {
|
||||
UP: 'up',
|
||||
@ -35,6 +36,7 @@ export default function Updown({ UP_DOWN_REF }) {
|
||||
<span>{getMessage('modal.movement.flow.line.position')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input type="text" className="input-origin block" defaultValue={100} readOnly={true} ref={UP_DOWN_REF.POINTER_INPUT_REF} />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="moving-tab-content">
|
||||
@ -68,13 +70,27 @@ export default function Updown({ UP_DOWN_REF }) {
|
||||
<div className="outline-form">
|
||||
<span>{getMessage('modal.movement.flow.line.movement')}</span>
|
||||
<div className="input-grid mr5">
|
||||
<input
|
||||
type="text"
|
||||
{/*<input*/}
|
||||
{/* type="text"*/}
|
||||
{/* className="input-origin block"*/}
|
||||
{/* ref={UP_DOWN_REF.FILLED_INPUT_REF}*/}
|
||||
{/* value={filledInput}*/}
|
||||
{/* onFocus={handleFocus}*/}
|
||||
{/* onChange={handleInput}*/}
|
||||
{/*/>*/}
|
||||
<CalculatorInput
|
||||
id=""
|
||||
name=""
|
||||
label=""
|
||||
className="input-origin block"
|
||||
ref={UP_DOWN_REF.FILLED_INPUT_REF}
|
||||
value={filledInput}
|
||||
onFocus={handleFocus}
|
||||
onChange={handleInput}
|
||||
onChange={(value)=>{setFilledInput(value)}}
|
||||
options={{
|
||||
allowNegative: false,
|
||||
allowDecimal: false
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
|
||||
@ -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 PlacementSurface = forwardRef((props, refs) => {
|
||||
const { getMessage } = useMessage()
|
||||
@ -74,10 +75,32 @@ const PlacementSurface = forwardRef((props, refs) => {
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '57px' }}>
|
||||
<input
|
||||
type="text"
|
||||
{/*<input*/}
|
||||
{/* type="text"*/}
|
||||
{/* className="input-origin plane block"*/}
|
||||
{/* defaultValue={line.value}*/}
|
||||
{/* ref={*/}
|
||||
{/* line.isDiagonal*/}
|
||||
{/* ? lengthetc*/}
|
||||
{/* : index === 0*/}
|
||||
{/* ? length1*/}
|
||||
{/* : index === 1*/}
|
||||
{/* ? length2*/}
|
||||
{/* : index === 2*/}
|
||||
{/* ? length3*/}
|
||||
{/* : index === 3*/}
|
||||
{/* ? length4*/}
|
||||
{/* : length5*/}
|
||||
{/* }*/}
|
||||
{/*/>*/}
|
||||
|
||||
<CalculatorInput
|
||||
id=""
|
||||
name=""
|
||||
label=""
|
||||
className="input-origin plane block"
|
||||
defaultValue={line.value}
|
||||
value={line.value}
|
||||
onChange={()=>{}}
|
||||
ref={
|
||||
line.isDiagonal
|
||||
? lengthetc
|
||||
@ -91,6 +114,10 @@ const PlacementSurface = forwardRef((props, refs) => {
|
||||
? length4
|
||||
: length5
|
||||
}
|
||||
options={{
|
||||
allowNegative: false,
|
||||
allowDecimal: false
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEvent } from '@/hooks/useEvent'
|
||||
import { CalculatorInput } from '@/components/common/input/CalcInput'
|
||||
|
||||
export default function Offset({ length1Ref, arrow1Ref, currentWallLineRef }) {
|
||||
const { getMessage } = useMessage()
|
||||
@ -74,7 +75,20 @@ export default function Offset({ length1Ref, arrow1Ref, currentWallLineRef }) {
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" placeholder={0} ref={length1Ref} />
|
||||
{/*<input type="text" className="input-origin block" placeholder={0} ref={length1Ref} />*/}
|
||||
<CalculatorInput
|
||||
id=""
|
||||
name=""
|
||||
label=""
|
||||
className="input-origin block"
|
||||
value={length1Ref.current?.value ?? 0}
|
||||
ref={length1Ref}
|
||||
onChange={() => {}}
|
||||
options={{
|
||||
allowNegative: false,
|
||||
allowDecimal: false
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
|
||||
import { useEvent } from '@/hooks/useEvent'
|
||||
import { CalculatorInput } from '@/components/common/input/CalcInput'
|
||||
|
||||
export default forwardRef(function WallLine({ length1Ref, length2Ref, arrow1Ref, arrow2Ref, radioTypeRef, currentWallLineRef }, ref) {
|
||||
const { getMessage } = useMessage()
|
||||
@ -46,7 +47,21 @@ export default forwardRef(function WallLine({ length1Ref, length2Ref, arrow1Ref,
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" placeholder={0} readOnly={type !== 1} ref={length1Ref} />
|
||||
{/*<input type="text" className="input-origin block" placeholder={0} readOnly={type !== 1} ref={length1Ref} />*/}
|
||||
<CalculatorInput
|
||||
id=""
|
||||
name=""
|
||||
label=""
|
||||
className="input-origin block"
|
||||
value={length1Ref.current?.value ?? 0}
|
||||
ref={length1Ref}
|
||||
onChange={() => {}}
|
||||
readOnly={type !== 1}
|
||||
options={{
|
||||
allowNegative: false,
|
||||
allowDecimal: false
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
@ -80,7 +95,21 @@ export default forwardRef(function WallLine({ length1Ref, length2Ref, arrow1Ref,
|
||||
<div className="eaves-keraba-td">
|
||||
<div className="outline-form">
|
||||
<div className="input-grid mr5" style={{ width: '100px' }}>
|
||||
<input type="text" className="input-origin block" placeholder={0} readOnly={type !== 2} ref={length2Ref} />
|
||||
{/*<input type="text" className="input-origin block" placeholder={0} readOnly={type !== 2} ref={length2Ref} />*/}
|
||||
<CalculatorInput
|
||||
id=""
|
||||
name=""
|
||||
label=""
|
||||
className="input-origin block"
|
||||
value={length2Ref.current?.value ?? 0}
|
||||
ref={length2Ref}
|
||||
onChange={() => {}}
|
||||
readOnly={type !== 2}
|
||||
options={{
|
||||
allowNegative: false,
|
||||
allowDecimal: false
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<span className="thin">mm</span>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user