feat(paint-slots): scene-material library panel + Colors swatches
Phase 3 paint UI. - Extract reusable MaterialPropertiesEditor (shared by the custom active- paint editor and the scene-material editor). - Curated Colors swatch row in the picker; catalog presets fork-on-tweak by seeding a custom material from the entry's previewColor. - Scene materials section in MaterialPaintPanel (shown once any exist): list with swatch, inline rename, 'used by N parts', paint-with, edit (live-propagates to every referencing part via the renderer's sceneMaterials dep), duplicate, delete. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Wassim SAMAD
co-authored by
Claude Fable 5
Claude Fable 5
parent
7afb286e47
commit
b3d840a39b
@@ -11,6 +11,8 @@ import {
|
||||
import useEditor from './../../../store/use-editor'
|
||||
import { Button } from '../primitives/button'
|
||||
import { MaterialPicker } from './material-picker'
|
||||
import { PanelSection } from './panel-section'
|
||||
import { SceneMaterialList } from './scene-material-list'
|
||||
|
||||
/**
|
||||
* Material picker for paint mode. Embedders render this wherever paint controls
|
||||
@@ -27,6 +29,7 @@ export function MaterialPaintPanel() {
|
||||
const setPaintEraser = useEditor((state) => state.setPaintEraser)
|
||||
const selectedIds = useViewer((state) => state.selection.selectedIds)
|
||||
const nodes = useScene((state) => state.nodes)
|
||||
const materialCount = useScene((state) => Object.keys(state.materials).length)
|
||||
const selectedId = selectedIds.length === 1 ? (selectedIds[0] ?? null) : null
|
||||
const selectedNode = selectedId ? nodes[selectedId as AnyNodeId] : null
|
||||
const canResetSelection =
|
||||
@@ -78,6 +81,11 @@ export function MaterialPaintPanel() {
|
||||
selectedMaterialPreset={activePaintMaterial?.materialPreset}
|
||||
value={activePaintMaterial?.material}
|
||||
/>
|
||||
{materialCount > 0 ? (
|
||||
<PanelSection title="Scene materials">
|
||||
<SceneMaterialList />
|
||||
</PanelSection>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
toLibraryMaterialRef,
|
||||
} from '@pascal-app/core'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { CURATED_COLORS } from '../../../lib/colors'
|
||||
import useEditor from '../../../store/use-editor'
|
||||
|
||||
type MaterialPickerProps = {
|
||||
@@ -55,7 +56,8 @@ export function MaterialPicker({
|
||||
return
|
||||
}
|
||||
|
||||
const catalogId = getLibraryMaterialIdFromRef(selectedMaterialPreset) ?? value?.id ?? undefined
|
||||
const catalogId =
|
||||
getLibraryMaterialIdFromRef(selectedMaterialPreset) ?? value?.id ?? undefined
|
||||
const selectedCatalogEntry = getCatalogMaterialById(catalogId)
|
||||
if (selectedCatalogEntry?.category) {
|
||||
setSelectedCategory(selectedCatalogEntry.category)
|
||||
@@ -64,6 +66,9 @@ export function MaterialPicker({
|
||||
|
||||
const selectedCatalogId =
|
||||
selectedMaterialPreset ?? (value?.id ? toLibraryMaterialRef(value.id) : undefined)
|
||||
const selectedCatalogMaterialId = getLibraryMaterialIdFromRef(selectedCatalogId) ?? undefined
|
||||
const selectedCatalogEntry = getCatalogMaterialById(selectedCatalogMaterialId)
|
||||
const selectedColor = value?.properties?.color.toLowerCase()
|
||||
|
||||
const handleCatalogSelect = (materialId: string) => {
|
||||
if (disabled) return
|
||||
@@ -72,6 +77,23 @@ export function MaterialPicker({
|
||||
onSelectMaterialPreset?.(toLibraryMaterialRef(materialId))
|
||||
}
|
||||
|
||||
const handleColorSelect = (hex: string) => {
|
||||
if (disabled) return
|
||||
setShowCustom(false)
|
||||
setPaintPanelOpen(false)
|
||||
onChange?.({
|
||||
preset: 'custom',
|
||||
properties: {
|
||||
color: hex,
|
||||
roughness: 0.6,
|
||||
metalness: 0,
|
||||
opacity: 1,
|
||||
transparent: false,
|
||||
side: 'front',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const container = categoryScrollRef.current
|
||||
if (!container) return
|
||||
@@ -97,10 +119,13 @@ export function MaterialPicker({
|
||||
if (disabled) return
|
||||
setShowCustom(true)
|
||||
setPaintPanelOpen(true)
|
||||
const forkColor = selectedMaterialPreset
|
||||
? (selectedCatalogEntry?.previewColor ?? '#ffffff')
|
||||
: '#ffffff'
|
||||
onChange?.({
|
||||
preset: 'custom',
|
||||
properties: {
|
||||
color: value?.properties?.color || '#ffffff',
|
||||
color: value?.properties?.color || forkColor,
|
||||
roughness: value?.properties?.roughness ?? 0.5,
|
||||
metalness: value?.properties?.metalness ?? 0,
|
||||
opacity: value?.properties?.opacity ?? 1,
|
||||
@@ -114,6 +139,33 @@ export function MaterialPicker({
|
||||
<div className={`min-w-0 space-y-3 ${disabled ? 'pointer-events-none opacity-50' : ''}`}>
|
||||
{(catalogItems.length > 0 || onChange) && (
|
||||
<div className="min-w-0 space-y-1">
|
||||
{onChange ? (
|
||||
<div className="space-y-1.5">
|
||||
<div className="font-medium text-[11px] text-muted-foreground uppercase tracking-[0.12em]">
|
||||
Colors
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{CURATED_COLORS.map((color) => {
|
||||
const isSelected = selectedColor === color.hex.toLowerCase()
|
||||
return (
|
||||
<button
|
||||
aria-label={color.name}
|
||||
className={`h-7 w-7 rounded-md border transition-all ${
|
||||
isSelected
|
||||
? 'border-blue-500 ring-2 ring-blue-500/30'
|
||||
: 'border-gray-300 hover:border-gray-400'
|
||||
}`}
|
||||
key={color.hex}
|
||||
onClick={() => handleColorSelect(color.hex)}
|
||||
style={{ backgroundColor: color.hex }}
|
||||
title={color.name}
|
||||
type="button"
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div
|
||||
className="w-full max-w-full overflow-x-auto overflow-y-hidden"
|
||||
ref={categoryScrollRef}
|
||||
@@ -168,7 +220,10 @@ export function MaterialPicker({
|
||||
src={item.previewThumbnailUrl}
|
||||
/>
|
||||
) : item.previewColor ? (
|
||||
<div className="h-full w-full" style={{ backgroundColor: item.previewColor }} />
|
||||
<div
|
||||
className="h-full w-full"
|
||||
style={{ backgroundColor: item.previewColor }}
|
||||
/>
|
||||
) : (
|
||||
<div className="h-full w-full bg-gray-100" />
|
||||
)}
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
'use client'
|
||||
|
||||
import type { MaterialProperties, MaterialSchema } from '@pascal-app/core'
|
||||
import { Input } from '../primitives/input'
|
||||
|
||||
const DEFAULT_MATERIAL_PROPERTIES: MaterialProperties = {
|
||||
color: '#ffffff',
|
||||
roughness: 0.5,
|
||||
metalness: 0,
|
||||
opacity: 1,
|
||||
transparent: false,
|
||||
side: 'front',
|
||||
}
|
||||
|
||||
export function MaterialPropertiesEditor({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: MaterialSchema
|
||||
onChange: (next: MaterialSchema) => void
|
||||
}) {
|
||||
const currentProps = value.properties ?? DEFAULT_MATERIAL_PROPERTIES
|
||||
|
||||
const updateMaterial = (
|
||||
updates: Partial<MaterialProperties>,
|
||||
nextTransparent = currentProps.transparent,
|
||||
) => {
|
||||
onChange({
|
||||
...value,
|
||||
preset: value.preset ?? 'custom',
|
||||
properties: {
|
||||
...currentProps,
|
||||
...updates,
|
||||
transparent: nextTransparent,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<label className="block font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
|
||||
Color
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
className="h-10 w-14 cursor-pointer rounded-md border border-input bg-transparent"
|
||||
onChange={(e) => updateMaterial({ color: e.target.value })}
|
||||
type="color"
|
||||
value={currentProps.color}
|
||||
/>
|
||||
<Input
|
||||
onChange={(e) => updateMaterial({ color: e.target.value })}
|
||||
value={currentProps.color}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
|
||||
Roughness
|
||||
</label>
|
||||
<span className="font-mono text-muted-foreground text-xs">
|
||||
{currentProps.roughness.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
|
||||
max={1}
|
||||
min={0}
|
||||
onChange={(e) => updateMaterial({ roughness: Number.parseFloat(e.target.value) })}
|
||||
step={0.01}
|
||||
type="range"
|
||||
value={currentProps.roughness}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
|
||||
Metalness
|
||||
</label>
|
||||
<span className="font-mono text-muted-foreground text-xs">
|
||||
{currentProps.metalness.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
|
||||
max={1}
|
||||
min={0}
|
||||
onChange={(e) => updateMaterial({ metalness: Number.parseFloat(e.target.value) })}
|
||||
step={0.01}
|
||||
type="range"
|
||||
value={currentProps.metalness}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
|
||||
Opacity
|
||||
</label>
|
||||
<span className="font-mono text-muted-foreground text-xs">
|
||||
{currentProps.opacity.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
|
||||
max={1}
|
||||
min={0}
|
||||
onChange={(e) => {
|
||||
const opacity = Number.parseFloat(e.target.value)
|
||||
updateMaterial({ opacity }, opacity < 1 || currentProps.transparent)
|
||||
}}
|
||||
step={0.01}
|
||||
type="range"
|
||||
value={currentProps.opacity}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
|
||||
Side
|
||||
</label>
|
||||
<select
|
||||
className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30"
|
||||
onChange={(e) =>
|
||||
updateMaterial({ side: e.target.value as 'front' | 'back' | 'double' })
|
||||
}
|
||||
value={currentProps.side}
|
||||
>
|
||||
<option value="front">Front</option>
|
||||
<option value="back">Back</option>
|
||||
<option value="double">Double</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
generateSceneMaterialId,
|
||||
type MaterialSchema,
|
||||
type SceneMaterial,
|
||||
type SceneMaterialId,
|
||||
toSceneMaterialRef,
|
||||
useScene,
|
||||
} from '@pascal-app/core'
|
||||
import { Copy, Paintbrush, Pencil, Trash2 } from 'lucide-react'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import useEditor from '../../../store/use-editor'
|
||||
import { Button } from '../primitives/button'
|
||||
import { Input } from '../primitives/input'
|
||||
import { MaterialPropertiesEditor } from './material-properties-editor'
|
||||
|
||||
type SlotRecord = Record<string, string | undefined>
|
||||
|
||||
function getSlotRecord(node: unknown): SlotRecord | null {
|
||||
if (!node || typeof node !== 'object' || !('slots' in node)) return null
|
||||
const slots = (node as { slots?: unknown }).slots
|
||||
if (!slots || typeof slots !== 'object' || Array.isArray(slots)) return null
|
||||
return slots as SlotRecord
|
||||
}
|
||||
|
||||
export function SceneMaterialList() {
|
||||
const materials = useScene((state) => state.materials)
|
||||
const nodes = useScene((state) => state.nodes)
|
||||
const addSceneMaterial = useScene((state) => state.addSceneMaterial)
|
||||
const updateSceneMaterial = useScene((state) => state.updateSceneMaterial)
|
||||
const removeSceneMaterial = useScene((state) => state.removeSceneMaterial)
|
||||
const activePaintTarget = useEditor((state) => state.activePaintTarget)
|
||||
const setActivePaintMaterial = useEditor((state) => state.setActivePaintMaterial)
|
||||
|
||||
const materialEntries = useMemo(
|
||||
() => Object.entries(materials) as [SceneMaterialId, SceneMaterial][],
|
||||
[materials],
|
||||
)
|
||||
|
||||
const usageCounts = useMemo(() => {
|
||||
const counts = new Map<SceneMaterialId, number>()
|
||||
const refToId = new Map<string, SceneMaterialId>()
|
||||
|
||||
for (const [id] of materialEntries) {
|
||||
counts.set(id, 0)
|
||||
refToId.set(toSceneMaterialRef(id), id)
|
||||
}
|
||||
|
||||
for (const node of Object.values(nodes)) {
|
||||
const slots = getSlotRecord(node)
|
||||
if (!slots) continue
|
||||
|
||||
for (const value of Object.values(slots)) {
|
||||
if (typeof value !== 'string') continue
|
||||
const materialId = refToId.get(value)
|
||||
if (!materialId) continue
|
||||
counts.set(materialId, (counts.get(materialId) ?? 0) + 1)
|
||||
}
|
||||
}
|
||||
|
||||
return counts
|
||||
}, [materialEntries, nodes])
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{materialEntries.map(([id, sceneMaterial]) => (
|
||||
<SceneMaterialRow
|
||||
addSceneMaterial={addSceneMaterial}
|
||||
activePaintTarget={activePaintTarget}
|
||||
id={id}
|
||||
key={id}
|
||||
removeSceneMaterial={removeSceneMaterial}
|
||||
sceneMaterial={sceneMaterial}
|
||||
setActivePaintMaterial={setActivePaintMaterial}
|
||||
updateSceneMaterial={updateSceneMaterial}
|
||||
usageCount={usageCounts.get(id) ?? 0}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SceneMaterialRow({
|
||||
id,
|
||||
sceneMaterial,
|
||||
usageCount,
|
||||
activePaintTarget,
|
||||
addSceneMaterial,
|
||||
updateSceneMaterial,
|
||||
removeSceneMaterial,
|
||||
setActivePaintMaterial,
|
||||
}: {
|
||||
id: SceneMaterialId
|
||||
sceneMaterial: SceneMaterial
|
||||
usageCount: number
|
||||
activePaintTarget: ReturnType<typeof useEditor.getState>['activePaintTarget']
|
||||
addSceneMaterial: ReturnType<typeof useScene.getState>['addSceneMaterial']
|
||||
updateSceneMaterial: ReturnType<typeof useScene.getState>['updateSceneMaterial']
|
||||
removeSceneMaterial: ReturnType<typeof useScene.getState>['removeSceneMaterial']
|
||||
setActivePaintMaterial: ReturnType<typeof useEditor.getState>['setActivePaintMaterial']
|
||||
}) {
|
||||
const [isEditingMaterial, setIsEditingMaterial] = useState(false)
|
||||
const [draftName, setDraftName] = useState(sceneMaterial.name)
|
||||
const swatchColor = sceneMaterial.material.properties?.color ?? '#ffffff'
|
||||
|
||||
useEffect(() => {
|
||||
setDraftName(sceneMaterial.name)
|
||||
}, [sceneMaterial.name])
|
||||
|
||||
const commitName = () => {
|
||||
const nextName = draftName.trim()
|
||||
if (!nextName) {
|
||||
setDraftName(sceneMaterial.name)
|
||||
return
|
||||
}
|
||||
if (nextName !== sceneMaterial.name) {
|
||||
updateSceneMaterial(id, { name: nextName })
|
||||
}
|
||||
}
|
||||
|
||||
const duplicateMaterial = () => {
|
||||
addSceneMaterial({
|
||||
id: generateSceneMaterialId(),
|
||||
name: `${sceneMaterial.name} copy`,
|
||||
material: structuredClone(sceneMaterial.material) as MaterialSchema,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-md border border-border/60 bg-background/40 p-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="h-8 w-8 shrink-0 rounded-md border border-border/70"
|
||||
style={{ backgroundColor: swatchColor }}
|
||||
/>
|
||||
<Input
|
||||
className="h-8 px-2 text-sm"
|
||||
onBlur={commitName}
|
||||
onChange={(e) => setDraftName(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.currentTarget.blur()
|
||||
}
|
||||
if (e.key === 'Escape') {
|
||||
setDraftName(sceneMaterial.name)
|
||||
e.currentTarget.blur()
|
||||
}
|
||||
}}
|
||||
value={draftName}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 flex items-center justify-between gap-2">
|
||||
<span className="text-muted-foreground text-xs">
|
||||
Used by {usageCount} {usageCount === 1 ? 'part' : 'parts'}
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
aria-label="Paint with"
|
||||
onClick={() =>
|
||||
setActivePaintMaterial({
|
||||
material: sceneMaterial.material,
|
||||
sourceTarget: activePaintTarget,
|
||||
})
|
||||
}
|
||||
size="icon-sm"
|
||||
title="Paint with"
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
<Paintbrush />
|
||||
</Button>
|
||||
<Button
|
||||
aria-label="Edit"
|
||||
aria-pressed={isEditingMaterial}
|
||||
onClick={() => setIsEditingMaterial((value) => !value)}
|
||||
size="icon-sm"
|
||||
title="Edit"
|
||||
type="button"
|
||||
variant={isEditingMaterial ? 'default' : 'outline'}
|
||||
>
|
||||
<Pencil />
|
||||
</Button>
|
||||
<Button
|
||||
aria-label="Duplicate"
|
||||
onClick={duplicateMaterial}
|
||||
size="icon-sm"
|
||||
title="Duplicate"
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
<Copy />
|
||||
</Button>
|
||||
<Button
|
||||
aria-label="Delete"
|
||||
onClick={() => removeSceneMaterial(id)}
|
||||
size="icon-sm"
|
||||
title="Delete"
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isEditingMaterial ? (
|
||||
<div className="mt-3 border-border/60 border-t pt-3">
|
||||
<MaterialPropertiesEditor
|
||||
onChange={(material) => updateSceneMaterial(id, { material })}
|
||||
value={sceneMaterial.material}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,24 +1,10 @@
|
||||
'use client'
|
||||
|
||||
import useEditor from '../../../store/use-editor'
|
||||
import { MaterialPropertiesEditor } from '../controls/material-properties-editor'
|
||||
import { PanelSection } from '../controls/panel-section'
|
||||
import { Input } from '../primitives/input'
|
||||
import { PanelWrapper } from './panel-wrapper'
|
||||
|
||||
function buildDefaultCustomMaterial() {
|
||||
return {
|
||||
preset: 'custom' as const,
|
||||
properties: {
|
||||
color: '#ffffff',
|
||||
roughness: 0.5,
|
||||
metalness: 0,
|
||||
opacity: 1,
|
||||
transparent: false,
|
||||
side: 'front' as const,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export function PaintPanel() {
|
||||
const activePaintMaterial = useEditor((state) => state.activePaintMaterial)
|
||||
const activePaintTarget = useEditor((state) => state.activePaintTarget)
|
||||
@@ -32,131 +18,18 @@ export function PaintPanel() {
|
||||
|
||||
if (!customMaterial) return null
|
||||
|
||||
const currentProps = customMaterial.properties ?? buildDefaultCustomMaterial().properties
|
||||
|
||||
const updateCustomMaterial = (
|
||||
updates: Partial<typeof currentProps>,
|
||||
nextTransparent = currentProps.transparent,
|
||||
) => {
|
||||
return (
|
||||
<PanelWrapper onClose={() => setPaintPanelOpen(false)} title="Material" width={320}>
|
||||
<PanelSection title="Custom material">
|
||||
<MaterialPropertiesEditor
|
||||
onChange={(material) =>
|
||||
setActivePaintMaterial({
|
||||
material: {
|
||||
preset: 'custom',
|
||||
properties: {
|
||||
...currentProps,
|
||||
...updates,
|
||||
transparent: nextTransparent,
|
||||
},
|
||||
},
|
||||
material,
|
||||
sourceTarget: activePaintMaterial?.sourceTarget ?? activePaintTarget,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<PanelWrapper onClose={() => setPaintPanelOpen(false)} title="Material" width={320}>
|
||||
<PanelSection title="Custom Material">
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<label className="block font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
|
||||
Color
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
className="h-10 w-14 cursor-pointer rounded-md border border-input bg-transparent"
|
||||
onChange={(e) => updateCustomMaterial({ color: e.target.value })}
|
||||
type="color"
|
||||
value={currentProps.color}
|
||||
value={customMaterial}
|
||||
/>
|
||||
<Input
|
||||
onChange={(e) => updateCustomMaterial({ color: e.target.value })}
|
||||
value={currentProps.color}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
|
||||
Roughness
|
||||
</label>
|
||||
<span className="font-mono text-muted-foreground text-xs">
|
||||
{currentProps.roughness.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
|
||||
max={1}
|
||||
min={0}
|
||||
onChange={(e) =>
|
||||
updateCustomMaterial({ roughness: Number.parseFloat(e.target.value) })
|
||||
}
|
||||
step={0.01}
|
||||
type="range"
|
||||
value={currentProps.roughness}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
|
||||
Metalness
|
||||
</label>
|
||||
<span className="font-mono text-muted-foreground text-xs">
|
||||
{currentProps.metalness.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
|
||||
max={1}
|
||||
min={0}
|
||||
onChange={(e) =>
|
||||
updateCustomMaterial({ metalness: Number.parseFloat(e.target.value) })
|
||||
}
|
||||
step={0.01}
|
||||
type="range"
|
||||
value={currentProps.metalness}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
|
||||
Opacity
|
||||
</label>
|
||||
<span className="font-mono text-muted-foreground text-xs">
|
||||
{currentProps.opacity.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
className="h-2 w-full cursor-pointer appearance-none rounded-full bg-accent"
|
||||
max={1}
|
||||
min={0}
|
||||
onChange={(e) => {
|
||||
const opacity = Number.parseFloat(e.target.value)
|
||||
updateCustomMaterial({ opacity }, opacity < 1 || currentProps.transparent)
|
||||
}}
|
||||
step={0.01}
|
||||
type="range"
|
||||
value={currentProps.opacity}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block font-medium text-muted-foreground text-xs uppercase tracking-[0.12em]">
|
||||
Side
|
||||
</label>
|
||||
<select
|
||||
className="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30"
|
||||
onChange={(e) =>
|
||||
updateCustomMaterial({ side: e.target.value as 'front' | 'back' | 'double' })
|
||||
}
|
||||
value={currentProps.side}
|
||||
>
|
||||
<option value="front">Front</option>
|
||||
<option value="back">Back</option>
|
||||
<option value="double">Double</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</PanelSection>
|
||||
</PanelWrapper>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
export const CURATED_COLORS = [
|
||||
{ name: 'Warm white', hex: '#f5f1e8' },
|
||||
{ name: 'Soft linen', hex: '#e9ddcf' },
|
||||
{ name: 'Stone', hex: '#c8c2b8' },
|
||||
{ name: 'Clay beige', hex: '#b9a58f' },
|
||||
{ name: 'Greige', hex: '#9d9488' },
|
||||
{ name: 'Charcoal', hex: '#3c3c3a' },
|
||||
{ name: 'Mushroom', hex: '#a38f7b' },
|
||||
{ name: 'Terracotta', hex: '#b7654b' },
|
||||
{ name: 'Muted ochre', hex: '#c29b52' },
|
||||
{ name: 'Sage', hex: '#8d9b82' },
|
||||
{ name: 'Olive gray', hex: '#68715f' },
|
||||
{ name: 'Dusty blue', hex: '#7d91a3' },
|
||||
{ name: 'Slate teal', hex: '#4f7372' },
|
||||
{ name: 'Aubergine', hex: '#594354' },
|
||||
] as const
|
||||
Reference in New Issue
Block a user