Merge pull request #129 from chaitin/excalidraw-add-font

Excalidraw add font

declare.d.ts

@@ -1,4 +1,8 @@
 declare module 'css2less';
+declare module 'clean-css' {
+  export type Options = any;
+  export default any;
+}
 declare module 'figlet/importable-fonts/Standard.js';
 declare module 'figlet/importable-fonts/1Row.js';
 declare module 'figlet/importable-fonts/3D-ASCII';

package.json

@@ -21,12 +21,12 @@
     }
   },
   "dependencies": {
+    "@chaitin_rivers/excalidraw": "^0.17.1",
     "@chaitin_rivers/multi_river": "^0.0.23",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.0",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@excalidraw/excalidraw": "^0.17.2",
     "@ffmpeg/ffmpeg": "^0.12.6",
     "@ffmpeg/types": "^0.12.2",
     "@ffmpeg/util": "^0.12.1",

src/components/MainContent/index.tsx

@@ -62,7 +62,10 @@ const MainContent: React.FC<{
           dom.style.position = 'unset';
           dom.style.inset = '0';
           dom.style.maxWidth = 'unset';
-          if (riverHeader) riverHeader.style.display = 'block';
+          if (riverHeader) {
+            dom.style.paddingTop = '64px';
+            riverHeader.style.display = 'block';
+          }
         }
       }
     };

src/pages/_app.tsx

@@ -21,6 +21,7 @@ import { useMemo } from 'react';
 import { allTools } from '@/utils/tools';
 import Head from 'next/head';
 import { Header as RiverHeader } from '@chaitin_rivers/multi_river';
+import '@chaitin_rivers/excalidraw/index.css';
 
 const clientSideEmotionCache = createEmotionCache();
 

src/pages/color_convert.tsx

@@ -185,6 +185,19 @@ function convertColor(colorString: string): ColorConversionResult | string {
       hex: rgbaToHex(rgbaValues),
     };
   }
+  if (colorString.startsWith('rgb')) {
+    const rgbaValues = colorString
+      .substring(4, colorString.length - 1)
+      .split(',')
+      .map((value) => parseFloat(value));
+    const rgba = `rgba(${rgbaValues[0]}, ${rgbaValues[1]}, ${rgbaValues[2]}, 1)`;
+    return {
+      rgb: rgbaTrans(rgba),
+      rgba,
+      hsl: rgbaToHsl(rgbaValues),
+      hex: rgbaToHex(rgbaValues),
+    };
+  }
 
   if (colorString.startsWith('hsl')) {
     const hslValues = colorString
@@ -246,7 +259,7 @@ const ColorConvert: React.FC = () => {
               size='small'
               sx={{
                 fontSize: '14px',
-                maxWidth: '100px',
+                width: '100px',
                 borderRadius: '4px',
                 ml: 'auto',
                 height: '28px',

src/pages/excalidraw.tsx

@@ -6,7 +6,7 @@ import React, { useState, useEffect } from 'react';
 const Board: React.FC = () => {
   const [Excalidraw, setExcalidraw] = useState<any>(null);
   useEffect(() => {
-    import('@excalidraw/excalidraw').then((comp: any) =>
+    import('@chaitin_rivers/excalidraw').then((comp: any) =>
       setExcalidraw(comp.Excalidraw)
     );
   }, []);
@@ -35,7 +35,7 @@ const Board: React.FC = () => {
           },
         }}
       >
-        {Excalidraw && <Excalidraw />}
+        {Excalidraw && <Excalidraw langCode='zh-CN' />}
       </Box>
     </MainContent>
   );

src/types/declare.d.ts

@@ -55,7 +55,7 @@ type SocketClient = {
 };
 
 declare module 'nextPage/nextpage';
-declare module '@excalidraw/excalidraw';
+declare module '@chaitin_rivers/excalidraw';
 declare module 'gofmt.js';
 declare module 'uuid';
 declare module 'apache-crypt';