Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 04:49:03 -05:00
Code Issues Activity

🐛 Fix problems with drag/drop in layers

Browse source
This commit is contained in:
alonso.torres 2024-01-08 18:10:18 +01:00
parent 9007371ab5
commit 2705876c56
2 changed files with 23 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
View file

@ -261,16 +261,29 @@
on-drop
(mf/use-fn
(mf/deps id index objects)
(mf/deps id index objects expanded?)
(fn [side _data]
(let [to-index (cond
(= side :center) 0
(= side :top) (inc index)
:else index)
parent-id (if (= side :center)
(let [shape (get objects id)
parent-id
(cond
(= side :center)
id
(and expanded? (= side :bot) (d/not-empty? (:shapes shape)))
id
:else
(cfh/get-parent-id objects id))
parent (get objects parent-id)]
parent (get objects parent-id)
to-index (cond
(= side :center) 0
(and expanded? (= side :bot) (d/not-empty? (:shapes shape))) (count (:shapes parent))
(= side :top) (inc index)
:else index)]
(when-not (ctk/in-component-copy? parent) ;; We don't want to change the structure of component copies
(st/emit! (dw/relocate-selected-shapes parent-id to-index))))))
@ -308,8 +321,8 @@
depth (+ depth 1)
component-tree? (or component-child? (:component-root item))
enable-drag (mf/use-fn #(reset! drag-disabled* true))
disable-drag (mf/use-fn #(reset! drag-disabled* false))]
enable-drag (mf/use-fn #(reset! drag-disabled* false))
disable-drag (mf/use-fn #(reset! drag-disabled* true))]
(mf/with-effect [selected? selected]
(let [single? (= (count selected) 1)

2
frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
View file

@ -51,7 +51,7 @@
border-bottom: $s-2 solid var(--layer-row-foreground-color-hover);
}
&.dnd-over-top {
border-bottom: $s-2 solid var(--layer-row-foreground-color-hover);
border-top: $s-2 solid var(--layer-row-foreground-color-hover);
}
&.dnd-over {
border: $s-2 solid var(--layer-row-foreground-color-hover);