diff --git a/frontend/src/app/main/data/workspace/notifications.cljs b/frontend/src/app/main/data/workspace/notifications.cljs index 54397b2f3..8df110920 100644 --- a/frontend/src/app/main/data/workspace/notifications.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.cljs b/frontend/src/app/main/ui/workspace/viewport/presence.cljs index ffd4a59bf..e5d019464 100644 --- a/frontend/src/app/main/ui/workspace/viewport/presence.cljs +++ b/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))}])))