FIX: users :)

webapp/IronCalc/package-lock.json

@@ -1,16 +1,16 @@
 {
   "name": "@ironcalc/workbook",
-  "version": "0.5.1",
+  "version": "0.5.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ironcalc/workbook",
-      "version": "0.5.1",
+      "version": "0.5.4",
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
-        "@ironcalc/wasm": "0.5.0",
+        "@ironcalc/wasm": "0.5.3",
         "@mui/material": "^6.4",
         "@mui/system": "^6.4",
         "i18next": "^23.11.1",
@@ -43,11 +43,6 @@
         "react-dom": "^18.0.0 || ^19.0.0"
       }
     },
-    "../../bindings/wasm/pkg": {
-      "name": "@ironcalc/wasm",
-      "version": "0.5.0",
-      "license": "MIT/Apache-2.0"
-    },
     "node_modules/@adobe/css-tools": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.2.tgz",
@@ -1060,8 +1055,10 @@
       }
     },
     "node_modules/@ironcalc/wasm": {
-      "resolved": "../../bindings/wasm/pkg",
-      "link": true
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@ironcalc/wasm/-/wasm-0.5.3.tgz",
+      "integrity": "sha512-ryQKR5ISkSQnnsxBYDnrAUN+GDiAQUx0MzkVpJr7VQXiymOSMZbHfpv5geum1eSJV4gw1ft69syuNolIhVZ4Hg==",
+      "license": "MIT/Apache-2.0"
     },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",

webapp/IronCalc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironcalc/workbook",
-  "version": "0.5.1",
+  "version": "0.5.4",
   "type": "module",
   "main": "./dist/ironcalc.js",
   "module": "./dist/ironcalc.js",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@ironcalc/wasm": "0.5.0",
+    "@ironcalc/wasm": "0.5.3",
     "@mui/material": "^6.4",
     "@mui/system": "^6.4",
     "i18next": "^23.11.1",

webapp/IronCalc/src/IronCalc.tsx

@@ -11,6 +11,10 @@ interface IronCalcProperties {
 }
 
 function IronCalc(properties: IronCalcProperties) {
+  properties.model.setUsers([
+    { id: "john@doe.com", sheet: 0, row: 5, column: 6 },
+    { id: "micheal@doe.com", sheet: 0, row: 1, column: 6 },
+  ]);
   return (
     <ThemeProvider theme={theme}>
       <Workbook model={properties.model} workbookState={new WorkbookState()} />

webapp/IronCalc/src/components/WorksheetCanvas/worksheetCanvas.ts

@@ -19,6 +19,13 @@ import {
   outlineColor,
 } from "./constants";
 
+export interface UserSelection {
+  userId: string;
+  color: string;
+  selection: [number, number, number, number, number]; // [sheet, rowStart, columnStart, rowEnd, columnEnd]
+  div: HTMLDivElement;
+}
+
 export interface CanvasSettings {
   model: Model;
   width: number;
@@ -1244,6 +1251,34 @@ export default class WorksheetCanvas {
     editor.style.height = `${height - 1}px`;
   }
 
+  private drawUsersSelection(): void {
+    const users = this.model.getUsers();
+    for (const handle of document.querySelectorAll(
+      ".user-selection-ironcalc",
+    ))
+      handle.remove();
+      const colors = [];
+    users.forEach((user, index) => {
+      const { sheet, row, column } = user;
+      if (sheet !== this.model.getSelectedSheet()) {
+        return;
+      }
+      const [x, y] = this.getCoordinatesByCell(row, column);
+      const width = this.getColumnWidth(sheet, column);
+      const height = this.getRowHeight(sheet, row);
+      const div = document.createElement("div");
+      const color = getColor(index + 1);
+      div.className = "user-selection-ironcalc";
+      div.style.left = `${x}px`;
+      div.style.top = `${y}px`;
+      div.style.width = `${width}px`;
+      div.style.height = `${height}px`;
+      div.style.border = `1px solid ${color}`;
+      div.style.position = "absolute";
+      this.canvas.parentElement?.appendChild(div);
+    });
+  }
+
   private drawCellOutline(): void {
     const { cellOutline, areaOutline, cellOutlineHandle } = this;
     if (this.workbookState.getEditingCell()) {
@@ -1595,6 +1630,7 @@ export default class WorksheetCanvas {
     context.stroke();
 
     this.drawCellOutline();
+    this.drawUsersSelection();
     this.drawCellEditor();
     this.drawExtendToArea();
     this.drawActiveRanges(topLeftCell, bottomRightCell);