        [: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]
-          ]]])))
+        (for [shape (map #(get shapes-by-id %) (:shapes page))
+              :let [component (layer-element shape selected)]]
+          (rum/with-key component (:id shape)))]]
+      [:div.layers-tools
+       [:ul.layers-tools-content
+        [:li.clone-layer i/copy]
+        [:li.group-layer i/folder]
+        [:li.delete-layer i/trash]
+        ]]])))
+
+
+        ;; [: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]]]]
+
 
 (def ^:static layers
   (util/component

;; Layers
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

(defn layers-render
  []
  (let [workspace (rum/react wb/workspace-state)
        close #(rs/emit! (dw/toggle-toolbox :layers))]
    (html
     [:div#layers.tool-window

  (as-> (l/in [:workspace :drawing]) $
    (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
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
