@8btc/xcanvas 0.0.14-beta.0 → 0.0.14-beta.10

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画布 */
@@ -58,6 +59,18 @@ export declare interface XCanvasAPI {
         width: number;
         height: number;
     }) => string | undefined;
+    /**
+     * 判断当前是否可以裁切图片
+     */
+    predicateCropImage: () => boolean;
+    /**
+     * 裁切图片
+     */
+    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.0";
+const version = "0.0.14-beta.10";
 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(),
@@ -153,6 +156,13 @@ function ApiFactory() {
         animate: currentElements.length === 0 ? false : true
       });
     };
+    const getSelectedElements = (elements, appState) => {
+      const selectedIds = appState.selectedElementIds;
+      const selectedElements = elements.filter(
+        (element) => selectedIds[element.id]
+      );
+      return selectedElements;
+    };
     setApi({
       rawApi: excalidrawAPI,
       __printCanvasInfo: () => {
@@ -165,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();
@@ -282,14 +330,15 @@ function ApiFactory() {
       exportSelection: async () => {
         if (!excalidrawAPI) return;
         const appState = excalidrawAPI.getAppState();
-        const selectedIds = appState.selectedElementIds;
-        if (Object.keys(selectedIds).length === 0) {
+        const selectedElements = getSelectedElements(
+          excalidrawAPI.getSceneElements(),
+          appState
+        );
+        if (selectedElements.length === 0) {
           throw "没有选中任何元素";
         }
-        const selectedElements = excalidrawAPI.getSceneElements().filter((element) => appState.selectedElementIds[element.id]);
         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;
           }
@@ -298,8 +347,7 @@ function ApiFactory() {
         const canvas = await exportToCanvas({
           elements: selectedElements,
           appState: {
-            ...appState,
-            selectedElementIds: selectedIds
+            ...appState
           },
           files,
           mimeType: "image/png",
@@ -312,11 +360,10 @@ function ApiFactory() {
       insertCustomElement: (data, positonCalculator) => {
         if (!excalidrawAPI) return;
         const appState = excalidrawAPI.getAppState();
-        const selectedIds = appState.selectedElementIds;
-        if (Object.keys(selectedIds).length === 0) {
-          throw "没有选中任何元素";
-        }
-        const selectedElements = excalidrawAPI.getSceneElements().filter((element) => appState.selectedElementIds[element.id]);
+        const selectedElements = getSelectedElements(
+          excalidrawAPI.getSceneElements(),
+          appState
+        );
         if (selectedElements.length === 0) {
           throw "没有选中任何可见元素";
         }
@@ -344,18 +391,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(),
@@ -383,6 +430,45 @@ function ApiFactory() {
           elements: [...currentElements, ...el]
         });
         return el[0].id;
+      },
+      predicateCropImage: () => {
+        const appState = excalidrawAPI.getAppState();
+        const selectedElements = getSelectedElements(
+          excalidrawAPI.getSceneElements(),
+          appState
+        );
+        if (!appState.croppingElementId && selectedElements.length === 1 && selectedElements[0].type === "image") {
+          return true;
+        }
+        return false;
+      },
+      cropImage: () => {
+        const appState = excalidrawAPI.getAppState();
+        const selectedIds = appState.selectedElementIds;
+        const selectedElements = excalidrawAPI.getSceneElements().filter((element) => selectedIds[element.id]);
+        if (selectedElements.length !== 1) return;
+        excalidrawAPI.updateScene({
+          appState: {
+            ...appState,
+            isCropping: false,
+            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.0";
+  const version = "0.0.14-beta.10";
   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(),
@@ -153,6 +156,13 @@
           animate: currentElements.length === 0 ? false : true
         });
       };
+      const getSelectedElements = (elements, appState) => {
+        const selectedIds = appState.selectedElementIds;
+        const selectedElements = elements.filter(
+          (element) => selectedIds[element.id]
+        );
+        return selectedElements;
+      };
       setApi({
         rawApi: excalidrawAPI,
         __printCanvasInfo: () => {
@@ -165,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();
@@ -282,14 +330,15 @@
         exportSelection: async () => {
           if (!excalidrawAPI) return;
           const appState = excalidrawAPI.getAppState();
-          const selectedIds = appState.selectedElementIds;
-          if (Object.keys(selectedIds).length === 0) {
+          const selectedElements = getSelectedElements(
+            excalidrawAPI.getSceneElements(),
+            appState
+          );
+          if (selectedElements.length === 0) {
             throw "没有选中任何元素";
           }
-          const selectedElements = excalidrawAPI.getSceneElements().filter((element) => appState.selectedElementIds[element.id]);
           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;
             }
@@ -298,8 +347,7 @@
           const canvas = await excalidraw.exportToCanvas({
             elements: selectedElements,
             appState: {
-              ...appState,
-              selectedElementIds: selectedIds
+              ...appState
             },
             files,
             mimeType: "image/png",
@@ -312,11 +360,10 @@
         insertCustomElement: (data, positonCalculator) => {
           if (!excalidrawAPI) return;
           const appState = excalidrawAPI.getAppState();
-          const selectedIds = appState.selectedElementIds;
-          if (Object.keys(selectedIds).length === 0) {
-            throw "没有选中任何元素";
-          }
-          const selectedElements = excalidrawAPI.getSceneElements().filter((element) => appState.selectedElementIds[element.id]);
+          const selectedElements = getSelectedElements(
+            excalidrawAPI.getSceneElements(),
+            appState
+          );
           if (selectedElements.length === 0) {
             throw "没有选中任何可见元素";
           }
@@ -344,18 +391,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(),
@@ -383,6 +430,45 @@
             elements: [...currentElements, ...el]
           });
           return el[0].id;
+        },
+        predicateCropImage: () => {
+          const appState = excalidrawAPI.getAppState();
+          const selectedElements = getSelectedElements(
+            excalidrawAPI.getSceneElements(),
+            appState
+          );
+          if (!appState.croppingElementId && selectedElements.length === 1 && selectedElements[0].type === "image") {
+            return true;
+          }
+          return false;
+        },
+        cropImage: () => {
+          const appState = excalidrawAPI.getAppState();
+          const selectedIds = appState.selectedElementIds;
+          const selectedElements = excalidrawAPI.getSceneElements().filter((element) => selectedIds[element.id]);
+          if (selectedElements.length !== 1) return;
+          excalidrawAPI.updateScene({
+            appState: {
+              ...appState,
+              isCropping: false,
+              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.0",
+  "version": "0.0.14-beta.10",
   "type": "module",
   "main": "lib/index.js",
   "exports": {