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

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export declare interface XCanvasAPI {
     insertImgs: (url: string[]) => Promise<void>;
     /** 追加多张图片到画布末尾, 如果画布中存在对应图片（url相同），则不做任何操作 */
     appendImgs: (urls: string[]) => Promise<void>;
+    appendImgsForMaze: (urls: string[]) => Promise<void>;
     /** 保存canvas数据 */
     save: () => any;
     /** 从数据中恢复canvas画布 */
@@ -32,10 +33,14 @@ export declare interface XCanvasAPI {
     reset: () => void;
     /**
      * 导出当前选区为图片（dataUrl）, 特殊情况：当前选区为单张外部传入图片，则直接返回外部图片url
+     *
+     * @param tryToSplit  是否尝试拆分选区内的图片元素（当选区内全是图片时生效）
+     *  如果选区内的元素都是图片，则返回选区内图片url数组
+     *  如果选区内有非图片元素，则返回选区区域的dataUrl
      * @returns dataUrl | url
      * @throws  如果没有选区，调用这个函数会抛出错误
      */
-    exportSelection: () => Promise<string>;
+    exportSelection: (tryToSplit?: boolean) => Promise<string | string[]>;
     /**
      * 插入embeddableElement元素
      *
@@ -66,6 +71,10 @@ export declare interface XCanvasAPI {
      * 裁切图片
      */
     cropImage: () => void;
+    /**
+     * 删除选区里的全部元素
+     */
+    deleteSelection: () => 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.1";
+const version = "0.0.14-beta.11";
 const packageJson = {
   version
 };
@@ -40,7 +40,7 @@ function CustomExcalidraw(props) {
 function fetchImageAsDataUrl(src) {
   return new Promise((resolve, reject) => {
     const img = new Image();
-    img.crossOrigin = "Anonymous";
+    img.crossOrigin = "anonymous";
     img.onload = () => {
       const canvas = document.createElement("canvas");
       canvas.width = img.naturalWidth;
@@ -118,15 +118,18 @@ function ApiFactory() {
           };
         })
       );
+      const files = excalidrawAPI.getFiles();
       rets.forEach((it) => {
-        excalidrawAPI.addFiles([
-          {
-            mimeType: "image/png",
-            id: it.url,
-            dataURL: it.dataUrl,
-            created: Date.now()
-          }
-        ]);
+        if (!files[it.url]) {
+          excalidrawAPI.addFiles([
+            {
+              mimeType: "image/png",
+              id: it.url,
+              dataURL: it.dataUrl,
+              created: Date.now()
+            }
+          ]);
+        }
       });
       const places = findPlaceForNewElements(
         excalidrawAPI.getAppState(),
@@ -172,9 +175,47 @@ function ApiFactory() {
       },
       insertImgs,
       appendImgs: async (urls) => {
-        const files = excalidrawAPI.getFiles();
-        const newUrls = urls.filter((it) => !files[it]);
-        await insertImgs(newUrls);
+        const els = excalidrawAPI.getSceneElements();
+        const imgEls = els.filter((el) => el.type === "image");
+        const idSet = /* @__PURE__ */ new Set();
+        const intersecitonEls = [];
+        imgEls.forEach((el) => {
+          idSet.add(el.fileId);
+          if (urls.includes(el.fileId)) {
+            intersecitonEls.push(el);
+          }
+        });
+        const newUrls = urls.filter((url) => !idSet.has(url));
+        if (newUrls.length !== 0) {
+          await insertImgs(newUrls);
+        } else {
+          excalidrawAPI.scrollToContent(intersecitonEls, {
+            animate: els.length === 0 ? false : true
+          });
+        }
+      },
+      // 插入的图片后缀会自动带上时间戳后缀，用于解决maze跨域问题
+      // `${it}?t=${Date.now()}`;
+      appendImgsForMaze: async (urls) => {
+        const els = excalidrawAPI.getSceneElements();
+        const imgEls = els.filter((el) => el.type === "image");
+        const idSet = /* @__PURE__ */ new Set();
+        const intersecitonEls = [];
+        imgEls.forEach((el) => {
+          let elFileId = el.fileId.split("?t=")[0];
+          idSet.add(elFileId);
+          if (urls.includes(elFileId)) {
+            intersecitonEls.push(el);
+          }
+        });
+        const newUrls = urls.filter((url) => !idSet.has(url)).map((url) => `${url}?t=${Date.now()}`);
+        if (newUrls.length !== 0) {
+          await insertImgs(newUrls);
+        } else {
+          excalidrawAPI.scrollToContent(intersecitonEls, {
+            animate: els.length === 0 ? false : true
+          });
+        }
       },
       save: () => {
         const appState = excalidrawAPI.getAppState();
@@ -286,8 +327,7 @@ function ApiFactory() {
           }
         });
       },
-      exportSelection: async () => {
-        if (!excalidrawAPI) return;
+      exportSelection: async (tryToSplit) => {
         const appState = excalidrawAPI.getAppState();
         const selectedElements = getSelectedElements(
           excalidrawAPI.getSceneElements(),
@@ -297,13 +337,20 @@ function ApiFactory() {
           throw "没有选中任何元素";
         }
         const files = excalidrawAPI.getFiles();
-        if (selectedElements.length === 1 && selectedElements[0].type === "image" && selectedElements[0].fileId) {
-          console.log(files[selectedElements[0].fileId].dataURL);
+        if (selectedElements.length === 1 && selectedElements[0].type === "image" && selectedElements[0].fileId && !selectedElements[0].crop) {
           if (selectedElements[0].fileId.startsWith("http")) {
             return selectedElements[0].fileId;
           }
           return files[selectedElements[0].fileId].dataURL;
         }
+        if (tryToSplit && selectedElements.every((el) => el.type === "image")) {
+          return selectedElements.map((el) => {
+            if (el.fileId?.startsWith("http") && !el.crop) {
+              return selectedElements[0].fileId;
+            }
+            return files[el.fileId].dataURL;
+          });
+        }
         const canvas = await exportToCanvas({
           elements: selectedElements,
           appState: {
@@ -351,18 +398,18 @@ function ApiFactory() {
             y: minY,
             width: h,
             height: h,
-            ...customPos,
-            id: `loading-${Date.now()}`,
-            link: data.link ?? "https://www.google.com",
             // 添加必需的基本样式属性
-            strokeColor: "#ffffff",
+            strokeColor: "#ffffff00",
             backgroundColor: "transparent",
             fillStyle: "solid",
-            strokeWidth: 1,
+            strokeWidth: 2,
             strokeStyle: "solid",
             roundness: null,
-            roughness: 1,
+            roughness: 0,
             opacity: 100,
+            ...customPos,
+            id: `loading-${Date.now()}`,
+            link: data.link ?? "https://www.google.com",
             // 添加必需的变换属性
             angle: 0,
             seed: Math.random(),
@@ -414,6 +461,21 @@ function ApiFactory() {
             croppingElementId: selectedElements[0].id
           }
         });
+      },
+      deleteSelection: () => {
+        const appState = excalidrawAPI.getAppState();
+        const selectedIds = appState.selectedElementIds;
+        const currentElements = excalidrawAPI.getSceneElements();
+        const newElements = currentElements.filter((el) => {
+          return !selectedIds[el.id];
+        });
+        excalidrawAPI.updateScene({
+          elements: [...newElements],
+          appState: {
+            ...appState,
+            selectedElementIds: {}
+          }
+        });
       }
     });
   }, [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.1";
+  const version = "0.0.14-beta.11";
   const packageJson = {
     version
   };
@@ -40,7 +40,7 @@
   function fetchImageAsDataUrl(src) {
     return new Promise((resolve, reject) => {
       const img = new Image();
-      img.crossOrigin = "Anonymous";
+      img.crossOrigin = "anonymous";
       img.onload = () => {
         const canvas = document.createElement("canvas");
         canvas.width = img.naturalWidth;
@@ -118,15 +118,18 @@
             };
           })
         );
+        const files = excalidrawAPI.getFiles();
         rets.forEach((it) => {
-          excalidrawAPI.addFiles([
-            {
-              mimeType: "image/png",
-              id: it.url,
-              dataURL: it.dataUrl,
-              created: Date.now()
-            }
-          ]);
+          if (!files[it.url]) {
+            excalidrawAPI.addFiles([
+              {
+                mimeType: "image/png",
+                id: it.url,
+                dataURL: it.dataUrl,
+                created: Date.now()
+              }
+            ]);
+          }
         });
         const places = findPlaceForNewElements(
           excalidrawAPI.getAppState(),
@@ -172,9 +175,47 @@
         },
         insertImgs,
         appendImgs: async (urls) => {
-          const files = excalidrawAPI.getFiles();
-          const newUrls = urls.filter((it) => !files[it]);
-          await insertImgs(newUrls);
+          const els = excalidrawAPI.getSceneElements();
+          const imgEls = els.filter((el) => el.type === "image");
+          const idSet = /* @__PURE__ */ new Set();
+          const intersecitonEls = [];
+          imgEls.forEach((el) => {
+            idSet.add(el.fileId);
+            if (urls.includes(el.fileId)) {
+              intersecitonEls.push(el);
+            }
+          });
+          const newUrls = urls.filter((url) => !idSet.has(url));
+          if (newUrls.length !== 0) {
+            await insertImgs(newUrls);
+          } else {
+            excalidrawAPI.scrollToContent(intersecitonEls, {
+              animate: els.length === 0 ? false : true
+            });
+          }
+        },
+        // 插入的图片后缀会自动带上时间戳后缀，用于解决maze跨域问题
+        // `${it}?t=${Date.now()}`;
+        appendImgsForMaze: async (urls) => {
+          const els = excalidrawAPI.getSceneElements();
+          const imgEls = els.filter((el) => el.type === "image");
+          const idSet = /* @__PURE__ */ new Set();
+          const intersecitonEls = [];
+          imgEls.forEach((el) => {
+            let elFileId = el.fileId.split("?t=")[0];
+            idSet.add(elFileId);
+            if (urls.includes(elFileId)) {
+              intersecitonEls.push(el);
+            }
+          });
+          const newUrls = urls.filter((url) => !idSet.has(url)).map((url) => `${url}?t=${Date.now()}`);
+          if (newUrls.length !== 0) {
+            await insertImgs(newUrls);
+          } else {
+            excalidrawAPI.scrollToContent(intersecitonEls, {
+              animate: els.length === 0 ? false : true
+            });
+          }
         },
         save: () => {
           const appState = excalidrawAPI.getAppState();
@@ -286,8 +327,7 @@
             }
           });
         },
-        exportSelection: async () => {
-          if (!excalidrawAPI) return;
+        exportSelection: async (tryToSplit) => {
           const appState = excalidrawAPI.getAppState();
           const selectedElements = getSelectedElements(
             excalidrawAPI.getSceneElements(),
@@ -297,13 +337,20 @@
             throw "没有选中任何元素";
           }
           const files = excalidrawAPI.getFiles();
-          if (selectedElements.length === 1 && selectedElements[0].type === "image" && selectedElements[0].fileId) {
-            console.log(files[selectedElements[0].fileId].dataURL);
+          if (selectedElements.length === 1 && selectedElements[0].type === "image" && selectedElements[0].fileId && !selectedElements[0].crop) {
             if (selectedElements[0].fileId.startsWith("http")) {
               return selectedElements[0].fileId;
             }
             return files[selectedElements[0].fileId].dataURL;
           }
+          if (tryToSplit && selectedElements.every((el) => el.type === "image")) {
+            return selectedElements.map((el) => {
+              if (el.fileId?.startsWith("http") && !el.crop) {
+                return selectedElements[0].fileId;
+              }
+              return files[el.fileId].dataURL;
+            });
+          }
           const canvas = await excalidraw.exportToCanvas({
             elements: selectedElements,
             appState: {
@@ -351,18 +398,18 @@
               y: minY,
               width: h,
               height: h,
-              ...customPos,
-              id: `loading-${Date.now()}`,
-              link: data.link ?? "https://www.google.com",
               // 添加必需的基本样式属性
-              strokeColor: "#ffffff",
+              strokeColor: "#ffffff00",
               backgroundColor: "transparent",
               fillStyle: "solid",
-              strokeWidth: 1,
+              strokeWidth: 2,
               strokeStyle: "solid",
               roundness: null,
-              roughness: 1,
+              roughness: 0,
               opacity: 100,
+              ...customPos,
+              id: `loading-${Date.now()}`,
+              link: data.link ?? "https://www.google.com",
               // 添加必需的变换属性
               angle: 0,
               seed: Math.random(),
@@ -414,6 +461,21 @@
               croppingElementId: selectedElements[0].id
             }
           });
+        },
+        deleteSelection: () => {
+          const appState = excalidrawAPI.getAppState();
+          const selectedIds = appState.selectedElementIds;
+          const currentElements = excalidrawAPI.getSceneElements();
+          const newElements = currentElements.filter((el) => {
+            return !selectedIds[el.id];
+          });
+          excalidrawAPI.updateScene({
+            elements: [...newElements],
+            appState: {
+              ...appState,
+              selectedElementIds: {}
+            }
+          });
         }
       });
     }, [excalidrawAPI, setApi]);

package/package.json

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