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

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;
+    /** 插入多个视频 */
+    insertVideos: (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.11";
+const version = "0.0.14-beta.13";
 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);
@@ -144,7 +164,11 @@ function ApiFactory() {
             height: it.height,
             x: places[index].x,
             y: places[index].y,
-            fileId: it.url
+            fileId: it.url,
+            customData: {
+              naturalWidth: it.width,
+              naturalHeight: it.height
+            }
           };
         })
       );
@@ -364,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(
@@ -476,6 +500,75 @@ function ApiFactory() {
             selectedElementIds: {}
           }
         });
+      },
+      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
+            };
+          })
+        );
+        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
+              }
+            };
+          })
+        );
+        const currentElements = excalidrawAPI.getSceneElements();
+        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.11";
+  const version = "0.0.14-beta.13";
   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);
@@ -144,7 +164,11 @@
               height: it.height,
               x: places[index].x,
               y: places[index].y,
-              fileId: it.url
+              fileId: it.url,
+              customData: {
+                naturalWidth: it.width,
+                naturalHeight: it.height
+              }
             };
           })
         );
@@ -364,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(
@@ -476,6 +500,75 @@
               selectedElementIds: {}
             }
           });
+        },
+        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
+              };
+            })
+          );
+          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
+                }
+              };
+            })
+          );
+          const currentElements = excalidrawAPI.getSceneElements();
+          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.11",
+  "version": "0.0.14-beta.13",
   "type": "module",
   "main": "lib/index.js",
   "exports": {