matthias/lemonspace_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor adjustment nodes to use ParameterSlider for enhanced UI and functionality

Browse Source 
- Replaced SliderRow components with ParameterSlider in color-adjust, curves, detail-adjust, and light-adjust nodes for improved user interaction.
- Updated minimum width and height configurations for adjustment nodes to accommodate new slider designs.
- Enhanced node templates and default dimensions to reflect the changes in adjustment node sizes.
- Improved state management and data handling for slider values in adjustment nodes.
This commit is contained in:
Matthias
2026-04-02 23:29:48 +02:00
parent f5f9753288
commit b0a844d3a3
9 changed files with 464 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/canvas/nodes/base-node-wrapper.tsx
View File

@@ -39,10 +39,10 @@ const RESIZE_CONFIGS: Record<string, ResizeConfig> = {
"ai-image": { minWidth: 200, minHeight: 208, keepAspectRatio: false },
compare: { minWidth: 300, minHeight: 200 },
prompt: { minWidth: 260, minHeight: 220 },
curves: { minWidth: 240, minHeight: 320 },
"color-adjust": { minWidth: 240, minHeight: 360 },
"light-adjust": { minWidth: 240, minHeight: 360 },
"detail-adjust": { minWidth: 240, minHeight: 360 },
curves: { minWidth: 300, minHeight: 620 },
"color-adjust": { minWidth: 300, minHeight: 760 },
"light-adjust": { minWidth: 300, minHeight: 860 },
"detail-adjust": { minWidth: 300, minHeight: 820 },
render: { minWidth: 260, minHeight: 300, keepAspectRatio: true },
text: { minWidth: 220, minHeight: 90 },
note: { minWidth: 200, minHeight: 90 },

169
components/canvas/nodes/color-adjust-node.tsx
View File

@@ -10,9 +10,13 @@ import type { Id } from "@/convex/_generated/dataModel";
import { useAuthQuery } from "@/hooks/use-auth-query";
import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
import { SliderRow } from "@/components/canvas/nodes/adjustment-controls";
import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
import AdjustmentPreview from "@/components/canvas/nodes/adjustment-preview";
import {
ParameterSlider,
type SliderConfig,
type SliderValue,
} from "@/src/components/tool-ui/parameter-slider";
import {
cloneAdjustmentData,
DEFAULT_COLOR_ADJUST_DATA,
@@ -80,6 +84,71 @@ export default function ColorAdjustNode({ id, data, selected, width }: NodeProps
};
const builtinOptions = useMemo(() => Object.entries(COLOR_PRESETS), []);
const sliderConfigs = useMemo<SliderConfig[]>(
() => [
{
id: "hue",
label: "Hue",
min: -180,
max: 180,
value: DEFAULT_COLOR_ADJUST_DATA.hsl.hue,
},
{
id: "saturation",
label: "Saturation",
min: -100,
max: 100,
value: DEFAULT_COLOR_ADJUST_DATA.hsl.saturation,
},
{
id: "luminance",
label: "Luminance",
min: -100,
max: 100,
value: DEFAULT_COLOR_ADJUST_DATA.hsl.luminance,
},
{
id: "temperature",
label: "Temperature",
min: -100,
max: 100,
value: DEFAULT_COLOR_ADJUST_DATA.temperature,
},
{
id: "tint",
label: "Tint",
min: -100,
max: 100,
value: DEFAULT_COLOR_ADJUST_DATA.tint,
},
{
id: "vibrance",
label: "Vibrance",
min: -100,
max: 100,
value: DEFAULT_COLOR_ADJUST_DATA.vibrance,
},
],
[],
);
const sliderValues = useMemo<SliderValue[]>(
() => [
{ id: "hue", value: localData.hsl.hue },
{ id: "saturation", value: localData.hsl.saturation },
{ id: "luminance", value: localData.hsl.luminance },
{ id: "temperature", value: localData.temperature },
{ id: "tint", value: localData.tint },
{ id: "vibrance", value: localData.vibrance },
],
[
localData.hsl.hue,
localData.hsl.luminance,
localData.hsl.saturation,
localData.temperature,
localData.tint,
localData.vibrance,
],
);
const applyPresetValue = (value: string) => {
if (value === "custom") {
@@ -126,7 +195,7 @@ export default function ColorAdjustNode({ id, data, selected, width }: NodeProps
selected={selected}
status={data._status}
statusMessage={data._statusMessage}
className="min-w-[240px] border-cyan-500/30"
className="min-w-[300px] border-cyan-500/30"
>
<Handle
type="target"
@@ -177,74 +246,36 @@ export default function ColorAdjustNode({ id, data, selected, width }: NodeProps
currentParams={localData}
/>
<div className="space-y-2 rounded-md border border-border/80 bg-background/70 p-2">
<SliderRow
label="Hue"
value={localData.hsl.hue}
min={-180}
max={180}
onChange={(value) =>
updateData((current) => ({
...current,
hsl: { ...current.hsl, hue: value },
preset: null,
}))
<ParameterSlider
id={`${id}-color-adjust-params`}
className="min-w-0 max-w-none"
sliders={sliderConfigs}
values={sliderValues}
fillClassName="bg-cyan-500/35 dark:bg-cyan-400/35"
handleClassName="bg-cyan-500 dark:bg-cyan-400"
trackClassName="bg-cyan-500/10 dark:bg-cyan-500/15"
onChange={(values) => {
const valueById = new Map(values.map((entry) => [entry.id, entry.value]));
updateData((current) => ({
...current,
hsl: {
...current.hsl,
hue: valueById.get("hue") ?? current.hsl.hue,
saturation: valueById.get("saturation") ?? current.hsl.saturation,
luminance: valueById.get("luminance") ?? current.hsl.luminance,
},
temperature: valueById.get("temperature") ?? current.temperature,
tint: valueById.get("tint") ?? current.tint,
vibrance: valueById.get("vibrance") ?? current.vibrance,
preset: null,
}));
}}
onAction={async (actionId) => {
if (actionId === "apply") {
queueSave();
}
/>
<SliderRow
label="Saturation"
value={localData.hsl.saturation}
min={-100}
max={100}
onChange={(value) =>
updateData((current) => ({
...current,
hsl: { ...current.hsl, saturation: value },
preset: null,
}))
}
/>
<SliderRow
label="Luminance"
value={localData.hsl.luminance}
min={-100}
max={100}
onChange={(value) =>
updateData((current) => ({
...current,
hsl: { ...current.hsl, luminance: value },
preset: null,
}))
}
/>
<SliderRow
label="Temperature"
value={localData.temperature}
min={-100}
max={100}
onChange={(value) =>
updateData((current) => ({ ...current, temperature: value, preset: null }))
}
/>
<SliderRow
label="Tint"
value={localData.tint}
min={-100}
max={100}
onChange={(value) =>
updateData((current) => ({ ...current, tint: value, preset: null }))
}
/>
<SliderRow
label="Vibrance"
value={localData.vibrance}
min={-100}
max={100}
onChange={(value) =>
updateData((current) => ({ ...current, vibrance: value, preset: null }))
}
/>
</div>
}}
/>
</div>
<Handle

111
components/canvas/nodes/curves-node.tsx
View File

@@ -10,9 +10,13 @@ import type { Id } from "@/convex/_generated/dataModel";
import { useAuthQuery } from "@/hooks/use-auth-query";
import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
import { SliderRow } from "@/components/canvas/nodes/adjustment-controls";
import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
import AdjustmentPreview from "@/components/canvas/nodes/adjustment-preview";
import {
ParameterSlider,
type SliderConfig,
type SliderValue,
} from "@/src/components/tool-ui/parameter-slider";
import {
cloneAdjustmentData,
DEFAULT_CURVES_DATA,
@@ -80,6 +84,42 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
};
const builtinOptions = useMemo(() => Object.entries(CURVE_PRESETS), []);
const sliderConfigs = useMemo<SliderConfig[]>(
() => [
{
id: "black-point",
label: "Black Point",
min: 0,
max: 255,
value: DEFAULT_CURVES_DATA.levels.blackPoint,
},
{
id: "white-point",
label: "White Point",
min: 0,
max: 255,
value: DEFAULT_CURVES_DATA.levels.whitePoint,
},
{
id: "gamma",
label: "Gamma",
min: 0.1,
max: 3,
step: 0.01,
precision: 2,
value: DEFAULT_CURVES_DATA.levels.gamma,
},
],
[],
);
const sliderValues = useMemo<SliderValue[]>(
() => [
{ id: "black-point", value: localData.levels.blackPoint },
{ id: "white-point", value: localData.levels.whitePoint },
{ id: "gamma", value: localData.levels.gamma },
],
[localData.levels.blackPoint, localData.levels.gamma, localData.levels.whitePoint],
);
const applyPresetValue = (value: string) => {
if (value === "custom") {
@@ -127,7 +167,7 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
selected={selected}
status={data._status}
statusMessage={data._statusMessage}
className="min-w-[240px] border-emerald-500/30"
className="min-w-[300px] border-emerald-500/30"
>
<Handle
type="target"
@@ -178,48 +218,33 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
currentParams={localData}
/>
<div className="space-y-2 rounded-md border border-border/80 bg-background/70 p-2">
<SliderRow
label="Black Point"
value={localData.levels.blackPoint}
min={0}
max={255}
onChange={(value) =>
updateData((current) => ({
...current,
levels: { ...current.levels, blackPoint: value },
preset: null,
}))
<ParameterSlider
id={`${id}-curves-params`}
className="min-w-0 max-w-none"
sliders={sliderConfigs}
values={sliderValues}
fillClassName="bg-emerald-500/35 dark:bg-emerald-400/35"
handleClassName="bg-emerald-500 dark:bg-emerald-400"
trackClassName="bg-emerald-500/10 dark:bg-emerald-500/15"
onChange={(values) => {
const valueById = new Map(values.map((entry) => [entry.id, entry.value]));
updateData((current) => ({
...current,
levels: {
...current.levels,
blackPoint: valueById.get("black-point") ?? current.levels.blackPoint,
whitePoint: valueById.get("white-point") ?? current.levels.whitePoint,
gamma: valueById.get("gamma") ?? current.levels.gamma,
},
preset: null,
}));
}}
onAction={async (actionId) => {
if (actionId === "apply") {
queueSave();
}
/>
<SliderRow
label="White Point"
value={localData.levels.whitePoint}
min={0}
max={255}
onChange={(value) =>
updateData((current) => ({
...current,
levels: { ...current.levels, whitePoint: value },
preset: null,
}))
}
/>
<SliderRow
label="Gamma"
value={localData.levels.gamma}
min={0.1}
max={3}
step={0.01}
onChange={(value) =>
updateData((current) => ({
...current,
levels: { ...current.levels, gamma: value },
preset: null,
}))
}
/>
</div>
}}
/>
</div>
<Handle

130
components/canvas/nodes/detail-adjust-node.tsx
View File

@@ -10,9 +10,13 @@ import type { Id } from "@/convex/_generated/dataModel";
import { useAuthQuery } from "@/hooks/use-auth-query";
import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
import { SliderRow } from "@/components/canvas/nodes/adjustment-controls";
import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
import AdjustmentPreview from "@/components/canvas/nodes/adjustment-preview";
import {
ParameterSlider,
type SliderConfig,
type SliderValue,
} from "@/src/components/tool-ui/parameter-slider";
import {
cloneAdjustmentData,
DEFAULT_DETAIL_ADJUST_DATA,
@@ -80,6 +84,82 @@ export default function DetailAdjustNode({ id, data, selected, width }: NodeProp
};
const builtinOptions = useMemo(() => Object.entries(DETAIL_PRESETS), []);
const sliderConfigs = useMemo<SliderConfig[]>(
() => [
{
id: "sharpen-amount",
label: "Sharpen",
min: 0,
max: 500,
value: DEFAULT_DETAIL_ADJUST_DATA.sharpen.amount,
},
{
id: "sharpen-radius",
label: "Radius",
min: 0.5,
max: 5,
step: 0.01,
precision: 2,
value: DEFAULT_DETAIL_ADJUST_DATA.sharpen.radius,
},
{
id: "sharpen-threshold",
label: "Threshold",
min: 0,
max: 255,
value: DEFAULT_DETAIL_ADJUST_DATA.sharpen.threshold,
},
{
id: "clarity",
label: "Clarity",
min: -100,
max: 100,
value: DEFAULT_DETAIL_ADJUST_DATA.clarity,
},
{
id: "denoise-luminance",
label: "Denoise Luma",
min: 0,
max: 100,
value: DEFAULT_DETAIL_ADJUST_DATA.denoise.luminance,
},
{
id: "denoise-color",
label: "Denoise Color",
min: 0,
max: 100,
value: DEFAULT_DETAIL_ADJUST_DATA.denoise.color,
},
{
id: "grain-amount",
label: "Grain",
min: 0,
max: 100,
value: DEFAULT_DETAIL_ADJUST_DATA.grain.amount,
},
],
[],
);
const sliderValues = useMemo<SliderValue[]>(
() => [
{ id: "sharpen-amount", value: localData.sharpen.amount },
{ id: "sharpen-radius", value: localData.sharpen.radius },
{ id: "sharpen-threshold", value: localData.sharpen.threshold },
{ id: "clarity", value: localData.clarity },
{ id: "denoise-luminance", value: localData.denoise.luminance },
{ id: "denoise-color", value: localData.denoise.color },
{ id: "grain-amount", value: localData.grain.amount },
],
[
localData.clarity,
localData.denoise.color,
localData.denoise.luminance,
localData.grain.amount,
localData.sharpen.amount,
localData.sharpen.radius,
localData.sharpen.threshold,
],
);
const applyPresetValue = (value: string) => {
if (value === "custom") {
@@ -126,7 +206,7 @@ export default function DetailAdjustNode({ id, data, selected, width }: NodeProp
selected={selected}
status={data._status}
statusMessage={data._statusMessage}
className="min-w-[240px] border-indigo-500/30"
className="min-w-[300px] border-indigo-500/30"
>
<Handle
type="target"
@@ -177,15 +257,43 @@ export default function DetailAdjustNode({ id, data, selected, width }: NodeProp
currentParams={localData}
/>
<div className="space-y-2 rounded-md border border-border/80 bg-background/70 p-2">
<SliderRow label="Sharpen" value={localData.sharpen.amount} min={0} max={500} onChange={(value) => updateData((current) => ({ ...current, sharpen: { ...current.sharpen, amount: value }, preset: null }))} />
<SliderRow label="Radius" value={localData.sharpen.radius} min={0.5} max={5} step={0.01} onChange={(value) => updateData((current) => ({ ...current, sharpen: { ...current.sharpen, radius: value }, preset: null }))} />
<SliderRow label="Threshold" value={localData.sharpen.threshold} min={0} max={255} onChange={(value) => updateData((current) => ({ ...current, sharpen: { ...current.sharpen, threshold: value }, preset: null }))} />
<SliderRow label="Clarity" value={localData.clarity} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, clarity: value, preset: null }))} />
<SliderRow label="Denoise Luma" value={localData.denoise.luminance} min={0} max={100} onChange={(value) => updateData((current) => ({ ...current, denoise: { ...current.denoise, luminance: value }, preset: null }))} />
<SliderRow label="Denoise Color" value={localData.denoise.color} min={0} max={100} onChange={(value) => updateData((current) => ({ ...current, denoise: { ...current.denoise, color: value }, preset: null }))} />
<SliderRow label="Grain" value={localData.grain.amount} min={0} max={100} onChange={(value) => updateData((current) => ({ ...current, grain: { ...current.grain, amount: value }, preset: null }))} />
</div>
<ParameterSlider
id={`${id}-detail-adjust-params`}
className="min-w-0 max-w-none"
sliders={sliderConfigs}
values={sliderValues}
fillClassName="bg-indigo-500/35 dark:bg-indigo-400/35"
handleClassName="bg-indigo-500 dark:bg-indigo-400"
trackClassName="bg-indigo-500/10 dark:bg-indigo-500/15"
onChange={(values) => {
const valueById = new Map(values.map((entry) => [entry.id, entry.value]));
updateData((current) => ({
...current,
sharpen: {
...current.sharpen,
amount: valueById.get("sharpen-amount") ?? current.sharpen.amount,
radius: valueById.get("sharpen-radius") ?? current.sharpen.radius,
threshold: valueById.get("sharpen-threshold") ?? current.sharpen.threshold,
},
clarity: valueById.get("clarity") ?? current.clarity,
denoise: {
...current.denoise,
luminance: valueById.get("denoise-luminance") ?? current.denoise.luminance,
color: valueById.get("denoise-color") ?? current.denoise.color,
},
grain: {
...current.grain,
amount: valueById.get("grain-amount") ?? current.grain.amount,
},
preset: null,
}));
}}
onAction={async (actionId) => {
if (actionId === "apply") {
queueSave();
}
}}
/>
</div>
<Handle

137
components/canvas/nodes/light-adjust-node.tsx
View File

@@ -10,9 +10,13 @@ import type { Id } from "@/convex/_generated/dataModel";
import { useAuthQuery } from "@/hooks/use-auth-query";
import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
import { SliderRow } from "@/components/canvas/nodes/adjustment-controls";
import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
import AdjustmentPreview from "@/components/canvas/nodes/adjustment-preview";
import {
ParameterSlider,
type SliderConfig,
type SliderValue,
} from "@/src/components/tool-ui/parameter-slider";
import {
cloneAdjustmentData,
DEFAULT_LIGHT_ADJUST_DATA,
@@ -80,6 +84,93 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
};
const builtinOptions = useMemo(() => Object.entries(LIGHT_PRESETS), []);
const sliderConfigs = useMemo<SliderConfig[]>(
() => [
{
id: "brightness",
label: "Brightness",
min: -100,
max: 100,
value: DEFAULT_LIGHT_ADJUST_DATA.brightness,
},
{
id: "contrast",
label: "Contrast",
min: -100,
max: 100,
value: DEFAULT_LIGHT_ADJUST_DATA.contrast,
},
{
id: "exposure",
label: "Exposure",
min: -5,
max: 5,
step: 0.01,
precision: 2,
value: DEFAULT_LIGHT_ADJUST_DATA.exposure,
},
{
id: "highlights",
label: "Highlights",
min: -100,
max: 100,
value: DEFAULT_LIGHT_ADJUST_DATA.highlights,
},
{
id: "shadows",
label: "Shadows",
min: -100,
max: 100,
value: DEFAULT_LIGHT_ADJUST_DATA.shadows,
},
{
id: "whites",
label: "Whites",
min: -100,
max: 100,
value: DEFAULT_LIGHT_ADJUST_DATA.whites,
},
{
id: "blacks",
label: "Blacks",
min: -100,
max: 100,
value: DEFAULT_LIGHT_ADJUST_DATA.blacks,
},
{
id: "vignette-amount",
label: "Vignette",
min: 0,
max: 1,
step: 0.01,
precision: 2,
value: DEFAULT_LIGHT_ADJUST_DATA.vignette.amount,
},
],
[],
);
const sliderValues = useMemo<SliderValue[]>(
() => [
{ id: "brightness", value: localData.brightness },
{ id: "contrast", value: localData.contrast },
{ id: "exposure", value: localData.exposure },
{ id: "highlights", value: localData.highlights },
{ id: "shadows", value: localData.shadows },
{ id: "whites", value: localData.whites },
{ id: "blacks", value: localData.blacks },
{ id: "vignette-amount", value: localData.vignette.amount },
],
[
localData.blacks,
localData.brightness,
localData.contrast,
localData.exposure,
localData.highlights,
localData.shadows,
localData.vignette.amount,
localData.whites,
],
);
const applyPresetValue = (value: string) => {
if (value === "custom") {
@@ -126,7 +217,7 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
selected={selected}
status={data._status}
statusMessage={data._statusMessage}
className="min-w-[240px] border-amber-500/30"
className="min-w-[300px] border-amber-500/30"
>
<Handle
type="target"
@@ -177,16 +268,38 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
currentParams={localData}
/>
<div className="space-y-2 rounded-md border border-border/80 bg-background/70 p-2">
<SliderRow label="Brightness" value={localData.brightness} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, brightness: value, preset: null }))} />
<SliderRow label="Contrast" value={localData.contrast} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, contrast: value, preset: null }))} />
<SliderRow label="Exposure" value={localData.exposure} min={-5} max={5} step={0.01} onChange={(value) => updateData((current) => ({ ...current, exposure: value, preset: null }))} />
<SliderRow label="Highlights" value={localData.highlights} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, highlights: value, preset: null }))} />
<SliderRow label="Shadows" value={localData.shadows} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, shadows: value, preset: null }))} />
<SliderRow label="Whites" value={localData.whites} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, whites: value, preset: null }))} />
<SliderRow label="Blacks" value={localData.blacks} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, blacks: value, preset: null }))} />
<SliderRow label="Vignette" value={localData.vignette.amount} min={0} max={1} step={0.01} onChange={(value) => updateData((current) => ({ ...current, vignette: { ...current.vignette, amount: value }, preset: null }))} />
</div>
<ParameterSlider
id={`${id}-light-adjust-params`}
className="min-w-0 max-w-none"
sliders={sliderConfigs}
values={sliderValues}
fillClassName="bg-amber-500/35 dark:bg-amber-400/35"
handleClassName="bg-amber-500 dark:bg-amber-400"
trackClassName="bg-amber-500/10 dark:bg-amber-500/15"
onChange={(values) => {
const valueById = new Map(values.map((entry) => [entry.id, entry.value]));
updateData((current) => ({
...current,
brightness: valueById.get("brightness") ?? current.brightness,
contrast: valueById.get("contrast") ?? current.contrast,
exposure: valueById.get("exposure") ?? current.exposure,
highlights: valueById.get("highlights") ?? current.highlights,
shadows: valueById.get("shadows") ?? current.shadows,
whites: valueById.get("whites") ?? current.whites,
blacks: valueById.get("blacks") ?? current.blacks,
vignette: {
...current.vignette,
amount: valueById.get("vignette-amount") ?? current.vignette.amount,
},
preset: null,
}));
}}
onAction={async (actionId) => {
if (actionId === "apply") {
queueSave();
}
}}
/>
</div>
<Handle

