@8btc/xcanvas 0.0.14-beta.13 → 0.0.14-beta.15

package/README.md

@@ -20,6 +20,8 @@ export interface XCanvasAPI {
   insertImgs: (url: string[]) => Promise<void>;
   /** 追加多张图片到画布末尾, 如果画布中存在对应图片（url相同），则不做任何操作 */
   appendImgs: (urls: string[]) => Promise<void>;
+  // 插入的图片后缀会自动带上时间戳后缀，用于解决maze跨域问题 `${url}?t=${Date.now()}`
+  appendImgsForMaze: (urls: string[]) => Promise<void>;
   /** 保存canvas数据 */
   save: () => any;
   /** 从数据中恢复canvas画布 */
@@ -39,18 +41,22 @@ export interface XCanvasAPI {
   reset: () => void;
   /**
    * 导出当前选区为图片（dataUrl）, 特殊情况：当前选区为单张外部传入图片，则直接返回外部图片url
+   *
+   * @param tryToSplit  是否尝试拆分选区内的图片元素（当选区内全是图片时生效）
+   *  如果选区内的元素都是图片，则返回选区内图片url数组
+   *  如果选区内有非图片元素，则返回选区区域的dataUrl
    * @returns dataUrl | url
    * @throws  如果没有选区，调用这个函数会抛出错误
    */
-  exportSelection: () => Promise<string>;
+  exportSelection: (tryToSplit?: boolean) => Promise<string | string[]>;
   /**
-   * 插入embeddableElement元素
+   * 在当前旁边插入embeddableElement元素
    *
    * @param data 调用 renderEmbeddable 时， 可以从 element.data 访问到这里传入的数据
    * @param positonCalculator 入参为当前选区左上角x,y 和宽高，返回值为插入元素的左上角x,y,w,h
    * @returns 如果成功插入返回元素id，否则返回undefined
    */
-  insertCustomElement: (
+  insertCustomElementBesideSelection: (
     data: {
       component: string,
       link?: string,
@@ -70,5 +76,19 @@ export interface XCanvasAPI {
           height: number,
         }
   ) => string | undefined;
+  /**
+   * 判断当前是否可以裁切图片
+   */
+  predicateCropImage: () => boolean;
+  /**
+   * 裁切图片
+   */
+  cropImage: () => void;
+  /**
+   * 删除选区里的全部元素
+   */
+  deleteSelection: () => void;
+  /** 插入多个视频 */
+  insertVideos: (urls: string[]) => Promise<void>;
 }
 ```

package/dist/index.d.ts

@@ -75,8 +75,8 @@ export declare interface XCanvasAPI {
      * 删除选区里的全部元素
      */
     deleteSelection: () => void;
-    /** 插入多个视频 */
-    insertVideos: (urls: string[]) => Promise<void>;
+    /** 插入一个视频 */
+    insertVideo: (urls: string) => Promise<void>;
 }
 
 export declare interface XcanvasProps extends ExcalidrawProps {

package/dist/index.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import { Excalidraw, convertToExcalidrawElements, exportToCanvas } from "@8btc/excalidraw";
 import { useEffect } from "react";
-const version = "0.0.14-beta.13";
+const version = "0.0.14-beta.15";
 const packageJson = {
   version
 };
@@ -298,7 +298,6 @@ function ApiFactory() {
           (it) => it.type === "embeddable" && it.id === id
         );
         if (!loadingEl) {
-          insertImgs(urls);
           return;
         }
         const rets = await Promise.all(
@@ -501,17 +500,24 @@ function ApiFactory() {
           }
         });
       },
-      insertVideos: async (urls) => {
-        if (urls.length === 0) return;
-        const rets = await Promise.all(
-          urls.map(async (it) => {
-            const temp = await getVideoDimensions(it);
-            return {
-              ...temp,
-              url: it
-            };
-          })
+      insertVideo: async (url) => {
+        const currentElements = excalidrawAPI.getSceneElements();
+        const dimension = await getVideoDimensions(url);
+        const rets = [
+          {
+            ...dimension,
+            url
+          }
+        ];
+        const existElements = currentElements.filter(
+          (el) => el.type === "embeddable" && el.customData?.component === "video" && el.customData?.url === url
         );
+        if (existElements.length > 0) {
+          excalidrawAPI.scrollToContent(existElements, {
+            animate: true
+          });
+          return;
+        }
         const places = findPlaceForNewElements(
           excalidrawAPI.getAppState(),
           excalidrawAPI.getSceneElements(),
@@ -562,7 +568,6 @@ function ApiFactory() {
             };
           })
         );
-        const currentElements = excalidrawAPI.getSceneElements();
         excalidrawAPI.updateScene({
           elements: [...currentElements, ...els]
         });

package/dist/index.umd.cjs

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("jotai"), require("@8btc/excalidraw"), require("react")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "jotai", "@8btc/excalidraw", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.XCanvas = {}, global.jsxRuntime, global.Jotai, global.Excalidraw, global.React));
 })(this, (function(exports2, jsxRuntime, jotai, excalidraw, react) {
   "use strict";
-  const version = "0.0.14-beta.13";
+  const version = "0.0.14-beta.15";
   const packageJson = {
     version
   };
@@ -298,7 +298,6 @@
             (it) => it.type === "embeddable" && it.id === id
           );
           if (!loadingEl) {
-            insertImgs(urls);
             return;
           }
           const rets = await Promise.all(
@@ -501,17 +500,24 @@
             }
           });
         },
-        insertVideos: async (urls) => {
-          if (urls.length === 0) return;
-          const rets = await Promise.all(
-            urls.map(async (it) => {
-              const temp = await getVideoDimensions(it);
-              return {
-                ...temp,
-                url: it
-              };
-            })
+        insertVideo: async (url) => {
+          const currentElements = excalidrawAPI.getSceneElements();
+          const dimension = await getVideoDimensions(url);
+          const rets = [
+            {
+              ...dimension,
+              url
+            }
+          ];
+          const existElements = currentElements.filter(
+            (el) => el.type === "embeddable" && el.customData?.component === "video" && el.customData?.url === url
           );
+          if (existElements.length > 0) {
+            excalidrawAPI.scrollToContent(existElements, {
+              animate: true
+            });
+            return;
+          }
           const places = findPlaceForNewElements(
             excalidrawAPI.getAppState(),
             excalidrawAPI.getSceneElements(),
@@ -562,7 +568,6 @@
               };
             })
           );
-          const currentElements = excalidrawAPI.getSceneElements();
           excalidrawAPI.updateScene({
             elements: [...currentElements, ...els]
           });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@8btc/xcanvas",
   "private": false,
-  "version": "0.0.14-beta.13",
+  "version": "0.0.14-beta.15",
   "type": "module",
   "main": "lib/index.js",
   "exports": {