ui improvements

add timeline animations
2023-05-31 15:16:27 +02:00
parent 8d1f949280
commit e3098c4400
13 changed files with 278 additions and 73 deletions
--- a/app/src/components/Timeline/KeyframeIndicator.tsx
+++ b/app/src/components/Timeline/KeyframeIndicator.tsx
@@ -1,51 +1,111 @@
 import { ease } from "@unom/style";
-import { motion } from "framer-motion";
+import { PanInfo, motion } from "framer-motion";
 import { AnimationData } from "primitives/AnimatedEntities";
 import { Keyframe } from "primitives/Keyframe";
-import { FC } from "react";
+import { FC, useCallback, useState } from "react";
 import { z } from "zod";
-import { TIMELINE_SCALE } from "./common";
+import { TIMELINE_SCALE, calculateOffset } from "./common";
 import { AnimatedNumber, AnimatedVec2, AnimatedVec3 } from "primitives/Values";
 import { useKeyframeStore } from "stores/keyframe.store";
+import { produce } from "immer";

 const KeyframeIndicator: FC<{
  keyframe: z.input<typeof Keyframe>;
  animationData: z.input<typeof AnimationData>;
-}> = ({ keyframe, animationData }) => {
+  onUpdate?: (e: z.input<typeof Keyframe>) => void;
+}> = ({ keyframe, animationData, onUpdate }) => {
  const { selectedKeyframe, selectKeyframe, deselectKeyframe } =
    useKeyframeStore();

  const selected = selectedKeyframe === keyframe.id;

+  const handleUpdate = useCallback(
+    (info: PanInfo) => {
+      if (onUpdate) {
+        let offset = info.offset.x;
+
+        offset = calculateOffset(offset);
+
+        offset += keyframe.offset;
+
+        onUpdate({ ...keyframe, offset: offset < 0 ? 0 : offset });
+      }
+    },
+    [onUpdate, animationData, keyframe]
+  );
+
+  const [isDragged, setIsDragged] = useState(false);
+
  return (
    <motion.div
      drag="x"
-      onMouseDown={(e) => e.preventDefault()}
+      variants={{
+        enter: {},
+        from: {},
+        exit: {},
+        tap: {},
+        drag: {},
+      }}
      data-selected={selected}
+      onDragStart={() => setIsDragged(true)}
+      onDragEnd={(e, info) => {
+        e.preventDefault();
+        setIsDragged(false);
+        if (onUpdate) {
+          handleUpdate(info);
+        }
+      }}
+      onMouseDown={(e) => e.preventDefault()}
      dragConstraints={{ left: 0 }}
+      initial={{
+        x: (animationData.offset + keyframe.offset) * TIMELINE_SCALE + 4,
+        scale: 0,
+      }}
+      whileTap={{ scale: 1.1 }}
      animate={{
        x: (animationData.offset + keyframe.offset) * TIMELINE_SCALE + 4,
+        scale: 1,
      }}
      transition={ease.quint(0.4).out}
-      style={{
-        clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
+      onClick={() => {
+        if (!isDragged) {
+          selected ? deselectKeyframe() : selectKeyframe(keyframe.id);
+        }
      }}
-      onClick={() =>
-        selected ? deselectKeyframe() : selectKeyframe(keyframe.id)
-      }
-      className="bg-indigo-500 data-[selected=true]:bg-indigo-300 absolute w-2 h-2 z-30 select-none"
-    />
+      className="h-full absolute z-30 select-none w-3 flex items-center justify-center filter
+      data-[selected=true]:drop-shadow-[0px_2px_6px_rgba(255,255,255,1)] transition-colors"
+    >
+      <span
+        data-selected={selected}
+        className="bg-gray-200 
+        data-[selected=true]:bg-indigo-600 
+        h-full transition-colors"
+        style={{
+          width: 10,
+          height: 10,
+          clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
+        }}
+      />
+    </motion.div>
  );
 };

 const AnimatedNumberKeyframeIndicator: FC<{
  animatedNumber: z.input<typeof AnimatedNumber>;
  animationData: z.input<typeof AnimationData>;
-}> = ({ animatedNumber, animationData }) => {
+  onUpdate: (e: z.input<typeof AnimatedNumber>) => void;
+}> = ({ animatedNumber, animationData, onUpdate }) => {
  return (
    <>
-      {animatedNumber.keyframes.values.map((keyframe) => (
+      {animatedNumber.keyframes.values.map((keyframe, index) => (
        <KeyframeIndicator
+          onUpdate={(keyframe) =>
+            onUpdate(
+              produce(animatedNumber, (draft) => {
+                draft.keyframes.values[index] = keyframe;
+              })
+            )
+          }
          key={keyframe.id}
          keyframe={keyframe}
          animationData={animationData}
@@ -65,11 +125,29 @@ const AnimatedVec2KeyframeIndicator: FC<{
  animatedVec2: z.input<typeof AnimatedVec2>;
  dimension?: DimensionsVec2;
  animationData: z.input<typeof AnimationData>;
-}> = ({ animatedVec2, animationData, dimension }) => {
+  onUpdate: (e: z.input<typeof AnimatedVec2>) => void;
+}> = ({ animatedVec2, animationData, dimension, onUpdate }) => {
+  const handleUpdate = useCallback(
+    (
+      animatedNumber: z.input<typeof AnimatedNumber>,
+      dimensionIndex: number
+    ) => {
+      onUpdate(
+        produce(animatedVec2, (draft) => {
+          draft.keyframes[dimensionIndex] = animatedNumber;
+        })
+      );
+    },
+    [animatedVec2]
+  );
+
  if (dimension) {
    return (
      <AnimatedNumberKeyframeIndicator
        animationData={animationData}
+        onUpdate={(animatedNumber) =>
+          handleUpdate(animatedNumber, VEC2_DIMENSION_INDEX_MAPPING[dimension])
+        }
        animatedNumber={
          animatedVec2.keyframes[VEC2_DIMENSION_INDEX_MAPPING[dimension]]
        }
@@ -81,6 +159,7 @@ const AnimatedVec2KeyframeIndicator: FC<{
    <>
      {animatedVec2.keyframes.map((animatedNumber, index) => (
        <AnimatedNumberKeyframeIndicator
+          onUpdate={(animatedNumber) => handleUpdate(animatedNumber, index)}
          key={index}
          animatedNumber={animatedNumber}
          animationData={animationData}
@@ -101,11 +180,29 @@ const AnimatedVec3KeyframeIndicator: FC<{
  animatedVec3: z.input<typeof AnimatedVec3>;
  animationData: z.input<typeof AnimationData>;
  dimension?: DimensionsVec3;
-}> = ({ animatedVec3, animationData, dimension }) => {
+  onUpdate: (e: z.input<typeof AnimatedVec3>) => void;
+}> = ({ animatedVec3, animationData, dimension, onUpdate }) => {
+  const handleUpdate = useCallback(
+    (
+      animatedNumber: z.input<typeof AnimatedNumber>,
+      dimensionIndex: number
+    ) => {
+      onUpdate(
+        produce(animatedVec3, (draft) => {
+          draft.keyframes[dimensionIndex] = animatedNumber;
+        })
+      );
+    },
+    [animatedVec3]
+  );
+
  if (dimension) {
    return (
      <AnimatedNumberKeyframeIndicator
        animationData={animationData}
+        onUpdate={(animatedNumber) =>
+          handleUpdate(animatedNumber, VEC3_DIMENSION_INDEX_MAPPING[dimension])
+        }
        animatedNumber={
          animatedVec3.keyframes[VEC3_DIMENSION_INDEX_MAPPING[dimension]]
        }
@@ -118,6 +215,7 @@ const AnimatedVec3KeyframeIndicator: FC<{
      {animatedVec3.keyframes.map((animatedNumber, index) => (
        <AnimatedNumberKeyframeIndicator
          key={index}
+          onUpdate={(animatedNumber) => handleUpdate(animatedNumber, index)}
          animatedNumber={animatedNumber}
          animationData={animationData}
        />
--- a/app/src/components/Timeline/Track.tsx
+++ b/app/src/components/Timeline/Track.tsx
@@ -6,10 +6,7 @@ import { FC, useState } from "react";
 import { useEntitiesStore } from "stores/entities.store";
 import { z } from "zod";
 import { shallow } from "zustand/shallow";
-import KeyframeIndicator, {
-  AnimatedVec2KeyframeIndicator,
-  AnimatedVec3KeyframeIndicator,
-} from "./KeyframeIndicator";
+import KeyframeIndicator from "./KeyframeIndicator";
 import { TIMELINE_SCALE, calculateOffset } from "./common";
 import { TriangleDownIcon } from "@radix-ui/react-icons";
 import TrackPropertiesEditor from "./TrackPropertiesEditor";
@@ -49,9 +46,14 @@ const Track: FC<TrackProps> = ({
      value={entity}
      dragListener={false}
      dragControls={controls}
+      onMouseDown={(e) => e.preventDefault()}
      className="min-h-8 relative flex flex-1 flex-col gap-1 select-none"
    >
-      <div className="flex flex-row gap-1 select-none">
+      <motion.div
+        layout
+        onMouseDown={(e) => e.preventDefault()}
+        className="flex flex-row gap-1 select-none"
+      >
        <div
          onMouseDown={(e) => e.preventDefault()}
          onPointerDown={(e) => controls.start(e)}
@@ -132,10 +134,10 @@ const Track: FC<TrackProps> = ({
                },
              });
            }}
-            className="z-10 w-4 bg-slate-500 h-8 absolute rounded-md select-none cursor-w-resize"
+            className="z-10 w-4 bg-slate-500 h-8 top-1 absolute rounded-md select-none cursor-w-resize"
          />
          <motion.div
-            className="z-10 w-4 bg-slate-500 h-8 absolute rounded-md select-none cursor-e-resize"
+            className="z-10 w-4 bg-slate-500 h-8 top-1 absolute rounded-md select-none cursor-e-resize"
            onMouseDown={(e) => e.preventDefault()}
            drag="x"
            animate={{
@@ -194,10 +196,10 @@ const Track: FC<TrackProps> = ({
                },
              });
            }}
-            className="z-5 h-8 absolute rounded-md transition-colors bg-gray-700 hover:bg-gray-600 select-none cursor-grab"
+            className="z-5 h-8 top-1 absolute rounded-md transition-colors bg-gray-700 hover:bg-gray-600 select-none cursor-grab"
          ></motion.div>
        </div>
-      </div>
+      </motion.div>
      {isExpanded && <TrackPropertiesEditor entity={entity} />}
    </Reorder.Item>
  );
--- a/app/src/components/Timeline/TrackPropertiesEditor.tsx
+++ b/app/src/components/Timeline/TrackPropertiesEditor.tsx
@@ -5,7 +5,7 @@ import {
 } from "primitives/AnimatedEntities";
 import { AnimatedProperty } from "primitives/AnimatedProperty";
 import { AnimatedVec2, ValueType } from "primitives/Values";
-import { FC, useMemo, useState } from "react";
+import { FC, useCallback, useMemo, useState } from "react";
 import { z } from "zod";
 import {
  AnimatedNumberKeyframeIndicator,
@@ -13,18 +13,34 @@ import {
  AnimatedVec3KeyframeIndicator,
 } from "./KeyframeIndicator";
 import { ToggleGroup, ToggleGroupItem } from "components/ToggleGroup";
+import { produce } from "immer";
+import set from "lodash.set";
+import { useEntitiesStore } from "stores/entities.store";
+import { shallow } from "zustand/shallow";
+import { AnimatedValue } from "primitives/Values";
+import { motion } from "framer-motion";
+import { ease } from "@unom/style";

 const TrackAnimatedPropertyKeyframes: FC<{
  animatedProperty: z.input<typeof AnimatedProperty>;
  animationData: z.input<typeof AnimationData>;
+  onUpdate: (animatedProperty: z.input<typeof AnimatedProperty>) => void;
  selectedDimension?: "x" | "y" | "z";
-}> = ({ animatedProperty, animationData, selectedDimension }) => {
+}> = ({ animatedProperty, animationData, selectedDimension, onUpdate }) => {
+  const handleUpdate = useCallback(
+    (animatedValue: z.input<typeof AnimatedValue>) => {
+      onUpdate({ ...animatedProperty, animatedValue });
+    },
+    [onUpdate, animatedProperty]
+  );
+
  switch (animatedProperty.animatedValue.type) {
    case "Number":
      return (
        <AnimatedNumberKeyframeIndicator
          animatedNumber={animatedProperty.animatedValue}
          animationData={animationData}
+          onUpdate={handleUpdate}
        />
      );
    case "Vec2":
@@ -33,6 +49,7 @@ const TrackAnimatedPropertyKeyframes: FC<{
          dimension={selectedDimension !== "z" ? selectedDimension : undefined}
          animatedVec2={animatedProperty.animatedValue}
          animationData={animationData}
+          onUpdate={handleUpdate}
        />
      );

@@ -42,6 +59,7 @@ const TrackAnimatedPropertyKeyframes: FC<{
          dimension={selectedDimension}
          animatedVec3={animatedProperty.animatedValue}
          animationData={animationData}
+          onUpdate={handleUpdate}
        />
      );
    default:
@@ -52,14 +70,18 @@ const TrackAnimatedPropertyKeyframes: FC<{
 const TrackAnimatedProperty: FC<{
  animatedProperty: z.input<typeof AnimatedProperty>;
  animationData: z.input<typeof AnimationData>;
-  trackIndex: number;
-}> = ({ animatedProperty, animationData }) => {
+  onUpdate: (e: z.input<typeof AnimatedProperty>) => void;
+}> = ({ animatedProperty, animationData, onUpdate }) => {
  const [selectedDimension, setSelectedDimension] = useState<"x" | "y" | "z">();

  return (
-    <div className="flex flex-row">
-      <div className="min-w-[200px] flex flex-row justify-between">
-        <h3>{animatedProperty.label}</h3>
+    <motion.div
+      transition={ease.quint(0.8).out}
+      variants={{ enter: { y: 0, opacity: 1 }, from: { y: -10, opacity: 0 } }}
+      className="flex flex-row bg-slate-900 ml-2 align-center"
+    >
+      <div className="min-w-[195px] flex flex-row justify-between px-2">
+        <h4>{animatedProperty.label}</h4>
        <ToggleGroup>
          <ToggleGroupItem
            onClick={() => setSelectedDimension("x")}
@@ -90,36 +112,59 @@ const TrackAnimatedProperty: FC<{
              ? selectedDimension
              : undefined
          }
+          onUpdate={onUpdate}
          animatedProperty={animatedProperty}
          animationData={animationData}
        />
      </div>
-    </div>
+    </motion.div>
  );
 };

-const TrackPropertiesEditor: FC<{ entity: z.input<typeof AnimatedEntity> }> = ({
-  entity,
-}) => {
+const TrackPropertiesEditor: FC<{
+  entity: z.input<typeof AnimatedEntity>;
+}> = ({ entity }) => {
  const animatedProperties = useMemo(
    () => getAnimatedPropertiesByAnimatedEntity(entity),
    [entity]
  );

+  const handleUpdate = useCallback(
+    (animatedProperty: z.input<typeof AnimatedProperty>) => {
+      const entitiesStore = useEntitiesStore.getState();
+
+      const nextValue = produce(entity, (draft) => {
+        const animatedValue = animatedProperty.animatedValue;
+
+        set(draft, animatedProperty.propertyPath, animatedValue);
+      });
+
+      const parsedEntity = AnimatedEntity.parse(nextValue);
+
+      entitiesStore.updateEntityById(parsedEntity.id, parsedEntity);
+    },
+    [entity]
+  );
+
  return (
-    <div>
+    <motion.div
+      animate="enter"
+      initial="from"
+      variants={{ enter: {}, from: {} }}
+      transition={{ staggerChildren: 0.05 }}
+      layout
+      className="flex flex-col gap-1"
+    >
      {animatedProperties.map((animatedProperty, index) => (
        <TrackAnimatedProperty
-          trackIndex={index}
+          onUpdate={handleUpdate}
          animationData={entity.animation_data}
          key={index}
          animatedProperty={animatedProperty}
        />
      ))}
-    </div>
+    </motion.div>
  );
 };

 export default TrackPropertiesEditor;
-
-AnimatedVec2._def.typeName;
--- a/app/src/components/Timeline/index.tsx
+++ b/app/src/components/Timeline/index.tsx
@@ -26,7 +26,7 @@ const Timeline: FC<TimelineProps> = () => {
  }));

  return (
-    <div className="flex flex-col p-4 w-full border transition-colors focus-within:border-gray-400 border-gray-600 rounded-md">
+    <div className="flex flex-col p-4 border transition-colors focus-within:border-gray-400 border-gray-600 rounded-md">
      <div className="flex flex-row">
        <div className="flex flex-row">
          <button onClick={() => setPlaying(true)} className="w-8 h-8">
@@ -38,13 +38,13 @@ const Timeline: FC<TimelineProps> = () => {
        </div>
        <Timestamp />
      </div>
-      <div className="gap-1 flex flex-col overflow-y-hidden">
+      <div className="gap-1 w-full flex flex-col overflow-x-auto">
        <div className="z-20 flex flex-row gap-2">
          <div className="flex-shrink-0 min-w-[200px]" />
          <TimePicker />
        </div>
        <Reorder.Group
-          className="gap-1 flex-1 flex flex-col"
+          className="gap-1 flex flex-col"
          values={entities}
          onReorder={setEntities}
        >