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

✨ Add missing user experience events

Browse source
This commit is contained in:
María Valderrama 2025-05-22 12:30:54 +02:00 • committed by Andrey Antukh
parent 54643b79f6
commit cb46d643ac
9 changed files with 126 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

37
frontend/src/app/main/data/event.cljs
View file

@ -8,6 +8,7 @@
(:require
["ua-parser-js" :as ua]
[app.common.data :as d]
[app.common.files.helpers :as cfh]
[app.common.json :as json]
[app.common.logging :as l]
[app.config :as cf]
@ -242,3 +243,39 @@
(l/error :hint "error on event batching stream" :cause cause))
(fn []
(l/debug :hitn "events batching stream terminated")))))))))
;; ---- HELPERS
(defn get-shape-type
"Returns the type of the shape, or Empty if it's Root Frame"
[objects id]
(let [shape (get objects id)]
(if (cfh/root? shape)
"Empty"
(:type shape))))
(defn frame-has-layout
"Returns true if the provided frame has a layout."
[objects id]
(let [frame (get objects id)]
(boolean (and frame (:layout frame)))))
(defn get-shape-event-name
"Returns the event name corresponding to a shape type, or nil if no match."
[shape]
(cond
(cfh/frame-shape? shape) "create-board"
(cfh/image-shape? shape) "create-image"
(cfh/path-shape? shape) "create-path"
(cfh/circle-shape? shape) "create-circle"
(cfh/rect-shape? shape) "create-rectangle"
(cfh/text-shape? shape) "create-text"
:else nil))
(defn get-selected-type
"Returns the type of the shape if only one, or multiple if more than one"
[objects selected]
(if (= 1 (count selected))
(let [shape (get objects (first selected))]
(:type shape))
"multiple"))

5
frontend/src/app/main/data/viewer.cljs
View file

