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

package/dist/index.css

@@ -24,10 +24,9 @@
     --spacing: .25rem;
     --text-sm: .875rem;
     --text-sm--line-height: calc(1.25 / .875);
-    --text-base: 1rem;
-    --text-base--line-height: calc(1.5 / 1);
-    --font-weight-medium: 500;
-    --radius-2xl: 1rem;
+    --font-weight-bold: 700;
+    --radius-lg: .5rem;
+    --radius-xl: .75rem;
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
   }
@@ -295,8 +294,8 @@
     position: relative;
   }
 
-  .top-14 {
-    top: calc(var(--spacing) * 14);
+  .top-12 {
+    top: calc(var(--spacing) * 12);
   }
 
   .z-100000 {
@@ -327,8 +326,8 @@
     height: 33.3333%;
   }
 
-  .h-4 {
-    height: calc(var(--spacing) * 4);
+  .h-3 {
+    height: calc(var(--spacing) * 3);
   }
 
   .h-5 {
@@ -347,8 +346,8 @@
     height: 26px;
   }
 
-  .h-\[96px\] {
-    height: 96px;
+  .h-\[66px\] {
+    height: 66px;
   }
 
   .h-full {
@@ -363,8 +362,8 @@
     width: 33.3333%;
   }
 
-  .w-4 {
-    width: calc(var(--spacing) * 4);
+  .w-3 {
+    width: calc(var(--spacing) * 3);
   }
 
   .w-5 {
@@ -379,14 +378,18 @@
     width: 50px;
   }
 
-  .w-\[450px\] {
-    width: 450px;
+  .w-\[350px\] {
+    width: 350px;
   }
 
   .w-full {
     width: 100%;
   }
 
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+
   .translate-y-4 {
     --tw-translate-y: calc(var(--spacing) * 4);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -416,10 +419,6 @@
     align-items: center;
   }
 
-  .items-end {
-    align-items: flex-end;
-  }
-
   .justify-between {
     justify-content: space-between;
   }
@@ -436,24 +435,28 @@
     gap: calc(var(--spacing) * 2.5);
   }
 
-  :where(.space-y-3 > :not(:last-child)) {
+  :where(.space-y-2 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
-    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
-    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
   }
 
   .overflow-hidden {
     overflow: hidden;
   }
 
-  .rounded-2xl {
-    border-radius: var(--radius-2xl);
-  }
-
   .rounded-\[40px\] {
     border-radius: 40px;
   }
 
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -484,25 +487,24 @@
     background-color: var(--color-black);
   }
 
-  .p-2 {
-    padding: calc(var(--spacing) * 2);
+  .object-contain {
+    object-fit: contain;
   }
 
-  .p-4 {
-    padding: calc(var(--spacing) * 4);
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
   }
 
-  .px-2 {
-    padding-inline: calc(var(--spacing) * 2);
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
   }
 
-  .py-5 {
-    padding-block: calc(var(--spacing) * 5);
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
   }
 
-  .text-base {
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
   }
 
   .text-sm {
@@ -510,6 +512,15 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
 
+  .text-\[14px\] {
+    font-size: 14px;
+  }
+
+  .leading-0 {
+    --tw-leading: calc(var(--spacing) * 0);
+    line-height: calc(var(--spacing) * 0);
+  }
+
   .leading-6 {
     --tw-leading: calc(var(--spacing) * 6);
     line-height: calc(var(--spacing) * 6);
@@ -520,9 +531,13 @@
     line-height: 22px;
   }
 
-  .font-medium {
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .whitespace-nowrap {
+    white-space: nowrap;
   }
 
   .text-black {

package/dist/index.d.ts

@@ -1,19 +1,11 @@
+import { AppState } from '@excalidraw/excalidraw/types';
+import { ExcalidrawEmbeddableElement } from '@excalidraw/excalidraw/element/types';
 import { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types';
-import { JSX } from 'react/jsx-runtime';
-import { WildcardHandler } from 'mitt';
+import { JSX } from '../node_modules/react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { NonDeleted } from '@excalidraw/excalidraw/element/types';
 
-export declare type Events = {
-    "chat-to-edit": {
-        type: "chat-to-edit";
-        url: string;
-        prompt: string;
-        id: string;
-    };
-};
-
-export { WildcardHandler }
-
-export declare function XCanvas({ registerApi, registerEventHandler }: XcanvasProps): JSX.Element;
+export declare function XCanvas({ registerApi, renderEmbeddable, floatingMenu, }: XcanvasProps): JSX_2.Element;
 
 export declare interface XCanvasAPI {
     /** Excalidraw 原始api */
@@ -41,11 +33,40 @@ export declare 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 declare interface XcanvasProps {
     registerApi?: (api: XCanvasAPI | null) => void;
-    registerEventHandler?: WildcardHandler<Events>;
+    renderEmbeddable?: (element: NonDeleted<ExcalidrawEmbeddableElement>, appState: AppState) => JSX.Element | null;
+    floatingMenu?: React.ReactNode;
 }
 
 export { }

package/dist/index.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { M } from "./XCanvas-DHNR7z30.js";
+import { M } from "./XCanvas-DsVCzRyE.js";
 import "jotai";
 import "react";
 export {