WIP

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

@@ -43,7 +43,7 @@
    (let [file-id (:current-file-id state)]
      (lookup-page state file-id page-id)))
   ([state file-id page-id]
-   (dm/get-in state [:files file-id :pages-index page-id])))
+   (dm/get-in state [:files file-id :data :pages-index page-id])))
 
 (defn lookup-page-objects
   ([state]

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

@@ -23,7 +23,7 @@
    [app.main.ui.hooks.resize :refer [use-resize-observer]]
    [app.main.ui.modal :refer [modal-container*]]
    [app.main.ui.workspace.colorpicker]
-   [app.main.ui.workspace.context-menu :refer [context-menu]]
+   [app.main.ui.workspace.context-menu :refer [context-menu*]]
    [app.main.ui.workspace.coordinates :as coordinates]
    [app.main.ui.workspace.libraries]
    [app.main.ui.workspace.nudge]
@@ -34,7 +34,7 @@
    [app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
    [app.main.ui.workspace.tokens.modals]
    [app.main.ui.workspace.tokens.modals.themes]
-   [app.main.ui.workspace.viewport :refer [viewport]]
+   [app.main.ui.workspace.viewport :refer [viewport*]]
    [app.util.debug :as dbg]
    [app.util.dom :as dom]
    [app.util.globals :as globals]
@@ -43,25 +43,19 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
-(defn- make-file-ready-ref
+(defn- make-workspace-ready-ref
   [file-id]
   (l/derived (fn [state]
                (and (= file-id (:workspace-ready state))
                     (some? (dsh/lookup-file-data state file-id))))
              st/state))
 
-(defn- make-page-ready-ref
+(mf/defc workspace-content*
-  [page-id]
+  {::mf/private true}
-  (l/derived (fn [state]
+  [{:keys [file layout page wglobal]}]
-               (and (some? page-id)
-                    (= page-id (:current-page-id state))))
-             st/state))
-
-(mf/defc workspace-content
-  {::mf/wrap-props false}
-  [{:keys [file layout page-id wglobal]}]
   (let [palete-size (mf/use-state nil)
-        selected (mf/deref refs/selected-shapes)
+        selected    (mf/deref refs/selected-shapes)
+        page-id     (:id page)
 
         {:keys [vport] :as wlocal} (mf/deref refs/workspace-local)
         {:keys [options-mode]} wglobal
@@ -102,14 +96,16 @@
           [:button {:on-click #(st/emit! dw/reinitialize-undo)} "CLEAR"]
           [:& history-toolbox]])
 
-       [:& viewport {:file file
+       [:> viewport*
-                     :wlocal wlocal
+        {:file file
-                     :wglobal wglobal
+         :page page
-                     :selected selected
+         :wlocal wlocal
-                     :layout layout
+         :wglobal wglobal
-                     :palete-size
+         :selected selected
-                     (when (and (or colorpalette? textpalette?) (not hide-ui?))
+         :layout layout
-                       @palete-size)}]]]
+         :palete-size
+         (when (and (or colorpalette? textpalette?) (not hide-ui?))
+           @palete-size)}]]]
 
      (when-not hide-ui?
        [:*
@@ -125,21 +121,17 @@
                            :page-id page-id}]])]))
 
 (mf/defc workspace-loader*
-  {::mf/props :obj
+  {::mf/private true}
-   ::mf/private true}
   []
   [:> loader*  {:title (tr "labels.loading")
                 :class (stl/css :workspace-loader)
                 :overlay true}])
 
 (mf/defc workspace-page*
-  {::mf/props :obj
+  {::mf/private true}
-   ::mf/private true}
   [{:keys [page-id file layout wglobal]}]
-  (let [page-id     (hooks/use-equal-memo page-id)
+  (let [page-id (hooks/use-equal-memo page-id)
-        page-ready* (mf/with-memo [page-id]
+        page    (mf/deref refs/workspace-page)]
-                      (make-page-ready-ref page-id))
-        page-ready? (mf/deref page-ready*)]
 
     (mf/with-effect []
       (let [focus-out #(st/emit! (dw/workspace-focus-lost))
@@ -150,15 +142,16 @@
       (if (some? page-id)
         (st/emit! (dw/initialize-page page-id))
         (st/emit! (dcm/go-to-workspace ::rt/replace true)))
+
       (fn []
         (when (some? page-id)
           (st/emit! (dw/finalize-page page-id)))))
 
-    (if ^boolean page-ready?
+    (if (some? page)
-      [:& workspace-content {:page-id page-id
+      [:> workspace-content* {:file file
-                             :file file
+                              :page page
-                             :wglobal wglobal
+                              :wglobal wglobal
-                             :layout layout}]
+                              :layout layout}]
       [:& workspace-loader*])))
 
 
@@ -185,11 +178,10 @@
         read-only?       (mf/deref refs/workspace-read-only?)
         read-only?       (or read-only? (not (:can-edit permissions)))
 
-        file-ready*      (mf/with-memo [file-id]
+        ready*           (mf/with-memo [file-id]
-                           (make-file-ready-ref file-id))
+                           (make-workspace-ready-ref file-id))
-        file-ready?      (mf/deref file-ready*)
+        ready?           (mf/deref ready*)
 
-        components-v2?   (features/use-feature "components/v2")
         design-tokens?   (features/use-feature "design-tokens/v1")
 
         background-color (:background-color wglobal)]
@@ -212,21 +204,21 @@
         (st/emit! ::dps/force-persist
                   (dw/finalize-workspace file-id))))
 
-    [:& (mf/provider ctx/current-project-id) {:value project-id}
+    [:> (mf/provider ctx/current-project-id) {:value project-id}
-     [:& (mf/provider ctx/current-file-id) {:value file-id}
+     [:> (mf/provider ctx/current-file-id) {:value file-id}
-      [:& (mf/provider ctx/current-page-id) {:value page-id}
+      [:> (mf/provider ctx/current-page-id) {:value page-id}
-       [:& (mf/provider ctx/components-v2) {:value components-v2?}
+       [:> (mf/provider ctx/components-v2) {:value true}
-        [:& (mf/provider ctx/design-tokens) {:value design-tokens?}
+        [:> (mf/provider ctx/design-tokens) {:value design-tokens?}
-         [:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
+         [:> (mf/provider ctx/workspace-read-only?) {:value read-only?}
           [:> modal-container*]
           [:section {:class (stl/css :workspace)
                      :style {:background-color background-color
                              :touch-action "none"}}
-           [:& context-menu]
+           [:> context-menu*]
 
-           (if ^boolean file-ready?
+           (if ^boolean ready?
              [:> workspace-page* {:page-id page-id
                                   :file file
                                   :wglobal wglobal
                                   :layout layout}]
-             [:> workspace-loader* {}])]]]]]]]))
+             [:> workspace-loader*])]]]]]]]))

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

