@plaso-infi/whiteboard-sdk 0.0.3

package/src/utils/avatar.ts

@@ -0,0 +1,71 @@
+export type drawNoImageAvatarParamsT = {
+  userId?: string | number;
+  text: string;
+  imgUrl?: string;
+  bgColor?: string;
+};
+
+const DEFAULT_COVER_COLOR = ['#eea5a5', '#f5cd83', '#9abaee', '#74c5e6', '#54d1c0'];
+export function GetDefaultColor(relyString: string | number) {
+  let number;
+  if (typeof relyString === 'string') {
+    number = relyString.match(/(\d|[a-f]|[A-F])/g)?.join('') || '0';
+  } else {
+    number = relyString;
+  }
+  if (number) {
+    return DEFAULT_COVER_COLOR[parseInt(number, 16) % DEFAULT_COVER_COLOR.length];
+  } else {
+    return '#ccc';
+  }
+}
+
+const avatarSize = {
+  w: 128,
+  h: 128,
+};
+
+function drawText(text: string, bgColor: string): string {
+  const canvasDOM = document.createElement('canvas');
+  canvasDOM.width = avatarSize.w;
+  canvasDOM.height = avatarSize.h;
+  const ctx = canvasDOM.getContext('2d') as CanvasRenderingContext2D;
+  ctx.fillStyle = bgColor;
+  ctx.fillRect(0, 0, avatarSize.w, avatarSize.h);
+  ctx.font = '64px Arial';
+  ctx.textAlign = 'center';
+  ctx.fillStyle = '#fff';
+  ctx.fillText(text[0], 64, 88);
+  return canvasDOM.toDataURL();
+}
+
+/**
+ * 绘制头像
+ * @param param0
+ * @returns
+ */
+export function drawNoImageAvatar({
+  userId = '',
+  text = '',
+  imgUrl = '',
+  bgColor = '',
+}: drawNoImageAvatarParamsT) {
+  return new Promise<string>(resolve => {
+    const getDefaultAvatar = () => {
+      const curBgColor = bgColor || GetDefaultColor(userId);
+      resolve(drawText(text, curBgColor));
+    };
+    if (!imgUrl) {
+      getDefaultAvatar();
+    } else {
+      const imgDOM = document.createElement('img');
+      imgDOM.onload = () => {
+        resolve(imgUrl);
+      };
+      imgDOM.onerror = () => {
+        getDefaultAvatar();
+      };
+      imgDOM.src = imgUrl;
+    }
+  });
+}

package/src/utils/common.ts

@@ -0,0 +1,30 @@
+export const delay = (t: number) => new Promise(res => setTimeout(res, t));
+
+/** 最基本的 debounce 实现 */
+export function debounce<T extends (...args: any[]) => any>(fn: T, time: number) {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  return (...args: Parameters<T>): ReturnType<T> => {
+    let res: any;
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      res = fn(...args);
+    }, time);
+    return res;
+  };
+}
+
+/** 最基本的 throttle 实现 */
+export function throttle<T extends (...args: any[]) => any>(fn: T, time: number) {
+  let lastTime = 0;
+  return (...args: Parameters<T>): ReturnType<T> => {
+    const now = Date.now();
+    let res: any;
+    if (now - lastTime >= time) {
+      res = fn(...args);
+      lastTime = Date.now();
+    }
+    return res;
+  };
+}

package/src/utils/event.ts

@@ -0,0 +1,46 @@
+import type { EventManagerT, eventHandler } from '@/types';
+
+type Listener<E = any> = {
+  cb: eventHandler<E>;
+  once: boolean;
+};
+
+export class EventManager<ET = any> implements EventManagerT<ET> {
+  private _t: { [p in keyof ET]?: Array<Listener<ET[p]>> } = {};
+
+  private addListener<T extends keyof ET>(topic: T, cb: eventHandler<ET[T]>, once = false) {
+    const topics = this._t;
+    let topicList = topics[topic];
+    if (!topicList) {
+      topics[topic] = topicList = [];
+    }
+    const one = { cb, once };
+    topicList.push(one);
+    return function unsub(): void {
+      const topicList = topics[topic];
+      if (!topicList) return;
+      topics[topic] = topicList.filter(o => o !== one);
+    };
+  }
+
+  subscribe<T extends keyof ET>(topic: T, cb: eventHandler<ET[T]>) {
+    return this.addListener(topic, cb);
+  }
+
+  unsubscribe<T extends keyof ET>(topic: T, cb: eventHandler<ET[T]>) {
+    const listeners = this._t[topic];
+    this._t[topic] = listeners?.filter(l => l.cb === cb);
+  }
+
+  once<T extends keyof ET>(topic: T, cb: eventHandler<ET[T]>) {
+    return this.addListener(topic, cb, true);
+  }
+
+  publish<T extends keyof ET>(topic: T, evt: ET[T]) {
+    const topics = this._t;
+    const topicList = topics[topic];
+    if (!topicList) return;
+    topics[topic] = topicList.filter(listener => !listener.once);
+    topicList.forEach(listener => listener.cb(evt));
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './asyncWork';
+export * from './common';
+export * from './event';
+export * from './avatar';

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "jsx": "react",
+    "experimentalDecorators": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "useUnknownInCatchVariables": false,
+    "allowJs": true,
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,40 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+import react from '@vitejs/plugin-react';
+import commonjs from '@rollup/plugin-commonjs';
+
+export default defineConfig(({}) => {
+  return {
+    mode: 'development',
+    root: path.resolve(__dirname, 'src/demo'),
+    base: '',
+    define: {},
+    server: {
+      host: '0.0.0.0',
+      port: 3000,
+      proxy: {},
+    },
+    resolve: {
+      alias: [
+        {
+          find: '@',
+          replacement: path.resolve(__dirname, 'src'),
+        },
+      ],
+      extensions: ['.js', '.ts', '.jsx', '.tsx', '.json'],
+    },
+    plugins: [
+      react({
+        include: '**/*.{jsx,tsx}',
+      }),
+      commonjs(),
+    ],
+    css: {
+      preprocessorOptions: {
+        less: {
+          javascriptEnabled: true,
+        },
+      },
+    },
+  };
+});