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

♻️ Refactor workspace state organization

Browse source 
Move many local to a specific global prop.
This commit is contained in:
Andrey Antukh 2022-02-24 23:42:45 +01:00 • committed by Alonso Torres
parent 6e667e078c
commit f05518e357
14 changed files with 133 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -24,7 +24,7 @@
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.config :as cfg] [app.config :as cfg]
[app.main.data.events :as ev] [app.main.data.events :as ev]
[app.main.data.messages :as dm] [app.main.data.messages :as msg]
[app.main.data.workspace.bool :as dwb] [app.main.data.workspace.bool :as dwb]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.data.workspace.common :as dwc] [app.main.data.workspace.common :as dwc]
@ -90,7 +90,7 @@
(s/def ::layout-flags (s/coll-of ::layout-flag)) (s/def ::layout-flags (s/coll-of ::layout-flag))
(def default-layout (def default-workspace-layout
#{:sitemap #{:sitemap
:layers :layers
:element-options :element-options
@ -116,28 +116,12 @@
(s/def ::options-mode #{:design :prototype}) (s/def ::options-mode #{:design :prototype})
(def workspace-local-default (def default-workspace-global
{:options-mode :design})
(def default-workspace-local
{:zoom 1 {:zoom 1
:flags #{} :selected (d/ordered-set)})
:selected (d/ordered-set)
:selected-assets {:components #{}
:graphics #{}
:colors #{}
:typographies #{}}
:expanded {}
:tooltip nil
:options-mode :design
:draw-interaction-to nil
:left-sidebar? true
:right-sidebar? true
:color-for-rename nil
:selected-palette-colorpicker :recent
:selected-palette :recent
:selected-palette-size :big
:assets-files-open {}
:picking-color? false
:picked-color nil
:picked-color-select false})
(defn ensure-layout (defn ensure-layout
[lname] [lname]
@ -152,13 +136,15 @@
(set/difference todel) (set/difference todel)
(set/union toadd)))))))) (set/union toadd))))))))
(defn setup-layout (defn initialize
[lname] [lname]
(us/verify (s/nilable ::us/keyword) lname) (us/verify (s/nilable ::us/keyword) lname)
(ptk/reify ::setup-layout (ptk/reify ::initialize
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(update state :workspace-layout #(or % default-layout))) (-> state
(update :workspace-layout #(or % default-workspace-layout))
(update :workspace-global #(or % default-workspace-global))))
ptk/WatchEvent ptk/WatchEvent
(watch [_ _ _] (watch [_ _ _]
@ -278,7 +264,7 @@
page (get-in state [:workspace-data :pages-index page-id]) page (get-in state [:workspace-data :pages-index page-id])
page-id (:id page) page-id (:id page)
local (-> state local (-> state
(get-in [:workspace-cache page-id] workspace-local-default) (get-in [:workspace-cache page-id] default-workspace-local)
(assoc :selected (d/ordered-set)))] (assoc :selected (d/ordered-set)))]
(-> state (-> state
(assoc :current-page-id page-id) (assoc :current-page-id page-id)
@ -436,7 +422,7 @@
(ptk/reify ::set-options-mode (ptk/reify ::set-options-mode
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(assoc-in state [:workspace-local :options-mode] mode)))) (assoc-in state [:workspace-global :options-mode] mode))))
;; --- Tooltip ;; --- Tooltip
@ -446,8 +432,8 @@
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(if (string? content) (if (string? content)
(assoc-in state [:workspace-local :tooltip] content) (assoc-in state [:workspace-global :tooltip] content)
(assoc-in state [:workspace-local :tooltip] nil))))) (assoc-in state [:workspace-global :tooltip] nil)))))
;; --- Viewport Sizing ;; --- Viewport Sizing
@ -1194,41 +1180,42 @@
(rx/of (rt/nav :workspace pparams qparams)))))) (rx/of (rt/nav :workspace pparams qparams))))))
(defn check-in-asset (defn check-in-asset
[set element] [items element]
(if (contains? set element) (let [items (or items #{})]
(disj set element) (if (contains? items element)
(conj set element))) (disj set element)
(conj set element))))
(defn toggle-selected-assets (defn toggle-selected-assets
[asset type] [asset type]
(ptk/reify ::toggle-selected-assets (ptk/reify ::toggle-selected-assets
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(update-in state [:workspace-local :selected-assets type] #(check-in-asset % asset))))) (update-in state [:workspace-global :selected-assets type] #(check-in-asset % asset)))))
(defn select-single-asset (defn select-single-asset
[asset type] [asset type]
(ptk/reify ::select-single-asset (ptk/reify ::select-single-asset
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(assoc-in state [:workspace-local :selected-assets type] #{asset})))) (assoc-in state [:workspace-global :selected-assets type] #{asset}))))
(defn select-assets (defn select-assets
[assets type] [assets type]
(ptk/reify ::select-assets (ptk/reify ::select-assets
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(assoc-in state [:workspace-local :selected-assets type] (into #{} assets))))) (assoc-in state [:workspace-global :selected-assets type] (into #{} assets)))))
(defn unselect-all-assets (defn unselect-all-assets
[] []
(ptk/reify ::unselect-all-assets (ptk/reify ::unselect-all-assets
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(assoc-in state [:workspace-local :selected-assets] {:components #{} (assoc-in state [:workspace-global :selected-assets] {:components #{}
:graphics #{} :graphics #{}
:colors #{} :colors #{}
:typographies #{}})))) :typographies #{}}))))
(defn go-to-component (defn go-to-component
[component-id] [component-id]
@ -1480,7 +1467,7 @@
(catch :default e (catch :default e
(let [data (ex-data e)] (let [data (ex-data e)]
(if (:not-implemented data) (if (:not-implemented data)
(rx/of (dm/warn (i18n/tr "errors.clipboard-not-implemented"))) (rx/of (msg/warn (i18n/tr "errors.clipboard-not-implemented")))
(js/console.error "ERROR" e)))))))) (js/console.error "ERROR" e))))))))
(defn paste-from-event (defn paste-from-event

41
frontend/src/app/main/data/workspace/colors.cljs
View file

@ -21,7 +21,7 @@
(ptk/reify ::clear-color-for-rename (ptk/reify ::clear-color-for-rename
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(assoc-in state [:workspace-local :color-for-rename] nil)))) (assoc-in state [:workspace-global :color-for-rename] nil))))
(declare rename-color-result) (declare rename-color-result)
@ -40,15 +40,6 @@
(update [_ state] (update [_ state]
(update-in state [:workspace-file :colors] #(d/replace-by-id % color))))) (update-in state [:workspace-file :colors] #(d/replace-by-id % color)))))
(defn change-palette-size
[size]
(s/assert #{:big :small} size)
(ptk/reify ::change-palette-size
ptk/UpdateEvent
(update [_ state]
(-> state
(assoc-in [:workspace-local :selected-palette-size] size)))))
(defn change-palette-selected (defn change-palette-selected
"Change the library used by the general palette tool" "Change the library used by the general palette tool"
[selected] [selected]
@ -56,7 +47,7 @@
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(-> state (-> state
(assoc-in [:workspace-local :selected-palette] selected))))) (assoc-in [:workspace-global :selected-palette] selected)))))
(defn change-palette-selected-colorpicker (defn change-palette-selected-colorpicker
"Change the library used by the color picker" "Change the library used by the color picker"
@ -65,7 +56,7 @@
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(-> state (-> state
(assoc-in [:workspace-local :selected-palette-colorpicker] selected))))) (assoc-in [:workspace-global :selected-palette-colorpicker] selected)))))
(defn show-palette (defn show-palette
"Show the palette tool and change the library it uses" "Show the palette tool and change the library it uses"
@ -75,7 +66,7 @@
(update [_ state] (update [_ state]
(-> state (-> state
(update :workspace-layout conj :colorpalette) (update :workspace-layout conj :colorpalette)
(assoc-in [:workspace-local :selected-palette] selected))))) (assoc-in [:workspace-global :selected-palette] selected)))))
(defn start-picker (defn start-picker
[] []
@ -83,7 +74,7 @@
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(-> state (-> state
(assoc-in [:workspace-local :picking-color?] true))))) (assoc-in [:workspace-global :picking-color?] true)))))
(defn stop-picker (defn stop-picker
[] []
@ -91,8 +82,8 @@
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(-> state (-> state
(update :workspace-local dissoc :picked-color-select :picked-shift?) (update :workspace-global dissoc :picked-color-select :picked-shift?)
(assoc-in [:workspace-local :picking-color?] false))))) (assoc-in [:workspace-global :picking-color?] false)))))
(defn pick-color (defn pick-color
[rgba] [rgba]
@ -100,7 +91,7 @@
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(-> state (-> state
(assoc-in [:workspace-local :picked-color] rgba))))) (assoc-in [:workspace-global :picked-color] rgba)))))
(defn pick-color-select (defn pick-color-select
[value shift?] [value shift?]
@ -108,8 +99,8 @@
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(-> state (-> state
(assoc-in [:workspace-local :picked-color-select] value) (assoc-in [:workspace-global :picked-color-select] value)
(assoc-in [:workspace-local :picked-shift?] shift?))))) (assoc-in [:workspace-global :picked-shift?] shift?)))))
(defn transform-fill (defn transform-fill
[state ids color transform] [state ids color transform]
@ -295,7 +286,7 @@
(update [_ state] (update [_ state]
(let [handle-change-color (fn [color] (rx/push! sub color))] (let [handle-change-color (fn [color] (rx/push! sub color))]
(-> state (-> state
(assoc-in [:workspace-local :picking-color?] true) (assoc-in [:workspace-global :picking-color?] true)
(assoc ::md/modal {:id (random-uuid) (assoc ::md/modal {:id (random-uuid)
:data {:color clr/black :opacity 1} :data {:color clr/black :opacity 1}
:type :colorpicker :type :colorpicker
@ -309,8 +300,8 @@
(update [_ state] (update [_ state]
(let [id (-> state wsh/lookup-selected first)] (let [id (-> state wsh/lookup-selected first)]
(-> state (-> state
(assoc-in [:workspace-local :current-gradient] gradient) (assoc-in [:workspace-global :current-gradient] gradient)
(assoc-in [:workspace-local :current-gradient :shape-id] id)))))) (assoc-in [:workspace-global :current-gradient :shape-id] id))))))
(defn stop-gradient (defn stop-gradient
[] []
@ -318,7 +309,7 @@
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(-> state (-> state
(update :workspace-local dissoc :current-gradient))))) (update :workspace-global dissoc :current-gradient)))))
(defn update-gradient (defn update-gradient
[changes] [changes]
@ -326,7 +317,7 @@
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(-> state (-> state
(update-in [:workspace-local :current-gradient] merge changes))))) (update-in [:workspace-global :current-gradient] merge changes)))))
(defn select-gradient-stop (defn select-gradient-stop
[spot] [spot]
@ -334,4 +325,4 @@
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(-> state (-> state
(assoc-in [:workspace-local :editing-stop] spot))))) (assoc-in [:workspace-global :editing-stop] spot)))))

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

