Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-09 08:38:15 -05:00
Code Issues Activity

Improved layers toolbox rendering.

Browse source
This commit is contained in:
Andrey Antukh 2016-01-25 18:34:05 +02:00
parent 08d9dc556b
commit 943556186f
1 changed files with 44 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/uxbox/ui/workspace/toolboxes/layers.cljs
View file

@ -18,10 +18,6 @@
;; Lenses ;; Lenses
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(def ^:static ^:private shapes-by-id
(as-> (l/key :shapes-by-id) $
(l/focus-atom $ st/state)))
(defn- focus-page (defn- focus-page
[pageid] [pageid]
(as-> (l/in [:pages-by-id pageid]) $ (as-> (l/in [:pages-by-id pageid]) $
@ -74,6 +70,13 @@
(let [id (:id item)] (let [id (:id item)]
(rs/emit! (dw/toggle-shape-locking id)))) (rs/emit! (dw/toggle-shape-locking id))))
(defn- element-icon
[item]
(case (:type item)
:builtin/icon (shapes/-render-svg item)
:builtin/rect i/box
:builtin/group i/folder))
(defn- layer-element-render (defn- layer-element-render
[own item selected] [own item selected]
(let [selected? (contains? selected (:id item)) (let [selected? (contains? selected (:id item))
@ -84,20 +87,21 @@
[:li {:key (str (:id item)) [:li {:key (str (:id item))
:on-click select :on-click select
:class (when selected? "selected")} :class (when selected? "selected")}
[:div.element-list-body {:class (when selected? "selected")} [:div.element-list-body
{:class (when selected? "selected")}
[:div.element-actions [:div.element-actions
[:div.toggle-element {:class (when-not (:hidden item) "selected") [:div.toggle-element
{:class (when-not (:hidden item) "selected")
:on-click toggle-visibility} :on-click toggle-visibility}
i/eye] i/eye]
[:div.block-element {:class (when (:blocked item) "selected") [:div.block-element
{:class (when (:blocked item) "selected")
:on-click toggle-blocking} :on-click toggle-blocking}
i/lock]] i/lock]]
(if (:group item) (if (:group item)
[:div.sublevel-element i/sublevel]) [:div.sublevel-element i/sublevel])
[:div.element-icon (shapes/-render-svg item)] [:div.element-icon (element-icon item)]
[:span (or (:name item) [:span (:name item "Unnamed")]]])))
(:id item))]]])))
(def ^:static ^:private layer-element (def ^:static ^:private layer-element
(mx/component (mx/component
@ -119,19 +123,23 @@
toggle-open (fn [event] toggle-open (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(swap! local assoc :open (not open?))) (swap! local assoc :open (not open?)))
shapes-by-id (rum/react shapes-by-id)] shapes-by-id (rum/react wb/shapes-by-id)]
(html (html
[:li.group {:class (when open? "open")} [:li.group {:class (when open? "open")}
[:div.element-list-body {:class (when selected? "selected") [:div.element-list-body
{:class (when selected? "selected")
:on-click select} :on-click select}
[:div.element-actions [:div.element-actions
[:div.toggle-element {:class (when-not (:hidden item) "selected") [:div.toggle-element
{:class (when-not (:hidden item) "selected")
:on-click toggle-visibility} :on-click toggle-visibility}
i/eye] i/eye]
[:div.block-element {:class (when (:blocked item) "selected") [:div.block-element
{:class (when (:blocked item) "selected")
:on-click toggle-blocking} :on-click toggle-blocking}
i/lock] i/lock]
[:div.chain-element {:class (when (:locked item) "selected") [:div.chain-element
{:class (when (:locked item) "selected")
:on-click toggle-locking} :on-click toggle-locking}
i/chain]] i/chain]]
[:div.element-icon i/folder] [:div.element-icon i/folder]
@ -142,13 +150,11 @@
[:ul [:ul
(for [shape (map #(get shapes-by-id %) (:items item)) (for [shape (map #(get shapes-by-id %) (:items item))
:let [key (str (:id shape))]] :let [key (str (:id shape))]]
;; TODO: make polymorphic (if (= (:type shape) :builtin/group)
(case (:type shape) (-> (layer-group shape selected)
:builtin/rect (rum/with-key (layer-element shape selected) key) (rum/with-key key))
:builtin/circle (rum/with-key (layer-element shape selected) key) (-> (layer-element shape selected)
:builtin/line (rum/with-key (layer-element shape selected) key) (rum/with-key key))))])])))
:builtin/icon (rum/with-key (layer-element shape selected) key)
:builtin/group (rum/with-key (layer-group shape selected) key)))])])))
(def ^:static ^:private layer-group (def ^:static ^:private layer-group
(mx/component (mx/component
@ -160,7 +166,7 @@
[own] [own]
(let [workspace (rum/react wb/workspace-l) (let [workspace (rum/react wb/workspace-l)
selected (:selected workspace) selected (:selected workspace)
shapes-by-id (rum/react shapes-by-id) shapes-by-id (rum/react wb/shapes-by-id)
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-toolbox :layers))
copy #(rs/emit! (dw/copy-selected)) copy #(rs/emit! (dw/copy-selected))
@ -176,21 +182,16 @@
[:ul.element-list [:ul.element-list
(for [shape (map #(get shapes-by-id %) (:shapes page)) (for [shape (map #(get shapes-by-id %) (:shapes page))
:let [key (str (:id shape))]] :let [key (str (:id shape))]]
;; TODO: make polymorphic (if (= (:type shape) :builtin/group)
(case (:type shape) (-> (layer-group shape selected)
:builtin/rect (rum/with-key (layer-element shape selected) key) (rum/with-key key))
:builtin/circle (rum/with-key (layer-element shape selected) key) (-> (layer-element shape selected)
:builtin/line (rum/with-key (layer-element shape selected) key) (rum/with-key key))))]]
:builtin/icon (rum/with-key (layer-element shape selected) key)
:builtin/group (rum/with-key (layer-group shape selected) key)))]]
[:div.layers-tools [:div.layers-tools
[:ul.layers-tools-content [:ul.layers-tools-content
[:li.clone-layer {:on-click copy} [:li.clone-layer {:on-click copy} i/copy]
i/copy] [:li.group-layer {:on-click group} i/folder]
[:li.group-layer {:on-click group} [:li.delete-layer {:on-click delete} i/trash]]]])))
i/folder]
[:li.delete-layer {:on-click delete}
i/trash]]]])))
(def ^:static layers-toolbox (def ^:static layers-toolbox
(mx/component (mx/component