⚡ Don't render not visible shapes on workspace

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

@@ -16,6 +16,7 @@
 (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 current-vbox         (mf/create-context nil))
 
 (def active-frames        (mf/create-context nil))
 (def render-thumbnails    (mf/create-context nil))

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

@@ -13,6 +13,7 @@
   common."
   (:require
    [app.common.data.macros :as dm]
+   [app.common.geom.rect :as grc]
    [app.common.pages.helpers :as cph]
    [app.common.uuid :as uuid]
    [app.main.ui.context :as ctx]
@@ -54,7 +55,18 @@
         ;; frame changes won't affect the rendering frame
         frame-objects
         (mf/with-memo [objects]
-          (cph/objects-by-frame objects))]
+          (cph/objects-by-frame objects))
+
+
+        vbox          (mf/use-ctx ctx/current-vbox)
+
+        shapes
+        (mf/with-memo [shapes vbox]
+          (if (some? vbox)
+            (->> shapes
+                 (filterv (fn [shape]
+                           (grc/overlaps-rects? vbox (dm/get-prop shape :selrect)))))
+            shapes))]
 
     [:g {:id (dm/str "shape-" uuid/zero)}
      [:& (mf/provider ctx/active-frames) {:value active-frames}

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

@@ -88,6 +88,7 @@
         (let [shape (unchecked-get props "shape")]
           [:& frame-shape {:shape shape :ref node-ref}])))))
 
+
 (defn root-frame-wrapper-factory
   [shape-wrapper]
 
@@ -101,9 +102,9 @@
             thumbnail?         (unchecked-get props "thumbnail?")
 
             page-id            (mf/use-ctx ctx/current-page-id)
-            frame-id           (:id shape)
+            frame-id           (dm/get-prop shape :id)
 
-            objects            (wsh/lookup-page-objects @st/state)
+            objects            (wsh/lookup-page-objects @st/state page-id)
 
             node-ref           (mf/use-ref nil)
             root-ref           (mf/use-ref nil)
@@ -129,6 +130,7 @@
 
             on-frame-load
             (fns/use-node-store node-ref rendered-ref thumbnail? render-frame?)
+
             ]
 
         (fdm/use-dynamic-modifiers objects (mf/ref-val node-ref) modifiers)
@@ -164,12 +166,12 @@
            :key "frame-container"
            :ref on-frame-load
            :opacity (when (:hidden shape) 0)}
-          [:& ff/fontfaces-style {:fonts fonts}]
+            [:& ff/fontfaces-style {:fonts fonts}]
           [:g.frame-thumbnail-wrapper
            {:id (dm/str "thumbnail-container-" frame-id)
             ;; Hide the thumbnail when not displaying
             :opacity (when-not thumbnail? 0)}
            children]]
 
-         ]))))
+           ]))))
 

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

@@ -88,6 +88,8 @@
                 show-distances?
                 picking-color?]} wglobal
 
+        vbox'             (mf/use-debounce 100 vbox)
+
         ;; CONTEXT
         page-id           (mf/use-ctx ctx/current-page-id)
 
@@ -323,12 +325,13 @@
               :y (:y vbox 0)
               :fill background}]
 
-      [:& (mf/provider use/include-metadata-ctx) {:value (debug? :show-export-metadata)}
-       [:& (mf/provider embed/context) {:value true}
-        ;; Render root shape
-        [:& shapes/root-shape {:key page-id
-                               :objects base-objects
-                               :active-frames @active-frames}]]]]
+      [:& (mf/provider ctx/current-vbox) {:value vbox'}
+       [:& (mf/provider use/include-metadata-ctx) {:value (debug? :show-export-metadata)}
+        [:& (mf/provider embed/context) {:value true}
+         ;; Render root shape
+         [:& shapes/root-shape {:key page-id
+                                :objects base-objects
+                                :active-frames @active-frames}]]]]]
 
      [:svg.viewport-controls
       {:xmlns "http://www.w3.org/2000/svg"