✨ Expand containing layer when selecting a shape

frontend/src/uxbox/main/data/workspace.cljs

@@ -74,6 +74,7 @@
   {:zoom 1
    :flags #{}
    :selected #{}
+   :expanded {}
    :drawing nil
    :drawing-tool nil
    :tooltip nil
@@ -445,17 +446,28 @@
 
 ;; --- Toggle shape's selection status (selected or deselected)
 
+(declare expand-all-parents)
+
 (defn select-shape
-  [id]
+  ([id] (select-shape id false))
-  (us/verify ::us/uuid id)
+  ([id toggle?]
-  (ptk/reify ::select-shape
+   (us/verify ::us/uuid id)
-    ptk/UpdateEvent
+   (ptk/reify ::select-shape
-    (update [_ state]
+     ptk/UpdateEvent
-      (update-in state [:workspace-local :selected]
+     (update [_ state]
-                 (fn [selected]
+       (update-in state [:workspace-local :selected]
-                   (if (contains? selected id)
+                  (fn [selected]
-                     (disj selected id)
+                    (if-not toggle?
-                     (conj selected id)))))))
+                      (conj selected id)
+                      (if (contains? selected id)
+                        (disj selected id)
+                        (conj selected id))))))
+
+     ptk/WatchEvent
+     (watch [_ state stream]
+       (let [page-id (get-in state [:workspace-page :id])
+             objects (get-in state [:workspace-data page-id :objects])]
+         (rx/of (expand-all-parents [id] objects)))))))
 
 (defn select-shapes
   [ids]
@@ -463,7 +475,13 @@
   (ptk/reify ::select-shapes
     ptk/UpdateEvent
     (update [_ state]
-      (assoc-in state [:workspace-local :selected] ids))))
+      (assoc-in state [:workspace-local :selected] ids))
+
+    ptk/WatchEvent
+    (watch [_ state stream]
+      (let [page-id (get-in state [:workspace-page :id])
+            objects (get-in state [:workspace-data page-id :objects])]
+        (rx/of (expand-all-parents ids objects))))))
 
 (def deselect-all
   "Clear all possible state of drawing, edition
@@ -686,15 +704,15 @@
 (defn select-inside-group
   [group-id position]
   (ptk/reify ::select-inside-group
-    ptk/UpdateEvent
+    ptk/WatchEvent
-    (update [_ state]
+    (watch [_ state stream]
       (let [page-id (:current-page-id state)
             objects (get-in state [:workspace-data page-id :objects])
             group (get objects group-id)
             children (map #(get objects %) (:shapes group))
             selected (->> children (filter #(geom/has-point? % position)) first)]
-        (cond-> state
+        (when selected
-          selected (assoc-in [:workspace-local :selected] #{(:id selected)}))))))
+          (rx/of deselect-all (select-shape (:id selected))))))))
 
 ;; --- Update Shape Attrs
 
@@ -1126,6 +1144,21 @@
     (update [_ state]
       (update state :workspace-local dissoc :expanded))))
 
+(defn expand-all-parents
+  [ids objects]
+  (ptk/reify ::expand-all-parents
+    ptk/UpdateEvent
+    (update [_ state]
+      (let [expand-fn (fn [expanded]
+                        (merge expanded
+                          (->> ids
+                               (map #(cp/get-all-parents % objects))
+                               flatten
+                               (filter #(not= % uuid/zero))
+                               (map (fn [id] {id true}))
+                               (into {}))))]
+        (update-in state [:workspace-local :expanded] expand-fn)))))
+
 (defn recursive-assign
   "A helper for assign recursively a shape attr."
   [id attr value]
@@ -1202,22 +1235,14 @@
   (ptk/reify ::show-context-menu
     ptk/UpdateEvent
     (update [_ state]
-      (let [selected (get-in state [:workspace-local :selected])
+      (let [mdata {:position position
-            selected (cond
-                       (empty? selected)
-                       (conj selected (:id shape))
-
-                       (contains? selected (:id shape))
-                       selected
-
-                       :else
-                       #{(:id shape)})
-            mdata {:position position
-                   :selected selected
                    :shape shape}]
         (-> state
-            (assoc-in [:workspace-local :context-menu] mdata)
+            (assoc-in [:workspace-local :context-menu] mdata))))
-            (assoc-in [:workspace-local :selected] selected))))))
+
+    ptk/WatchEvent
+    (watch [_ state stream]
+      (rx/of (select-shape (:id shape))))))
 
 (def hide-context-menu
   (ptk/reify ::hide-context-menu

frontend/src/uxbox/main/ui/workspace/shapes/common.cljs

@@ -41,10 +41,13 @@
         :else
         (do
           (dom/stop-propagation event)
-          (when-not selected?
+          (if selected?
-            (when-not (or (empty? selected) (kbd/shift? event))
+            (when (kbd/shift? event)
-              (st/emit! dw/deselect-all))
+              (st/emit! (dw/select-shape id true)))
-            (st/emit! (dw/select-shape id)))
+            (do
+              (when-not (or (empty? selected) (kbd/shift? event))
+                (st/emit! dw/deselect-all))
+              (st/emit! (dw/select-shape id))))
           (st/emit! (dw/start-move-selected)))))))
 
 (defn on-context-menu

frontend/src/uxbox/main/ui/workspace/sidebar/layers.cljs

@@ -125,7 +125,7 @@
               nil
 
               (.-ctrlKey event)
-              (st/emit! (dw/select-shape id))
+              (st/emit! (dw/select-shape id true))
 
               (> (count selected) 1)
               (st/emit! dw/deselect-all