♻️ Move the ghost rendering to separate component.

frontend/src/app/main/refs.cljs

@@ -190,7 +190,6 @@
     (l/derived selector st/state =)))
 
 
-;; TODO: looks very inneficient access method, revisit the usage of this ref
 (def selected-objects-with-children
   (letfn [(selector [state]
             (let [selected (get-in state [:workspace-local :selected])

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

@@ -184,6 +184,33 @@
                            :selected selected
                            :hover hover}])]))
 
+(mf/defc ghost-frames
+  {::mf/wrap-props false}
+  [props]
+  (let [modifiers    (obj/get props "modifiers")
+        selected     (obj/get props "selected")
+
+        sobjects     (mf/deref refs/selected-objects)
+        selrect-orig (gsh/selection-rect sobjects)
+
+        xf           (comp
+                      (map #(assoc % :modifiers modifiers))
+                      (map gsh/transform-shape))
+
+        selrect      (->> (into [] xf sobjects)
+                          (gsh/selection-rect))]
+    [:svg.ghost
+     {:x (:x selrect)
+      :y (:y selrect)
+      :width (:width selrect)
+      :height (:height selrect)
+      :style {:pointer-events "none"}}
+
+     [:g {:transform (str/fmt "translate(%s,%s)" (- (:x selrect-orig)) (- (:y selrect-orig)))}
+      [:& frames
+       {:ids selected
+        :ghost? true}]]]))
+
 (defn format-viewbox [vbox]
   (str/join " " [(+ (:x vbox 0) (:left-offset vbox 0))
                  (:y vbox 0)
@@ -337,6 +364,7 @@
              (st/emit! (ms/->KeyboardEvent :up key ctrl? shift? alt?)))))
 
         translate-point-to-viewport
+        (mf/use-callback
          (fn [pt]
            (let [viewport (mf/ref-val viewport-ref)
                  vbox     (.. ^js viewport -viewBox -baseVal)
@@ -349,12 +377,13 @@
              (-> (gpt/subtract pt brect)
                  (gpt/divide (gpt/point @refs/selected-zoom))
                  (gpt/add box)
-                (gpt/round 0))))
+                 (gpt/round 0)))))
 
         on-mouse-move
+        (mf/use-callback
          (fn [event]
            (let [event  (.getBrowserEvent ^js event)
-                raw-pt (dom/get-client-position ^js event)
+                 raw-pt (dom/get-client-position event)
                  pt     (translate-point-to-viewport raw-pt)
 
                  ;; We calculate the delta because Safari's MouseEvent.movementX/Y drop
@@ -370,7 +399,7 @@
              (st/emit! (ms/->PointerEvent :viewport pt
                                           (kbd/ctrl? event)
                                           (kbd/shift? event)
-                                         (kbd/alt? event)))))
+                                          (kbd/alt? event))))))
 
         on-mouse-wheel
         (mf/use-callback
@@ -398,24 +427,27 @@
                    (st/emit! (dw/update-viewport-position {:y #(+ % delta)}))))))))
 
         on-drag-enter
+        (mf/use-callback
          (fn [e]
            (when (or (dnd/has-type? e "app/shape")
                      (dnd/has-type? e "app/component")
                      (dnd/has-type? e "Files")
                      (dnd/has-type? e "text/uri-list"))
-            (dom/prevent-default e)))
+             (dom/prevent-default e))))
 
         on-drag-over
+        (mf/use-callback
          (fn [e]
            (when (or (dnd/has-type? e "app/shape")
                      (dnd/has-type? e "app/component")
                      (dnd/has-type? e "Files")
                      (dnd/has-type? e "text/uri-list"))
-            (dom/prevent-default e)))
+             (dom/prevent-default e))))
 
         ;; TODO: seems duplicated callback is the same as one located
         ;; in left_toolbar
         on-uploaded
+        (mf/use-callback
          (fn [{:keys [id name] :as image} {:keys [x y]}]
            (let [shape {:name name
                         :width (:width image)
@@ -427,9 +459,10 @@
                                    :id (:id image)
                                    :path (:path image)}}
                  aspect-ratio (/ (:width image) (:height image))]
-            (st/emit! (dw/create-and-add-shape :image x y shape))))
+             (st/emit! (dw/create-and-add-shape :image x y shape)))))
 
         on-drop
+        (mf/use-callback
          (fn [event]
            (dom/prevent-default event)
            (let [point (gpt/point (.-clientX event) (.-clientY event))
@@ -478,19 +511,21 @@
                                }]
                  (st/emit! (dw/upload-media-objects
                             (with-meta params
-                             {:on-success #(on-uploaded % viewport-coord)})))))))
+                              {:on-success #(on-uploaded % viewport-coord)}))))))))
 
         on-paste
+        (mf/use-callback
          (fn [event]
-          (st/emit! (dw/paste-from-event event)))
+           (st/emit! (dw/paste-from-event event))))
 
         on-resize
+        (mf/use-callback
          (fn [event]
            (let [node (mf/ref-val viewport-ref)
                  prnt (dom/get-parent node)
                  size (dom/get-client-size prnt)]
              ;; We schedule the event so it fires after `initialize-page` event
-            (timers/schedule #(st/emit! (dw/update-viewport-size size)))))
+             (timers/schedule #(st/emit! (dw/update-viewport-size size))))))
 
         options (mf/deref refs/workspace-page-options)]
 
@@ -575,19 +610,11 @@
                                      "auto")}}
        [:& frames {:key page-id
                    :hover (:hover local)
-                   :selected (:selected selected)}]
+                   :selected selected}]
 
        (when (= :move (:transform local))
-         [:svg.ghost
+         [:& ghost-frames {:modifiers (:modifiers local)
-          {:x (:x selrect)
+                           :selected selected}])
-           :y (:y selrect)
-           :width (:width selrect)
-           :height (:height selrect)
-           :style {:pointer-events "none"}}
-
-          [:g {:transform (str/fmt "translate(%s,%s)" (- (:x selrect-orig)) (- (:y selrect-orig)))}
-           [:& frames {:ids selected
-                       :ghost? true}]]])
 
        (when (seq selected)
          [:& selection-handlers {:selected selected