feat: add cursor tracking event

.env.example

@@ -0,0 +1 @@
+VITE_WS_URL=

.gitignore

@@ -7,6 +7,7 @@ reports
 /public/js
 
 # local env files
+.env
 .env.local
 .env.*.local
 

package.json

@@ -62,6 +62,7 @@
     "mustache": "^3.2.1",
     "pinia": "^2.1.6",
     "popper.js": "^1.16.1",
+    "socket.io-client": "^4.7.2",
     "svg-inline-loader": "^0.8.2",
     "tinycolor2": "^1.4.2",
     "vue": "^2.7.0",

src/components/modeler/Modeler.vue

@@ -145,6 +145,7 @@
 
 <script>
 import Vue from 'vue';
+import { io } from 'socket.io-client';
 import _ from 'lodash';
 import { dia } from 'jointjs';
 import boundaryEventConfig from '../nodes/boundaryEvent';
@@ -852,7 +853,7 @@ export default {
 
       const config = definition.config ? JSON.parse(definition.config) : {};
       const type = config?.processKey || parser(definition, this.moddle);
-      
+
       const unnamedElements = ['bpmn:TextAnnotation', 'bpmn:Association', 'bpmn:DataOutputAssociation', 'bpmn:DataInputAssociation'];
       const requireName = unnamedElements.indexOf(bpmnType) === -1;
       if (requireName && !definition.get('name')) {
@@ -1462,6 +1463,60 @@ export default {
       }
     });
 
+    /** WEB SOCKET **/
+    const socket = io(import.meta.env.VITE_WS_URL);
+
+    socket.on('connect', () => {
+      // console.log('########################');
+      // console.log('connected');
+    });
+
+    const cursors = {};
+
+    document.addEventListener('mousemove', (event) => {
+      // Get the mouse position
+      const { clientX, clientY } = event;
+
+      const data = {
+        x: clientX,
+        y: clientY,
+        screenWidth: window.innerWidth,
+        screenHeight: window.innerHeight,
+      };
+
+      // Emit the mouse position to the server
+      socket.emit('mouseMove', data);
+    });
+
+    socket.on('mousePosition', (position) => {
+      // Get the remote mouse position
+      const { x, y, screenWidth, screenHeight, id } = position;
+
+      // Create a new cursor element if it doesn't exist
+      if (!cursors[id]) {
+        // Add the class 'remote-cursor' to the new cursor
+        cursors[id] = document.createElement('div');
+        cursors[id].className = 'remote-cursor';
+        // Add the new cursor to the page
+        document.body.appendChild(cursors[id]);
+      }
+
+      // Set the position of the remote cursor
+      const cursorX = (x / screenWidth) * window.innerWidth;
+      const cursorY = (y / screenHeight) * window.innerHeight;
+      // Update the cursor's position
+      cursors[id].style.left = `${cursorX}px`;
+      cursors[id].style.top = `${cursorY}px`;
+    });
+
+    socket.on('cursorRemoved', (removedClientId) => {
+      // Remove the cursor element from the page
+      if (cursors[removedClientId]) {
+        document.body.removeChild(cursors[removedClientId]);
+        delete cursors[removedClientId];
+      }
+    });
+
     /* Register custom nodes */
     window.ProcessMaker.EventBus.$emit('modeler-start', {
       loadXML: async(xml) => {

src/components/modeler/modeler.scss

@@ -38,3 +38,12 @@
 .no-pointer-events {
   pointer-events: none;
 }
+
+.remote-cursor {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: red;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}