🐛 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.

frontend/src/app/main/data/workspace/notifications.cljs

@@ -144,7 +144,8 @@
                               (remove nil?))
                   used  (into #{} xfm presence)
                   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]
             (if (some? color)
@@ -158,7 +159,7 @@
                 (assoc :updated-at (dt/now))
                 (assoc :version version)
                 (update :color update-color presence)
-                (assoc :text-color "#000")))
+                (assoc :text-color "#000000")))
 
           (update-presence [presence]
             (-> presence

frontend/src/app/main/ui/workspace/viewport/presence.cljs

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.workspace.viewport.presence
   (:require
+   [app.common.data.macros :as dm]
    [app.main.refs :as refs]
    [app.util.time :as dt]
    [app.util.timers :as ts]
@@ -13,56 +14,66 @@
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
 
-(def pointer-icon-path
-  (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,"
-       "-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,"
-       "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"))
+(def pointer-path
+  (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,"
+          "-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,"
+          "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"))
 
 (mf/defc session-cursor
-  [{:keys [session profile] :as props}]
-  (let [zoom             (mf/deref refs/selected-zoom)
-        point            (:point session)
-        background-color (:color session "var(--app-black)")
-        text-color       (:text-color session "var(--app-white)")
-        transform        (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 1 zoom))
-        shown-name       (if (> (count (:fullname profile)) 16)
-                           (str (str/slice (:fullname profile) 0 12) "...")
-                           (:fullname profile))]
+  {::mf/props :obj
+   ::mf/memo true}
+  [{:keys [session profile zoom]}]
+  (let [point     (:point session)
+        bg-color  (:color session)
+        fg-color  "var(--app-white)"
+        transform (str/ffmt "translate(%, %) scale(%)"
+                            (dm/get-prop point :x)
+                            (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}
-     [:path {:fill background-color
-             :d pointer-icon-path}]
+     [:path {:fill bg-color :d pointer-path}]
      [:g {:transform "translate(17 -10)"}
       [:foreignObject {:x -0.3
                        :y -12.5
                        :width 300
                        :height 120}
-       [:div.profile-name {:style {:background-color background-color
-                                   :color text-color}}
-        shown-name]]]]))
+       [:div.profile-name {:style {:background-color bg-color
+                                   :color fg-color}}
+        fullname]]]]))
 
 (mf/defc active-cursors
-  {::mf/wrap [mf/memo]}
-  [{:keys [page-id] :as props}]
+  {::mf/props :obj}
+  [{:keys [page-id]}]
   (let [counter  (mf/use-state 0)
         users    (mf/deref refs/users)
         sessions (mf/deref refs/workspace-presence)
+        zoom     (mf/deref refs/selected-zoom)
+
         sessions (->> (vals sessions)
+                      (filter :point)
                       (filter #(= page-id (:page-id %)))
-                      (filter #(>= 5000 (- (inst-ms (dt/now)) (inst-ms (:updated-at %))))))]
-    (mf/use-effect
-     nil
-     (fn []
-       (let [sem (ts/schedule 1000 #(swap! counter inc))]
-         (fn [] (rx/dispose! sem)))))
+                      (filter #(>= 5000 (- (inst-ms (dt/now))
+                                           (inst-ms (:updated-at %))))))]
+    (mf/with-effect nil
+      (let [sem (ts/schedule 1000 #(swap! counter inc))]
+        (fn [] (rx/dispose! sem))))
 
     (for [session sessions]
-      (when (:point session)
-        [:& session-cursor {:session session
-                            :profile (get users (:profile-id session))
-                            :key (:id session)}]))))
+      [:& session-cursor
+       {:session session
+        :zoom zoom
+        :profile (get users (:profile-id session))
+        :key (dm/str (:id session))}])))