dumi集成 Excalidraw

集成 Excalidraw

将Excalidraw集成到dumi中，可以直接加载excalidraw文件，并在页面中展示, 实现各种图形的展示。

例如在公共资源目录下新建excalidraw后缀的文件，Webstorm安装excalidraw integration插件， 直接在编辑器上打开文件然后编辑即可

安装依赖

pnpm add @excalidraw/excalidraw

使用

在.dumi/theme/builtins新建FlowDraw/index.tsx文件, 内容如下：

import { Excalidraw } from '@excalidraw/excalidraw';
import axios from 'axios';
import { isEmpty } from 'lodash';
import React, { useEffect, useState } from 'react';

const FlowDraw: React.FC<any> = (props) => {
  const [initialData, setInitialData] = useState<any>({});
  const [drawAPI, setDrawAPI] = useState<any>({});
  const { height = '500px' } = props;
  useEffect(() => {
    // 通过发送请求获取excalidraw文件内容
    axios.get(props.src).then((res) => {
      setInitialData(res.data);
    });
  }, []);

  useEffect(() => {
    if (!isEmpty(initialData) && drawAPI?.updateScene) {
      drawAPI?.updateScene(initialData);
    }
  }, [drawAPI, initialData]);
  return (
    <div style={{ height: height }}>
      <Excalidraw
        initialData={initialData}
        excalidrawAPI={(api: any) => {
          setDrawAPI(api);
        }}
      />
    </div>
  );
};

export default FlowDraw;

然后在.md文件中引入组件，并设置src属性为Excalidraw的文件地址，其中excalidraw文件可以放在公共资源目录文件中

<FlowDraw src="/draw/webgl/canvas坐标系.excalidraw" height="600px"></FlowDraw>

这样就可以在页面中展示Excalidraw画布了

由于Excalidraw的一些文件是从CDN(https://unpkg.com/@excalidraw/excalidraw/dist/)加载的，如果网络不够好的情况下，可能界面会一直处于加载中，那么可以将node_modules/@excalidraw/excalidraw/dis目录下的excalidraw-assets（用于生产）文件夹和excalidraw-assets-dev(用于开发)文件夹复制到公共资源目录中，我将这两个文件夹放在public/draw目录下

然后在入口文件中设置window.EXCALIDRAW_ASSET_PATH的值指向public下的draw目录, 由于我在dumi中并没有找到入口文件，但是在dumirc.ts中可以配置headScripts， 在headScripts中添加内容即可

export default defineConfig({
  headScripts: [
    'window.EXCALIDRAW_ASSET_PATH = "/draw/";'
  ],
})

遗留问题

• 在Webstorm中编辑后，图形的位置会出现偏移, 不过可以拖动，这个问题暂可以接受，后续有时间在进行优化

• 在切换暗黑主题后，没有切换成暗黑主题, 这个后续优化吧