From 869abcc835ba52142cfd1ef3e5e500549b356bd4 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 22 Dec 2021 18:38:22 +0100 Subject: [PATCH] :bug: Fix incorrect grid calculation when size is 1. --- .../src/app/main/ui/workspace/viewport.cljs | 2 +- .../ui/workspace/viewport/frame_grid.cljs | 60 ++++++------- frontend/src/app/util/geom/grid.cljs | 86 ++++++++++--------- 3 files changed, 74 insertions(+), 74 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 53d82208a..f4dd216f6 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/viewport/frame_grid.cljs b/frontend/src/app/main/ui/workspace/viewport/frame_grid.cljs index 5cd49cc68..75404fd6d 100644 --- a/frontend/src/app/main/ui/workspace/viewport/frame_grid.cljs +++ b/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)] - (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}]))])) + (for [{:keys [x y width height] :as area} (gg/grid-areas frame grid)] + [: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}])])) -(mf/defc grid-display-frame [{:keys [frame zoom]}] - (let [grids (:grids frame)] - (for [[index {:keys [type display] :as grid}] (map-indexed vector grids)] - (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])))))) - - -(def shapes-moving-ref - (let [moving-shapes (fn [local] - (when (= :move (:transform local)) - (:selected local)))] - (l/derived moving-shapes refs/workspace-local))) +(mf/defc grid-display-frame + [{:keys [frame zoom]}] + (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}] + (case type + :square [:> square-grid props] + :column [:> layout-grid props] + :row [:> layout-grid props])))) (mf/defc frame-grid {::mf/wrap [mf/memo]} - [{:keys [zoom]}] - (let [frames (mf/deref refs/workspace-frames) - shapes-moving (mf/deref shapes-moving-ref)] + [{:keys [zoom transform selected]}] + (let [frames (mf/deref refs/workspace-frames) + 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)}])])) diff --git a/frontend/src/app/util/geom/grid.cljs b/frontend/src/app/util/geom/grid.cljs index 97496d18f..60cb715e9 100644 --- a/frontend/src/app/util/geom/grid.cljs +++ b/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}] - (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 - 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])) + [{: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}] - (let [size (if (number? size) size (calculate-size height item-length margin gutter)) - parts (/ height size) - 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])) + [{:keys [width height x y] :as frame} params] + (let [[size height next-y] (calculate-generic-grid y height params)] + [size width height (constantly x) next-y])) (defn- calculate-square-grid [{:keys [width height x y] :as frame} {:keys [size] :as params}] - (let [col-size (quot width size) - row-size (quot height size) + (let [col-size (quot width size) + row-size (quot height size) as-row-col (fn [value] [(quot value col-size) (rem value col-size)]) - next-x (fn [cur-val] - (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))))] + next-x (fn [cur-val] + (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 "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 - :row calculate-row-grid - :square calculate-square-grid) + :column calculate-column-grid + :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) - (map #(hash-map :x (next-x %) - :y (next-y %) - :width item-width - :height item-height))))) + (->> (range 0 num-items) + (map #(hash-map :x (next-x %) + :y (next-y %) + :width item-width + :height item-height))))) (defn grid-area-points [{:keys [x y width height]}]