Merge pull request #3561 from penpot/superalex-click-flow-tag-open-viewer

✨ Click on flow tag open viewer

CHANGES.md

@@ -5,6 +5,7 @@
 ### :sparkles: New features
 
 - Navigate up in layer hierarchy with Shift+Enter shortcut [Taiga #5734](https://tree.taiga.io/project/penpot/us/5734)
+- Click on the flow tags open viewer with the selected frame [Taiga #5044](https://tree.taiga.io/project/penpot/us/5044)
 
 ## 1.19.1
 

frontend/resources/styles/main/partials/sidebar-interactions.scss

@@ -176,6 +176,7 @@
 }
 
 .flow-badge {
+  cursor: pointer;
   display: flex;
 
   & .content {
@@ -199,7 +200,8 @@
     }
   }
 
-  &.selected .content {
+  &.selected .content,
+  &:hover .content {
     background-color: $color-primary;
 
     & svg {

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

@@ -155,6 +155,8 @@
                 (rx/of (df/fonts-fetched fonts)
                        (bundle-fetched (merge bundle params))))))))))
 
+(declare go-to-frame)
+(declare go-to-frame-by-index)
 (declare go-to-frame-auto)
 
 (defn bundle-fetched
@@ -182,16 +184,20 @@
 
       ptk/WatchEvent
       (watch [_ state _]
-        (let [route   (:route state)
-              qparams (:query-params route)
-              index   (:index qparams)]
+        (let [route    (:route state)
+              qparams  (:query-params route)
+              index    (:index qparams)
+              frame-id (:frame-id qparams)]
           (rx/merge
            (rx/of (case (:zoom qparams)
                     "fit" zoom-to-fit
                     "fill" zoom-to-fill
                     nil))
-           (when (nil? index)
-             (rx/of (go-to-frame-auto)))))))))
+           (rx/of
+             (cond
+               (some? frame-id) (go-to-frame (uuid frame-id))
+               (some? index) (go-to-frame-by-index index)
+               :else (go-to-frame-auto)))))))))
 
 (defn fetch-comment-threads
   [{:keys [file-id page-id share-id] :as params}]

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

@@ -1376,7 +1376,7 @@
 
 (defn go-to-viewer
   ([] (go-to-viewer {}))
-  ([{:keys [file-id page-id section]}]
+  ([{:keys [file-id page-id section frame-id]}]
    (ptk/reify ::go-to-viewer
      ptk/WatchEvent
      (watch [_ state _]
@@ -1384,7 +1384,9 @@
              pparams {:file-id (or file-id current-file-id)}
              qparams (cond-> {:page-id (or page-id current-page-id)}
                        (some? section)
-                       (assoc :section section))]
+                       (assoc :section section)
+                       (some? frame-id)
+                       (assoc :frame-id frame-id))]
          (rx/of ::dwp/force-persist
                 (rt/nav-new-window* {:rname :viewer
                                      :path-params pparams

frontend/src/app/main/ui.cljs

@@ -106,7 +106,7 @@
 
        :viewer
        (let [{:keys [query-params path-params]} route
-             {:keys [index share-id section page-id interactions-mode] :or {section :interactions interactions-mode :show-on-click}} query-params
+             {:keys [index share-id section page-id interactions-mode frame-id] :or {section :interactions interactions-mode :show-on-click}} query-params
              {:keys [file-id]} path-params]
          (if (:token query-params)
            [:& viewer/breaking-change-notice]
@@ -119,7 +119,8 @@
                                    :interactions-show? (case (keyword interactions-mode)
                                                          :hide false
                                                          :show true
-                                                         :show-on-click false)}]))
+                                                         :show-on-click false)
+                                   :frame-id frame-id}]))
 
        :workspace
        (let [project-id (some-> params :path :project-id uuid)

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

@@ -222,11 +222,13 @@
         (mf/use-callback
          (mf/deps (:id frame) on-frame-select)
          (fn [bevent]
-           (let [event  (.-nativeEvent bevent)]
+           (let [event  (.-nativeEvent bevent)
+                 params {:section "interactions"
+                         :frame-id (:id frame)}]
              (when (= 1 (.-which event))
                (dom/prevent-default event)
                (dom/stop-propagation event)
-               (on-frame-select event (:id frame))))))
+               (st/emit! (dw/go-to-viewer params))))))
 
         on-double-click
         (mf/use-callback