0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-16 01:31:22 -05:00

🐛 Fix some issues with grid

This commit is contained in:
alonso.torres 2023-09-29 15:43:22 +02:00
parent 7fd02022ac
commit a0c79fc038
5 changed files with 169 additions and 155 deletions

View file

@ -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.

View file

@ -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))

View file

@ -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

View file

@ -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}]]))])])))

View file

@ -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));
}
}