✨ Improve canvas handling on sitemap and workspace.

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

@@ -33,7 +33,8 @@
          (->> uws/mouse-position-deltas
               (rx/map #(dw/apply-temporal-displacement id %))
               (rx/take-until stoper))
-         (rx/of (dw/materialize-current-modifier id)))))))
+         (rx/of (dw/materialize-current-modifier id)
+                (dw/rehash-shape-relationship id)))))))
 
 (def start-move-selected
   (reify

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

@@ -17,10 +17,14 @@
    [uxbox.main.ui.keyboard :as kbd]
    [uxbox.main.ui.shapes.icon :as icon]
    [uxbox.main.ui.workspace.sortable :refer [use-sortable]]
-   [uxbox.util.data :refer [classnames]]
+   [uxbox.util.data :refer [classnames enumerate]]
    [uxbox.util.dom :as dom]
    [uxbox.util.i18n :refer (tr)]))
 
+(def ^:private shapes-iref
+  (-> (l/key :shapes)
+      (l/derive st/state)))
+
 ;; --- Helpers
 
 (defn- element-icon
@@ -76,21 +80,13 @@
   [{:keys [shape selected index] :as props}]
   (letfn [(toggle-blocking [event]
             (dom/stop-propagation event)
-            (let [id (:id shape)
-                  blocked? (:blocked shape)]
-              (if blocked?
-                (st/emit! (dw/unblock-shape id))
-                (st/emit! (dw/block-shape id)))))
+            (let [{:keys [id blocked]} shape]
+              (st/emit! (dw/set-blocked-attr id (not blocked)))))
 
           (toggle-visibility [event]
             (dom/stop-propagation event)
-            (let [id (:id shape)
-                  hidden? (:hidden shape)]
-              (if hidden?
-                (st/emit! (dw/show-shape id))
-                (st/emit! (dw/hide-shape id)))
-              (when (contains? selected id)
-                (st/emit! (dw/select-shape id)))))
+            (let [{:keys [id hidden]} shape]
+              (st/emit! (dw/set-hidden-attr id (not hidden)))))
 
           (select-shape [event]
             (dom/prevent-default event)
@@ -115,7 +111,7 @@
 
           (on-hover [item monitor]
             (st/emit! (dw/change-shape-order {:id (:shape-id item)
-                                               :index index})))]
+                                              :index index})))]
     (let [selected? (contains? selected (:id shape))
           [dprops dnd-ref] (use-sortable
                             {:type "layer-item"
@@ -141,65 +137,129 @@
         [:div.element-icon (element-icon shape)]
         [:& layer-name {:shape shape}]]])))
 
