Handle visibility on layers toolbox.

src/uxbox/data/workspace.cljs

@@ -130,6 +130,7 @@
       (let [pid (get-in state [:workspace :page])
             shapes (->> (vals (:shapes-by-id state))
                         (filter #(= (:page %) pid))
+                        (filter #(not (:hidden % false)))
                         (filter #(contained-in-selrect? % selrect))
                         (map :id))]
         (assoc-in state [:workspace :selected] (into #{} shapes))))))
@@ -222,6 +223,19 @@
                  (when fill {:fill fill})
                  (when opacity {:opacity opacity})))))
 
+
+(defn toggle-shape-visibility
+  [sid]
+  (reify
+    rs/UpdateEvent
+    (-apply-update [_ state]
+      (println "toggle-shape-visibility" sid)
+      (let [shape (get-in state [:shapes-by-id sid])
+            hidden? (:hidden shape false)]
+        (if hidden?
+          (assoc-in state [:shapes-by-id sid] (assoc shape :hidden false))
+          (assoc-in state [:shapes-by-id sid] (assoc shape :hidden true)))))))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Events (for selected)
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

src/uxbox/ui/workspace/canvas.cljs

@@ -213,7 +213,9 @@
   (let [workspace (rum/react wb/workspace-l)
         shapes-by-id (rum/react shapes-by-id)
         workspace-selected (:selected workspace)
-        shapes (map #(get shapes-by-id %) (:shapes page))
+        shapes (->> (:shapes page)
+                    (map #(get shapes-by-id %))
+                    (filter #(not (:hidden % false))))
         shapes-selected (filter (comp workspace-selected :id) shapes)
         shapes-notselected (filter (comp not workspace-selected :id) shapes)]
     (letfn [(on-mouse-down [event]

src/uxbox/ui/workspace/toolboxes.cljs

@@ -92,6 +92,9 @@
   (dom/prevent-default event)
   (let [id (:id item)]
     (cond
+      (:hidden item)
+      nil
+
       (.-ctrlKey event)
       (rs/emit! (dw/select-shape id))
 
@@ -106,16 +109,25 @@
       (rs/emit! (dw/deselect-all)
                 (dw/select-shape id)))))
 
+(defn- toggle-visibility
+  [item event]
+  (dom/stop-propagation event)
+  (let [id (:id item)]
+    (rs/emit! (dw/toggle-shape-visibility id))))
+
 (defn- layer-element-render
   [own item selected]
   (let [selected? (contains? selected (:id item))
-        select #(select-shape selected item %)]
+        select #(select-shape selected item %)
+        toggle-visibility #(toggle-visibility item %)]
     (html
      [:li {:key (str (:id item))
            :on-click select
            :class (when selected? "selected")}
       [:div.element-actions
-       [:div.toggle-element {:class "selected"} i/eye]
+       [:div.toggle-element {:class (when-not (:hidden item) "selected")
+                             :on-click toggle-visibility}
+        i/eye]
        [:div.block-element i/lock]]
       [:div.element-icon (shapes/render item)]
       [:span (or (:name item)