🚧 More work on collaborative edition (in real time).

frontend/src/uxbox/main/ui/workspace.cljs

@@ -96,6 +96,12 @@
 (mf/defc workspace
   [{:keys [file-id page-id] :as props}]
 
+  (mf/use-effect
+   {:deps #js [(str file-id)]
+    :fn (fn []
+          (st/emit! (dw/initialize-ws file-id))
+          #(st/emit! (dw/finalize-ws file-id)))})
+
   (mf/use-effect
    {:deps #js [(str file-id)
                (str page-id)]
@@ -104,12 +110,6 @@
             (st/emit! (dw/initialize file-id page-id))
             #(rx/cancel! sub)))})
 
-  (mf/use-effect
-   {:deps #js [(str file-id)]
-    :fn (fn []
-          (st/emit! (dws/initialize file-id))
-          #(st/emit! (dws/finalize file-id)))})
-
   (let [layout (mf/deref refs/workspace-layout)
         file   (mf/deref refs/workspace-file)
         page   (mf/deref refs/workspace-page)

frontend/src/uxbox/main/ui/workspace/header.cljs

@@ -41,24 +41,25 @@
 
 ;; --- Header Users
 
-(mf/defc user-item
+(mf/defc user-widget
   [{:keys [user self?] :as props}]
   [:li.tooltip.tooltip-bottom
    {:alt (:fullname user)
     :on-click (when self?
                 #(st/emit! (rt/navigate :settings/profile)))}
-   [:img {:src "/images/avatar.jpg"}]])
+   [:img {:style {:border-color (:color user)}
+          :src "/images/avatar.jpg"}]])
 
-(mf/defc users-list
+(mf/defc active-users
   [props]
   (let [profile (mf/deref refs/profile)
         users (mf/deref refs/workspace-users)]
     [:ul.user-multi
-     [:& user-item {:user profile :self? true}]
+     [:& user-widget {:user profile :self? true}]
      (for [id (->> (:active users)
                    (remove #(= % (:id profile))))]
-       [:& user-item {:user (get-in users [:by-id id])
-                      :key id}])]))
+       [:& user-widget {:user (get-in users [:by-id id])
+                        :key id}])]))
 
 ;; --- Header Component
 
@@ -80,7 +81,7 @@
        :on-click #(st/emit! (dw/toggle-layout-flag :sitemap))}
       [:span (:project-name file) " / " (:name file)]]
 
-     [:& users-list]
+     [:& active-users]
 
      [:div.workspace-options
       [:ul.options-btn

frontend/src/uxbox/main/ui/workspace/viewport.cljs

@@ -143,7 +143,7 @@
 
 ;; --- Viewport
 
-(declare remote-user-cursor)
+(declare remote-user-cursors)
 
 (mf/defc canvas-and-shapes
   {:wrap [mf/wrap-memo]}
@@ -295,42 +295,51 @@
 
 
         ;; -- METER CURSOR MULTIUSUARIO
-        ;;[:& remote-user-cursor]
+        [:& remote-user-cursors {:page page}]
 
         [:& selrect {:data (:selrect local)}]]])))
 
 
 (mf/defc remote-user-cursor
-  [props]
-  [:g.multiuser-cursor #_{:transform "translate(100, 100) scale(2)"}
-   [:svg {:x "100"
-          :y "100"
-          :style {:fill "#000"}
-          :width "106.824"
-          :height "20.176"
-          :viewBox "0 0 28.264 5.338"}
-    [:path {:d "M5.292 4.027L1.524.26l-.05-.01L0 0l.258 1.524 3.769 3.768zm-.45 0l-.313.314L1.139.95l.314-.314zm-.5.5l-.315.316-3.39-3.39.315-.315 3.39 3.39zM1.192.526l-.668.667L.431.646.64.43l.552.094z"
-            :font-family "sans-serif"}]
-    [:g {:transform "translate(0 -291.708)"}
-     [:rect {:width "21.415"
-             :height "5.292"
-             :x "6.849"
-             :y "291.755"
-             :fill-opacity ".893"
-             :paint-order "stroke fill markers"
-             :rx ".794"
-             :ry ".794"}]
-     [:text {:x "9.811"
-             :y "295.216"
-             :fill "#fff"
-             :stroke-width ".265"
-             :font-family "Open Sans"
-             :font-size"2.91"
-             :font-weight "400"
-             :letter-spacing"0"
-             :line-height "1.25"
-             :word-spacing "0"
-             ;; :style="line-height:1
-             }
-      "User 2"]]]])
+  [{:keys [pointer user] :as props}]
+  [:g.multiuser-cursor {:key (:user-id pointer)
+                        :transform (str "translate(" (:x pointer) "," (:y pointer) ") scale(4)")}
+   [:path {:fill (:color user)
+           :d "M5.292 4.027L1.524.26l-.05-.01L0 0l.258 1.524 3.769 3.768zm-.45 0l-.313.314L1.139.95l.314-.314zm-.5.5l-.315.316-3.39-3.39.315-.315 3.39 3.39zM1.192.526l-.668.667L.431.646.64.43l.552.094z"
+           :font-family "sans-serif"}]
+   [:g {:transform "translate(0 -291.708)"}
+    [:rect {:width "21.415"
+            :height "5.292"
+            :x "6.849"
+            :y "291.755"
+            :fill (:color user)
+            :fill-opacity ".893"
+            :paint-order "stroke fill markers"
+            :rx ".794"
+            :ry ".794"}]
+    [:text {:x "9.811"
+            :y "295.216"
+            :fill "#fff"
+            :stroke-width ".265"
+            :font-family "Open Sans"
+            :font-size"2.91"
+            :font-weight "400"
+            :letter-spacing"0"
+            :style {:line-height "1.25"}
+            :word-spacing "0"
+            ;; :style="line-height:1
+            }
+     (:fullname user)]]])
+
+(mf/defc remote-user-cursors
+  [{:keys [page] :as props}]
+  (let [users (mf/deref refs/workspace-users)
+        pointers (->> (vals (:pointer users))
+                      (remove #(not= (:id page) (:page-id %)))
+                      (filter #((:active users) (:user-id %))))]
+    (for [pointer pointers]
+      (let [user (get-in users [:by-id (:user-id pointer)])]
+        [:& remote-user-cursor {:pointer pointer
+                                :user user
+                                :key (:user-id pointer)}]))))