🐛 Fix some issues with grid

common/src/app/common/types/container.cljc

@@ -16,6 +16,7 @@
    [app.common.types.components-list :as ctkl]
    [app.common.types.pages-list :as ctpl]
    [app.common.types.shape-tree :as ctst]
+   [app.common.types.shape.layout :as ctl]
    [app.common.uuid :as uuid]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -265,7 +266,7 @@
                                                             (gpt/add orig-pos delta)
                                                             {:skip-components? true
                                                              :bottom-frames? true}))
-         frame-ids-map   (volatile! {})
+         ids-map   (volatile! {})
 
          update-new-shape
          (fn [new-shape original-shape]
@@ -275,8 +276,7 @@
              (when (nil? (:parent-id original-shape))
                (vswap! unames conj new-name))
 
-             (when (= (:type original-shape) :frame)
-               (vswap! frame-ids-map assoc (:id original-shape) (:id new-shape)))
+             (vswap! ids-map assoc (:id original-shape) (:id new-shape))
 
              (cond-> new-shape
                :always
@@ -307,7 +307,8 @@
                (dissoc :component-root))))
 
          [new-shape new-shapes _]
-         (ctst/clone-object component-shape
+         (ctst/clone-object
+          component-shape
           nil
           (if components-v2 (:objects component-page) (:objects component))
           update-new-shape
@@ -318,13 +319,17 @@
          ;; If frame-id points to a shape inside the component, remap it to the
          ;; corresponding new frame shape. If not, set it to the destination frame.
          ;; Also fix empty parent-id.
-         remap-frame-id (fn [shape]
+         remap-ids
+         (fn [shape]
            (as-> shape $
-                            (update $ :frame-id #(get @frame-ids-map % frame-id))
-                            (update $ :parent-id #(or % (:frame-id $)))))]
+             (update $ :frame-id #(get @ids-map % frame-id))
+             (update $ :parent-id #(or % (:frame-id $)))
+             (cond-> $
+               (ctl/grid-layout? shape)
+               (ctl/remap-grid-cells @ids-map))))]
 
-     [(remap-frame-id new-shape)
-      (map remap-frame-id new-shapes)])))
+     [(remap-ids new-shape)
+      (map remap-ids new-shapes)])))
 
 (defn get-top-instance
   "The case of having an instance that contains another instances.

common/src/app/common/types/shape/layout.cljc

@@ -1177,3 +1177,15 @@
      (for [r (range first-row (inc last-row))
            c (range first-column (inc last-column))]
        [r c]))))
+
+(defn remap-grid-cells
+  "Remaps the shapes inside the cells"
+  [shape ids-map]
+  (let [do-remap-cells
+        (fn [cell]
+          (-> cell
+              (update :shapes #(mapv ids-map %))))
+        shape
+        (-> shape
+            (update :layout-grid-cells update-vals do-remap-cells))]
+    shape))

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

@@ -330,17 +330,6 @@
         (when selected
           (rx/of (select-shape (:id selected))))))))
 