@ -80,8 +80,9 @@
(rx/of (fetch-bundle (d/without-nils params))
;; Only fetch threads for logged-in users
(when (some? (:profile state))
(fetch-comment-threads params))))
(fetch-comment-threads params))
(when (:share-id params)
(rx/of (ptk/event ::ev/event {::ev/name "shared-prototipe-visited"})))))
ptk/EffectEvent
(effect [_ _ _]
;; Set the window name, the window name is used on inter-tab

22
frontend/src/app/main/data/workspace/clipboard.cljs
View file

@ -902,13 +902,27 @@
undo-id (js/Symbol)]
(rx/concat
(->> (filter ctc/instance-head? orig-shapes)
(map (fn [{:keys [component-file]}]
(->> orig-shapes
(keep (fn [shape]
(if (ctc/instance-head? shape)
(ptk/event ::ev/event
{::ev/name "use-library-component"
::ev/origin "paste"
:external-library (not= file-id component-file)})))
(rx/from))
:external-library (not= file-id (:component-file shape))
:parent-type (ev/get-shape-type all-objects (:parent-id shape))})
(when (ev/get-shape-event-name shape)
(if (ev/frame-has-layout all-objects (:parent-id shape))
(ptk/event ::ev/event
{::ev/name "layout-add-element"
:element-type (:type shape)
:source "paste"
:parent-type (ev/get-shape-type all-objects (:parent-id shape))})
(ptk/event ::ev/event
{::ev/name (ev/get-shape-event-name shape)
:parent-type (ev/get-shape-type all-objects (:parent-id shape))
:source "paste"})))))))
(rx/of (dwu/start-undo-transaction undo-id)
(dch/commit-changes changes)
(dws/select-shapes selected)

7
frontend/src/app/main/data/workspace/interactions.cljs
View file

@ -62,6 +62,8 @@
(defn add-flow-selected-frame
[]
(ptk/reify ::add-flow-selected-frame
ev/Event
(-data [_] {::ev/name "add-prototype-interaction"})
ptk/WatchEvent
(watch [_ state _]
(let [selected (dsh/lookup-selected state)]
@ -187,9 +189,10 @@
(when (and (not (connected-frame? objects (:id frame)))
(nil? flow))
(rx/of (add-flow (:id frame))))
(when first?
(if first?
;; When the first interaction of the page is created we emit the event "create-prototype"
(rx/of (ptk/event ::ev/event {::ev/name "create-prototype"})))))))))
(rx/of (ptk/event ::ev/event {::ev/name "create-prototype"}))
(rx/of (ptk/event ::ev/event {::ev/name "add-prototype-interaction"})))))))))
(defn remove-interaction
([shape index]

17
frontend/src/app/main/data/workspace/selection.cljs
View file

@ -480,12 +480,23 @@
undo-id (js/Symbol)]
(rx/concat
(->> (map (d/getf objects) ids)
(filter ctk/instance-head?)
(map (fn [{:keys [component-file]}]
(keep (fn [shape]
(if (ctk/instance-head? shape)
(ptk/event ::ev/event
{::ev/name "use-library-component"
::ev/origin "duplicate"
:external-library (not= file-id component-file)})))
:parent-type (ev/get-shape-type objects (:parent-id shape))
:external-library (not= file-id (:component-file shape))})
(when-let [event-name (ev/get-shape-event-name shape)]
(if (ev/frame-has-layout objects (:parent-id shape))
(ptk/event ::ev/event
{::ev/name "layout-add-element"
:element-type (:type shape)
:source "duplicate"})
(ptk/event ::ev/event
{::ev/name event-name
:parent-type (ev/get-shape-type objects (:parent-id shape))
:source "duplicate"}))))))
(rx/from))
;; Warning: This order is important for the focus mode.
(->> (rx/of

8
frontend/src/app/main/data/workspace/shape_layout.cljs
View file

@ -294,7 +294,13 @@
(seq padding-attrs)
(assoc :changed-sub-attr padding-attrs)))
(ptk/data-event :layout/update {:ids ids})
(dwu/commit-undo-transaction undo-id)))))))
(dwu/commit-undo-transaction undo-id)
(when (or (:layout-align-content changes) (:layout-justify-content changes))
(ptk/event ::ev/event
{::ev/name "layout-change-alignment"}))
(when (or (:layout-padding changes) (:layout-gap changes))
(ptk/event ::ev/event
{::ev/name "layout-change-margin"}))))))))
(defn add-layout-track
([ids type value]

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

@ -142,8 +142,20 @@
(when (cfh/text-shape? shape)
(->> (rx/of (dwe/start-edition-mode (:id shape)))
(rx/observe-on :async)))
(when (cfh/frame-shape? shape)
(rx/of (ptk/event ::ev/event {::ev/name "add-frame"})))))))))
(when-let [event-name (ev/get-shape-event-name shape)]
(if (ev/frame-has-layout objects (:parent-id shape))
(rx/of
(ptk/event ::ev/event
{::ev/name "layout-add-element"
:element-type (:type shape)
:source "new"}))
(rx/of
(ptk/event ::ev/event
{::ev/name event-name
:parent-type (ev/get-shape-type objects (:parent-id shape))
:source "new"}))))))))))
(defn move-shapes-into-frame
[frame-id shapes]
@ -284,6 +296,10 @@
(dch/commit-changes changes)
(dws/select-shapes (d/ordered-set (:id frame-shape)))
(ptk/data-event :layout/update {:ids [(:id frame-shape)]})
(ptk/event ::ev/event
{::ev/name "create-board"
:converted-from (ev/get-selected-type objects selected)
:parent-type (ev/get-shape-type objects (:parent-id frame-shape))})
(dwu/commit-undo-transaction undo-id))))))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

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

@ -28,6 +28,7 @@
[app.common.types.shape.layout :as ctl]
[app.common.uuid :as uuid]
[app.main.data.changes :as dch]
[app.main.data.event :as ev]
[app.main.data.helpers :as dsh]
[app.main.data.workspace.collapse :as dwc]
[app.main.data.workspace.modifiers :as dwm]
@ -1083,9 +1084,21 @@
ids
:cell cell))]
(rx/concat
(let [shapes (mapv #(get objects %) ids)
moved-count (count (filter #(not= (:parent-id %) frame-id) shapes))
emit-layout-event? (and (ev/frame-has-layout objects frame-id)
(pos? moved-count))]
(when emit-layout-event?
(rx/of (ptk/event ::ev/event
{::ev/name "layout-add-element"
:source "move-shapes-to-frame"
:element-type (ev/get-selected-type objects ids)
:moved moved-count}))))
(when (and (some? frame-id) (d/not-empty? changes))
(rx/of (dch/commit-changes changes)
(dwc/expand-collapse frame-id)))))))
(dwc/expand-collapse frame-id))))))))
(defn- get-displacement
"Retrieve the correct displacement delta point for the

3
frontend/src/app/main/ui/inspect/right_sidebar.cljs
View file

@ -110,7 +110,8 @@
(mf/use-effect
(mf/deps shapes handle-change-tab)
(fn []
(when-not (seq shapes)
(if (seq shapes)
(st/emit! (ptk/event ::ev/event {::ev/name "inspect-mode-click-element"}))
(handle-change-tab :info))))
[:aside {:class (stl/css-case :settings-bar-right true