84 lines
2.6 KiB
JavaScript
84 lines
2.6 KiB
JavaScript
import { postJson } from "../api/controlApi";
|
|
|
|
export function StackPresetToolbar({
|
|
presetName,
|
|
selectedPresetName,
|
|
stackPresets,
|
|
onPresetNameChange,
|
|
onSelectedPresetNameChange,
|
|
}) {
|
|
return (
|
|
<div className="panel stack-panel">
|
|
<div className="panel__header stack-panel__header">
|
|
<div>
|
|
<h3>Stack presets</h3>
|
|
<p className="muted">Save or recall the current layer chain.</p>
|
|
</div>
|
|
<button type="button" className="stack-panel__reload" onClick={() => postJson("/api/reload", {})}>
|
|
Reload shader
|
|
</button>
|
|
</div>
|
|
|
|
<div className="stack-panel__grid">
|
|
<div className="toolbar__group">
|
|
<label htmlFor="preset-name">Save stack</label>
|
|
<div className="toolbar__inline">
|
|
<input
|
|
id="preset-name"
|
|
type="text"
|
|
placeholder="Preset name"
|
|
value={presetName}
|
|
onChange={(event) => onPresetNameChange(event.target.value)}
|
|
/>
|
|
<button
|
|
type="button"
|
|
disabled={!presetName.trim()}
|
|
onClick={() => {
|
|
const trimmedName = presetName.trim();
|
|
if (!trimmedName) {
|
|
return;
|
|
}
|
|
postJson("/api/stack-presets/save", { presetName: trimmedName });
|
|
onSelectedPresetNameChange(
|
|
trimmedName.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, ""),
|
|
);
|
|
}}
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="toolbar__group">
|
|
<label htmlFor="preset-select">Recall stack</label>
|
|
<div className="toolbar__inline">
|
|
<select
|
|
id="preset-select"
|
|
value={selectedPresetName}
|
|
onChange={(event) => onSelectedPresetNameChange(event.target.value)}
|
|
>
|
|
{stackPresets.length === 0 ? <option value="">No presets</option> : null}
|
|
{stackPresets.map((preset) => (
|
|
<option key={preset} value={preset}>
|
|
{preset}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<button
|
|
type="button"
|
|
disabled={!selectedPresetName}
|
|
onClick={() => {
|
|
if (selectedPresetName) {
|
|
postJson("/api/stack-presets/load", { presetName: selectedPresetName });
|
|
}
|
|
}}
|
|
>
|
|
Recall
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|