Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-13 08:11:30 -05:00
Code Issues Activity

✨ Move objects in grid with keys

Browse source
This commit is contained in:
alonso.torres 2023-05-18 11:01:02 +02:00
parent c9b932f954
commit 7e7b642e20
2 changed files with 86 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
common/src/app/common/types/shape/layout.cljc
View file

@ -584,8 +584,6 @@
:justify-self :auto :justify-self :auto
:shapes []}) :shapes []})
;; TODO: GRID ASSIGNMENTS
;; Adding a track creates the cells. We should check the shapes that are not tracked (with default values) and assign to the correct tracked values ;; Adding a track creates the cells. We should check the shapes that are not tracked (with default values) and assign to the correct tracked values
(defn add-grid-column (defn add-grid-column
[parent value] [parent value]
@ -634,7 +632,6 @@
(assoc :layout-grid-cells layout-grid-cells)))) (assoc :layout-grid-cells layout-grid-cells))))
;; TODO: SPAN NOT CHECK!!
(defn make-remove-track (defn make-remove-track
[attr track-num] [attr track-num]
(comp #(= % track-num) attr second)) (comp #(= % track-num) attr second))
@ -648,6 +645,7 @@
(update attr dec))] (update attr dec))]
[key new-val]))) [key new-val])))
;; TODO: CHECK CELLS MULTI SPAN
(defn remove-grid-column (defn remove-grid-column
[parent index] [parent index]
(let [track-num (inc index) (let [track-num (inc index)
@ -860,7 +858,6 @@
(first))) (first)))
parent))) parent)))
(defn create-cells (defn create-cells
"Create cells in an area. One cell per row/column " "Create cells in an area. One cell per row/column "
[parent [column row column-span row-span]] [parent [column row column-span row-span]]
@ -955,3 +952,30 @@
;; Not valid resize: we don't alter the layout ;; Not valid resize: we don't alter the layout
parent)) parent))
(defn get-cell-by-position
[parent target-row target-column]
(->> (:layout-grid-cells parent)
(d/seek
(fn [[_ {:keys [column row column-span row-span]}]]
(and (>= target-row row)
(>= target-column column)
(< target-column (+ column column-span))
(< target-row (+ row row-span)))))
(second)))
(defn get-cell-by-shape-id
[parent shape-id]
(->> (:layout-grid-cells parent)
(d/seek
(fn [[_ {:keys [shapes]}]]
(contains? (set shapes) shape-id)))
(second)))
(defn swap-shapes
[parent id-from id-to]
(-> parent
(assoc-in [:layout-grid-cells id-from :shapes] (dm/get-in parent [:layout-grid-cells id-to :shapes]))
(assoc-in [:layout-grid-cells id-to :shapes] (dm/get-in parent [:layout-grid-cells id-from :shapes]))))

86
frontend/src/app/main/data/workspace/transforms.cljs
View file

@ -556,57 +556,75 @@
objects (wsh/lookup-page-objects state) objects (wsh/lookup-page-objects state)
page-id (:current-page-id state) page-id (:current-page-id state)
get-new-position get-move-to-index
(fn [parent-id position] (fn [parent-id position]
(let [parent (get objects parent-id)] (let [parent (get objects parent-id)]
(cond (if (or (and (ctl/reverse? parent)
(ctl/flex-layout? parent)
(if (or
(and (ctl/reverse? parent)
(or (= direction :left) (or (= direction :left)
(= direction :up))) (= direction :up)))
(and (not (ctl/reverse? parent)) (and (not (ctl/reverse? parent))
(or (= direction :right) (or (= direction :right)
(= direction :down)))) (= direction :down))))
(dec position) (dec position)
(+ position 2)) (+ position 2))))
;; TODO: GRID move-flex-children
(ctl/grid-layout? parent) (fn [changes parent-id children]
nil
)))
add-children-position
(fn [[parent-id children]]
(let [children+position
(->> children (->> children
(keep #(let [new-position (get-new-position ;; Add the position to move the children
parent-id (map (fn [id]
(cph/get-position-on-parent objects %))] (let [position (cph/get-position-on-parent objects id)]
(when new-position [id (get-move-to-index parent-id position)])))
(vector % new-position)))) (sort-by second >)
(sort-by second >))] (reduce (fn [changes [child-id index]]
[parent-id children+position])) (pcb/change-parent changes parent-id [(get objects child-id)] index))
changes)))
change-parents-and-position move-grid-children
(->> selected (fn [changes parent-id children]
(group-by #(dm/get-in objects [% :parent-id])) (let [parent (get objects parent-id)
(map add-children-position)
(into {})) key-prop (case direction
(:up :down) :row
(:right :left) :column)
key-comp (case direction
(:up :left) <
(:down :right) >)
{:keys [layout-grid-cells]}
(->> children
(keep #(ctl/get-cell-by-shape-id parent %))
(sort-by key-prop key-comp)
(reduce (fn [parent {:keys [id row column row-span column-span]}]
(let [[next-row next-column]
(case direction
:up [(dec row) column]
:right [row (+ column column-span)]
:down [(+ row row-span) column]
:left [row (dec column)])
next-cell (ctl/get-cell-by-position parent next-row next-column)]
(cond-> parent
(some? next-cell)
(ctl/swap-shapes id (:id next-cell)))))
parent))]
(-> changes
(pcb/update-shapes [(:id parent)] (fn [shape] (assoc shape :layout-grid-cells layout-grid-cells))))))
changes changes
(->> change-parents-and-position (->> selected
(group-by #(dm/get-in objects [% :parent-id]))
(reduce (reduce
(fn [changes [parent-id children]] (fn [changes [parent-id children]]
(->> children (cond-> changes
(reduce (ctl/flex-layout? objects parent-id)
(fn [changes [child-id index]] (move-flex-children parent-id children)
(pcb/change-parent changes parent-id
[(get objects child-id)] (ctl/grid-layout? objects parent-id)
index)) (move-grid-children parent-id children)))
changes)))
(-> (pcb/empty-changes it page-id) (-> (pcb/empty-changes it page-id)
(pcb/with-objects objects)))) (pcb/with-objects objects))))
undo-id (js/Symbol)] undo-id (js/Symbol)]
(rx/of (rx/of