duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-20 15:36:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Polish wired editor UI and variable handling

Browse Source
This commit is contained in:
Lorenzune
2026-04-08 16:18:16 +02:00
parent 0ebd37d91b
commit 5e9e3e1e4c
22 changed files with 926 additions and 1029 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wired/views/extras/WiredExtraContextVariableView.tsx
+20 -3
View File
@@ -9,20 +9,37 @@ const MAX_NAME_LENGTH = 40;
const normalizeVariableName = (value: string) =>
{
let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
{
normalizedValue = normalizedValue.substring(1).trim();
normalizedValue = normalizedValue.substring(1);
}
normalizedValue = normalizedValue.replace(/\s+/g, '_');
normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
return normalizedValue.slice(0, MAX_NAME_LENGTH);
};
const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
{
if(event.key !== ' ') return;
event.preventDefault();
const input = event.currentTarget;
const start = (input.selectionStart ?? input.value.length);
const end = (input.selectionEnd ?? start);
const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
setValue(normalizeVariableName(nextValue));
window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
};
export const WiredExtraContextVariableView: FC<{}> = () =>
{
const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
@@ -48,7 +65,7 @@ export const WiredExtraContextVariableView: FC<{}> = () =>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
</div>
<div className="flex flex-col gap-1">
src/components/wired/views/extras/WiredExtraRoomVariableView.tsx
+20 -3
View File
@@ -12,20 +12,37 @@ const MAX_NAME_LENGTH = 40;
const normalizeVariableName = (value: string) =>
{
let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
{
normalizedValue = normalizedValue.substring(1).trim();
normalizedValue = normalizedValue.substring(1);
}
normalizedValue = normalizedValue.replace(/\s+/g, '_');
normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
return normalizedValue.slice(0, MAX_NAME_LENGTH);
};
const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
{
if(event.key !== ' ') return;
event.preventDefault();
const input = event.currentTarget;
const start = (input.selectionStart ?? input.value.length);
const end = (input.selectionEnd ?? start);
const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
setValue(normalizeVariableName(nextValue));
window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
};
export const WiredExtraRoomVariableView: FC<{}> = () =>
{
const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
@@ -57,7 +74,7 @@ export const WiredExtraRoomVariableView: FC<{}> = () =>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
</div>
<div className="flex flex-col gap-1">
src/components/wired/views/extras/WiredExtraUserVariableView.tsx
+20 -3
View File
@@ -12,20 +12,37 @@ const MAX_NAME_LENGTH = 40;
const normalizeVariableName = (value: string) =>
{
let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
{
normalizedValue = normalizedValue.substring(1).trim();
normalizedValue = normalizedValue.substring(1);
}
normalizedValue = normalizedValue.replace(/\s+/g, '_');
normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
return normalizedValue.slice(0, MAX_NAME_LENGTH);
};
const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
{
if(event.key !== ' ') return;
event.preventDefault();
const input = event.currentTarget;
const start = (input.selectionStart ?? input.value.length);
const end = (input.selectionEnd ?? start);
const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
setValue(normalizeVariableName(nextValue));
window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
};
interface WiredExtraVariableViewProps
{
availabilityRoomValue: number;
@@ -76,7 +93,7 @@ export const WiredExtraVariableView: FC<WiredExtraVariableViewProps> = props =>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
</div>
<div className="flex flex-col gap-1">
src/components/wired/views/extras/WiredExtraVariableEchoView.tsx
+20 -3
View File
@@ -34,20 +34,37 @@ const TARGET_BUTTONS: Array<{ key: EchoSourceTarget; icon: string; }> = [
const normalizeVariableName = (value: string) =>
{
let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
{
normalizedValue = normalizedValue.substring(1).trim();
normalizedValue = normalizedValue.substring(1);
}
normalizedValue = normalizedValue.replace(/\s+/g, '_');
normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
return normalizedValue.slice(0, MAX_NAME_LENGTH);
};
const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
{
if(event.key !== ' ') return;
event.preventDefault();
const input = event.currentTarget;
const start = (input.selectionStart ?? input.value.length);
const end = (input.selectionEnd ?? start);
const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
setValue(normalizeVariableName(nextValue));
window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
};
const parseEditorData = (value: string): IEchoEditorData =>
{
if(!value?.trim().startsWith('{')) return {};
@@ -173,7 +190,7 @@ export const WiredExtraVariableEchoView: FC<{}> = () =>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
</div>
<div className="nitro-wired__give-var-heading">
src/components/wired/views/extras/WiredExtraVariableReferenceView.tsx
+20 -3
View File
@@ -38,20 +38,37 @@ interface IVariableReferenceEditorData
const normalizeVariableName = (value: string) =>
{
let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
{
normalizedValue = normalizedValue.substring(1).trim();
normalizedValue = normalizedValue.substring(1);
}
normalizedValue = normalizedValue.replace(/\s+/g, '_');
normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
return normalizedValue.slice(0, MAX_NAME_LENGTH);
};
const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
{
if(event.key !== ' ') return;
event.preventDefault();
const input = event.currentTarget;
const start = (input.selectionStart ?? input.value.length);
const end = (input.selectionEnd ?? start);
const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
setValue(normalizeVariableName(nextValue));
window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
};
const parseEditorData = (value: string): IVariableReferenceEditorData =>
{
if(!value?.trim().startsWith('{')) return {};
@@ -187,7 +204,7 @@ export const WiredExtraVariableReferenceView: FC<{}> = () =>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
</div>
<div className="flex flex-col gap-1">
src/components/wired/views/extras/WiredExtraVariableTextConnectorView.tsx
+29 -2
View File
@@ -5,6 +5,26 @@ import { useWired } from '../../../../hooks';
import { WiredExtraBaseView } from './WiredExtraBaseView';
const DEFAULT_CONNECTOR_PLACEHOLDER = '0=text 1\n1=text 2\n2 = text 3';
const MAX_CONNECTOR_LINES = 30;
const MAX_CONNECTOR_CHARACTERS = 1000;
const truncateMappingsText = (value: string) =>
{
const normalizedValue = (value ?? '').replace(/\r/g, '');
const lines = normalizedValue.split('\n');
const limitedByLines = lines.slice(0, MAX_CONNECTOR_LINES).join('\n');
return (limitedByLines.length > MAX_CONNECTOR_CHARACTERS)
? limitedByLines.slice(0, MAX_CONNECTOR_CHARACTERS)
: limitedByLines;
};
const getLineCount = (value: string) =>
{
if(!value.length) return 0;
return value.split('\n').length;
};
export const WiredExtraVariableTextConnectorView: FC<{}> = () =>
{
@@ -15,7 +35,7 @@ export const WiredExtraVariableTextConnectorView: FC<{}> = () =>
{
if(!trigger) return;
setMappingsText(trigger.stringData || '');
setMappingsText(truncateMappingsText(trigger.stringData || ''));
}, [ trigger ]);
const save = () =>
@@ -24,6 +44,8 @@ export const WiredExtraVariableTextConnectorView: FC<{}> = () =>
setStringParam(mappingsText ?? '');
};
const handleTextChange = (value: string) => setMappingsText(truncateMappingsText(value));
const placeholderText = (() =>
{
const localizedText = LocalizeText('wiredfurni.params.variables.connect_text.caption');
@@ -34,15 +56,20 @@ export const WiredExtraVariableTextConnectorView: FC<{}> = () =>
return localizedText;
})();
const lineCount = getLineCount(mappingsText);
const characterCount = mappingsText.length;
return (
<WiredExtraBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save } cardStyle={ { width: 400 } }>
<div className="flex flex-col gap-2">
<Text bold>{ LocalizeText('wiredfurni.params.variables.connect_text.title') }</Text>
<textarea
className="form-control form-control-sm nitro-wired__resizable-textarea"
maxLength={ MAX_CONNECTOR_CHARACTERS }
placeholder={ placeholderText }
value={ mappingsText }
onChange={ event => setMappingsText(event.target.value) } />
onChange={ event => handleTextChange(event.target.value) } />
<Text small>{ `${ lineCount }/${ MAX_CONNECTOR_LINES } righe - ${ characterCount }/${ MAX_CONNECTOR_CHARACTERS } caratteri` }</Text>
</div>
</WiredExtraBaseView>
);