🐛 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:
Andrey Antukh 2024-02-20 13:17:41 +01:00
parent 2f242533d2
commit 72937ba091
2 changed files with 47 additions and 35 deletions

View file

@ -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

View file

@ -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))}])))