Server 4565 (#26)

* Config & safer connection (#4)

* more logging

* workflow changed

* timeout operator changed

* reverted back build-deploy-k8s-sandbox-azure.yml

* reverted back build-deploy-k8s-sandbox-azure.yml

* reverted back build-deploy-k8s-sandbox-azure.yml

* auto-save time converted to milliseconds

* throttled save config changed

* wip z-index

* rearranged types

* handle changes in the file store

* z-index

* z-index, second try

* clean code

---------

Co-authored-by: Valentin Yanakiev <[email protected]>

Author: hero101

config.yml

@@ -41,8 +41,9 @@ settings:
     # the window in which contributions are accepted to be counted towards a single contribution event;
     # time is in SECONDS
     contribution_window: ${CONTRIBUTION_WINDOW}:600
-    # SECONDS between auto saves
-    save_interval: ${AUTOSAVE_INTERVAL}:10
+    # MILLISECONDS after the first change was made to the whiteboard before it's autosaved.
+    # This is preventing saving on every change - instead, all the changes done in the last interval are saved only once.
+    save_interval: ${AUTOSAVE_INTERVAL}:2000
     # SECONDS of inactivity before a collaborator is made view-only
     collaborator_inactivity: ${COLLABORATOR_INACTIVITY}:1800
     # how often the inactivity timer is reset;

src/excalidraw-backend/server.ts

@@ -17,8 +17,6 @@ import {
   defaultSaveInterval,
   DISCONNECT,
   DISCONNECTING,
-  ExcalidrawElement,
-  ExcalidrawFileStore,
   IDLE_STATE,
   INIT_ROOM,
   InMemorySnapshot,
@@ -47,6 +45,8 @@ import {
   disconnectEventHandler,
   disconnectingEventHandler,
   idleStateEventHandler,
+  isRoomId,
+  prepareContentForSave,
   serverBroadcastEventHandler,
   serverVolatileBroadcastEventHandler,
 } from './utils';
@@ -56,6 +56,7 @@ import { isAbortError, jsonToArrayBuffer } from '../util';
 import { ConfigType } from '../config';
 import { tryDecodeIncoming } from './utils/decode.incoming';
 import { SceneInitPayload, ServerBroadcastPayload } from './types/events';
+import { ExcalidrawElement, ExcalidrawFileStore } from '../excalidraw/types';
 import { isSaveErrorData } from '../services/whiteboard-integration/outputs';
 
 type RoomTrackers = Map<string, AbortController>;
@@ -106,7 +107,7 @@ export class Server {
     this.collaboratorInactivityMs =
       (collaborator_inactivity ?? defaultCollaboratorInactivity) * 1000;
 
-    this.saveIntervalMs = (save_interval ?? defaultSaveInterval) * 1000;
+    this.saveIntervalMs = save_interval ?? defaultSaveInterval;
   }
 
   private async fetchSocketsSafe(roomID: string) {
@@ -493,7 +494,7 @@ export class Server {
   }
   /**
    *  Creates a new throttled save function for a room and stores it in  __throttledSaveFnMap__.</br>
-   *  Called once after __wait__ milliseconds of the last received save request; Guaranteed save every __maxWait__ milliseconds;</br>
+   *  Called once immediately on the first invocation, then once after __wait__ milliseconds; Guaranteed save every __maxWait__ milliseconds;</br>
    *  To be used when the room is created, and used only for that room.</br>
    *  Use __cancelThrottledSave__ to cancel this function.</br>
    *  Use __flushThrottledSave__ to invoke this function immediately.
@@ -508,7 +509,7 @@ export class Server {
         this.notifyRoomSaved(roomId);
       },
       wait,
-      { leading: false, trailing: true },
+      { leading: true, trailing: true },
     );
     this.throttledSaveFnMap.set(roomId, throttledSave);
 
@@ -580,13 +581,12 @@ export class Server {
       return;
     }
 
-    const { data } = await this.utilService.save(roomId, snapshot.content);
+    const cleanContent = prepareContentForSave(snapshot);
+    const { data } = await this.utilService.save(roomId, cleanContent);
     if (isSaveErrorData(data)) {
       this.logger.error(`Failed to save room '${roomId}': ${data.error}`);
     } else {
       this.logger.verbose?.(`Room '${roomId}' saved successfully`);
     }
   }
 }
-// not that reliable, but best we can do
-const isRoomId = (id: string) => id.length === 36;

src/excalidraw-backend/types/defaults.ts

@@ -1,5 +1,5 @@
 export const defaultContributionInterval = 600;
-export const defaultSaveInterval = 10;
+export const defaultSaveInterval = 2000;
 export const defaultCollaboratorInactivity = 60 * 30; // 30 minutes
 
 export const resetCollaboratorModeDebounceWait = 1000;

src/excalidraw-backend/types/events/scene.init.payload.ts

@@ -1,7 +1,7 @@
 import { SCENE_INIT } from '../event.names';
 import { DeepReadonly } from '../../utils';
-import { ExcalidrawElement } from '../excalidraw.element';
-import { ExcalidrawFileStore } from '../excalidraw.file';
+import { ExcalidrawElement } from '../../../excalidraw/types/excalidraw.element';
+import { ExcalidrawFileStore } from '../../../excalidraw/types/excalidraw.file';
 
 export type SceneInitPayload = {
   type: typeof SCENE_INIT;

src/excalidraw-backend/types/events/server.broadcast.payload.ts

@@ -1,5 +1,5 @@
-import { ExcalidrawElement } from '../excalidraw.element';
-import { ExcalidrawFileStore } from '../excalidraw.file';
+import { ExcalidrawElement } from '../../../excalidraw/types/excalidraw.element';
+import { ExcalidrawFileStore } from '../../../excalidraw/types/excalidraw.file';
 import { DeepReadonly } from '../../utils';
 
 export type ServerBroadcastPayload = {

src/excalidraw-backend/types/excalidraw.element.ts

@@ -1,7 +1,7 @@
-import { ExcalidrawContent } from './excalidraw.content';
+import { ExcalidrawContent } from '../../excalidraw/types/excalidraw.content';
 import { DeepReadonly } from '../utils';
-import { ExcalidrawElement } from './excalidraw.element';
-import { ExcalidrawFileStore } from './excalidraw.file';
+import { ExcalidrawElement } from '../../excalidraw/types/excalidraw.element';
+import { ExcalidrawFileStore } from '../../excalidraw/types/excalidraw.file';
 import { reconcileElements } from '../utils/reconcile';
 import { reconcileFiles } from '../utils/reconcile.files';
 /**

src/excalidraw-backend/types/in.memory.snapshot.ts

@@ -13,8 +13,4 @@ export * from './socket.io.socket';
 export * from './user.info.for.room';
 export * from './user.idle.state';
 
-export * from './excalidraw.content';
-export * from './excalidraw.element';
-export * from './excalidraw.file';
-
 export * from './in.memory.snapshot';

src/excalidraw-backend/types/index.ts

@@ -0,0 +1,9 @@
+export const arrayToMapBy = <T extends Record<string, any>>(
+  items: readonly T[],
+  key: keyof T,
+): Map<string, T> => {
+  return items.reduce((acc: Map<string, T>, element) => {
+    acc.set(element[key], element);
+    return acc;
+  }, new Map<string, T>());
+};

src/excalidraw-backend/utils/array.to.map.by.ts

@@ -1,3 +1,7 @@
 export * from './util';
 export * from './handlers';
 export * from './deep.readonly';
+export * from './is.room.id';
+export * from './prepare.content.for.save';
+export * from './array.to.map';
+export * from './array.to.map.by';

src/excalidraw-backend/utils/index.ts

@@ -0,0 +1,2 @@
+// not that reliable, but best we can do
+export const isRoomId = (id: string) => id.length === 36;

src/excalidraw-backend/utils/is.room.id.ts

@@ -0,0 +1,30 @@
+import { InMemorySnapshot } from '../types';
+import { DeepReadonly } from './deep.readonly';
+import { ExcalidrawContent, ExcalidrawFileStore } from '../../excalidraw/types';
+import { isExcalidrawImageElement } from '../../util';
+
+// todo: remove isDeleted, and maybe others
+export const prepareContentForSave = (
+  snapshot: InMemorySnapshot,
+): DeepReadonly<ExcalidrawContent> => {
+  const { files: fileStore, ...restOfContent } = snapshot.content;
+  // clear files from the file store which are not referenced by elements
+  const cleanStore: ExcalidrawFileStore = {};
+
+  for (const fileId of Object.keys(fileStore)) {
+    // is there an element referencing the file
+    const hostElement = restOfContent.elements.find(
+      (el) => isExcalidrawImageElement(el) && el.fileId === fileId,
+    );
+
+    if (hostElement) {
+      // there is an element referencing the file - save the file
+      cleanStore[fileId] = fileStore[fileId];
+    }
+  }
+
+  return {
+    ...restOfContent,
+    files: cleanStore,
+  };
+};

src/excalidraw-backend/utils/prepare.content.for.save.ts

@@ -1,12 +1,8 @@
-import {
-  ExcalidrawElement,
-  ExcalidrawFileStore,
-  ExcalidrawImageElement,
-} from '../types';
 import { DeepReadonly } from './deep.readonly';
+import { ExcalidrawElement, ExcalidrawFileStore } from '../../excalidraw/types';
 
 export const reconcileFiles = (
-  localElements: readonly ExcalidrawElement[],
+  _localElements: readonly ExcalidrawElement[],
   localFileStore: DeepReadonly<ExcalidrawFileStore>,
   remoteFileStore: DeepReadonly<ExcalidrawFileStore>,
 ): ExcalidrawFileStore => {
@@ -16,24 +12,33 @@ export const reconcileFiles = (
     // find a local file that matches the remote file
     // if it's already in - discard the remote
     if (reconciledFileStore[remoteFileId]) {
+      // if the file already exists in the local store
+      // update just the urls, because they might have been changed.
+      // sometimes files get converted from dataURL to URL, and we would like to have the URL
+      reconciledFileStore[remoteFileId] = {
+        ...reconciledFileStore[remoteFileId],
+        url: remoteFileStore[remoteFileId].url,
+        dataURL: remoteFileStore[remoteFileId].dataURL,
+      };
       continue;
     }
+    /** uncomment this when Excalidraw starts sending the element and the file at the same time
+     * otherwise it's causing a bug where the file is sent but the element that should fit the image is not
+     * then another event is sent with the host element but not the file
+     * so to accommodate this we store the file for future use
+     */
     // if it's not found locally - check if it's used by any element
-    const elementUsingTheFile = localElements.find(
+    /*const elementUsingTheFile = localElements.find(
       (element) =>
         isExcalidrawImageElement(element) && element.fileId === remoteFileId,
     );
-    // if it's not found locally and not used by any local element - discard the remote
+    if it's not found locally and not used by any local element - discard the remote
     if (!elementUsingTheFile) {
       continue;
-    }
+    }*/
     // if it's not found locally but used by a local element - add it to the list of reconciled files
     reconciledFileStore[remoteFileId] = remoteFileStore[remoteFileId];
   }
 
   return reconciledFileStore;
 };
-
-const isExcalidrawImageElement = (
-  element: ExcalidrawElement,
-): element is ExcalidrawImageElement => element.type === 'image';

src/excalidraw-backend/utils/reconcile.files.ts

@@ -1,5 +1,7 @@
-import { ExcalidrawElement } from '../types';
 import { arrayToMap } from './array.to.map';
+import { ExcalidrawElement } from '../../excalidraw/types';
+import { arrayToMapBy } from './array.to.map.by';
+import { Logger } from '@nestjs/common';
 // import { orderByFractionalIndex, syncInvalidIndices } from './fractionalIndex';
 
 const shouldDiscardRemoteElement = (
@@ -48,6 +50,8 @@ const shouldDiscardRemoteElement = (
   { leading: true, trailing: false },
 );*/
 
+const logger = new Logger('reconcileElements');
+
 export const reconcileElements = (
   localElements: readonly ExcalidrawElement[],
   remoteElements: readonly ExcalidrawElement[],
@@ -83,8 +87,6 @@ export const reconcileElements = (
     }
   }
 
-  // const orderedElements = orderByFractionalIndex(reconciledElements);
-
   /**
    * todo: not sure how important is this and how does it affect the end result
    * since the debounce is set to 60 seconds, which might mean that the room has already closed
@@ -94,7 +96,53 @@ export const reconcileElements = (
 
   // de-duplicate indices
   // const syncedElemented = syncInvalidIndices(orderedElements);
+  try {
+    return orderByPrecedingElement(reconciledElements);
+  } catch (error) {
+    logger.error(error.message);
+    return reconciledElements;
+  }
+};
+
+const orderByPrecedingElement = (
+  unOrderedElements: ExcalidrawElement[],
+): ExcalidrawElement[] | never => {
+  // for zero or one element return the same array, as it's already sorted
+  if (unOrderedElements.length < 2) {
+    return unOrderedElements;
+  }
+  // validated there is just one starting element
+  const startElements = unOrderedElements.filter(
+    (el) => el.__precedingElement__ === '^',
+  );
+
+  if (startElements.length !== 1) {
+    throw new Error(
+      `There must be exactly one element with __precedingElement__ = '^'`,
+    );
+  }
+  // create a map of elements by <__precedingElement__, element that has this __precedingElement__ value>
+  // for easy access
+  const elementMapByPrecedingKey = arrayToMapBy(
+    unOrderedElements,
+    '__precedingElement__',
+  );
+  const orderedElements: ExcalidrawElement[] = [];
+  // the array is starting with element that has no preceding element
+  let parentElement = startElements[0];
+  orderedElements.push(parentElement);
+  // Follow the chain of __precedingElement__
+  while (true) {
+    const childElement = elementMapByPrecedingKey.get(parentElement.id);
+
+    if (!childElement) {
+      // we have reached the end of the chain
+      break;
+    }
+
+    orderedElements.push(childElement);
+    parentElement = childElement;
+  }
 
-  // return orderedElements as ReconciledExcalidrawElement[];
-  return reconciledElements;
+  return orderedElements;
 };

src/excalidraw-backend/utils/reconcile.ts

@@ -0,0 +1,21 @@
+type ExcalidrawBaseElement = {
+  id: string;
+  // index: number; // still not available in 0.17.0
+  type: string; // many types
+  version: number;
+  versionNonce: number;
+  /**
+   *  used for sorting the array;
+   *  Excalidraw uses a sorted array to simulate z-index behavior by
+   *  drawing the elements in order, starting from the first element
+   *  TODO: to be removed once we update the version of Excalidraw, where they are removing this field and introduce a new field called "index"
+   */
+  __precedingElement__: string;
+};
+
+export type ExcalidrawImageElement = ExcalidrawBaseElement & {
+  type: 'image';
+  fileId: string;
+};
+
+export type ExcalidrawElement = ExcalidrawBaseElement | ExcalidrawImageElement;

src/excalidraw-backend/types/excalidraw.content.ts src/excalidraw/types/excalidraw.content.ts

@@ -3,7 +3,8 @@ export type ExcalidrawFile = {
   id: string;
   created: number;
   lastRetrieved: number;
-  url: string;
+  url?: string;
+  dataURL: string;
 };
 
 export type ExcalidrawFileStore = {

src/excalidraw/types/excalidraw.element.ts

@@ -0,0 +1,3 @@
+export * from './excalidraw.element';
+export * from './excalidraw.content';
+export * from './excalidraw.file';

src/excalidraw-backend/types/excalidraw.file.ts src/excalidraw/types/excalidraw.file.ts

@@ -9,7 +9,7 @@ import {
   SaveInputData,
   WhoInputData,
 } from '../whiteboard-integration/inputs';
-import { ExcalidrawContent } from '../../excalidraw-backend/types';
+import { ExcalidrawContent } from '../../excalidraw/types';
 import { isFetchErrorData } from '../whiteboard-integration/outputs';
 import { excalidrawInitContent } from '../../util';
 import { WINSTON_MODULE_NEST_PROVIDER } from 'nest-winston';

src/excalidraw/types/index.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawContent } from '../excalidraw-backend/types';
+import { ExcalidrawContent } from '../excalidraw/types';
 
 export const excalidrawInitContent: ExcalidrawContent = {
   appState: {},

src/services/util/util.service.ts

@@ -1,4 +1,5 @@
 export * from './is.abort.error';
 export * from './excalidraw.init.data';
+export * from './is.excalidraw.image.element';
 
 export * from './json-to-arraybuffer/json.to.arraybuffer';

src/util/excalidraw.init.data.ts

@@ -0,0 +1,5 @@
+import { ExcalidrawElement, ExcalidrawImageElement } from '../excalidraw/types';
+
+export const isExcalidrawImageElement = (
+  element: ExcalidrawElement,
+): element is ExcalidrawImageElement => element.type === 'image';