3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-19 22:27:29 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix frame flows issues related to the refactor

Browse source
This commit is contained in:
Andrey Antukh 2024-09-17 17:34:49 +02:00 • committed by Alonso Torres
parent 2b2a84da64
commit 4f04dbc294
4 changed files with 73 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/app/main/ui/viewer/header.cljs
View file

@ -18,7 +18,7 @@
[app.main.ui.formats :as fmt] [app.main.ui.formats :as fmt]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.viewer.comments :refer [comments-menu]] [app.main.ui.viewer.comments :refer [comments-menu]]
[app.main.ui.viewer.interactions :refer [flows-menu interactions-menu]] [app.main.ui.viewer.interactions :refer [flows-menu* interactions-menu]]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[okulary.core :as l] [okulary.core :as l]
@ -172,7 +172,7 @@
(case section (case section
:interactions [:* :interactions [:*
(when index (when index
[:& flows-menu {:page page :index index}]) [:> flows-menu* {:page page :index index}])
[:& interactions-menu {:interactions-mode interactions-mode}]] [:& interactions-menu {:interactions-mode interactions-mode}]]
:comments [:& comments-menu] :comments [:& comments-menu]
[:div {:class (stl/css :view-options)}]) [:div {:class (stl/css :view-options)}])

27
frontend/src/app/main/ui/viewer/interactions.cljs
View file

