Fix config.

.env

@@ -0,0 +1,2 @@
+VITE_SERVER_URL=https://api2.mydraft.cc
+VITE_SERVER_COLLABORATION_URL=wss://api2.mydraft.cc/collaboration

.env.local-server

@@ -0,0 +1,2 @@
+VITE_SERVER_URL=http://localhost:8080
+VITE_SERVER_COLLABORATION_URL=ws://localhost:8080/collaboration

package.json

@@ -4,9 +4,12 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
+    "@hocuspocus/provider": "^2.5.0",
     "@marker.io/browser": "^0.18.0",
     "@reduxjs/toolkit": "^1.7.1",
     "@svgdotjs/svg.js": "^3.1.1",
+    "@y-sweet/client": "^0.0.8",
+    "@y-sweet/sdk": "^0.0.8",
     "antd": "4.18.2",
     "classnames": "^2.3.1",
     "connected-react-router": "^6.9.2",
@@ -31,10 +34,13 @@
     "redux-thunk": "2.4.1",
     "reselect": "4.1.5",
     "tslib": "2.3.1",
-    "vite-plugin-pwa": "^0.16.5"
+    "y-protocols": "^1.0.6",
+    "y-webrtc": "^10.2.5",
+    "yjs-redux": "^0.14.0"
   },
   "scripts": {
     "start": "vite",
+    "start-local": "vite --mode local-server",
     "lint": "eslint src/**/*.ts[x]",
     "lint:fix": "eslint src/**/*.ts[x] --fix",
     "build": "tsc && vite build",
@@ -81,6 +87,7 @@
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
     "vite-plugin-favicon": "^1.0.8",
+    "vite-plugin-pwa": "^0.16.5",
     "vitest": "^0.34.6",
     "webdriverio": "^8.16.10"
   }

src/core/utils/immutable-list.ts

@@ -51,8 +51,6 @@ export class ImmutableList<T> {
             return ImmutableList.empty();
         } else if (items instanceof ImmutableList) {
             return items;
-        } else if (items.length === 0) {
-            return ImmutableList.empty<V>();
         } else {
             return new ImmutableList<V>(items, MathHelper.nextId());
         }

src/core/utils/index.ts

@@ -12,7 +12,6 @@ export * from './color';
 export * from './helpers';
 export * from './immutable-list';
 export * from './immutable-map';
-export * from './immutable-set';
 export * from './math-helper';
 export * from './react';
 export * from './record';

src/wireframes/api/index.ts

@@ -5,10 +5,10 @@
  * Copyright (c) Sebastian Stehle. All rights reserved.
 */
 
-const API_URL = process.env.NODE_ENV === 'test_development' ? 'http://localhost:4000' : 'https://api.mydraft.cc';
+const SERVER_URL = import.meta.env.VITE_SERVER_URL;
 
 export async function getDiagram(readToken: string) {
-    const response = await fetch(`${API_URL}/${readToken}`);
+    const response = await fetch(`${SERVER_URL}/${readToken}`);
 
     if (!response.ok) {
         throw Error('Failed to load diagram');
@@ -20,10 +20,10 @@ export async function getDiagram(readToken: string) {
 }
 
 export async function putDiagram(readToken: string, writeToken: string, body: any) {
-    const response = await fetch(`${API_URL}/${readToken}/${writeToken}`, {
+    const response = await fetch(`${SERVER_URL}/${readToken}/${writeToken}`, {
         method: 'PUT',
         headers: {
-            ContentType: 'text/json',
+            'Content-Type': 'application/json',
         },
         body: JSON.stringify(body),
     });
@@ -34,10 +34,10 @@ export async function putDiagram(readToken: string, writeToken: string, body: an
 }
 
 export async function postDiagram(body: any)  {
-    const response = await fetch(`${API_URL}/`, {
+    const response = await fetch(`${SERVER_URL}/`, {
         method: 'POST',
         headers: {
-            ContentType: 'text/json',
+            'Content-Type': 'application/json',
         },
         body: JSON.stringify(body),
     });

src/wireframes/collaboration/components/Presence.tsx

@@ -1,3 +1,9 @@
+/*
+ * mydraft.cc
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved.
+*/
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { CopyOutlined, ShareAltOutlined } from '@ant-design/icons';
 import { Avatar, Button, Dropdown, Input, message } from 'antd';
@@ -46,7 +52,7 @@ export const Presence = () => {
     );
 };
 
-export const ShareMenu = ({ id }: { id: string }) => {
+const ShareMenu = ({ id }: { id: string }) => {
     const link = `${window.location.protocol}//${window.location.host}/c:${id}`;
 
     const doCopy = () => {

src/wireframes/collaboration/components/Provider.tsx

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved.
 */
 
-import { TiptapCollabProvider } from '@hocuspocus/provider';
+import { HocuspocusProvider  } from '@hocuspocus/provider';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import * as Y from 'yjs';
@@ -25,7 +25,7 @@ export const CollaborationProvider = ({ children }: { children: React.ReactNode
     useAsyncEffect(async cancellation => {
         setState({});
 
-        const provider = new TiptapCollabProvider({ appId: '7ME5ZQMY', name: editorId });
+        const provider = new HocuspocusProvider({ url: import.meta.env.VITE_SERVER_COLLABORATION_URL, name: editorId });
 
         await new Promise(resolve => {
             const handler = () => {
@@ -63,7 +63,7 @@ export const CollaborationProvider = ({ children }: { children: React.ReactNode
             document,
         });
 
-        setState({ document, provider });
+        setState(s => ({ ...s, document, provider }));
 
         return () => {
             synchronizer.destroy();

src/wireframes/collaboration/hooks.ts

@@ -35,7 +35,7 @@ export const useUndoManager = () => {
         }
 
         const handler = () => {
-            setCanUndo(undoManager.canUndo());
+            setCanUndo(undoManager.undoStack.length > 1);
             setCanRedo(undoManager.canRedo());
         };
 

src/wireframes/collaboration/resolvers.ts

@@ -17,21 +17,29 @@ class DelegateValueResolver<T> implements ValueResolver<T> {
     }
 }
 
-export const COLOR_RESOLVER = new DelegateValueResolver(Color.fromJS, s => s.toJS());
+export const COLOR_RESOLVER =
+    new DelegateValueResolver(Color.fromJS, s => s.toJS());
 
-export const MINSIZE_CONSTRAINT_RESOLVER = new DelegateValueResolver(() => new MinSizeConstraint(), () => ({}));
+export const MINSIZE_CONSTRAINT_RESOLVER =
+    new DelegateValueResolver(() => new MinSizeConstraint(), () => ({}));
 
-export const RECT2_RESOLVER = new DelegateValueResolver(Rect2.fromJS, s => s.toJS());
+export const RECT2_RESOLVER =
+    new DelegateValueResolver(Rect2.fromJS, s => s.toJS());
 
-export const ROTATION_RESOLVER = new DelegateValueResolver(Rotation.fromJS, s => s.toJS());
+export const ROTATION_RESOLVER =
+    new DelegateValueResolver(Rotation.fromJS, s => s.toJS());
 
-export const SIZE_CONSTRAINT_RESOLVER = new DelegateValueResolver(s => new SizeConstraint(s.w as number, s.h as number),  s => ({ w: s.width, h: s.height }));
+export const SIZE_CONSTRAINT_RESOLVER =
+    new DelegateValueResolver(s => new SizeConstraint(s.w as number, s.h as number),  s => ({ w: s.width, h: s.height }));
 
-export const TEXTHEIGHT_CONSTRAINT_RESOLVER = new DelegateValueResolver(s => new TextHeightConstraint(s.p as number),  s => ({ p: s.padding }));
+export const TEXTHEIGHT_CONSTRAINT_RESOLVER =
+    new DelegateValueResolver(s => new TextHeightConstraint(s.p as number),  s => ({ p: s.padding }));
 
-export const TRANSFORM_RESOLVER = new DelegateValueResolver(Transform.fromJS, s => s.toJS());
+export const TRANSFORM_RESOLVER =
+    new DelegateValueResolver(Transform.fromJS, s => s.toJS());
 
-export const VEC2_RESOLVER = new DelegateValueResolver(Vec2.fromJS, s => s.toJS());
+export const VEC2_RESOLVER =
+    new DelegateValueResolver(Vec2.fromJS, s => s.toJS());
 
 export class ImmutableListResolver implements ArrayTypeResolver<ImmutableList<unknown>> {
     public readonly sourceType = 'Array';
@@ -98,7 +106,7 @@ export class RecordResolver<T extends Record<any>> implements ObjectTypeResolver
     }
 
     public syncToObject(existing: T, diffs: ObjectDiff[]): T {
-        const merge: object = {};
+        const merge: { [key: string ]: any } = {};
 
         for (const diff of diffs) {
             if (diff.type === 'Remove') {

src/wireframes/model/actions/loading.spec.ts

@@ -9,7 +9,7 @@
 
 import { diff } from 'deep-object-diff';
 import { MathHelper, Types } from '@app/core';
-import { EditorState, loadDiagramInternal, RendererService, selectItems } from '@app/wireframes/model';
+import { EditorState, loadDiagramInternal, RendererService } from '@app/wireframes/model';
 import * as Reducers from '@app/wireframes/model/actions';
 import { Button } from '@app/wireframes/shapes/neutral/button';
 import { AbstractControl } from '@app/wireframes/shapes/utils/abstract-control';

src/wireframes/model/editor-state.ts

@@ -12,6 +12,9 @@ type Diagrams = ImmutableMap<Diagram>;
 type DiagramIds = ImmutableList<string>;
 
 type Props = {
+    // The id of the state.
+    id: string;
+
     // The id of the selected diagram.
     selectedDiagramIds: ImmutableMap<string | null | undefined>;
 
@@ -24,9 +27,6 @@ type Props = {
     // The size of all diagrams.
     size: Vec2;
 
-    // The id of the state.
-    id: string;
-
     // The color for all diagrams.
     color: Color;
 };
@@ -35,6 +35,9 @@ export type InitialEditorProps = {
     // The unique id of the editor.
     id?: string;
 
+    // The id of the selected diagram.
+    selectedDiagramIds?: { [user: string]: string | null | undefined } | ImmutableMap<string | null | undefined>;
+
     // The actual diagrams.
     diagrams?: { [id: string]: Diagram } | ImmutableMap<Diagram>;
 
@@ -80,14 +83,14 @@ export class EditorState extends Record<Props> {
     }
 
     public static create(setup: InitialEditorProps = {}): EditorState {
-        const { color, diagrams, diagramIds, id, size } = setup;
+        const { color, diagrams, diagramIds, id, selectedDiagramIds, size } = setup;
 
         const props: Props = {
             id: id || MathHelper.guid(),
             color: color || Color.WHITE,
             diagrams: ImmutableMap.of(diagrams),
             diagramIds: ImmutableList.of(diagramIds),
-            selectedDiagramIds: ImmutableMap.empty(),
+            selectedDiagramIds: ImmutableMap.of(selectedDiagramIds),
             size: size || new Vec2(1000, 1000),
         };
 

src/wireframes/model/serializer.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved.
 */
 
-import { ImmutableList, MathHelper, Rotation, Vec2 } from '@app/core/utils';
+import { MathHelper, Rotation, Vec2 } from '@app/core/utils';
 import { Diagram } from './diagram';
 import { DiagramItem } from './diagram-item';
 import { DiagramItemSet } from './diagram-item-set';

vite.config.ts

@@ -17,20 +17,24 @@ export default defineConfig({
     },
 
     plugins: [
-        ViteFaviconsPlugin({
-            logo: './public/logo-square.svg',
-            favicons: {
-                appName: 'mydraft',
-                appDescription: 'Open Source Wireframing Tool',
-                developerName: 'Sebastian Stehle',
-                developerURL: 'https://suquidex.io',
-                start_url: '/',
-                theme_color: '#fda100',
-            },
-        }),
-        VitePWA({
-            injectRegister: null,
-        }),
+        ...
+        (process.env.NODE_ENV === 'production' ?
+            [
+                ViteFaviconsPlugin({
+                    logo: './public/logo-square.svg',
+                    favicons: {
+                        appName: 'mydraft',
+                        appDescription: 'Open Source Wireframing Tool',
+                        developerName: 'Sebastian Stehle',
+                        developerURL: 'https://suquidex.io',
+                        start_url: '/',
+                        theme_color: '#fda100',
+                    },
+                }),
+                VitePWA({
+                    injectRegister: null,
+                }),
+            ] : []),
         react({}),
     ],
 });