From fcd3afa3f2737afb4970c9ce600fa3540d1dc315 Mon Sep 17 00:00:00 2001 From: enricobuehler Date: Thu, 1 Jun 2023 01:24:42 +0200 Subject: [PATCH] improve forms by adding select and float inputs performance fix --- app/index.html | 3 +- app/package.json | 1 + app/src/App.tsx | 40 ++- app/src/components/Canvas/index.tsx | 4 - app/src/components/Inputs/FloatInput.tsx | 30 ++ app/src/components/Inputs/Select.tsx | 110 +++++++ app/src/components/Popover.tsx | 15 +- app/src/components/Properties/Primitives.tsx | 150 ++++----- app/src/components/Properties/Values.tsx | 144 ++++++--- .../components/Timeline/KeyframeIndicator.tsx | 119 +++---- .../components/Timeline/KeyframePopover.tsx | 23 +- app/src/components/Timeline/Track.tsx | 22 +- app/src/components/Timeline/index.tsx | 6 +- app/src/components/ToolBar/index.tsx | 80 +++-- app/src/main.tsx | 10 + app/src/primitives/Values.ts | 15 + app/src/services/entities.service.ts | 124 ++++++++ app/src/stores/entities.store.ts | 15 +- app/src/stores/fonts.store.ts | 4 + app/src/styles.css | 12 +- app/yarn.lock | 290 +++++++++++++----- 21 files changed, 872 insertions(+), 345 deletions(-) create mode 100644 app/src/components/Inputs/FloatInput.tsx create mode 100644 app/src/components/Inputs/Select.tsx create mode 100644 app/src/services/entities.service.ts diff --git a/app/index.html b/app/index.html index c3ba3ad..2abef64 100644 --- a/app/index.html +++ b/app/index.html @@ -5,12 +5,11 @@ - Tauri + React + TS + tempblade Creator
- diff --git a/app/package.json b/app/package.json index 262e6d8..4d72299 100644 --- a/app/package.json +++ b/app/package.json @@ -15,6 +15,7 @@ "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-menubar": "^1.0.2", "@radix-ui/react-popover": "^1.0.6", + "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-slider": "^1.1.1", "@radix-ui/react-toggle-group": "^1.0.4", "@radix-ui/react-toolbar": "^1.0.3", diff --git a/app/src/App.tsx b/app/src/App.tsx index c26161c..af3da3d 100644 --- a/app/src/App.tsx +++ b/app/src/App.tsx @@ -4,39 +4,35 @@ import Canvas from "./components/Canvas"; import Properties, { PropertiesContainer } from "components/Properties"; import MenuBar from "components/MenuBar"; import ToolBar from "components/ToolBar"; -import { useEffect } from "react"; -import { invoke } from "@tauri-apps/api/tauri"; -import { useFontsStore } from "stores/fonts.store"; import useKeyControls from "hooks/useKeyControls"; +import { useFontsStore } from "stores/fonts.store"; export default function App() { - const { setFonts } = useFontsStore(); + const fontsStoreDidInit = useFontsStore((store) => store.didInit); useKeyControls(); - useEffect(() => { - invoke("get_system_families").then((data) => { - if (data && Array.isArray(data)) { - setFonts(data); - } - }); - }, []); - return ( -
+
-
+
-
-
- - - - + {fontsStoreDidInit && ( +
+
+ + + + +
+
- -
+ )}
); } + +{ + /* */ +} diff --git a/app/src/components/Canvas/index.tsx b/app/src/components/Canvas/index.tsx index 6996d5d..92df8ec 100644 --- a/app/src/components/Canvas/index.tsx +++ b/app/src/components/Canvas/index.tsx @@ -1,9 +1,5 @@ import { FC, useMemo } from "react"; import { useEffect, useRef, useState } from "react"; -import { useTimelineStore } from "stores/timeline.store"; -import { useRenderStateStore } from "stores/render-state.store"; -import { useEntitiesStore } from "stores/entities.store"; -import { Drawer } from "drawers/draw"; import { PlaybackService } from "services/playback.service"; type CanvasProps = {}; diff --git a/app/src/components/Inputs/FloatInput.tsx b/app/src/components/Inputs/FloatInput.tsx new file mode 100644 index 0000000..7c7eba3 --- /dev/null +++ b/app/src/components/Inputs/FloatInput.tsx @@ -0,0 +1,30 @@ +import { useCallback, useState } from "react"; +import { z } from "zod"; + +type FloatInputProps = { + value: number; + onChange: (value: number) => void; + id: string; +}; + +const FloatInput: React.FC = ({ value, onChange, id }) => { + const [inputValue, setInputValue] = useState(value.toString()); + + const handleInputChange = useCallback( + (e: React.ChangeEvent) => { + const val = e.target.value.replace(",", "."); + setInputValue(val); + + const nextValue = z.coerce.number().min(-9999).max(9999).safeParse(val); + + if (nextValue.success) { + onChange(nextValue.data); + } + }, + [setInputValue, onChange] + ); + + return ; +}; + +export default FloatInput; diff --git a/app/src/components/Inputs/Select.tsx b/app/src/components/Inputs/Select.tsx new file mode 100644 index 0000000..3d4ef90 --- /dev/null +++ b/app/src/components/Inputs/Select.tsx @@ -0,0 +1,110 @@ +import * as React from "react"; +import * as SelectPrimitive from "@radix-ui/react-select"; +import { Check, ChevronDown } from "lucide-react"; + +import { cn } from "utils"; + +const Select = SelectPrimitive.Root; + +const SelectGroup = SelectPrimitive.Group; + +const SelectValue = SelectPrimitive.Value; + +const SelectTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + + + +)); +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; + +const SelectContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, position = "popper", ...props }, ref) => ( + + + + {children} + + + +)); +SelectContent.displayName = SelectPrimitive.Content.displayName; + +const SelectLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +SelectLabel.displayName = SelectPrimitive.Label.displayName; + +const SelectItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + + {children} + +)); +SelectItem.displayName = SelectPrimitive.Item.displayName; + +const SelectSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +SelectSeparator.displayName = SelectPrimitive.Separator.displayName; + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, +}; diff --git a/app/src/components/Popover.tsx b/app/src/components/Popover.tsx index c91dbd8..6aacdd7 100644 --- a/app/src/components/Popover.tsx +++ b/app/src/components/Popover.tsx @@ -1,11 +1,24 @@ import * as React from "react"; import * as PopoverPrimitive from "@radix-ui/react-popover"; import { cn } from "utils"; +import { Cross2Icon } from "@radix-ui/react-icons"; const Popover = PopoverPrimitive.Root; const PopoverTrigger = PopoverPrimitive.Trigger; +const PopoverArrow = PopoverPrimitive.Arrow; + +const PopoverClose: React.FC<{ onClick?: () => void }> = ({ onClick }) => ( + + + +); + const PopoverContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef @@ -25,4 +38,4 @@ const PopoverContent = React.forwardRef< )); PopoverContent.displayName = PopoverPrimitive.Content.displayName; -export { Popover, PopoverTrigger, PopoverContent }; +export { Popover, PopoverTrigger, PopoverClose, PopoverContent, PopoverArrow }; diff --git a/app/src/components/Properties/Primitives.tsx b/app/src/components/Properties/Primitives.tsx index 5989b74..ae1e060 100644 --- a/app/src/components/Properties/Primitives.tsx +++ b/app/src/components/Properties/Primitives.tsx @@ -12,6 +12,13 @@ import { z } from "zod"; import { AnimatedVec2Properties, ColorProperties } from "./Values"; import { PropertiesProps } from "./common"; import { useFontsStore } from "stores/fonts.store"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "components/Inputs/Select"; type TextPropertiesProps = PropertiesProps>; type StaggeredTextPropertiesProps = PropertiesProps< @@ -29,13 +36,17 @@ export const PaintProperties: FC = ({ }) => { return (
- + + + + + {Object.keys(PaintStyleType.Values).map((paintStyleType) => ( + {paintStyleType} + ))} + + + {entity.style.color && ( = ({ initial="from" transition={ease.quint(0.9).out} > -