@ -72,14 +72,14 @@
(ptk/reify ::set-assets-box-open (ptk/reify ::set-assets-box-open
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(assoc-in state [:workspace-local :assets-files-open file-id box] open?)))) (assoc-in state [:workspace-global :assets-files-open file-id box] open?))))
(defn set-assets-group-open (defn set-assets-group-open
[file-id box path open?] [file-id box path open?]
(ptk/reify ::set-assets-group-open (ptk/reify ::set-assets-group-open
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(assoc-in state [:workspace-local :assets-files-open file-id :groups box path] open?)))) (assoc-in state [:workspace-global :assets-files-open file-id :groups box path] open?))))
(defn default-color-name [color] (defn default-color-name [color]
(or (:color color) (or (:color color)
@ -236,7 +236,7 @@
:origin it}) :origin it})
#(cond-> % #(cond-> %
edit? edit?
(assoc-in [:workspace-local :rename-typography] (:id typography)))))))))) (assoc-in [:workspace-global :rename-typography] (:id typography))))))))))
(defn update-typography (defn update-typography
[typography file-id] [typography file-id]

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

@ -8,6 +8,7 @@
"A collection of derived refs." "A collection of derived refs."
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.common.path.commands :as upc] [app.common.path.commands :as upc]
@ -72,12 +73,12 @@
(def dashboard-selected-project (def dashboard-selected-project
(l/derived (fn [state] (l/derived (fn [state]
(get-in state [:dashboard-local :selected-project])) (dm/get-in state [:dashboard-local :selected-project]))
st/state)) st/state))
(def dashboard-selected-files (def dashboard-selected-files
(l/derived (fn [state] (l/derived (fn [state]
(let [get-file #(get-in state [:dashboard-files %]) (let [get-file #(dm/get-in state [:dashboard-files %])
sim-file #(select-keys % [:id :name :project-id :is-shared]) sim-file #(select-keys % [:id :name :project-id :is-shared])
selected (get-in state [:dashboard-local :selected-files]) selected (get-in state [:dashboard-local :selected-files])
xform (comp (map get-file) xform (comp (map get-file)
@ -91,6 +92,9 @@
(def workspace-local (def workspace-local
(l/derived :workspace-local st/state)) (l/derived :workspace-local st/state))
(def workspace-global
(l/derived :workspace-global st/state))
(def workspace-drawing (def workspace-drawing
(l/derived :workspace-drawing st/state)) (l/derived :workspace-drawing st/state))
@ -101,41 +105,6 @@
[id] [id]
(l/derived #(contains? % id) selected-shapes)) (l/derived #(contains? % id) selected-shapes))
(def viewport-data
(l/derived #(select-keys % [:options-mode
:zoom
:vport
:vbox
:edition
:edit-path
:tooltip
:panning
:zooming
:picking-color?
:transform
:hover
:modifiers
:selrect
:show-distances?])
workspace-local =))
(def interactions-data
(l/derived #(select-keys % [:editing-interaction-index
:draw-interaction-to
:draw-interaction-to-frame
:move-overlay-to
:move-overlay-index])
workspace-local =))
(def typography-data
(l/derived #(select-keys % [:rename-typography
:edit-typography])
workspace-local =))
(def local-displacement
(l/derived #(select-keys % [:modifiers :selected])
workspace-local =))
(def selected-zoom (def selected-zoom
(l/derived :zoom workspace-local)) (l/derived :zoom workspace-local))
@ -167,15 +136,13 @@
(l/derived :hover-ids context-menu)) (l/derived :hover-ids context-menu))
(def selected-assets (def selected-assets
(l/derived :selected-assets workspace-local)) (l/derived :selected-assets workspace-global))
(def workspace-layout (def workspace-layout
(l/derived :workspace-layout st/state)) (l/derived :workspace-layout st/state))
(def current-file-id
(l/derived :current-file-id st/state))
(def workspace-file (def workspace-file
"A ref to a striped vision of file (without data)."
(l/derived (fn [state] (l/derived (fn [state]
(let [file (:workspace-file state) (let [file (:workspace-file state)
data (:workspace-data state)] data (:workspace-data state)]
@ -193,12 +160,12 @@
(def workspace-recent-colors (def workspace-recent-colors
(l/derived (fn [state] (l/derived (fn [state]
(get-in state [:workspace-data :recent-colors] [])) (dm/get-in state [:workspace-data :recent-colors] []))
st/state)) st/state))
(def workspace-recent-fonts (def workspace-recent-fonts
(l/derived (fn [state] (l/derived (fn [state]
(get-in state [:workspace-data :recent-fonts] [])) (dm/get-in state [:workspace-data :recent-fonts] []))
st/state)) st/state))
(def workspace-file-typography (def workspace-file-typography
@ -215,7 +182,7 @@
(def workspace-local-library (def workspace-local-library
(l/derived (fn [state] (l/derived (fn [state]
(select-keys (get state :workspace-data) (select-keys (:workspace-data state)
[:id [:id
:colors :colors
:media :media
@ -236,7 +203,7 @@
(l/derived (fn [state] (l/derived (fn [state]
(let [page-id (:current-page-id state) (let [page-id (:current-page-id state)
data (:workspace-data state)] data (:workspace-data state)]
(get-in data [:pages-index page-id]))) (dm/get-in data [:pages-index page-id])))
st/state)) st/state))
(def workspace-page-objects (def workspace-page-objects
@ -271,7 +238,7 @@
(defn- set-content-modifiers [state] (defn- set-content-modifiers [state]
(fn [id shape] (fn [id shape]
(let [content-modifiers (get-in state [:workspace-local :edit-path id :content-modifiers])] (let [content-modifiers (dm/get-in state [:workspace-local :edit-path id :content-modifiers])]
(if (some? content-modifiers) (if (some? content-modifiers)
(update shape :content upc/apply-content-modifiers content-modifiers) (update shape :content upc/apply-content-modifiers content-modifiers)
shape)))) shape))))
@ -343,7 +310,7 @@
(def users (def users
(l/derived :users st/state)) (l/derived :users st/state))
(def fullscreen? (def viewer-fullscreen?
(l/derived (fn [state] (l/derived (fn [state]
(get-in state [:viewer-local :fullscreen?] [])) (dm/get-in state [:viewer-local :fullscreen?]))
st/state)) st/state))

2
frontend/src/app/main/ui/viewer.cljs
View file

@ -73,7 +73,7 @@
zoom (:zoom local) zoom (:zoom local)
frames (:frames page) frames (:frames page)
frame (get frames index) frame (get frames index)
fullscreen? (mf/deref refs/fullscreen?) fullscreen? (mf/deref refs/viewer-fullscreen?)
overlays (:overlays local) overlays (:overlays local)
orig-frame orig-frame

2
frontend/src/app/main/ui/viewer/header.cljs
View file

@ -60,7 +60,7 @@
(mf/defc header-options (mf/defc header-options
[{:keys [section zoom page file index permissions]}] [{:keys [section zoom page file index permissions]}]
(let [fullscreen? (mf/deref refs/fullscreen?) (let [fullscreen? (mf/deref refs/viewer-fullscreen?)
toggle-fullscreen toggle-fullscreen
(mf/use-callback (mf/use-callback

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

@ -6,7 +6,8 @@
(ns app.main.ui.workspace (ns app.main.ui.workspace
(:require (:require
[app.main.data.messages :as dm] [app.common.data.macros :as dm]
[app.main.data.messages :as msg]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.data.workspace.persistence :as dwp] [app.main.data.workspace.persistence :as dwp]
[app.main.refs :as refs] [app.main.refs :as refs]
@ -38,21 +39,21 @@
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [selected (mf/deref refs/selected-shapes) (let [selected (mf/deref refs/selected-shapes)
local (mf/deref refs/viewport-data) file (obj/get props "file")
layout (obj/get props "layout")
{:keys [options-mode]} local {:keys [vport] :as local} (mf/deref refs/workspace-local)
file (obj/get props "file") {:keys [options-mode] :as wstate} (mf/deref refs/workspace-global)
layout (obj/get props "layout")
colorpalette? (:colorpalette layout) colorpalette? (:colorpalette layout)
textpalette? (:textpalette layout) textpalette? (:textpalette layout)
hide-ui? (:hide-ui layout) hide-ui? (:hide-ui layout)
on-resize on-resize
(mf/use-callback (mf/use-callback
(mf/deps (:vport local)) (mf/deps (:vport local))
(fn [resize-type size] (fn [resize-type size]
(when (:vport local) (when vport
(st/emit! (dw/update-viewport-size resize-type size))))) (st/emit! (dw/update-viewport-size resize-type size)))))
node-ref (use-resize-observer on-resize)] node-ref (use-resize-observer on-resize)]
@ -70,6 +71,7 @@
[:& viewport {:file file [:& viewport {:file file
:local local :local local
:wstate wstate
:selected selected :selected selected
:layout layout}]]] :layout layout}]]]
@ -119,7 +121,7 @@
;; Setting the layout preset by its name ;; Setting the layout preset by its name
(mf/with-effect [layout-name] (mf/with-effect [layout-name]
(st/emit! (dw/setup-layout layout-name))) (st/emit! (dw/initialize layout-name)))
(mf/with-effect [project-id file-id] (mf/with-effect [project-id file-id]
(st/emit! (dw/initialize-file project-id file-id)) (st/emit! (dw/initialize-file project-id file-id))
@ -129,7 +131,7 @@
;; Close any non-modal dialog that may be still open ;; Close any non-modal dialog that may be still open
(mf/with-effect (mf/with-effect
(st/emit! dm/hide)) (st/emit! msg/hide))
;; Set properly the page title ;; Set properly the page title
(mf/with-effect [(:name file)] (mf/with-effect [(:name file)]

23
frontend/src/app/main/ui/workspace/colorpicker.cljs
View file

@ -30,22 +30,22 @@
;; --- Refs ;; --- Refs
(def picking-color? (def picking-color?
(l/derived :picking-color? refs/workspace-local)) (l/derived :picking-color? refs/workspace-global))
(def picked-color (def picked-color
(l/derived :picked-color refs/workspace-local)) (l/derived :picked-color refs/workspace-global))
(def picked-color-select (def picked-color-select
(l/derived :picked-color-select refs/workspace-local)) (l/derived :picked-color-select refs/workspace-global))
(def viewport (def viewport
(l/derived (l/in [:workspace-local :vport]) st/state)) (l/derived :vport refs/workspace-local))
(def editing-spot-state-ref (def editing-spot-state-ref
(l/derived (l/in [:workspace-local :editing-stop]) st/state)) (l/derived :editing-stop refs/workspace-global))
(def current-gradient-ref (def current-gradient-ref
(l/derived (l/in [:workspace-local :current-gradient]) st/state)) (l/derived :current-gradient refs/workspace-global))
;; --- Color Picker Modal ;; --- Color Picker Modal
@ -387,11 +387,12 @@
position (or position :left) position (or position :left)
style (calculate-position vport position x y) style (calculate-position vport position x y)
handle-change (fn [new-data] handle-change
(reset! dirty? (not= data new-data)) (fn [new-data]
(reset! last-change new-data) (reset! dirty? (not= data new-data))
(when on-change (reset! last-change new-data)
(on-change new-data)))] (when on-change
(on-change new-data)))]
(mf/use-effect (mf/use-effect
(fn [] (fn []

3
frontend/src/app/main/ui/workspace/context_menu.cljs
View file

@ -35,9 +35,6 @@
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event)) (dom/stop-propagation event))
(mf/defc menu-entry (mf/defc menu-entry
[{:keys [title shortcut on-click children selected? icon] :as props}] [{:keys [title shortcut on-click children selected? icon] :as props}]
(let [submenu-ref (mf/use-ref nil) (let [submenu-ref (mf/use-ref nil)

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

@ -22,6 +22,7 @@
[app.util.timers :as ts] [app.util.timers :as ts]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(mf/defc image-upload (mf/defc image-upload
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[] []
@ -36,9 +37,8 @@
(mf/deps file) (mf/deps file)
(fn [blobs] (fn [blobs]
;; We don't want to add a ref because that redraws the component ;; We don't want to add a ref because that redraws the component
;; for everychange. Better direct access on the callback ;; for everychange. Better direct access on the callback.
;; vbox (get-in @st/state [:workspace-local :vbox]) (let [vbox (deref @refs/vbox)
(let [vbox (:vbox @refs/workspace-local)
x (mth/round (+ (:x vbox) (/ (:width vbox) 2))) x (mth/round (+ (:x vbox) (/ (:width vbox) 2)))
y (mth/round (+ (:y vbox) (/ (:height vbox) 2))) y (mth/round (+ (:y vbox) (/ (:height vbox) 2)))
params {:file-id (:id file) params {:file-id (:id file)

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

@ -7,6 +7,7 @@
(ns app.main.ui.workspace.sidebar.assets (ns app.main.ui.workspace.sidebar.assets
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.media :as cm] [app.common.media :as cm]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.common.spec :as us] [app.common.spec :as us]
@ -56,6 +57,10 @@
;; of grouping, deleting, etc. to events in the data module, since now the ;; of grouping, deleting, etc. to events in the data module, since now the
;; selection info is in the global state. ;; selection info is in the global state.
(def typography-data
(l/derived #(dm/select-keys % [:rename-typography :edit-typography])
refs/workspace-global =))
;; ---- Group assets management ---- ;; ---- Group assets management ----
(defn group-assets (defn group-assets
@ -1141,7 +1146,7 @@
(let [state (mf/use-state {:detail-open? false (let [state (mf/use-state {:detail-open? false
:id nil}) :id nil})
local-data (mf/deref refs/typography-data) local-data (mf/deref typography-data)
menu-state (mf/use-state auto-pos-menu-state) menu-state (mf/use-state auto-pos-menu-state)
groups (group-assets typographies reverse-sort?) groups (group-assets typographies reverse-sort?)
@ -1258,11 +1263,11 @@
handle-rename-typography-clicked handle-rename-typography-clicked
(fn [] (fn []
(st/emit! #(assoc-in % [:workspace-local :rename-typography] (:id @state)))) (st/emit! #(assoc-in % [:workspace-global :rename-typography] (:id @state))))
handle-edit-typography-clicked handle-edit-typography-clicked
(fn [] (fn []
(st/emit! #(assoc-in % [:workspace-local :edit-typography] (:id @state)))) (st/emit! #(assoc-in % [:workspace-global :edit-typography] (:id @state))))
handle-delete-typography handle-delete-typography
(mf/use-callback (mf/use-callback
@ -1282,9 +1287,9 @@
(mf/deps local-data) (mf/deps local-data)
(fn [] (fn []
(when (:rename-typography local-data) (when (:rename-typography local-data)
(st/emit! #(update % :workspace-local dissoc :rename-typography))) (st/emit! #(update % :workspace-global dissoc :rename-typography)))
(when (:edit-typography local-data) (when (:edit-typography local-data)
(st/emit! #(update % :workspace-local dissoc :edit-typography))))) (st/emit! #(update % :workspace-global dissoc :edit-typography)))))
[:& asset-section {:file-id file-id [:& asset-section {:file-id file-id
:title (tr "workspace.assets.typography") :title (tr "workspace.assets.typography")
@ -1365,10 +1370,11 @@
(vals (get-in state [:workspace-libraries id :data :typographies]))))) (vals (get-in state [:workspace-libraries id :data :typographies])))))
st/state =)) st/state =))
(defn open-file-ref (defn make-open-file-ref
[id] [id]
(-> (l/in [:assets-files-open id]) (mf/with-memo [id]
(l/derived refs/workspace-local))) (-> (l/in [:assets-files-open id])
(l/derived refs/workspace-global))))
(defn apply-filters (defn apply-filters
[coll filters reverse-sort?] [coll filters reverse-sort?]
@ -1387,7 +1393,7 @@
(mf/defc file-library (mf/defc file-library
[{:keys [file local? default-open? filters] :as props}] [{:keys [file local? default-open? filters] :as props}]
(let [open-file (mf/deref (open-file-ref (:id file))) (let [open-file (mf/deref (make-open-file-ref (:id file)))
open? (-> open-file open? (-> open-file
:library :library
(d/nilv default-open?)) (d/nilv default-open?))

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

@ -42,22 +42,23 @@
;; --- Viewport ;; --- Viewport
(mf/defc viewport (mf/defc viewport
[{:keys [local selected layout file] :as props}] [{:keys [local wstate selected layout file] :as props}]
(let [;; When adding data from workspace-local revisit `app.main.ui.workspace` to check (let [;; When adding data from workspace-local revisit `app.main.ui.workspace` to check
;; that the new parameter is sent ;; that the new parameter is sent
{:keys [edit-path {:keys [edit-path
edition
options-mode
panning panning
picking-color?
selrect selrect
show-distances?
tooltip
transform transform
vbox vbox
vport vport
zoom]} local zoom]} local
{:keys [edition
options-mode
tooltip
show-distances?
picking-color?]} wstate
;; CONTEXT ;; CONTEXT
page-id (mf/use-ctx ctx/current-page-id) page-id (mf/use-ctx ctx/current-page-id)
@ -66,9 +67,9 @@
options (mf/deref refs/workspace-page-options) options (mf/deref refs/workspace-page-options)
base-objects (mf/deref refs/workspace-page-objects) base-objects (mf/deref refs/workspace-page-objects)
modifiers (mf/deref refs/workspace-modifiers) modifiers (mf/deref refs/workspace-modifiers)
objects-modified (mf/use-memo objects-modified (mf/with-memo [base-objects modifiers]
(mf/deps base-objects modifiers) (gsh/merge-modifiers base-objects modifiers))
#(gsh/merge-modifiers base-objects modifiers))
background (get options :background clr/canvas) background (get options :background clr/canvas)
;; STATE ;; STATE

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

@ -32,10 +32,10 @@
(def gradient-square-stroke-color-selected "var(--color-select)") (def gradient-square-stroke-color-selected "var(--color-select)")
(def editing-spot-ref (def editing-spot-ref
(l/derived (l/in [:workspace-local :editing-stop]) st/state)) (l/derived (l/in [:workspace-global :editing-stop]) st/state))
(def current-gradient-ref (def current-gradient-ref
(l/derived (l/in [:workspace-local :current-gradient]) st/state =)) (l/derived (l/in [:workspace-global :current-gradient]) st/state =))
(mf/defc shadow [{:keys [id x y width height offset]}] (mf/defc shadow [{:keys [id x y width height offset]}]
[:filter {:id id [:filter {:id id

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

@ -8,6 +8,7 @@
"Visually show shape interactions in workspace" "Visually show shape interactions in workspace"
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.common.spec.interactions :as cti] [app.common.spec.interactions :as cti]
@ -17,8 +18,17 @@
[app.main.ui.workspace.viewport.outline :refer [outline]] [app.main.ui.workspace.viewport.outline :refer [outline]]
[app.util.dom :as dom] [app.util.dom :as dom]
[cuerdas.core :as str] [cuerdas.core :as str]
[okulary.core :as l]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(def interactions-ref
(l/derived #(dm/select-keys % [:editing-interaction-index
:draw-interaction-to
:draw-interaction-to-frame
:move-overlay-to
:move-overlay-index])
refs/workspace-local =))
(defn- on-mouse-down (defn- on-mouse-down
[event index {:keys [id] :as shape}] [event index {:keys [id] :as shape}]
(dom/stop-propagation event) (dom/stop-propagation event)
@ -251,7 +261,7 @@
draw-interaction-to draw-interaction-to
draw-interaction-to-frame draw-interaction-to-frame
move-overlay-to move-overlay-to
move-overlay-index]} (mf/deref refs/interactions-data) move-overlay-index]} (mf/deref interactions-ref)
first-selected (first selected-shapes) first-selected (first selected-shapes)