github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-01 19:06:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ Differentiate incoming and outgoing interaction link colors (#8923)

Browse Source 
* ✨ Color incoming and outgoing interaction links differently

* 🐛 Fix lint

---------

Signed-off-by: Clayton <claytonlin1110@gmail.com>
Co-authored-by: Andrey Antukh <niwi@niwi.nz>
This commit is contained in:
Clayton 2026-04-14 06:30:22 -05:00 committed by GitHub
parent 7c3a1a905e
commit 39b0e011fc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/app/main/ui/workspace/viewport/interactions.cljs
View File

@ -33,6 +33,10 @@
:move-overlay-index]) :move-overlay-index])
refs/workspace-local =)) refs/workspace-local =))
(def ^:private outgoing-link-color "var(--color-accent-tertiary)")
(def ^:private incoming-link-color "var(--color-accent-quaternary)")
(def ^:private neutral-link-color "var(--df-secondary)")
(defn- on-pointer-down (defn- on-pointer-down
[event index {:keys [id] :as shape}] [event index {:keys [id] :as shape}]
(dom/stop-propagation event) (dom/stop-propagation event)
@ -139,7 +143,7 @@
(mf/defc interaction-path (mf/defc interaction-path
[{:keys [index level orig-shape dest-shape dest-point selected? action-type zoom] :as props}] [{:keys [index level orig-shape dest-shape dest-point selected selected? action-type zoom] :as props}]
(let [[orig-pos orig-x orig-y dest-pos dest-x dest-y] (let [[orig-pos orig-x orig-y dest-pos dest-x dest-y]
(cond (cond
dest-shape dest-shape
@ -160,11 +164,17 @@
path ["M" orig-x orig-y "C" (+ orig-x orig-dx) orig-y (+ dest-x dest-dx) dest-y dest-x dest-y] path ["M" orig-x orig-y "C" (+ orig-x orig-dx) orig-y (+ dest-x dest-dx) dest-y dest-x dest-y]
pdata (str/join " " path) pdata (str/join " " path)
arrow-dir (if (= dest-pos :left) :right :left)] arrow-dir (if (= dest-pos :left) :right :left)
incoming? (and (some? dest-shape)
(contains? selected (:id dest-shape)))
stroke-color (cond
selected? outgoing-link-color
incoming? incoming-link-color
:else neutral-link-color)]
(if-not selected? (if-not selected?
[:g {:on-pointer-down #(on-pointer-down % index orig-shape)} [:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
[:path {:stroke "var(--df-secondary)" [:path {:stroke stroke-color
:fill "none" :fill "none"
:pointer-events "visible" :pointer-events "visible"
:stroke-width (/ 2 zoom) :stroke-width (/ 2 zoom)
@ -173,13 +183,13 @@
[:& interaction-marker {:index index [:& interaction-marker {:index index
:x dest-x :x dest-x
:y dest-y :y dest-y
:stroke "var(--df-secondary)" :stroke stroke-color
:action-type action-type :action-type action-type
:arrow-dir arrow-dir :arrow-dir arrow-dir
:zoom zoom}])] :zoom zoom}])]
[:g {:on-pointer-down #(on-pointer-down % index orig-shape)} [:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
[:path {:stroke "var(--color-accent-tertiary)" [:path {:stroke stroke-color
:fill "none" :fill "none"
:pointer-events "visible" :pointer-events "visible"
:stroke-width (/ 2 zoom) :stroke-width (/ 2 zoom)
@ -188,17 +198,17 @@
(when dest-shape (when dest-shape
[:& outline {:zoom zoom [:& outline {:zoom zoom
:shape dest-shape :shape dest-shape
:color "var(--color-accent-tertiary)"}]) :color stroke-color}])
[:& interaction-marker {:index index [:& interaction-marker {:index index
:x orig-x :x orig-x
:y orig-y :y orig-y
:stroke "var(--color-accent-tertiary)" :stroke stroke-color
:zoom zoom}] :zoom zoom}]
[:& interaction-marker {:index index [:& interaction-marker {:index index
:x dest-x :x dest-x
:y dest-y :y dest-y
:stroke "var(--color-accent-tertiary)" :stroke stroke-color
:action-type action-type :action-type action-type
:arrow-dir arrow-dir :arrow-dir arrow-dir
:zoom zoom}]]))) :zoom zoom}]])))