enhance timeline

repath-project · Dec 17, 2023 · a024b36 · a024b36
1 parent ceec30a
commit a024b36
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 40 deletions.
diff --git a/src/renderer/db.cljs b/src/renderer/db.cljs
@@ -61,4 +61,4 @@
             :fullscreen? false
             :header? true}
    :timeline {:time 0
-              :paused? true}})
+              :paused? false}})
diff --git a/src/renderer/frame/views.cljs b/src/renderer/frame/views.cljs
@@ -23,9 +23,11 @@
   (let [frame-window (.-window (useFrame))]
     (ra/create-class
      {:component-did-mount
-      #(doseq
-        [event ["pointermove" "pointerup" "wheel"]]
-         (.addEventListener frame-window event mouse-handler #js {:passive false}))
+      (fn []
+        (rf/dispatch [:timeline/pause])
+        (doseq
+         [event ["pointermove" "pointerup" "wheel"]]
+          (.addEventListener frame-window event mouse-handler #js {:passive false})))
 
       :component-will-unmount
       #(doseq

diff --git a/src/renderer/timeline/events.cljs b/src/renderer/timeline/events.cljs
@@ -21,14 +21,7 @@
 (rf/reg-fx
  ::unpause-animations
  (fn []
-   (doall (map #(.pauseAnimations %) (svg-elements)))))
-
-(rf/reg-event-fx
- :timeline/set-time
- (fn [{:keys [db]} [_ time]]
-   {:db (assoc-in db [:timeline :time] time)
-    ::pause-animations nil
-    ::set-current-time time}))
+   (doall (map #(.unpauseAnimations %) (svg-elements)))))
 
 (rf/reg-event-fx
  :timeline/pause
@@ -41,3 +34,9 @@
  (fn [{:keys [db]} _]
    {:db (assoc-in db [:timeline :paused?] false)
     ::unpause-animations nil}))
+
+(rf/reg-event-fx
+ :timeline/set-time
+ (fn [{:keys [db]} [_ time]]
+   {:db (assoc-in db [:timeline :time] time)
+    ::set-current-time time}))
diff --git a/src/renderer/timeline/subs.cljs b/src/renderer/timeline/subs.cljs
@@ -1,8 +1,15 @@
 (ns renderer.timeline.subs
   (:require
+   [clojure.string :as str]
    [re-frame.core :as rf]
    [renderer.tools.base :as tools]))
 
+(rf/reg-sub
+ :animations
+ :<- [:document/elements]
+ (fn [elements]
+   (filter #(contains? (descendants ::tools/animation) (:tag %)) (vals elements))))
+
 (defn effect-id
   [el]
   (str "effect" (:key el)))
@@ -22,17 +29,6 @@
                 :end end
                 :effectId (effect-id el)}]}))
 
-(defn animation->effect
-  [{:keys [attrs] :as el}]
-  {:id (effect-id el)
-   :name (str (name (:tag el)) (:attributeName attrs))})
-
-(rf/reg-sub
- :animations
- :<- [:document/elements]
- (fn [elements]
-   (filter #(contains? (descendants ::tools/animation) (:tag %)) (vals elements))))
-
 (rf/reg-sub
  :timeline/rows
  :<- [:animations]
@@ -41,6 +37,11 @@
         (mapv animation->timeline-row)
         clj->js)))
 
+(defn animation->effect
+  [{:keys [attrs] :as el}]
+  {:id (effect-id el)
+   :name (str (name (:tag el)) (:attributeName attrs))})
+
 (rf/reg-sub
  :timeline/effects
  :<- [:animations]
@@ -49,10 +50,18 @@
         (reduce #(assoc %1 (effect-id %2) (animation->effect %2)) {})
         clj->js)))
 
+(defn pad-2
+  [n]
+  (-> n str js/parseInt str (.padStart 2 "0")))
+
 (rf/reg-sub
- :timeline/time
+ :timeline/time-formatted
  (fn [db _]
-   (-> db :timeline :time)))
+   (let [time (-> db :timeline :time)
+         min (-> time (/ 60) pad-2)
+         sec (-> time (rem 60) pad-2)
+         ms (-> time (rem 1) (* 100) pad-2 (str/replace "0." ""))]
+     (str min ":"  sec ":" ms))))
 
 (rf/reg-sub
  :timeline/paused?

diff --git a/src/renderer/timeline/views.cljs b/src/renderer/timeline/views.cljs
@@ -1,31 +1,35 @@
 (ns renderer.timeline.views
   (:require
    ["@xzdarcy/react-timeline-editor" :refer [Timeline]]
-   [clojure.string :as str]
    [re-frame.core :as rf]
+   [reagent.core :as r]
    [renderer.components :as comp]))
 
-(defn time-rendered
-  [time]
-  (let [float (-> time (rem 1) (* 100) str js/parseInt str (.padStart 2 "0") (str/replace "0." "")) 
-        min (-> time (/ 60) str js/parseInt str (.padStart 2 "0"))
-        sec (-> time (rem 60) str js/parseInt str (.padStart 2 "0"))]
-    (str min ":"  sec ":" float)))
-
 (defn root
   []
   (let [data @(rf/subscribe [:timeline/rows])
         effects @(rf/subscribe [:timeline/effects])
-        time @(rf/subscribe [:timeline/time])
-        paused? @(rf/subscribe [:timeline/paused?])]
+        time @(rf/subscribe [:timeline/time-formatted])
+        paused? @(rf/subscribe [:timeline/paused?])
+        engine (atom nil)]
     [:div
      [:div.toolbar.level-1
       (if paused?
-        [comp/icon-button "play" {:on-click #(rf/dispatch [:timeline/pause])}]
-        [comp/icon-button "pause" {:on-click #(rf/dispatch [:timeline/play])}])
-      [:span.p-2 [time-rendered time]]]
+        [comp/icon-button "play" {:on-click #(.play @engine)}]
+        [comp/icon-button "pause" {:on-click #(.pause @engine)}])
+      [:span.p-2 time]]
      [:> Timeline {:editor-data data
                    :effects effects
-                   :onCursorDrag #(rf/dispatch [:timeline/set-time %1])
-                   :onCursorDragStart #(rf/dispatch [:timeline/pause])
+                   :ref (fn [this]
+                          (when this
+                            (reset! engine this)
+                            (doseq
+                             [[e f]
+                              [["play" #(rf/dispatch [:timeline/play])] ;; Prevent navigation
+                               ["paused" #(rf/dispatch [:timeline/pause])]
+                               ["afterSetTime" #(rf/dispatch-sync [:timeline/set-time (.-time %)])]
+                               ["setTimeByTick" #(rf/dispatch-sync [:timeline/set-time (.-time %)])]]]
+                              (.on (.-listener this) e f))))
+                  ;;  :onCursorDrag #(rf/dispatch [:timeline/set-time %])
+                  ;;  :onCursorDragStart #(rf/dispatch [:timeline/pause])
                    :onClickAction #(rf/dispatch [:element/select (keyword (.. %2 -action -id))])}]]))