@8btc/xcanvas 0.0.14-beta.12 → 0.0.14-beta.14

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

@@ -42,13 +42,13 @@ export declare interface XCanvasAPI {
      */
     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: (data: {
+    insertCustomElementBesideSelection: (data: {
         component: string;
         link?: string;
         [key: string]: any;
@@ -75,6 +75,8 @@ export declare interface XCanvasAPI {
      * 删除选区里的全部元素
      */
     deleteSelection: () => 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.12";
+const version = "0.0.14-beta.14";
 const packageJson = {
   version
 };
@@ -100,6 +100,26 @@ function findPlaceForNewElements(appState, elements, newElements) {
   });
   return ret;
 }
+function getVideoDimensions(videoUrl) {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video");
+    video.src = videoUrl;
+    video.crossOrigin = "anonymous";
+    video.onloadedmetadata = function() {
+      const width = video.videoWidth;
+      const height = video.videoHeight;
+      video.src = "";
+      video.remove();
+      resolve({ width, height });
+    };
+    video.onerror = function(err) {
+      video.src = "";
+      video.remove();
+      reject(new Error(`视频加载失败：${err}`));
+    };
+    video.load();
+  });
+}
 function ApiFactory() {
   const excalidrawAPI = useAtomValue(excalidrawApiAtom);
   const setApi = useSetAtom(apiAtom);
@@ -368,7 +388,7 @@ function ApiFactory() {
         const base64 = canvas.toDataURL("image/png", 1);
         return base64;
       },
-      insertCustomElement: (data, positonCalculator) => {
+      insertCustomElementBesideSelection: (data, positonCalculator) => {
         if (!excalidrawAPI) return;
         const appState = excalidrawAPI.getAppState();
         const selectedElements = getSelectedElements(
@@ -480,6 +500,81 @@ function ApiFactory() {
             selectedElementIds: {}
           }
         });
+      },
+      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(),
+          rets
+        );
+        const els = convertToExcalidrawElements(
+          rets.map((it, index) => {
+            return {
+              type: "embeddable",
+              width: it.width,
+              height: it.height,
+              x: places[index].x,
+              y: places[index].y,
+              // 添加必需的基本样式属性
+              strokeColor: "#ffffff00",
+              backgroundColor: "transparent",
+              fillStyle: "solid",
+              strokeWidth: 2,
+              strokeStyle: "solid",
+              roundness: null,
+              roughness: 0,
+              opacity: 100,
+              id: `video-${Date.now()}`,
+              link: it.url ?? "https://www.google.com",
+              // 添加必需的变换属性
+              angle: 0,
+              seed: Math.random(),
+              version: 1,
+              versionNonce: Math.random(),
+              // 添加必需的状态属性
+              locked: false,
+              isDeleted: false,
+              groupIds: [],
+              // 添加绑定框属性
+              boundElements: [],
+              updated: Date.now(),
+              // 添加必需的索引和帧ID属性
+              frameId: null,
+              index: null,
+              // 添加缺失的index属性
+              customData: {
+                custom: true,
+                component: "video",
+                naturalWidth: it.width,
+                naturalHeight: it.height,
+                url: it.url
+              }
+            };
+          })
+        );
+        excalidrawAPI.updateScene({
+          elements: [...currentElements, ...els]
+        });
+        excalidrawAPI.scrollToContent(els, {
+          animate: currentElements.length === 0 ? false : true
+        });
       }
     });
   }, [excalidrawAPI, setApi]);

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.12";
+  const version = "0.0.14-beta.14";
   const packageJson = {
     version
   };
@@ -100,6 +100,26 @@
     });
     return ret;
   }
+  function getVideoDimensions(videoUrl) {
+    return new Promise((resolve, reject) => {
+      const video = document.createElement("video");
+      video.src = videoUrl;
+      video.crossOrigin = "anonymous";
+      video.onloadedmetadata = function() {
+        const width = video.videoWidth;
+        const height = video.videoHeight;
+        video.src = "";
+        video.remove();
+        resolve({ width, height });
+      };
+      video.onerror = function(err) {
+        video.src = "";
+        video.remove();
+        reject(new Error(`视频加载失败：${err}`));
+      };
+      video.load();
+    });
+  }
   function ApiFactory() {
     const excalidrawAPI = jotai.useAtomValue(excalidrawApiAtom);
     const setApi = jotai.useSetAtom(apiAtom);
@@ -368,7 +388,7 @@
           const base64 = canvas.toDataURL("image/png", 1);
           return base64;
         },
-        insertCustomElement: (data, positonCalculator) => {
+        insertCustomElementBesideSelection: (data, positonCalculator) => {
           if (!excalidrawAPI) return;
           const appState = excalidrawAPI.getAppState();
           const selectedElements = getSelectedElements(
@@ -480,6 +500,81 @@
               selectedElementIds: {}
             }
           });
+        },
+        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(),
+            rets
+          );
+          const els = excalidraw.convertToExcalidrawElements(
+            rets.map((it, index) => {
+              return {
+                type: "embeddable",
+                width: it.width,
+                height: it.height,
+                x: places[index].x,
+                y: places[index].y,
+                // 添加必需的基本样式属性
+                strokeColor: "#ffffff00",
+                backgroundColor: "transparent",
+                fillStyle: "solid",
+                strokeWidth: 2,
+                strokeStyle: "solid",
+                roundness: null,
+                roughness: 0,
+                opacity: 100,
+                id: `video-${Date.now()}`,
+                link: it.url ?? "https://www.google.com",
+                // 添加必需的变换属性
+                angle: 0,
+                seed: Math.random(),
+                version: 1,
+                versionNonce: Math.random(),
+                // 添加必需的状态属性
+                locked: false,
+                isDeleted: false,
+                groupIds: [],
+                // 添加绑定框属性
+                boundElements: [],
+                updated: Date.now(),
+                // 添加必需的索引和帧ID属性
+                frameId: null,
+                index: null,
+                // 添加缺失的index属性
+                customData: {
+                  custom: true,
+                  component: "video",
+                  naturalWidth: it.width,
+                  naturalHeight: it.height,
+                  url: it.url
+                }
+              };
+            })
+          );
+          excalidrawAPI.updateScene({
+            elements: [...currentElements, ...els]
+          });
+          excalidrawAPI.scrollToContent(els, {
+            animate: currentElements.length === 0 ? false : true
+          });
         }
       });
     }, [excalidrawAPI, setApi]);

package/package.json

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