🚧 Show shapes options.

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

@@ -234,6 +234,18 @@
   [txt]
   ::todo)
 
+(defn toggle-layout-flag
+  [flag]
+  (s/assert keyword? flag)
+  (ptk/reify ::toggle-layout-flag
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :workspace-layout
+              (fn [flags]
+                (if (contains? flags flag)
+                  (disj flags flag)
+                  (conj flags flag)))))))
+
 ;; --- Workspace Ruler
 
 (defrecord ActivateRuler []
@@ -775,6 +787,10 @@
                   xfmt (gmt/translate prev delta)]
               (assoc-in state [:workspace-data :shapes-by-id id :modifier-mtx] xfmt)))]
     (ptk/reify ::apply-temporal-displacement-in-bulk
+      ;; udp/IPageOps
+      ;; (-ops [_]
+      ;;   (mapv #(vec :udp/shape id :move delta) ids))
+
       ptk/UpdateEvent
       (update [_ state]
         (reduce process-shape state ids)))))
@@ -805,29 +821,6 @@
       (update [_ state]
         (reduce process-shape state ids)))))
 
-(defn rehash-shape-relationship
-  "Checks shape overlaping with existing canvas, if one or more
-  overlaps, assigns the shape to the first one."
-  [id]
-  (s/assert ::us/uuid id)
-  (letfn [(overlaps? [canvas shape]
-            (let [shape1 (geom/shape->rect-shape canvas)
-                  shape2 (geom/shape->rect-shape shape)]
-              (geom/overlaps? shape1 shape2)))]
-    (ptk/reify ::rehash-shape-relationship
-      ptk/UpdateEvent
-      (update [_ state]
-        (let [shape (get-in state [:workspace-data :shapes-by-id id])
-              xform (comp (map #(get-in state [:workspace-data :shapes-by-id %]))
-                          (filter #(overlaps? % shape))
-                          (take 1))
-              canvas (->> (get-in state [:workspace-data :canvas])
-                          (sequence xform)
-                          (first))]
-          (if canvas
-            (update-in state [:workspace-data :shapes-by-id id] assoc :canvas (:id canvas))
-            (update-in state [:workspace-data :shapes-by-id id] assoc :canvas nil)))))))
-
 ;; --- Start shape "edition mode"
 
 (defn start-edition-mode

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

@@ -110,7 +110,7 @@
 
     [:> rdnd/provider {:backend rdnd/html5}
      [:& messages-widget]
-     [:& header {:page page :flags flags}]
+     [:& header {:page page :layout layout :flags flags}]
 
      (when (:colorpalette flags)
        [:& colorpalette])

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

@@ -43,7 +43,7 @@
 ;; --- Header Component
 
 (mf/defc header
-  [{:keys [page flags] :as props}]
+  [{:keys [page layout flags] :as props}]
   (let [toggle #(st/emit! (dw/toggle-flag %))
         on-undo #(st/emit! (udu/undo))
         on-redo #(st/emit! (udu/redo))
@@ -55,41 +55,41 @@
       [:a {:on-click #(st/emit! (rt/nav :dashboard-projects))} i/logo-icon]]
      [:div.project-tree-btn
       {:alt (tr "header.sitemap")
-       :class (when (contains? flags :sitemap) "selected")
+       :class (when (contains? layout :sitemap) "selected")
-       :on-click (partial toggle :sitemap)}
+       :on-click #(st/emit! (dw/toggle-layout-flag :sitemap))}
       i/project-tree
       [:span {} (:name page)]]
      [:div.workspace-options
       [:ul.options-btn
        [:li.tooltip.tooltip-bottom
         {:alt (tr "header.draw-tools")
-         :class (when (contains? flags :drawtools) "selected")
+         :class (when (contains? layout :drawtools) "selected")
-         :on-click (partial toggle :drawtools)}
+         :on-click #(st/emit! (dw/toggle-layout-flag :drawtools))}
         i/shapes]
        [:li.tooltip.tooltip-bottom
         {:alt (tr "header.color-palette")
-         :class (when (contains? flags :colorpalette) "selected")
+         :class (when (contains? layout :colorpalette) "selected")
-         :on-click (partial toggle :colorpalette)}
+         :on-click #(st/emit! (dw/toggle-layout-flag :colorpalette))}
         i/palette]
        [:li.tooltip.tooltip-bottom
         {:alt (tr "header.icons")
-         :class (when (contains? flags :icons) "selected")
+         :class (when (contains? layout :icons) "selected")
-         :on-click (partial toggle :icons)}
+         :on-click #(st/emit! (dw/toggle-layout-flag :icons))}
         i/icon-set]
        [:li.tooltip.tooltip-bottom
         {:alt (tr "header.layers")
-         :class (when (contains? flags :layers) "selected")
+         :class (when (contains? layout :layers) "selected")
-         :on-click (partial toggle :layers)}
+         :on-click #(st/emit! (dw/toggle-layout-flag :layers))}
         i/layers]
        [:li.tooltip.tooltip-bottom
         {:alt (tr "header.element-options")
-         :class (when (contains? flags :element-options) "selected")
+         :class (when (contains? layout :element-options) "selected")
-         :on-click (partial toggle :element-options)}
+         :on-click #(st/emit! (dw/toggle-layout-flag :element-options))}
         i/options]
        [:li.tooltip.tooltip-bottom
         {:alt (tr "header.document-history")
-         :class (when (contains? flags :document-history) "selected")
+         :class (when (contains? layout :document-history) "selected")
-         :on-click (partial toggle :document-history)}
+         :on-click #(st/emit! (dw/toggle-layout-flag :document-history))}
         i/undo-history]]
       [:ul.options-btn
        [:li.tooltip.tooltip-bottom

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

@@ -50,7 +50,7 @@
   {:wrap [mf/wrap-memo]}
   [{:keys [flags] :as props}]
   (letfn [(close [event]
-            (st/emit! (dw/deactivate-flag :drawtools)))
+            (st/emit! (dw/toggle-layout-flag :drawtools)))
           (select [event tool]
             (st/emit! :interrupt
                       (dw/deactivate-ruler)

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

@@ -237,7 +237,7 @@
 
 (mf/defc layers-toolbox
   [{:keys [page] :as props}]
-  (let [on-click #(st/emit! (dw/toggle-flag :layers))
+  (let [on-click #(st/emit! (dw/toggle-layout-flag :layers))
 
         selected (mf/deref refs/selected-shapes)
         data (mf/deref refs/workspace-data)

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

@@ -88,9 +88,9 @@
 ;; --- Options
 
 (mf/defc shape-options
-  [{:keys [sid] :as props}]
+  [{:keys [shape-id] :as props}]
-  (let [shape-iref (mf/use-memo {:deps #js [sid]
+  (let [shape-iref (mf/use-memo {:deps #js [shape-id]
-                                 :fn #(-> (l/in [:shapes sid])
+                                 :fn #(-> (l/in [:workspace-data :shapes-by-id shape-id])
                                           (l/derive st/state))})
         shape (mf/deref shape-iref)
         menus (get +menus-map+ (:type shape))]
@@ -110,7 +110,7 @@
 (mf/defc options-toolbox
   {:wrap [mf/wrap-memo]}
   [{:keys [page selected] :as props}]
-  (let [close #(st/emit! (udw/toggle-flag :element-options))
+  (let [close #(st/emit! (udw/toggle-layout-flag :element-options))
         selected (mf/deref refs/selected-shapes)]
     [:div.elementa-options.tool-window
      [:div.tool-window-bar
@@ -120,5 +120,5 @@
      [:div.tool-window-content
       [:div.element-options
        (if (= (count selected) 1)
-         [:& shape-options {:sid (first selected)}]
+         [:& shape-options {:shape-id (first selected)}]
          [:& page-options {:page page}])]]]))

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

@@ -98,7 +98,7 @@
 (mf/defc sitemap-toolbox
   [{:keys [file page] :as props}]
   (let [create-fn #(modal/show! page-form-dialog {:page {:file-id (:file-id page)}})
-        close-fn  #(st/emit! (dw/toggle-flag :sitemap))]
+        close-fn  #(st/emit! (dw/toggle-layout-flag :sitemap))]
     [:div.sitemap.tool-window
      [:div.tool-window-bar
       [:div.tool-window-icon i/project-tree]