-
-
+
- setPresetName(event.target.value)}
- />
-
-
-
-
-
+
-
-
-
-
-
-
- Runtime
-
-
-
- Video
-
-
- Compiler
-{runtime.compileMessage || "No compiler output."}
-
-
-
- Layers
-Drag layers to reorder them. Each layer processes the output of the one above it.
-
- {layers.map((layer, index) => (
- {
- setDragLayerId(null);
- setDropTargetLayerId(null);
- }}
- onDragOver={setDropTargetLayerId}
- onDrop={handleDrop}
- onRemove={removeLayer}
- onLayerParameterChange={updateLayerParameterOptimistically}
- />
- ))}
-
-
-
-
-
-
-
- +
-
- Add Layer
-
-
-
-
-
-
-
-
-
- -
+ {values.map(([key, value]) => (
+
{
+ event.preventDefault();
+ onDragOver(layer.id);
+ }}
+ onDrop={(event) => {
+ event.preventDefault();
+ onDrop(event, layer.id, index);
+ }}
+ >
+
+ );
+}
diff --git a/ui/src/components/LayerStack.jsx b/ui/src/components/LayerStack.jsx
new file mode 100644
index 0000000..8f21f42
--- /dev/null
+++ b/ui/src/components/LayerStack.jsx
@@ -0,0 +1,152 @@
+import { postJson } from "../api/controlApi";
+import { LayerCard } from "./LayerCard";
+
+function moveItem(array, fromIndex, toIndex) {
+ if (fromIndex < 0 || fromIndex >= array.length || toIndex < 0 || toIndex >= array.length) {
+ return array;
+ }
+
+ const copy = [...array];
+ const [item] = copy.splice(fromIndex, 1);
+ copy.splice(toIndex, 0, item);
+ return copy;
+}
+
+export function LayerStack({
+ dragLayerId,
+ dropTargetLayerId,
+ expandedLayerIds,
+ layers,
+ pendingShaderId,
+ setAppState,
+ setDragLayerId,
+ setDropTargetLayerId,
+ setExpandedLayerIds,
+ setPendingShaderId,
+ shaders,
+}) {
+ const expandedSet = new Set(expandedLayerIds);
+
+ function updateLayerParameterOptimistically(layerId, parameterId, value) {
+ return postJson("/api/layers/update-parameter", {
+ layerId,
+ parameterId,
+ value,
+ });
+ }
+
+ function toggleExpanded(layerId) {
+ setExpandedLayerIds((current) =>
+ current.includes(layerId) ? current.filter((id) => id !== layerId) : [...current, layerId],
+ );
+ }
+
+ function removeLayer(layerId) {
+ setExpandedLayerIds((current) => current.filter((id) => id !== layerId));
+ postJson("/api/layers/remove", { layerId });
+ }
+
+ function handleDrop(event, targetLayerId, targetIndex) {
+ const sourceLayerId = event.dataTransfer.getData("text/plain") || dragLayerId;
+ if (!sourceLayerId || sourceLayerId === targetLayerId) {
+ setDragLayerId(null);
+ setDropTargetLayerId(null);
+ return;
+ }
+
+ setAppState((current) => {
+ if (!current?.layers) {
+ return current;
+ }
+
+ const sourceIndex = current.layers.findIndex((layer) => layer.id === sourceLayerId);
+ const destinationIndex = current.layers.findIndex((layer) => layer.id === targetLayerId);
+ if (sourceIndex < 0 || destinationIndex < 0 || sourceIndex === destinationIndex) {
+ return current;
+ }
+
+ return {
+ ...current,
+ layers: moveItem(current.layers, sourceIndex, destinationIndex),
+ };
+ });
+
+ postJson("/api/layers/reorder", {
+ layerId: sourceLayerId,
+ targetIndex,
+ });
+ setDragLayerId(null);
+ setDropTargetLayerId(null);
+ }
+
+ return (
+
+
+
+ {expanded ? (
+
+
+ {index + 1}
+
+
+
+
+
+
+
+
+
+
+
+ ) : null}
+
+
+
+
+
+ {layer.temporal?.enabled ? (
+
+
+
+ ) : (
+
+ {layer.temporal.historySource} history, requested {layer.temporal.requestedHistoryLength} frame{layer.temporal.requestedHistoryLength === 1 ? "" : "s"}, using {layer.temporal.effectiveHistoryLength}
+
+
+
+
+ )}
+
+ Stateless shader
+
+
+
+ {layer.parameters.length > 0 ? (
+ Parameters
+ +
+ {layer.parameters.map((parameter) => (
+ onLayerParameterChange(layer.id, parameterId, value)}
+ />
+ ))}
+
+ ) : (
+ This shader does not expose any user parameters.
+ )} +
+
+
+ Layers
+Drag layers to reorder them. Each layer processes the output of the one above it.
+
+ {layers.map((layer, index) => (
+ {
+ setDragLayerId(null);
+ setDropTargetLayerId(null);
+ }}
+ onDragOver={setDropTargetLayerId}
+ onDrop={handleDrop}
+ onRemove={removeLayer}
+ onLayerParameterChange={updateLayerParameterOptimistically}
+ />
+ ))}
+
+
+
+
+
+
+
+ +
+
+ Add Layer
+
+
+
+
+
+
+
+
+
+
+ scheduleSendValue(Number(event.target.value))}
+ onMouseUp={endInteraction}
+ onTouchEnd={endInteraction}
+ onPointerUp={endInteraction}
+ onKeyDown={beginInteraction}
+ onKeyUp={endInteraction}
+ onBlur={endInteraction}
+ />
+ sendValue(Number(event.target.value))}
+ onBlur={endInteraction}
+ />
+
+
+ {Array.from({ length: componentCount }, (_, index) => (
+ {
+ const next = [...values];
+ next[index] = Number(event.target.value);
+ sendValue(next);
+ }}
+ onBlur={endInteraction}
+ />
+ ))}
+
+
+ {pending ? `Applied: ${valueText}` : valueText}
+
+ );
+}
diff --git a/ui/src/components/StackPresetToolbar.jsx b/ui/src/components/StackPresetToolbar.jsx
new file mode 100644
index 0000000..61f3639
--- /dev/null
+++ b/ui/src/components/StackPresetToolbar.jsx
@@ -0,0 +1,75 @@
+import { postJson } from "../api/controlApi";
+
+export function StackPresetToolbar({
+ presetName,
+ selectedPresetName,
+ stackPresets,
+ onPresetNameChange,
+ onSelectedPresetNameChange,
+}) {
+ return (
+
+
+
+
+
+ onPresetNameChange(event.target.value)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Runtime
+
+
+
+ Video
+
+
+ Compiler
+{runtime.compileMessage || "No compiler output."}
+