2
components/ui/button.tsx
View File

@@ -25,7 +25,7 @@ const buttonVariants = cva(
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
icon: "size-8",
"icon-xs":
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",

49
components/ui/slider.tsx
View File

@@ -1,38 +1,59 @@
"use client";
"use client"
import * as React from "react";
import { Slider as SliderPrimitive } from "radix-ui";
import * as React from "react"
import { Slider as SliderPrimitive } from "radix-ui"
import { cn } from "@/lib/utils";
import { cn } from "@/lib/utils"
function Slider({
className,
defaultValue,
value,
min = 0,
max = 100,
...props
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
const _values = React.useMemo(
() =>
Array.isArray(value)
? value
: Array.isArray(defaultValue)
? defaultValue
: [min, max],
[value, defaultValue, min, max]
)
function Slider({ className, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>) {
return (
<SliderPrimitive.Root
data-slot="slider"
defaultValue={defaultValue}
value={value}
min={min}
max={max}
className={cn(
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50",
className,
"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
className
)}
{...props}
>
<SliderPrimitive.Track
data-slot="slider-track"
className="relative h-2 w-full grow overflow-hidden rounded-full bg-muted"
className="relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
>
<SliderPrimitive.Range
data-slot="slider-range"
className="absolute h-full bg-primary"
className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
/>
</SliderPrimitive.Track>
{Array.from({ length: props.value?.length ?? props.defaultValue?.length ?? 1 }).map((_, index) => (
{Array.from({ length: _values.length }, (_, index) => (
<SliderPrimitive.Thumb
key={index}
data-slot="slider-thumb"
className="block size-4 rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
key={index}
className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
/>
))}
</SliderPrimitive.Root>
);
)
}
export { Slider };
export { Slider }

16
lib/canvas-node-templates.ts
View File

@@ -65,29 +65,29 @@ export const CANVAS_NODE_TEMPLATES = [
{
type: "curves",
label: "Kurven",
width: 280,
height: 460,
width: 320,
height: 660,
defaultData: {},
},
{
type: "color-adjust",
label: "Farbe",
width: 280,
height: 560,
width: 320,
height: 800,
defaultData: {},
},
{
type: "light-adjust",
label: "Licht",
width: 280,
height: 620,
width: 320,
height: 920,
defaultData: {},
},
{
type: "detail-adjust",
label: "Detail",
width: 280,
height: 620,
width: 320,
height: 880,
defaultData: {},
},
{

8
lib/canvas-utils.ts
View File

@@ -244,10 +244,10 @@ export const NODE_DEFAULTS: Record<
compare: { width: 500, height: 380, data: {} },
asset: { width: 260, height: 240, data: {} },
video: { width: 320, height: 180, data: {} },
curves: { width: 280, height: 460, data: DEFAULT_CURVES_DATA },
"color-adjust": { width: 280, height: 560, data: DEFAULT_COLOR_ADJUST_DATA },
"light-adjust": { width: 280, height: 620, data: DEFAULT_LIGHT_ADJUST_DATA },
"detail-adjust": { width: 280, height: 620, data: DEFAULT_DETAIL_ADJUST_DATA },
curves: { width: 320, height: 660, data: DEFAULT_CURVES_DATA },
"color-adjust": { width: 320, height: 800, data: DEFAULT_COLOR_ADJUST_DATA },
"light-adjust": { width: 320, height: 920, data: DEFAULT_LIGHT_ADJUST_DATA },
"detail-adjust": { width: 320, height: 880, data: DEFAULT_DETAIL_ADJUST_DATA },
render: {
width: 300,
height: 420,