@ -218,25 +218,27 @@
:delta delta :delta delta
:fixed? fixed?}])) :fixed? fixed?}]))
(mf/defc flows-menu (mf/defc flows-menu*
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]
::mf/props :obj}
[{:keys [page index]}] [{:keys [page index]}]
(let [flows (:flows page) (let [flows (not-empty (:flows page))
frames (:frames page) frames (:frames page)
frame (get frames index) frame (get frames index)
current-flow* (mf/use-state frame-id (dm/get-prop frame :id)
#(ctp/get-frame-flow flows (:id frame)))
current-flow* (mf/use-state #(ctp/get-frame-flow flows frame-id))
current-flow (deref current-flow*) current-flow (deref current-flow*)
show-dropdown?* (mf/use-state false) show-dropdown?* (mf/use-state false)
show-dropdown? (deref show-dropdown?*) show-dropdown? (deref show-dropdown?*)
toggle-dropdown (mf/use-fn #(swap! show-dropdown?* not)) toggle-dropdown (mf/use-fn #(swap! show-dropdown?* not))
hide-dropdown (mf/use-fn #(reset! show-dropdown?* false)) hide-dropdown (mf/use-fn #(reset! show-dropdown?* false))
select-flow select-flow
(mf/use-callback (mf/use-fn
(fn [event] (fn [event]
(let [flow (-> (dom/get-current-target event) (let [flow (-> (dom/get-current-target event)
(dom/get-data "value") (dom/get-data "value")
@ -244,7 +246,7 @@
(reset! current-flow* flow) (reset! current-flow* flow)
(st/emit! (dv/go-to-frame (:starting-frame flow))))))] (st/emit! (dv/go-to-frame (:starting-frame flow))))))]
(when (seq flows) (when flows
[:div {:on-click toggle-dropdown [:div {:on-click toggle-dropdown
:class (stl/css :view-options)} :class (stl/css :view-options)}
[:span {:class (stl/css :icon)} i/play] [:span {:class (stl/css :icon)} i/play]
@ -253,15 +255,16 @@
[:& dropdown {:show show-dropdown? [:& dropdown {:show show-dropdown?
:on-close hide-dropdown} :on-close hide-dropdown}
[:ul {:class (stl/css :dropdown)} [:ul {:class (stl/css :dropdown)}
(for [[index flow] (d/enumerate flows)] (for [[flow-id flow] flows]
[:li {:key (dm/str "flow-" (:id flow) "-" index) [:li {:key (dm/str "flow-" flow-id)
:class (stl/css-case :dropdown-element true :class (stl/css-case :dropdown-element true
:selected (= (:id flow) (:id current-flow))) :selected (= flow-id (:id current-flow)))
;; This is not a best practise, is not very performant Do not reproduce ;; WARN: This is not a best practise, is not very
;; performant DO NOT COPY
:data-value (pr-str flow) :data-value (pr-str flow)
:on-click select-flow} :on-click select-flow}
[:span {:class (stl/css :label)} (:name flow)] [:span {:class (stl/css :label)} (:name flow)]
(when (= (:id flow) (:id current-flow)) (when (= flow-id (:id current-flow))
[:span {:class (stl/css :icon)} i/tick])])]]]))) [:span {:class (stl/css :icon)} i/tick])])]]])))
(mf/defc interactions-menu (mf/defc interactions-menu

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

@ -480,7 +480,7 @@
:focus focus}] :focus focus}]
(when show-prototypes? (when show-prototypes?
[:& widgets/frame-flows [:> widgets/frame-flows*
{:flows (:flows page) {:flows (:flows page)
:objects objects-modified :objects objects-modified
:selected selected :selected selected

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

@ -92,23 +92,22 @@
"#8f9da3") ;; TODO: Set this color on the DS "#8f9da3") ;; TODO: Set this color on the DS
on-pointer-down on-pointer-down
(mf/use-callback (mf/use-fn
(mf/deps (:id frame) on-frame-select workspace-read-only?) (mf/deps (:id frame) on-frame-select workspace-read-only?)
(fn [bevent] (fn [event]
(let [event (.-nativeEvent bevent)] (when (dom/left-mouse? event)
(when (= 1 (.-which event)) (dom/prevent-default event)
(dom/prevent-default bevent) (dom/stop-propagation event)
(dom/stop-propagation bevent) (on-frame-select event (:id frame)))))
(on-frame-select event (:id frame))))))
on-double-click on-double-click
(mf/use-callback (mf/use-fn
(mf/deps (:id frame)) (mf/deps (:id frame))
#(st/emit! (dw/go-to-layout :layers) #(st/emit! (dw/go-to-layout :layers)
(dw/start-rename-shape (:id frame)))) (dw/start-rename-shape (:id frame))))
on-context-menu on-context-menu
(mf/use-callback (mf/use-fn
(mf/deps frame workspace-read-only?) (mf/deps frame workspace-read-only?)
(fn [bevent] (fn [bevent]
(let [event (.-nativeEvent bevent) (let [event (.-nativeEvent bevent)
@ -119,13 +118,13 @@
(st/emit! (dw/show-shape-context-menu {:position position :shape frame})))))) (st/emit! (dw/show-shape-context-menu {:position position :shape frame}))))))
on-pointer-enter on-pointer-enter
(mf/use-callback (mf/use-fn
(mf/deps (:id frame) on-frame-enter) (mf/deps (:id frame) on-frame-enter)
(fn [_] (fn [_]
(on-frame-enter (:id frame)))) (on-frame-enter (:id frame))))
on-pointer-leave on-pointer-leave
(mf/use-callback (mf/use-fn
(mf/deps (:id frame) on-frame-leave) (mf/deps (:id frame) on-frame-leave)
(fn [_] (fn [_]
(on-frame-leave (:id frame)))) (on-frame-leave (:id frame))))
@ -221,76 +220,75 @@
:on-frame-select on-frame-select :on-frame-select on-frame-select
:grid-edition? (and (= id edition) grid-edition?)}]))])) :grid-edition? (and (= id edition) grid-edition?)}]))]))
(mf/defc frame-flow (mf/defc frame-flow*
[{:keys [flow frame selected? zoom on-frame-enter on-frame-leave on-frame-select]}] {::mf/props :obj}
(let [{:keys [x y]} frame [{:keys [flow frame is-selected zoom on-frame-enter on-frame-leave on-frame-select]}]
flow-pos (gpt/point x (- y (/ 35 zoom))) (let [x (dm/get-prop frame :x)
y (dm/get-prop frame :y)
pos (gpt/point x (- y (/ 35 zoom)))
frame-id (:id frame)
flow-id (:id flow)
flow-name (:name flow)
on-pointer-down on-pointer-down
(mf/use-callback (mf/use-fn
(mf/deps (:id frame) on-frame-select) (mf/deps frame-id on-frame-select)
(fn [bevent] (fn [event]
(let [event (.-nativeEvent bevent) (let [params {:section "interactions"
params {:section "interactions" :frame-id frame-id}]
:frame-id (:id frame)}] (when (dom/left-mouse? event)
(when (= 1 (.-which event))
(dom/prevent-default event) (dom/prevent-default event)
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dw/go-to-viewer params)))))) (st/emit! (dw/go-to-viewer params))))))
on-double-click on-double-click
(mf/use-callback (mf/use-fn
(mf/deps (:id frame)) (mf/deps flow-id)
#(st/emit! (dwi/start-rename-flow (:id flow)))) #(st/emit! (dwi/start-rename-flow flow-id)))
on-pointer-enter on-pointer-enter
(mf/use-callback (mf/use-fn
(mf/deps (:id frame) on-frame-enter) (mf/deps frame-id on-frame-enter)
(fn [_] (fn [_]
(on-frame-enter (:id frame)))) (when (fn? on-frame-enter)
(on-frame-enter frame-id))))
on-pointer-leave on-pointer-leave
(mf/use-callback (mf/use-fn
(mf/deps (:id frame) on-frame-leave) (mf/deps frame-id on-frame-leave)
(fn [_] (fn [_]
(on-frame-leave (:id frame))))] (when (fn? on-frame-leave)
(on-frame-leave frame-id))))]
[:foreignObject {:x 0 [:foreignObject {:x 0
:y -15 :y -15
:width 100000 :width 100000
:height 24 :height 24
:transform (vwu/text-transform flow-pos zoom)} :transform (vwu/text-transform pos zoom)}
[:div {:class (stl/css-case :flow-badge true [:div {:class (stl/css-case :flow-badge true
:selected selected?)} :selected is-selected)}
[:div {:class (stl/css :content) [:div {:class (stl/css :content)
:on-pointer-down on-pointer-down :on-pointer-down on-pointer-down
:on-double-click on-double-click :on-double-click on-double-click
:on-pointer-enter on-pointer-enter :on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave} :on-pointer-leave on-pointer-leave}
i/play i/play
[:span (:name flow)]]]])) [:span flow-name]]]]))
(mf/defc frame-flows (mf/defc frame-flows*
{::mf/wrap-props false} {::mf/props :obj}
[props] [{:keys [flows objects zoom selected on-frame-enter on-frame-leave on-frame-select]}]
(let [flows (unchecked-get props "flows") [:g.frame-flows
objects (unchecked-get props "objects") (for [[flow-id flow] flows]
zoom (unchecked-get props "zoom") (let [frame (get objects (:starting-frame flow))
selected (or (unchecked-get props "selected") #{}) frame-id (dm/get-prop frame :id)]
[:> frame-flow* {:key (dm/str frame-id "-" flow-id)
on-frame-enter (unchecked-get props "on-frame-enter") :flow flow
on-frame-leave (unchecked-get props "on-frame-leave") :frame frame
on-frame-select (unchecked-get props "on-frame-select")] :is-selected (contains? selected frame-id)
[:g.frame-flows :zoom zoom
;; FIXME: enumerate is not necessary here :on-frame-enter on-frame-enter
(for [[index flow] (d/enumerate flows)] :on-frame-leave on-frame-leave
(let [frame (get objects (:starting-frame flow))] :on-frame-select on-frame-select}]))])
[:& frame-flow {:key (dm/str (:id frame) "-" index)
:flow flow
:frame frame
:selected? (contains? selected (:id frame))
:zoom zoom
:on-frame-enter on-frame-enter
:on-frame-leave on-frame-leave
:on-frame-select on-frame-select}]))]))