🐛 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)
-         [:rect {:key (str key "-" x "-" y)
+               :x (mth/round x)
-                 :x (mth/round x)
+               :y (mth/round y)
-                 :y (mth/round y)
+               :width (- (mth/round (+ x width)) (mth/round x))
-                 :width (- (mth/round (+ x width)) (mth/round x))
+               :height (- (mth/round (+ y height)) (mth/round y))
-                 :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)
-      (let [props #js {:key (str (:id frame) "-grid-" index)
+                                                     (filter :display)
-                       :frame frame
+                                                     (map-indexed vector))]
-                       :zoom zoom
+    (let [props #js {:key (str (:id frame) "-grid-" index)
-                       :grid grid}]
+                     :frame frame
-        (when display
+                     :zoom zoom
-          (case type
+                     :grid grid}]
-            :square [:> square-grid props]
+      (case type
-            :column [:> layout-grid props]
+        :square [:> square-grid props]
-            :row    [:> layout-grid props]))))))
+        :column [:> 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)
+  (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,61 +23,65 @@
         frame-length-no-margins (- frame-length (+ margin (- margin gutter)))]
     (mth/floor (/ frame-length-no-margins (+ item-length gutter)))))
 
+(defn- calculate-generic-grid
+  [v width {:keys [size gutter margin item-length type]}]
+  (let [size   (if (number? size)
+                 size
+                 (calculate-size width item-length margin gutter))
+        parts  (/ width size)
+
+        width' (min (or item-length ##Inf) (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size))))
+
+        offset (case type
+                 :right (- width (* width' size) (* gutter (dec size)) margin)
+                 :center (/ (- width (* width' size) (* gutter (dec size))) 2)
+                 margin)
+
+        gutter (if (= :stretch type)
+                 (let [gutter (/ (- width (* width' size) (* margin 2)) (dec size))]
+                   (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} {: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 width item-length margin gutter))
+  (let [[size width next-x] (calculate-generic-grid x width params)]
-        parts (/ width size)
+    [size width height next-x (constantly y)]))
-        item-width (min (or item-length ##Inf) (+ parts (- gutter) (/ gutter size) (- (/ (* margin 2) size))))
-        item-height height
-        initial-offset (case type
-                         :right (- width (* item-width size) (* gutter (dec size)) margin)
-                         :center (/ (- width (* item-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)))
-        next-y (fn [_] y)]
-    [size item-width item-height next-x next-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}]
-  (let [col-size (quot width size)
+  (let [col-size   (quot width size)
-        row-size (quot height size)
+        row-size   (quot height size)
         as-row-col (fn [value] [(quot value col-size) (rem value col-size)])
-        next-x (fn [cur-val]
+        next-x     (fn [cur-val]
-                 (let [[_ col] (as-row-col cur-val)] (+ x (* col size))))
+                     (let [[_ col] (as-row-col cur-val)] (+ x (* col size))))
-        next-y (fn [cur-val]
+        next-y     (fn [cur-val]
-                 (let [[row _] (as-row-col cur-val)] (+ y (* row size))))]
+                     (let [[row _] (as-row-col cur-val)] (+ y (* row size))))]
+
     [(* col-size row-size) size size next-x next-y]))
 
 (defn grid-areas
   "Given a frame and the grid parameters returns the areas defined on the grid"
   [frame grid]
   (let [grid-fn (case (-> grid :type)
-                    :column calculate-column-grid
+                  :column calculate-column-grid
-                    :row calculate-row-grid
+                  :row    calculate-row-grid
-                    :square calculate-square-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 %)
-     (map #(hash-map :x (next-x %)
+                         :y (next-y %)
-                     :y (next-y %)
+                         :width item-width
-                     :width item-width
+                         :height item-height)))))
-                     :height item-height)))))
 
 (defn grid-area-points
   [{:keys [x y width height]}]