@@ -698,7 +698,7 @@
 
 ;; FIXME: optimize because it is rendered always
 
-(mf/defc context-menu
+(mf/defc context-menu*
   []
   (let [mdata        (mf/deref menu-ref)
         top          (- (get-in mdata [:position :y]) 20)

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

@@ -74,8 +74,8 @@
    objects
    selected))
 
-(mf/defc viewport-classic
+(mf/defc viewport-classic*
-  [{:keys [selected wglobal wlocal layout file palete-size] :as props}]
+  [{:keys [selected wglobal wlocal layout file page palete-size]}]
   (let [;; When adding data from workspace-local revisit `app.main.ui.workspace` to check
         ;; that the new parameter is sent
         {:keys [edit-path
@@ -104,7 +104,6 @@
         drawing           (mf/deref refs/workspace-drawing)
         focus             (mf/deref refs/workspace-focus-selected)
 
-        page              (mf/deref refs/workspace-page)
         objects           (get page :objects)
         page-id           (get page :id)
         background        (get page :background clr/canvas)
@@ -158,7 +157,6 @@
         drawing-tool      (:tool drawing)
         drawing-obj       (:object drawing)
 
-
         selected-frames   (into #{} (map :frame-id) selected-shapes)
 
         ;; Only when we have all the selected shapes in one frame
@@ -649,6 +647,7 @@
               :modifiers modifiers
               :shape frame
               :view-only true}]))]
+
        [:g.scrollbar-wrapper {:clipPath "url(#clip-handlers)"}
         [:& scroll-bars/viewport-scrollbars
          {:objects base-objects
@@ -656,9 +655,9 @@
           :vbox vbox
           :bottom-padding (when palete-size (+ palete-size 8))}]]]]]))
 
-(mf/defc viewport
+(mf/defc viewport*
   [props]
   (let [wasm-renderer-enabled? (features/use-feature "render-wasm/v1")]
     (if ^boolean wasm-renderer-enabled?
-      [:& viewport.wasm/viewport props]
+      [:> viewport.wasm/viewport* props]
-      [:& viewport-classic props])))
+      [:> viewport-classic* props])))

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

@@ -74,8 +74,8 @@
    objects
    selected))
 
-(mf/defc viewport
+(mf/defc viewport*
-  [{:keys [selected wglobal wlocal layout file palete-size] :as props}]
+  [{:keys [selected wglobal wlocal layout file page palete-size]}]
   (let [;; When adding data from workspace-local revisit `app.main.ui.workspace` to check
         ;; that the new parameter is sent
         {:keys [edit-path
@@ -102,7 +102,6 @@
         drawing           (mf/deref refs/workspace-drawing)
         focus             (mf/deref refs/workspace-focus-selected)
 
-        page              (mf/deref refs/workspace-page)
         objects           (get page :objects)
         page-id           (get page :id)
         background        (get page :background clr/canvas)