From b85b479396da6869b5f867dc51f3927837a7d710 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 25 May 2023 14:15:28 +0200 Subject: [PATCH] :sparkles: Add more improvements to workspace initialization --- frontend/src/app/main/data/workspace.cljs | 8 +- .../src/app/main/data/workspace/viewport.cljs | 9 +- frontend/src/app/main/refs.cljs | 9 -- frontend/src/app/main/ui/workspace.cljs | 141 ++++++++++-------- .../src/app/main/ui/workspace/libraries.cljs | 2 +- .../src/app/main/ui/workspace/sidebar.cljs | 1 - .../app/main/ui/workspace/sidebar/assets.cljs | 6 +- .../src/app/main/ui/workspace/viewport.cljs | 1 - .../app/main/ui/workspace/viewport/hooks.cljs | 22 +-- 9 files changed, 94 insertions(+), 105 deletions(-) diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 995327cf5..9ac8da39b 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -391,7 +391,10 @@ exit? (not= :workspace (dm/get-in state [:route :data :name])) state (-> state (update :workspace-cache assoc page-id local) - (dissoc :current-page-id :workspace-local :workspace-trimmed-page :workspace-focus-selected))] + (dissoc :current-page-id + :workspace-local + :workspace-trimmed-page + :workspace-focus-selected))] (cond-> state exit? (dissoc :workspace-drawing)))))) @@ -611,9 +614,7 @@ (ptk/reify ::end-rename-shape ptk/WatchEvent (watch [_ state _] - (prn "end-rename-shape" name (string? name) (not (str/blank? name))) (when-let [shape-id (dm/get-in state [:workspace-local :shape-for-rename])] - (prn "end-rename-shape" shape-id) (let [shape (wsh/lookup-shape state shape-id)] (rx/concat ;; Remove rename state from workspace local state @@ -2299,7 +2300,6 @@ (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) diff --git a/frontend/src/app/main/data/workspace/viewport.cljs b/frontend/src/app/main/data/workspace/viewport.cljs index 28365db99..0629b33d9 100644 --- a/frontend/src/app/main/data/workspace/viewport.cljs +++ b/frontend/src/app/main/data/workspace/viewport.cljs @@ -20,6 +20,7 @@ (defn initialize-viewport [{:keys [width height] :as size}] + (letfn [(update* [{:keys [vport] :as local}] (let [wprop (/ (:width vport) width) hprop (/ (:height vport) height)] @@ -153,11 +154,3 @@ (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))) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index ebc7b162a..92190f031 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -104,15 +104,6 @@ (def workspace-drawing (l/derived :workspace-drawing st/state)) -(defn make-workspace-ready-ref - [file-id] - (l/derived (fn [state] - (let [data (:workspace-data state)] - (and (:workspace-ready? state) - (= file-id (:current-file-id state)) - (= file-id (:id data))))) - st/state)) - ;; TODO: rename to workspace-selected (?) ;; Don't use directly from components, this is a proxy to improve performance of selected-shapes (def ^:private selected-shapes-data diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 2e7c240ff..2cdf17973 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -26,9 +26,9 @@ [app.main.ui.workspace.libraries] [app.main.ui.workspace.nudge] [app.main.ui.workspace.palette :refer [palette]] + [app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]] [app.main.ui.workspace.sidebar.collapsable-button :refer [collapsed-button]] [app.main.ui.workspace.sidebar.history :refer [history-toolbox]] - [app.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]] [app.main.ui.workspace.textpalette :refer [textpalette]] [app.main.ui.workspace.viewport :refer [viewport]] [app.util.dom :as dom] @@ -40,7 +40,21 @@ [okulary.core :as l] [rumext.v2 :as mf])) -;; --- Workspace +(defn- make-file-ready-ref + [file-id] + (l/derived (fn [state] + (let [data (:workspace-data state)] + (and (:workspace-ready? state) + (= file-id (:current-file-id state)) + (= file-id (:id data))))) + st/state)) + +(defn- make-page-ready-ref + [page-id] + (l/derived (fn [state] + (and (some? page-id) + (= page-id (:current-page-id state)))) + st/state)) (mf/defc workspace-content {::mf/wrap-props false} @@ -50,13 +64,13 @@ {:keys [vport] :as wlocal} (mf/deref refs/workspace-local) {:keys [options-mode]} wglobal - colorpalette? (:colorpalette layout) - textpalette? (:textpalette layout) - hide-ui? (:hide-ui layout) + colorpalette? (:colorpalette layout) + textpalette? (:textpalette layout) + hide-ui? (:hide-ui layout) new-css-system (mf/use-ctx ctx/new-css-system) on-resize - (mf/use-callback + (mf/use-fn (mf/deps vport) (fn [resize-type size] (when (and vport (not= size vport)) @@ -73,8 +87,9 @@ (when (and textpalette? (not hide-ui?)) [:& textpalette])]) - [:section.workspace-content {:key (dm/str "workspace-" page-id) - :ref node-ref} + [:section.workspace-content + {:key (dm/str "workspace-" page-id) + :ref node-ref} [:section.workspace-viewport (when (debug? :coordinates) [:& coordinates/coordinates {:colorpalette? colorpalette?}]) @@ -83,6 +98,7 @@ [:div.history-debug-overlay [:button {:on-click #(st/emit! dw/reinitialize-undo)} "CLEAR"] [:& history-toolbox]]) + [:& viewport {:file file :wlocal wlocal :wglobal wglobal @@ -99,83 +115,83 @@ :selected selected :layout layout}]])])) -(def ^:private ref:page-loaded - (l/derived - (fn [state] - (some? (:workspace-trimmed-page state))) - st/state)) - -(mf/defc workspace-page - {::mf/wrap-props false} - [{:keys [file layout page-id wglobal]}] - (let [prev-page-id (hooks/use-previous page-id) - page-loaded? (mf/deref ref:page-loaded)] - - (mf/with-effect [page-id prev-page-id] - (when (and prev-page-id (not= prev-page-id page-id)) - (st/emit! (dw/finalize-page prev-page-id))) - (if (nil? page-id) - (st/emit! (dw/go-to-page)) - (st/emit! (dw/initialize-page page-id)))) - - (when ^boolean page-loaded? - [:& workspace-content {:page-id page-id - :file file - :wglobal wglobal - :layout layout}]))) - (mf/defc workspace-loader [] [:div.workspace-loader i/loader-pencil]) -(mf/defc workspace +(mf/defc workspace-page {::mf/wrap-props false} - [{:keys [project-id file-id page-id layout-name]}] - (let [file (mf/deref refs/workspace-file) - project (mf/deref refs/workspace-project) - layout (mf/deref refs/workspace-layout) - wglobal (mf/deref refs/workspace-global) - read-only? (mf/deref refs/workspace-read-only?) - - ready-lens (mf/with-memo [file-id] - (refs/make-workspace-ready-ref file-id)) - ready? (mf/deref ready-lens) - - team-id (:team-id project) - file-name (:name file) - - components-v2 (features/use-feature :components-v2) - new-css-system (features/use-feature :new-css-system) - - background-color (:background-color wglobal)] + [{:keys [page-id file layout wglobal]}] + (let [page-id (hooks/use-equal-memo page-id) + page-ready* (mf/with-memo [page-id] + (make-page-ready-ref page-id)) + page-ready? (mf/deref page-ready*)] (mf/with-effect [] (let [focus-out #(st/emit! (dw/workspace-focus-lost)) key (events/listen globals/document "blur" focus-out)] (partial events/unlistenByKey key))) + (mf/with-effect [page-id] + (if (some? page-id) + (st/emit! (dw/initialize-page page-id)) + (st/emit! (dw/go-to-page))) + (fn [] + (when (some? page-id) + (st/emit! (dw/finalize-page page-id))))) + + (if ^boolean page-ready? + [:& workspace-content {:page-id page-id + :file file + :wglobal wglobal + :layout layout}] + [:& workspace-loader]))) + +(mf/defc workspace + {::mf/wrap-props false + ::mf/wrap [mf/memo]} + [{:keys [project-id file-id page-id layout-name]}] + + (let [layout (mf/deref refs/workspace-layout) + wglobal (mf/deref refs/workspace-global) + read-only? (mf/deref refs/workspace-read-only?) + + file (mf/deref refs/workspace-file) + project (mf/deref refs/workspace-project) + + team-id (:team-id project) + file-name (:name file) + + file-ready* (mf/with-memo [file-id] + (make-file-ready-ref file-id)) + file-ready? (mf/deref file-ready*) + + components-v2? (features/use-feature :components-v2) + new-css? (features/use-feature :new-css-system) + + background-color (:background-color wglobal)] + ;; Setting the layout preset by its name (mf/with-effect [layout-name] (st/emit! (dw/initialize-layout layout-name))) + (mf/with-effect [file-name] + (when file-name + (dom/set-html-title (tr "title.workspace" file-name)))) + (mf/with-effect [project-id file-id] (st/emit! (dw/initialize-file project-id file-id)) (fn [] (st/emit! ::dwp/force-persist (dw/finalize-file project-id file-id)))) - ;; Set properly the page title - (mf/with-effect [file-name] - (when file-name - (dom/set-html-title (tr "title.workspace" file-name)))) - [:& (mf/provider ctx/current-file-id) {:value file-id} - [:& (mf/provider ctx/current-team-id) {:value team-id} - [:& (mf/provider ctx/current-project-id) {:value project-id} + [:& (mf/provider ctx/current-project-id) {:value project-id} + [:& (mf/provider ctx/current-team-id) {:value team-id} [:& (mf/provider ctx/current-page-id) {:value page-id} - [:& (mf/provider ctx/components-v2) {:value components-v2} - [:& (mf/provider ctx/new-css-system) {:value new-css-system} + [:& (mf/provider ctx/components-v2) {:value components-v2?} + [:& (mf/provider ctx/new-css-system) {:value new-css?} [:& (mf/provider ctx/workspace-read-only?) {:value read-only?} [:section#workspace {:style {:background-color background-color :touch-action "none"}} @@ -187,7 +203,7 @@ [:& context-menu] - (if ^boolean ready? + (if ^boolean file-ready? [:& workspace-page {:page-id page-id :file file :wglobal wglobal @@ -208,6 +224,7 @@ (mf/use-effect (fn [] #(st/emit! (dw/clear-remove-graphics)))) + [:div.modal-overlay [:div.modal-container.remove-graphics-dialog [:div.modal-header diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index ad25ce831..063176d54 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -171,7 +171,7 @@ [:div.section-list [:div.section-list-item - [:div {:data-kaka "1"} + [:div [:div.item-name (tr "workspace.libraries.file-library")] [:div.item-contents (describe-library (count components) diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 2c67ca08b..2f6de0e75 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -25,7 +25,6 @@ [app.main.ui.workspace.sidebar.sitemap :refer [sitemap]] [app.util.dom :as dom] [app.util.i18n :refer [tr]] - [app.util.object :as obj] [rumext.v2 :as mf])) ;; --- Left Sidebar (Component) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index 7c0872ed9..e3fc89bb5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -2435,7 +2435,7 @@ :ordering :asc :list-style :thumbs}) filters (deref filters*) - + term (:term filters) toggle-ordering (mf/use-fn #(swap! filters* update :ordering toggle-values [:asc :desc])) @@ -2488,11 +2488,11 @@ [:input.search-input {:placeholder (tr "workspace.assets.search") :type "text" - :value (:term filters) + :value term :on-change on-search-term-change :on-key-down handle-key-down}] - (if ^boolean (str/empty? (:term filters)) + (if ^boolean (str/empty? term) [:div.search-icon i/search] [:div.search-icon.close diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 86578c363..663661093 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -258,7 +258,6 @@ (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 diff --git a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs index 42a728331..e4787f4ec 100644 --- a/frontend/src/app/main/ui/workspace/viewport/hooks.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/hooks.cljs @@ -28,7 +28,6 @@ [app.main.worker :as uw] [app.util.dom :as dom] [app.util.globals :as globals] - [app.util.timers :as timers] [beicon.core :as rx] [debug :refer [debug?]] [goog.events :as events] @@ -55,22 +54,13 @@ (events/unlistenByKey key)))))))) (defn setup-viewport-size [vport viewport-ref] - (mf/use-layout-effect - (mf/deps vport) - (fn [] - (when-not vport - (let [node (mf/ref-val viewport-ref) - prnt (dom/get-parent node)] - ;; We schedule the event so it fires after `initialize-page` event - (timers/schedule #(st/emit! (dw/initialize-viewport (dom/get-client-size prnt))))))))) + (mf/with-effect [vport] + (let [node (mf/ref-val viewport-ref) + prnt (dom/get-parent node) + size (dom/get-client-size prnt)] - -(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)))))) + (when (not= size vport) + (st/emit! (dw/initialize-viewport (dom/get-client-size prnt))))))) (defn setup-cursor [cursor alt? mod? space? panning drawing-tool drawing-path? path-editing? z? workspace-read-only?] (mf/use-effect