e8073e6146
- Updated BottomControlsIsland for improved layout and styling. - Refactored LayersSheet to enhance usability and visual consistency. - Modified ToolOverlay for better tool selection experience. - Improved BrushControls with new ColorPicker and Slider components. - Enhanced PanControls and TransformControls for better user interaction. - Updated ZoomControls for consistent button sizes and styles. - Introduced new styles for bottom controls in styles.ts and index.css. - Added BottomControlColorPicker, BottomControlSelectMenu, and BottomControlSlider components for better modularity and reusability.
34 lines
889 B
TypeScript
34 lines
889 B
TypeScript
import type { CSSProperties } from "react";
|
|
|
|
export type BottomControlSliderProps = {
|
|
"aria-label": string;
|
|
min: number;
|
|
max: number;
|
|
value: number;
|
|
step?: number;
|
|
className?: string;
|
|
onValueChange: (value: number) => void;
|
|
};
|
|
|
|
type SliderStyle = CSSProperties & {
|
|
"--slider-progress": string;
|
|
};
|
|
|
|
export function BottomControlSlider({ min, max, value, step = 1, className = "", onValueChange, ...props }: BottomControlSliderProps) {
|
|
const progress = max === min ? 0 : ((value - min) / (max - min)) * 100;
|
|
|
|
return (
|
|
<input
|
|
{...props}
|
|
type="range"
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
value={value}
|
|
className={`bottom-control-slider ${className}`}
|
|
style={{ "--slider-progress": `${Math.max(0, Math.min(100, progress))}%` } as SliderStyle}
|
|
onChange={(event) => onValueChange(Number(event.target.value))}
|
|
/>
|
|
);
|
|
}
|