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

package/dist/index.d.ts

@@ -58,6 +58,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.2";
 const packageJson = {
   version
 };
@@ -153,6 +153,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: () => {
@@ -282,11 +289,13 @@ 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);
@@ -298,8 +307,7 @@ function ApiFactory() {
         const canvas = await exportToCanvas({
           elements: selectedElements,
           appState: {
-            ...appState,
-            selectedElementIds: selectedIds
+            ...appState
           },
           files,
           mimeType: "image/png",
@@ -312,11 +320,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 "没有选中任何可见元素";
         }
@@ -383,6 +390,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.2";
   const packageJson = {
     version
   };
@@ -153,6 +153,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: () => {
@@ -282,11 +289,13 @@
         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);
@@ -298,8 +307,7 @@
           const canvas = await excalidraw.exportToCanvas({
             elements: selectedElements,
             appState: {
-              ...appState,
-              selectedElementIds: selectedIds
+              ...appState
             },
             files,
             mimeType: "image/png",
@@ -312,11 +320,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 "没有选中任何可见元素";
           }
@@ -383,6 +390,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.2",
   "type": "module",
   "main": "lib/index.js",
   "exports": {