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

♻️ Refactor layout flags handling.

Browse source
This commit is contained in:
Andrey Antukh 2020-10-22 17:02:29 +02:00 • committed by Hirunatan
parent 560ad5b280
commit 3379eed38e
8 changed files with 127 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,6 @@
(ns app.main.data.workspace (ns app.main.data.workspace
(:require (:require
[cuerdas.core :as str]
[app.common.data :as d] [app.common.data :as d]
[app.common.exceptions :as ex] [app.common.exceptions :as ex]
[app.common.geom.matrix :as gmt] [app.common.geom.matrix :as gmt]
@ -22,6 +21,7 @@
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.config :as cfg] [app.config :as cfg]
[app.main.constants :as c] [app.main.constants :as c]
[app.main.data.colors :as mdc]
[app.main.data.workspace.common :as dwc] [app.main.data.workspace.common :as dwc]
[app.main.data.workspace.libraries :as dwl] [app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.notifications :as dwn] [app.main.data.workspace.notifications :as dwn]
@ -29,11 +29,11 @@
[app.main.data.workspace.selection :as dws] [app.main.data.workspace.selection :as dws]
[app.main.data.workspace.texts :as dwtxt] [app.main.data.workspace.texts :as dwtxt]
[app.main.data.workspace.transforms :as dwt] [app.main.data.workspace.transforms :as dwt]
[app.main.data.colors :as mdc]
[app.main.repo :as rp] [app.main.repo :as rp]
[app.main.store :as st] [app.main.store :as st]
[app.main.streams :as ms] [app.main.streams :as ms]
[app.main.worker :as uw] [app.main.worker :as uw]
[app.util.logging :as log]
[app.util.router :as rt] [app.util.router :as rt]
[app.util.timers :as ts] [app.util.timers :as ts]
[app.util.transit :as t] [app.util.transit :as t]
@ -41,8 +41,11 @@
[beicon.core :as rx] [beicon.core :as rx]
[cljs.spec.alpha :as s] [cljs.spec.alpha :as s]
[clojure.set :as set] [clojure.set :as set]
[clojure.set :as set]
[cuerdas.core :as str]
[potok.core :as ptk])) [potok.core :as ptk]))
;; (log/set-level! :trace)
;; --- Specs ;; --- Specs
(s/def ::shape-attrs ::cp/shape-attrs) (s/def ::shape-attrs ::cp/shape-attrs)
@ -59,7 +62,6 @@
(s/def ::layout-flag (s/def ::layout-flag
#{:sitemap #{:sitemap
:sitemap-pages
:layers :layers
:comments :comments
:assets :assets
@ -75,7 +77,6 @@
(def default-layout (def default-layout
#{:sitemap #{:sitemap
:sitemap-pages
:layers :layers
:element-options :element-options
:rules :rules
@ -381,59 +382,47 @@
;; --- Toggle layout flag ;; --- Toggle layout flag
(defn- toggle-layout-flag (def layout-flags
[state flag] {:assets
(us/assert ::layout-flag flag) {:del #{:sitemap :layers :document-history }
(update state :workspace-layout :add #{:assets}}
(fn [flags]
(if (contains? flags flag)
(disj flags flag)
(conj flags flag)))))
(defn- check-sidebars :document-history
[state] {:del #{:assets :layers :sitemap}
(let [layout (:workspace-layout state) :add #{:document-history}}
left? (seq (keep layout [:layers :sitemap :document-history :assets]))
right? (seq (keep layout [:element-options :comments]))]
(update state :workspace-local :layers
assoc :left-sidebar? (boolean left?) {:del #{:document-history :assets}
:right-sidebar? (boolean right?)))) :add #{:sitemap :layers}}})
(defn- check-auto-flags (defn- ensure-layout
[state flags-to-toggle] [layout]
(update state :workspace-layout (assert (contains? layout-flags layout)
(fn [flags] (str "unexpected layout name: " layout))
(cond-> flags (ptk/reify ::ensure-layout
(contains? flags-to-toggle :assets) ptk/UpdateEvent
(disj :sitemap :layers :document-history) (update [_ state]
(update state :workspace-layout
(fn [stored]
(let [todel (get-in layout-flags [layout :del] #{})
toadd (get-in layout-flags [layout :add] #{})]
(-> stored
(set/difference todel)
(set/union toadd))))))))
(contains? flags-to-toggle :sitemap) (defn- toggle-layout-flags
(disj :assets :document-history)
(contains? flags-to-toggle :document-history)
(disj :assets :sitemap :layers)
(contains? flags-to-toggle :document-history)
(disj :assets :sitemap :layers)
(contains? flags-to-toggle :comments)
(as-> $ (if (contains? flags :comments)
(disj $ :element-options)
(conj $ :element-options)))
(contains? flags-to-toggle :element-options)
(disj :comments)))))
(defn toggle-layout-flags
[& flags] [& flags]
(let [flags (into #{} flags)] (ptk/reify ::toggle-layout-flags
(ptk/reify ::toggle-layout-flags ptk/UpdateEvent
ptk/UpdateEvent (update [_ state]
(update [_ state] (update state :workspace-layout
(-> (reduce toggle-layout-flag state flags) (fn [stored]
(check-auto-flags flags) (reduce (fn [flags flag]
(check-sidebars)))))) (if (contains? flags flag)
(disj flags flag)
(conj flags flag)))
stored
(into #{} flags)))))))
;; --- Set element options mode ;; --- Set element options mode
@ -1057,8 +1046,6 @@
(update [_ state] (update [_ state]
(update state :workspace-drawing dissoc :tool :object)))) (update state :workspace-drawing dissoc :tool :object))))
(declare toggle-layout-flags)
(defn select-for-drawing (defn select-for-drawing
([tool] (select-for-drawing tool nil)) ([tool] (select-for-drawing tool nil))
([tool data] ([tool data]
@ -1071,12 +1058,16 @@
(watch [_ state stream] (watch [_ state stream]
(let [stoper (rx/filter (ptk/type? ::clear-drawing) stream)] (let [stoper (rx/filter (ptk/type? ::clear-drawing) stream)]
(rx/merge (rx/merge
(rx/of (toggle-layout-flags :element-options)) (rx/of (dws/deselect-all))
(->> stream
(rx/filter dwc/interrupt?) ;; NOTE: comments are a special case and they manage they
(rx/take 1) ;; own interrupt cycle.
(rx/map (constantly clear-drawing)) (when (not= tool :comments)
(rx/take-until stoper)))))))) (->> stream
(rx/filter dwc/interrupt?)
(rx/take 1)
(rx/map (constantly clear-drawing))
(rx/take-until stoper)))))))))
;; --- Update Dimensions ;; --- Update Dimensions

34
frontend/src/app/main/data/workspace/comments.cljs
View file

@ -40,7 +40,6 @@
(s/def ::comment any?) (s/def ::comment any?)
(declare create-draft-thread) (declare create-draft-thread)
(declare clear-draft-thread)
(declare retrieve-comment-threads) (declare retrieve-comment-threads)
(declare refresh-comment-thread) (declare refresh-comment-thread)
(declare handle-interrupt) (declare handle-interrupt)
@ -75,16 +74,17 @@
(ptk/reify ::handle-interrupt (ptk/reify ::handle-interrupt
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(let [local (:workspace-comments state)] (let [local (:workspace-comments state)
drawing (:workspace-drawing state)]
(cond (cond
(:draft local) (:comment drawing)
(update state :workspace-comments dissoc :draft) (update state :workspace-drawing dissoc :comment)
(:open local) (:open local)
(update state :workspace-comments dissoc :open) (update state :workspace-comments dissoc :open)
:else :else
state))))) (dissoc state :workspace-drawing))))))
;; Event responsible of the what should be executed when user clicked ;; Event responsible of the what should be executed when user clicked
;; on the comments layer. An option can be create a new draft thread, ;; on the comments layer. An option can be create a new draft thread,
@ -98,15 +98,16 @@
(let [local (:workspace-comments state)] (let [local (:workspace-comments state)]
(if (:open local) (if (:open local)
(update state :workspace-comments dissoc :open) (update state :workspace-comments dissoc :open)
(update state :workspace-comments assoc (update state :workspace-drawing assoc
:draft {:position position :content ""})))))) :comment {:position position :content ""}))))))
(defn create-thread (defn create-thread
[data] [data]
(letfn [(created [{:keys [id comment] :as thread} state] (letfn [(created [{:keys [id comment] :as thread} state]
(-> state (-> state
(update :comment-threads assoc id (dissoc thread :comment)) (update :comment-threads assoc id (dissoc thread :comment))
(update :workspace-comments assoc :draft nil :open id) (update :workspace-comments assoc :open id)
(update :workspace-drawing dissoc :comment)
(update-in [:comments id] assoc (:id comment) comment)))] (update-in [:comments id] assoc (:id comment) comment)))]
(ptk/reify ::create-thread (ptk/reify ::create-thread
@ -247,28 +248,25 @@
(ptk/reify ::open-thread (ptk/reify ::open-thread
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(update state :workspace-comments assoc :open id :draft nil)))) (-> state
(update :workspace-comments assoc :open id)
(update :workspace-drawing dissoc :comment)))))
(defn close-thread (defn close-thread
[] []
(ptk/reify ::open-thread (ptk/reify ::open-thread
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(update state :workspace-comments dissoc :open :draft)))) (-> state
(update :workspace-comments dissoc :open)
(update :workspace-drawing dissoc :comment)))))
(defn- clear-draft-thread
[state]
(update state :workspace-comments dissoc :draft))
;; TODO: add specs
(defn update-draft-thread (defn update-draft-thread
[data] [data]
(ptk/reify ::update-draft-thread (ptk/reify ::update-draft-thread
ptk/UpdateEvent ptk/UpdateEvent
(update [_ state] (update [_ state]
(update state :workspace-comments assoc :draft data)))) (update state :workspace-drawing assoc :comment data))))
(defn update-filters (defn update-filters
[{:keys [main resolved]}] [{:keys [main resolved]}]

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

@ -21,7 +21,6 @@
[app.main.ui.keyboard :as kbd] [app.main.ui.keyboard :as kbd]
[app.main.ui.workspace.colorpalette :refer [colorpalette]] [app.main.ui.workspace.colorpalette :refer [colorpalette]]
[app.main.ui.workspace.colorpicker] [app.main.ui.workspace.colorpicker]
[app.main.ui.workspace.comments :refer [comments-layer]]
[app.main.ui.workspace.context-menu :refer [context-menu]] [app.main.ui.workspace.context-menu :refer [context-menu]]
[app.main.ui.workspace.header :refer [header]] [app.main.ui.workspace.header :refer [header]]
[app.main.ui.workspace.left-toolbar :refer [left-toolbar]] [app.main.ui.workspace.left-toolbar :refer [left-toolbar]]
@ -53,14 +52,6 @@
[:section.workspace-content {:class classes} [:section.workspace-content {:class classes}
[:section.workspace-viewport [:section.workspace-viewport
(when (contains? layout :comments)
[:& comments-layer {:vbox (:vbox local)
:vport (:vport local)
:zoom (:zoom local)
:page-id page-id
:file-id (:id file)}
])
(when (contains? layout :rules) (when (contains? layout :rules)
[:* [:*
[:div.empty-rule-square] [:div.empty-rule-square]

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

@ -358,7 +358,7 @@
(l/derived :workspace-comments st/state)) (l/derived :workspace-comments st/state))
(mf/defc comments-layer (mf/defc comments-layer
[{:keys [vbox vport zoom file-id page-id] :as props}] [{:keys [vbox vport zoom file-id page-id drawing] :as props}]
(let [pos-x (* (- (:x vbox)) zoom) (let [pos-x (* (- (:x vbox)) zoom)
pos-y (* (- (:y vbox)) zoom) pos-y (* (- (:y vbox)) zoom)
profile (mf/deref refs/profile) profile (mf/deref refs/profile)
@ -390,7 +390,7 @@
[:& thread-comments {:thread thread [:& thread-comments {:thread thread
:zoom zoom}])) :zoom zoom}]))
(when-let [draft (:draft local)] (when-let [draft (:comment drawing)]
[:& draft-thread {:draft draft :zoom zoom}])]])) [:& draft-thread {:draft draft :zoom zoom}])]]))

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

@ -25,9 +25,9 @@
[{:keys [layout] :as props}] [{:keys [layout] :as props}]
(let [file-input (mf/use-ref nil) (let [file-input (mf/use-ref nil)
selected-drawtool (mf/deref refs/selected-drawing-tool) selected-drawtool (mf/deref refs/selected-drawing-tool)
select-drawtool #(st/emit! :interrupt select-drawtool #(st/emit! :interrupt (dw/select-for-drawing %))
(dw/select-for-drawing %))
file (mf/deref refs/workspace-file) file (mf/deref refs/workspace-file)
locale (i18n/use-locale) locale (i18n/use-locale)
on-image #(dom/click (mf/ref-val file-input)) on-image #(dom/click (mf/ref-val file-input))
@ -97,26 +97,25 @@
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.comments") {:alt (t locale "workspace.toolbar.comments")
:class (when (contains? layout :comments) "selected") :class (when (= selected-drawtool :comments) "selected")
:on-click (st/emitf :interrupt (dw/toggle-layout-flags :comments)) :on-click (partial select-drawtool :comments)}
}
i/chat]] i/chat]]
[:ul.left-toolbar-options.panels [:ul.left-toolbar-options.panels
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt "Layers" {:alt "Layers"
:class (when (contains? layout :layers) "selected") :class (when (contains? layout :layers) "selected")
:on-click (st/emitf (dw/toggle-layout-flags :sitemap :layers))} :on-click (st/emitf (dw/ensure-layout :layers))}
i/layers] i/layers]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.assets") {:alt (t locale "workspace.toolbar.assets")
:class (when (contains? layout :assets) "selected") :class (when (contains? layout :assets) "selected")
:on-click (st/emitf (dw/toggle-layout-flags :assets))} :on-click (st/emitf (dw/ensure-layout :assets))}
i/library] i/library]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt "History" {:alt "History"
:class (when (contains? layout :document-history) "selected") :class (when (contains? layout :document-history) "selected")
:on-click (st/emitf (dw/toggle-layout-flags :document-history))} :on-click (st/emitf (dw/ensure-layout :document-history))}
i/undo-history] i/undo-history]
[:li.tooltip.tooltip-right [:li.tooltip.tooltip-right
{:alt (t locale "workspace.toolbar.color-palette") {:alt (t locale "workspace.toolbar.color-palette")

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

@ -9,14 +9,15 @@
(ns app.main.ui.workspace.sidebar (ns app.main.ui.workspace.sidebar
(:require (:require
[rumext.alpha :as mf] [app.main.refs :as refs]
[cuerdas.core :as str]
[app.main.ui.workspace.comments :refer [comments-sidebar]] [app.main.ui.workspace.comments :refer [comments-sidebar]]
[app.main.ui.workspace.sidebar.assets :refer [assets-toolbox]]
[app.main.ui.workspace.sidebar.history :refer [history-toolbox]] [app.main.ui.workspace.sidebar.history :refer [history-toolbox]]
[app.main.ui.workspace.sidebar.layers :refer [layers-toolbox]] [app.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
[app.main.ui.workspace.sidebar.options :refer [options-toolbox]] [app.main.ui.workspace.sidebar.options :refer [options-toolbox]]
[app.main.ui.workspace.sidebar.sitemap :refer [sitemap]] [app.main.ui.workspace.sidebar.sitemap :refer [sitemap]]
[app.main.ui.workspace.sidebar.assets :refer [assets-toolbox]])) [cuerdas.core :as str]
[rumext.alpha :as mf]))
;; --- Left Sidebar (Component) ;; --- Left Sidebar (Component)
@ -26,14 +27,16 @@
[:aside.settings-bar.settings-bar-left [:aside.settings-bar.settings-bar-left
[:div.settings-bar-inside [:div.settings-bar-inside
{:data-layout (str/join "," layout)} {:data-layout (str/join "," layout)}
(when (contains? layout :sitemap)
[:& sitemap {:file file
:page-id page-id
:layout layout}])
(when (contains? layout :document-history)
[:& history-toolbox])
(when (contains? layout :layers) (when (contains? layout :layers)
[:& layers-toolbox]) [:*
[:& sitemap {:file file
:page-id page-id
:layout layout}]
[:& layers-toolbox]])
(when (contains? layout :document-history)
[:& history-toolbox])
(when (contains? layout :assets) (when (contains? layout :assets)
[:& assets-toolbox {:team-id (:team-id project) [:& assets-toolbox {:team-id (:team-id project)
:file file}])]]) :file file}])]])
@ -42,12 +45,12 @@
(mf/defc right-sidebar (mf/defc right-sidebar
[{:keys [layout page-id file-id local] :as props}] [{:keys [layout page-id file-id local] :as props}]
[:aside#settings-bar.settings-bar (let [drawing-tool (:tool (mf/deref refs/workspace-drawing))]
[:div.settings-bar-inside [:aside#settings-bar.settings-bar
(when (contains? layout :element-options) [:div.settings-bar-inside
[:& options-toolbox (if (= drawing-tool :comments)
{:page-id page-id [:& comments-sidebar]
:file-id file-id [:& options-toolbox
:local local}]) {:page-id page-id
(when (contains? layout :comments) :file-id file-id
[:& comments-sidebar])]]) :local local}])]]))

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

@ -148,16 +148,20 @@
(mf/defc sitemap (mf/defc sitemap
[{:keys [file page-id layout] :as props}] [{:keys [file page-id layout] :as props}]
(let [create (mf/use-callback #(st/emit! dw/create-empty-page)) (let [create (mf/use-callback #(st/emit! dw/create-empty-page))
collapse (mf/use-callback #(st/emit! (dw/toggle-layout-flags :sitemap-pages))) locale (mf/deref i18n/locale)
locale (mf/deref i18n/locale)] show-pages? (mf/use-state true)
toggle-pages
(mf/use-callback #(reset! show-pages? not))]
[:div.sitemap.tool-window [:div.sitemap.tool-window
[:div.tool-window-bar [:div.tool-window-bar
[:span (t locale "workspace.sidebar.sitemap")] [:span (t locale "workspace.sidebar.sitemap")]
[:div.add-page {:on-click create} i/close] [:div.add-page {:on-click create} i/close]
[:div.collapse-pages {:on-click collapse} i/arrow-slide]] [:div.collapse-pages {:on-click toggle-pages} i/arrow-slide]]
(when (contains? layout :sitemap-pages) (when @show-pages?
[:div.tool-window-content [:div.tool-window-content
[:& pages-list [:& pages-list
{:file file {:file file

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

@ -29,15 +29,16 @@
[app.main.ui.hooks :as hooks] [app.main.ui.hooks :as hooks]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.keyboard :as kbd] [app.main.ui.keyboard :as kbd]
[app.main.ui.workspace.colorpicker.pixel-overlay :refer [pixel-overlay]]
[app.main.ui.workspace.comments :refer [comments-layer]]
[app.main.ui.workspace.drawarea :refer [draw-area]] [app.main.ui.workspace.drawarea :refer [draw-area]]
[app.main.ui.workspace.frame-grid :refer [frame-grid]] [app.main.ui.workspace.frame-grid :refer [frame-grid]]
[app.main.ui.workspace.gradients :refer [gradient-handlers]]
[app.main.ui.workspace.presence :as presence] [app.main.ui.workspace.presence :as presence]
[app.main.ui.workspace.selection :refer [selection-handlers]] [app.main.ui.workspace.selection :refer [selection-handlers]]
[app.main.ui.workspace.shapes :refer [shape-wrapper frame-wrapper]] [app.main.ui.workspace.shapes :refer [shape-wrapper frame-wrapper]]
[app.main.ui.workspace.shapes.interactions :refer [interactions]] [app.main.ui.workspace.shapes.interactions :refer [interactions]]
[app.main.ui.workspace.shapes.outline :refer [outline]] [app.main.ui.workspace.shapes.outline :refer [outline]]
[app.main.ui.workspace.gradients :refer [gradient-handlers]]
[app.main.ui.workspace.colorpicker.pixel-overlay :refer [pixel-overlay]]
[app.main.ui.workspace.snap-distances :refer [snap-distances]] [app.main.ui.workspace.snap-distances :refer [snap-distances]]
[app.main.ui.workspace.snap-points :refer [snap-points]] [app.main.ui.workspace.snap-points :refer [snap-points]]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -229,7 +230,8 @@
(cond (cond
(and (= 1 (.-which event))) (and (= 1 (.-which event)))
(if drawing-tool (if drawing-tool
(st/emit! (dd/start-drawing drawing-tool)) (when (not= drawing-tool :comments)
(st/emit! (dd/start-drawing drawing-tool)))
(st/emit! dw/handle-selection)) (st/emit! dw/handle-selection))
(and (not edition) (and (not edition)
@ -495,6 +497,16 @@
:options options :options options
:layout layout}]) :layout layout}])
(when (= drawing-tool :comments)
[:& comments-layer {:vbox (:vbox local)
:vport (:vport local)
:zoom (:zoom local)
:drawing drawing
:page-id page-id
:file-id (:id file)}
])
[:svg.viewport [:svg.viewport
{:preserveAspectRatio "xMidYMid meet" {:preserveAspectRatio "xMidYMid meet"
:width (:width vport 0) :width (:width vport 0)
@ -504,6 +516,7 @@
:class (when drawing-tool "drawing") :class (when drawing-tool "drawing")
:style {:cursor (cond :style {:cursor (cond
panning cur/hand panning cur/hand
(= drawing-tool :comments) cur/hand
(= drawing-tool :frame) cur/create-artboard (= drawing-tool :frame) cur/create-artboard
(= drawing-tool :rect) cur/create-rectangle (= drawing-tool :rect) cur/create-rectangle
(= drawing-tool :circle) cur/create-ellipse (= drawing-tool :circle) cur/create-ellipse
@ -523,7 +536,9 @@
:on-drag-over on-drag-over :on-drag-over on-drag-over
:on-drop on-drop} :on-drop on-drop}
[:g [:g {:style {:pointer-events (if (contains? layout :comments)
"none"
"auto")}}
[:& frames {:key page-id [:& frames {:key page-id
:hover (:hover local) :hover (:hover local)
:selected (:selected selected)}] :selected (:selected selected)}]