🐛 Fix incorrect grid calculation when size is 1.

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

@@ -294,7 +294,7 @@
 
        (when show-grids?
          [:& frame-grid/frame-grid
-          {:zoom zoom}])
+          {:zoom zoom :selected selected :transform transform}])
 
        (when show-pixel-grid?
          [:& widgets/pixel-grid

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

@@ -42,7 +42,8 @@
              :height (:height frame)
              :fill (str "url(#" grid-id ")")}]]))
 
-(mf/defc layout-grid [{:keys [key frame grid]}]
+(mf/defc layout-grid
+  [{:keys [key frame grid]}]
   (let [{color-value :color color-opacity :opacity} (-> grid :params :color)
         ;; Support for old color format
         color-value (or color-value (:value (get-in grid [:params :color :value])))
@@ -56,42 +57,37 @@
                      :strokeOpacity color-opacity
                      :fill "none"})]
     [:g.grid
-     (for [{:keys [x y width height]} (gg/grid-areas frame grid)]
+     (for [{:keys [x y width height] :as area} (gg/grid-areas frame grid)]
-       (do
        [:rect {:key (str key "-" x "-" y)
                :x (mth/round x)
                :y (mth/round y)
                :width (- (mth/round (+ x width)) (mth/round x))
                :height (- (mth/round (+ y height)) (mth/round y))
-                 :style style}]))]))
+               :style style}])]))
 
-(mf/defc grid-display-frame [{:keys [frame zoom]}]
+(mf/defc grid-display-frame
-  (let [grids (:grids frame)]
+  [{:keys [frame zoom]}]
-    (for [[index {:keys [type display] :as grid}] (map-indexed vector grids)]
+  (for [[index {:keys [type display] :as grid}] (->> (:grids frame)
+                                                     (filter :display)
+                                                     (map-indexed vector))]
     (let [props #js {:key (str (:id frame) "-grid-" index)
                      :frame frame
                      :zoom zoom
                      :grid grid}]
-        (when display
       (case type
         :square [:> square-grid props]
         :column [:> layout-grid props]
-            :row    [:> layout-grid props]))))))
+        :row    [:> layout-grid props]))))
-
-
-(def shapes-moving-ref
-  (let [moving-shapes (fn [local]
-                        (when (= :move (:transform local))
-                          (:selected local)))]
-    (l/derived moving-shapes refs/workspace-local)))
 
 (mf/defc frame-grid
   {::mf/wrap [mf/memo]}
-  [{:keys [zoom]}]
+  [{:keys [zoom transform selected]}]
   (let [frames     (mf/deref refs/workspace-frames)
-        shapes-moving (mf/deref shapes-moving-ref)]
+        moving     (when (= :move transform) selected)
+        is-moving? #(contains? moving (:id %))]
+
     [:g.grid-display {:style {:pointer-events "none"}}
-     (for [frame (->> frames (remove #(contains? shapes-moving (:id %))))]
+     (for [frame (remove is-moving? frames)]
        [:& grid-display-frame {:key (str "grid-" (:id frame))
                                :zoom zoom
                                :frame (gsh/transform-shape frame)}])]))

frontend/src/app/util/geom/grid.cljs

@@ -23,35 +23,39 @@
         frame-length-no-margins (- frame-length (+ margin (- margin gutter)))]
     (mth/floor (/ frame-length-no-margins (+ item-length gutter)))))
 
-(defn- calculate-column-grid
+(defn- calculate-generic-grid
-  [{:keys [width height x y] :as frame} {:keys [size gutter margin item-length type] :as params}]
+  [v width {:keys [size gutter margin item-length type]}]
-  (let [size (if (number? size) size (calculate-size width item-length margin gutter))
+  (let [size   (if (number? size)
+                 size
+                 (calculate-size width item-length margin gutter))
         parts  (/ width size)
-        item-width (min (or item-length ##Inf) (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size))))
+
-        item-height height
+        width' (min (or item-length ##Inf) (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size))))
-        initial-offset (case type
+
-                         :right (- width (* item-width size) (* gutter (dec size)) margin)
+        offset (case type
-                         :center (/ (- width (* item-width size) (* gutter (dec size))) 2)
+                 :right (- width (* width' size) (* gutter (dec size)) margin)
+                 :center (/ (- width (* width' size) (* gutter (dec size))) 2)
                  margin)
-        gutter (if (= :stretch type) (/ (- width (* item-width size) (* margin 2)) (dec size)) gutter)
+
-        next-x (fn [cur-val] (+ initial-offset x (* (+ item-width gutter) cur-val)))
+        gutter (if (= :stretch type)
-        next-y (fn [_] y)]
+                 (let [gutter (/ (- width (* width' size) (* margin 2)) (dec size))]
-    [size item-width item-height next-x next-y]))
+                   (if (mth/finite? gutter) gutter 0))
+                 gutter)
+
+        next-v (fn [cur-val]
+                 (+ offset v (* (+ width' gutter) cur-val)))]
+
+    [size width' next-v]))
+
+(defn- calculate-column-grid
+  [{:keys [width height x y] :as frame} params]
+  (let [[size width next-x] (calculate-generic-grid x width params)]
+    [size width height next-x (constantly y)]))
 
 (defn- calculate-row-grid
-  [{:keys [width height x y] :as frame} {:keys [size gutter margin item-length type] :as params}]
+  [{:keys [width height x y] :as frame} params]
-  (let [size (if (number? size) size (calculate-size height item-length margin gutter))
+  (let [[size height next-y] (calculate-generic-grid y height params)]
-        parts (/ height size)
+    [size width height (constantly x) next-y]))
-        item-width width
-        item-height (min (or item-length ##Inf) (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size))))
-        initial-offset (case type
-                         :right (- height (* item-height size) (* gutter (dec size)) margin)
-                         :center (/ (- height (* item-height size) (* gutter (dec size))) 2)
-                         margin)
-        gutter (if (= :stretch type) (/ (- height (* item-height size) (* margin 2)) (dec size)) gutter)
-        next-x (fn [_] x)
-        next-y (fn [cur-val] (+ initial-offset y (* (+ item-height gutter) cur-val)))]
-    [size item-width item-height next-x next-y]))
 
 (defn- calculate-square-grid
   [{:keys [width height x y] :as frame} {:keys [size] :as params}]
@@ -62,6 +66,7 @@
                      (let [[_ col] (as-row-col cur-val)] (+ x (* col size))))
         next-y     (fn [cur-val]
                      (let [[row _] (as-row-col cur-val)] (+ y (* row size))))]
+
     [(* col-size row-size) size size next-x next-y]))
 
 (defn grid-areas
@@ -72,8 +77,7 @@
                   :row    calculate-row-grid
                   :square calculate-square-grid)
         [num-items item-width item-height next-x next-y] (grid-fn frame (-> grid :params))]
-    (->>
+    (->> (range 0 num-items)
-     (range 0 num-items)
          (map #(hash-map :x (next-x %)
                          :y (next-y %)
                          :width item-width