fix cache

add font propertie to rust text paint
layout improvements

app/src/components/Properties/Primitives.tsx

@@ -11,6 +11,7 @@ import { FC } from "react";
 import { z } from "zod";
 import { AnimatedVec2Properties, ColorProperties } from "./Values";
 import { PropertiesProps } from "./common";
+import { useFontsStore } from "stores/fonts.store";
 
 type TextPropertiesProps = PropertiesProps<z.input<typeof AnimatedTextEntity>>;
 type StaggeredTextPropertiesProps = PropertiesProps<
@@ -66,6 +67,8 @@ export const TextProperties: FC<TextPropertiesProps> = ({
   entity,
   onUpdate,
 }) => {
+  const { fonts } = useFontsStore();
+
   return (
     <motion.div
       variants={{ enter: { opacity: 1, y: 0 }, from: { opacity: 0, y: 50 } }}
@@ -92,6 +95,38 @@ export const TextProperties: FC<TextPropertiesProps> = ({
           }
         ></input>
       </label>
+      <label className="flex flex-col items-start">
+        <span className="label">Font</span>
+        <select
+          onChange={(e) =>
+            onUpdate({
+              ...entity,
+              cache: { valid: false },
+              paint: { ...entity.paint, fontName: e.target.value },
+            })
+          }
+          value={entity.paint.fontName}
+        >
+          {fonts.map((font) => (
+            <option value={font} key={font}>
+              {font}
+            </option>
+          ))}
+        </select>
+      </label>
+      <label>
+        <span className="label">Size</span>
+        <input
+          value={entity.paint.size}
+          onChange={(e) =>
+            onUpdate({
+              ...entity,
+              cache: { valid: false },
+              paint: { ...entity.paint, size: Number(e.target.value) },
+            })
+          }
+        ></input>
+      </label>
       <AnimatedVec2Properties
         onUpdate={(updatedEntity) =>
           onUpdate({ ...entity, origin: updatedEntity })
@@ -107,6 +142,8 @@ export const StaggeredTextProperties: FC<StaggeredTextPropertiesProps> = ({
   entity,
   onUpdate,
 }) => {
+  const { fonts } = useFontsStore();
+
   return (
     <motion.div
       variants={{ enter: { opacity: 1, y: 0 }, from: { opacity: 0, y: 50 } }}
@@ -127,6 +164,28 @@ export const StaggeredTextProperties: FC<StaggeredTextPropertiesProps> = ({
           }
         />
       </label>
+      <label className="flex flex-col items-start">
+        <span className="label">Font</span>
+        <select
+          onChange={(e) => {
+            onUpdate({
+              ...entity,
+              cache: { valid: false },
+              letter: {
+                ...entity.letter,
+                paint: { ...entity.letter.paint, fontName: e.target.value },
+              },
+            });
+          }}
+          value={entity.letter.paint.fontName}
+        >
+          {fonts.map((font) => (
+            <option value={font} key={font}>
+              {font}
+            </option>
+          ))}
+        </select>
+      </label>
       <label className="flex flex-col items-start">
         <span className="label">Size</span>
         <input
@@ -134,6 +193,7 @@ export const StaggeredTextProperties: FC<StaggeredTextPropertiesProps> = ({
           onChange={(e) =>
             onUpdate({
               ...entity,
+              cache: { valid: false },
               letter: {
                 ...entity.letter,
                 paint: {

app/src/components/Properties/index.tsx

@@ -11,7 +11,7 @@ import {
 
 const PropertiesContainer: FC<{ children: ReactNode }> = ({ children }) => {
   return (
-    <div className="w-full rounded-md h-[500px] overflow-auto border transition-colors focus-within:border-gray-400 border-gray-600 flex flex-col items-start p-4">
+    <div className="w-full rounded-md lg:h-[500px] overflow-auto border transition-colors focus-within:border-gray-400 border-gray-600 flex flex-col items-start p-4">
       {children}
     </div>
   );

app/src/components/Timeline.tsx

@@ -72,12 +72,12 @@ const Track: FC<TrackProps> = ({
       value={entity}
       dragListener={false}
       dragControls={controls}
-      className="h-8 w-full flex flex-row gap-1 select-none"
+      className="h-8 w-96 flex flex-1 flex-row gap-1 select-none"
     >
       <div
         onMouseDown={(e) => e.preventDefault()}
         onPointerDown={(e) => controls.start(e)}
-        className={`h-full transition-all rounded-sm flex-shrink-0 w-96 p-1 px-2 flex flex-row ${
+        className={`h-full transition-all rounded-sm min-w-[200px] p-1 px-2 flex flex-row ${
           selectedEntity === index ? "bg-gray-800" : "bg-gray-900"
         }`}
       >
@@ -87,7 +87,7 @@ const Track: FC<TrackProps> = ({
               ? deselectEntity()
               : selectEntity(index)
           }
-          className="text-white-800 select-none pointer-events-none"
+          className="text-white-800 select-none cursor-pointer"
         >
           {name}
         </h3>
@@ -230,11 +230,11 @@ const Timeline: FC<TimelineProps> = () => {
       </div>
       <div className="gap-1 flex flex-col overflow-y-hidden">
         <div className="z-20 flex flex-row gap-2">
-          <div className="flex-shrink-0 w-96" />
+          <div className="flex-shrink-0 min-w-[200px]" />
           <TimePicker />
         </div>
         <Reorder.Group
-          className="gap-1 flex flex-col"
+          className="gap-1 flex-1 flex flex-col overflow-scroll"
           values={entities}
           onReorder={setEntities}
         >