mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
Remove toolbox concept and implement all toolbox state as flags.
This commit is contained in:
parent
5b04ef5d98
commit
b15dfe953d
12 changed files with 40 additions and 52 deletions
|
@ -64,14 +64,13 @@
|
||||||
rs/UpdateEvent
|
rs/UpdateEvent
|
||||||
(-apply-update [_ state]
|
(-apply-update [_ state]
|
||||||
(let [s {:project projectid
|
(let [s {:project projectid
|
||||||
:toolboxes #{:layers}
|
:flags #{:layers}
|
||||||
:flags #{}
|
|
||||||
:drawing nil
|
:drawing nil
|
||||||
:selected #{}
|
:selected #{}
|
||||||
:page pageid}]
|
:page pageid}]
|
||||||
(assoc state :workspace s)))))
|
(assoc state :workspace s)))))
|
||||||
|
|
||||||
(defn toggle-tool
|
(defn toggle-flag
|
||||||
"Toggle the enabled flag of the specified tool."
|
"Toggle the enabled flag of the specified tool."
|
||||||
[key]
|
[key]
|
||||||
(reify
|
(reify
|
||||||
|
@ -82,18 +81,6 @@
|
||||||
(assoc-in state [:workspace :flags] (disj flags key))
|
(assoc-in state [:workspace :flags] (disj flags key))
|
||||||
(assoc-in state [:workspace :flags] (conj flags key)))))))
|
(assoc-in state [:workspace :flags] (conj flags key)))))))
|
||||||
|
|
||||||
(defn toggle-toolbox
|
|
||||||
"Toggle the visibility flag of the specified toolbox."
|
|
||||||
[toolname]
|
|
||||||
(reify
|
|
||||||
rs/UpdateEvent
|
|
||||||
(-apply-update [_ state]
|
|
||||||
(let [toolboxes (get-in state [:workspace :toolboxes])]
|
|
||||||
(assoc-in state [:workspace :toolboxes]
|
|
||||||
(if (contains? toolboxes toolname)
|
|
||||||
(disj toolboxes toolname)
|
|
||||||
(conj toolboxes toolname)))))))
|
|
||||||
|
|
||||||
(defn select-for-drawing
|
(defn select-for-drawing
|
||||||
"Mark a shape selected for drawing in the canvas."
|
"Mark a shape selected for drawing in the canvas."
|
||||||
[shape]
|
[shape]
|
||||||
|
|
|
@ -142,7 +142,7 @@
|
||||||
(defn- ruler-render
|
(defn- ruler-render
|
||||||
[own]
|
[own]
|
||||||
(let [flags (rum/react wb/flags-l)]
|
(let [flags (rum/react wb/flags-l)]
|
||||||
(when (contains? flags :workspace/ruler)
|
(when (contains? flags :ruler)
|
||||||
(overlay))))
|
(overlay))))
|
||||||
|
|
||||||
(def ^:static ruler
|
(def ^:static ruler
|
||||||
|
|
|
@ -52,8 +52,8 @@
|
||||||
(get collections-by-id collid)
|
(get collections-by-id collid)
|
||||||
(first collections))
|
(first collections))
|
||||||
select-collection #(select-collection local %)
|
select-collection #(select-collection local %)
|
||||||
close #(rs/emit! (dw/toggle-tool :workspace/colorpalette))]
|
close #(rs/emit! (dw/toggle-flag :colorpalette))]
|
||||||
(when (contains? flags :workspace/colorpalette)
|
(when (contains? flags :colorpalette)
|
||||||
(html
|
(html
|
||||||
[:div.color-palette
|
[:div.color-palette
|
||||||
[:div.color-palette-actions
|
[:div.color-palette-actions
|
||||||
|
|
|
@ -57,7 +57,7 @@
|
||||||
step-size (/ 10 zoom)
|
step-size (/ 10 zoom)
|
||||||
flags (rum/react wb/flags-l)
|
flags (rum/react wb/flags-l)
|
||||||
page (rum/react wb/page-l)
|
page (rum/react wb/page-l)
|
||||||
enabled? (contains? flags :workspace/grid)
|
enabled? (contains? flags :grid)
|
||||||
vertical-ticks (range (- 0 wb/document-start-y)
|
vertical-ticks (range (- 0 wb/document-start-y)
|
||||||
(- (:width page) wb/document-start-y)
|
(- (:width page) wb/document-start-y)
|
||||||
step-size)
|
step-size)
|
||||||
|
|
|
@ -25,24 +25,31 @@
|
||||||
[own]
|
[own]
|
||||||
(let [page (rum/react wb/page-l)
|
(let [page (rum/react wb/page-l)
|
||||||
flags (rum/react wb/flags-l)
|
flags (rum/react wb/flags-l)
|
||||||
toggle #(rs/emit! (dw/toggle-tool %))]
|
toggle #(rs/emit! (dw/toggle-flag %))]
|
||||||
(html
|
(html
|
||||||
[:header#workspace-bar.workspace-bar
|
[:header#workspace-bar.workspace-bar
|
||||||
[:div.main-icon
|
[:div.main-icon
|
||||||
(nav/link (r/route-for :dashboard/projects) i/logo-icon)]
|
(nav/link (r/route-for :dashboard/projects) i/logo-icon)]
|
||||||
[:div.project-tree-btn
|
[:div.project-tree-btn
|
||||||
{:on-click (partial toggle :workspace/pagesmngr)}
|
{:on-click (partial toggle :pagesmngr)}
|
||||||
i/project-tree
|
i/project-tree
|
||||||
[:span (:name page)]]
|
[:span (:name page)]]
|
||||||
[:div.workspace-options
|
[:div.workspace-options
|
||||||
[:ul.options-btn
|
[:ul.options-btn
|
||||||
[:li.tooltip.tooltip-bottom {:alt "Shapes (Ctrl + Shift + S)"}
|
[:li.tooltip.tooltip-bottom
|
||||||
|
{:alt "Shapes (Ctrl + Shift + F)"
|
||||||
|
:class (when (contains? flags :drawtools) "current")
|
||||||
|
:on-click (partial toggle :drawtools)}
|
||||||
i/shapes]
|
i/shapes]
|
||||||
[:li.tooltip.tooltip-bottom {:alt "Elements (Ctrl + Shift + E)"}
|
[:li.tooltip.tooltip-bottom
|
||||||
i/puzzle]
|
{:alt "Icons (Ctrl + Shift + I)"
|
||||||
[:li.tooltip.tooltip-bottom {:alt "Icons (Ctrl + Shift + I)"}
|
:class (when (contains? flags :icons) "current")
|
||||||
|
:on-click (partial toggle :icons)}
|
||||||
i/icon-set]
|
i/icon-set]
|
||||||
[:li.tooltip.tooltip-bottom {:alt "Layers (Ctrl + Shift + L)"}
|
[:li.tooltip.tooltip-bottom
|
||||||
|
{:alt "Elements (Ctrl + Shift + L)"
|
||||||
|
:class (when (contains? flags :layers) "current")
|
||||||
|
:on-click (partial toggle :layers)}
|
||||||
i/layers]]
|
i/layers]]
|
||||||
[:ul.options-btn
|
[:ul.options-btn
|
||||||
[:li.tooltip.tooltip-bottom {:alt "Undo (Ctrl + Z)"}
|
[:li.tooltip.tooltip-bottom {:alt "Undo (Ctrl + Z)"}
|
||||||
|
@ -63,13 +70,13 @@
|
||||||
[:ul.options-btn
|
[:ul.options-btn
|
||||||
[:li.tooltip.tooltip-bottom
|
[:li.tooltip.tooltip-bottom
|
||||||
{:alt "Ruler (Ctrl + R)"
|
{:alt "Ruler (Ctrl + R)"
|
||||||
:class (when (contains? flags :workspace/ruler) "selected")
|
:class (when (contains? flags :ruler) "selected")
|
||||||
:on-click (partial toggle :workspace/ruler)}
|
:on-click (partial toggle :ruler)}
|
||||||
i/ruler]
|
i/ruler]
|
||||||
[:li.tooltip.tooltip-bottom
|
[:li.tooltip.tooltip-bottom
|
||||||
{:alt "Grid (Ctrl + G)"
|
{:alt "Grid (Ctrl + G)"
|
||||||
:class (when (contains? flags :workspace/grid) "selected")
|
:class (when (contains? flags :grid) "selected")
|
||||||
:on-click (partial toggle :workspace/grid)}
|
:on-click (partial toggle :grid)}
|
||||||
i/grid]
|
i/grid]
|
||||||
[:li.tooltip.tooltip-bottom
|
[:li.tooltip.tooltip-bottom
|
||||||
{:alt "Align (Ctrl + A)"}
|
{:alt "Align (Ctrl + A)"}
|
||||||
|
|
|
@ -119,7 +119,7 @@
|
||||||
project (rum/react wb/project-l)]
|
project (rum/react wb/project-l)]
|
||||||
(html
|
(html
|
||||||
[:div#project-bar.project-bar
|
[:div#project-bar.project-bar
|
||||||
(when-not (contains? flags :workspace/pagesmngr)
|
(when-not (contains? flags :pagesmngr)
|
||||||
{:class "toggle"})
|
{:class "toggle"})
|
||||||
(if (:edit @local)
|
(if (:edit @local)
|
||||||
(page-form local)
|
(page-form local)
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
|
||||||
(def ^:private ^:static toggle-colorpalette
|
(def ^:private ^:static toggle-colorpalette
|
||||||
#(rs/emit! (dw/toggle-tool :workspace/colorpalette)))
|
#(rs/emit! (dw/toggle-flag :colorpalette)))
|
||||||
|
|
||||||
(defn- count-color
|
(defn- count-color
|
||||||
[state shape prop]
|
[state shape prop]
|
||||||
|
|
|
@ -14,11 +14,11 @@
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
|
||||||
(defonce ^:static +shortcuts+
|
(defonce ^:static +shortcuts+
|
||||||
{:ctrl+g #(rs/emit! (dw/toggle-tool :workspace/grid))
|
{:ctrl+g #(rs/emit! (dw/toggle-flag :grid))
|
||||||
:ctrl+shift+f #(rs/emit! (dw/toggle-toolbox :draw))
|
:ctrl+shift+f #(rs/emit! (dw/toggle-flag :drawtools))
|
||||||
:ctrl+shift+i #(rs/emit! (dw/toggle-toolbox :icons))
|
:ctrl+shift+i #(rs/emit! (dw/toggle-flag :icons))
|
||||||
:ctrl+shift+l #(rs/emit! (dw/toggle-toolbox :layers))
|
:ctrl+shift+l #(rs/emit! (dw/toggle-flag :layers))
|
||||||
:ctrl+r #(rs/emit! (dw/toggle-tool :workspace/ruler))
|
:ctrl+r #(rs/emit! (dw/toggle-flag :ruler))
|
||||||
:esc #(rs/emit! (dw/deselect-all))
|
:esc #(rs/emit! (dw/deselect-all))
|
||||||
:backspace #(rs/emit! (dw/delete-selected))
|
:backspace #(rs/emit! (dw/delete-selected))
|
||||||
:delete #(rs/emit! (dw/delete-selected))
|
:delete #(rs/emit! (dw/delete-selected))
|
||||||
|
|
|
@ -17,16 +17,14 @@
|
||||||
|
|
||||||
(defn right-sidebar-render
|
(defn right-sidebar-render
|
||||||
[own]
|
[own]
|
||||||
(let [toolboxes (rum/react wb/toolboxes-l)]
|
(let [flags (rum/react wb/flags-l)]
|
||||||
(html
|
(html
|
||||||
[:aside#settings-bar.settings-bar
|
[:aside#settings-bar.settings-bar
|
||||||
[:div.settings-bar-inside
|
[:div.settings-bar-inside
|
||||||
(when (contains? toolboxes :draw)
|
(when (contains? flags :drawtools)
|
||||||
(draw-toolbox))
|
(draw-toolbox))
|
||||||
(when (contains? toolboxes :icons)
|
(when (contains? flags :icons)
|
||||||
(icons-toolbox))
|
(icons-toolbox))]])))
|
||||||
(when (contains? toolboxes :layers)
|
|
||||||
(layers-toolbox))]])))
|
|
||||||
|
|
||||||
(def right-sidebar
|
(def right-sidebar
|
||||||
(mx/component
|
(mx/component
|
||||||
|
@ -40,15 +38,11 @@
|
||||||
|
|
||||||
(defn left-sidebar-render
|
(defn left-sidebar-render
|
||||||
[own]
|
[own]
|
||||||
(let [toolboxes (rum/react wb/toolboxes-l)]
|
(let [flags (rum/react wb/flags-l)]
|
||||||
(html
|
(html
|
||||||
[:aside#settings-bar.settings-bar.settings-bar-left
|
[:aside#settings-bar.settings-bar.settings-bar-left
|
||||||
[:div.settings-bar-inside
|
[:div.settings-bar-inside
|
||||||
(when (contains? toolboxes :draw)
|
(when (contains? flags :layers)
|
||||||
(draw-toolbox))
|
|
||||||
(when (contains? toolboxes :icons)
|
|
||||||
(icons-toolbox))
|
|
||||||
(when (contains? toolboxes :layers)
|
|
||||||
(layers-toolbox))]])))
|
(layers-toolbox))]])))
|
||||||
|
|
||||||
(def left-sidebar
|
(def left-sidebar
|
||||||
|
|
|
@ -67,7 +67,7 @@
|
||||||
[open-toolboxes]
|
[open-toolboxes]
|
||||||
(let [workspace (rum/react wb/workspace-l)
|
(let [workspace (rum/react wb/workspace-l)
|
||||||
drawing (rum/react drawing-shape)
|
drawing (rum/react drawing-shape)
|
||||||
close #(rs/emit! (dw/toggle-toolbox :draw))
|
close #(rs/emit! (dw/toggle-flag :drawtools))
|
||||||
tools (->> (into [] +draw-tools+)
|
tools (->> (into [] +draw-tools+)
|
||||||
(sort-by (comp :priority second)))]
|
(sort-by (comp :priority second)))]
|
||||||
(html
|
(html
|
||||||
|
|
|
@ -59,7 +59,7 @@
|
||||||
drawing (rum/react drawing-shape)
|
drawing (rum/react drawing-shape)
|
||||||
collid (:collid @local)
|
collid (:collid @local)
|
||||||
icons (get-in library/+icon-collections-by-id+ [collid :icons])
|
icons (get-in library/+icon-collections-by-id+ [collid :icons])
|
||||||
on-close #(rs/emit! (dw/toggle-toolbox :icons))
|
on-close #(rs/emit! (dw/toggle-flag :icons))
|
||||||
on-select #(select-icon %)
|
on-select #(select-icon %)
|
||||||
on-change #(change-icon-coll local %)]
|
on-change #(change-icon-coll local %)]
|
||||||
(html
|
(html
|
||||||
|
|
|
@ -283,7 +283,7 @@
|
||||||
selected (:selected workspace)
|
selected (:selected workspace)
|
||||||
shapes-by-id (rum/react wb/shapes-by-id-l)
|
shapes-by-id (rum/react wb/shapes-by-id-l)
|
||||||
page (rum/react (focus-page (:page workspace)))
|
page (rum/react (focus-page (:page workspace)))
|
||||||
close #(rs/emit! (dw/toggle-toolbox :layers))
|
close #(rs/emit! (dw/toggle-flag :layers))
|
||||||
;; copy #(rs/emit! (dw/copy-selected))
|
;; copy #(rs/emit! (dw/copy-selected))
|
||||||
group #(rs/emit! (dw/group-selected))
|
group #(rs/emit! (dw/group-selected))
|
||||||
delete #(rs/emit! (dw/delete-selected))
|
delete #(rs/emit! (dw/delete-selected))
|
||||||
|
|
Loading…
Add table
Reference in a new issue