优化

client/web/plugins/com.msgbyte.draw/manifest.json

@@ -0,0 +1,11 @@
+{
+  "label": "Drawing plugin",
+  "label.zh-CN": "绘图插件",
+  "name": "com.msgbyte.draw",
+  "url": "/plugins/com.msgbyte.draw/index.js",
+  "version": "0.0.0",
+  "author": "msgbyte",
+  "description": "Allows sending custom drawings",
+  "description.zh-CN": "允许发送自定义绘图",
+  "requireRestart": false
+}

client/web/plugins/com.msgbyte.draw/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@plugins/com.msgbyte.draw",
+  "main": "src/index.tsx",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "react-canvas-draw": "^1.2.1"
+  },
+  "devDependencies": {
+    "@types/react-canvas-draw": "^1.1.1",
+    "react": "18.2.0"
+  }
+}

client/web/plugins/com.msgbyte.draw/src/DrawModal.tsx

@@ -0,0 +1,59 @@
+import {
+  ChatInputActionContextProps,
+  dataUrlToFile,
+  getMessageTextDecorators,
+  uploadFile,
+  useAsyncFn,
+} from '@capital/common';
+import { Button } from '@capital/component';
+import React, { useRef } from 'react';
+import CanvasDraw from 'react-canvas-draw';
+import { Translate } from './translate';
+
+declare module 'react-canvas-draw' {
+  export default interface CanvasDraw {
+    getDataURL(
+      fileType?: string,
+      useBgImage?: boolean,
+      backgroundColour?: string
+    );
+  }
+}
+
+/**
+ * 绘图面板
+ */
+const DrawModal: React.FC<{
+  actions: ChatInputActionContextProps;
+  onSuccess: () => void;
+}> = React.memo(({ actions, onSuccess }) => {
+  const sendMsg = actions.sendMsg;
+  const drawRef = useRef<CanvasDraw>(null);
+  const [{ loading }, handleSend] = useAsyncFn(async () => {
+    const dataUrl = drawRef.current.getDataURL();
+    const file = dataUrlToFile(dataUrl);
+    const res = await uploadFile(file);
+
+    sendMsg(
+      getMessageTextDecorators().image(res.url, { width: 400, height: 400 })
+    );
+    onSuccess();
+  }, [sendMsg, onSuccess]);
+
+  return (
+    <div>
+      <CanvasDraw ref={drawRef} />
+      <Button
+        block={true}
+        type="primary"
+        disabled={loading}
+        onClick={handleSend}
+      >
+        {Translate.send}
+      </Button>
+    </div>
+  );
+});
+DrawModal.displayName = 'DrawModal';
+
+export default DrawModal;

client/web/plugins/com.msgbyte.draw/src/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+  regChatInputAction,
+  Loadable,
+  openModal,
+  closeModal,
+} from '@capital/common';
+import { Translate } from './translate';
+const DrawModal = Loadable(() => import('./DrawModal'));
+
+regChatInputAction({
+  label: Translate.draw,
+  onClick: (actions) => {
+    const key = openModal(
+      <DrawModal actions={actions} onSuccess={() => closeModal(key)} />
+    );
+  },
+});

client/web/plugins/com.msgbyte.draw/src/translate.ts

@@ -0,0 +1,6 @@
+import { localTrans } from '@capital/common';
+
+export const Translate = {
+  draw: localTrans({ 'zh-CN': '绘图', 'en-US': 'Draw' }),
+  send: localTrans({ 'zh-CN': '发送', 'en-US': 'Send' }),
+};

client/web/plugins/com.msgbyte.draw/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react",
+    "paths": {
+      "@capital/*": ["../../src/plugin/*"],
+    }
+  }
+}