enhance timeline

src/renderer/db.cljs

@@ -61,4 +61,6 @@
             :fullscreen? false
             :header? true}
    :timeline {:time 0
+              :grid-snap? false
+              :guide-snap? true
               :paused? false}})

src/renderer/frame/views.cljs

@@ -24,7 +24,6 @@
     (ra/create-class
      {:component-did-mount
       (fn []
-        (rf/dispatch [:timeline/pause])
         (doseq
          [event ["pointermove" "pointerup" "wheel"]]
           (.addEventListener frame-window event mouse-handler #js {:passive false})))

src/renderer/timeline/events.cljs

@@ -32,11 +32,20 @@
 (rf/reg-event-fx
  :timeline/play
  (fn [{:keys [db]} _]
-   {:db (assoc-in db [:timeline :paused?] false)
-    ::unpause-animations nil}))
+   {:db (assoc-in db [:timeline :paused?] false)}))
 
 (rf/reg-event-fx
  :timeline/set-time
  (fn [{:keys [db]} [_ time]]
    {:db (assoc-in db [:timeline :time] time)
     ::set-current-time time}))
+
+ (rf/reg-event-db
+  :timeline/set-grid-snap
+  (fn [db [_ state]]
+    (assoc-in db [:timeline :grid-snap?] state)))
+
+ (rf/reg-event-db
+ :timeline/set-guide-snap
+ (fn [db [_ state]]
+   (assoc-in db [:timeline :guide-snap?] state)))

src/renderer/timeline/subs.cljs

@@ -67,3 +67,13 @@
  :timeline/paused?
  (fn [db _]
    (-> db :timeline :paused?)))
+
+(rf/reg-sub
+ :timeline/grid-snap?
+ (fn [db _]
+   (-> db :timeline :grid-snap?)))
+
+(rf/reg-sub
+ :timeline/guide-snap?
+ (fn [db _]
+   (-> db :timeline :guide-snap?)))

src/renderer/timeline/views.cljs

@@ -1,35 +1,80 @@
 (ns renderer.timeline.views
   (:require
+   ["@radix-ui/react-switch" :as Switch]
    ["@xzdarcy/react-timeline-editor" :refer [Timeline]]
+   ["react" :as react]
    [re-frame.core :as rf]
-   [reagent.core :as r]
+   [reagent.core :as ra]
    [renderer.components :as comp]))
 
+(defn toolbar
+  [editor-ref]
+  (let [time @(rf/subscribe [:timeline/time-formatted])
+        paused? @(rf/subscribe [:timeline/paused?])
+        grid-snap? @(rf/subscribe [:timeline/grid-snap?])
+        guide-snap? @(rf/subscribe [:timeline/guide-snap?])]
+    [:div.toolbar.level-1
+     (if paused?
+       [comp/icon-button "play" {:on-click #(.play (.-current editor-ref))}]
+       [comp/icon-button "pause" {:on-click #(.pause (.-current editor-ref))}])
+     [:span.p-2.font-mono time]
+     [:span.v-divider]
+     [:span.inline-flex.items-center
+      [:label
+       {:for "grid-snap"
+        :style {:background "transparent"
+                :height "auto"}}
+       "Grid snap"]
+      [:> Switch/Root
+       {:class "switch-root"
+        :id "grid-snap"
+        :default-checked grid-snap?
+        :on-checked-change #(rf/dispatch [:timeline/set-grid-snap %])}
+       [:> Switch/Thumb {:class "switch-thumb"}]]]
+     [:span.inline-flex.items-center
+      [:label
+       {:for "guide-snap"
+        :style {:background "transparent"
+                :height "auto"}}
+       "Line snap"]
+      [:> Switch/Root
+       {:class "switch-root"
+        :id "guide-snap"
+        :default-checked guide-snap?
+        :on-checked-change #(rf/dispatch [:timeline/set-guide-snap %])}
+       [:> Switch/Thumb {:class "switch-thumb"}]]]]))
+
 (defn root
   []
-  (let [data @(rf/subscribe [:timeline/rows])
-        effects @(rf/subscribe [:timeline/effects])
-        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 #(.play @engine)}]
-        [comp/icon-button "pause" {:on-click #(.pause @engine)}])
-      [:span.p-2 time]]
-     [:> Timeline {:editor-data data
-                   :effects effects
-                   :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))])}]]))
+  (let [ref (react/createRef)]
+    (ra/create-class
+     {:component-did-mount
+      (fn []
+        (rf/dispatch [:timeline/pause])
+        (rf/dispatch [:timeline/set-time 0])
+        (doseq
+         [[e f]
+          [["play" #(rf/dispatch-sync [:timeline/play])] ;; Prevent navigation
+           ["paused" #(rf/dispatch-sync [:timeline/pause])]
+           ["afterSetTime" #(rf/dispatch-sync [:timeline/set-time (.-time %)])]
+           ["setTimeByTick" #(rf/dispatch-sync [:timeline/set-time (.-time %)])]]]
+          (.on (.-listener (.-current ref)) e f)))
+
+      :component-will-unmount
+      #(.offAll (.-listener (.-current ref)))
+
+      :reagent-render
+      (fn []
+        (let [data @(rf/subscribe [:timeline/rows])
+              effects @(rf/subscribe [:timeline/effects])
+              grid-snap? @(rf/subscribe [:timeline/grid-snap?])
+              guide-snap? @(rf/subscribe [:timeline/guide-snap?])]
+          [:div
+           [toolbar ref]
+           [:> Timeline {:editor-data data
+                         :effects effects
+                         :ref ref
+                         :grid-snap grid-snap?
+                         :drag-line guide-snap?
+                         :auto-scroll true
+                         :on-click-action #(rf/dispatch [:element/select (keyword (.. %2 -action -id))])}]]))})))

src/renderer/tools/animate_motion.cljs

@@ -8,4 +8,5 @@
 (defmethod tools/properties :animateMotion
   []
   {:description "The SVG <animateMotion> element let define how an element 
-                 moves along a motion path."})
+                 moves along a motion path."
+   :attrs []})

src/renderer/tools/animate_transform.cljs

@@ -9,4 +9,5 @@
   []
   {:description "The animateTransform element animates a transformation 
                  attribute on its target element, thereby allowing animations 
-                 to control translation, scaling, rotation, and/or skewing."})
+                 to control translation, scaling, rotation, and/or skewing."
+   :attrs []})