Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 23:18:48 -05:00
Code Issues Activity

✨ Add more improvements to workspace initialization

Browse source
This commit is contained in:
Andrey Antukh 2023-05-25 14:15:28 +02:00 • committed by Alejandro Alonso
parent 5d892d14d5
commit b85b479396
9 changed files with 94 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/app/main/data/workspace.cljs
View file

@ -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)

9
frontend/src/app/main/data/workspace/viewport.cljs
View file

@ -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)))

9
frontend/src/app/main/refs.cljs
View file

@ -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

131
frontend/src/app/main/ui/workspace.cljs
View file

@ -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}
@ -56,7 +70,7 @@
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,7 +87,8 @@
(when (and textpalette? (not hide-ui?))
[:& textpalette])])
[:section.workspace-content {:key (dm/str "workspace-" page-id)
[:section.workspace-content
{:key (dm/str "workspace-" page-id)
:ref node-ref}
[:section.workspace-viewport
(when (debug? :coordinates)
@ -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-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

2
frontend/src/app/main/ui/workspace/libraries.cljs
View file

@ -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)

1
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

@ -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)

6
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

@ -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

1
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -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

20
frontend/src/app/main/ui/workspace/viewport/hooks.cljs
View file

@ -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
(mf/with-effect [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)))))))))
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