mirror of
https://github.com/penpot/penpot.git
synced 2025-07-17 00:15:33 +02:00
🐛 Fix styles issues on presence module
The issue happens only when the number of connected sessions becomes greater that the total number of colors. The solution is: instead of picking black background we use the default one. This PR also improves performance of the presence related react components.
This commit is contained in:
parent
2f242533d2
commit
72937ba091
2 changed files with 47 additions and 35 deletions
|
@ -144,7 +144,8 @@
|
||||||
(remove nil?))
|
(remove nil?))
|
||||||
used (into #{} xfm presence)
|
used (into #{} xfm presence)
|
||||||
avail (set/difference presence-palette used)]
|
avail (set/difference presence-palette used)]
|
||||||
(or (first avail) "var(--app-black)")))
|
;; If all colores are used we select the default one
|
||||||
|
(or (first avail) "#dee563")))
|
||||||
|
|
||||||
(update-color [color presence]
|
(update-color [color presence]
|
||||||
(if (some? color)
|
(if (some? color)
|
||||||
|
@ -158,7 +159,7 @@
|
||||||
(assoc :updated-at (dt/now))
|
(assoc :updated-at (dt/now))
|
||||||
(assoc :version version)
|
(assoc :version version)
|
||||||
(update :color update-color presence)
|
(update :color update-color presence)
|
||||||
(assoc :text-color "#000")))
|
(assoc :text-color "#000000")))
|
||||||
|
|
||||||
(update-presence [presence]
|
(update-presence [presence]
|
||||||
(-> presence
|
(-> presence
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
(ns app.main.ui.workspace.viewport.presence
|
(ns app.main.ui.workspace.viewport.presence
|
||||||
(:require
|
(:require
|
||||||
|
[app.common.data.macros :as dm]
|
||||||
[app.main.refs :as refs]
|
[app.main.refs :as refs]
|
||||||
[app.util.time :as dt]
|
[app.util.time :as dt]
|
||||||
[app.util.timers :as ts]
|
[app.util.timers :as ts]
|
||||||
|
@ -13,56 +14,66 @@
|
||||||
[cuerdas.core :as str]
|
[cuerdas.core :as str]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
(def pointer-icon-path
|
(def pointer-path
|
||||||
(str "M11.58,-0.47L11.47,-0.35L0.34,10.77L0.30,10.96L-0.46,"
|
(dm/str "M11.58,-0.47L11.47,-0.35L0.34,10.77L0.30,10.96L-0.46,"
|
||||||
"15.52L4.29,14.72L15.53,3.47L11.58,-0.47ZL11.58,"
|
"15.52L4.29,14.72L15.53,3.47L11.58,-0.47ZL11.58,"
|
||||||
"-0.47ZL11.58,-0.47ZM11.58,1.3C12.31,2.05,13.02,"
|
"-0.47ZL11.58,-0.47ZM11.58,1.3C12.31,2.05,13.02,"
|
||||||
"2.742,13.76,3.47L4.0053,13.23C3.27,12.50,2.55,"
|
"2.742,13.76,3.47L4.0053,13.23C3.27,12.50,2.55,"
|
||||||
"11.78,1.82,11.05L11.58,1.30ZL11.58,1.30ZM1.37,12.15L2.90,"
|
"11.78,1.82,11.05L11.58,1.30ZL11.58,1.30ZM1.37,12.15L2.90,"
|
||||||
"13.68L1.67,13.89L1.165,13.39L1.37,12.15ZL1.37,12.15Z"))
|
"13.68L1.67,13.89L1.165,13.39L1.37,12.15ZL1.37,12.15Z"))
|
||||||
|
|
||||||
(mf/defc session-cursor
|
(mf/defc session-cursor
|
||||||
[{:keys [session profile] :as props}]
|
{::mf/props :obj
|
||||||
(let [zoom (mf/deref refs/selected-zoom)
|
::mf/memo true}
|
||||||
point (:point session)
|
[{:keys [session profile zoom]}]
|
||||||
background-color (:color session "var(--app-black)")
|
(let [point (:point session)
|
||||||
text-color (:text-color session "var(--app-white)")
|
bg-color (:color session)
|
||||||
transform (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 1 zoom))
|
fg-color "var(--app-white)"
|
||||||
shown-name (if (> (count (:fullname profile)) 16)
|
transform (str/ffmt "translate(%, %) scale(%)"
|
||||||
(str (str/slice (:fullname profile) 0 12) "...")
|
(dm/get-prop point :x)
|
||||||
(:fullname profile))]
|
(dm/get-prop point :y)
|
||||||
|
(/ 1 zoom))
|
||||||
|
|
||||||
|
|
||||||
|
fullname (:fullname profile)
|
||||||
|
fullname (if (> (count fullname) 16)
|
||||||
|
(dm/str (str/slice fullname 0 12) "...")
|
||||||
|
fullname)]
|
||||||
|
|
||||||
[:g.multiuser-cursor {:transform transform}
|
[:g.multiuser-cursor {:transform transform}
|
||||||
[:path {:fill background-color
|
[:path {:fill bg-color :d pointer-path}]
|
||||||
:d pointer-icon-path}]
|
|
||||||
[:g {:transform "translate(17 -10)"}
|
[:g {:transform "translate(17 -10)"}
|
||||||
[:foreignObject {:x -0.3
|
[:foreignObject {:x -0.3
|
||||||
:y -12.5
|
:y -12.5
|
||||||
:width 300
|
:width 300
|
||||||
:height 120}
|
:height 120}
|
||||||
[:div.profile-name {:style {:background-color background-color
|
[:div.profile-name {:style {:background-color bg-color
|
||||||
:color text-color}}
|
:color fg-color}}
|
||||||
shown-name]]]]))
|
fullname]]]]))
|
||||||
|
|
||||||
(mf/defc active-cursors
|
(mf/defc active-cursors
|
||||||
{::mf/wrap [mf/memo]}
|
{::mf/props :obj}
|
||||||
[{:keys [page-id] :as props}]
|
[{:keys [page-id]}]
|
||||||
(let [counter (mf/use-state 0)
|
(let [counter (mf/use-state 0)
|
||||||
users (mf/deref refs/users)
|
users (mf/deref refs/users)
|
||||||
sessions (mf/deref refs/workspace-presence)
|
sessions (mf/deref refs/workspace-presence)
|
||||||
|
zoom (mf/deref refs/selected-zoom)
|
||||||
|
|
||||||
sessions (->> (vals sessions)
|
sessions (->> (vals sessions)
|
||||||
|
(filter :point)
|
||||||
(filter #(= page-id (:page-id %)))
|
(filter #(= page-id (:page-id %)))
|
||||||
(filter #(>= 5000 (- (inst-ms (dt/now)) (inst-ms (:updated-at %))))))]
|
(filter #(>= 5000 (- (inst-ms (dt/now))
|
||||||
(mf/use-effect
|
(inst-ms (:updated-at %))))))]
|
||||||
nil
|
(mf/with-effect nil
|
||||||
(fn []
|
(let [sem (ts/schedule 1000 #(swap! counter inc))]
|
||||||
(let [sem (ts/schedule 1000 #(swap! counter inc))]
|
(fn [] (rx/dispose! sem))))
|
||||||
(fn [] (rx/dispose! sem)))))
|
|
||||||
|
|
||||||
(for [session sessions]
|
(for [session sessions]
|
||||||
(when (:point session)
|
[:& session-cursor
|
||||||
[:& session-cursor {:session session
|
{:session session
|
||||||
:profile (get users (:profile-id session))
|
:zoom zoom
|
||||||
:key (:id session)}]))))
|
:profile (get users (:profile-id session))
|
||||||
|
:key (dm/str (:id session))}])))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue