✨ Improved workspace refs

frontend/src/app/main/refs.cljs

@@ -54,6 +54,23 @@
   [id]
   (l/derived #(contains? % id) selected-shapes))
 
+(def viewport-data
+  (l/derived #(select-keys % [:options-mode
+                              :zoom
+                              :vport
+                              :vbox
+                              :edition
+                              :edit-path
+                              :tooltip
+                              :selected
+                              :panning
+                              :picking-color?
+                              :transform
+                              :hover
+                              :modifiers
+                              :selrect])
+             workspace-local =))
+
 (def selected-zoom
   (l/derived :zoom workspace-local))
 

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

@@ -60,7 +60,8 @@
 (mf/defc workspace-content
   {::mf/wrap-props false}
   [props]
-  (let [local  (mf/deref refs/workspace-local)
+  (let [local  (mf/deref refs/viewport-data)
+        {:keys [zoom vbox vport options-mode selected]} local
         file   (obj/get props "file")
         layout (obj/get props "layout")]
     [:*
@@ -72,9 +73,9 @@
      [:section.workspace-content
       [:section.workspace-viewport
        (when (contains? layout :rules)
-         [:& workspace-rules {:zoom (:zoom local)
+         [:& workspace-rules {:zoom zoom
-                              :vbox (:vbox local)
+                              :vbox vbox
-                              :vport (:vport local)}])
+                              :vport vport}])
 
        [:& viewport-actions]
        [:& viewport {:file file
@@ -85,8 +86,8 @@
 
      ;; Aside
      [:& left-sidebar {:layout layout}]
-     [:& right-sidebar {:section (:options-mode local)
+     [:& right-sidebar {:section options-mode
-                        :selected (:selected local)}]]))
+                        :selected selected}]]))
 
 (def trimmed-page-ref (l/derived :trimmed-page st/state =))
 

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

@@ -56,13 +56,13 @@
           :opacity line-opacity}])
 
 (defn get-snap
-  [coord {:keys [shapes page-id filter-shapes local]}]
+  [coord {:keys [shapes page-id filter-shapes modifiers]}]
   (let [shape (if (> (count shapes) 1)
                 (->> shapes (map gsh/transform-shape) gsh/selection-rect (gsh/setup {:type :rect}))
                 (->> shapes (first)))
 
-        shape (if (:modifiers local)
+        shape (if modifiers
-                (-> shape (assoc :modifiers (:modifiers local)) gsh/transform-shape)
+                (-> shape (assoc :modifiers modifiers) gsh/transform-shape)
                 shape)
 
         frame-id (snap/snap-frame-id shapes)]
@@ -108,7 +108,7 @@
                                         (hash-map coord fixedv (flip coord) maxv)]))))
 
 (mf/defc snap-feedback
-  [{:keys [shapes page-id filter-shapes zoom local] :as props}]
+  [{:keys [shapes page-id filter-shapes zoom modifiers] :as props}]
   (let [state (mf/use-state [])
         subject (mf/use-memo #(rx/subject))
 
@@ -134,7 +134,7 @@
          #(rx/dispose! sub))))
 
     (mf/use-effect
-     (mf/deps shapes local)
+     (mf/deps shapes modifiers)
      (fn []
        (rx/push! subject props)))
 
@@ -155,7 +155,7 @@
 
 (mf/defc snap-points
   {::mf/wrap [mf/memo]}
-  [{:keys [layout zoom selected page-id drawing transform local] :as props}]
+  [{:keys [layout zoom selected page-id drawing transform modifiers] :as props}]
   (let [shapes        (mf/deref (refs/objects-by-id selected))
         filter-shapes (mf/deref refs/selected-shapes-with-children)
         filter-shapes (fn [id]
@@ -164,13 +164,11 @@
                               (not (contains? layout :snap-grid)))
                           (or (filter-shapes id)
                               (not (contains? layout :dynamic-alignment)))))
-        ;; current-transform (mf/deref refs/current-transform)
-        ;; snap-data (mf/deref refs/workspace-snap-data)
         shapes    (if drawing [drawing] shapes)]
     (when (or drawing transform)
       [:& snap-feedback {:shapes shapes
                          :page-id page-id
                          :filter-shapes filter-shapes
                          :zoom zoom
-                         :local local}])))
+                         :modifiers modifiers}])))
 

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

