3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-29 08:57:31 +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

20
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)
@ -508,10 +520,10 @@
(fn [[_ target-frame drop-index]] (fn [[_ target-frame drop-index]]
(let [undo-id (uuid/next)] (let [undo-id (uuid/next)]
(rx/of (dwu/start-undo-transaction undo-id) (rx/of (dwu/start-undo-transaction undo-id)
(move-shapes-to-frame ids target-frame drop-index) (move-shapes-to-frame ids target-frame drop-index)
(dwm/apply-modifiers {:undo-transation? false}) (dwm/apply-modifiers {:undo-transation? false})
(finish-transform) (finish-transform)
(dwu/commit-undo-transaction undo-id)))))))))))))) (dwu/commit-undo-transaction undo-id))))))))))))))
(s/def ::direction #{:up :down :right :left}) (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.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)]
:zoom zoom [:*
:modifiers modifiers}]) [:& 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? (when show-outlines?
[:& outline/shape-outlines [:& outline/shape-outlines