♻️ Refactor viewer state management (partial)

frontend/src/app/main/data/comments.cljs

@@ -342,6 +342,13 @@
                   (some? list)
                   (assoc :list list)))))))
 
+(defn update-options
+  [params]
+  (ptk/reify ::update-options
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :comments-local merge params))))
+
 (s/def ::create-draft-params
   (s/keys :req-un [::page-id ::file-id ::position]))
 

frontend/src/app/main/data/viewer.cljs

@@ -7,6 +7,7 @@
 (ns app.main.data.viewer
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.geom.point :as gpt]
    [app.common.pages.helpers :as cph]
    [app.common.spec :as us]
@@ -20,6 +21,9 @@
    [cljs.spec.alpha :as s]
    [potok.core :as ptk]))
 
+(s/def ::nilable-boolean (s/nilable ::us/boolean))
+(s/def ::nilable-animation (s/nilable ::ctsi/animation))
+
 ;; --- Local State Initialization
 
 (def ^:private
@@ -32,7 +36,6 @@
    :comments-show :unresolved
    :selected #{}
    :collapsed #{}
-   :overlays []
    :hover nil
    :share-id ""
    :file-comments-users []})
@@ -329,7 +332,8 @@
 
 (declare flash-done)
 
-(def flash-interactions
+(defn flash-interactions
+  []
   (ptk/reify ::flash-interactions
     ptk/UpdateEvent
     (update [_ state]
@@ -367,7 +371,7 @@
   (ptk/reify ::complete-animation
     ptk/UpdateEvent
     (update [_ state]
-      (d/dissoc-in state [:viewer-local :current-animation]))))
+      (dissoc state :viewer-animation))))
 
 ;; --- Navigation inside page
 
