tempblade/creator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui improvements

Browse Source 
add timeline animations
This commit is contained in:
Enrico Bühler
2023-05-31 15:16:27 +02:00
parent 8d1f949280
commit e3098c4400
13 changed files with 278 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/src/components/Canvas/index.tsx
View File

@@ -26,18 +26,17 @@ const CanvasComponent: FC<CanvasProps> = () => {
}, []);
return (
<div>
<div
className="flex items-center justify-center"
style={{ width: "100%", height: "500px" }}
>
<canvas
className="aspect-video h-full"
height={720}
width={1280}
ref={canvas}
></canvas>
</div>
<div
className="flex items-center justify-center"
style={{ width: "100%", height: "100%" }}
>
<canvas
style={{ width: "100%", height: "100%" }}
className="h-full object-contain"
height={720}
width={1280}
ref={canvas}
></canvas>
</div>
);
};

130
app/src/components/Timeline/KeyframeIndicator.tsx
View File

@@ -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}
/>

20
app/src/components/Timeline/Track.tsx
View File

@@ -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>
);

77
app/src/components/Timeline/TrackPropertiesEditor.tsx
View File

@@ -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;

6
app/src/components/Timeline/index.tsx
View File

@@ -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}
>

12
app/src/components/ToggleGroup.tsx
View File

@@ -1,5 +1,6 @@
import { FC, ReactNode } from "react";
import * as ToggleGroupComponents from "@radix-ui/react-toggle-group";
import { motion } from "framer-motion";
const ToggleGroupItem: FC<{
children: ReactNode;
@@ -9,23 +10,26 @@ const ToggleGroupItem: FC<{
return (
<ToggleGroupComponents.Item
data-selected={selected}
asChild
onClick={onClick}
className="hover:bg-indigo-400 text-white data-[selected=true]:bg-indigo-600
className="hover:bg-indigo-600 text-white data-[selected=true]:bg-indigo-700
data-[selected=true]:text-indigo-200 flex h-6 w-6
items-center justify-center bg-slate-900 text-sm leading-4
first:rounded-l last:rounded-r focus:z-10 focus:shadow-[0_0_0_2px] focus:shadow-black
focus:outline-none"
focus:outline-none transition-colors"
value="left"
aria-label="Left aligned"
>
{children}
<motion.button animate={{ scale: 1 }} whileTap={{ scale: 0.9 }}>
{children}
</motion.button>
</ToggleGroupComponents.Item>
);
};
const ToggleGroup: FC<{ children: ReactNode }> = ({ children }) => (
<ToggleGroupComponents.Root
className="inline-flex bg-slate-800 rounded shadow-[0_2px_10px] shadow-black space-x-px"
className="inline-flex my-auto bg-slate-800 h-fit rounded shadow-[0_2px_10px] shadow-black space-x-px"
type="single"
defaultValue="center"
aria-label="Text alignment"