3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-29 11:57:26 +02:00
Code Issues Projects Releases Packages Wiki 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
Download patch file Download diff file Expand all files Collapse all files

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

@ -28,6 +28,7 @@
[app.main.data.workspace.undo :as dwu] [app.main.data.workspace.undo :as dwu]
[app.main.snap :as snap] [app.main.snap :as snap]
[app.main.streams :as ms] [app.main.streams :as ms]
[app.util.dom :as dom]
[beicon.core :as rx] [beicon.core :as rx]
[cljs.spec.alpha :as s] [cljs.spec.alpha :as s]
[potok.core :as ptk])) [potok.core :as ptk]))
@ -415,6 +416,14 @@
(rx/take 1) (rx/take 1)
(rx/map #(start-move from-position)))))) (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 (defn- start-move
([from-position] (start-move from-position nil)) ([from-position] (start-move from-position nil))
([from-position ids] ([from-position ids]
@ -501,6 +510,9 @@
(dwm/build-change-frame-modifiers objects selected target-frame drop-index) (dwm/build-change-frame-modifiers objects selected target-frame drop-index)
(dwm/set-modifiers))))) (dwm/set-modifiers)))))
(->> move-stream
(rx/map (comp set-ghost-displacement first)))
;; Last event will write the modifiers creating the changes ;; Last event will write the modifiers creating the changes
(->> move-stream (->> move-stream
(rx/last) (rx/last)

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

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