@@ -376,7 +380,7 @@
   (ptk/reify ::go-to-frame-by-index
     ptk/UpdateEvent
     (update [_ state]
-      (assoc-in state [:viewer-local :overlays] []))
+      (assoc state :viewer-overlays []))
 
     ptk/WatchEvent
     (watch [_ state _]
@@ -391,8 +395,9 @@
    (go-to-frame frame-id nil))
 
   ([frame-id animation]
-   (us/verify ::us/uuid frame-id)
+   (us/assert! ::us/uuid frame-id)
-   (us/verify (s/nilable ::ctsi/animation) animation)
+   (us/assert! ::nilable-animation animation)
+
    (ptk/reify ::go-to-frame
      ptk/UpdateEvent
      (update [_ state]
@@ -404,10 +409,10 @@
              frame   (get frames index)]
          (cond-> state
            :always
-           (assoc-in [:viewer-local :overlays] [])
+           (assoc :viewer-overlays [])
 
            (some? animation)
-           (assoc-in [:viewer-local :current-animation]
+           (assoc :viewer-animation
                   {:kind :go-to-frame
                    :orig-frame-id (:id frame)
                    :animation animation}))))
@@ -440,7 +445,7 @@
   (ptk/reify ::go-to-section
     ptk/UpdateEvent
     (update [_ state]
-      (assoc-in state [:viewer-local :overlays] []))
+      (assoc state :viewer-overlays []))
 
     ptk/WatchEvent
     (watch [_ state _]
@@ -451,50 +456,53 @@
 
 ;; --- Overlays
 
-(defn- do-open-overlay
+(defn- open-overlay*
   [state frame position close-click-outside background-overlay animation]
   (cond-> state
     :always
-    (update-in [:viewer-local :overlays] conj
+    (update :viewer-overlays conj
             {:frame frame
+             :id (:id frame)
              :position position
              :close-click-outside close-click-outside
              :background-overlay background-overlay})
+
     (some? animation)
-    (assoc-in [:viewer-local :current-animation]
+    (assoc :viewer-animation
            {:kind :open-overlay
             :overlay-id (:id frame)
             :animation animation})))
 
-(defn- do-close-overlay
+(defn- close-overlay*
   [state frame-id animation]
   (if (nil? animation)
-    (update-in state [:viewer-local :overlays]
+    (update state :viewer-overlays
             (fn [overlays]
               (d/removev #(= (:id (:frame %)) frame-id) overlays)))
-    (assoc-in state [:viewer-local :current-animation]
+    (assoc state :viewer-animation
            {:kind :close-overlay
             :overlay-id frame-id
             :animation animation})))
 
 (defn open-overlay
   [frame-id position close-click-outside background-overlay animation]
-  (us/verify ::us/uuid frame-id)
+  (us/assert! ::us/uuid frame-id)
-  (us/verify ::gpt/point position)
+  (us/assert! ::gpt/point position)
-  (us/verify (s/nilable ::us/boolean) close-click-outside)
+  (us/assert! ::nilable-boolean close-click-outside)
-  (us/verify (s/nilable ::us/boolean) background-overlay)
+  (us/assert! ::nilable-boolean background-overlay)
-  (us/verify (s/nilable ::ctsi/animation) animation)
+  (us/assert! ::nilable-animation animation)
+
   (ptk/reify ::open-overlay
     ptk/UpdateEvent
     (update [_ state]
       (let [route    (:route state)
             qparams  (:query-params route)
             page-id  (:page-id qparams)
-            frames   (get-in state [:viewer :pages page-id :all-frames])
+            frames   (dm/get-in state [:viewer :pages page-id :all-frames])
             frame    (d/seek #(= (:id %) frame-id) frames)
-            overlays (get-in state [:viewer-local :overlays])]
+            overlays (:viewer-overlays state)]
         (if-not (some #(= (:frame %) frame) overlays)
-          (do-open-overlay state
+          (open-overlay* state
                          frame
                          position
                          close-click-outside
@@ -502,13 +510,15 @@
                          animation)
           state)))))
 
+
 (defn toggle-overlay
   [frame-id position close-click-outside background-overlay animation]
-  (us/verify ::us/uuid frame-id)
+  (us/assert! ::us/uuid frame-id)
-  (us/verify ::gpt/point position)
+  (us/assert! ::gpt/point position)
-  (us/verify (s/nilable ::us/boolean) close-click-outside)
+  (us/assert! ::nilable-boolean close-click-outside)
-  (us/verify (s/nilable ::us/boolean) background-overlay)
+  (us/assert! ::nilable-boolean background-overlay)
-  (us/verify (s/nilable ::ctsi/animation) animation)
+  (us/assert! ::nilable-animation animation)
+
   (ptk/reify ::toggle-overlay
     ptk/UpdateEvent
     (update [_ state]
@@ -517,27 +527,28 @@
             page-id  (:page-id qparams)
             frames   (get-in state [:viewer :pages page-id :all-frames])
             frame    (d/seek #(= (:id %) frame-id) frames)
-            overlays (get-in state [:viewer-local :overlays])]
+            overlays (:viewer-overlays state)]
         (if-not (some #(= (:frame %) frame) overlays)
-          (do-open-overlay state
+          (open-overlay* state
                          frame
                          position
                          close-click-outside
                          background-overlay
                          animation)
-          (do-close-overlay state
+          (close-overlay* state
                           (:id frame)
                           (ctsi/invert-direction animation)))))))
 
 (defn close-overlay
   ([frame-id] (close-overlay frame-id nil))
   ([frame-id animation]
-   (us/verify ::us/uuid frame-id)
+   (us/assert! ::us/uuid frame-id)
-   (us/verify (s/nilable ::ctsi/animation) animation)
+   (us/assert! ::nilable-animation animation)
+
    (ptk/reify ::close-overlay
      ptk/UpdateEvent
      (update [_ state]
-       (do-close-overlay state
+       (close-overlay* state
                        frame-id
                        animation)))))
 

frontend/src/app/main/ui/context.cljs

@@ -21,6 +21,8 @@
 (def current-project-id (mf/create-context nil))
 (def current-page-id    (mf/create-context nil))
 (def current-file-id    (mf/create-context nil))
-(def scroll-ctx         (mf/create-context nil))
+(def current-scroll     (mf/create-context nil))
+(def current-zoom       (mf/create-context nil))
+
 (def active-frames-ctx  (mf/create-context nil))
 (def render-thumbnails  (mf/create-context nil))

frontend/src/app/main/ui/shapes/shape.cljs

@@ -11,6 +11,7 @@
    [app.common.pages.helpers :as cph]
    [app.common.uuid :as uuid]
    [app.main.ui.context :as muc]
+   [app.main.ui.hooks :as h]
    [app.main.ui.shapes.attrs :as attrs]
    [app.main.ui.shapes.export :as ed]
    [app.main.ui.shapes.fills :as fills]
@@ -49,14 +50,15 @@
   {::mf/forward-ref true
    ::mf/wrap-props false}
   [props ref]
-  (let [shape            (obj/get props "shape")
+
-        children         (obj/get props "children")
+  (let [shape            (unchecked-get props "shape")
-        pointer-events   (obj/get props "pointer-events")
+        children         (unchecked-get props "children")
-        disable-shadows? (obj/get props "disable-shadows?")
+        pointer-events   (unchecked-get props "pointer-events")
+        disable-shadows? (unchecked-get props "disable-shadows?")
 
         type             (:type shape)
-        render-id      (mf/use-memo #(str (uuid/next)))
+        render-id        (h/use-id)
-        filter-id      (str "filter_" render-id)
+        filter-id        (dm/str "filter_" render-id)
         styles           (-> (obj/create)
                              (obj/set! "pointerEvents" pointer-events)
                              (cond-> (and (:blend-mode shape) (not= (:blend-mode shape) :normal))

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

@@ -27,7 +27,7 @@
    [app.main.ui.static :as static]
    [app.main.ui.viewer.comments :refer [comments-layer comments-sidebar]]
    [app.main.ui.viewer.handoff :as handoff]
-   [app.main.ui.viewer.header :refer [header]]
+   [app.main.ui.viewer.header :as header]
    [app.main.ui.viewer.interactions :as interactions]
    [app.main.ui.viewer.login]
    [app.main.ui.viewer.thumbnails :refer [thumbnails-panel]]
@@ -36,8 +36,15 @@
    [app.util.webapi :as wapi]
    [cuerdas.core :as str]
    [goog.events :as events]
+   [okulary.core :as l]
    [rumext.alpha :as mf]))
 
+(def current-animation-ref
+  (l/derived :viewer-animation st/state))
+
+(def current-overlays-ref
+  (l/derived :viewer-overlays st/state))
+
 (defn- calculate-size
   [objects frame zoom]
   (let [{:keys [x y width height]} (gsb/get-object-bounds objects frame)]
@@ -60,7 +67,6 @@
              :height (* height zoom)
              :vbox   (str "0 0 " width " " height)})))
 
-
 (mf/defc viewer-pagination
   [{:keys [index num-frames left-bar right-bar] :as props}]
   [:*
@@ -75,23 +81,83 @@
     [:div.counter (str/join " / " [(+ index 1) num-frames])]
     [:span]]])
 
+(mf/defc viewer-pagination-and-sidebar
+  {::mf/wrap [mf/memo]}
+  [{:keys [section index frames users frame page]}]
+  (let [comments-local  (mf/deref refs/comments-local)
+        show-sidebar?   (and (= section :comments) (:show-sidebar? comments-local))]
+    [:*
+     [:& viewer-pagination
+      {:index index
+       :num-frames (count (:frames page))
+       :right-bar show-sidebar?}]
+
+     (when show-sidebar?
+       [:& comments-sidebar
+        {:users users
+         :frame frame
+         :page page}])]))
+
+(mf/defc viewer-overlay
+  [{:keys [overlay file page frame zoom wrapper-size close-overlay interactions-mode]}]
+  (let [close-click-outside? (:close-click-outside overlay)
+        background-overlay?  (:background-overlay overlay)
+        overlay-frame        (:frame overlay)
+        overlay-position     (:position overlay)
+
+        size
+        (mf/with-memo [page overlay zoom]
+          (calculate-size (:objects page) (:frame overlay) zoom))
+
+        on-click
+        (mf/use-fn
+         (mf/deps overlay close-overlay close-click-outside?)
+         (fn [_]
+           (when close-click-outside?
+             (close-overlay (:frame overlay)))))]
+
+    [:*
+     (when (or close-click-outside? background-overlay?)
+       [:div.viewer-overlay-background
+        {:class (dom/classnames :visible background-overlay?)
+         :style {:width (:width wrapper-size)
+                 :height (:height wrapper-size)
+                 :position "absolute"
+                 :left 0
+                 :top 0}
+         :on-click on-click}])
+
+     [:div.viewport-container.viewer-overlay
+      {:id (dm/str "overlay-" (:id overlay-frame))
+       :style {:width (:width size)
+               :height (:height size)
+               :left (* (:x overlay-position) zoom)
+               :top (* (:y overlay-position) zoom)}}
+
+      [:& interactions/viewport
+       {:frame overlay-frame
+        :base-frame frame
+        :frame-offset overlay-position
+        :size size
+        :page page
+        :interactions-mode interactions-mode}]]]))
+
+
 (mf/defc viewer-wrapper
   [{:keys [wrapper-size scroll orig-frame orig-viewport-ref orig-size page file users current-viewport-ref
            size frame interactions-mode overlays zoom close-overlay section index] :as props}]
-  (let [{clist :list} (mf/deref refs/comments-local)
-        show-comments-list (and (= section :comments) (= :show clist))]
   [:*
-     [:& viewer-pagination {:index index :num-frames (count (:frames page)) :right-bar show-comments-list}]
+   [:& viewer-pagination-and-sidebar
-
+    {:section section
-     (when show-comments-list
+     :index index
-       [:& comments-sidebar {:users users :frame frame :page page}])
+     :page page
+     :users users
+     :frame frame}]
 
    [:div.viewer-wrapper
     {:style {:width (:width wrapper-size)
              :height (:height wrapper-size)}}
-      [:& (mf/provider ctx/scroll-ctx) {:value @scroll}
     [:div.viewer-clipper
-        [:*
      (when orig-frame
        [:div.viewport-container
         {:ref orig-viewport-ref
@@ -121,48 +187,28 @@
         :frame-offset (gpt/point 0 0)
         :size size
         :page page
-            :file file
-            :users users
         :interactions-mode interactions-mode}]
 
       (for [overlay overlays]
-            (let [size-over (calculate-size (:objects page) (:frame overlay) zoom)]
+        [:& viewer-overlay {:overlay overlay
-              [:*
-               (when (or (:close-click-outside overlay)
-                         (:background-overlay  overlay))
-                 [:div.viewer-overlay-background
-                  {:class (dom/classnames
-                           :visible (:background-overlay overlay))
-                   :style {:width (:width wrapper-size)
-                           :height (:height wrapper-size)
-                           :position "absolute"
-                           :left 0
-                           :top 0}
-                   :on-click #(when (:close-click-outside overlay)
-                                (close-overlay (:frame overlay)))}])
-               [:div.viewport-container.viewer-overlay
-
-                {:id (str "overlay-" (-> overlay :frame :id))
-                 :style {:width (:width size-over)
-                         :height (:height size-over)
-                         :left (* (:x (:position overlay)) zoom)
-                         :top (* (:y (:position overlay)) zoom)}}
-                [:& interactions/viewport
-                 {:frame (:frame overlay)
-                  :base-frame frame
-                  :frame-offset (:position overlay)
-                  :size size-over
-                  :page page
                             :file file
-                  :users users
+                            :key (dm/str (:id overlay))
-                  :interactions-mode interactions-mode}]]]))]]
+                            :page page
+                            :frame frame
+                            :zoom zoom
+                            :wrapper-size wrapper-size
+                            :close-overlay close-overlay
+                            :interactions-mode interactions-mode}])
+
+      ]]
+
 
     (when (= section :comments)
       [:& comments-layer {:file file
                           :users users
                           :frame frame
                           :page page
-                              :zoom zoom}])]]]]))
+                          :zoom zoom}])]])
 
 (mf/defc viewer
   [{:keys [params data]}]
@@ -187,7 +233,8 @@
         orig-viewport-ref    (mf/use-ref nil)
         current-viewport-ref (mf/use-ref nil)
         viewer-section-ref   (mf/use-ref nil)
-        current-animation (:current-animation local)
+
+        current-animation (mf/deref current-animation-ref)
 
         page-id (or page-id (-> file :data :pages first))
 
@@ -206,47 +253,49 @@
         frames (:frames page)
         frame  (get frames index)
 
-        fullscreen? (mf/deref refs/viewer-fullscreen?)
+        fullscreen? (mf/deref header/fullscreen-ref)
         overlays    (:overlays local)
+        overlays    (mf/deref current-overlays-ref)
         scroll      (mf/use-state nil)
 
         orig-frame
         (when (:orig-frame-id current-animation)
           (d/seek #(= (:id %) (:orig-frame-id current-animation)) frames))
 
-        size (mf/use-memo
+        size
-              (mf/deps frame zoom)
+        (mf/with-memo [frame zoom]
-              (fn [] (calculate-size (:objects page) frame zoom)))
+          (calculate-size (:objects page) frame zoom))
 
-        orig-size (mf/use-memo
+        orig-size
-                   (mf/deps orig-frame zoom)
+        (mf/with-memo [orig-frame zoom]
-                   (fn [] (when orig-frame
+          (when orig-frame
-                            (calculate-size (:objects page) orig-frame zoom))))
+            (calculate-size (:objects page) orig-frame zoom)))
 
-        wrapper-size (mf/use-memo
+        wrapper-size
-                      (mf/deps size orig-size zoom)
+        (mf/with-memo [size orig-size zoom]
-                      (fn [] (calculate-wrapper size orig-size zoom)))
+          (calculate-wrapper size orig-size zoom))
 
         interactions-mode
         (:interactions-mode local)
 
         on-click
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps section)
          (fn [_]
            (when (= section :comments)
              (st/emit! (dcm/close-thread)))))
 
         set-up-new-size
-        (mf/use-callback
+        (mf/use-fn
          (fn [_]
            (let [viewer-section (dom/get-element "viewer-section")
                  size (dom/get-client-size viewer-section)]
              (st/emit! (dv/set-viewport-size {:size size})))))
 
         on-scroll
+        (mf/use-fn
          (fn [event]
-          (reset! scroll (dom/get-target-scroll event)))]
+           (reset! scroll (dom/get-target-scroll event))))]
 
     (hooks/use-shortcuts ::viewer sc/shortcuts)
 
@@ -264,14 +313,13 @@
        (let [name (:name file)]
          (dom/set-html-title (str "\u25b6 " (tr "title.viewer" name))))))
 
-    (mf/use-effect
+    (mf/with-effect []
-     (fn []
       (dom/set-html-theme-color clr/gray-50 "dark")
       (let [key1 (events/listen js/window "click" on-click)
             key2 (events/listen (mf/ref-val viewer-section-ref) "scroll" on-scroll)]
         (fn []
           (events/unlistenByKey key1)
-           (events/unlistenByKey key2)))))
+          (events/unlistenByKey key2))))
 
     (mf/use-layout-effect
      (fn []
@@ -362,13 +410,15 @@
              fonts (into #{} (keep :font-id) text-nodes)]
          (run! fonts/ensure-loaded! fonts))))
 
-    [:div#viewer-layout {:class (dom/classnames
+    [:div#viewer-layout
+     {:class (dom/classnames
               :force-visible (:show-thumbnails local)
               :viewer-layout (not= section :handoff)
               :handoff-layout (= section :handoff)
               :fullscreen fullscreen?)}
 
-     [:& header {:project project
+     [:& header/header
+      {:project project
        :index index
        :file file
        :page page
@@ -410,9 +460,11 @@
              :index index
              :viewer-pagination viewer-pagination}]
 
+           [:& (mf/provider ctx/current-scroll) {:value @scroll}
+            [:& (mf/provider ctx/current-zoom) {:value zoom}
              [:& viewer-wrapper
               {:wrapper-size wrapper-size
-             :scroll scroll
+               :scroll @scroll
                :orig-frame orig-frame
                :orig-viewport-ref orig-viewport-ref
                :orig-size orig-size
@@ -426,7 +478,7 @@
                :overlays overlays
                :zoom zoom
                :section section
-             :index index}]))]]]))
+               :index index}]]]))]]]))
 
 ;; --- Component: Viewer Page
 

