3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Refactor selection management on workspace assets component

Browse source
This commit is contained in:
Andrey Antukh 2023-05-24 14:43:44 +02:00 • committed by Alejandro Alonso
parent 8f72faf27d
commit 0ea07fbe01
3 changed files with 166 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1119,7 +1119,21 @@
:query-params {:page-id (dm/get-in file [:data :pages 0])}}] :query-params {:page-id (dm/get-in file [:data :pages 0])}}]
(rx/of (rt/nav-new-window* params))))))) (rx/of (rt/nav-new-window* params)))))))
(defn check-in-asset (defn set-assets-section-open
[file-id section open?]
(ptk/reify ::set-assets-section-open
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:workspace-assets :open-status file-id section] open?))))
(defn set-assets-group-open
[file-id section path open?]
(ptk/reify ::set-assets-group-open
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:workspace-assets :open-status file-id :groups section path] open?))))
(defn- check-in-asset
[items element] [items element]
(let [items (or items #{})] (let [items (or items #{})]
(if (contains? items element) (if (contains? items element)
@ -1127,35 +1141,37 @@
(conj items element)))) (conj items element))))
(defn toggle-selected-assets (defn toggle-selected-assets
[asset type] [file-id asset-id type]
(ptk/reify ::toggle-selected-assets (ptk/reify ::toggle-selected-assets
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(update-in state [:workspace-assets-selected type] #(check-in-asset % asset))))) (update-in state [:workspace-assets :selected file-id type] check-in-asset asset-id))))
(defn select-single-asset (defn select-single-asset
[asset type] [file-id asset-id type]
(ptk/reify ::select-single-asset (ptk/reify ::select-single-asset
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(assoc-in state [:workspace-assets-selected type] #{asset})))) (prn "select-single-asset" file-id asset-id type)
(assoc-in state [:workspace-assets :selected file-id type] #{asset-id}))))
(defn select-assets (defn select-assets
[assets type] [file-id assets-ids type]
(ptk/reify ::select-assets (ptk/reify ::select-assets
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(assoc-in state [:workspace-assets-selected type] (into #{} assets))))) (assoc-in state [:workspace-assets :selected file-id type] (into #{} assets-ids)))))
(defn unselect-all-assets (defn unselect-all-assets
[] ([] (unselect-all-assets nil))
([file-id]
(ptk/reify ::unselect-all-assets (ptk/reify ::unselect-all-assets
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(assoc state :workspace-assets-selected {:components #{} (if file-id
:graphics #{} (update-in state [:workspace-assets :selected] dissoc file-id)
:colors #{} (update state :workspace-assets dissoc :selected))))))
:typographies #{}}))))
(defn go-to-main-instance (defn go-to-main-instance
[page-id shape-id] [page-id shape-id]
(dm/assert! (uuid? page-id)) (dm/assert! (uuid? page-id))
@ -1200,9 +1216,9 @@
pparams {:file-id file-id :project-id project-id} pparams {:file-id file-id :project-id project-id}
qparams {:page-id page-id :layout :assets}] qparams {:page-id page-id :layout :assets}]
(rx/of (rt/nav :workspace pparams qparams) (rx/of (rt/nav :workspace pparams qparams)
(dwl/set-assets-section-open file-id :library true) (set-assets-section-open file-id :library true)
(dwl/set-assets-section-open file-id :components true) (set-assets-section-open file-id :components true)
(select-single-asset component-id :components)))))) (select-single-asset file-id component-id :components))))))
ptk/EffectEvent ptk/EffectEvent
(effect [_ state _] (effect [_ state _]
@ -1222,9 +1238,9 @@
pparams {:file-id file-id :project-id project-id} pparams {:file-id file-id :project-id project-id}
qparams {:page-id page-id :layout :assets}] qparams {:page-id page-id :layout :assets}]
(rx/of (rt/nav :workspace pparams qparams) (rx/of (rt/nav :workspace pparams qparams)
(dwl/set-assets-section-open file-id :library true) (set-assets-section-open file-id :library true)
(dwl/set-assets-section-open file-id :components true) (set-assets-section-open file-id :components true)
(select-single-asset component-id :components)))) (select-single-asset file-id component-id :components))))
ptk/EffectEvent ptk/EffectEvent
(effect [_ _ _] (effect [_ _ _]

14
frontend/src/app/main/data/workspace/libraries.cljs
View file

@ -76,20 +76,6 @@
(declare sync-file) (declare sync-file)
(defn set-assets-section-open
[file-id section open?]
(ptk/reify ::set-assets-section-open
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:workspace-assets-open-status file-id section] open?))))
(defn set-assets-group-open
[file-id section path open?]
(ptk/reify ::set-assets-group-open
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:workspace-assets-open-status file-id :groups section path] open?))))
(defn extract-path-if-missing (defn extract-path-if-missing
[item] [item]
(let [[path name] (cph/parse-path-name (:name item))] (let [[path name] (cph/parse-path-name (:name item))]

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

@ -52,13 +52,14 @@
(def ctx:toggle-ordering (mf/create-context nil)) (def ctx:toggle-ordering (mf/create-context nil))
(def ctx:toggle-list-style (mf/create-context nil)) (def ctx:toggle-list-style (mf/create-context nil))
(def ref:selected-assets (def lens:selected
(l/derived :workspace-assets-selected st/state =)) (-> (l/in [:workspace-assets :selected])
(l/derived st/state)))
(def ref:open-status (def lens:open-status
(l/derived :workspace-assets-open-status st/state)) (l/derived (l/in [:workspace-assets :open-status]) st/state))
(def ref:typography-section-state (def lens:typography-section-state
(l/derived (fn [gstate] (l/derived (fn [gstate]
{:rename-typography (:rename-typography gstate) {:rename-typography (:rename-typography gstate)
:edit-typography (:edit-typography gstate)}) :edit-typography (:edit-typography gstate)})
@ -195,23 +196,23 @@
(st/emit! (dwu/commit-undo-transaction undo-id)))) (st/emit! (dwu/commit-undo-transaction undo-id))))
(defn- on-drop-asset (defn- on-drop-asset
[event asset dragging* selected-assets selected-assets-full selected-assets-paths rename] [event asset dragging* selected selected-full selected-paths rename]
(let [create-typed-assets-group (partial create-assets-group rename)] (let [create-typed-assets-group (partial create-assets-group rename)]
(when (not (dnd/from-child? event)) (when (not (dnd/from-child? event))
(reset! dragging* false) (reset! dragging* false)
(when (when
(and (not (contains? selected-assets (:id asset))) (and (not (contains? selected (:id asset)))
(every? #(= % (:path asset)) selected-assets-paths)) (every? #(= % (:path asset)) selected-paths))
(let [components-to-group (conj selected-assets-full asset) (let [components-to-group (conj selected-full asset)
create-typed-assets-group (partial create-typed-assets-group components-to-group)] create-typed-assets-group (partial create-typed-assets-group components-to-group)]
(modal/show! :name-group-dialog {:accept create-typed-assets-group})))))) (modal/show! :name-group-dialog {:accept create-typed-assets-group}))))))
(defn- on-drag-enter-asset (defn- on-drag-enter-asset
[event asset dragging* selected-assets selected-assets-paths] [event asset dragging* selected selected-paths]
(when (and (when (and
(not (dnd/from-child? event)) (not (dnd/from-child? event))
(every? #(= % (:path asset)) selected-assets-paths) (every? #(= % (:path asset)) selected-paths)
(not (contains? selected-assets (:id asset)))) (not (contains? selected (:id asset))))
(reset! dragging* true))) (reset! dragging* true)))
(defn- on-drag-leave-asset (defn- on-drag-leave-asset
@ -241,32 +242,32 @@
(ts/raf #(.removeChild ^js item-el counter-el)))) (ts/raf #(.removeChild ^js item-el counter-el))))
(defn- on-asset-drag-start (defn- on-asset-drag-start
[event asset selected-assets item-ref asset-type on-drag-start] [event file-id asset selected item-ref asset-type on-drag-start]
(let [id-asset (:id asset) (let [id-asset (:id asset)
num-selected (if (contains? selected-assets id-asset) num-selected (if (contains? selected id-asset)
(count selected-assets) (count selected)
1)] 1)]
(when (not (contains? selected-assets id-asset)) (when (not (contains? selected id-asset))
(st/emit! (dw/unselect-all-assets) (st/emit! (dw/unselect-all-assets file-id)
(dw/toggle-selected-assets id-asset asset-type))) (dw/toggle-selected-assets file-id id-asset asset-type)))
(on-drag-start asset event) (on-drag-start asset event)
(when (> num-selected 1) (when (> num-selected 1)
(set-drag-image event item-ref num-selected)))) (set-drag-image event item-ref num-selected))))
(defn- on-drag-enter-asset-group (defn- on-drag-enter-asset-group
[event dragging* prefix selected-assets-paths] [event dragging* prefix selected-paths]
(dom/stop-propagation event) (dom/stop-propagation event)
(when (and (not (dnd/from-child? event)) (when (and (not (dnd/from-child? event))
(not (every? #(= % prefix) selected-assets-paths))) (not (every? #(= % prefix) selected-paths)))
(reset! dragging* true))) (reset! dragging* true)))
(defn- on-drop-asset-group (defn- on-drop-asset-group
[event dragging* prefix selected-assets-paths selected-assets-full rename] [event dragging* prefix selected-paths selected-full rename]
(dom/stop-propagation event) (dom/stop-propagation event)
(when (not (dnd/from-child? event)) (when (not (dnd/from-child? event))
(reset! dragging* false) (reset! dragging* false)
(when (not (every? #(= % prefix) selected-assets-paths)) (when (not (every? #(= % prefix) selected-paths))
(doseq [target-asset selected-assets-full] (doseq [target-asset selected-full]
(st/emit! (st/emit!
(rename (rename
(:id target-asset) (:id target-asset)
@ -311,7 +312,7 @@
content (filter #(= (get-role %) :content) children)] content (filter #(= (get-role %) :content) children)]
[:div.asset-section [:div.asset-section
[:div.asset-title {:class (when (not ^boolean open?) "closed")} [:div.asset-title {:class (when (not ^boolean open?) "closed")}
[:span {:on-click #(st/emit! (dwl/set-assets-section-open file-id section (not open?)))} [:span {:on-click #(st/emit! (dw/set-assets-section-open file-id section (not open?)))}
i/arrow-slide title] i/arrow-slide title]
[:span.num-assets (str "\u00A0(") assets-count ")"] ;; Unicode 00A0 is non-breaking space [:span.num-assets (str "\u00A0(") assets-count ")"] ;; Unicode 00A0 is non-breaking space
title-buttons] title-buttons]
@ -333,7 +334,7 @@
(mf/deps file-id section path group-open?) (mf/deps file-id section path group-open?)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dwl/set-assets-group-open file-id (st/emit! (dw/set-assets-group-open file-id
section section
path path
(not group-open?))))) (not group-open?)))))
@ -385,8 +386,6 @@
[{:keys [component renaming listing-thumbs? selected [{:keys [component renaming listing-thumbs? selected
file-id on-asset-click on-context-menu on-drag-start do-rename file-id on-asset-click on-context-menu on-drag-start do-rename
cancel-rename selected-full selected-paths]}] cancel-rename selected-full selected-paths]}]
;; (prn "components-item" (:name component))
(let [item-ref (mf/use-ref) (let [item-ref (mf/use-ref)
dragging* (mf/use-state false) dragging* (mf/use-state false)
@ -396,8 +395,6 @@
components-v2 (mf/use-ctx ctx/components-v2) components-v2 (mf/use-ctx ctx/components-v2)
component-id (:id component) component-id (:id component)
;; _ (app.common.pprint/pprint component)
;; NOTE: we don't use reactive deref for it because we don't ;; NOTE: we don't use reactive deref for it because we don't
;; really need rerender on any change on the file change. If ;; really need rerender on any change on the file change. If
;; the component changes, it will trigger rerender anyway. ;; the component changes, it will trigger rerender anyway.
@ -447,11 +444,11 @@
on-component-drag-start on-component-drag-start
(mf/use-fn (mf/use-fn
(mf/deps component selected item-ref on-drag-start read-only?) (mf/deps file-id component selected item-ref on-drag-start read-only?)
(fn [event] (fn [event]
(if read-only? (if read-only?
(dom/prevent-default event) (dom/prevent-default event)
(on-asset-drag-start event component selected item-ref :components on-drag-start)))) (on-asset-drag-start event file-id component selected item-ref :components on-drag-start))))
on-context-menu on-context-menu
(mf/use-fn (mf/use-fn
@ -604,7 +601,7 @@
(mf/defc components-section (mf/defc components-section
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [file-id local? components listing-thumbs? open? reverse-sort? selected-assets [{:keys [file-id local? components listing-thumbs? open? reverse-sort? selected
on-asset-click on-assets-delete on-clear-selection open-status-ref]}] on-asset-click on-assets-delete on-clear-selection open-status-ref]}]
(let [input-ref (mf/use-ref nil) (let [input-ref (mf/use-ref nil)
@ -620,12 +617,12 @@
menu-state (mf/use-state initial-context-menu-state) menu-state (mf/use-state initial-context-menu-state)
read-only? (mf/use-ctx ctx/workspace-read-only?) read-only? (mf/use-ctx ctx/workspace-read-only?)
selected (:components selected-assets) selected (:components selected)
selected-full (into #{} (filter #(contains? selected (:id %))) components) selected-full (into #{} (filter #(contains? selected (:id %))) components)
multi-components? (> (count selected) 1) multi-components? (> (count selected) 1)
multi-assets? (or (seq (:graphics selected-assets)) multi-assets? (or (seq (:graphics selected))
(seq (:colors selected-assets)) (seq (:colors selected))
(seq (:typographies selected-assets))) (seq (:typographies selected)))
groups (mf/with-memo [components reverse-sort?] groups (mf/with-memo [components reverse-sort?]
(group-assets components reverse-sort?)) (group-assets components reverse-sort?))
@ -635,7 +632,7 @@
add-component add-component
(mf/use-fn (mf/use-fn
(fn [] (fn []
(st/emit! (dwl/set-assets-section-open file-id :components true)) (st/emit! (dw/set-assets-section-open file-id :components true))
(dom/click (mf/ref-val input-ref)))) (dom/click (mf/ref-val input-ref))))
on-file-selected on-file-selected
@ -796,7 +793,7 @@
(st/emit! (dw/go-to-main-instance main-instance-page main-instance-id)))))) (st/emit! (dw/go-to-main-instance main-instance-page main-instance-id))))))
on-asset-click on-asset-click
(mf/use-fn (mf/deps groups) (partial on-asset-click groups))] (mf/use-fn (mf/deps groups on-asset-click) (partial on-asset-click groups))]
[:& asset-section {:file-id file-id [:& asset-section {:file-id file-id
:title (tr "workspace.assets.components") :title (tr "workspace.assets.components")
@ -850,7 +847,7 @@
;; ---- Graphics section ---- ;; ---- Graphics section ----
(mf/defc graphics-item (mf/defc graphics-item
[{:keys [object renaming listing-thumbs? selected-objects [{:keys [object renaming listing-thumbs? selected-objects file-id
on-asset-click on-context-menu on-drag-start do-rename cancel-rename on-asset-click on-context-menu on-drag-start do-rename cancel-rename
selected-full selected-graphics-paths]}] selected-full selected-graphics-paths]}]
(let [item-ref (mf/use-ref) (let [item-ref (mf/use-ref)
@ -883,11 +880,11 @@
on-grahic-drag-start on-grahic-drag-start
(mf/use-fn (mf/use-fn
(mf/deps object selected-objects item-ref on-drag-start read-only?) (mf/deps object file-id selected-objects item-ref on-drag-start read-only?)
(fn [event] (fn [event]
(if read-only? (if read-only?
(dom/prevent-default event) (dom/prevent-default event)
(on-asset-drag-start event object selected-objects item-ref :graphics on-drag-start)))) (on-asset-drag-start event file-id object selected-objects item-ref :graphics on-drag-start))))
on-context-menu on-context-menu
(mf/use-fn (mf/use-fn
@ -896,7 +893,7 @@
on-asset-click on-asset-click
(mf/use-fn (mf/use-fn
(mf/deps object-id) (mf/deps object-id on-asset-click)
(partial on-asset-click object-id nil)) (partial on-asset-click object-id nil))
] ]
@ -1005,6 +1002,7 @@
(for [object objects] (for [object objects]
[:& graphics-item {:key (dm/str "object-" (:id object)) [:& graphics-item {:key (dm/str "object-" (:id object))
:file-id file-id
:object object :object object
:renaming renaming :renaming renaming
:listing-thumbs? listing-thumbs? :listing-thumbs? listing-thumbs?
@ -1038,7 +1036,7 @@
(mf/defc graphics-section (mf/defc graphics-section
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [file-id project-id local? objects listing-thumbs? open? open-status-ref selected-assets reverse-sort? [{:keys [file-id project-id local? objects listing-thumbs? open? open-status-ref selected reverse-sort?
on-asset-click on-assets-delete on-clear-selection]}] on-asset-click on-assets-delete on-clear-selection]}]
(let [input-ref (mf/use-ref nil) (let [input-ref (mf/use-ref nil)
state (mf/use-state {:renaming nil :object-id nil}) state (mf/use-state {:renaming nil :object-id nil})
@ -1051,12 +1049,12 @@
(l/derived open-status-ref))) (l/derived open-status-ref)))
open-groups (mf/deref open-groups-ref) open-groups (mf/deref open-groups-ref)
selected (:graphics selected-assets) selected (:graphics selected)
selected-full (into #{} (filter #(contains? selected (:id %))) objects) selected-full (into #{} (filter #(contains? selected (:id %))) objects)
multi-objects? (> (count selected) 1) multi-objects? (> (count selected) 1)
multi-assets? (or (seq (:components selected-assets)) multi-assets? (or (seq (:components selected))
(seq (:colors selected-assets)) (seq (:colors selected))
(seq (:typographies selected-assets))) (seq (:typographies selected)))
objects (mf/with-memo [objects] objects (mf/with-memo [objects]
(mapv dwl/extract-path-if-missing objects)) (mapv dwl/extract-path-if-missing objects))
@ -1070,7 +1068,7 @@
add-graphic add-graphic
(mf/use-fn (mf/use-fn
(fn [] (fn []
(st/emit! (dwl/set-assets-section-open file-id :graphics true)) (st/emit! (dw/set-assets-section-open file-id :graphics true))
(dom/click (mf/ref-val input-ref)))) (dom/click (mf/ref-val input-ref))))
on-file-selected on-file-selected
@ -1192,7 +1190,7 @@
(dnd/set-allowed-effect! event "move"))) (dnd/set-allowed-effect! event "move")))
on-asset-click on-asset-click
(mf/use-fn (mf/deps groups) (partial on-asset-click groups))] (mf/use-fn (mf/deps groups on-asset-click) (partial on-asset-click groups))]
[:& asset-section {:file-id file-id [:& asset-section {:file-id file-id
:title (tr "workspace.assets.graphics") :title (tr "workspace.assets.graphics")
@ -1382,15 +1380,15 @@
on-color-drag-start on-color-drag-start
(mf/use-fn (mf/use-fn
(mf/deps color selected item-ref read-only?) (mf/deps color file-id selected item-ref read-only?)
(fn [event] (fn [event]
(if read-only? (if read-only?
(dom/prevent-default event) (dom/prevent-default event)
(on-asset-drag-start event color selected item-ref :colors identity)))) (on-asset-drag-start event file-id color selected item-ref :colors identity))))
on-click on-click
(mf/use-fn (mf/use-fn
(mf/deps color-id apply-color) (mf/deps color-id apply-color on-asset-click)
(partial on-asset-click color-id apply-color))] (partial on-asset-click color-id apply-color))]
(mf/with-effect [editing?] (mf/with-effect [editing?]
@ -1543,10 +1541,10 @@
:selected-full selected-full}]))])])) :selected-full selected-full}]))])]))
(mf/defc colors-section (mf/defc colors-section
[{:keys [file-id local? colors open? open-status-ref selected-assets reverse-sort? [{:keys [file-id local? colors open? open-status-ref selected reverse-sort?
on-asset-click on-assets-delete on-clear-selection] :as props}] on-asset-click on-assets-delete on-clear-selection] :as props}]
(let [selected (:colors selected-assets) (let [selected (:colors selected)
selected-full (mf/with-memo [selected colors] selected-full (mf/with-memo [selected colors]
(into #{} (filter #(contains? selected (:id %))) colors)) (into #{} (filter #(contains? selected (:id %))) colors))
@ -1556,9 +1554,9 @@
open-groups (mf/deref open-groups-ref) open-groups (mf/deref open-groups-ref)
multi-colors? (> (count selected) 1) multi-colors? (> (count selected) 1)
multi-assets? (or (seq (:components selected-assets)) multi-assets? (or (seq (:components selected))
(seq (:graphics selected-assets)) (seq (:graphics selected))
(seq (:typographies selected-assets))) (seq (:typographies selected)))
groups (mf/with-memo [colors reverse-sort?] groups (mf/with-memo [colors reverse-sort?]
(group-assets colors reverse-sort?)) (group-assets colors reverse-sort?))
@ -1574,7 +1572,7 @@
(mf/use-fn (mf/use-fn
(mf/deps file-id) (mf/deps file-id)
(fn [event] (fn [event]
(st/emit! (dwl/set-assets-section-open file-id :colors true) (st/emit! (dw/set-assets-section-open file-id :colors true)
(ptk/event ::ev/event {::ev/name "add-asset-to-library" (ptk/event ::ev/event {::ev/name "add-asset-to-library"
:asset-type "color"})) :asset-type "color"}))
(modal/show! :colorpicker (modal/show! :colorpicker
@ -1653,7 +1651,7 @@
(st/emit! (dwu/commit-undo-transaction undo-id))))) (st/emit! (dwu/commit-undo-transaction undo-id)))))
on-asset-click on-asset-click
(mf/use-fn (mf/deps groups) (partial on-asset-click groups))] (mf/use-fn (mf/deps groups on-asset-click) (partial on-asset-click groups))]
[:& asset-section {:file-id file-id [:& asset-section {:file-id file-id
:title (tr "workspace.assets.colors") :title (tr "workspace.assets.colors")
@ -1723,11 +1721,11 @@
on-typography-drag-start on-typography-drag-start
(mf/use-fn (mf/use-fn
(mf/deps typography selected item-ref read-only?) (mf/deps typography file-id selected item-ref read-only?)
(fn [event] (fn [event]
(if read-only? (if read-only?
(dom/prevent-default event) (dom/prevent-default event)
(on-asset-drag-start event typography selected item-ref :typographies identity)))) (on-asset-drag-start event file-id typography selected item-ref :typographies identity))))
on-context-menu on-context-menu
(mf/use-fn (mf/use-fn
@ -1746,7 +1744,7 @@
on-asset-click on-asset-click
(mf/use-fn (mf/use-fn
(mf/deps typography apply-typography) (mf/deps typography apply-typography on-asset-click)
(partial on-asset-click typography-id apply-typography)) (partial on-asset-click typography-id apply-typography))
] ]
@ -1873,10 +1871,10 @@
(mf/defc typographies-section (mf/defc typographies-section
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [file file-id local? typographies open? open-status-ref selected-assets reverse-sort? [{:keys [file file-id local? typographies open? open-status-ref selected reverse-sort?
on-asset-click on-assets-delete on-clear-selection]}] on-asset-click on-assets-delete on-clear-selection]}]
(let [state (mf/use-state {:detail-open? false :id nil}) (let [state (mf/use-state {:detail-open? false :id nil})
local-data (mf/deref ref:typography-section-state) local-data (mf/deref lens:typography-section-state)
read-only? (mf/use-ctx ctx/workspace-read-only?) read-only? (mf/use-ctx ctx/workspace-read-only?)
menu-state (mf/use-state initial-context-menu-state) menu-state (mf/use-state initial-context-menu-state)
@ -1886,14 +1884,14 @@
groups (mf/with-memo [typographies reverse-sort?] groups (mf/with-memo [typographies reverse-sort?]
(group-assets typographies reverse-sort?)) (group-assets typographies reverse-sort?))
selected (:typographies selected-assets) selected (:typographies selected)
selected-full (mf/with-memo [selected typographies] selected-full (mf/with-memo [selected typographies]
(into #{} (filter #(contains? selected (:id %))) typographies)) (into #{} (filter #(contains? selected (:id %))) typographies))
multi-typographies? (> (count selected) 1) multi-typographies? (> (count selected) 1)
multi-assets? (or (seq (:components selected-assets)) multi-assets? (or (seq (:components selected))
(seq (:graphics selected-assets)) (seq (:graphics selected))
(seq (:colors selected-assets))) (seq (:colors selected)))
open-groups-ref (mf/with-memo [open-status-ref] open-groups-ref (mf/with-memo [open-status-ref]
(-> (l/in [:groups :components]) (-> (l/in [:groups :components])
@ -2026,7 +2024,7 @@
on-asset-click on-asset-click
(mf/use-fn (mf/use-fn
(mf/deps groups) (mf/deps groups on-asset-click)
(partial on-asset-click groups))] (partial on-asset-click groups))]
(mf/use-effect (mf/use-effect
@ -2114,7 +2112,7 @@
(mf/use-fn (mf/use-fn
(mf/deps file-id open?) (mf/deps file-id open?)
(fn [] (fn []
(st/emit! (dwl/set-assets-section-open file-id :library (not open?))))) (st/emit! (dw/set-assets-section-open file-id :library (not open?)))))
] ]
[:div.tool-window-bar.library-bar [:div.tool-window-bar.library-bar
@ -2193,92 +2191,94 @@
(or (pos? (count typographies)) (or (pos? (count typographies))
(str/empty? filters-term))) (str/empty? filters-term)))
selected-assets (mf/deref ref:selected-assets)
selected-count (+ (count (:components selected-assets))
(count (:graphics selected-assets))
(count (:colors selected-assets))
(count (:typographies selected-assets)))
extend-selected-assets selected-lens (mf/with-memo [file-id]
(mf/use-fn (-> (l/key file-id)
(mf/deps selected-assets) (l/derived lens:selected)))
(fn [asset-type asset-groups asset-id] selected (mf/deref selected-lens)
selected-count (+ (count (get selected :components))
(count (get selected :graphics))
(count (get selected :colors))
(count (get selected :typographies)))
;; FIXME: revisit performance of this function extend-selected
(fn [type asset-groups asset-id]
(letfn [(flatten-groups [groups] (letfn [(flatten-groups [groups]
(reduce concat [(get groups "" []) (reduce concat [(get groups "" [])
(into [] (into []
(->> (filter #(seq (first %)) groups) (->> (filter #(seq (first %)) groups)
(map second) (map second)
(mapcat flatten-groups)))]))] (mapcat flatten-groups)))]))]
(let [selected-assets-type (get selected-assets asset-type)
count-assets (count selected-assets-type)] (let [selected' (get selected type)]
(if (<= count-assets 0) (if (zero? (count selected'))
(st/emit! (dw/select-single-asset asset-id asset-type)) (st/emit! (dw/select-single-asset file-id asset-id type))
(let [all-assets (flatten-groups asset-groups) (let [all-assets (flatten-groups asset-groups)
clicked-idx (d/index-of-pred all-assets #(= (:id %) asset-id)) click-index (d/index-of-pred all-assets #(= (:id %) asset-id))
components (get selected-assets asset-type) first-index (->> (get selected type)
(map (fn [asset] (d/index-of-pred all-assets #(= (:id %) asset))))
(sort)
(first))
first-idx (first (sort (map (fn [asset] (d/index-of-pred all-assets #(= (:id %) asset))) components))) min-index (min first-index click-index)
selected-idx (vector first-idx clicked-idx) max-index (max first-index click-index)
min-idx (apply min (conj selected-idx clicked-idx)) ids (->> (d/enumerate all-assets)
max-idx (apply max (conj selected-idx clicked-idx)) (into #{} (comp (filter #(<= min-index (first %) max-index))
values (->> all-assets (map (comp :id second)))))]
(d/enumerate)
(filter #(<= min-idx (first %) max-idx))
(map #(-> % second :id))
(set))]
(st/emit! (dw/select-assets values asset-type)))))))) (st/emit! (dw/select-assets file-id ids type)))))))
on-asset-click on-asset-click
(mf/use-fn (mf/use-fn
(mf/deps file-id extend-selected)
(fn [asset-type asset-groups asset-id default-click event] (fn [asset-type asset-groups asset-id default-click event]
(cond (cond
(kbd/mod? event) (kbd/mod? event)
(do (do
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dw/toggle-selected-assets asset-id asset-type))) (st/emit! (dw/toggle-selected-assets file-id asset-id asset-type)))
(kbd/shift? event) (kbd/shift? event)
(do (do
(dom/stop-propagation event) (dom/stop-propagation event)
(extend-selected-assets asset-type asset-groups asset-id)) (extend-selected asset-type asset-groups asset-id))
:else :else
(when default-click (when default-click
(default-click event))))) (default-click event)))))
on-component-click on-component-click
(mf/use-fn (partial on-asset-click :components)) (mf/use-fn (mf/deps on-asset-click) (partial on-asset-click :components))
on-graphics-click on-graphics-click
(mf/use-fn (partial on-asset-click :graphics)) (mf/use-fn (mf/deps on-asset-click) (partial on-asset-click :graphics))
on-colors-click on-colors-click
(mf/use-fn (partial on-asset-click :colors)) (mf/use-fn (mf/deps on-asset-click) (partial on-asset-click :colors))
on-typography-click on-typography-click
(mf/use-fn (partial on-asset-click :typographies)) (mf/use-fn (mf/deps on-asset-click) (partial on-asset-click :typographies))
on-assets-delete on-assets-delete
(mf/use-fn (mf/use-fn
(mf/deps selected-assets) (mf/deps selected file-id)
(fn [] (fn []
(let [undo-id (js/Symbol)] (let [undo-id (js/Symbol)]
(st/emit! (dwu/start-undo-transaction undo-id)) (st/emit! (dwu/start-undo-transaction undo-id))
(run! st/emit! (map #(dwl/delete-component {:id %}) (run! st/emit! (map #(dwl/delete-component {:id %})
(:components selected-assets))) (:components selected)))
(run! st/emit! (map #(dwl/delete-media {:id %}) (run! st/emit! (map #(dwl/delete-media {:id %})
(:graphics selected-assets))) (:graphics selected)))
(run! st/emit! (map #(dwl/delete-color {:id %}) (run! st/emit! (map #(dwl/delete-color {:id %})
(:colors selected-assets))) (:colors selected)))
(run! st/emit! (map #(dwl/delete-typography %) (run! st/emit! (map #(dwl/delete-typography %)
(:typographies selected-assets))) (:typographies selected)))
(when (or (d/not-empty? (:components selected-assets))
(d/not-empty? (:colors selected-assets)) (when (or (seq (:components selected))
(d/not-empty? (:typographies selected-assets))) (seq (:colors selected))
(st/emit! (dwl/sync-file (:id file) (:id file)))) (seq (:typographies selected)))
(st/emit! (dwl/sync-file file-id file-id)))
(st/emit! (dwu/commit-undo-transaction undo-id)))))] (st/emit! (dwu/commit-undo-transaction undo-id)))))]
[:div.tool-window-content [:div.tool-window-content
@ -2304,7 +2304,7 @@
:open? (get open-status :components true) :open? (get open-status :components true)
:open-status-ref open-status-ref :open-status-ref open-status-ref
:reverse-sort? reverse-sort? :reverse-sort? reverse-sort?
:selected-assets selected-assets :selected selected
:on-asset-click on-component-click :on-asset-click on-component-click
:on-assets-delete on-assets-delete :on-assets-delete on-assets-delete
:on-clear-selection on-clear-selection}]) :on-clear-selection on-clear-selection}])
@ -2319,7 +2319,7 @@
:open? (get open-status :graphics true) :open? (get open-status :graphics true)
:open-status-ref open-status-ref :open-status-ref open-status-ref
:reverse-sort? reverse-sort? :reverse-sort? reverse-sort?
:selected-assets selected-assets :selected selected
:on-asset-click on-graphics-click :on-asset-click on-graphics-click
:on-assets-delete on-assets-delete :on-assets-delete on-assets-delete
:on-clear-selection on-clear-selection}]) :on-clear-selection on-clear-selection}])
@ -2332,7 +2332,7 @@
:open? (get open-status :colors true) :open? (get open-status :colors true)
:open-status-ref open-status-ref :open-status-ref open-status-ref
:reverse-sort? reverse-sort? :reverse-sort? reverse-sort?
:selected-assets selected-assets :selected selected
:on-asset-click on-colors-click :on-asset-click on-colors-click
:on-assets-delete on-assets-delete :on-assets-delete on-assets-delete
:on-clear-selection on-clear-selection}]) :on-clear-selection on-clear-selection}])
@ -2346,7 +2346,7 @@
:open? (get open-status :typographies true) :open? (get open-status :typographies true)
:open-status-ref open-status-ref :open-status-ref open-status-ref
:reverse-sort? reverse-sort? :reverse-sort? reverse-sort?
:selected-assets selected-assets :selected selected
:on-asset-click on-typography-click :on-asset-click on-typography-click
:on-assets-delete on-assets-delete :on-assets-delete on-assets-delete
:on-clear-selection on-clear-selection}]) :on-clear-selection on-clear-selection}])
@ -2369,14 +2369,15 @@
open-status-ref (mf/with-memo [file-id] open-status-ref (mf/with-memo [file-id]
(-> (l/key file-id) (-> (l/key file-id)
(l/derived ref:open-status))) (l/derived lens:open-status)))
open-status (mf/deref open-status-ref) open-status (mf/deref open-status-ref)
open? (d/nilv (:library open-status) default-open?) open? (d/nilv (:library open-status) default-open?)
unselect-all unselect-all
(mf/use-fn (mf/use-fn
(mf/deps file-id)
(fn [] (fn []
(st/emit! (dw/unselect-all-assets)))) (st/emit! (dw/unselect-all-assets file-id))))
] ]