-
+
+
-
+
@@ -93,28 +80,35 @@ export const PageEnigma = () => {
Ask Miles about ThreeJS
Ask Wil about React
-
-
+
+
Camera Tab
- },{
- header: 'Audio',
- children: Audio Tab
- },{
- header: 'Styling',
- children: Styling Tab
- }
- ]}/>
+ Animation Tab,
+ },
+ {
+ header: "Camera",
+ children: Camera Tab
,
+ },
+ {
+ header: "Audio",
+ children: Audio Tab
,
+ },
+ {
+ header: "Styling",
+ children: Styling Tab
,
+ },
+ ]}
+ />
-
+
+
+
);
-}
\ No newline at end of file
+};
diff --git a/app/pages/PageEnigma/comps/Timeline/Character.tsx b/app/pages/PageEnigma/comps/Timeline/Character.tsx
new file mode 100644
index 0000000000..9827a2743e
--- /dev/null
+++ b/app/pages/PageEnigma/comps/Timeline/Character.tsx
@@ -0,0 +1,50 @@
+import { TrackClip } from "./TrackClip";
+import { CharacterTrack } from "~/models/track";
+
+interface Props {
+ scale: number;
+ time: number;
+ character: CharacterTrack;
+ updateClip: (id: string, offset: number, length: number) => void;
+}
+
+export const Character = ({
+ character: { animationClips },
+ updateClip,
+}: Props) => {
+ return (
+
+
Character
+
+
+
+ {animationClips.map((clip, index) => (
+ 0
+ ? animationClips[index - 1].offset +
+ animationClips[index - 1].length
+ : 0
+ }
+ max={
+ index < animationClips.length - 1
+ ? animationClips[index + 1].offset
+ : 1000
+ }
+ updateClip={updateClip}
+ clip={clip}
+ />
+ ))}
+
+
+
+
+
+
+ );
+};
diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
index e0c1f6a20c..2377d8fe02 100644
--- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx
@@ -1,31 +1,43 @@
import { LowerPanel } from "~/modules/LowerPanel";
-import {
- Button,
-} from '~/components';
-import Editor from '../../js/editor';
+import Editor from "../../js/editor";
+import { Character } from "./Character";
+import { useCallback, useContext } from "react";
+import { TrackContext } from "~/contexts/TrackContext";
export const Timeline = ({
- editorCurrent
-}:{
- editorCurrent: Editor|null;
-})=>{
- const handleButtonLoad = ()=>{
- document.getElementById("load-upload")?.click();
- }
- const handleButtonRender = ()=>{
- editorCurrent?.togglePlayback();
- }
- const handleButtonPlay = ()=>{
+ editorCurrent,
+}: {
+ editorCurrent: Editor | null;
+}) => {
+ const { characters, updateCharacters } = useContext(TrackContext);
- }
+ const updateClip = useCallback(
+ (id: string, offset: number, length: number) => {
+ updateCharacters({ type: "animations", id, offset, length });
+ },
+ [],
+ );
- return(
+ return (
-
-
-
-
-
+
+
+
+ {characters.map((character) => (
+
+ ))}
+
- )
-}
\ No newline at end of file
+ );
+};
diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
new file mode 100644
index 0000000000..384a85ebb8
--- /dev/null
+++ b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
@@ -0,0 +1,65 @@
+import { useMouseEvents } from "./utils/useMouseEvents";
+import { BaseClip } from "~/models/track";
+import { TrackContext } from "~/contexts/TrackContext";
+import { useContext } from "react";
+
+interface Props {
+ min: number;
+ max: number;
+ clip: BaseClip;
+ updateClip: (id: string, offset: number, length: number) => void;
+ selected?: boolean;
+}
+
+export const TrackClip = ({ clip, min, max, updateClip }: Props) => {
+ const { selectClip } = useContext(TrackContext);
+ const {
+ onPointerDown,
+ onPointerUp,
+ onMouseLeave,
+ onMouseMove,
+ offset,
+ length,
+ } = useMouseEvents(clip, max, min, updateClip);
+
+ if (clip.selected) {
+ console.log("selected", clip);
+ }
+ return (
+ <>
+
+ {clip.name}
+
+