Add blocking handling to layers toolbox and canvas.

src/uxbox/data/workspace.cljs

@@ -6,6 +6,7 @@
             [uxbox.state :as st]
             [uxbox.schema :as sc]
             [uxbox.time :as time]
+            [uxbox.xforms :as xf]
             [uxbox.shapes :as shapes]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -127,13 +128,15 @@
   (reify
     rs/UpdateEvent
     (-apply-update [_ state]
-      (let [pid (get-in state [:workspace :page])
+      (let [pageid (get-in state [:workspace :page])
-            shapes (->> (vals (:shapes-by-id state))
+            xf (comp
-                        (filter #(= (:page %) pid))
+                (filter #(= (:page %) pageid))
-                        (filter #(not (:hidden % false)))
+                (remove :hidden)
+                (remove :blocked)
                 (filter #(contained-in-selrect? % selrect))
                 (map :id))]
-        (assoc-in state [:workspace :selected] (into #{} shapes))))))
+        (->> (into #{} xf (vals (:shapes-by-id state)))
+             (assoc-in state [:workspace :selected]))))))
 
 (defn add-shape
   "Mark a shape selected for drawing in the canvas."
@@ -236,6 +239,18 @@
           (assoc-in state [:shapes-by-id sid] (assoc shape :hidden false))
           (assoc-in state [:shapes-by-id sid] (assoc shape :hidden true)))))))
 
+(defn toggle-shape-blocking
+  [sid]
+  (reify
+    rs/UpdateEvent
+    (-apply-update [_ state]
+      (println "toggle-shape-blocking" sid)
+      (let [shape (get-in state [:shapes-by-id sid])
+            blocked? (:blocked shape false)]
+        (if blocked?
+          (assoc-in state [:shapes-by-id sid] (assoc shape :blocked false))
+          (assoc-in state [:shapes-by-id sid] (assoc shape :blocked true)))))))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Events (for selected)
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

src/uxbox/ui/workspace/canvas.cljs

@@ -7,6 +7,7 @@
             [uxbox.router :as r]
             [uxbox.rstore :as rs]
             [uxbox.state :as st]
+            [uxbox.xforms :as xf]
             [uxbox.shapes :as shapes]
             [uxbox.util.lens :as ul]
             [uxbox.library.icons :as _icons]
@@ -130,6 +131,7 @@
   (let [{:keys [id x y width height] :as shape} shape
         selected? (contains? selected id)]
     (letfn [(on-mouse-down [event]
+              (when-not (:blocked shape)
                 (let [local (:rum/local own)]
                   (dom/stop-propagation event)
                   (swap! local assoc :init-coords [x y])
@@ -144,7 +146,7 @@
                   (if (.-ctrlKey event)
                     (rs/emit! (dw/select-shape id))
                     (rs/emit! (dw/deselect-all)
-                            (dw/select-shape id)))))
+                              (dw/select-shape id))))))
             (on-mouse-up [event]
               (dom/stop-propagation event)
               (reset! wb/shapes-dragging? false))]
@@ -213,9 +215,10 @@
   (let [workspace (rum/react wb/workspace-l)
         shapes-by-id (rum/react shapes-by-id)
         workspace-selected (:selected workspace)
-        shapes (->> (:shapes page)
+        xf (comp
             (map #(get shapes-by-id %))
-                    (filter #(not (:hidden % false))))
+            (remove :hidden))
+        shapes (sequence xf (:shapes page))
         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,7 +92,8 @@
   (dom/prevent-default event)
   (let [id (:id item)]
     (cond
-      (:hidden item)
+      (or (:blocked item)
+          (:hidden item))
       nil
 
       (.-ctrlKey event)
@@ -117,11 +118,18 @@
     (when (contains? selected id)
       (rs/emit! (dw/select-shape id)))))
 
+(defn- toggle-blocking
+  [item event]
+  (dom/stop-propagation event)
+  (let [id (:id item)]
+    (rs/emit! (dw/toggle-shape-blocking id))))
+
 (defn- layer-element-render
   [own item selected]
   (let [selected? (contains? selected (:id item))
         select #(select-shape selected item %)
-        toggle-visibility #(toggle-visibility selected item %)]
+        toggle-visibility #(toggle-visibility selected item %)
+        toggle-blocking #(toggle-blocking item %)]
     (html
      [:li {:key (str (:id item))
            :on-click select
@@ -130,7 +138,9 @@
        [:div.toggle-element {:class (when-not (:hidden item) "selected")
                              :on-click toggle-visibility}
         i/eye]
-       [:div.block-element i/lock]]
+       [:div.block-element {:class (when (:blocked item) "selected")
+                            :on-click toggle-blocking}
+        i/lock]]
       [:div.element-icon (shapes/render item)]
       [:span (or (:name item)
                  (:id item))]])))

src/uxbox/xforms.cljs

@@ -0,0 +1,3 @@
+(ns uxbox.xforms
+  "A collection of usefull transducers that are usefull
+  in more than one place in the application.")