From a0c79fc038e98e39112c6496092f825dce672b6b Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Fri, 29 Sep 2023 15:43:22 +0200 Subject: [PATCH] :bug: Fix some issues with grid --- common/src/app/common/types/container.cljc | 43 ++-- common/src/app/common/types/shape/layout.cljc | 12 + .../app/main/data/workspace/selection.cljs | 16 +- .../viewport/grid_layout_editor.cljs | 243 +++++++++--------- .../viewport/grid_layout_editor.scss | 10 +- 5 files changed, 169 insertions(+), 155 deletions(-) diff --git a/common/src/app/common/types/container.cljc b/common/src/app/common/types/container.cljc index ef7bc7657..35ff81f06 100644 --- a/common/src/app/common/types/container.cljc +++ b/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,24 +307,29 @@ (dissoc :component-root)))) [new-shape new-shapes _] - (ctst/clone-object component-shape - nil - (if components-v2 (:objects component-page) (:objects component)) - update-new-shape - (fn [object _] object) - force-id - keep-ids?) + (ctst/clone-object + component-shape + nil + (if components-v2 (:objects component-page) (:objects component)) + update-new-shape + (fn [object _] object) + force-id + keep-ids?) - ;; 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] - (as-> shape $ - (update $ :frame-id #(get @frame-ids-map % frame-id)) - (update $ :parent-id #(or % (:frame-id $)))))] + ;; 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-ids + (fn [shape] + (as-> shape $ + (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. diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index 20617a80f..9abd71970 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/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)) diff --git a/frontend/src/app/main/data/workspace/selection.cljs b/frontend/src/app/main/data/workspace/selection.cljs index d6949f84e..6a463f2c6 100644 --- a/frontend/src/app/main/data/workspace/selection.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs index 34334ff66..70c935b82 100644 --- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs +++ b/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,28 +651,29 @@ (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}]) - [:foreignObject {:x text-x :y text-y :width text-width :height text-height} - [:div {:class (css :grid-editor-wrapper)} - [:input - {:ref track-input-ref - :style {} - :class (css :grid-editor-label) - :type "text" - :default-value (format-size track-data) - :data-default-value (format-size track-data) - :on-key-down handle-keydown-track-input - :on-blur handle-blur-track-input}] - (when hovering? - [:button {:class (css :grid-editor-button) - :on-click handle-remove-track} i/trash])]]] + (when (not small?) + [:foreignObject {:x text-x :y text-y :width text-width :height text-height} + [:div {:class (css :grid-editor-wrapper)} + [:input + {:ref track-input-ref + :style {} + :class (css :grid-editor-label) + :type "text" + :default-value (format-size track-data) + :data-default-value (format-size track-data) + :on-key-down handle-keydown-track-input + :on-blur handle-blur-track-input}] + (when (and hovering? (not medium?) (not small?)) + [:button {:class (css :grid-editor-button) + :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,106 +790,107 @@ (fn [] #(st/emit! (dwge/stop-grid-layout-editing (:id shape))))) - [:g.grid-editor {:pointer-events (when view-only "none") - :on-pointer-down handle-pointer-down} - [:g.cells - (for [cell (ctl/get-cells shape {:sort? true})] - [:& grid-cell {:key (dm/str "cell-" (:id cell)) - :shape base-shape - :layout-data layout-data - :cell cell + (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 + (for [cell (ctl/get-cells shape {:sort? true})] + [:& grid-cell {:key (dm/str "cell-" (:id cell)) + :shape base-shape + :layout-data layout-data + :cell cell + :zoom zoom + :hover? (contains? hover-cells (:id cell)) + :selected? (contains? selected-cells (:id cell))}])] + (when-not view-only + [:* + [:& grid-editor-frame {:zoom zoom + :bounds bounds}] + (let [start-p (-> origin (gpt/add (hv width)))] + [:g {:transform (dm/str (gmt/transform-in start-p (:transform shape)))} + [:& plus-btn {:start-p start-p + :zoom zoom + :type :column + :on-click handle-add-column}]]) + + (let [start-p (-> origin (gpt/add (vv height)))] + [:g {:transform (dm/str (gmt/transform-in start-p (:transform shape)))} + [:& plus-btn {:start-p start-p + :zoom zoom + :type :row + :on-click handle-add-row}]]) + + (for [[idx column-data] (d/enumerate column-tracks)] + [:& track {:key (dm/str "column-track-" idx) + :shape shape :zoom zoom - :hover? (contains? hover-cells (:id cell)) - :selected? (contains? selected-cells (:id cell))}])] - (when-not view-only - [:* - [:& grid-editor-frame {:zoom zoom - :bounds bounds}] - (let [start-p (-> origin (gpt/add (hv width)))] - [:g {:transform (dm/str (gmt/transform-in start-p (:transform shape)))} - [:& plus-btn {:start-p start-p - :zoom zoom - :type :column - :on-click handle-add-column}]]) + :type :column + :index idx + :layout-data layout-data + :snap-pixel? snap-pixel? + :track-data column-data + :hovering? (contains? hover-columns idx)}]) - (let [start-p (-> origin (gpt/add (vv height)))] - [:g {:transform (dm/str (gmt/transform-in start-p (:transform shape)))} - [:& plus-btn {:start-p start-p - :zoom zoom - :type :row - :on-click handle-add-row}]]) + ;; Last track resize handler + (when-not (empty? column-tracks) + (let [last-track (last column-tracks) + start-p (:start-p last-track) + end-p (gpt/add start-p (hv (:size last-track))) + marker-p (-> (gpo/project-point bounds :h end-p) + (gpt/subtract (vv (/ 20 zoom))))] + [:g.track + [:& track-marker {:center marker-p + :index (count column-tracks) + :shape shape + :snap-pixel? snap-pixel? + :track-before (last column-tracks) + :type :column + :value (dm/str (inc (count column-tracks))) + :zoom zoom}] + [:& resize-track-handler + {:index (count column-tracks) + :last? true + :shape shape + :layout-data layout-data + :snap-pixel? snap-pixel? + :start-p end-p + :type :column + :track-before (last column-tracks) + :zoom zoom}]])) - (for [[idx column-data] (d/enumerate column-tracks)] - [:& track {:key (dm/str "column-track-" idx) - :shape shape - :zoom zoom - :type :column - :index idx - :layout-data layout-data - :snap-pixel? snap-pixel? - :track-data column-data - :hovering? (contains? hover-columns idx)}]) - - ;; Last track resize handler - (when-not (empty? column-tracks) - (let [last-track (last column-tracks) - start-p (:start-p last-track) - end-p (gpt/add start-p (hv (:size last-track))) - marker-p (-> (gpo/project-point bounds :h end-p) - (gpt/subtract (vv (/ 20 zoom))))] - [:g.track - [:& track-marker {:center marker-p - :index (count column-tracks) - :shape shape - :snap-pixel? snap-pixel? - :track-before (last column-tracks) - :type :column - :value (dm/str (inc (count column-tracks))) - :zoom zoom}] - [:& resize-track-handler - {:index (count column-tracks) - :last? true - :shape shape - :layout-data layout-data - :snap-pixel? snap-pixel? - :start-p end-p - :type :column - :track-before (last column-tracks) - :zoom zoom}]])) - - (for [[idx row-data] (d/enumerate row-tracks)] - [:& track {:index idx - :key (dm/str "row-track-" idx) - :layout-data layout-data - :shape shape - :snap-pixel? snap-pixel? - :track-data row-data - :type :row - :zoom zoom - :hovering? (contains? hover-rows idx)}]) - (when-not (empty? row-tracks) - (let [last-track (last row-tracks) - start-p (:start-p last-track) - end-p (gpt/add start-p (vv (:size last-track))) - marker-p (-> (gpo/project-point bounds :v end-p) - (gpt/subtract (hv (/ 20 zoom))))] - [:g.track - [:g {:transform (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p))} - [:& track-marker {:center marker-p - :index (count row-tracks) - :shape shape - :snap-pixel? snap-pixel? - :track-before (last row-tracks) - :type :row - :value (dm/str (inc (count row-tracks))) - :zoom zoom}]] - [:& resize-track-handler - {:index (count row-tracks) - :last? true - :shape shape - :layout-data layout-data - :start-p end-p - :type :row - :track-before (last row-tracks) - :snap-pixel? snap-pixel? - :zoom zoom}]]))])])) + (for [[idx row-data] (d/enumerate row-tracks)] + [:& track {:index idx + :key (dm/str "row-track-" idx) + :layout-data layout-data + :shape shape + :snap-pixel? snap-pixel? + :track-data row-data + :type :row + :zoom zoom + :hovering? (contains? hover-rows idx)}]) + (when-not (empty? row-tracks) + (let [last-track (last row-tracks) + start-p (:start-p last-track) + end-p (gpt/add start-p (vv (:size last-track))) + marker-p (-> (gpo/project-point bounds :v end-p) + (gpt/subtract (hv (/ 20 zoom))))] + [:g.track + [:g {:transform (dm/fmt "rotate(-90 % %)" (:x marker-p) (:y marker-p))} + [:& track-marker {:center marker-p + :index (count row-tracks) + :shape shape + :snap-pixel? snap-pixel? + :track-before (last row-tracks) + :type :row + :value (dm/str (inc (count row-tracks))) + :zoom zoom}]] + [:& resize-track-handler + {:index (count row-tracks) + :last? true + :shape shape + :layout-data layout-data + :start-p end-p + :type :row + :track-before (last row-tracks) + :snap-pixel? snap-pixel? + :zoom zoom}]]))])]))) diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss index a8043abb3..db53c71cf 100644 --- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss +++ b/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)); } }