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.
25 lines
837 B
TypeScript
25 lines
837 B
TypeScript
import { Hand } from "@phosphor-icons/react";
|
|
import { BottomControlDivider } from "./Divider";
|
|
import { bottomControlIconSlotClass, bottomControlLabelClass, bottomControlMenuClass, bottomControlValueClass } from "./styles";
|
|
|
|
export type PanControlsProps = {
|
|
x: number;
|
|
y: number;
|
|
};
|
|
|
|
export function PanControls({ x, y }: PanControlsProps) {
|
|
return (
|
|
<div className={bottomControlMenuClass()}>
|
|
<span className={bottomControlIconSlotClass()}>
|
|
<Hand size={24} weight="regular" />
|
|
</span>
|
|
<BottomControlDivider />
|
|
<span className={bottomControlLabelClass()}>X</span>
|
|
<span className={bottomControlValueClass()}>{x}</span>
|
|
<BottomControlDivider />
|
|
<span className={bottomControlLabelClass()}>Y</span>
|
|
<span className={bottomControlValueClass()}>{y}</span>
|
|
</div>
|
|
);
|
|
}
|