@@ -227,9 +227,10 @@
 
 (mf/defc viewport
   [{:keys [local layout file] :as props}]
-  (let [{:keys [options-mode
+  (let [;; When adding data from workspace-local revisit `app.main.ui.workspace` to check
+        ;; that the new parameter is sent
+        {:keys [options-mode
                 zoom
-                flags
                 vport
                 vbox
                 edition
@@ -237,7 +238,11 @@
                 tooltip
                 selected
                 panning
-                picking-color?]} local
+                picking-color?
+                transform
+                hover
+                modifiers
+                selrect]} local
 
         page-id       (mf/use-ctx ctx/current-page-id)
 
@@ -258,9 +263,9 @@
 
         show-grids?          (contains? layout :display-grid)
         show-snap-points?    (and (contains? layout :dynamic-alignment)
-                                  (or drawing-obj (:transform local)))
+                                  (or drawing-obj transform))
         show-snap-distance?  (and (contains? layout :dynamic-alignment)
-                                  (= (:transform local) :move)
+                                  (= transform :move)
                                   (not (empty? selected)))
 
         on-mouse-down
@@ -630,9 +635,9 @@
                           :layout layout}])
 
      (when (= drawing-tool :comments)
-       [:& comments-layer {:vbox (:vbox local)
+       [:& comments-layer {:vbox vbox
-                           :vport (:vport local)
+                           :vport vport
-                           :zoom (:zoom local)
+                           :zoom zoom
                            :drawing drawing
                            :page-id page-id
                            :file-id (:id file)}])
@@ -665,19 +670,19 @@
                                      "none"
                                      "auto")}}
        [:& frames {:key page-id
-                   :hover (:hover local)
+                   :hover hover
                    :selected selected
                    :edition edition}]
 
-       [:g {:style {:display (when (not= :move (:transform local)) "none")}}
+       [:g {:style {:display (when (not= :move transform) "none")}}
-        [:& ghost-frames {:modifiers (:modifiers local)
+        [:& ghost-frames {:modifiers modifiers
                           :selected selected}]]
 
        (when (seq selected)
          [:& selection-handlers {:selected selected
                                  :zoom zoom
                                  :edition edition
-                                 :show-distances (and (not (:transform local)) @alt?)}])
+                                 :show-distances (and (not transform) @alt?)}])
 
        (when (= (count selected) 1)
          [:& gradient-handlers {:id (first selected)
@@ -687,24 +692,24 @@
          [:& draw-area {:shape drawing-obj
                         :zoom zoom
                         :tool drawing-tool
-                        :modifiers (:modifiers local)}])
+                        :modifiers modifiers}])
 
        (when show-grids?
          [:& frame-grid {:zoom zoom}])
 
        (when show-snap-points?
          [:& snap-points {:layout layout
-                          :transform (:transform local)
+                          :transform transform
                           :drawing drawing-obj
                           :zoom zoom
                           :page-id page-id
                           :selected selected
-                          :local local}])
+                          :modifiers modifiers}])
 
        (when show-snap-distance?
          [:& snap-distances {:layout layout
                              :zoom zoom
-                             :transform (:transform local)
+                             :transform transform
                              :selected selected
                              :page-id page-id}])
 
@@ -712,7 +717,8 @@
          [:& cursor-tooltip {:zoom zoom :tooltip tooltip}])]
 
       [:& presence/active-cursors {:page-id page-id}]
-      [:& selection-rect {:data (:selrect local)}]
+      [:& selection-rect {:data selrect}]
+
       (when (= options-mode :prototype)
         [:& interactions {:selected selected}])]]))