mirror of
https://github.com/penpot/penpot.git
synced 2025-05-05 00:05:53 +02:00
First work on simple layers rendering (just WIP).
This commit is contained in:
Andrey Antukh
parent
5b8d8d5c7e
commit
449352338d
1 changed files with 74 additions and 63 deletions
|
|
@ -27,6 +27,15 @@
|
||||||
(as-> (l/in [:workspace :drawing]) $
|
(as-> (l/in [:workspace :drawing]) $
|
||||||
(l/focus-atom $ st/state)))
|
(l/focus-atom $ st/state)))
|
||||||
|
|
||||||
|
(def ^:static ^:private shapes-by-id
|
||||||
|
(as-> (l/key :shapes-by-id) $
|
||||||
|
(l/focus-atom $ st/state)))
|
||||||
|
|
||||||
|
(defn- focus-page
|
||||||
|
[pageid]
|
||||||
|
(as-> (l/in [:pages-by-id pageid]) $
|
||||||
|
(l/focus-atom $ st/state)))
|
||||||
|
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
;; Draw Tools
|
;; Draw Tools
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
|
@ -79,9 +88,31 @@
|
||||||
;; Layers
|
;; Layers
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
|
||||||
|
(defn- layer-element-render
|
||||||
|
[own item selected]
|
||||||
|
(println "layer-element-render" (:id item))
|
||||||
|
(let [selected? (contains? selected (:id item))]
|
||||||
|
(html
|
||||||
|
[:li {:key (str (:id item))}
|
||||||
|
[:div.element-actions
|
||||||
|
[:div.toggle-element i/eye]
|
||||||
|
[:div.block-element i/lock]]
|
||||||
|
[:div.element-icon i/box]
|
||||||
|
[:span (or (:name item)
|
||||||
|
(:id item))]])))
|
||||||
|
|
||||||
|
(def ^:static ^:private layer-element
|
||||||
|
(util/component
|
||||||
|
{:render layer-element-render
|
||||||
|
:name "layer-element"
|
||||||
|
:mixins [mx/static]}))
|
||||||
|
|
||||||
(defn layers-render
|
(defn layers-render
|
||||||
[]
|
[own]
|
||||||
(let [workspace (rum/react wb/workspace-state)
|
(let [workspace (rum/react wb/workspace-state)
|
||||||
|
selected (:selected workspace)
|
||||||
|
shapes-by-id (rum/react shapes-by-id)
|
||||||
|
page (rum/react (focus-page (:page workspace)))
|
||||||
close #(rs/emit! (dw/toggle-toolbox :layers))]
|
close #(rs/emit! (dw/toggle-toolbox :layers))]
|
||||||
(html
|
(html
|
||||||
[:div#layers.tool-window
|
[:div#layers.tool-window
|
||||||
|
|
@ -91,73 +122,53 @@
|
||||||
[:div.tool-window-close {:on-click close} i/close]]
|
[:div.tool-window-close {:on-click close} i/close]]
|
||||||
[:div.tool-window-content
|
[:div.tool-window-content
|
||||||
[:ul.element-list
|
[:ul.element-list
|
||||||
#_(for [shape (reverse shapes)]
|
(for [shape (map #(get shapes-by-id %) (:shapes page))
|
||||||
(let [{shape-id :shape/uuid
|
:let [component (layer-element shape selected)]]
|
||||||
selected? :shape/selected?
|
(rum/with-key component (:id shape)))]]
|
||||||
locked? :shape/locked?
|
[:div.layers-tools
|
||||||
visible? :shape/visible?
|
[:ul.layers-tools-content
|
||||||
raw-shape :shape/data} shape]
|
[:li.clone-layer i/copy]
|
||||||
[:li {:key shape-id
|
[:li.group-layer i/folder]
|
||||||
:class (when selected? "selected")}
|
[:li.delete-layer i/trash]
|
||||||
[: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
|
;; [:li.group
|
||||||
[:div.element-actions
|
;; [:div.element-actions
|
||||||
[:div.toggle-element i/eye]
|
;; [:div.toggle-element i/eye]
|
||||||
[:div.block-element i/lock]
|
;; [:div.block-element i/lock]
|
||||||
[:div.chain-element i/chain]]
|
;; [:div.chain-element i/chain]]
|
||||||
[:div.element-icon i/folder]
|
;; [:div.element-icon i/folder]
|
||||||
[:span "Opened group"]
|
;; [:span "Closed group"]
|
||||||
[:span.toggle-content i/arrow-slide]]
|
;; [:span.toggle-content i/arrow-slide]]
|
||||||
|
|
||||||
[:li
|
;; [:li.group.open
|
||||||
[:div.element-actions
|
;; [:div.element-actions
|
||||||
[:div.toggle-element i/eye]
|
;; [:div.toggle-element i/eye]
|
||||||
[:div.block-element i/lock]]
|
;; [:div.block-element i/lock]
|
||||||
[:div.sublevel-element i/sublevel]
|
;; [:div.chain-element i/chain]]
|
||||||
[:div.element-icon i/box]
|
;; [:div.element-icon i/folder]
|
||||||
[:span "Sub layer"]]
|
;; [:span "Opened group"]
|
||||||
|
;; [:span.toggle-content i/arrow-slide]]
|
||||||
|
|
||||||
[:li.group
|
;; [:li
|
||||||
[:div.element-actions
|
;; [:div.element-actions
|
||||||
[:div.toggle-element i/eye]
|
;; [:div.toggle-element i/eye]
|
||||||
[:div.block-element i/lock]
|
;; [:div.block-element i/lock]]
|
||||||
[:div.chain-element i/chain]]
|
;; [:div.sublevel-element i/sublevel]
|
||||||
[:div.sublevel-element i/sublevel]
|
;; [:div.element-icon i/box]
|
||||||
[:div.element-icon i/folder]
|
;; [:span "Sub layer"]]
|
||||||
[:span "Sub group"]
|
|
||||||
[:span.toggle-content i/arrow-slide]]]]
|
;; [: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
|
(def ^:static layers
|
||||||
(util/component
|
(util/component
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue