diff options
Diffstat (limited to 'apps/web/src/components/editor/panels/assets/views/settings.tsx')
| -rw-r--r-- | apps/web/src/components/editor/panels/assets/views/settings.tsx | 168 |
1 files changed, 0 insertions, 168 deletions
diff --git a/apps/web/src/components/editor/panels/assets/views/settings.tsx b/apps/web/src/components/editor/panels/assets/views/settings.tsx deleted file mode 100644 index d46e9d1f..00000000 --- a/apps/web/src/components/editor/panels/assets/views/settings.tsx +++ /dev/null @@ -1,168 +0,0 @@ -"use client"; - -import { PanelView } from "@/components/editor/panels/assets/views/base-view"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; -import { FPS_PRESETS } from "@/constants/project-constants"; -import { useEditor } from "@/hooks/use-editor"; -import { useEditorStore } from "@/stores/editor-store"; -import { dimensionToAspectRatio } from "@/utils/geometry"; -import { - Section, - SectionContent, - SectionHeader, - SectionTitle, -} from "@/components/editor/panels/properties/section"; -import { Label } from "@/components/ui/label"; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover"; - -const ORIGINAL_PRESET_VALUE = "original"; - -export function findPresetIndexByAspectRatio({ - presets, - targetAspectRatio, -}: { - presets: Array<{ width: number; height: number }>; - targetAspectRatio: string; -}) { - for (let index = 0; index < presets.length; index++) { - const preset = presets[index]; - const presetAspectRatio = dimensionToAspectRatio({ - width: preset.width, - height: preset.height, - }); - if (presetAspectRatio === targetAspectRatio) { - return index; - } - } - return -1; -} - -export function SettingsView() { - return ( - <PanelView contentClassName="px-0" hideHeader> - <div className="flex flex-col"> - <Section showTopBorder={false}> - <SectionContent> - <ProjectInfoContent /> - </SectionContent> - </Section> - <Popover> - <Section className="cursor-pointer"> - <PopoverTrigger asChild> - <div> - <SectionHeader - trailing={<div className="size-4 rounded-sm bg-red-500" />} - > - <SectionTitle>Background</SectionTitle> - </SectionHeader> - </div> - </PopoverTrigger> - </Section> - <PopoverContent> - <div className="size-4 rounded-sm bg-red-500" /> - </PopoverContent> - </Popover> - </div> - </PanelView> - ); -} - -function ProjectInfoContent() { - const editor = useEditor(); - const activeProject = editor.project.getActive(); - const { canvasPresets } = useEditorStore(); - - const currentCanvasSize = activeProject.settings.canvasSize; - const currentAspectRatio = dimensionToAspectRatio(currentCanvasSize); - const originalCanvasSize = activeProject.settings.originalCanvasSize ?? null; - const presetIndex = findPresetIndexByAspectRatio({ - presets: canvasPresets, - targetAspectRatio: currentAspectRatio, - }); - const selectedPresetValue = - presetIndex !== -1 ? presetIndex.toString() : ORIGINAL_PRESET_VALUE; - - const handleAspectRatioChange = ({ value }: { value: string }) => { - if (value === ORIGINAL_PRESET_VALUE) { - const canvasSize = originalCanvasSize ?? currentCanvasSize; - editor.project.updateSettings({ - settings: { canvasSize }, - }); - return; - } - const index = parseInt(value, 10); - const preset = canvasPresets[index]; - if (preset) { - editor.project.updateSettings({ settings: { canvasSize: preset } }); - } - }; - - const handleFpsChange = ({ value }: { value: string }) => { - const fps = parseFloat(value); - editor.project.updateSettings({ settings: { fps } }); - }; - - return ( - <div className="flex flex-col gap-4"> - <div className="flex flex-col gap-2"> - <Label>Name</Label> - <span className="leading-none text-sm"> - {activeProject.metadata.name} - </span> - </div> - <div className="flex flex-col gap-2"> - <Label>Aspect ratio</Label> - <Select - value={selectedPresetValue} - onValueChange={(value) => handleAspectRatioChange({ value })} - > - <SelectTrigger className="w-fit"> - <SelectValue placeholder="Select an aspect ratio" /> - </SelectTrigger> - <SelectContent> - <SelectItem value={ORIGINAL_PRESET_VALUE}>Original</SelectItem> - {canvasPresets.map((preset, index) => { - const label = dimensionToAspectRatio({ - width: preset.width, - height: preset.height, - }); - return ( - <SelectItem key={label} value={index.toString()}> - {label} - </SelectItem> - ); - })} - </SelectContent> - </Select> - </div> - <div className="flex flex-col gap-2"> - <Label>Frame rate</Label> - <Select - value={activeProject.settings.fps.toString()} - onValueChange={(value) => handleFpsChange({ value })} - > - <SelectTrigger className="w-fit"> - <SelectValue placeholder="Select a frame rate" /> - </SelectTrigger> - <SelectContent> - {FPS_PRESETS.map((preset) => ( - <SelectItem key={preset.value} value={preset.value}> - {preset.label} - </SelectItem> - ))} - </SelectContent> - </Select> - </div> - </div> - ); -} |
