Refactor PrinterPositionPanel and PrinterTemperaturePanel for improved styling and layout
- Introduced controlLabelStyle and controlInputStyle for consistent styling of control elements in PrinterPositionPanel. - Replaced Space components with Flex for better alignment and layout management in PrinterPositionPanel. - Updated input field widths in PrinterTemperaturePanel for enhanced usability and consistency.
This commit is contained in:
parent
e52798d4ac
commit
e3544ef2e2
@ -30,6 +30,17 @@ const CustomCollapse = styled(Collapse)`
|
|||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
const controlLabelStyle = {
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
flexShrink: 0,
|
||||||
|
minWidth: '120px'
|
||||||
|
}
|
||||||
|
|
||||||
|
const controlInputStyle = {
|
||||||
|
flex: 1,
|
||||||
|
minWidth: 0
|
||||||
|
}
|
||||||
|
|
||||||
const PrinterPositionPanel = ({
|
const PrinterPositionPanel = ({
|
||||||
id,
|
id,
|
||||||
showControls = true,
|
showControls = true,
|
||||||
@ -234,16 +245,22 @@ const PrinterPositionPanel = ({
|
|||||||
</Descriptions>
|
</Descriptions>
|
||||||
{showControls && (
|
{showControls && (
|
||||||
<>
|
<>
|
||||||
<Space direction='vertical' style={{ width: '100%' }}>
|
<Flex vertical gap='small' style={{ width: '100%' }}>
|
||||||
<Space direction='horizontal'>
|
<Flex align='center' style={{ width: '100%' }}>
|
||||||
<Text>Max Velocity:</Text>
|
<Text style={{ ...controlLabelStyle, minWidth: '91px' }}>
|
||||||
<Space.Compact block size='small'>
|
Max Velocity:
|
||||||
|
</Text>
|
||||||
|
<Space.Compact
|
||||||
|
block
|
||||||
|
size='small'
|
||||||
|
style={{ flex: 1, minWidth: 0 }}
|
||||||
|
>
|
||||||
<InputNumber
|
<InputNumber
|
||||||
value={round(maxVelocity, 2)}
|
value={round(maxVelocity, 2)}
|
||||||
min={1}
|
min={1}
|
||||||
max={10000}
|
max={10000}
|
||||||
step={5}
|
step={5}
|
||||||
style={{ width: '125px' }}
|
style={controlInputStyle}
|
||||||
suffix='mm/s'
|
suffix='mm/s'
|
||||||
onChange={(value) => setMaxVelocity(value)}
|
onChange={(value) => setMaxVelocity(value)}
|
||||||
onPressEnter={handleSetMaxVelocity}
|
onPressEnter={handleSetMaxVelocity}
|
||||||
@ -259,92 +276,104 @@ const PrinterPositionPanel = ({
|
|||||||
Set
|
Set
|
||||||
</Button>
|
</Button>
|
||||||
</Space.Compact>
|
</Space.Compact>
|
||||||
</Space>
|
</Flex>
|
||||||
|
|
||||||
<Space direction='vertical' style={{ width: '100%' }}>
|
<Flex align='center' style={{ width: '100%' }}>
|
||||||
<Space direction='horizontal'>
|
<Text style={{ ...controlLabelStyle, minWidth: '120px' }}>
|
||||||
<Text>Max Acceleration:</Text>
|
Max Acceleration:
|
||||||
<Space.Compact block size='small'>
|
</Text>
|
||||||
<InputNumber
|
<Space.Compact
|
||||||
value={round(maxAcceleration, 2)}
|
block
|
||||||
min={1}
|
size='small'
|
||||||
max={10000}
|
style={{ flex: 1, minWidth: 0 }}
|
||||||
step={5}
|
>
|
||||||
style={{ width: '125px' }}
|
<InputNumber
|
||||||
suffix='mm/s²'
|
value={round(maxAcceleration, 2)}
|
||||||
onChange={(value) => setMaxAcceleration(value)}
|
min={1}
|
||||||
onPressEnter={handleSetMaxAcceleration}
|
max={10000}
|
||||||
size='small'
|
step={5}
|
||||||
disabled={controlsDisabled}
|
style={controlInputStyle}
|
||||||
/>
|
suffix='mm/s²'
|
||||||
<Button
|
onChange={(value) => setMaxAcceleration(value)}
|
||||||
type='default'
|
onPressEnter={handleSetMaxAcceleration}
|
||||||
style={{ width: 40 }}
|
size='small'
|
||||||
onClick={handleSetMaxAcceleration}
|
disabled={controlsDisabled}
|
||||||
disabled={controlsDisabled}
|
/>
|
||||||
>
|
<Button
|
||||||
Set
|
type='default'
|
||||||
</Button>
|
style={{ width: 40 }}
|
||||||
</Space.Compact>
|
onClick={handleSetMaxAcceleration}
|
||||||
</Space>
|
disabled={controlsDisabled}
|
||||||
</Space>
|
>
|
||||||
|
Set
|
||||||
|
</Button>
|
||||||
|
</Space.Compact>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
<Space direction='vertical' style={{ width: '100%' }}>
|
<Flex align='center' style={{ width: '100%' }}>
|
||||||
<Space direction='horizontal'>
|
<Text style={{ ...controlLabelStyle, minWidth: '102px' }}>
|
||||||
<Text>Sqr Corner Vel:</Text>
|
Sqr Corner Vel:
|
||||||
<Space.Compact block size='small'>
|
</Text>
|
||||||
<InputNumber
|
<Space.Compact
|
||||||
value={round(squareCornerVelocity, 2) || 0}
|
block
|
||||||
min={0.1}
|
size='small'
|
||||||
max={1000}
|
style={{ flex: 1, minWidth: 0 }}
|
||||||
step={0.1}
|
>
|
||||||
suffix='mm/s'
|
<InputNumber
|
||||||
style={{ width: '125px' }}
|
value={round(squareCornerVelocity, 2) || 0}
|
||||||
onChange={(value) => setSquareCornerVelocity(value)}
|
min={0.1}
|
||||||
onPressEnter={handleSetSquareCornerVelocity}
|
max={1000}
|
||||||
size='small'
|
step={0.1}
|
||||||
disabled={controlsDisabled}
|
style={controlInputStyle}
|
||||||
/>
|
suffix='mm/s'
|
||||||
<Button
|
onChange={(value) => setSquareCornerVelocity(value)}
|
||||||
type='default'
|
onPressEnter={handleSetSquareCornerVelocity}
|
||||||
style={{ width: 40 }}
|
size='small'
|
||||||
onClick={handleSetSquareCornerVelocity}
|
disabled={controlsDisabled}
|
||||||
disabled={controlsDisabled}
|
/>
|
||||||
>
|
<Button
|
||||||
Set
|
type='default'
|
||||||
</Button>
|
style={{ width: 40 }}
|
||||||
</Space.Compact>
|
onClick={handleSetSquareCornerVelocity}
|
||||||
</Space>
|
disabled={controlsDisabled}
|
||||||
</Space>
|
>
|
||||||
|
Set
|
||||||
|
</Button>
|
||||||
|
</Space.Compact>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
<Space direction='vertical' style={{ width: '100%' }}>
|
<Flex align='center' style={{ width: '100%' }}>
|
||||||
<Space direction='horizontal'>
|
<Text style={{ ...controlLabelStyle, minWidth: '114px' }}>
|
||||||
<Text>Min Cruise Ratio:</Text>
|
Min Cruise Ratio:
|
||||||
<Space.Compact block size='small'>
|
</Text>
|
||||||
<InputNumber
|
<Space.Compact
|
||||||
value={round(minCruiseRatio * 100, 2) || 0}
|
block
|
||||||
min={0}
|
size='small'
|
||||||
max={100}
|
style={{ flex: 1, minWidth: 0 }}
|
||||||
step={1}
|
>
|
||||||
suffix='%'
|
<InputNumber
|
||||||
style={{ width: '125px' }}
|
value={round(minCruiseRatio * 100, 2) || 0}
|
||||||
onChange={(value) => setMinCruiseRatio(value / 100)}
|
min={0}
|
||||||
onPressEnter={handleSetMinCruiseRatio}
|
max={100}
|
||||||
size='small'
|
step={1}
|
||||||
disabled={controlsDisabled}
|
suffix='%'
|
||||||
/>
|
style={controlInputStyle}
|
||||||
<Button
|
onChange={(value) => setMinCruiseRatio(value / 100)}
|
||||||
type='default'
|
onPressEnter={handleSetMinCruiseRatio}
|
||||||
style={{ width: 40 }}
|
size='small'
|
||||||
onClick={handleSetMinCruiseRatio}
|
disabled={controlsDisabled}
|
||||||
disabled={controlsDisabled}
|
/>
|
||||||
>
|
<Button
|
||||||
Set
|
type='default'
|
||||||
</Button>
|
style={{ width: 40 }}
|
||||||
</Space.Compact>
|
onClick={handleSetMinCruiseRatio}
|
||||||
</Space>
|
disabled={controlsDisabled}
|
||||||
</Space>
|
>
|
||||||
</Space>
|
Set
|
||||||
|
</Button>
|
||||||
|
</Space.Compact>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<Text>Homing Origin:</Text>
|
<Text>Homing Origin:</Text>
|
||||||
@ -420,16 +449,22 @@ const PrinterPositionPanel = ({
|
|||||||
</Descriptions>
|
</Descriptions>
|
||||||
{showControls && (
|
{showControls && (
|
||||||
<>
|
<>
|
||||||
<Space direction='vertical' style={{ width: '100%' }}>
|
<Flex vertical gap='small' style={{ width: '100%' }}>
|
||||||
<Space direction='horizontal'>
|
<Flex align='center' style={{ width: '100%' }}>
|
||||||
<Text>Speed Factor:</Text>
|
<Text style={{ ...controlLabelStyle, minWidth: '96px' }}>
|
||||||
<Space.Compact block size='small'>
|
Speed Factor:
|
||||||
|
</Text>
|
||||||
|
<Space.Compact
|
||||||
|
block
|
||||||
|
size='small'
|
||||||
|
style={{ flex: 1, minWidth: 0 }}
|
||||||
|
>
|
||||||
<InputNumber
|
<InputNumber
|
||||||
value={round(speedFactor, 2)}
|
value={round(speedFactor, 2)}
|
||||||
min={0.1}
|
min={0.1}
|
||||||
max={2}
|
max={2}
|
||||||
step={0.1}
|
step={0.1}
|
||||||
style={{ width: '125px' }}
|
style={controlInputStyle}
|
||||||
suffix='%'
|
suffix='%'
|
||||||
onChange={(value) => setSpeedFactor(value)}
|
onChange={(value) => setSpeedFactor(value)}
|
||||||
onPressEnter={handleSetSpeedFactor}
|
onPressEnter={handleSetSpeedFactor}
|
||||||
@ -445,17 +480,23 @@ const PrinterPositionPanel = ({
|
|||||||
Set
|
Set
|
||||||
</Button>
|
</Button>
|
||||||
</Space.Compact>
|
</Space.Compact>
|
||||||
</Space>
|
</Flex>
|
||||||
|
|
||||||
<Space direction='horizontal'>
|
<Flex align='center' style={{ width: '100%' }}>
|
||||||
<Text>Extrude Factor:</Text>
|
<Text style={{ ...controlLabelStyle, minWidth: '105px' }}>
|
||||||
<Space.Compact block size='small'>
|
Extrude Factor:
|
||||||
|
</Text>
|
||||||
|
<Space.Compact
|
||||||
|
block
|
||||||
|
size='small'
|
||||||
|
style={{ flex: 1, minWidth: 0 }}
|
||||||
|
>
|
||||||
<InputNumber
|
<InputNumber
|
||||||
value={round(extrudeFactor, 2)}
|
value={round(extrudeFactor, 2)}
|
||||||
min={0.1}
|
min={0.1}
|
||||||
max={2}
|
max={2}
|
||||||
step={0.1}
|
step={0.1}
|
||||||
style={{ width: '125px' }}
|
style={controlInputStyle}
|
||||||
suffix='%'
|
suffix='%'
|
||||||
onChange={(value) => setExtrudeFactor(value)}
|
onChange={(value) => setExtrudeFactor(value)}
|
||||||
onPressEnter={handleSetExtrudeFactor}
|
onPressEnter={handleSetExtrudeFactor}
|
||||||
@ -471,8 +512,8 @@ const PrinterPositionPanel = ({
|
|||||||
Set
|
Set
|
||||||
</Button>
|
</Button>
|
||||||
</Space.Compact>
|
</Space.Compact>
|
||||||
</Space>
|
</Flex>
|
||||||
</Space>
|
</Flex>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<Descriptions
|
<Descriptions
|
||||||
|
|||||||
@ -189,7 +189,7 @@ const PrinterTemperaturePanel = ({
|
|||||||
value={extruderTarget}
|
value={extruderTarget}
|
||||||
min={0}
|
min={0}
|
||||||
max={300}
|
max={300}
|
||||||
style={{ width: '120px' }}
|
style={{ width: '140px' }}
|
||||||
addonAfter='°C'
|
addonAfter='°C'
|
||||||
onChange={(value) => setExtruderTarget(value || 0)}
|
onChange={(value) => setExtruderTarget(value || 0)}
|
||||||
onPressEnter={() =>
|
onPressEnter={() =>
|
||||||
@ -253,7 +253,7 @@ const PrinterTemperaturePanel = ({
|
|||||||
value={bedTarget}
|
value={bedTarget}
|
||||||
min={0}
|
min={0}
|
||||||
max={300}
|
max={300}
|
||||||
style={{ width: '120px' }}
|
style={{ width: '140px' }}
|
||||||
addonAfter='°C'
|
addonAfter='°C'
|
||||||
onChange={(value) => setBedTarget(value || 0)}
|
onChange={(value) => setBedTarget(value || 0)}
|
||||||
onPressEnter={() =>
|
onPressEnter={() =>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user