3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-09 07:31:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Minor refactor on shapes and canvas rendering on viewport.

Browse source
This commit is contained in:
Andrey Antukh 2019-09-21 20:13:40 +02:00
parent 163e102bcf
commit ddaf6bfc92
5 changed files with 111 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/uxbox/main/ui/shapes.cljs
View file

@ -37,33 +37,21 @@
(render-shape shape)) (render-shape shape))
(mf/defc shape-component (mf/defc shape-component
{:wrap [mf/wrap-memo]}
[{:keys [id] :as props}]
(uxbox.util.perf/with-measure ::foobar
(let [shape-iref (mf/use-memo {:deps #js [id]
:fn #(-> (l/in [:shapes id])
(l/derive st/state))})]
(when-let [shape (mf/deref shape-iref)]
(when-not (:hidden shape)
(mf/html
[:& render-shape' {:shape shape}]))))))
(mf/defc shape-component'
{:wrap [mf/wrap-memo]} {:wrap [mf/wrap-memo]}
[{:keys [shape] :as props}] [{:keys [shape] :as props}]
(when (and shape (not (:hidden shape))) (when (and shape (not (:hidden shape)))
[:& render-shape' {:shape shape}])) [:& render-shape' {:shape shape}]))
(def ^:private shapes-iref (mf/defc canvas-and-shapes
(-> (l/key :shapes)
(l/derive st/state)))
(mf/defc all-shapes
{:wrap [mf/wrap-memo]} {:wrap [mf/wrap-memo]}
[{:keys [page] :as props}] [{:keys [page] :as props}]
(let [shapes-by-id (mf/deref shapes-iref) (let [shapes-by-id (mf/deref refs/shapes-by-id)
shapes (map #(get shapes-by-id %) (:shapes page))] shapes (map #(get shapes-by-id %) (:shapes page []))
canvas (map #(get shapes-by-id %) (:canvas page []))]
[:* [:*
(for [item canvas]
[:& shape-component {:shape item :key (:id item)}])
(for [item shapes] (for [item shapes]
[:& shape-component' {:shape item :key (:id item)}])])) [:& shape-component {:shape item :key (:id item)}])]))

6
frontend/src/uxbox/main/ui/workspace.cljs
View file

@ -29,7 +29,7 @@
[uxbox.main.ui.workspace.scroll :as scroll] [uxbox.main.ui.workspace.scroll :as scroll]
[uxbox.main.ui.workspace.shortcuts :as shortcuts] [uxbox.main.ui.workspace.shortcuts :as shortcuts]
[uxbox.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]] [uxbox.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
[uxbox.main.ui.workspace.sidebar.history :refer [history-dialog]] ;; [uxbox.main.ui.workspace.sidebar.history :refer [history-dialog]]
[uxbox.main.ui.workspace.streams :as uws] [uxbox.main.ui.workspace.streams :as uws]
[uxbox.util.data :refer [classnames]] [uxbox.util.data :refer [classnames]]
[uxbox.util.dom :as dom] [uxbox.util.dom :as dom]
@ -99,7 +99,7 @@
:on-scroll on-scroll :on-scroll on-scroll
:on-wheel #(on-wheel % canvas)} :on-wheel #(on-wheel % canvas)}
(history-dialog) ;; (history-dialog)
;; Rules ;; Rules
(when (contains? flags :rules) (when (contains? flags :rules)
@ -128,8 +128,6 @@
{:deps #js [project-id page-id] {:deps #js [project-id page-id]
:fn #(st/emit! (dw/initialize project-id page-id))}) :fn #(st/emit! (dw/initialize project-id page-id))})
;; (prn "workspace-page.render" (:id page) props)
[:> rdnd/provider {:backend rdnd/html5} [:> rdnd/provider {:backend rdnd/html5}
(when page (when page
[:& workspace {:page page}])])) [:& workspace {:page page}])]))

2
frontend/src/uxbox/main/ui/workspace/sidebar.cljs
View file

@ -9,7 +9,7 @@
(:require (:require
[rumext.alpha :as mf] [rumext.alpha :as mf]
[uxbox.main.ui.workspace.sidebar.drawtools :refer [draw-toolbox]] [uxbox.main.ui.workspace.sidebar.drawtools :refer [draw-toolbox]]
[uxbox.main.ui.workspace.sidebar.history :refer [history-toolbox]] ;; [uxbox.main.ui.workspace.sidebar.history :refer [history-toolbox]]
[uxbox.main.ui.workspace.sidebar.icons :refer [icons-toolbox]] [uxbox.main.ui.workspace.sidebar.icons :refer [icons-toolbox]]
[uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]] [uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
[uxbox.main.ui.workspace.sidebar.options :refer [options-toolbox]] [uxbox.main.ui.workspace.sidebar.options :refer [options-toolbox]]

198
frontend/src/uxbox/main/ui/workspace/sidebar/history.cljs
View file

@ -21,115 +21,115 @@
;; --- History Item (Component) ;; --- History Item (Component)
(mf/def history-item ;; (mf/def history-item
:mixins [mf/memo] ;; :mixins [mf/memo]
:key-fn :id ;; :key-fn :id
:render ;; :render
(fn [own {:keys [::selected] :as item}] ;; (fn [own {:keys [::selected] :as item}]
(letfn [(on-select [event] ;; (letfn [(on-select [event]
(dom/prevent-default event) ;; (dom/prevent-default event)
(st/emit! (udh/select-page-history (:version item)))) ;; (st/emit! (udh/select-page-history (:version item))))
(on-pinned [event] ;; (on-pinned [event]
(dom/prevent-default event) ;; (dom/prevent-default event)
(dom/stop-propagation event) ;; (dom/stop-propagation event)
(let [item (assoc item ;; (let [item (assoc item
:label "no label" ;; :label "no label"
:pinned (not (:pinned item)))] ;; :pinned (not (:pinned item)))]
(st/emit! (udh/update-history-item item))))] ;; (st/emit! (udh/update-history-item item))))]
[:li {:class (when (= selected (:version item)) "current") ;; [:li {:class (when (= selected (:version item)) "current")
:on-click on-select} ;; :on-click on-select}
[:div.pin-icon {:on-click on-pinned ;; [:div.pin-icon {:on-click on-pinned
:class (when (:pinned item) "selected")} ;; :class (when (:pinned item) "selected")}
i/pin] ;; i/pin]
[:span (str "Version " (:version item) ;; [:span (str "Version " (:version item)
" (" (dt/timeago (:created-at item)) ")")]]))) ;; " (" (dt/timeago (:created-at item)) ")")]])))
;; --- History List (Component) ;; ;; --- History List (Component)
(mf/def history-list ;; (mf/def history-list
:mixins [mf/memo mf/reactive] ;; :mixins [mf/memo mf/reactive]
:render ;; :render
(fn [own {:keys [selected items min-version] :as history}] ;; (fn [own {:keys [selected items min-version] :as history}]
(let [items (reverse (sort-by :version items)) ;; (let [items (reverse (sort-by :version items))
page (mf/react refs/selected-page) ;; page (mf/react refs/selected-page)
show-more? (pos? min-version) ;; show-more? (pos? min-version)
load-more #(st/emit! (udh/load-more))] ;; load-more #(st/emit! (udh/load-more))]
[:ul.history-content ;; [:ul.history-content
(for [item items] ;; (for [item items]
(history-item (assoc item ::selectd selected))) ;; (history-item (assoc item ::selectd selected)))
(when show-more? ;; (when show-more?
[:li {:on-click load-more} ;; [:li {:on-click load-more}
[:a.btn-primary.btn-small ;; [:a.btn-primary.btn-small
"view more"]])]))) ;; "view more"]])])))
;; --- History Pinned List (Component) ;; ;; --- History Pinned List (Component)
(mf/def history-pinned-list ;; (mf/def history-pinned-list
:mixins [mf/memo] ;; :mixins [mf/memo]
:render ;; :render
(fn [own {:keys [pinned selected] :as history}] ;; (fn [own {:keys [pinned selected] :as history}]
[:ul.history-content ;; [:ul.history-content
(for [item (reverse (sort-by :version pinned))] ;; (for [item (reverse (sort-by :version pinned))]
(let [selected (= (:version item) selected)] ;; (let [selected (= (:version item) selected)]
(history-item (assoc item ::selected selected))))])) ;; (history-item (assoc item ::selected selected))))]))
;; --- History Toolbox (Component) ;; ;; --- History Toolbox (Component)
(mf/def history-toolbox ;; (mf/def history-toolbox
:mixins [mf/memo mf/reactive] ;; :mixins [mf/memo mf/reactive]
:init ;; :init
(fn [own page-id] ;; (fn [own page-id]
(st/emit! (udh/initialize page-id)) ;; (st/emit! (udh/initialize page-id))
own) ;; own)
:will-unmount ;; :will-unmount
(fn [own] ;; (fn [own]
(st/emit! ::udh/stop-changes-watcher) ;; (st/emit! ::udh/stop-changes-watcher)
own) ;; own)
:render ;; :render
(fn [own page-id] ;; (fn [own page-id]
(let [history (mf/react refs/history) ;; (let [history (mf/react refs/history)
section (:section history :main) ;; section (:section history :main)
close #(st/emit! (dw/toggle-flag :document-history)) ;; close #(st/emit! (dw/toggle-flag :document-history))
main? (= section :main) ;; main? (= section :main)
pinned? (= section :pinned) ;; pinned? (= section :pinned)
show-main #(st/emit! (udh/select-section :main)) ;; show-main #(st/emit! (udh/select-section :main))
show-pinned #(st/emit! (udh/select-section :pinned))] ;; show-pinned #(st/emit! (udh/select-section :pinned))]
[:div.document-history.tool-window {} ;; [:div.document-history.tool-window {}
[:div.tool-window-bar {} ;; [:div.tool-window-bar {}
[:div.tool-window-icon {} i/undo-history] ;; [:div.tool-window-icon {} i/undo-history]
[:span {} (tr "ds.settings.document-history")] ;; [:span {} (tr "ds.settings.document-history")]
[:div.tool-window-close {:on-click close} i/close]] ;; [:div.tool-window-close {:on-click close} i/close]]
[:div.tool-window-content {} ;; [:div.tool-window-content {}
[:ul.history-tabs {} ;; [:ul.history-tabs {}
[:li {:on-click show-main ;; [:li {:on-click show-main
:class (when main? "selected")} ;; :class (when main? "selected")}
(tr "ds.history.versions")] ;; (tr "ds.history.versions")]
[:li {:on-click show-pinned ;; [:li {:on-click show-pinned
:class (when pinned? "selected")} ;; :class (when pinned? "selected")}
(tr "ds.history.pinned")]] ;; (tr "ds.history.pinned")]]
(if (= section :pinned) ;; (if (= section :pinned)
(history-pinned-list history) ;; (history-pinned-list history)
(history-list history))]]))) ;; (history-list history))]])))
;; --- History Dialog ;; ;; --- History Dialog
(mf/def history-dialog ;; (mf/def history-dialog
:mixins [mf/memo mf/reactive] ;; :mixins [mf/memo mf/reactive]
:render ;; :render
(fn [own] ;; (fn [own]
(let [history (mf/react refs/history) ;; (let [history (mf/react refs/history)
version (:selected history) ;; version (:selected history)
on-accept #(st/emit! (udh/apply-selected-history)) ;; on-accept #(st/emit! (udh/apply-selected-history))
on-cancel #(st/emit! (udh/deselect-page-history))] ;; on-cancel #(st/emit! (udh/deselect-page-history))]
(when (or version (:deselecting history)) ;; (when (or version (:deselecting history))
[:div.message-version ;; [:div.message-version
{:class (when (:deselecting history) "hide-message")} ;; {:class (when (:deselecting history) "hide-message")}
[:span {} (tr "history.alert-message" (or version "00")) ;; [:span {} (tr "history.alert-message" (or version "00"))
[:div.message-action {} ;; [:div.message-action {}
[:a.btn-transparent {:on-click on-accept} (tr "ds.accept")] ;; [:a.btn-transparent {:on-click on-accept} (tr "ds.accept")]
[:a.btn-transparent {:on-click on-cancel} (tr "ds.cancel")]]]])))) ;; [:a.btn-transparent {:on-click on-cancel} (tr "ds.cancel")]]]]))))

7
frontend/src/uxbox/main/ui/workspace/viewport.cljs
View file

@ -246,12 +246,7 @@
[:g.zoom {:transform (str "scale(" zoom ", " zoom ")")} [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
(when page (when page
[:* [:*
(for [id (reverse (:canvas page))] [:& uus/canvas-and-shapes {:page page}]
[:& uus/shape-component {:id id :key id}])
#_(for [id (reverse (:shapes page))]
[:& uus/shape-component {:id id :key id}])
[:& uus/all-shapes {:page page}]
(when (seq (:selected wst)) (when (seq (:selected wst))
[:& selection-handlers {:wst wst}]) [:& selection-handlers {:wst wst}])