Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 07:29:08 -05:00
Code Issues Activity

✨ Show ghost when moving elemets from/into layout

Browse source
This commit is contained in:
alonso.torres 2022-12-13 16:48:04 +01:00
parent 03228a9801
commit 5aaaab4f80
2 changed files with 36 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -28,6 +28,7 @@
[app.main.data.workspace.undo :as dwu]
[app.main.snap :as snap]
[app.main.streams :as ms]
[app.util.dom :as dom]
[beicon.core :as rx]
[cljs.spec.alpha :as s]
[potok.core :as ptk]))
@ -415,6 +416,14 @@
(rx/take 1)
(rx/map #(start-move from-position))))))
(defn set-ghost-displacement
[move-vector]
(ptk/reify ::set-ghost-displacement
ptk/EffectEvent
(effect [_ _ _]
(when-let [node (dom/get-element-by-class "ghost-outline")]
(dom/set-property! node "transform" (gmt/translate-matrix move-vector))))))
(defn- start-move
([from-position] (start-move from-position nil))
([from-position ids]
@ -501,6 +510,9 @@
(dwm/build-change-frame-modifiers objects selected target-frame drop-index)
(dwm/set-modifiers)))))
(->> move-stream
(rx/map (comp set-ghost-displacement first)))
;; Last event will write the modifiers creating the changes
(->> move-stream
(rx/last)
@ -508,10 +520,10 @@
(fn [[_ target-frame drop-index]]
(let [undo-id (uuid/next)]
(rx/of (dwu/start-undo-transaction undo-id)
(move-shapes-to-frame ids target-frame drop-index)
(dwm/apply-modifiers {:undo-transation? false})
(finish-transform)
(dwu/commit-undo-transaction undo-id))))))))))))))
(move-shapes-to-frame ids target-frame drop-index)
(dwm/apply-modifiers {:undo-transation? false})
(finish-transform)
(dwu/commit-undo-transaction undo-id))))))))))))))
(s/def ::direction #{:up :down :right :left})

28
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -11,6 +11,7 @@
[app.common.data.macros :as dm]
[app.common.geom.shapes :as gsh]
[app.common.pages.helpers :as cph]
[app.common.types.shape.layout :as ctl]
[app.main.refs :as refs]
[app.main.ui.context :as ctx]
[app.main.ui.hooks :as ui-hooks]
@ -293,14 +294,25 @@
:modifiers modifiers}])
(when show-frame-outline?
[:& outline/shape-outlines
{:objects objects-modified
:hover #{(->> @hover-ids
(filter #(cph/frame-shape? (get base-objects %)))
(remove selected)
(first))}
:zoom zoom
:modifiers modifiers}])
(let [outlined-frame-id
(->> @hover-ids
(filter #(cph/frame-shape? (get base-objects %)))
(remove selected)
(first))
outlined-frame (get objects outlined-frame-id)]
[:*
[:& outline/shape-outlines
{:objects objects-modified
:hover #{outlined-frame-id}
:zoom zoom
:modifiers modifiers}]
(when (ctl/layout? outlined-frame)
[:g.ghost-outline
[:& outline/shape-outlines
{:objects base-objects
:selected selected
:zoom zoom}]])]))
(when show-outlines?
[:& outline/shape-outlines