mirror of
https://github.com/penpot/penpot.git
synced 2025-02-09 00:28:20 -05:00
232 lines
7.7 KiB
Clojure
232 lines
7.7 KiB
Clojure
(ns uxbox.ui.workspace.toolboxes
|
|
(:require [sablono.core :as html :refer-macros [html]]
|
|
[rum.core :as rum]
|
|
[cats.labs.lens :as l]
|
|
[uxbox.router :as r]
|
|
[uxbox.rstore :as rs]
|
|
[uxbox.state :as st]
|
|
[uxbox.shapes :as shapes]
|
|
[uxbox.library :as library]
|
|
[uxbox.util.data :refer (read-string)]
|
|
[uxbox.data.workspace :as dw]
|
|
[uxbox.ui.workspace.base :as wb]
|
|
[uxbox.ui.icons :as i]
|
|
[uxbox.ui.mixins :as mx]
|
|
[uxbox.ui.dom :as dom]
|
|
[uxbox.ui.util :as util]))
|
|
|
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
;; Lenses
|
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
|
|
(def ^:private ^:static drawing-shape
|
|
"A focused vision of the drawing property
|
|
of the workspace status. This avoids
|
|
rerender the whole toolbox on each workspace
|
|
change."
|
|
(as-> (l/in [:workspace :drawing]) $
|
|
(l/focus-atom $ st/state)))
|
|
|
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
;; Draw Tools
|
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
|
|
(def ^:staric +draw-tools+
|
|
{:rect
|
|
{:icon i/box
|
|
:help "Box (Ctrl + B)"
|
|
:priority 10}
|
|
:circle
|
|
{:icon i/circle
|
|
:help "Circle (Ctrl + E)"
|
|
:priority 20}
|
|
:line
|
|
{:icon i/line
|
|
:help "Line (Ctrl + L)"
|
|
:priority 30}})
|
|
|
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
;; Draw Tool Box
|
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
|
|
(defn draw-tools-render
|
|
[open-toolboxes]
|
|
(let [workspace (rum/react wb/workspace-state)
|
|
close #(rs/emit! (dw/toggle-toolbox :draw))
|
|
tools (->> (into [] +draw-tools+)
|
|
(sort-by (comp :priority second)))]
|
|
(html
|
|
[:div#form-tools.tool-window
|
|
[:div.tool-window-bar
|
|
[:div.tool-window-icon i/window]
|
|
[:span "Tools"]
|
|
[:div.tool-window-close {:on-click close} i/close]]
|
|
[:div.tool-window-content
|
|
(for [[key props] tools]
|
|
[:div.tool-btn.tooltip.tooltip-hover
|
|
{:alt (:help props)
|
|
:key (name key)
|
|
:on-click (constantly nil)}
|
|
(:icon props)])]])))
|
|
|
|
(def ^:static draw-tools
|
|
(util/component
|
|
{:render draw-tools-render
|
|
:name "draw-tools"
|
|
:mixins [mx/static rum/reactive]}))
|
|
|
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
;; Layers
|
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
|
|
(defn layers-render
|
|
[]
|
|
(let [workspace (rum/react wb/workspace-state)
|
|
close #(rs/emit! (dw/toggle-toolbox :layers))]
|
|
(html
|
|
[:div#layers.tool-window
|
|
[:div.tool-window-bar
|
|
[:div.tool-window-icon i/layers]
|
|
[:span "Layers"]
|
|
[:div.tool-window-close {:on-click close} i/close]]
|
|
[:div.tool-window-content
|
|
[:ul.element-list
|
|
#_(for [shape (reverse shapes)]
|
|
(let [{shape-id :shape/uuid
|
|
selected? :shape/selected?
|
|
locked? :shape/locked?
|
|
visible? :shape/visible?
|
|
raw-shape :shape/data} shape]
|
|
[:li {:key shape-id
|
|
:class (when selected? "selected")}
|
|
[:div.toggle-element
|
|
{:class (when visible? "selected")
|
|
:on-click #(actions/toggle-shape-visibility conn shape-id)} i/eye]
|
|
[:div.block-element
|
|
{:class (when locked? "selected")
|
|
:on-click #(actions/toggle-shape-lock conn shape-id)} i/lock]
|
|
[:div.element-icon
|
|
(shapes/icon raw-shape)]
|
|
[:span (shapes/name raw-shape)]]))
|
|
;; TODO GROUPS
|
|
[:li
|
|
[:div.element-actions
|
|
[:div.toggle-element i/eye]
|
|
[:div.block-element i/lock]]
|
|
[:div.element-icon i/box]
|
|
[:span "Layer name"]]
|
|
|
|
[:li.group
|
|
[:div.element-actions
|
|
[:div.toggle-element i/eye]
|
|
[:div.block-element i/lock]
|
|
[:div.chain-element i/chain]]
|
|
[:div.element-icon i/folder]
|
|
[:span "Closed group"]
|
|
[:span.toggle-content i/arrow-slide]]
|
|
|
|
[:li.group.open
|
|
[:div.element-actions
|
|
[:div.toggle-element i/eye]
|
|
[:div.block-element i/lock]
|
|
[:div.chain-element i/chain]]
|
|
[:div.element-icon i/folder]
|
|
[:span "Opened group"]
|
|
[:span.toggle-content i/arrow-slide]]
|
|
|
|
[:li
|
|
[:div.element-actions
|
|
[:div.toggle-element i/eye]
|
|
[:div.block-element i/lock]]
|
|
[:div.sublevel-element i/sublevel]
|
|
[:div.element-icon i/box]
|
|
[:span "Sub layer"]]
|
|
|
|
[:li.group
|
|
[:div.element-actions
|
|
[:div.toggle-element i/eye]
|
|
[:div.block-element i/lock]
|
|
[:div.chain-element i/chain]]
|
|
[:div.sublevel-element i/sublevel]
|
|
[:div.element-icon i/folder]
|
|
[:span "Sub group"]
|
|
[:span.toggle-content i/arrow-slide]]]]
|
|
|
|
[:div.layers-tools
|
|
[:ul.layers-tools-content
|
|
[:li.clone-layer i/copy]
|
|
[:li.group-layer i/folder]
|
|
[:li.delete-layer i/trash]
|
|
]]])))
|
|
|
|
(def ^:static layers
|
|
(util/component
|
|
{:render layers-render
|
|
:name "layers"
|
|
:mixins [rum/reactive]}))
|
|
|
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
;; Icons
|
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
|
|
(defn- select-icon
|
|
[icon]
|
|
(if (= (:drawing @wb/workspace-state) icon)
|
|
(rs/emit! (dw/select-for-drawing nil))
|
|
(rs/emit! (dw/select-for-drawing icon))))
|
|
|
|
(defn- change-icon-coll
|
|
[local event]
|
|
(let [value (-> (dom/event->value event)
|
|
(read-string))]
|
|
(swap! local assoc :collid value)
|
|
(rs/emit! (dw/select-for-drawing nil))))
|
|
|
|
(defn- icon-wrapper-render
|
|
[own icon]
|
|
(shapes/render icon))
|
|
|
|
(def ^:static ^:private icon-wrapper
|
|
(util/component
|
|
{:render icon-wrapper-render
|
|
:name "icon-wrapper"
|
|
:mixins [mx/static]}))
|
|
|
|
(defn icons-render
|
|
[own]
|
|
(println "icons-render")
|
|
(let [local (:rum/local own)
|
|
drawing (rum/react drawing-shape)
|
|
collid (:collid @local)
|
|
icons (get-in library/+icon-collections-by-id+ [collid :icons])
|
|
on-close #(rs/emit! (dw/toggle-toolbox :icons))
|
|
on-select #(select-icon %)
|
|
on-change #(change-icon-coll local %)]
|
|
(html
|
|
[:div#form-figures.tool-window
|
|
[:div.tool-window-bar
|
|
[:div.tool-window-icon i/window]
|
|
[:span "Icons"]
|
|
[:div.tool-window-close {:on-click on-close} i/close]]
|
|
[:div.tool-window-content
|
|
[:div.figures-catalog
|
|
;; extract component: set selector
|
|
[:select.input-select.small {:on-change on-change
|
|
:value collid}
|
|
(for [icon-coll library/+icon-collections+]
|
|
[:option {:key (str "icon-coll" (:id icon-coll))
|
|
:value (pr-str (:id icon-coll))}
|
|
(:name icon-coll)])]]
|
|
(for [icon icons
|
|
:let [selected? (= drawing icon)]]
|
|
[:div.figure-btn {:key (str (:id icon))
|
|
:class (when selected? "selected")
|
|
:on-click #(on-select icon)}
|
|
(icon-wrapper icon)])]])))
|
|
|
|
(def ^:static icons
|
|
(util/component
|
|
{:render icons-render
|
|
:name "icons-toolbox"
|
|
:mixins [rum/reactive
|
|
(mx/local {:collid 1 :builtin true})]}))
|