mirror of
https://github.com/penpot/penpot.git
synced 2025-07-26 06:27:20 +02:00
✨ Move shapes in grid
This commit is contained in:
alonso.torres
parent
2df40ad767
commit
43d1f676ef
7 changed files with 227 additions and 37 deletions
|
|
@ -175,8 +175,28 @@
|
|||
(update-in modif-tree [parent-id :modifiers] ctm/remove-children [child-id])))
|
||||
modif-tree)))
|
||||
|
||||
(defn add-grid-children-modifiers
|
||||
[modifiers frame-id selected objects [row column :as cell]]
|
||||
(let [frame (get objects frame-id)
|
||||
|
||||
;; Temporary remove the children when moving them
|
||||
frame (-> frame
|
||||
(update :shapes #(d/removev selected %))
|
||||
(ctl/assign-cells))
|
||||
|
||||
frame (-> frame
|
||||
(update :shapes d/concat-vec selected)
|
||||
(cond-> (some? cell)
|
||||
(ctl/push-into-cell selected row column))
|
||||
(ctl/assign-cells))]
|
||||
|
||||
(-> modifiers
|
||||
(ctm/change-property :layout-grid-rows (:layout-grid-rows frame))
|
||||
(ctm/change-property :layout-grid-columns (:layout-grid-columns frame))
|
||||
(ctm/change-property :layout-grid-cells (:layout-grid-cells frame)))))
|
||||
|
||||
(defn build-change-frame-modifiers
|
||||
[modif-tree objects selected target-frame-id drop-index]
|
||||
[modif-tree objects selected target-frame-id drop-index cell-data]
|
||||
|
||||
(let [origin-frame-ids (->> selected (group-by #(get-in objects [% :frame-id])))
|
||||
child-set (set (get-in objects [target-frame-id :shapes]))
|
||||
|
|
@ -209,8 +229,10 @@
|
|||
children-ids (->> (dm/get-in objects [original-frame :shapes])
|
||||
(remove (set selected)))
|
||||
|
||||
h-sizing? (ctl/change-h-sizing? original-frame objects children-ids)
|
||||
v-sizing? (ctl/change-v-sizing? original-frame objects children-ids)]
|
||||
h-sizing? (and (ctl/flex-layout? objects original-frame)
|
||||
(ctl/change-h-sizing? original-frame objects children-ids))
|
||||
v-sizing? (and (ctl/flex-layout? objects original-frame)
|
||||
(ctl/change-v-sizing? original-frame objects children-ids))]
|
||||
(cond-> modif-tree
|
||||
(not= original-frame target-frame-id)
|
||||
(-> (modifier-remove-from-parent objects shapes)
|
||||
|
|
@ -227,11 +249,19 @@
|
|||
(as-> modif-tree $
|
||||
(reduce update-frame-modifiers $ origin-frame-ids)
|
||||
(cond-> $
|
||||
(ctl/change-h-sizing? target-frame-id objects children-ids)
|
||||
(update-in [target-frame-id :modifiers] ctm/change-property :layout-item-h-sizing :fix))
|
||||
(cond-> $
|
||||
(ctl/change-v-sizing? target-frame-id objects children-ids)
|
||||
(update-in [target-frame-id :modifiers] ctm/change-property :layout-item-v-sizing :fix)))))
|
||||
;; Set fix position to target frame (horizontal)
|
||||
(and (ctl/flex-layout? objects target-frame-id)
|
||||
(ctl/change-h-sizing? target-frame-id objects children-ids))
|
||||
(update-in [target-frame-id :modifiers] ctm/change-property :layout-item-h-sizing :fix)
|
||||
|
||||
;; Set fix position to target frame (vertical)
|
||||
(and (ctl/flex-layout? objects target-frame-id)
|
||||
(ctl/change-v-sizing? target-frame-id objects children-ids))
|
||||
(update-in [target-frame-id :modifiers] ctm/change-property :layout-item-v-sizing :fix)
|
||||
|
||||
;; Add the object to the cell
|
||||
(ctl/grid-layout? objects target-frame-id)
|
||||
(update-in [target-frame-id :modifiers] add-grid-children-modifiers target-frame-id selected objects cell-data)))))
|
||||
|
||||
(defn modif->js
|
||||
[modif-tree objects]
|
||||
|
|
@ -454,6 +484,9 @@
|
|||
:layout-gap
|
||||
:layout-item-margin
|
||||
:layout-item-margin-type
|
||||
:layout-grid-cells
|
||||
:layout-grid-columns
|
||||
:layout-grid-rows
|
||||
]})
|
||||
;; We've applied the text-modifier so we can dissoc the temporary data
|
||||
(fn [state]
|
||||
|
|
|
|||
|
|
@ -490,10 +490,9 @@
|
|||
target-frame (ctst/top-nested-frame objects position exclude-frames)
|
||||
flex-layout? (ctl/flex-layout? objects target-frame)
|
||||
grid-layout? (ctl/grid-layout? objects target-frame)
|
||||
drop-index (cond
|
||||
flex-layout? (gslf/get-drop-index target-frame objects position)
|
||||
grid-layout? (gslg/get-drop-index target-frame objects position))]
|
||||
[move-vector target-frame drop-index])))
|
||||
drop-index (when flex-layout? (gslf/get-drop-index target-frame objects position))
|
||||
cell-data (when grid-layout? (gslg/get-drop-cell target-frame objects position))]
|
||||
[move-vector target-frame drop-index cell-data])))
|
||||
|
||||
(rx/take-until stopper))]
|
||||
|
||||
|
|
@ -502,7 +501,7 @@
|
|||
(->> move-stream
|
||||
(rx/with-latest-from ms/mouse-position-shift)
|
||||
(rx/map
|
||||
(fn [[[move-vector target-frame drop-index] shift?]]
|
||||
(fn [[[move-vector target-frame drop-index cell-data] shift?]]
|
||||
(let [x-disp? (> (mth/abs (:x move-vector)) (mth/abs (:y move-vector)))
|
||||
[move-vector snap-ignore-axis]
|
||||
(cond
|
||||
|
|
@ -516,7 +515,7 @@
|
|||
[move-vector nil])]
|
||||
|
||||
(-> (dwm/create-modif-tree ids (ctm/move-modifiers move-vector))
|
||||
(dwm/build-change-frame-modifiers objects selected target-frame drop-index)
|
||||
(dwm/build-change-frame-modifiers objects selected target-frame drop-index cell-data)
|
||||
(dwm/set-modifiers false false {:snap-ignore-axis snap-ignore-axis}))))))
|
||||
|
||||
(->> move-stream
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
[app.main.data.workspace.shape-layout :as dwsl]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.workspace.viewport.viewport-ref :as uwvv]
|
||||
[app.util.dom :as dom]
|
||||
[cuerdas.core :as str]
|
||||
[rumext.v2 :as mf]))
|
||||
|
|
@ -153,18 +154,20 @@
|
|||
(mf/use-callback
|
||||
(mf/deps on-drag-start)
|
||||
(fn [event]
|
||||
(let [position (dom/get-client-position event)]
|
||||
(let [raw-pt (dom/get-client-position event)
|
||||
position (uwvv/point->viewport raw-pt)]
|
||||
(dom/capture-pointer event)
|
||||
(mf/set-ref-val! dragging-ref true)
|
||||
(mf/set-ref-val! start-pos-ref position)
|
||||
(mf/set-ref-val! current-pos-ref position)
|
||||
(mf/set-ref-val! start-pos-ref raw-pt)
|
||||
(mf/set-ref-val! current-pos-ref raw-pt)
|
||||
(when on-drag-start (on-drag-start position)))))
|
||||
|
||||
handle-lost-pointer-capture
|
||||
(mf/use-callback
|
||||
(mf/deps on-drag-end)
|
||||
(fn [event]
|
||||
(let [position (mf/ref-val current-pos-ref)]
|
||||
(let [raw-pt (mf/ref-val current-pos-ref)
|
||||
position (uwvv/point->viewport raw-pt)]
|
||||
(dom/release-pointer event)
|
||||
(mf/set-ref-val! dragging-ref false)
|
||||
(mf/set-ref-val! start-pos-ref nil)
|
||||
|
|
@ -175,10 +178,11 @@
|
|||
(fn [event]
|
||||
(when (mf/ref-val dragging-ref)
|
||||
(let [start (mf/ref-val start-pos-ref)
|
||||
pos (dom/get-client-position event)]
|
||||
pos (dom/get-client-position event)
|
||||
pt (uwvv/point->viewport pos)]
|
||||
(mf/set-ref-val! current-pos-ref pos)
|
||||
(when on-drag-delta (on-drag-delta (gpt/to-vec start pos)))
|
||||
(when on-drag-position (on-drag-position pos))))))]
|
||||
(when on-drag-position (on-drag-position pt))))))]
|
||||
|
||||
{:handle-pointer-down handle-pointer-down
|
||||
:handle-lost-pointer-capture handle-lost-pointer-capture
|
||||
|
|
@ -192,15 +196,16 @@
|
|||
width (unchecked-get props "width")
|
||||
height (unchecked-get props "height")
|
||||
direction (unchecked-get props "direction")
|
||||
layout-data (unchecked-get props "layout-data")
|
||||
cursor (if (= direction :row) (cur/scale-ns 0) (cur/scale-ew 0))
|
||||
|
||||
handle-drag-delta
|
||||
handle-drag-position
|
||||
(mf/use-callback
|
||||
(fn [delta]
|
||||
(prn ">>>" delta)))
|
||||
(fn [position]
|
||||
(prn ">>>" (gsg/get-position-grid-coord layout-data position))))
|
||||
|
||||
{:keys [handle-pointer-down handle-lost-pointer-capture handle-pointer-move]}
|
||||
(use-drag {:on-drag-delta handle-drag-delta})]
|
||||
(use-drag {:on-drag-position handle-drag-position})]
|
||||
|
||||
[:rect
|
||||
{:x x
|
||||
|
|
@ -218,7 +223,8 @@
|
|||
[props]
|
||||
(let [shape (unchecked-get props "shape")
|
||||
|
||||
{:keys [origin row-tracks column-tracks layout-bounds]} (unchecked-get props "layout-data")
|
||||
{:keys [origin row-tracks column-tracks layout-bounds] :as layout-data}
|
||||
(unchecked-get props "layout-data")
|
||||
|
||||
zoom (unchecked-get props "zoom")
|
||||
|
||||
|
|
@ -278,7 +284,8 @@
|
|||
:y y
|
||||
:width width
|
||||
:height height
|
||||
:direction dir}])]))]))
|
||||
:direction dir
|
||||
:layout-data layout-data}])]))]))
|
||||
|
||||
(mf/defc resize-handler
|
||||
{::mf/wrap-props false}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue