✨ Enable grid editor

frontend/src/app/main/data/workspace/shape_layout.cljs

@@ -63,6 +63,7 @@
    :layout-justify-content :start
    :layout-padding-type    :simple
    :layout-padding         {:p1 0 :p2 0 :p3 0 :p4 0}
+   :layout-grid-cells      {}
    :layout-grid-rows       []
    :layout-grid-columns    []})
 
@@ -443,12 +444,13 @@
 (defn change-layout-track
   [ids type index props]
   (assert (#{:row :column} type))
-  (ptk/reify ::change-layout-column
+  (ptk/reify ::change-layout-track
     ptk/WatchEvent
     (watch [_ _ _]
       (let [undo-id (js/Symbol)
-            property (case :row :layout-grid-rows
-                           :column :layout-grid-columns)]
+            property (case type
+                       :row :layout-grid-rows
+                       :column :layout-grid-columns)]
         (rx/of (dwu/start-undo-transaction undo-id)
                (dwc/update-shapes
                 ids

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs

@@ -9,6 +9,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.math :as mth]
+   [app.common.types.shape.layout :as ctl]
    [app.main.data.workspace :as udw]
    [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.refs :as refs]
@@ -441,7 +442,7 @@
                           :on-click toggle} generated-name]
       [:button.add-column {:on-click #(do
                                         (when-not expanded? (toggle))
-                                        (add-new-element type {:type :fixed :value 100}))} i/plus]]
+                                        (add-new-element type ctl/default-track-value))} i/plus]]
 
      (when expanded?
        [:div.columns-info-wrapper
@@ -489,12 +490,12 @@
           (st/emit! (dwsl/remove-layout ids))
           (reset! open? false))
 
-        _set-flex
+        set-flex
         (fn []
           (st/emit! (dwsl/remove-layout ids))
           (on-add-layout :flex))
 
-        _set-grid
+        set-grid
         (fn []
           (st/emit! (dwsl/remove-layout ids))
           (on-add-layout :grid))
@@ -637,7 +638,7 @@
        [:span "Layout"]
        (if (and (not multiple) (:layout values))
          [:div.title-actions
-          #_[:div.layout-btns
+          [:div.layout-btns
              [:button {:on-click set-flex
                        :class (dom/classnames
                                :active (= :flex layout-type))} "Flex"]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/grid_cell.cljs

@@ -98,7 +98,7 @@
        (when (= :auto @position-mode)
          [:div.grid-auto
           [:div.grid-columns-auto
-           [:spam.icon i/layout-rows]
+           [:span.icon i/layout-rows]
            [:div.input-wrapper
             [:> numeric-input
              {:placeholder "--"
@@ -106,7 +106,7 @@
               :on-change (partial on-change :all :column) ;; TODO cambiar este on-change y el value
               :value column-start}]]]
           [:div.grid-rows-auto
-           [:spam.icon i/layout-columns]
+           [:span.icon i/layout-columns]
            [:div.input-wrapper
             [:> numeric-input
              {:placeholder "--"
@@ -129,7 +129,7 @@
        (when (or (= :manual @position-mode) (= :area @position-mode))
          [:div.grid-manual
           [:div.grid-columns-auto
-           [:spam.icon i/layout-rows]
+           [:span.icon i/layout-rows]
            [:div.input-wrapper
             [:> numeric-input
              {:placeholder "--"
@@ -142,7 +142,7 @@
               :on-change (partial on-change :end :column)
               :value column-end}]]]
           [:div.grid-rows-auto
-           [:spam.icon i/layout-columns]
+           [:span.icon i/layout-columns]
            [:div.input-wrapper
             [:> numeric-input
              {:placeholder "--"

frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs

@@ -12,7 +12,9 @@
    [app.common.geom.shapes.grid-layout :as gsg]
    [app.common.geom.shapes.points :as gpo]
    [app.common.pages.helpers :as cph]
+   [app.common.types.shape.layout :as ctl]
    [app.main.data.workspace.grid-layout.editor :as dwge]
+   [app.main.data.workspace.shape-layout :as dwsl]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.util.dom :as dom]
@@ -92,9 +94,10 @@
   {::mf/wrap-props false}
   [props]
 
-  (let [start-p (unchecked-get props "start-p")
-        zoom (unchecked-get props "zoom")
-        type (unchecked-get props "type")
+  (let [start-p  (unchecked-get props "start-p")
+        zoom     (unchecked-get props "zoom")
+        type     (unchecked-get props "type")
+        on-click (unchecked-get props "on-click")
 
         [rect-x rect-y icon-x icon-y]
         (if (= type :column)
@@ -106,9 +109,17 @@
           [(- (:x start-p) (/ 40 zoom))
            (:y start-p)
            (- (:x start-p) (/ 28 zoom))
-           (+ (:y start-p) (/ 12 zoom))])]
+           (+ (:y start-p) (/ 12 zoom))])
 
-    [:g.plus-button
+        handle-click
+        (mf/use-callback
+         (mf/deps on-click)
+         (fn [event]
+           (when on-click
+             (on-click))))]
+
+    [:g.plus-button {:cursor "pointer"
+                     :on-click handle-click}
      [:rect {:x rect-x
              :y rect-y
              :width (/ 40 zoom)
@@ -152,25 +163,45 @@
 
         end-p (-> start-p
                   (gpt/add (hv (:value column-track)))
-                  (gpt/add (vv (:value row-track))))]
+                  (gpt/add (vv (:value row-track))))
 
-    [:rect.cell-editor
-     {:x (:x start-p)
-      :y (:y start-p)
-      :width (- (:x end-p) (:x start-p))
-      :height (- (:y end-p) (:y start-p))
+        cell-width  (- (:x end-p) (:x start-p))
+        cell-height (- (:y end-p) (:y start-p))]
 
-      :on-pointer-enter #(st/emit! (dwge/hover-grid-cell (:id shape) row column true))
-      :on-pointer-leave #(st/emit! (dwge/hover-grid-cell (:id shape) row column false))
+    [:g.cell-editor
+     [:rect
+      {:x (:x start-p)
+       :y (:y start-p)
+       :width cell-width
+       :height cell-height
 
-      :on-click #(st/emit! (dwge/select-grid-cell (:id shape) row column))
+       :on-pointer-enter #(st/emit! (dwge/hover-grid-cell (:id shape) row column true))
+       :on-pointer-leave #(st/emit! (dwge/hover-grid-cell (:id shape) row column false))
 
-      :style {:fill "transparent"
-              :stroke "var(--color-distance)"
-              :stroke-dasharray (when-not (or hover? selected?)
-                                  (str/join " " (map #(/ % zoom) [0 8]) ))
-              :stroke-linecap "round"
-              :stroke-width (/ 2 zoom)}}]))
+       :on-click #(st/emit! (dwge/select-grid-cell (:id shape) row column))
+
+       :style {:fill "transparent"
+               :stroke "var(--color-distance)"
+               :stroke-dasharray (when-not (or hover? selected?)
+                                   (str/join " " (map #(/ % zoom) [0 8]) ))
+               :stroke-linecap "round"
+               :stroke-width (/ 2 zoom)}}]
+
+     (when selected?
+       (let [handlers
+             ;; Handlers positions, size and cursor
+             [[(:x start-p) (+ (:y start-p) (/ -10 zoom)) cell-width (/ 20 zoom) (cur/scale-ns 0)]
+              [(+ (:x start-p) cell-width (/ -10 zoom)) (:y start-p) (/ 20 zoom) cell-height (cur/scale-ew 0)]
+              [(:x start-p) (+ (:y start-p) cell-height (/ -10 zoom)) cell-width (/ 20 zoom) (cur/scale-ns 0)]
+              [(+ (:x start-p) (/ -10 zoom)) (:y start-p) (/ 20 zoom) cell-height (cur/scale-ew 0)]]]
+         [:*
+          (for [[x y width height cursor] handlers]
+            [:rect
+             {:x x
+              :y y
+              :height height
+              :width width
+              :style {:fill "transparent" :stroke-width 0 :cursor cursor}}])]))]))
 
 (mf/defc resize-handler
   {::mf/wrap-props false}
@@ -265,7 +296,19 @@
         origin (gpo/origin bounds)
 
         {:keys [row-tracks column-tracks] :as layout-data}
-        (gsg/calc-layout-data shape children bounds)]
+        (gsg/calc-layout-data shape children bounds)
+
+        handle-add-column
+        (mf/use-callback
+         (mf/deps (:id shape))
+         (fn []
+           (st/emit! (st/emit! (dwsl/add-layout-track [(:id shape)] :column ctl/default-track-value)))))
+
+        handle-add-row
+        (mf/use-callback
+         (mf/deps (:id shape))
+         (fn []
+           (st/emit! (st/emit! (dwsl/add-layout-track [(:id shape)] :row ctl/default-track-value)))))]
 
     (mf/use-effect
        (fn []
@@ -277,23 +320,16 @@
      (let [start-p (-> origin (gpt/add (hv width)))]
        [:& plus-btn {:start-p start-p
                      :zoom zoom
-                     :type :column}])
+                     :type :column
+                     :on-click handle-add-column}])
 
      (let [start-p (-> origin (gpt/add (vv height)))]
        [:& plus-btn {:start-p start-p
                      :zoom zoom
-                     :type :row}])
+                     :type :row
+                     :on-click handle-add-row}])
+
 
-     (for [[_ {:keys [column row]}] (:layout-grid-cells shape)]
-       [:& grid-cell {:shape shape
-                      :layout-data layout-data
-                      :row row
-                      :column column
-                      :bounds bounds
-                      :zoom zoom
-                      :hover? (contains? hover-cells [row column])
-                      :selected? (= selected-cells [row column])
-                      }])
 
      (for [[idx column-data] (d/enumerate column-tracks)]
        (let [start-p (-> origin (gpt/add (hv (:distance column-data))))
@@ -320,4 +356,14 @@
           [:& resize-handler {:type :row
                               :start-p start-p
                               :zoom zoom
-                              :bounds bounds}]]))]))
+                              :bounds bounds}]]))
+
+     (for [[_ {:keys [column row]}] (:layout-grid-cells shape)]
+       [:& grid-cell {:shape shape
+                      :layout-data layout-data
+                      :row row
+                      :column column
+                      :bounds bounds
+                      :zoom zoom
+                      :hover? (contains? hover-cells [row column])
+                      :selected? (= selected-cells [row column])}])]))