@8btc/xcanvas 0.0.12 → 0.0.13-beta.0

package/README.md

@@ -5,6 +5,15 @@
 ### 示例
 
 ```jsx
+export interface XcanvasProps {
+  registerApi?: (api: XCanvasAPI | null) => void;
+  renderEmbeddable?: (
+    element: NonDeleted<ExcalidrawEmbeddableElement>,
+    appState: AppState
+  ) => JSX.Element | null;
+  floatingMenu?: React.ReactNode;
+}
+
 export interface XCanvasAPI {
   /** Excalidraw 原始api */
   rawApi: ExcalidrawImperativeAPI;
@@ -31,14 +40,38 @@ export interface XCanvasAPI {
    * 清空Canvas
    */
   reset: () => void;
+  /**
+   * 导出当前选区为图片（dataUrl）
+   * @returns dataUrl
+   * @throws  如果没有选区，调用这个函数会抛出错误
+   */
+  exportSelection: () => Promise<string>;
+  /**
+   * 插入embeddableElement元素
+   *
+   * @param data 调用 renderEmbeddable 时， 可以从 element.data 访问到这里传入的数据
+   * @param positonCalculator 入参为当前选区左上角x,y 和宽高，返回值为插入元素的左上角x,y,w,h
+   * @returns 如果成功插入返回元素id，否则返回undefined
+   */
+  insertCustomElement: (
+    data: {
+      component: string,
+      link?: string,
+      [key: string]: any,
+    },
+    positonCalculator?: (param: {
+      x: number,
+      y: number,
+      width: number,
+      height: number,
+    }) =>
+      | undefined
+      | {
+          x: number,
+          y: number,
+          width: number,
+          height: number,
+        }
+  ) => string | undefined;
 }
-
-export type Events = {
-  "chat-to-edit": {
-    type: "chat-to-edit",
-    url: string,
-    prompt: string,
-    id: string,
-  },
-};
 ```