Skip to content

Commit

Permalink
为所有的滑块添加了对应的Input，从而实现输入数字和微调
Browse files Browse the repository at this point in the history
  • Loading branch information
@boybook
boybook committed Dec 28, 2024
1 parent ff560f2 commit 7e8187d
Showing 1 changed file with 161 additions and 65 deletions.
226 changes: 161 additions & 65 deletions src/components/TextSettingsPanel.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// src/components/TextSettingsPanel.tsx
import React, { useState } from "react";
import { Form, Input, Slider, Segmented, Flex } from "antd";
import { Form, Input, Slider, Segmented, Flex, InputNumber } from "antd";
import { TextOptions } from "../types/text";
import TextSettingsMaterialPanel from "./TextSettingsMaterialPanel.tsx";
import TextSettingsMaterialPresets from "./TextSettingsMaterialPresets.tsx";
Expand Down Expand Up @@ -29,77 +29,173 @@ const TextSettingsPanel: React.FC<TextSettingsPanelProps> = ({
<Form.Item label={gLang('content')}>
<Input value={text} onChange={(e) => onTextChange(e.target.value)} />
</Form.Item>
<Form.Item label={`${gLang('upDownPosition')} (${textOptions.y.toFixed(1)})`}>
<Slider
min={-20}
max={20}
step={0.1}
value={textOptions.y}
onChange={(val) => onTextOptionsChange({ ...textOptions, y: val })}
/>
<Form.Item label={`${gLang('upDownPosition')}`}>
<Flex gap={'small'}>
<Slider
style={{ flex: 1 }}
min={-20}
max={20}
step={0.1}
value={textOptions.y}
onChange={(val) => onTextOptionsChange({ ...textOptions, y: val })}
/>
<InputNumber
style={{ width: 64 }}
variant="filled"
min={-20}
max={20}
step={0.1}
value={textOptions.y}
onChange={(val) => onTextOptionsChange({ ...textOptions, y: val ?? 0 })}
/>
</Flex>
</Form.Item>
<Form.Item label={`${gLang('frontBackPosition')} (${textOptions.z.toFixed(1)})`}>
<Slider
min={-20}
max={20}
step={0.1}
value={textOptions.z}
onChange={(val) => onTextOptionsChange({ ...textOptions, z: val })}
/>
<Form.Item label={gLang('frontBackPosition')}>
<Flex gap={'small'}>
<Slider
style={{ flex: 1 }}
min={-20}
max={20}
step={0.1}
value={textOptions.z}
onChange={(val) => onTextOptionsChange({ ...textOptions, z: val })}
/>
<InputNumber
style={{ width: 64 }}
variant="filled"
min={-20}
max={20}
step={0.1}
value={textOptions.z}
onChange={(val) => onTextOptionsChange({ ...textOptions, z: val ?? 0 })}
/>
</Flex>
</Form.Item>
<Form.Item label={`${gLang('upDownRotate')} (${textOptions.rotY.toFixed(1)})`}>
<Slider
min={-90}
max={90}
step={1}
value={textOptions.rotY}
onChange={(val) => onTextOptionsChange({ ...textOptions, rotY: val })}
/>
<Form.Item label={gLang('upDownRotate')}>
<Flex gap={'small'}>
<Slider
style={{ flex: 1 }}
min={-90}
max={90}
step={1}
value={textOptions.rotY}
onChange={(val) => onTextOptionsChange({ ...textOptions, rotY: val })}
/>
<InputNumber
style={{ width: 64 }}
variant="filled"
min={-90}
max={90}
step={1}
value={textOptions.rotY}
onChange={(val) => onTextOptionsChange({ ...textOptions, rotY: val ?? 0 })}
/>
</Flex>
</Form.Item>
<Form.Item label={`${gLang('fontSize')} (${textOptions.size.toFixed(1)})`}>
<Slider
min={1}
max={20}
step={0.1}
value={textOptions.size}
onChange={(val) => onTextOptionsChange({ ...textOptions, size: val })}
/>
<Form.Item label={gLang('fontSize')}>
<Flex gap={'small'}>
<Slider
style={{ flex: 1 }}
min={1}
max={20}
step={0.1}
value={textOptions.size}
onChange={(val) => onTextOptionsChange({ ...textOptions, size: val })}
/>
<InputNumber
style={{ width: 64 }}
variant="filled"
min={1}
max={20}
step={0.1}
value={textOptions.size}
onChange={(val) => onTextOptionsChange({ ...textOptions, size: val ?? 1 })}
/>
</Flex>
</Form.Item>
<Form.Item label={`${gLang('spacing')} (${textOptions.letterSpacing.toFixed(1) ?? "1.0"})`}>
<Slider
min={0}
max={5}
step={0.1}
value={textOptions.letterSpacing}
onChange={(val) => onTextOptionsChange({ ...textOptions, letterSpacing: val })}
/>
<Form.Item label={gLang('spacing')}>
<Flex gap={'small'}>
<Slider
style={{ flex: 1 }}
min={0}
max={5}
step={0.1}
value={textOptions.letterSpacing}
onChange={(val) => onTextOptionsChange({ ...textOptions, letterSpacing: val })}
/>
<InputNumber
style={{ width: 64 }}
variant="filled"
min={0}
max={5}
step={0.1}
value={textOptions.letterSpacing}
onChange={(val) => onTextOptionsChange({ ...textOptions, letterSpacing: val ?? 0 })}
/>
</Flex>
</Form.Item>
<Form.Item label={`${gLang('spacingWidth')} (${textOptions.spacingWidth.toFixed(1) ?? "1.0"})`}>
<Slider
min={-0.2}
max={1}
step={0.05}
value={textOptions.spacingWidth}
onChange={(val) => onTextOptionsChange({ ...textOptions, spacingWidth: val })}
/>
<Form.Item label={gLang('spacingWidth')}>
<Flex gap={'small'}>
<Slider
style={{ flex: 1 }}
min={-0.2}
max={1}
step={0.05}
value={textOptions.spacingWidth}
onChange={(val) => onTextOptionsChange({ ...textOptions, spacingWidth: val })}
/>
<InputNumber
style={{ width: 64 }}
variant="filled"
min={-0.2}
max={1}
step={0.05}
value={textOptions.spacingWidth}
onChange={(val) => onTextOptionsChange({ ...textOptions, spacingWidth: val ?? 0 })}
/>
</Flex>
</Form.Item>
<Form.Item label={`${gLang('thickness')} (${textOptions.depth.toFixed(1)})`}>
<Slider
min={1}
max={10}
step={1}
value={textOptions.depth}
onChange={(val) => onTextOptionsChange({ ...textOptions, depth: val })}
/>
<Form.Item label={gLang('thickness')}>
<Flex gap={'small'}>
<Slider
style={{ flex: 1 }}
min={1}
max={10}
step={1}
value={textOptions.depth}
onChange={(val) => onTextOptionsChange({ ...textOptions, depth: val })}
/>
<InputNumber
style={{ width: 64 }}
variant="filled"
min={1}
max={10}
step={1}
value={textOptions.depth}
onChange={(val) => onTextOptionsChange({ ...textOptions, depth: val ?? 1 })}
/>
</Flex>
</Form.Item>
<Form.Item label={`${gLang('outlineSize')} (${textOptions.outlineWidth.toFixed(1)})`}>
<Slider
min={0}
max={1.0}
step={0.05}
value={textOptions.outlineWidth}
onChange={(val) => onTextOptionsChange({ ...textOptions, outlineWidth: val })}
/>
<Form.Item label={gLang('outlineSize')}>
<Flex gap={'small'}>
<Slider
style={{ flex: 1 }}
min={0}
max={1.0}
step={0.05}
value={textOptions.outlineWidth}
onChange={(val) => onTextOptionsChange({ ...textOptions, outlineWidth: val })}
/>
<InputNumber
style={{ width: 64 }}
variant="filled"
min={0}
max={1}
step={0.05}
value={textOptions.outlineWidth}
onChange={(val) => onTextOptionsChange({ ...textOptions, outlineWidth: val ?? 0 })}
/>
</Flex>
</Form.Item>
<Form.Item label={gLang('texture')} layout={'vertical'}>
<Flex gap={'small'} vertical>
Expand Down

0 comments on commit 7e8187d

Please sign in to comment.