cyberpresidentvanellope/VOREStation
1
0
Fork 0
mirror of https://github.com/VOREStation/VOREStation.git synced 2026-08-29 23:17:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

tgui-core 5.0 (#18118)

Browse Source
This commit is contained in:
Kashargul
2025-08-02 16:51:40 +02:00
committed by GitHub
parent 6aec7aabe1
commit 0d0d6dcd7b
43 changed files with 1560 additions and 5872 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tgui/bun.lock
+1377 -5779
View File
File diff suppressed because it is too large Load Diff
tgui/packages/tgui-panel/audio/NowPlayingWidget.tsx
+2 -1
View File
@@ -100,13 +100,14 @@ export const NowPlayingWidget = (props) => {
)}
<Stack.Item mx={0.5} fontSize="0.9em">
<Knob
tickWhileDragging
minValue={0}
maxValue={1}
value={settings.adminMusicVolume}
step={0.0025}
stepPixelSize={1}
format={(value) => `${toFixed(value * 100)}%`}
onDrag={(e, value) =>
onChange={(e, value) =>
settings.update({
adminMusicVolume: value,
})
tgui/packages/tgui-panel/package.json
+1 -1
View File
@@ -8,7 +8,7 @@
"react": "^19.1.0",
"react-dom": "^19.1.0",
"tgui": "workspace:*",
"tgui-core": "^4.3.4",
"tgui-core": "^5.0.0",
"tgui-dev-server": "workspace:*"
},
"private": true
tgui/packages/tgui-panel/settings/SettingTabs/ExportTab.tsx
+10 -5
View File
@@ -94,6 +94,7 @@ export const ExportTab = (props) => {
<LabeledList>
<LabeledList.Item label="Amount of rounds to log (1 to 8)">
<NumberInput
tickWhileDragging
width="5em"
step={1}
stepPixelSize={10}
@@ -101,7 +102,7 @@ export const ExportTab = (props) => {
maxValue={8}
value={logRetainRounds}
format={(value) => toFixed(value)}
onDrag={(value) =>
onChange={(value) =>
dispatch(
updateSettings({
logRetainRounds: value,
@@ -118,6 +119,7 @@ export const ExportTab = (props) => {
</LabeledList.Item>
<LabeledList.Item label="Hardlimit for the log archive (0 = inf. to 50000)">
<NumberInput
tickWhileDragging
width="5em"
step={500}
stepPixelSize={10}
@@ -125,7 +127,7 @@ export const ExportTab = (props) => {
maxValue={50000}
value={logLimit}
format={(value) => toFixed(value)}
onDrag={(value) =>
onChange={(value) =>
dispatch(
updateSettings({
logLimit: value,
@@ -204,6 +206,7 @@ export const ExportTab = (props) => {
<>
<Stack.Item>
<NumberInput
tickWhileDragging
width="5em"
step={1}
stepPixelSize={10}
@@ -211,7 +214,7 @@ export const ExportTab = (props) => {
maxValue={exportEnd === 0 ? 0 : exportEnd - 1}
value={exportStart}
format={(value) => toFixed(value)}
onDrag={(value) =>
onChange={(value) =>
dispatch(
updateSettings({
exportStart: value,
@@ -222,6 +225,7 @@ export const ExportTab = (props) => {
</Stack.Item>
<Stack.Item>
<NumberInput
tickWhileDragging
width="5em"
step={1}
stepPixelSize={10}
@@ -229,7 +233,7 @@ export const ExportTab = (props) => {
maxValue={storedRounds}
value={exportEnd}
format={(value) => toFixed(value)}
onDrag={(value) =>
onChange={(value) =>
dispatch(
updateSettings({
exportEnd: value,
@@ -256,6 +260,7 @@ export const ExportTab = (props) => {
</LabeledList.Item>
<LabeledList.Item label="Amount of lines to export (0 = inf.)">
<NumberInput
tickWhileDragging
width="5em"
step={100}
stepPixelSize={10}
@@ -263,7 +268,7 @@ export const ExportTab = (props) => {
maxValue={50000}
value={logLineCount}
format={(value) => toFixed(value)}
onDrag={(value) =>
onChange={(value) =>
dispatch(
updateSettings({
logLineCount: value,
tgui/packages/tgui-panel/settings/SettingTabs/MessageLimits.tsx
+10 -5
View File
@@ -21,6 +21,7 @@ export const MessageLimits = (props) => {
<LabeledList>
<LabeledList.Item label="Amount of lines to display 500-10000 (Default: 2500)">
<NumberInput
tickWhileDragging
width="5em"
step={100}
stepPixelSize={2}
@@ -28,7 +29,7 @@ export const MessageLimits = (props) => {
maxValue={10000}
value={visibleMessageLimit}
format={(value) => toFixed(value)}
onDrag={(value) =>
onChange={(value) =>
dispatch(
updateSettings({
visibleMessageLimit: value,
@@ -45,6 +46,7 @@ export const MessageLimits = (props) => {
</LabeledList.Item>
<LabeledList.Item label="Amount of visually persistent lines 0-10000 (Default: 1000)">
<NumberInput
tickWhileDragging
width="5em"
step={100}
stepPixelSize={2}
@@ -52,7 +54,7 @@ export const MessageLimits = (props) => {
maxValue={10000}
value={persistentMessageLimit}
format={(value) => toFixed(value)}
onDrag={(value) =>
onChange={(value) =>
dispatch(
updateSettings({
persistentMessageLimit: value,
@@ -69,6 +71,7 @@ export const MessageLimits = (props) => {
</LabeledList.Item>
<LabeledList.Item label="Amount of different lines in-between to combine 0-10 (Default: 5)">
<NumberInput
tickWhileDragging
width="5em"
step={1}
stepPixelSize={10}
@@ -76,7 +79,7 @@ export const MessageLimits = (props) => {
maxValue={10}
value={combineMessageLimit}
format={(value) => toFixed(value)}
onDrag={(value) =>
onChange={(value) =>
dispatch(
updateSettings({
combineMessageLimit: value,
@@ -87,6 +90,7 @@ export const MessageLimits = (props) => {
</LabeledList.Item>
<LabeledList.Item label="Time to combine messages 0-10 (Default: 5 Seconds)">
<NumberInput
tickWhileDragging
width="5em"
step={1}
stepPixelSize={10}
@@ -95,7 +99,7 @@ export const MessageLimits = (props) => {
value={combineIntervalLimit}
unit="s"
format={(value) => toFixed(value)}
onDrag={(value) =>
onChange={(value) =>
dispatch(
updateSettings({
combineIntervalLimit: value,
@@ -107,6 +111,7 @@ export const MessageLimits = (props) => {
{!game.databaseBackendEnabled && (
<LabeledList.Item label="Message store interval 1-10 (Default: 10 Seconds) [Requires restart]">
<NumberInput
tickWhileDragging
width="5em"
step={1}
stepPixelSize={5}
@@ -115,7 +120,7 @@ export const MessageLimits = (props) => {
value={saveInterval}
unit="s"
format={(value) => toFixed(value)}
onDrag={(value) =>
onChange={(value) =>
dispatch(
updateSettings({
saveInterval: value,
tgui/packages/tgui-panel/settings/SettingTabs/SettingsGeneral.tsx
+2 -1
View File
@@ -138,13 +138,14 @@ export const SettingsGeneral = (props) => {
</LabeledList.Item>
<LabeledList.Item label="Line height">
<Slider
tickWhileDragging
width="100%"
step={0.01}
minValue={0.8}
maxValue={5}
value={lineHeight}
format={(value) => toFixed(value, 2)}
onDrag={(e, value) =>
onChange={(e, value) =>
dispatch(
updateSettings({
lineHeight: value,
tgui/packages/tgui-say/package.json
+1 -1
View File
@@ -6,7 +6,7 @@
"react": "^19.1.0",
"react-dom": "^19.1.0",
"tgui": "workspace:*",
"tgui-core": "^4.3.4"
"tgui-core": "^5.0.0"
},
"private": true
}
tgui/packages/tgui/components/NanoMap.tsx
+2 -1
View File
@@ -280,12 +280,13 @@ const NanoMapZoomer = (props: NanoMapZoomerProps) => {
<LabeledList>
<LabeledList.Item label="Zoom">
<Slider
tickWhileDragging
minValue={1}
maxValue={8}
stepPixelSize={10}
format={(v) => `${v}x`}
value={props.zoom}
onDrag={(e, v) => props.onZoom(e, v)}
onChange={(e, v) => props.onZoom(e, v)}
/>
</LabeledList.Item>
<LabeledList.Item label="Z-Level">
tgui/packages/tgui/interfaces/AppearanceChanger/AppearanceChangerColors.tsx
+14 -4
View File
@@ -116,11 +116,14 @@ export const AppearanceChangerColors = (props) => {
<Stack.Item>
Ears Alpha:{' '}
<NumberInput
tickWhileDragging
step={1}
minValue={0}
value={ears_alpha}
maxValue={255}
onDrag={(val: number) => act('ears_alpha', { ears_alpha: val })}
onChange={(val: number) =>
act('ears_alpha', { ears_alpha: val })
}
/>
</Stack.Item>
{ear_secondary_colors.map((color, index) => (
@@ -139,11 +142,12 @@ export const AppearanceChangerColors = (props) => {
<Stack.Item>
Horns Alpha:{' '}
<NumberInput
tickWhileDragging
step={1}
minValue={0}
value={secondary_ears_alpha}
maxValue={255}
onDrag={(val: number) =>
onChange={(val: number) =>
act('secondary_ears_alpha', { secondary_ears_alpha: val })
}
/>
@@ -169,11 +173,14 @@ export const AppearanceChangerColors = (props) => {
<Stack.Item>
Tail Alpha:{' '}
<NumberInput
tickWhileDragging
step={1}
minValue={0}
value={tail_alpha}
maxValue={255}
onDrag={(val: number) => act('tail_alpha', { tail_alpha: val })}
onChange={(val: number) =>
act('tail_alpha', { tail_alpha: val })
}
/>
</Stack.Item>
<Stack.Item>
@@ -197,11 +204,14 @@ export const AppearanceChangerColors = (props) => {
<Stack.Item>
Wing Alpha:{' '}
<NumberInput
tickWhileDragging
step={1}
minValue={0}
value={wing_alpha}
maxValue={255}
onDrag={(val: number) => act('wing_alpha', { wing_alpha: val })}
onChange={(val: number) =>
act('wing_alpha', { wing_alpha: val })
}
/>
</Stack.Item>
</>
tgui/packages/tgui/interfaces/AssemblyProx.tsx
+4 -2
View File
@@ -39,6 +39,7 @@ export const AssemblyProx = (props) => {
}
>
<NumberInput
tickWhileDragging
animated
fluid
step={1}
@@ -46,7 +47,7 @@ export const AssemblyProx = (props) => {
minValue={0}
maxValue={600}
format={(val: number) => formatTime(round(val * 10, 0))}
onDrag={(val: number) => act('set_time', { time: val })}
onChange={(val: number) => act('set_time', { time: val })}
/>
</LabeledList.Item>
</LabeledList>
@@ -55,11 +56,12 @@ export const AssemblyProx = (props) => {
<LabeledList>
<LabeledList.Item label="Range">
<NumberInput
tickWhileDragging
step={1}
minValue={1}
value={range}
maxValue={maxRange}
onDrag={(val: number) => act('range', { range: val })}
onChange={(val: number) => act('range', { range: val })}
/>
</LabeledList.Item>
<LabeledList.Item label="Armed">
tgui/packages/tgui/interfaces/AssemblyTimer.tsx
+2 -1
View File
@@ -33,13 +33,14 @@ export const AssemblyTimer = (props) => {
>
<NumberInput
animated
tickWhileDragging
fluid
step={1}
value={time}
minValue={0}
maxValue={600}
format={(val: number) => formatTime(round(val * 10, 0))}
onDrag={(val: number) => act('set_time', { time: val })}
onChange={(val: number) => act('set_time', { time: val })}
/>
</LabeledList.Item>
</LabeledList>
tgui/packages/tgui/interfaces/AtmosFilter.tsx
+2 -1
View File
@@ -46,13 +46,14 @@ export const AtmosFilter = (props) => {
</Box>
<NumberInput
animated
tickWhileDragging
step={1}
value={rate}
width="63px"
unit="L/s"
minValue={0}
maxValue={200}
onDrag={(value: number) =>
onChange={(value: number) =>
act('rate', {
rate: value,
})
tgui/packages/tgui/interfaces/AtmosMixer.tsx
+4 -2
View File
@@ -80,6 +80,7 @@ export const AtmosMixer = (props) => {
<LabeledList.Item label={`Node 1 (${node1_dir})`}>
<NumberInput
animated
tickWhileDragging
value={node1_concentration}
unit="%"
width="60px"
@@ -87,7 +88,7 @@ export const AtmosMixer = (props) => {
minValue={0}
maxValue={100}
stepPixelSize={2}
onDrag={(value: number) =>
onChange={(value: number) =>
act('node1', {
concentration: value,
})
@@ -97,6 +98,7 @@ export const AtmosMixer = (props) => {
<LabeledList.Item label={`Node 2 (${node2_dir})`}>
<NumberInput
animated
tickWhileDragging
value={node2_concentration}
unit="%"
width="60px"
@@ -104,7 +106,7 @@ export const AtmosMixer = (props) => {
minValue={0}
maxValue={100}
stepPixelSize={2}
onDrag={(value: number) =>
onChange={(value: number) =>
act('node2', {
concentration: value,
})
tgui/packages/tgui/interfaces/BeaconLocator.tsx
+2 -1
View File
@@ -49,6 +49,7 @@ export const BeaconLocator = (props) => {
<LabeledList.Item label="Frequency">
<NumberInput
animated
tickWhileDragging
unit="kHz"
step={0.2}
stepPixelSize={10}
@@ -56,7 +57,7 @@ export const BeaconLocator = (props) => {
maxValue={maxFrequency / 10}
value={rawfreq / 10}
format={(value) => toFixed(value, 1)}
onDrag={(value: number) =>
onChange={(value: number) =>
act('setFrequency', {
freq: round(value * 10, 0),
})
tgui/packages/tgui/interfaces/BombTester.tsx
+2 -1
View File
@@ -111,10 +111,11 @@ export const BombTester = (props) => {
{canister && (
<LabeledList.Item label="Canister Release Pressure">
<Slider
tickWhileDragging
minValue={0}
value={sim_canister_output}
maxValue={1013.25}
onDrag={(e, val: number) =>
onChange={(e, val: number) =>
act('set_can_pressure', { pressure: val })
}
/>
tgui/packages/tgui/interfaces/BrigTimer.tsx
+2 -1
View File
@@ -63,13 +63,14 @@ export const BrigTimer = (props) => {
>
<NumberInput
animated
tickWhileDragging
fluid
step={1}
value={time_left / 10}
minValue={0}
maxValue={max_time_left / 10}
format={(val: number) => formatTime(round(val * 10, 0))}
onDrag={(val: number) => act('time', { time: val })}
onChange={(val: number) => act('time', { time: val })}
/>
<Stack mt={1}>
<Stack.Item grow>
tgui/packages/tgui/interfaces/Canister.tsx
+2 -1
View File
@@ -79,6 +79,7 @@ export const Canister = (props) => {
<LabeledControls.Item label="Regulator">
<Box position="relative" left="-8px">
<Knob
tickWhileDragging
format={(value) => toFixed(value, 2)}
size={1.25}
color={!!valveOpen && 'yellow'}
@@ -87,7 +88,7 @@ export const Canister = (props) => {
minValue={minReleasePressure}
maxValue={maxReleasePressure}
stepPixelSize={1}
onDrag={(e, value: number) =>
onChange={(e, value: number) =>
act('pressure', {
pressure: value,
})
tgui/packages/tgui/interfaces/ColorMate/ColorMateColor.tsx
+6 -3
View File
@@ -24,12 +24,13 @@ export const ColorMateHSV = (props) => {
<center>Hue:</center>
<Table.Cell width="85%">
<Slider
tickWhileDragging
minValue={0}
maxValue={360}
step={1}
value={buildhue}
format={(value: number) => toFixed(value)}
onDrag={(e, value: number) =>
onChange={(e, value: number) =>
act('set_hue', {
buildhue: value,
})
@@ -41,12 +42,13 @@ export const ColorMateHSV = (props) => {
<center>Saturation:</center>
<Table.Cell>
<Slider
tickWhileDragging
minValue={-10}
maxValue={10}
step={0.01}
value={buildsat}
format={(value: number) => toFixed(value, 2)}
onDrag={(e, value: number) =>
onChange={(e, value: number) =>
act('set_sat', {
buildsat: value,
})
@@ -58,12 +60,13 @@ export const ColorMateHSV = (props) => {
<center>Value:</center>
<Table.Cell>
<Slider
tickWhileDragging
minValue={-10}
maxValue={10}
step={0.01}
value={buildval}
format={(value: number) => toFixed(value, 2)}
onDrag={(e, value: number) =>
onChange={(e, value: number) =>
act('set_val', {
buildval: value,
})
tgui/packages/tgui/interfaces/ColorMatrixEditor.tsx
+2 -1
View File
@@ -41,13 +41,14 @@ export const ColorMatrixEditor = (props) => {
{`${PREFIXES[row]}${PREFIXES[col]}:`}
</Box>
<NumberInput
tickWhileDragging
minValue={-Infinity}
maxValue={+Infinity}
value={currentColor[row * 4 + col]}
step={0.01}
width="50px"
format={(value) => toFixed(value, 2)}
onDrag={(value) => {
onChange={(value) => {
const retColor = currentColor;
retColor[row * 4 + col] = value;
act('transition_color', {
tgui/packages/tgui/interfaces/EmbeddedController/PanelOpen.tsx
+2 -1
View File
@@ -25,6 +25,7 @@ export const PanelOpen = (props) => {
<LabeledList.Item label="Frequency">
<NumberInput
animated
tickWhileDragging
fluid
unit="kHz"
step={0.2}
@@ -33,7 +34,7 @@ export const PanelOpen = (props) => {
minValue={min_freq / 10}
maxValue={max_freq / 10}
format={(val) => toFixed(val, 1)}
onDrag={(freq) =>
onChange={(freq) =>
act('set_frequency', { freq: round(freq * 10, 0) })
}
/>
tgui/packages/tgui/interfaces/ExosuitFabricator/Material.tsx
+2 -1
View File
@@ -35,12 +35,13 @@ const EjectMaterial = (props: { material: material }) => {
<>
<NumberInput
width="30px"
tickWhileDragging
animated
value={removeMaterials}
minValue={1}
maxValue={sheets || 1}
step={1}
onDrag={(val) => {
onChange={(val) => {
const newVal = val;
if (Number.isInteger(newVal)) {
setRemoveMaterials(newVal);
tgui/packages/tgui/interfaces/Filteriffic/FilterTypes/FilterFloatEntry.tsx
+3 -3
View File
@@ -1,8 +1,7 @@
import { useState } from 'react';
import { useBackend } from 'tgui/backend';
import { Box, NumberInput } from 'tgui-core/components';
import { toFixed } from 'tgui-core/math';
import { numberOfDecimalDigits } from 'tgui-core/math';
import { numberOfDecimalDigits, toFixed } from 'tgui-core/math';
import type { FilterEntryProps } from '../types';
@@ -14,6 +13,7 @@ export const FilterFloatEntry = (props: FilterEntryProps) => {
return (
<>
<NumberInput
tickWhileDragging
value={value}
minValue={-500}
maxValue={500}
@@ -21,7 +21,7 @@ export const FilterFloatEntry = (props: FilterEntryProps) => {
step={step}
format={(value) => toFixed(value, numberOfDecimalDigits(step))}
width="80px"
onDrag={(value) =>
onChange={(value) =>
act('transition_filter_value', {
name: filterName,
new_data: {
tgui/packages/tgui/interfaces/Filteriffic/FilterTypes/FilterIntegerEntry.tsx
+2 -1
View File
@@ -8,13 +8,14 @@ export const FilterIntegerEntry = (props: FilterEntryProps) => {
const { act } = useBackend();
return (
<NumberInput
tickWhileDragging
value={value}
minValue={-500}
maxValue={500}
step={1}
stepPixelSize={5}
width="39px"
onDrag={(value) =>
onChange={(value) =>
act('modify_filter_value', {
name: filterName,
new_data: {
tgui/packages/tgui/interfaces/Filteriffic/FilterTypes/FilterTransformEntry.tsx
+2 -1
View File
@@ -11,12 +11,13 @@ export const FilterTransformEntry = (props: FilterEntryProps) => {
<Box>
{value?.map((current_value: number, current_index: number) => (
<NumberInput
tickWhileDragging
key={current_index}
value={current_value}
minValue={0}
maxValue={1}
step={1}
onDrag={(new_value) =>
onChange={(new_value) =>
act('modify_filter_value', {
name: filterName,
new_data: {
tgui/packages/tgui/interfaces/GyrotronControl.tsx
+4 -2
View File
@@ -72,6 +72,7 @@ export const GyrotronControlContent = (props) => {
</Table.Cell>
<Table.Cell>
<Knob
tickWhileDragging
format={(value) => toFixed(value)}
size={1.25}
color={!!gyro.active && 'yellow'}
@@ -80,7 +81,7 @@ export const GyrotronControlContent = (props) => {
minValue={1}
maxValue={60}
stepPixelSize={1}
onDrag={(e, value) =>
onChange={(e, value) =>
act('set_rate', {
gyro: gyro.ref,
rate: value,
@@ -90,6 +91,7 @@ export const GyrotronControlContent = (props) => {
</Table.Cell>
<Table.Cell>
<Knob
tickWhileDragging
format={(value) => toFixed(value)}
size={1.25}
color={!!gyro.active && 'yellow'}
@@ -98,7 +100,7 @@ export const GyrotronControlContent = (props) => {
minValue={1}
maxValue={50}
stepPixelSize={1}
onDrag={(e, value) =>
onChange={(e, value) =>
act('set_str', {
gyro: gyro.ref,
str: value,
tgui/packages/tgui/interfaces/Medbot.tsx
+4 -2
View File
@@ -97,21 +97,23 @@ export const Medbot = (props) => {
<LabeledList.Item label="Healing Threshold">
<NumberInput
fluid
tickWhileDragging
step={1}
minValue={0}
maxValue={heal_threshold_max}
value={heal_threshold!}
onDrag={(val: number) => act('adj_threshold', { val: val })}
onChange={(val: number) => act('adj_threshold', { val: val })}
/>
</LabeledList.Item>
<LabeledList.Item label="Injection Amount">
<NumberInput
fluid
tickWhileDragging
step={1}
minValue={injection_amount_min}
maxValue={injection_amount_max}
value={injection_amount!}
onDrag={(val: number) => act('adj_inject', { val: val })}
onChange={(val: number) => act('adj_inject', { val: val })}
/>
</LabeledList.Item>
<LabeledList.Item label="Reagent Source">
tgui/packages/tgui/interfaces/ParticleEdit/EntriesBasic.tsx
+14 -7
View File
@@ -42,11 +42,12 @@ export const EntryFloat = (props: EntryFloatProps) => {
/>
<NumberInput
animated
tickWhileDragging
value={float}
minValue={0}
maxValue={Infinity}
step={1}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
new_value: value,
@@ -70,11 +71,12 @@ export const EntryCoord = (props: EntryCoordProps) => {
/>
<NumberInput
animated
tickWhileDragging
minValue={-Infinity}
maxValue={Infinity}
step={1}
value={coord?.[0] || 0}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
new_value: [value, coord?.[1], coord?.[2]],
@@ -83,11 +85,12 @@ export const EntryCoord = (props: EntryCoordProps) => {
/>
<NumberInput
animated
tickWhileDragging
minValue={-Infinity}
maxValue={Infinity}
step={1}
value={coord?.[1] || 0}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
new_value: [coord?.[0], value, coord?.[2]],
@@ -96,11 +99,12 @@ export const EntryCoord = (props: EntryCoordProps) => {
/>
<NumberInput
animated
tickWhileDragging
minValue={-Infinity}
maxValue={Infinity}
step={1}
value={coord?.[2] || 0}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
new_value: [coord?.[0], coord?.[1], value],
@@ -264,12 +268,13 @@ export const EntryTransform = (props: EntryTransformProps) => {
{transform?.map((value, index) => (
<NumberInput
animated
tickWhileDragging
key={index}
value={value}
minValue={0}
maxValue={1}
step={1}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
new_value: transform!.map((x, i) =>
@@ -309,11 +314,12 @@ export const EntryIcon = (props: EntryIconStateProps) => {
<Stack.Item>
<NumberInput
animated
tickWhileDragging
minValue={0}
maxValue={Infinity}
step={1}
value={icon_state[icon_name]}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
var_mod: P_DATA_ICON_WEIGHT,
@@ -400,11 +406,12 @@ export const EntryIconState = (props: EntryIconStateProps) => {
<Stack.Item>
<NumberInput
animated
tickWhileDragging
minValue={0}
maxValue={Infinity}
step={1}
value={icon_state[iconstate]}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
new_value: editWeightOf(icon_state, iconstate, value),
tgui/packages/tgui/interfaces/ParticleEdit/EntriesGenerators.tsx
+10 -5
View File
@@ -56,11 +56,12 @@ export const FloatGenerator = (props: FloatGeneratorProps) => {
<Stack.Item>
<NumberInput
animated
tickWhileDragging
minValue={-Infinity}
maxValue={Infinity}
step={1}
value={float || 0}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
new_value: value,
@@ -181,11 +182,12 @@ export const EntryGeneratorNumbersList = (
<Stack.Item>
<NumberInput
animated
tickWhileDragging
minValue={-Infinity}
maxValue={Infinity}
step={1}
value={input || 0}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
new_value: value,
@@ -203,11 +205,12 @@ export const EntryGeneratorNumbersList = (
<Stack.Item>
<NumberInput
animated
tickWhileDragging
minValue={-Infinity}
maxValue={Infinity}
step={1}
value={input[0]}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
new_value: [value, input![1], input![2]],
@@ -216,11 +219,12 @@ export const EntryGeneratorNumbersList = (
/>
<NumberInput
animated
tickWhileDragging
minValue={-Infinity}
maxValue={Infinity}
step={1}
value={input[1]}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
new_value: [input![0], value, input![2]],
@@ -230,11 +234,12 @@ export const EntryGeneratorNumbersList = (
{allow_z ? (
<NumberInput
animated
tickWhileDragging
minValue={-Infinity}
maxValue={Infinity}
step={1}
value={input[2]}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
new_value: [input![0], input![1], value],
tgui/packages/tgui/interfaces/ParticleEdit/Generators.tsx
+16 -8
View File
@@ -66,10 +66,11 @@ export const GeneratorListEntry = (props: GeneratorProps) => {
{typeof A === 'number' ? (
<NumberInput
animated
tickWhileDragging
value={A}
minValue={0}
step={1}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
var_mod: P_DATA_GENERATOR,
@@ -82,9 +83,10 @@ export const GeneratorListEntry = (props: GeneratorProps) => {
<>
<NumberInput
animated
tickWhileDragging
value={A[0]}
step={1}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
var_mod: P_DATA_GENERATOR,
@@ -101,9 +103,10 @@ export const GeneratorListEntry = (props: GeneratorProps) => {
/>
<NumberInput
animated
tickWhileDragging
value={A[1]}
step={1}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
var_mod: P_DATA_GENERATOR,
@@ -115,9 +118,10 @@ export const GeneratorListEntry = (props: GeneratorProps) => {
/>
<NumberInput
animated
tickWhileDragging
value={A[2]}
step={1}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
var_mod: P_DATA_GENERATOR,
@@ -135,9 +139,10 @@ export const GeneratorListEntry = (props: GeneratorProps) => {
{typeof B === 'number' ? (
<NumberInput
animated
tickWhileDragging
value={B}
step={1}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
var_mod: P_DATA_GENERATOR,
@@ -151,9 +156,10 @@ export const GeneratorListEntry = (props: GeneratorProps) => {
<>
<NumberInput
animated
tickWhileDragging
value={B[0]}
step={1}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
var_mod: P_DATA_GENERATOR,
@@ -170,9 +176,10 @@ export const GeneratorListEntry = (props: GeneratorProps) => {
/>
<NumberInput
animated
tickWhileDragging
value={B[1]}
step={1}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
var_mod: P_DATA_GENERATOR,
@@ -189,9 +196,10 @@ export const GeneratorListEntry = (props: GeneratorProps) => {
/>
<NumberInput
animated
tickWhileDragging
value={B[2]}
step={1}
onDrag={(value) =>
onChange={(value) =>
act('edit', {
var: var_name,
var_mod: P_DATA_GENERATOR,
tgui/packages/tgui/interfaces/RCON/RCONSMESControls.tsx
+2 -1
View File
@@ -108,6 +108,7 @@ export const SMESControls = (props: { way: string; smes: rconSmes }) => {
</Stack.Item>
<Stack.Item grow>
<Slider
tickWhileDragging
value={level / POWER_MUL}
fillValue={available / POWER_MUL}
minValue={0}
@@ -119,7 +120,7 @@ export const SMESControls = (props: { way: string; smes: rconSmes }) => {
'/' +
formatPower(value * POWER_MUL, 1)
}
onDrag={(e, value: number) =>
onChange={(e, value: number) =>
act(changeAmountAct, {
target: value * POWER_MUL,
smes: RCON_tag,
tgui/packages/tgui/interfaces/Radio.tsx
+2 -1
View File
@@ -73,6 +73,7 @@ export const Radio = (props) => {
<LabeledList.Item label="Frequency">
<NumberInput
animated
tickWhileDragging
unit="kHz"
step={0.2}
stepPixelSize={10}
@@ -80,7 +81,7 @@ export const Radio = (props) => {
maxValue={maxFrequency / 10}
value={rawfreq / 10}
format={(value: number) => toFixed(value, 1)}
onDrag={(value: number) =>
onChange={(value: number) =>
act('setFrequency', {
freq: round(value * 10, 0),
})
tgui/packages/tgui/interfaces/ResearchConsole/pages/Constructor.tsx
+2 -1
View File
@@ -338,12 +338,13 @@ const MatStorageTab = (props: {
<Stack>
<Stack.Item>
<NumberInput
tickWhileDragging
value={matEjectStates[mat] || 0}
minValue={0}
maxValue={Math.floor(amount / data.sheet_material_amount)}
step={1}
width="100px"
onDrag={(val) => {
onChange={(val) => {
setMatEjectStates({
...matEjectStates,
[mat]: val,
tgui/packages/tgui/interfaces/RustCoreMonitor.tsx
+2 -1
View File
@@ -92,6 +92,7 @@ export const RustCoreMonitorContent = (props) => {
<Table.Cell>{core.field_temperature}</Table.Cell>
<Table.Cell>
<Knob
tickWhileDragging
size={1.25}
color={!!core.has_field && 'yellow'}
value={core.target_field_strength}
@@ -99,7 +100,7 @@ export const RustCoreMonitorContent = (props) => {
minValue={1}
maxValue={1000}
stepPixelSize={1}
onDrag={(e, value) =>
onChange={(e, value) =>
act('set_fieldstr', {
core: core.ref,
fieldstr: value,
tgui/packages/tgui/interfaces/ShieldCapacitor.tsx
+2 -1
View File
@@ -68,13 +68,14 @@ export const ShieldCapacitor = (props) => {
</LabeledList.Item>
<LabeledList.Item label="Charge Rate">
<NumberInput
tickWhileDragging
value={charge_rate}
step={100}
stepPixelSize={0.2}
minValue={10000}
maxValue={max_charge_rate}
format={(val: number) => formatPower(val)}
onDrag={(val: number) => act('charge_rate', { rate: val })}
onChange={(val: number) => act('charge_rate', { rate: val })}
/>
</LabeledList.Item>
</LabeledList>
tgui/packages/tgui/interfaces/ShieldGenerator.tsx
+8 -4
View File
@@ -178,30 +178,33 @@ const ShieldGeneratorContent = (props) => {
<LabeledList.Item label="Coverage Radius">
<NumberInput
fluid
tickWhileDragging
stepPixelSize={6}
step={1}
minValue={0}
maxValue={max_radius}
value={radius}
unit="m"
onDrag={(val: number) => act('change_radius', { val: val })}
onChange={(val: number) => act('change_radius', { val: val })}
/>
</LabeledList.Item>
<LabeledList.Item label="Vertical Shielding">
<NumberInput
fluid
tickWhileDragging
stepPixelSize={12}
step={1}
minValue={0}
maxValue={max_z_range}
value={z_range}
unit="vertical range"
onDrag={(val: number) => act('z_range', { val: val })}
onChange={(val: number) => act('z_range', { val: val })}
/>
</LabeledList.Item>
<LabeledList.Item label="Charge Rate">
<NumberInput
fluid
tickWhileDragging
stepPixelSize={12}
minValue={0}
step={0.1}
@@ -209,19 +212,20 @@ const ShieldGeneratorContent = (props) => {
value={strengthen_rate}
format={(val: number) => toFixed(val, 1)}
unit="Renwick/s"
onDrag={(val: number) => act('strengthen_rate', { val: val })}
onChange={(val: number) => act('strengthen_rate', { val: val })}
/>
</LabeledList.Item>
<LabeledList.Item label="Maximum Field Strength">
<NumberInput
fluid
tickWhileDragging
stepPixelSize={12}
step={1}
minValue={1}
maxValue={max_field_strength}
value={target_field_strength}
unit="Renwick"
onDrag={(val: number) =>
onChange={(val: number) =>
act('target_field_strength', { val: val })
}
/>
tgui/packages/tgui/interfaces/Signaler.tsx
+4 -2
View File
@@ -31,6 +31,7 @@ export const SignalerContent = (props) => {
<Table.Cell>
<NumberInput
animated
tickWhileDragging
unit="kHz"
step={0.2}
stepPixelSize={6}
@@ -39,7 +40,7 @@ export const SignalerContent = (props) => {
value={frequency / 10}
format={(value) => toFixed(value, 1)}
width="80px"
onDrag={(value) =>
onChange={(value) =>
act('freq', {
freq: value,
})
@@ -65,13 +66,14 @@ export const SignalerContent = (props) => {
<Table.Cell>
<NumberInput
animated
tickWhileDragging
step={1}
stepPixelSize={6}
minValue={1}
maxValue={100}
value={code}
width="80px"
onDrag={(value) =>
onChange={(value) =>
act('code', {
code: value,
})
tgui/packages/tgui/interfaces/Smes.tsx
+4 -2
View File
@@ -121,6 +121,7 @@ export const Smes = (props) => {
</Stack.Item>
<Stack.Item grow mx={1}>
<Slider
tickWhileDragging
value={inputLevel / POWER_MUL}
fillValue={inputAvailable / POWER_MUL}
minValue={0}
@@ -130,7 +131,7 @@ export const Smes = (props) => {
format={(value: number) =>
formatPower(value * POWER_MUL, 1)
}
onDrag={(e, value: number) =>
onChange={(e, value: number) =>
act('input', {
target: value * POWER_MUL,
})
@@ -210,6 +211,7 @@ export const Smes = (props) => {
</Stack.Item>
<Stack.Item grow mx={1}>
<Slider
tickWhileDragging
value={outputLevel / POWER_MUL}
minValue={0}
maxValue={outputLevelMax / POWER_MUL}
@@ -218,7 +220,7 @@ export const Smes = (props) => {
format={(value: number) =>
formatPower(value * POWER_MUL, 1)
}
onDrag={(e, value: number) =>
onChange={(e, value: number) =>
act('output', {
target: value * POWER_MUL,
})
tgui/packages/tgui/interfaces/SolarControl.tsx
+4 -2
View File
@@ -119,6 +119,7 @@ export const SolarControl = (props) => {
<LabeledList.Item label="Azimuth">
{(tracking_state === 0 || tracking_state === 1) && (
<NumberInput
tickWhileDragging
width="52px"
unit="°"
step={1}
@@ -130,11 +131,12 @@ export const SolarControl = (props) => {
const sign = Math.sign(rate) > 0 ? ' (CW)' : ' (CCW)';
return toFixed(Math.abs(rate)) + sign;
}}
onDrag={(value) => act('azimuth', { value })}
onChange={(value) => act('azimuth', { value })}
/>
)}
{tracking_state === 1 && (
<NumberInput
tickWhileDragging
width="80px"
unit="deg/h"
step={1}
@@ -145,7 +147,7 @@ export const SolarControl = (props) => {
const sign = Math.sign(rate) > 0 ? ' (CW)' : ' (CCW)';
return toFixed(Math.abs(rate)) + sign;
}}
onDrag={(value) => act('azimuth_rate', { value })}
onChange={(value) => act('azimuth_rate', { value })}
/>
)}
{tracking_state === 2 && (
tgui/packages/tgui/interfaces/TelecommsMultitoolMenu.tsx
+2 -1
View File
@@ -275,6 +275,7 @@ const TelecommsMultitoolMenuPolymorphicOptions = (props: {
label={`${use_broadcast_range ? 'Broadcast' : 'Receive'} Range`}
>
<NumberInput
tickWhileDragging
step={1}
value={range!}
minValue={minRange!}
@@ -282,7 +283,7 @@ const TelecommsMultitoolMenuPolymorphicOptions = (props: {
unit="gigameters"
stepPixelSize={4}
format={(val) => (val + 1).toString()}
onDrag={(val) => act('range', { range: val })}
onChange={(val) => act('range', { range: val })}
/>
</LabeledList.Item>
) : (
tgui/packages/tgui/interfaces/TelesciConsole.tsx
+4 -2
View File
@@ -101,24 +101,26 @@ export const TelesciConsoleContent = (props) => {
<LabeledList.Item label="Bearing">
<NumberInput
fluid
tickWhileDragging
value={rotation!}
format={(v) => `${v}°`}
step={1}
minValue={-900}
maxValue={900}
onDrag={(val) => act('setrotation', { val: val })}
onChange={(val) => act('setrotation', { val: val })}
/>
</LabeledList.Item>
<LabeledList.Item label="Distance">
<NumberInput
fluid
tickWhileDragging
value={distance!}
format={(v) => `${v}/${maxAllowedDistance} m`}
minValue={0}
maxValue={maxAllowedDistance!}
step={1}
stepPixelSize={4}
onDrag={(val) => act('setdistance', { val: val })}
onChange={(val) => act('setdistance', { val: val })}
/>
</LabeledList.Item>
<LabeledList.Item label="Sector">
tgui/packages/tgui/interfaces/XenoarchHandheldPowerUtilizer.tsx
+4 -2
View File
@@ -74,13 +74,14 @@ export const XenoarchHandheldPowerUtilizer = (props) => {
<LabeledList.Item label="Activation Duration">
<NumberInput
unit="s"
tickWhileDragging
fluid
step={1}
minValue={0}
value={duration!}
stepPixelSize={4}
maxValue={30}
onDrag={(val: number) =>
onChange={(val: number) =>
act('changeduration', { duration: val * 10 })
}
/>
@@ -88,13 +89,14 @@ export const XenoarchHandheldPowerUtilizer = (props) => {
<LabeledList.Item label="Activation Interval">
<NumberInput
unit="s"
tickWhileDragging
fluid
step={1}
minValue={0}
value={interval!}
stepPixelSize={10}
maxValue={10}
onDrag={(val: number) =>
onChange={(val: number) =>
act('changeinterval', { interval: val * 10 })
}
/>
tgui/packages/tgui/package.json
+1 -1
View File
@@ -13,7 +13,7 @@
"marked-smartypants": "^1.1.9",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"tgui-core": "^4.3.4",
"tgui-core": "^5.0.0",
"tgui-dev-server": "workspace:*"
},
"private": true
tgui/packages/tgui/stories/Input.stories.tsx
+13 -8
View File
@@ -46,30 +46,33 @@ function Story() {
onChange={(value) => setNumber(value)}
/>
</LabeledList.Item>
<LabeledList.Item label="NumberInput (onDrag)">
<LabeledList.Item label="NumberInput (onChange, tickWhileDragging)">
<NumberInput
animated
tickWhileDragging
width="40px"
step={1}
stepPixelSize={5}
value={number}
minValue={-100}
maxValue={100}
onDrag={(value) => setNumber(value)}
onChange={(value) => setNumber(value)}
/>
</LabeledList.Item>
<LabeledList.Item label="Slider (onDrag)">
<LabeledList.Item label="Slider (onChange, tickWhileDragging)">
<Slider
tickWhileDragging
step={1}
stepPixelSize={5}
value={number}
minValue={-100}
maxValue={100}
onDrag={(e, value) => setNumber(value)}
onChange={(e, value) => setNumber(value)}
/>
</LabeledList.Item>
<LabeledList.Item label="Knob (onDrag)">
<LabeledList.Item label="Knob (onChange, tickWhileDragging)">
<Knob
tickWhileDragging
inline
size={1}
step={1}
@@ -77,9 +80,10 @@ function Story() {
value={number}
minValue={-100}
maxValue={100}
onDrag={(e, value) => setNumber(value)}
onChange={(e, value) => setNumber(value)}
/>
<Knob
tickWhileDragging
ml={1}
inline
bipolar
@@ -89,19 +93,20 @@ function Story() {
value={number}
minValue={-100}
maxValue={100}
onDrag={(e, value) => setNumber(value)}
onChange={(e, value) => setNumber(value)}
/>
</LabeledList.Item>
<LabeledList.Item label="Rotating Icon">
<Box inline position="relative">
<DraggableControl
tickWhileDragging
value={number}
minValue={-100}
maxValue={100}
dragMatrix={[0, -1]}
step={1}
stepPixelSize={5}
onDrag={(e, value) => setNumber(value)}
onChange={(e, value) => setNumber(value)}
>
{(control) => (
<Box onMouseDown={control.handleDragStart}>