🐛 Fix frame flows issues related to the refactor

frontend/src/app/main/ui/viewer/header.cljs

@@ -18,7 +18,7 @@
    [app.main.ui.formats :as fmt]
    [app.main.ui.icons :as i]
    [app.main.ui.viewer.comments :refer [comments-menu]]
-   [app.main.ui.viewer.interactions :refer [flows-menu interactions-menu]]
+   [app.main.ui.viewer.interactions :refer [flows-menu* interactions-menu]]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [okulary.core :as l]
@@ -172,7 +172,7 @@
      (case section
        :interactions [:*
                       (when index
-                        [:& flows-menu {:page page :index index}])
+                        [:> flows-menu* {:page page :index index}])
                       [:& interactions-menu {:interactions-mode interactions-mode}]]
        :comments [:& comments-menu]
        [:div {:class (stl/css :view-options)}])

frontend/src/app/main/ui/viewer/interactions.cljs

@@ -218,25 +218,27 @@
                       :delta delta
                       :fixed? fixed?}]))
 
-(mf/defc flows-menu
-  {::mf/wrap [mf/memo]}
+(mf/defc flows-menu*
+  {::mf/wrap [mf/memo]
+   ::mf/props :obj}
   [{:keys [page index]}]
-  (let [flows            (:flows page)
+  (let [flows            (not-empty (:flows page))
         frames           (:frames page)
 
         frame            (get frames index)
-        current-flow*    (mf/use-state
-                          #(ctp/get-frame-flow flows (:id frame)))
+        frame-id         (dm/get-prop frame :id)
 
+        current-flow*    (mf/use-state #(ctp/get-frame-flow flows frame-id))
         current-flow     (deref current-flow*)
 
         show-dropdown?*  (mf/use-state false)
         show-dropdown?   (deref show-dropdown?*)
+
         toggle-dropdown  (mf/use-fn #(swap! show-dropdown?* not))
         hide-dropdown    (mf/use-fn #(reset! show-dropdown?* false))
 
         select-flow
-        (mf/use-callback
+        (mf/use-fn
          (fn [event]
            (let [flow (-> (dom/get-current-target event)
                           (dom/get-data "value")
@@ -244,7 +246,7 @@
              (reset! current-flow* flow)
              (st/emit! (dv/go-to-frame (:starting-frame flow))))))]
 
-    (when (seq flows)
+    (when flows
       [:div {:on-click toggle-dropdown
              :class (stl/css :view-options)}
        [:span {:class (stl/css :icon)} i/play]
@@ -253,15 +255,16 @@
        [:& dropdown {:show show-dropdown?
                      :on-close hide-dropdown}
         [:ul {:class (stl/css :dropdown)}
-         (for [[index flow] (d/enumerate flows)]
-           [:li {:key (dm/str "flow-" (:id flow) "-" index)
+         (for [[flow-id flow] flows]
+           [:li {:key (dm/str "flow-" flow-id)
                  :class (stl/css-case :dropdown-element true
-                                      :selected (= (:id flow) (:id current-flow)))
-                         ;; This is not a best practise, is not very performant Do not reproduce
+                                      :selected (= flow-id (:id current-flow)))
+                 ;; WARN: This is not a best practise, is not very
+                 ;; performant DO NOT COPY
                  :data-value (pr-str flow)
                  :on-click select-flow}
             [:span {:class (stl/css :label)} (:name flow)]
-            (when (= (:id flow) (:id current-flow))
+            (when (= flow-id (:id current-flow))
               [:span {:class (stl/css :icon)} i/tick])])]]])))
 
 (mf/defc interactions-menu

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -480,7 +480,7 @@
          :focus focus}]
 
        (when show-prototypes?
-         [:& widgets/frame-flows
+         [:> widgets/frame-flows*
           {:flows (:flows page)
            :objects objects-modified
            :selected selected

frontend/src/app/main/ui/workspace/viewport/widgets.cljs

@@ -92,23 +92,22 @@
                 "#8f9da3") ;; TODO: Set this color on the DS
 
         on-pointer-down
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps (:id frame) on-frame-select workspace-read-only?)
-         (fn [bevent]
-           (let [event  (.-nativeEvent bevent)]
-             (when (= 1 (.-which event))
-               (dom/prevent-default bevent)
-               (dom/stop-propagation bevent)
-               (on-frame-select event (:id frame))))))
+         (fn [event]
+           (when (dom/left-mouse? event)
+             (dom/prevent-default event)
+             (dom/stop-propagation event)
+             (on-frame-select event (:id frame)))))
 
         on-double-click
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps (:id frame))
          #(st/emit! (dw/go-to-layout :layers)
                     (dw/start-rename-shape (:id frame))))
 
         on-context-menu
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps frame workspace-read-only?)
          (fn [bevent]
            (let [event    (.-nativeEvent bevent)
@@ -119,13 +118,13 @@
                (st/emit! (dw/show-shape-context-menu {:position position :shape frame}))))))
 
         on-pointer-enter
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps (:id frame) on-frame-enter)
          (fn [_]
            (on-frame-enter (:id frame))))
 
         on-pointer-leave
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps (:id frame) on-frame-leave)
          (fn [_]
            (on-frame-leave (:id frame))))
@@ -221,76 +220,75 @@
                           :on-frame-select on-frame-select
                           :grid-edition? (and (= id edition) grid-edition?)}]))]))
 
