mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 00:01:51 -05:00
✨ Move objects in grid with keys
This commit is contained in:
alonso.torres
parent
c9b932f954
commit
7e7b642e20
2 changed files with 86 additions and 44 deletions
|
|
@ -584,8 +584,6 @@
|
|||
:justify-self :auto
|
||||
: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
|
||||
(defn add-grid-column
|
||||
[parent value]
|
||||
|
|
@ -634,7 +632,6 @@
|
|||
(assoc :layout-grid-cells layout-grid-cells))))
|
||||
|
||||
|
||||
;; TODO: SPAN NOT CHECK!!
|
||||
(defn make-remove-track
|
||||
[attr track-num]
|
||||
(comp #(= % track-num) attr second))
|
||||
|
|
@ -648,6 +645,7 @@
|
|||
(update attr dec))]
|
||||
[key new-val])))
|
||||
|
||||
;; TODO: CHECK CELLS MULTI SPAN
|
||||
(defn remove-grid-column
|
||||
[parent index]
|
||||
(let [track-num (inc index)
|
||||
|
|
@ -860,7 +858,6 @@
|
|||
(first)))
|
||||
parent)))
|
||||
|
||||
|
||||
(defn create-cells
|
||||
"Create cells in an area. One cell per row/column "
|
||||
[parent [column row column-span row-span]]
|
||||
|
|
@ -955,3 +952,30 @@
|
|||
|
||||
;; Not valid resize: we don't alter the layout
|
||||
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]))))
|
||||
|
|
|
|||
|
|
@ -556,57 +556,75 @@
|
|||
objects (wsh/lookup-page-objects state)
|
||||
page-id (:current-page-id state)
|
||||
|
||||
get-new-position
|
||||
get-move-to-index
|
||||
(fn [parent-id position]
|
||||
(let [parent (get objects parent-id)]
|
||||
(cond
|
||||
(ctl/flex-layout? parent)
|
||||
(if (or
|
||||
(and (ctl/reverse? parent)
|
||||
(or (= direction :left)
|
||||
(= direction :up)))
|
||||
(and (not (ctl/reverse? parent))
|
||||
(or (= direction :right)
|
||||
(= direction :down))))
|
||||
(dec position)
|
||||
(+ position 2))
|
||||
(if (or (and (ctl/reverse? parent)
|
||||
(or (= direction :left)
|
||||
(= direction :up)))
|
||||
(and (not (ctl/reverse? parent))
|
||||
(or (= direction :right)
|
||||
(= direction :down))))
|
||||
(dec position)
|
||||
(+ position 2))))
|
||||
|
||||
;; TODO: GRID
|
||||
(ctl/grid-layout? parent)
|
||||
nil
|
||||
)))
|
||||
move-flex-children
|
||||
(fn [changes parent-id children]
|
||||
(->> children
|
||||
;; Add the position to move the children
|
||||
(map (fn [id]
|
||||
(let [position (cph/get-position-on-parent objects id)]
|
||||
[id (get-move-to-index parent-id position)])))
|
||||
(sort-by second >)
|
||||
(reduce (fn [changes [child-id index]]
|
||||
(pcb/change-parent changes parent-id [(get objects child-id)] index))
|
||||
changes)))
|
||||
|
||||
add-children-position
|
||||
(fn [[parent-id children]]
|
||||
(let [children+position
|
||||
move-grid-children
|
||||
(fn [changes parent-id children]
|
||||
(let [parent (get objects parent-id)
|
||||
|
||||
key-prop (case direction
|
||||
(:up :down) :row
|
||||
(:right :left) :column)
|
||||
key-comp (case direction
|
||||
(:up :left) <
|
||||
(:down :right) >)
|
||||
|
||||
{:keys [layout-grid-cells]}
|
||||
(->> children
|
||||
(keep #(let [new-position (get-new-position
|
||||
parent-id
|
||||
(cph/get-position-on-parent objects %))]
|
||||
(when new-position
|
||||
(vector % new-position))))
|
||||
(sort-by second >))]
|
||||
[parent-id children+position]))
|
||||
|
||||
change-parents-and-position
|
||||
(->> selected
|
||||
(group-by #(dm/get-in objects [% :parent-id]))
|
||||
(map add-children-position)
|
||||
(into {}))
|
||||
(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
|
||||
(->> change-parents-and-position
|
||||
(->> selected
|
||||
(group-by #(dm/get-in objects [% :parent-id]))
|
||||
(reduce
|
||||
(fn [changes [parent-id children]]
|
||||
(->> children
|
||||
(reduce
|
||||
(fn [changes [child-id index]]
|
||||
(pcb/change-parent changes parent-id
|
||||
[(get objects child-id)]
|
||||
index))
|
||||
changes)))
|
||||
(cond-> changes
|
||||
(ctl/flex-layout? objects parent-id)
|
||||
(move-flex-children parent-id children)
|
||||
|
||||
(ctl/grid-layout? objects parent-id)
|
||||
(move-grid-children parent-id children)))
|
||||
|
||||
(-> (pcb/empty-changes it page-id)
|
||||
(pcb/with-objects objects))))
|
||||
|
||||
undo-id (js/Symbol)]
|
||||
|
||||
(rx/of
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue