Feature/ Major Refactor, Feature Enhancements, and UI/UX Improvements

.gitignore

@@ -105,3 +105,4 @@ build
 /.idea/
 
 /diagrams/
+.DS_Store

.nvmrc

@@ -0,0 +1 @@
+v20.18.0

packages/server/src/main/services/diagram-storage/diagram-file-storage-service.ts

@@ -8,7 +8,7 @@ import { DiagramStorageRateLimiter, DiagramStorageRequest } from './diagram-stor
 
 type SaveRequest = DiagramStorageRequest & {
   path: string;
-}
+};
 
 /**
  * Service for storing diagrams on the file system.
@@ -39,7 +39,7 @@ export class DiagramFileStorageService implements DiagramStorageService {
   /**
    * The rate limiter for saving diagrams.
    */
-  private limiter: DiagramStorageRateLimiter<SaveRequest>
+  private limiter: DiagramStorageRateLimiter<SaveRequest>;
 
   constructor() {
     this.limiter = new DiagramStorageRateLimiter<SaveRequest>(

packages/server/src/main/services/diagram-storage/diagram-redis-storage-service.ts

@@ -9,8 +9,7 @@ import { applyPatchToRedisValue } from './redis-patch';
 
 type SaveRequest = DiagramStorageRequest & {
   key: string;
-}
-
+};
 
 /**
  * Options for the Redis storage service.
@@ -32,7 +31,6 @@ export interface RedisStorageOptions {
   ttl?: string;
 }
 
-
 /**
  * Diagram storage service that uses Redis as a storage backend.
  */
@@ -121,7 +119,7 @@ export class DiagramRedisStorageService implements DiagramStorageService {
     const key = this.getKeyForToken(token);
     const client = await this.redisClient;
 
-    return await client.exists(key) > 0;
+    return (await client.exists(key)) > 0;
   }
 
   async getDiagramByLink(token: string): Promise<DiagramDTO | undefined> {
@@ -147,7 +145,7 @@ export class DiagramRedisStorageService implements DiagramStorageService {
       await client.expire(key, ms(this.options.ttl) / 1000);
     }
   }
-  
+
   /**
    * Returns the redis key to use for a diagram with given token.
    */

packages/server/src/main/services/diagram-storage/diagram-storage-rate-limiter.ts

@@ -3,7 +3,6 @@ import { DiagramDTO } from 'shared/src/main/diagram-dto';
 import { debounceTime, from, groupBy, mergeMap, Observable, Subject, switchMap } from 'rxjs';
 import { auditDebounceTime } from 'audit-debounce';
 
-
 /**
  * Request for saving or patching a diagram.
  */
@@ -78,15 +77,17 @@ export interface DiagramStorageRateLimiterConfig {
  * Denotes a function that can save a diagram. Return an observable when each operation
  * can be cancelled, so that the limiter cancels pending operations before initiating a new one.
  */
-export type SaveDiagramFunction<T extends DiagramStorageRequest> =
-  (request: T & DiagramSaveRequest) => Promise<void> | Observable<void>;
+export type SaveDiagramFunction<T extends DiagramStorageRequest> = (
+  request: T & DiagramSaveRequest,
+) => Promise<void> | Observable<void>;
 
 /**
  * Denotes a function that can patch a diagram. Return an observable when each operation
  * can be cancelled, so that the limiter cancels pending operations before initiating a new one.
  */
-export type PatchDiagramFunction<T extends DiagramStorageRequest> =
-  (request: T & DiagramPatchRequest) => Promise<void> | Observable<void>;
+export type PatchDiagramFunction<T extends DiagramStorageRequest> = (
+  request: T & DiagramPatchRequest,
+) => Promise<void> | Observable<void>;
 
 /**
  * A rate limiter for saving diagrams. This limiter ensures that persistence requests
@@ -113,7 +114,7 @@ export class DiagramStorageRateLimiter<T extends DiagramStorageRequest> {
   constructor(
     saveDiagram: SaveDiagramFunction<T>,
     patchDiagram: PatchDiagramFunction<T>,
-    readonly config: DiagramStorageRateLimiterConfig
+    readonly config: DiagramStorageRateLimiterConfig,
   ) {
     //
     // I do realize complex rxjs pipelines are not the easiest to read.
@@ -180,7 +181,7 @@ export class DiagramStorageRateLimiter<T extends DiagramStorageRequest> {
    * Request to save or patch a diagram. The limiter will
    * schedule this operation according to previous and subsequent requests,
    * ensuring that the storage system is not overloaded.
-  */
+   */
   request(request: T) {
     this.router.next(request);
   }

packages/server/src/main/services/diagram-storage/index.ts

@@ -4,7 +4,6 @@ import { DiagramStorageService } from './diagram-storage-service';
 import { DiagramRedisStorageService } from './diagram-redis-storage-service';
 import { DiagramFileStorageService } from './diagram-file-storage-service';
 
-
 /**
  * Factory for creating a diagram storage service. Will determine
  * the correct service to use based on the environment.

packages/server/src/main/services/diagram-storage/redis-patch.ts

@@ -1,19 +1,15 @@
 import { RedisClientType } from 'redis';
 import { Operation } from 'fast-json-patch';
 
-
 /**
  * Converts a [JSONPointer](https://tools.ietf.org/html/rfc6901) to a Redis JSON path.
  * JSONPointer is the standard format for addressing various parts of a JSON document used by
  * [JSONPatch](https://jsonpatch.com).
- * @param jsonPointer 
- * @returns 
+ * @param jsonPointer
+ * @returns
  */
 export function convertJSONPointerToRedisJSONPath(jsonPointer: string): string {
-  return jsonPointer
-    .replace(/\//g, '.')
-    .replace(/~1/g, '/')
-    .replace(/~0/g, '~');
+  return jsonPointer.replace(/\//g, '.').replace(/~1/g, '/').replace(/~0/g, '~');
 }
 
 /**
@@ -31,7 +27,7 @@ export async function applyPatchToRedisValue(client: RedisClientType, key: strin
       switch (operation.op) {
         case 'add':
         case 'replace':
-            await client.json.set(key, path, operation.value);
+          await client.json.set(key, path, operation.value);
           break;
         case 'remove':
           await client.json.del(key, path);

packages/shared/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "@ls1intum/apollon": "3.3.14",
+    "@ls1intum/apollon": "3.3.15",
     "moment": "2.30.1",
     "ws": "8.17.1"
   },

packages/shared/src/main/diagram-dto.ts

@@ -1,13 +1,12 @@
 import { UMLModel } from '@ls1intum/apollon';
-import { Moment } from 'moment';
 
 export class DiagramDTO {
   id: string;
   title: string;
   model: UMLModel;
-  lastUpdate: Moment;
+  lastUpdate: string;
 
-  constructor(id: string, title: string, model: UMLModel, lastUpdate: Moment) {
+  constructor(id: string, title: string, model: UMLModel, lastUpdate: string) {
     this.id = id;
     this.title = title;
     this.model = model;

packages/webapp/package.json

@@ -15,7 +15,8 @@
     "node": ">=18.17.0"
   },
   "dependencies": {
-    "@ls1intum/apollon": "3.3.14",
+    "@ls1intum/apollon": "3.3.15",
+    "@reduxjs/toolkit": "2.2.7",
     "@sentry/react": "7.110.1",
     "bootstrap": "5.3.3",
     "moment": "2.30.1",
@@ -27,8 +28,6 @@
     "react-dom": "18.2.0",
     "react-redux": "8.1.3",
     "react-router-dom": "6.22.3",
-    "redux": "4.2.1",
-    "redux-observable": "2.0.0",
     "rxjs": "7.8.1",
     "shared": "2.1.3",
     "styled-components": "6.1.8",
@@ -50,9 +49,10 @@
     "@types/react": "18.2.79",
     "@types/react-bootstrap": "0.32.36",
     "@types/react-dom": "18.2.25",
-    "@types/react-redux": "7.1.33",
+    "@types/react-redux": "^7.1.33",
     "@types/styled-components": "5.1.34",
     "@types/uuid": "9.0.8",
+    "@types/websocket": "^1.0.10",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",
     "circular-dependency-plugin": "5.2.2",

packages/webapp/src/main/application.tsx

@@ -1,104 +1,46 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { ApplicationBar } from './components/application-bar/application-bar';
-import { ApollonEditorWrapper } from './components/apollon-editor-component/apollon-editor-component';
+import { ApollonEditorComponent } from './components/apollon-editor-component/ApollonEditorComponent';
 import { ApollonEditor } from '@ls1intum/apollon';
-import { ApplicationStore } from './components/store/application-store';
-import { ApplicationState } from './components/store/application-state';
-import {
-  localStorageCollaborationColor,
-  localStorageCollaborationName,
-  localStorageDiagramPrefix,
-  localStorageLatest,
-  POSTHOG_HOST,
-  POSTHOG_KEY,
-} from './constant';
-import {
-  ApollonEditorContext,
-  ApollonEditorProvider,
-} from './components/apollon-editor-component/apollon-editor-context';
-import { uuid } from './utils/uuid';
-import moment from 'moment';
+import { POSTHOG_HOST, POSTHOG_KEY } from './constant';
+import { ApollonEditorProvider } from './components/apollon-editor-component/apollon-editor-context';
 import { FirefoxIncompatibilityHint } from './components/incompatability-hints/firefox-incompatibility-hint';
-import { defaultEditorOptions } from './services/editor-options/editor-options-reducer';
-import { EditorOptions } from './services/editor-options/editor-options-types';
 import { ErrorPanel } from './components/error-handling/error-panel';
-import { Diagram } from './services/diagram/diagram-types';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { ApplicationModal } from './components/modals/application-modal';
 import { ToastContainer } from 'react-toastify';
 import { PostHogProvider } from 'posthog-js/react';
+import { ApplicationStore } from './components/store/application-store';
+import { ApollonEditorComponentWithConnection } from './components/apollon-editor-component/ApollonEditorComponentWithConnection';
 
 const postHogOptions = {
   api_host: POSTHOG_HOST,
 };
 
-const getInitialStore = (): ApplicationState => {
-  const latestId: string | null = window.localStorage.getItem(localStorageLatest);
-  let diagram: { diagram: Diagram };
-  const editorOptions: EditorOptions = defaultEditorOptions;
-  if (latestId) {
-    const latestDiagram: Diagram = JSON.parse(window.localStorage.getItem(localStorageDiagramPrefix + latestId)!);
-    diagram = { diagram: latestDiagram };
-    editorOptions.type = latestDiagram?.model?.type ? latestDiagram.model.type : editorOptions.type;
-  } else {
-    diagram = {
-      diagram: { id: uuid(), title: 'UMLClassDiagram', model: undefined, lastUpdate: moment() },
-    };
-  }
-
-  // initial application state
-  return {
-    ...diagram,
-    editorOptions,
-    errors: [],
-    modal: {
-      type: null,
-      size: 'sm',
-    },
-    share: {
-      collaborationName: window.localStorage.getItem(localStorageCollaborationName) || '',
-      collaborationColor: window.localStorage.getItem(localStorageCollaborationColor) || '',
-      collaborators: [],
-      fromServer: false,
-    },
-  };
-};
-
-const initialStore = getInitialStore();
-
-export const Application = () => {
+export function RoutedApplication() {
   const [editor, setEditor] = useState<ApollonEditor>();
-  const handleSetEditor = (ref: ApollonEditor) => {
-    if (ref) {
-      setEditor(ref);
-    }
+  const handleSetEditor = (newEditor: ApollonEditor) => {
+    setEditor(newEditor);
   };
-  const isFirefox: boolean = /Firefox/i.test(navigator.userAgent);
-  const context: ApollonEditorContext | null = { editor, setEditor: handleSetEditor };
+  const isFirefox = useMemo(() => /Firefox/i.test(navigator.userAgent), []);
 
   return (
     <PostHogProvider apiKey={POSTHOG_KEY} options={postHogOptions}>
-      <ApollonEditorProvider value={context}>
-        <ApplicationStore initialState={initialStore}>
-          <ApplicationBar />
-          <ApplicationModal />
-          {isFirefox && <FirefoxIncompatibilityHint />}
-          <ErrorPanel />
-          <ApollonEditorWrapper />
-        </ApplicationStore>
-        <ToastContainer />
-      </ApollonEditorProvider>
+      <ApplicationStore>
+        <BrowserRouter>
+          <ApollonEditorProvider value={{ editor, setEditor: handleSetEditor }}>
+            <ApplicationBar />
+            <ApplicationModal />
+            {isFirefox && <FirefoxIncompatibilityHint />}
+            <Routes>
+              <Route path={'/:token'} element={<ApollonEditorComponentWithConnection />} />
+              <Route path={'/'} element={<ApollonEditorComponent />} />
+            </Routes>
+            <ErrorPanel />
+            <ToastContainer />
+          </ApollonEditorProvider>
+        </BrowserRouter>
+      </ApplicationStore>
     </PostHogProvider>
   );
-};
-
-export function RoutedApplication() {
-  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path={'/:token'} element={<Application />} />
-        <Route path={'/'} element={<Application />} />
-      </Routes>
-    </BrowserRouter>
-  );
 }

packages/webapp/src/main/components/apollon-editor-component/ApollonEditorComponent.tsx

@@ -0,0 +1,52 @@
+import { ApollonEditor, UMLModel } from '@ls1intum/apollon';
+import React, { useEffect, useRef, useContext } from 'react';
+import styled from 'styled-components';
+import { uuid } from '../../utils/uuid';
+
+import { setCreateNewEditor, updateDiagramThunk, selectCreatenewEditor } from '../../services/diagram/diagramSlice';
+import { ApollonEditorContext } from './apollon-editor-context';
+import { useAppDispatch, useAppSelector } from '../store/hooks';
+
+const ApollonContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 2;
+  overflow: hidden;
+`;
+
+export const ApollonEditorComponent: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<ApollonEditor | null>(null);
+  const dispatch = useAppDispatch();
+  const { diagram: reduxDiagram } = useAppSelector((state) => state.diagram);
+  const options = useAppSelector((state) => state.diagram.editorOptions);
+  const createNewEditor = useAppSelector(selectCreatenewEditor);
+  const editorContext = useContext(ApollonEditorContext);
+  const setEditor = editorContext?.setEditor;
+
+  useEffect(() => {
+    const initializeEditor = async () => {
+      if (containerRef.current != null && createNewEditor) {
+        editorRef.current = new ApollonEditor(containerRef.current, options);
+        await editorRef.current?.nextRender;
+
+        if (reduxDiagram.model) {
+          editorRef.current.model = reduxDiagram.model;
+        }
+        editorRef.current.subscribeToModelChange((model: UMLModel) => {
+          const diagram = { ...reduxDiagram, model };
+          dispatch(updateDiagramThunk(diagram));
+        });
+
+        setEditor!(editorRef.current);
+        dispatch(setCreateNewEditor(false));
+      }
+    };
+
+    initializeEditor();
+  }, [containerRef.current, createNewEditor]);
+
+  const key = reduxDiagram?.id || uuid();
+
+  return <ApollonContainer key={key} ref={containerRef} />;
+};