mirror of
https://github.com/penpot/penpot.git
synced 2025-02-10 09:08:31 -05:00
✨ Minor refactor on shapes and canvas rendering on viewport.
This commit is contained in:
Andrey Antukh
parent
163e102bcf
commit
ddaf6bfc92
5 changed files with 111 additions and 130 deletions
|
|
@ -37,33 +37,21 @@
|
|||
(render-shape shape))
|
||||
|
||||
(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]}
|
||||
[{:keys [shape] :as props}]
|
||||
(when (and shape (not (:hidden shape)))
|
||||
[:& render-shape' {:shape shape}]))
|
||||
|
||||
(def ^:private shapes-iref
|
||||
(-> (l/key :shapes)
|
||||
(l/derive st/state)))
|
||||
|
||||
(mf/defc all-shapes
|
||||
(mf/defc canvas-and-shapes
|
||||
{:wrap [mf/wrap-memo]}
|
||||
[{:keys [page] :as props}]
|
||||
(let [shapes-by-id (mf/deref shapes-iref)
|
||||
shapes (map #(get shapes-by-id %) (:shapes page))]
|
||||
(let [shapes-by-id (mf/deref refs/shapes-by-id)
|
||||
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]
|
||||
[:& shape-component' {:shape item :key (:id item)}])]))
|
||||
[:& shape-component {:shape item :key (:id item)}])]))
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
[uxbox.main.ui.workspace.scroll :as scroll]
|
||||
[uxbox.main.ui.workspace.shortcuts :as shortcuts]
|
||||
[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.util.data :refer [classnames]]
|
||||
[uxbox.util.dom :as dom]
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
:on-scroll on-scroll
|
||||
:on-wheel #(on-wheel % canvas)}
|
||||
|
||||
(history-dialog)
|
||||
;; (history-dialog)
|
||||
|
||||
;; Rules
|
||||
(when (contains? flags :rules)
|
||||
|
|
@ -128,8 +128,6 @@
|
|||
{:deps #js [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}
|
||||
(when page
|
||||
[:& workspace {:page page}])]))
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[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.layers :refer [layers-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.options :refer [options-toolbox]]
|
||||
|
|
|
|||
|
|
@ -21,115 +21,115 @@
|
|||
|
||||
;; --- History Item (Component)
|
||||
|
||||
(mf/def history-item
|
||||
:mixins [mf/memo]
|
||||
:key-fn :id
|
||||
:render
|
||||
(fn [own {:keys [::selected] :as item}]
|
||||
(letfn [(on-select [event]
|
||||
(dom/prevent-default event)
|
||||
(st/emit! (udh/select-page-history (:version item))))
|
||||
(on-pinned [event]
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(let [item (assoc item
|
||||
:label "no label"
|
||||
:pinned (not (:pinned item)))]
|
||||
(st/emit! (udh/update-history-item item))))]
|
||||
[:li {:class (when (= selected (:version item)) "current")
|
||||
:on-click on-select}
|
||||
[:div.pin-icon {:on-click on-pinned
|
||||
:class (when (:pinned item) "selected")}
|
||||
i/pin]
|
||||
[:span (str "Version " (:version item)
|
||||
" (" (dt/timeago (:created-at item)) ")")]])))
|
||||
;; (mf/def history-item
|
||||
;; :mixins [mf/memo]
|
||||
;; :key-fn :id
|
||||
;; :render
|
||||
;; (fn [own {:keys [::selected] :as item}]
|
||||
;; (letfn [(on-select [event]
|
||||
;; (dom/prevent-default event)
|
||||
;; (st/emit! (udh/select-page-history (:version item))))
|
||||
;; (on-pinned [event]
|
||||
;; (dom/prevent-default event)
|
||||
;; (dom/stop-propagation event)
|
||||
;; (let [item (assoc item
|
||||
;; :label "no label"
|
||||
;; :pinned (not (:pinned item)))]
|
||||
;; (st/emit! (udh/update-history-item item))))]
|
||||
;; [:li {:class (when (= selected (:version item)) "current")
|
||||
;; :on-click on-select}
|
||||
;; [:div.pin-icon {:on-click on-pinned
|
||||
;; :class (when (:pinned item) "selected")}
|
||||
;; i/pin]
|
||||
;; [:span (str "Version " (:version item)
|
||||
;; " (" (dt/timeago (:created-at item)) ")")]])))
|
||||
|
||||
;; --- History List (Component)
|
||||
;; ;; --- History List (Component)
|
||||
|
||||
(mf/def history-list
|
||||
:mixins [mf/memo mf/reactive]
|
||||
:render
|
||||
(fn [own {:keys [selected items min-version] :as history}]
|
||||
(let [items (reverse (sort-by :version items))
|
||||
page (mf/react refs/selected-page)
|
||||
show-more? (pos? min-version)
|
||||
load-more #(st/emit! (udh/load-more))]
|
||||
[:ul.history-content
|
||||
(for [item items]
|
||||
(history-item (assoc item ::selectd selected)))
|
||||
(when show-more?
|
||||
[:li {:on-click load-more}
|
||||
[:a.btn-primary.btn-small
|
||||
"view more"]])])))
|
||||
;; (mf/def history-list
|
||||
;; :mixins [mf/memo mf/reactive]
|
||||
;; :render
|
||||
;; (fn [own {:keys [selected items min-version] :as history}]
|
||||
;; (let [items (reverse (sort-by :version items))
|
||||
;; page (mf/react refs/selected-page)
|
||||
;; show-more? (pos? min-version)
|
||||
;; load-more #(st/emit! (udh/load-more))]
|
||||
;; [:ul.history-content
|
||||
;; (for [item items]
|
||||
;; (history-item (assoc item ::selectd selected)))
|
||||
;; (when show-more?
|
||||
;; [:li {:on-click load-more}
|
||||
;; [:a.btn-primary.btn-small
|
||||
;; "view more"]])])))
|
||||
|
||||
;; --- History Pinned List (Component)
|
||||
;; ;; --- History Pinned List (Component)
|
||||
|
||||
(mf/def history-pinned-list
|
||||
:mixins [mf/memo]
|
||||
:render
|
||||
(fn [own {:keys [pinned selected] :as history}]
|
||||
[:ul.history-content
|
||||
(for [item (reverse (sort-by :version pinned))]
|
||||
(let [selected (= (:version item) selected)]
|
||||
(history-item (assoc item ::selected selected))))]))
|
||||
;; (mf/def history-pinned-list
|
||||
;; :mixins [mf/memo]
|
||||
;; :render
|
||||
;; (fn [own {:keys [pinned selected] :as history}]
|
||||
;; [:ul.history-content
|
||||
;; (for [item (reverse (sort-by :version pinned))]
|
||||
;; (let [selected (= (:version item) selected)]
|
||||
;; (history-item (assoc item ::selected selected))))]))
|
||||
|
||||
;; --- History Toolbox (Component)
|
||||
;; ;; --- History Toolbox (Component)
|
||||
|
||||
(mf/def history-toolbox
|
||||
:mixins [mf/memo mf/reactive]
|
||||
;; (mf/def history-toolbox
|
||||
;; :mixins [mf/memo mf/reactive]
|
||||
|
||||
:init
|
||||
(fn [own page-id]
|
||||
(st/emit! (udh/initialize page-id))
|
||||
own)
|
||||
;; :init
|
||||
;; (fn [own page-id]
|
||||
;; (st/emit! (udh/initialize page-id))
|
||||
;; own)
|
||||
|
||||
:will-unmount
|
||||
(fn [own]
|
||||
(st/emit! ::udh/stop-changes-watcher)
|
||||
own)
|
||||
;; :will-unmount
|
||||
;; (fn [own]
|
||||
;; (st/emit! ::udh/stop-changes-watcher)
|
||||
;; own)
|
||||
|
||||
:render
|
||||
(fn [own page-id]
|
||||
(let [history (mf/react refs/history)
|
||||
section (:section history :main)
|
||||
;; :render
|
||||
;; (fn [own page-id]
|
||||
;; (let [history (mf/react refs/history)
|
||||
;; section (:section history :main)
|
||||
|
||||
close #(st/emit! (dw/toggle-flag :document-history))
|
||||
main? (= section :main)
|
||||
pinned? (= section :pinned)
|
||||
;; close #(st/emit! (dw/toggle-flag :document-history))
|
||||
;; main? (= section :main)
|
||||
;; pinned? (= section :pinned)
|
||||
|
||||
show-main #(st/emit! (udh/select-section :main))
|
||||
show-pinned #(st/emit! (udh/select-section :pinned))]
|
||||
[:div.document-history.tool-window {}
|
||||
[:div.tool-window-bar {}
|
||||
[:div.tool-window-icon {} i/undo-history]
|
||||
[:span {} (tr "ds.settings.document-history")]
|
||||
[:div.tool-window-close {:on-click close} i/close]]
|
||||
[:div.tool-window-content {}
|
||||
[:ul.history-tabs {}
|
||||
[:li {:on-click show-main
|
||||
:class (when main? "selected")}
|
||||
(tr "ds.history.versions")]
|
||||
[:li {:on-click show-pinned
|
||||
:class (when pinned? "selected")}
|
||||
(tr "ds.history.pinned")]]
|
||||
(if (= section :pinned)
|
||||
(history-pinned-list history)
|
||||
(history-list history))]])))
|
||||
;; show-main #(st/emit! (udh/select-section :main))
|
||||
;; show-pinned #(st/emit! (udh/select-section :pinned))]
|
||||
;; [:div.document-history.tool-window {}
|
||||
;; [:div.tool-window-bar {}
|
||||
;; [:div.tool-window-icon {} i/undo-history]
|
||||
;; [:span {} (tr "ds.settings.document-history")]
|
||||
;; [:div.tool-window-close {:on-click close} i/close]]
|
||||
;; [:div.tool-window-content {}
|
||||
;; [:ul.history-tabs {}
|
||||
;; [:li {:on-click show-main
|
||||
;; :class (when main? "selected")}
|
||||
;; (tr "ds.history.versions")]
|
||||
;; [:li {:on-click show-pinned
|
||||
;; :class (when pinned? "selected")}
|
||||
;; (tr "ds.history.pinned")]]
|
||||
;; (if (= section :pinned)
|
||||
;; (history-pinned-list history)
|
||||
;; (history-list history))]])))
|
||||
|
||||
;; --- History Dialog
|
||||
;; ;; --- History Dialog
|
||||
|
||||
(mf/def history-dialog
|
||||
:mixins [mf/memo mf/reactive]
|
||||
:render
|
||||
(fn [own]
|
||||
(let [history (mf/react refs/history)
|
||||
version (:selected history)
|
||||
on-accept #(st/emit! (udh/apply-selected-history))
|
||||
on-cancel #(st/emit! (udh/deselect-page-history))]
|
||||
(when (or version (:deselecting history))
|
||||
[:div.message-version
|
||||
{:class (when (:deselecting history) "hide-message")}
|
||||
[:span {} (tr "history.alert-message" (or version "00"))
|
||||
[:div.message-action {}
|
||||
[:a.btn-transparent {:on-click on-accept} (tr "ds.accept")]
|
||||
[:a.btn-transparent {:on-click on-cancel} (tr "ds.cancel")]]]]))))
|
||||
;; (mf/def history-dialog
|
||||
;; :mixins [mf/memo mf/reactive]
|
||||
;; :render
|
||||
;; (fn [own]
|
||||
;; (let [history (mf/react refs/history)
|
||||
;; version (:selected history)
|
||||
;; on-accept #(st/emit! (udh/apply-selected-history))
|
||||
;; on-cancel #(st/emit! (udh/deselect-page-history))]
|
||||
;; (when (or version (:deselecting history))
|
||||
;; [:div.message-version
|
||||
;; {:class (when (:deselecting history) "hide-message")}
|
||||
;; [:span {} (tr "history.alert-message" (or version "00"))
|
||||
;; [:div.message-action {}
|
||||
;; [:a.btn-transparent {:on-click on-accept} (tr "ds.accept")]
|
||||
;; [:a.btn-transparent {:on-click on-cancel} (tr "ds.cancel")]]]]))))
|
||||
|
|
|
|||
|
|
@ -246,12 +246,7 @@
|
|||
[:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
|
||||
(when page
|
||||
[:*
|
||||
(for [id (reverse (:canvas 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}]
|
||||
[:& uus/canvas-and-shapes {:page page}]
|
||||
|
||||
(when (seq (:selected wst))
|
||||
[:& selection-handlers {:wst wst}])
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue