feat: add package @suika/suika-multiplayer

F-star · Aug 18, 2024 · cd283b4 · cd283b4
1 parent 0301112
commit cd283b4
Show file tree

Hide file tree

Showing 120 changed files with 4,781 additions and 126 deletions.
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,5 @@
+node_modules
+.git
+.gitignore
+*.md
+dist
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,13 +4,20 @@
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "cSpell.words": [
     "bbox",
     "bboxes",
     "bboxs",
     "clonedeep",
     "Dists",
     "Formatjs",
+    "hocuspocus",
     "IRGB",
     "IRGBA",
     "isequal",

diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,15 @@
+
+FROM node:18-alpine AS build
+WORKDIR /app
+
+COPY . .
+
+RUN npm config set registry https://registry.npmmirror.com/
+RUN npm install -g [email protected]
+RUN pnpm install --frozen-lockfile
+RUN pnpm build
+
+FROM nginx
+
+COPY --from=build /app/packages/suika-multiplayer/build /usr/share/nginx/html
+COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
diff --git a/nginx/nginx.conf b/nginx/nginx.conf
@@ -0,0 +1,9 @@
+server {
+    listen 8002;
+    server_name localhost;
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+}
diff --git a/package.json b/package.json
@@ -10,8 +10,10 @@
   ],
   "scripts": {
     "dev": "run-p common:dev icons:dev components:dev geo:dev core:dev app:dev",
+    "dev-m": "run-p common:dev icons:dev components:dev geo:dev core:dev app-m:dev",
     "build": "pnpm -r exec pnpm run build",
     "app:dev": "pnpm --filter @suika/suika dev",
+    "app-m:dev": "pnpm --filter @suika/suika-multiplayer dev",
     "app:build": "pnpm --filter @suika/suika build",
     "storybook": "pnpm --filter @suika/components storybook",
     "components:build": "pnpm --filter @suika/components build",

diff --git a/packages/components/src/components/select/select.scss b/packages/components/src/components/select/select.scss
@@ -44,6 +44,7 @@
     font-size: 14px;
     color: #333;
     text-decoration: none;
+    cursor: pointer;
 
     .sk-select-popover-item-icon {
       margin-right: 4px;
@@ -57,7 +58,6 @@
       }
     }
 
-    cursor: pointer;
     &:hover {
       color: #fff;
       background-color: #0f8fff;

diff --git a/packages/core/src/editor.ts b/packages/core/src/editor.ts
@@ -102,6 +102,7 @@ export class SuikaEditor {
     this.keybindingManager.bindEvent();
 
     this.doc = new SuikaDocument({
+      id: '0-0',
       objectName: 'Document',
       width: 0,
       height: 0,

diff --git a/packages/core/src/setting.ts b/packages/core/src/setting.ts
@@ -129,29 +129,29 @@ export class Setting {
     continueClickMaxGap: 350, // millisecond
     continueClickDistanceTol: 5,
   };
-  toggle<K extends BooleanKeys<Setting['value']>>(key: K) {
+  toggle<K extends BooleanKeys<SettingValue>>(key: K) {
     const value = this.value[key];
     if (typeof value === 'boolean') {
       this.set(key, !value);
     } else {
       console.warn(`toggle ${key} failed, value is not boolean`);
     }
   }
-  set<K extends keyof Setting['value']>(key: K, value: Setting['value'][K]) {
+  set<K extends keyof SettingValue>(key: K, value: SettingValue[K]) {
     this.value[key] = value;
     this.eventEmitter.emit('update', this.getAttrs());
   }
-  get<K extends keyof Setting['value']>(key: K) {
+  get<K extends keyof SettingValue>(key: K) {
     return this.value[key];
   }
-  getAttrs() {
+  getAttrs(): SettingValue {
     return { ...this.value };
   }
 
-  on(eventName: 'update', handler: (value: Setting['value']) => void) {
+  on(eventName: 'update', handler: (value: SettingValue) => void) {
     this.eventEmitter.on(eventName, handler);
   }
-  off(eventName: 'update', handler: (value: Setting['value']) => void) {
+  off(eventName: 'update', handler: (value: SettingValue) => void) {
     this.eventEmitter.off(eventName, handler);
   }
 }

diff --git a/packages/suika-multiplayer/README.md b/packages/suika-multiplayer/README.md
@@ -0,0 +1,3 @@
+@suika/suika-multiplayer
+
+the Web UI of suika editor for multiple user
diff --git a/packages/suika-multiplayer/index.html b/packages/suika-multiplayer/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>suika-multiplayer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/packages/suika-multiplayer/package.json b/packages/suika-multiplayer/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "@suika/suika-multiplayer",
+  "version": "0.0.1",
+  "description": "a graphics editor.",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.22.3",
+    "@hocuspocus/provider": "^2.13.5",
+    "@suika/common": "workspace:^",
+    "@suika/components": "workspace:^",
+    "@suika/core": "workspace:^",
+    "@suika/geo": "workspace:^",
+    "@suika/icons": "workspace:^",
+    "ahooks": "^3.7.4",
+    "axios": "^1.7.3",
+    "classnames": "^2.3.2",
+    "react": "^18.2.0",
+    "react-color": "^2.19.3",
+    "react-dom": "^18.2.0",
+    "react-intl": "^6.3.2",
+    "react-scripts": "5.0.1",
+    "sass": "^1.57.1",
+    "stats.js": "^0.17.0",
+    "y-websocket": "^2.0.3",
+    "yjs": "^13.6.17"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.25",
+    "@types/react-color": "^3.0.6",
+    "@types/react-dom": "^18.2.0",
+    "@types/stats.js": "^0.17.3",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "sass": "^1.70.0",
+    "vite": "^5.0.8",
+    "vite-plugin-checker": "^0.6.4"
+  }
+}
diff --git a/packages/suika-multiplayer/public/vite.svg b/packages/suika-multiplayer/public/vite.svg
diff --git a/packages/suika-multiplayer/src/App.css b/packages/suika-multiplayer/src/App.css
@@ -0,0 +1,3 @@
+body {
+  overscroll-behavior-x: none;
+}
diff --git a/packages/suika-multiplayer/src/App.tsx b/packages/suika-multiplayer/src/App.tsx
@@ -0,0 +1,42 @@
+import './App.css';
+
+import { useEffect, useState } from 'react';
+import { IntlProvider } from 'react-intl';
+
+import Editor from './components/Editor';
+import { appEventEmitter } from './events';
+import { en, type SupportedLocale, zh } from './locale';
+
+const messageMap = {
+  zh,
+  en,
+};
+
+const getLocale = (): SupportedLocale => {
+  const locale = localStorage.getItem('suika-locale') || navigator.language;
+  return locale.startsWith('zh') ? 'zh' : 'en';
+};
+
+function App() {
+  const [locale, setLocale] = useState(getLocale());
+
+  useEffect(() => {
+    const localeChangeHandler = (locale: SupportedLocale) => {
+      setLocale(locale);
+    };
+    appEventEmitter.on('localeChange', localeChangeHandler);
+    return () => {
+      appEventEmitter.off('localeChange', localeChangeHandler);
+    };
+  });
+
+  return (
+    <IntlProvider locale={locale} messages={messageMap[locale]}>
+      <div className="suika">
+        <Editor />
+      </div>
+    </IntlProvider>
+  );
+}
+
+export default App;
diff --git a/packages/suika-multiplayer/src/api-service/api-config.ts b/packages/suika-multiplayer/src/api-service/api-config.ts
@@ -0,0 +1,21 @@
+import axios from 'axios';
+
+const configAxios = () => {
+  axios.defaults.baseURL = '/api';
+  axios.interceptors.response.use(
+    (config) => {
+      return config;
+    },
+    (err) => {
+      const statusCode = err?.response?.status;
+      if (statusCode === 401) {
+        if (location.pathname !== '/login') {
+          location.href = '/login';
+        }
+      }
+      throw err;
+    },
+  );
+};
+
+configAxios();
diff --git a/packages/suika-multiplayer/src/api-service/api-service.ts b/packages/suika-multiplayer/src/api-service/api-service.ts
@@ -0,0 +1,78 @@
+import './api-config';
+
+import axios from 'axios';
+
+interface FileItem {
+  id: number;
+  title: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+type ResStruct<T> = {
+  code: number;
+  status: number;
+  message: string;
+  error: boolean;
+  data: T;
+};
+
+interface LoginRes {
+  accessToken: string;
+}
+
+interface UserProfileRes {
+  username: string;
+  id: number;
+}
+
+export const ApiService = {
+  login: async (username: string, password: string) => {
+    const res = await axios.post<ResStruct<LoginRes>>('auth/login', {
+      username,
+      password,
+    });
+    return res.data;
+  },
+  register: async (username: string, password: string) => {
+    const res = await axios.post<ResStruct<LoginRes>>('auth/register', {
+      username,
+      password,
+    });
+    return res.data;
+  },
+  getFileList: async () => {
+    const res = await axios.get<ResStruct<FileItem[]>>('files');
+    return res.data;
+  },
+  createFile: async (title: string) => {
+    const res = await axios.post<ResStruct<FileItem[]>>('files/create', {
+      title,
+    });
+    return res.data;
+  },
+  getFile: async (id: number) => {
+    const res = await axios.get<ResStruct<FileItem>>(`files/${id}`);
+    return res.data;
+  },
+  deleteFiles: async (ids: number[]) => {
+    const res = await axios.delete<ResStruct<FileItem[]>>('files', {
+      params: {
+        ids,
+      },
+    });
+    return res.data;
+  },
+  updateFile: async (id: number, data: Partial<FileItem>) => {
+    const res = await axios.patch<ResStruct<FileItem[]>>(`files/${id}`, {
+      data,
+    });
+    return res.data;
+  },
+  getUserInfo: async () => {
+    const res = await axios.get<ResStruct<UserProfileRes>>(
+      '/users/self/profile',
+    );
+    return res.data;
+  },
+};
diff --git a/packages/suika-multiplayer/src/api-service/index.ts b/packages/suika-multiplayer/src/api-service/index.ts
@@ -0,0 +1 @@
+export * from './api-service';
diff --git a/packages/suika-multiplayer/src/components/Cards/AlignCard/AlignCard.scss b/packages/suika-multiplayer/src/components/Cards/AlignCard/AlignCard.scss
@@ -0,0 +1,25 @@
+.suika {
+  .align-list {
+    display: flex;
+    padding: 0 8px;
+    .align-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      margin: 0 1px;
+      border-radius: 3px;
+      width: 32px;
+      height: 32px;
+      color: #333;
+      &:hover {
+        background-color: #f2f2f2;
+      }
+    }
+
+    &.disabled {
+      pointer-events: none;
+      opacity: 0.3;
+    }
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		@suika/suika-multiplayer

		the Web UI of suika editor for multiple user