-(defn remap-grid-cells
-  "Remaps the shapes inside the cells"
-  [shape ids-map]
-
-  (let [do-remap-cells
-        (fn [cell]
-          (-> cell
-              (update :shapes #(mapv ids-map %))))]
-
-    (update shape :layout-grid-cells update-vals do-remap-cells)))
-
 ;; --- Duplicate Shapes
 (declare prepare-duplicate-shape-change)
 (declare prepare-duplicate-flows)
@@ -463,8 +452,7 @@
                (d/update-when :interactions #(ctsi/remap-interactions % ids-map objects))
 
                (cond-> (ctl/grid-layout? obj)
-                 (-> (ctl/check-deassigned-cells)
-                     (remap-grid-cells ids-map))))
+                 (ctl/remap-grid-cells ids-map)))
 
            new-obj (cond-> new-obj
                      (not duplicating-component?)
@@ -474,7 +462,7 @@
            changes (-> (pcb/add-object changes new-obj {:ignore-touched (and duplicating-component? child?)})
                        (pcb/amend-last-change #(assoc % :old-id (:id obj)))
                        (cond-> (ctl/grid-layout? objects (:parent-id obj))
-                         (-> (pcb/update-shapes [(:parent-id obj)] ctl/assign-cells)
+                         (-> (pcb/update-shapes [(:parent-id obj)] (fn [shape] (-> shape ctl/assign-cells ctl/check-deassigned-cells)))
                              (pcb/reorder-grid-children [(:parent-id obj)]))))
 
            changes (cond-> changes

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

@@ -34,6 +34,9 @@
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
+(def small-size-limit 60)
+(def medium-size-limit 110)
+
 (defn apply-to-point [result next-fn]
   (conj result (next-fn (last result))))
 
@@ -630,6 +633,10 @@
           [(:x text-p) (- (:y text-p) (/ 36 zoom)) (max 0 (:size track-data)) (/ 36 zoom)]
           [(- (:x text-p) (max 0 (:size track-data))) (- (:y text-p) (/ 36 zoom)) (max 0 (:size track-data)) (/ 36 zoom)])
 
+        trackwidth (* text-width zoom)
+        medium?    (and (>= trackwidth small-size-limit) (< trackwidth medium-size-limit))
+        small?     (< trackwidth small-size-limit)
+
         track-before (get-in layout-data [track-list-prop (dec index)])]
 
     (mf/use-effect
@@ -644,14 +651,15 @@
                        (dm/str (gmt/transform-in text-p (:transform shape)))
                        (dm/str (gmt/transform-in text-p (gmt/rotate (:transform shape) -90))))}
 
-      (when hovering?
-        [:rect {:x (+ text-x (/ 5 zoom))
+      (when (and hovering? (not small?))
+        [:rect {:x (+ text-x (/ 18 zoom))
                 :y text-y
-                :width (- text-width (/ 10 zoom))
+                :width (- text-width (/ 36 zoom))
                 :height (- text-height (/ 5 zoom))
                 :rx (/ 3 zoom)
                 :fill "var(--color-distance)"
                 :opacity 0.2}])
+      (when (not small?)
         [:foreignObject {:x text-x :y text-y :width text-width :height text-height}
          [:div {:class (css :grid-editor-wrapper)}
           [:input
@@ -663,9 +671,9 @@
             :data-default-value (format-size track-data)
             :on-key-down handle-keydown-track-input
             :on-blur handle-blur-track-input}]
-        (when hovering?
+          (when (and hovering? (not medium?) (not small?))
             [:button {:class (css :grid-editor-button)
-                    :on-click handle-remove-track} i/trash])]]]
+                      :on-click handle-remove-track} i/trash])]])]
 
      [:g {:transform (when (= type :row) (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p)))}
       [:& track-marker
@@ -782,6 +790,7 @@
      (fn []
        #(st/emit! (dwge/stop-grid-layout-editing (:id shape)))))
 
+    (when (and (not (:hidden shape)) (not (:blocked shape)))
       [:g.grid-editor {:pointer-events (when view-only "none")
                        :on-pointer-down handle-pointer-down}
        [:g.cells
@@ -884,4 +893,4 @@
                  :type :row
                  :track-before (last row-tracks)
                  :snap-pixel? snap-pixel?
-               :zoom zoom}]]))])]))
+                 :zoom zoom}]]))])])))

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

@@ -46,7 +46,7 @@
   margin: 0;
   padding: 0;
   position: absolute;
-  right: calc(10px / var(--zoom));
+  right: calc(20px / var(--zoom));
   width: calc(20px / var(--zoom));
   height: calc(20px / var(--zoom));
 
@@ -80,12 +80,12 @@
 .grid-cell-outline {
   fill: transparent;
   stroke: var(--color-distance);
-  stroke-linecap: round;
-  stroke-width: calc(2 / var(--zoom));
-  stroke-dasharray: 0 calc(8 / var(--zoom));
+  stroke-opacity: 0.5;
+  stroke-width: calc(1 / var(--zoom));
 
   &.hover,
   &.selected {
-    stroke-dasharray: initial;
+    stroke-opacity: 1;
+    stroke-width: calc(2 / var(--zoom));
   }
 }