🎉 Go to main component from context menu or with double click on the asset

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

@@ -1094,7 +1094,7 @@
                                                             :colors #{}
                                                             :typographies #{}}))))
 (defn go-to-main-instance
-  [page-id shape-id on-page-selected]
+  [page-id shape-id]
   (us/verify ::us/uuid page-id)
   (us/verify ::us/uuid shape-id)
   (ptk/reify ::go-to-main-instance
@@ -1102,22 +1102,19 @@
     (watch [_ state stream]
       (let [current-page-id (:current-page-id state)]
         (if (= page-id current-page-id)
-          (do
-            (on-page-selected)
-            (rx/of (dws/select-shapes (lks/set shape-id))))
+          (rx/of (dws/select-shapes (lks/set shape-id))
+                 dwz/zoom-to-selected-shape)
           (let [project-id      (:current-project-id state)
                 file-id         (:current-file-id state)
                 pparams         {:file-id file-id :project-id project-id}
                 qparams         {:page-id page-id}]
-                ;; qparams         {:page-id page-id :layout :assets}]
             (rx/merge
              (rx/of (rt/nav :workspace pparams qparams))
              (->> stream
-                  (rx/filter (ptk/type? ::dwv/initialize-viewport))
+                  (rx/filter (ptk/type? ::dwv/page-loaded))
                   (rx/take 1)
-                  (rx/mapcat #(do
-                                (on-page-selected)
-                                (rx/of (dws/select-shapes (lks/set shape-id)))))))))))))
+                  (rx/mapcat #(rx/of (dws/select-shapes (lks/set shape-id))
+                                     dwz/zoom-to-selected-shape))))))))))
 
 (defn go-to-component
   [component-id]
@@ -1133,7 +1130,7 @@
                 component          (ctkl/get-component file-data component-id)
                 main-instance-id   (:main-instance-id component)
                 main-instance-page (:main-instance-page component)]
-            (rx/of (go-to-main-instance main-instance-page main-instance-id identity)))
+            (rx/of (go-to-main-instance main-instance-page main-instance-id)))
           (let [project-id    (get-in state [:workspace-project :id])
                 file-id       (get-in state [:workspace-file :id])
                 page-id       (get state :current-page-id)
@@ -2090,6 +2087,7 @@
 (dm/export dwv/update-viewport-size)
 (dm/export dwv/start-panning)
 (dm/export dwv/finish-panning)
+(dm/export dwv/page-loaded)
 
 ;; Undo
 (dm/export dwu/reinitialize-undo)

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

@@ -12,7 +12,7 @@
    [app.common.geom.shapes :as gsh]
    [app.common.math :as mth]
    [app.common.pages.helpers :as cph]
-   [app.common.spec :as us] 
+   [app.common.spec :as us]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.streams :as ms]
    [beicon.core :as rx]
@@ -146,3 +146,11 @@
     (update [_ state]
       (-> state
           (update :workspace-local dissoc :panning)))))
+
+
+;; This event does nothing. Is only for subscibe and know when the page has been loaded
+(defn page-loaded [_page-id]
+  (ptk/reify ::page-loaded
+    ptk/UpdateEvent
+    (update [_ state]
+      state)))

frontend/src/app/main/ui/workspace/sidebar/assets.cljs

@@ -378,17 +378,21 @@
            (st/emit! (dw/unselect-all-assets))))
 
         on-component-click
+        (mf/use-fn
+         (mf/deps component selected-components)
+         (fn [event]
+           (dom/stop-propagation event)
+           (on-asset-click event (:id component) unselect-all)))
+
+        on-component-double-click
         (mf/use-fn
           (mf/deps component selected-components)
           (fn [event]
             (dom/stop-propagation event)
             (let [main-instance-id (:main-instance-id component)
                   main-instance-page (:main-instance-page component)]
-              (if (and main-instance-id main-instance-page)
-                (st/emit! (dw/go-to-main-instance main-instance-page main-instance-id
-                                                  #(on-asset-click event (:id component) unselect-all)))
-                ;; This may occur when :components-v2 is disabled
-                (on-asset-click event (:id component) unselect-all)))))
+              (when (and main-instance-id main-instance-page) ;; Only when :components-v2 is enabled
+                (st/emit! (dw/go-to-main-instance main-instance-page main-instance-id))))))
 
         on-drop
         (mf/use-fn
@@ -428,6 +432,7 @@
            :id (str "component-shape-id-" (:id component))
            :draggable (not workspace-read-only?)
            :on-click on-component-click
+           :on-double-click on-component-double-click
            :on-context-menu (on-context-menu (:id component))
            :on-drag-start on-component-drag-start
            :on-drag-enter on-drag-enter

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

@@ -236,6 +236,7 @@
     (hooks/setup-viewport-modifiers modifiers base-objects)
     (hooks/setup-shortcuts node-editing? drawing-path? text-editing?)
     (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox)
+    (hooks/setup-page-loaded page-id)
 
     [:div.viewport
      [:div.viewport-overlays

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

@@ -75,6 +75,14 @@
          ;; We schedule the event so it fires after `initialize-page` event
          (timers/schedule #(st/emit! (dw/initialize-viewport size))))))))
 
+
+(defn setup-page-loaded [page-id]
+  (mf/use-effect
+   (mf/deps page-id)
+   (fn []
+     ;; We schedule the event so it fires after `initialize-page` event
+     (timers/schedule #(st/emit! (dw/page-loaded page-id))))))
+
 (defn setup-cursor [cursor alt? mod? space? panning drawing-tool drawing-path? path-editing? z? workspace-read-only?]
   (mf/use-effect
    (mf/deps @cursor @alt? @mod? @space? panning drawing-tool drawing-path? path-editing? z? workspace-read-only?)