+(mf/defc canvas-item
+  [{:keys [canvas shapes selected index] :as props}]
+  (letfn [(toggle-blocking [event]
+            (dom/stop-propagation event)
+            (let [{:keys [id blocked]} canvas]
+              (st/emit! (dw/set-blocked-attr id (not blocked)))))
 
-;; --- Layer Canvas
+          (toggle-visibility [event]
+            (dom/stop-propagation event)
+            (let [{:keys [id hidden]} canvas]
+              (st/emit! (dw/set-hidden-attr id (not hidden)))))
 
-;; (mf/defc layer-canvas
-;;   [{:keys [canvas selected index] :as props}]
-;;   (letfn [(select-shape [event]
-;;             (dom/prevent-default event)
-;;             (st/emit! (dw/select-canvas (:id canvas))))
-;;     (let [selected? (contains? selected (:id shape))]
-;;       [:li {:class (classnames
-;;                     :selected selected?)}
-;;        [:div.element-list-body {:class (classnames :selected selected?)
-;;                                 :on-click select-shape
-;;                                 :on-double-click #(dom/stop-propagation %)
-;;                                 :draggable true}
-;;         [:div.element-actions
-;;          [:div.toggle-element {:class (when-not (:hidden shape) "selected")
-;;                                :on-click toggle-visibility}
-;;           i/eye]
-;;          [:div.block-element {:class (when (:blocked shape) "selected")
-;;                               :on-click toggle-blocking}
-;;           i/lock]]
-;;         [:div.element-icon (element-icon shape)]
-;;         [:& layer-name {:shape shape}]]])))
+          (select-shape [event]
+            (dom/prevent-default event)
+            (let [id (:id canvas)]
+              (cond
+                (or (:blocked canvas)
+                    (:hidden canvas))
+                nil
+
+                (.-ctrlKey event)
+                (st/emit! (dw/select-shape id))
+
+                (> (count selected) 1)
+                (st/emit! (dw/deselect-all)
+                          (dw/select-shape id))
+                :else
+                (st/emit! (dw/deselect-all)
+                          (dw/select-shape id)))))
+
+          (on-drop [item monitor]
+            (st/emit! (udp/persist-page (:page canvas))))
+
+          (on-hover [item monitor]
+            (prn "canvas-item$hover" (:id canvas))
+            (st/emit! (dw/change-canvas-order {:id (:canvas-id item)
+                                               :index index})))]
+    (let [selected? (contains? selected (:id canvas))
+          collapsed? (:collapsed canvas false)
+
+          shapes (filter #(= (:canvas (second %)) (:id canvas)) shapes)
+          [dprops dnd-ref] (use-sortable
+                            {:type "canvas-item"
+                             :data {:canvas-id (:id canvas)
+                                    :page-id (:page canvas)
+                                    :index index}
+                             :on-hover on-hover
+                             :on-drop on-drop})]
+      [:li.group {:ref dnd-ref
+                  :class (classnames
+                          :selected selected?
+                          :dragging-TODO (:dragging? dprops))}
+       [:div.element-list-body {:class (classnames :selected selected?)
+                                :on-click select-shape
+                                :on-double-click #(dom/stop-propagation %)}
+        [:div.element-actions
+         [:div.toggle-element {:class (when-not (:hidden canvas) "selected")
+                               :on-click toggle-visibility}
+          i/eye]
+         [:div.block-element {:class (when (:blocked canvas) "selected")
+                              :on-click toggle-blocking}
+          i/lock]]
+        [:div.element-icon i/folder]
+        [:& layer-name {:shape canvas}]
+        [:span.toggle-content
+         { ;; :on-click toggle-collapse
+          :class (when-not collapsed? "inverse")}
+         i/arrow-slide]]
+       [:ul
+        (for [[index shape] shapes]
+          [:& layer-item {:shape shape
+                          :selected selected
+                          :index index
+                          :key (:id shape)}])]])))
 
 ;; --- Layers List
 
-(def ^:private shapes-iref
-  (-> (l/key :shapes)
-      (l/derive st/state)))
-
-(def ^:private canvas-iref
-  (-> (l/key :canvas)
-      (l/derive st/state)))
-
 (mf/defc layers-list
   [{:keys [shapes selected] :as props}]
-  (let [shapes-map (mf/deref shapes-iref)
-        canvas-map (mf/deref canvas-iref)
-        selected-shapes (mf/deref refs/selected-shapes)
-        selected-canvas (mf/deref refs/selected-canvas)]
-    [:div.tool-window-content
-     [:ul.element-list
-      (for [[index id] (map-indexed vector shapes)]
-        [:& layer-item {:shape (get shapes-map id)
-                        :selected selected-shapes
-                        :index index
-                        :key id}])]]))
+  [:ul.element-list
+   (for [[index shape] shapes]
+     [:& layer-item {:shape shape
+                     :selected selected
+                     :index index
+                     :key (:id shape)}])])
+
+(mf/defc canvas-list
+  [{:keys [shapes canvas selected] :as props}]
+  [:ul.element-list
+   (for [[index item] canvas]
+     [:& canvas-item {:canvas item
+                      :shapes shapes
+                      :selected selected
+                      :index index
+                      :key (:id item)}])])
 
 ;; --- Layers Toolbox
 
 (mf/defc layers-toolbox
   [{:keys [page selected] :as props}]
   (let [on-click #(st/emit! (dw/toggle-flag :layers))
-        selected (mf/deref refs/selected-shapes)]
+        selected (mf/deref refs/selected-shapes)
+        shapes-by-id (mf/deref shapes-iref)
+        canvas (->> (:canvas page)
+                    (map #(get shapes-by-id %))
+                    (enumerate))
+        all-shapes (->> (:shapes page)
+                        (map #(get shapes-by-id %)))
+
+        shapes (->> all-shapes
+                    (filter #(not (:canvas %)))
+                    (enumerate))
+
+        all-shapes (enumerate all-shapes)]
+
     [:div#layers.tool-window
      [:div.tool-window-bar
       [:div.tool-window-icon i/layers]
       [:span (tr "ds.settings.layers")]
       [:div.tool-window-close {:on-click on-click} i/close]]
-     [:& layers-list {:shapes (:shapes page)
-                      :selected selected}]]))
+     [:div.tool-window-content
+      [:& canvas-list {:canvas canvas
+                       :shapes all-shapes
+                       :selected selected}]
+      [:& layers-list {:shapes shapes
+                       :selected selected}]]]))

frontend/src/uxbox/main/ui/workspace/viewport.cljs

@@ -246,6 +246,9 @@
         [:g.zoom {:transform (str "scale(" zoom ", " zoom ")")}
          (when page
            [:*
+            (for [id (reverse (:canvas page))]
+              [:& uus/shape-component {:id id :key id}])
+
             (for [id (reverse (:shapes page))]
               [:& uus/shape-component {:id id :key id}])