-(mf/defc frame-flow
-  [{:keys [flow frame selected? zoom on-frame-enter on-frame-leave on-frame-select]}]
-  (let [{:keys [x y]} frame
-        flow-pos (gpt/point x (- y (/ 35 zoom)))
+(mf/defc frame-flow*
+  {::mf/props :obj}
+  [{:keys [flow frame is-selected zoom on-frame-enter on-frame-leave on-frame-select]}]
+  (let [x         (dm/get-prop frame :x)
+        y         (dm/get-prop frame :y)
+        pos       (gpt/point x (- y (/ 35 zoom)))
+
+        frame-id  (:id frame)
+        flow-id   (:id flow)
+        flow-name (:name flow)
 
         on-pointer-down
-        (mf/use-callback
-         (mf/deps (:id frame) on-frame-select)
-         (fn [bevent]
-           (let [event  (.-nativeEvent bevent)
-                 params {:section "interactions"
-                         :frame-id (:id frame)}]
-             (when (= 1 (.-which event))
+        (mf/use-fn
+         (mf/deps frame-id on-frame-select)
+         (fn [event]
+           (let [params {:section "interactions"
+                         :frame-id frame-id}]
+             (when (dom/left-mouse? event)
                (dom/prevent-default event)
                (dom/stop-propagation event)
                (st/emit! (dw/go-to-viewer params))))))
 
         on-double-click
-        (mf/use-callback
-         (mf/deps (:id frame))
-         #(st/emit! (dwi/start-rename-flow (:id flow))))
+        (mf/use-fn
+         (mf/deps flow-id)
+         #(st/emit! (dwi/start-rename-flow flow-id)))
 
         on-pointer-enter
-        (mf/use-callback
-         (mf/deps (:id frame) on-frame-enter)
+        (mf/use-fn
+         (mf/deps frame-id on-frame-enter)
          (fn [_]
-           (on-frame-enter (:id frame))))
+           (when (fn? on-frame-enter)
+             (on-frame-enter frame-id))))
 
         on-pointer-leave
-        (mf/use-callback
-         (mf/deps (:id frame) on-frame-leave)
+        (mf/use-fn
+         (mf/deps frame-id on-frame-leave)
          (fn [_]
-           (on-frame-leave (:id frame))))]
+           (when (fn? on-frame-leave)
+             (on-frame-leave frame-id))))]
 
     [:foreignObject {:x 0
                      :y -15
                      :width 100000
                      :height 24
-                     :transform (vwu/text-transform flow-pos zoom)}
+                     :transform (vwu/text-transform pos zoom)}
      [:div {:class (stl/css-case :flow-badge true
-                                 :selected selected?)}
+                                 :selected is-selected)}
       [:div {:class (stl/css :content)
              :on-pointer-down on-pointer-down
              :on-double-click on-double-click
              :on-pointer-enter on-pointer-enter
              :on-pointer-leave on-pointer-leave}
        i/play
-       [:span (:name flow)]]]]))
+       [:span flow-name]]]]))
 
-(mf/defc frame-flows
-  {::mf/wrap-props false}
-  [props]
-  (let [flows     (unchecked-get props "flows")
-        objects   (unchecked-get props "objects")
-        zoom      (unchecked-get props "zoom")
-        selected  (or (unchecked-get props "selected") #{})
-
-        on-frame-enter  (unchecked-get props "on-frame-enter")
-        on-frame-leave  (unchecked-get props "on-frame-leave")
-        on-frame-select (unchecked-get props "on-frame-select")]
-    [:g.frame-flows
-     ;; FIXME: enumerate is not necessary here
-     (for [[index flow] (d/enumerate flows)]
-       (let [frame (get objects (:starting-frame flow))]
-         [:& frame-flow {:key (dm/str (:id frame) "-" index)
-                         :flow flow
-                         :frame frame
-                         :selected? (contains? selected (:id frame))
-                         :zoom zoom
-                         :on-frame-enter on-frame-enter
-                         :on-frame-leave on-frame-leave
-                         :on-frame-select on-frame-select}]))]))
+(mf/defc frame-flows*
+  {::mf/props :obj}
+  [{:keys [flows objects zoom selected on-frame-enter on-frame-leave on-frame-select]}]
+  [:g.frame-flows
+   (for [[flow-id flow] flows]
+     (let [frame    (get objects (:starting-frame flow))
+           frame-id (dm/get-prop frame :id)]
+       [:> frame-flow* {:key (dm/str frame-id "-" flow-id)
+                        :flow flow
+                        :frame frame
+                        :is-selected (contains? selected frame-id)
+                        :zoom zoom
+                        :on-frame-enter on-frame-enter
+                        :on-frame-leave on-frame-leave
+                        :on-frame-select on-frame-select}]))])