frontend/src/app/main/ui/viewer/handoff/render.cljs

@@ -188,8 +188,7 @@
 
 (mf/defc render-frame-svg
   [{:keys [page frame local size]}]
-  (let [objects (mf/use-memo
+  (let [objects (mf/with-memo [page frame size]
-                 (mf/deps page frame)
                   (prepare-objects page frame size))
 
         ;; Retrieve frame again with correct modifier

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

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.viewer.header
   (:require
+   [app.common.data.macros :as dm]
    [app.main.data.modal :as modal]
    [app.main.data.viewer :as dv]
    [app.main.data.viewer.shortcuts :as sc]
@@ -19,8 +20,14 @@
    [app.main.ui.viewer.interactions :refer [flows-menu interactions-menu]]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
+   [okulary.core :as l]
    [rumext.alpha :as mf]))
 
+(def fullscreen-ref
+  (l/derived (fn [state]
+               (dm/get-in state [:viewer-local :fullscreen?]))
+             st/state))
+
 (defn open-login-dialog
   []
   (modal/show! :login-register {}))
@@ -65,7 +72,7 @@
 
 (mf/defc header-options
   [{:keys [section zoom page file index permissions]}]
-  (let [fullscreen? (mf/deref refs/viewer-fullscreen?)
+  (let [fullscreen? (mf/deref fullscreen-ref)
 
         toggle-fullscreen
         (mf/use-callback

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

@@ -18,16 +18,17 @@
    [app.main.store :as st]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.icons :as i]
+   [app.main.ui.hooks :as h]
    [app.main.ui.viewer.shapes :as shapes]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.keyboard :as kbd]
+   [app.util.object :as obj]
    [goog.events :as events]
    [rumext.alpha :as mf]))
 
 (defn prepare-objects
   [page frame size]
-  (fn []
   (let [objects   (:objects page)
         frame-id  (:id frame)
         modifier  (-> (gpt/point (:x size) (:y size))
@@ -38,34 +39,71 @@
 
     (->> (cph/get-children-ids objects frame-id)
          (into [frame-id])
-           (reduce update-fn objects)))))
+         (reduce update-fn objects))))
 
-(mf/defc viewport
+(mf/defc viewport-svg
-  {::mf/wrap [mf/memo]}
+  {::mf/wrap [mf/memo]
-  [{:keys [page interactions-mode frame base-frame frame-offset size]}]
+   ::mf/wrap-props false}
-  (let [objects       (mf/use-memo
+  [props]
-                       (mf/deps page frame size)
+  (let [page    (unchecked-get props "page")
+        frame   (unchecked-get props "frame")
+        base    (unchecked-get props "base")
+        offset  (unchecked-get props "offset")
+        size    (unchecked-get props "size")
+
+        vbox    (:vbox size)
+
+        objects (mf/with-memo [page frame size]
                   (prepare-objects page frame size))
 
-        wrapper       (mf/use-memo
+        wrapper (mf/with-memo [objects]
-                       (mf/deps objects)
+                  (shapes/frame-container-factory objects))
-                       #(shapes/frame-container-factory objects))
 
         ;; Retrieve frames again with correct modifier
         frame   (get objects (:id frame))
-        base-frame    (get objects (:id base-frame))
+        base    (get objects (:id base))]
 
-        on-click
+    [:& (mf/provider shapes/base-frame-ctx) {:value base}
+     [:& (mf/provider shapes/frame-offset-ctx) {:value offset}
+      [:svg {:view-box vbox
+             :width (:width size)
+             :height (:height size)
+             :version "1.1"
+             :xmlnsXlink "http://www.w3.org/1999/xlink"
+             :xmlns "http://www.w3.org/2000/svg"
+             :fill "none"}
+       [:& wrapper {:shape frame :view-box vbox}]]]]))
+
+(mf/defc viewport
+  {
+   ::mf/wrap [mf/memo]
+   ::mf/wrap-props false}
+  [props]
+  (let [;; NOTE: with `use-equal-memo` hook we ensure that all values
+        ;; conserves the reference identity for avoid unnecesary dummy
+        ;; rerenders.
+        mode   (h/use-equal-memo (unchecked-get props "interactions-mode"))
+        offset (h/use-equal-memo (unchecked-get props "frame-offset"))
+        size   (h/use-equal-memo (unchecked-get props "size"))
+
+        page   (unchecked-get props "page")
+        frame  (unchecked-get props "frame")
+        base   (unchecked-get props "base-frame")]
+
+
+    (mf/with-effect [mode]
+      (let [on-click
             (fn [_]
-          (when (= interactions-mode :show-on-click)
+              (when (= mode :show-on-click)
-            (st/emit! dv/flash-interactions)))
+                (st/emit! (dv/flash-interactions))))
 
             on-mouse-wheel
             (fn [event]
               (when (kbd/mod? event)
                 (dom/prevent-default event)
-            (let [event (.getBrowserEvent ^js event)
+                (let [event (dom/event->browser-event event)
-                  delta (+ (.-deltaY ^js event) (.-deltaX ^js event))]
+                      delta (+ (.-deltaY ^js event)
+                               (.-deltaX ^js event))]
                   (if (pos? delta)
                     (st/emit! dv/decrease-zoom)
                     (st/emit! dv/increase-zoom)))))
@@ -73,38 +111,29 @@
             on-key-down
             (fn [event]
               (when (kbd/esc? event)
-            (st/emit! (dcm/close-thread))))]
+                (st/emit! (dcm/close-thread))))
+
 
-    (mf/use-effect
-      (mf/deps interactions-mode) ;; on-click event depends on interactions-mode
-      (fn []
             ;; bind with passive=false to allow the event to be cancelled
             ;; https://stackoverflow.com/a/57582286/3219895
-        (let [key1 (events/listen goog/global "wheel" on-mouse-wheel #js {"passive" false})
+            key1 (events/listen goog/global "wheel" on-mouse-wheel #js {"passive" false})
-              key2 (events/listen js/window "keydown" on-key-down)
+            key2 (events/listen goog/global "keydown" on-key-down)
-              key3 (events/listen js/window "click" on-click)]
+            key3 (events/listen goog/global "click" on-click)]
         (fn []
           (events/unlistenByKey key1)
           (events/unlistenByKey key2)
-            (events/unlistenByKey key3)))))
+          (events/unlistenByKey key3))))
-
-    [:& (mf/provider shapes/base-frame-ctx) {:value base-frame}
-     [:& (mf/provider shapes/frame-offset-ctx) {:value frame-offset}
-      [:svg {:view-box (:vbox size)
-             :width (:width size)
-             :height (:height size)
-             :version "1.1"
-             :xmlnsXlink "http://www.w3.org/1999/xlink"
-             :xmlns "http://www.w3.org/2000/svg"
-             :fill "none"}
-       [:& wrapper {:shape frame
-                    :view-box (:vbox size)}]]]]))
 
+    [:& viewport-svg {:page page
+                      :frame frame
+                      :base base
+                      :offset offset
+                      :size size}]))
 
 (mf/defc flows-menu
   {::mf/wrap [mf/memo]}
   [{:keys [page index]}]
-  (let [flows        (get-in page [:options :flows])
+  (let [flows        (dm/get-in page [:options :flows])
         frames       (:frames page)
         frame        (get frames index)
         current-flow (mf/use-state
@@ -135,7 +164,6 @@
             [:span.icon i/tick]
             [:span.label (:name flow)]])]]])))
 
-
 (mf/defc interactions-menu
   []
   (let [local           (mf/deref refs/viewer-local)

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

@@ -206,6 +206,9 @@
               :style {:pointer-events (when frame? "none")}
               :transform (gsh/transform-str shape)}])))
 
+
+;; TODO: use-memo use-fn
+
 (defn generic-wrapper-factory
   "Wrap some svg shape and add interaction controls"
   [component]
@@ -226,20 +229,37 @@
           interactions (:interactions shape)
 
           svg-element? (and (= :svg-raw (:type shape))
-                            (not= :svg (get-in shape [:content :tag])))]
+                            (not= :svg (get-in shape [:content :tag])))
 
-      (mf/use-effect
+
-        (fn []
+          on-mouse-down
+          (mf/use-fn (mf/deps shape base-frame frame-offset objects)
+                     #(on-mouse-down % shape base-frame frame-offset objects))
+
+          on-mouse-up
+          (mf/use-fn (mf/deps shape base-frame frame-offset objects)
+                     #(on-mouse-up % shape base-frame frame-offset objects))
+
+          on-mouse-enter
+          (mf/use-fn (mf/deps shape base-frame frame-offset objects)
+                     #(on-mouse-enter % shape base-frame frame-offset objects))
+
+          on-mouse-leave
+          (mf/use-fn (mf/deps shape base-frame frame-offset objects)
+                     #(on-mouse-leave % shape base-frame frame-offset objects))]
+
+
+      (mf/with-effect []
         (let [sems (on-load shape base-frame frame-offset objects)]
-            #(run! tm/dispose! sems))))
+          (partial run! tm/dispose! sems)))
 
       (if-not svg-element?
         [:> shape-container {:shape shape
                              :cursor (when (ctsi/actionable? interactions) "pointer")
-                             :on-mouse-down #(on-mouse-down % shape base-frame frame-offset objects)
+                             :on-mouse-down on-mouse-down
-                             :on-mouse-up #(on-mouse-up % shape base-frame frame-offset objects)
+                             :on-mouse-up on-mouse-up
-                             :on-mouse-enter #(on-mouse-enter % shape base-frame frame-offset objects)
+                             :on-mouse-enter on-mouse-enter
-                             :on-mouse-leave #(on-mouse-leave % shape base-frame frame-offset objects)}
+                             :on-mouse-leave on-mouse-leave}
 
          [:& component {:shape shape
                         :frame frame
@@ -311,6 +331,7 @@
                                   #js {:shape shape
                                        :childs childs
                                        :objects objects})]
+
         [:> frame-wrapper props]))))
 
 (defn group-container-factory

frontend/src/app/util/dom.cljs

@@ -37,6 +37,14 @@
   (when (some? e)
     (.-target e)))
 
+(defn event->native-event
+  [^js e]
+  (.-nativeEvent e))
+
+(defn event->browser-event
+  [^js e]
+  (.getBrowserEvent e))
+
 ;; --- New methods
 
 (declare get-elements-by-tag)