summaryrefslogtreecommitdiff
path: root/apps/web/src/components/editor/panels/assets/views/settings.tsx
diff options
context:
space:
mode:
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.tsx168
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>
- );
-}