@8btc/xcanvas 0.0.14-beta.17 → 0.0.14-beta.19

package/dist/index.d.ts

@@ -77,6 +77,8 @@ export declare interface XCanvasAPI {
     deleteSelection: () => void;
     /** 插入一个视频 */
     insertVideo: (urls: string) => Promise<void>;
+    /** 插入一个SVG */
+    insertSvg: (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.17";
+const version = "0.0.14-beta.19";
 const packageJson = {
   version
 };
@@ -7863,8 +7863,8 @@ async function fetchSvgAsDataUrl(src) {
         throw new Error("Failed to parse SVG");
       }
       const viewBox = svgElement.getAttribute("viewBox");
-      let width = parseFloat(svgElement.getAttribute("width") || "0");
-      let height = parseFloat(svgElement.getAttribute("height") || "0");
+      let width = parseFloat(svgElement.getAttribute("width") || "0") / 0.2;
+      let height = parseFloat(svgElement.getAttribute("height") || "0") / 0.2;
       if (!width || !height) {
         if (viewBox) {
           const [, , vbWidth, vbHeight] = viewBox.split(/\s+/).map(Number);
@@ -7936,16 +7936,19 @@ function findPlaceForNewElements(appState, elements, newElements) {
   const py = Math.max(maxElY, minY) + gap;
   let accWidth = 0;
   let startY = py;
+  let maxRowHeight = 0;
   const ret = newElements.map((it, index) => {
-    if (accWidth + it.width > maxX) {
+    if (accWidth > 0 && px + accWidth + it.width > maxX) {
       accWidth = 0;
-      startY += it.height + gap;
+      startY += maxRowHeight + gap;
+      maxRowHeight = 0;
     }
     const place = {
-      x: accWidth + px,
+      x: px + accWidth,
       y: startY
     };
     accWidth += it.width + gap;
+    maxRowHeight = Math.max(maxRowHeight, it.height);
     return place;
   });
   return ret;
@@ -7970,6 +7973,51 @@ function getVideoDimensions(videoUrl) {
     video.load();
   });
 }
+function getSvgDimensions(svgUrl) {
+  return new Promise(
+    async (resolve, reject) => {
+      try {
+        let svgText;
+        if (svgUrl.startsWith("data:")) {
+          const base64Data = svgUrl.split(",")[1];
+          svgText = atob(base64Data);
+        } else {
+          const response = await fetch(svgUrl);
+          if (!response.ok) {
+            throw new Error(`Failed to fetch SVG: ${response.statusText}`);
+          }
+          svgText = await response.text();
+        }
+        const parser = new DOMParser();
+        const svgDoc = parser.parseFromString(svgText, "image/svg+xml");
+        const svgElement = svgDoc.documentElement;
+        if (svgElement.querySelector("parsererror")) {
+          throw new Error("Failed to parse SVG");
+        }
+        const viewBox = svgElement.getAttribute("viewBox");
+        let width = parseFloat(svgElement.getAttribute("width") || "0");
+        let height = parseFloat(svgElement.getAttribute("height") || "0");
+        if (!width || !height) {
+          const widthAttr = svgElement.getAttribute("width");
+          const heightAttr = svgElement.getAttribute("height");
+          if (widthAttr) width = parseFloat(widthAttr);
+          if (heightAttr) height = parseFloat(heightAttr);
+        }
+        if ((!width || !height) && viewBox) {
+          const [, , vbWidth, vbHeight] = viewBox.split(/\s+/).map(Number);
+          width = width || vbWidth;
+          height = height || vbHeight;
+        }
+        if (!width) width = 300;
+        if (!height) height = 150;
+        resolve({ width: width / 0.2, height: height / 0.2 });
+      } catch (error) {
+        console.error(`failed to get SVG dimensions: ${svgUrl}`, error);
+        reject(error);
+      }
+    }
+  );
+}
 function ApiFactory() {
   const excalidrawAPI = useAtomValue(excalidrawApiAtom);
   const setApi = useSetAtom(apiAtom);
@@ -7979,18 +8027,32 @@ function ApiFactory() {
     }
     const insertImgs = async (urls) => {
       if (urls.length === 0) return;
-      const rets = await Promise.all(
-        urls.map(async (it) => {
-          const temp = await fetchImageAsDataUrl(it);
-          return {
-            ...temp,
-            url: it
-          };
+      const isSvg = (url) => {
+        return url.toLowerCase().endsWith(".svg") || url.includes("data:image/svg+xml");
+      };
+      const currentElements = excalidrawAPI.getSceneElements();
+      const allRets = await Promise.all(
+        urls.map(async (url) => {
+          if (isSvg(url)) {
+            const dimension = await getSvgDimensions(url);
+            return {
+              ...dimension,
+              url,
+              isSvg: true
+            };
+          } else {
+            const temp = await fetchImageAsDataUrl(url);
+            return {
+              ...temp,
+              url,
+              isSvg: false
+            };
+          }
         })
       );
       const files = excalidrawAPI.getFiles();
-      rets.forEach((it) => {
-        if (!files[it.url]) {
+      allRets.forEach((it) => {
+        if (!it.isSvg && !files[it.url]) {
           excalidrawAPI.addFiles([
             {
               mimeType: "image/png",
@@ -8004,31 +8066,70 @@ function ApiFactory() {
       const places = findPlaceForNewElements(
         excalidrawAPI.getAppState(),
         excalidrawAPI.getSceneElements(),
-        rets
+        allRets
       );
-      const els = convertToExcalidrawElements(
-        rets.map((it, index) => {
-          return {
-            type: "image",
-            width: it.width,
-            height: it.height,
-            x: places[index].x,
-            y: places[index].y,
-            fileId: it.url,
-            customData: {
-              naturalWidth: it.width,
-              naturalHeight: it.height
-            }
-          };
+      const allNewElements = convertToExcalidrawElements(
+        allRets.map((it, index) => {
+          if (it.isSvg) {
+            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: `svg-${Date.now()}-${index}`,
+              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(),
+              frameId: null,
+              index: null,
+              customData: {
+                custom: true,
+                component: "svg",
+                naturalWidth: it.width,
+                naturalHeight: it.height,
+                url: it.url
+              }
+            };
+          } else {
+            return {
+              type: "image",
+              width: it.width,
+              height: it.height,
+              x: places[index].x,
+              y: places[index].y,
+              fileId: it.url,
+              customData: {
+                naturalWidth: it.width,
+                naturalHeight: it.height
+              }
+            };
+          }
         })
       );
-      const currentElements = excalidrawAPI.getSceneElements();
-      excalidrawAPI.updateScene({
-        elements: [...currentElements, ...els]
-      });
-      excalidrawAPI.scrollToContent(els, {
-        animate: currentElements.length === 0 ? false : true
-      });
+      if (allNewElements.length > 0) {
+        excalidrawAPI.updateScene({
+          elements: [...currentElements, ...allNewElements]
+        });
+        excalidrawAPI.scrollToContent(allNewElements, {
+          animate: currentElements.length === 0 ? false : true
+        });
+      }
     };
     const getSelectedElements = (elements, appState) => {
       const selectedIds = appState.selectedElementIds;
@@ -8059,6 +8160,18 @@ function ApiFactory() {
             intersecitonEls.push(el);
           }
         });
+        const svgEls = els.filter(
+          (el) => el.type === "embeddable" && el.customData?.component === "svg"
+        );
+        svgEls.forEach((el) => {
+          const svgUrl = el.customData?.url;
+          if (svgUrl) {
+            idSet.add(svgUrl);
+            if (urls.includes(svgUrl)) {
+              intersecitonEls.push(el);
+            }
+          }
+        });
         const newUrls = urls.filter((url) => !idSet.has(url));
         if (newUrls.length !== 0) {
           await insertImgs(newUrls);
@@ -8424,6 +8537,81 @@ function ApiFactory() {
         excalidrawAPI.scrollToContent(els, {
           animate: currentElements.length === 0 ? false : true
         });
+      },
+      insertSvg: async (url) => {
+        const currentElements = excalidrawAPI.getSceneElements();
+        const dimension = await getSvgDimensions(url);
+        const rets = [
+          {
+            ...dimension,
+            url
+          }
+        ];
+        const existElements = currentElements.filter(
+          (el) => el.type === "embeddable" && el.customData?.component === "svg" && 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: `svg-${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: "svg",
+                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.17";
+  const version = "0.0.14-beta.19";
   const packageJson = {
     version
   };
@@ -7863,8 +7863,8 @@
           throw new Error("Failed to parse SVG");
         }
         const viewBox = svgElement.getAttribute("viewBox");
-        let width = parseFloat(svgElement.getAttribute("width") || "0");
-        let height = parseFloat(svgElement.getAttribute("height") || "0");
+        let width = parseFloat(svgElement.getAttribute("width") || "0") / 0.2;
+        let height = parseFloat(svgElement.getAttribute("height") || "0") / 0.2;
         if (!width || !height) {
           if (viewBox) {
             const [, , vbWidth, vbHeight] = viewBox.split(/\s+/).map(Number);
@@ -7936,16 +7936,19 @@
     const py = Math.max(maxElY, minY) + gap;
     let accWidth = 0;
     let startY = py;
+    let maxRowHeight = 0;
     const ret = newElements.map((it, index) => {
-      if (accWidth + it.width > maxX) {
+      if (accWidth > 0 && px + accWidth + it.width > maxX) {
         accWidth = 0;
-        startY += it.height + gap;
+        startY += maxRowHeight + gap;
+        maxRowHeight = 0;
       }
       const place = {
-        x: accWidth + px,
+        x: px + accWidth,
         y: startY
       };
       accWidth += it.width + gap;
+      maxRowHeight = Math.max(maxRowHeight, it.height);
       return place;
     });
     return ret;
@@ -7970,6 +7973,51 @@
       video.load();
     });
   }
+  function getSvgDimensions(svgUrl) {
+    return new Promise(
+      async (resolve, reject) => {
+        try {
+          let svgText;
+          if (svgUrl.startsWith("data:")) {
+            const base64Data = svgUrl.split(",")[1];
+            svgText = atob(base64Data);
+          } else {
+            const response = await fetch(svgUrl);
+            if (!response.ok) {
+              throw new Error(`Failed to fetch SVG: ${response.statusText}`);
+            }
+            svgText = await response.text();
+          }
+          const parser = new DOMParser();
+          const svgDoc = parser.parseFromString(svgText, "image/svg+xml");
+          const svgElement = svgDoc.documentElement;
+          if (svgElement.querySelector("parsererror")) {
+            throw new Error("Failed to parse SVG");
+          }
+          const viewBox = svgElement.getAttribute("viewBox");
+          let width = parseFloat(svgElement.getAttribute("width") || "0");
+          let height = parseFloat(svgElement.getAttribute("height") || "0");
+          if (!width || !height) {
+            const widthAttr = svgElement.getAttribute("width");
+            const heightAttr = svgElement.getAttribute("height");
+            if (widthAttr) width = parseFloat(widthAttr);
+            if (heightAttr) height = parseFloat(heightAttr);
+          }
+          if ((!width || !height) && viewBox) {
+            const [, , vbWidth, vbHeight] = viewBox.split(/\s+/).map(Number);
+            width = width || vbWidth;
+            height = height || vbHeight;
+          }
+          if (!width) width = 300;
+          if (!height) height = 150;
+          resolve({ width: width / 0.2, height: height / 0.2 });
+        } catch (error) {
+          console.error(`failed to get SVG dimensions: ${svgUrl}`, error);
+          reject(error);
+        }
+      }
+    );
+  }
   function ApiFactory() {
     const excalidrawAPI = jotai.useAtomValue(excalidrawApiAtom);
     const setApi = jotai.useSetAtom(apiAtom);
@@ -7979,18 +8027,32 @@
       }
       const insertImgs = async (urls) => {
         if (urls.length === 0) return;
-        const rets = await Promise.all(
-          urls.map(async (it) => {
-            const temp = await fetchImageAsDataUrl(it);
-            return {
-              ...temp,
-              url: it
-            };
+        const isSvg = (url) => {
+          return url.toLowerCase().endsWith(".svg") || url.includes("data:image/svg+xml");
+        };
+        const currentElements = excalidrawAPI.getSceneElements();
+        const allRets = await Promise.all(
+          urls.map(async (url) => {
+            if (isSvg(url)) {
+              const dimension = await getSvgDimensions(url);
+              return {
+                ...dimension,
+                url,
+                isSvg: true
+              };
+            } else {
+              const temp = await fetchImageAsDataUrl(url);
+              return {
+                ...temp,
+                url,
+                isSvg: false
+              };
+            }
           })
         );
         const files = excalidrawAPI.getFiles();
-        rets.forEach((it) => {
-          if (!files[it.url]) {
+        allRets.forEach((it) => {
+          if (!it.isSvg && !files[it.url]) {
             excalidrawAPI.addFiles([
               {
                 mimeType: "image/png",
@@ -8004,31 +8066,70 @@
         const places = findPlaceForNewElements(
           excalidrawAPI.getAppState(),
           excalidrawAPI.getSceneElements(),
-          rets
+          allRets
         );
-        const els = excalidraw.convertToExcalidrawElements(
-          rets.map((it, index) => {
-            return {
-              type: "image",
-              width: it.width,
-              height: it.height,
-              x: places[index].x,
-              y: places[index].y,
-              fileId: it.url,
-              customData: {
-                naturalWidth: it.width,
-                naturalHeight: it.height
-              }
-            };
+        const allNewElements = excalidraw.convertToExcalidrawElements(
+          allRets.map((it, index) => {
+            if (it.isSvg) {
+              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: `svg-${Date.now()}-${index}`,
+                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(),
+                frameId: null,
+                index: null,
+                customData: {
+                  custom: true,
+                  component: "svg",
+                  naturalWidth: it.width,
+                  naturalHeight: it.height,
+                  url: it.url
+                }
+              };
+            } else {
+              return {
+                type: "image",
+                width: it.width,
+                height: it.height,
+                x: places[index].x,
+                y: places[index].y,
+                fileId: it.url,
+                customData: {
+                  naturalWidth: it.width,
+                  naturalHeight: it.height
+                }
+              };
+            }
           })
         );
-        const currentElements = excalidrawAPI.getSceneElements();
-        excalidrawAPI.updateScene({
-          elements: [...currentElements, ...els]
-        });
-        excalidrawAPI.scrollToContent(els, {
-          animate: currentElements.length === 0 ? false : true
-        });
+        if (allNewElements.length > 0) {
+          excalidrawAPI.updateScene({
+            elements: [...currentElements, ...allNewElements]
+          });
+          excalidrawAPI.scrollToContent(allNewElements, {
+            animate: currentElements.length === 0 ? false : true
+          });
+        }
       };
       const getSelectedElements = (elements, appState) => {
         const selectedIds = appState.selectedElementIds;
@@ -8059,6 +8160,18 @@
               intersecitonEls.push(el);
             }
           });
+          const svgEls = els.filter(
+            (el) => el.type === "embeddable" && el.customData?.component === "svg"
+          );
+          svgEls.forEach((el) => {
+            const svgUrl = el.customData?.url;
+            if (svgUrl) {
+              idSet.add(svgUrl);
+              if (urls.includes(svgUrl)) {
+                intersecitonEls.push(el);
+              }
+            }
+          });
           const newUrls = urls.filter((url) => !idSet.has(url));
           if (newUrls.length !== 0) {
             await insertImgs(newUrls);
@@ -8424,6 +8537,81 @@
           excalidrawAPI.scrollToContent(els, {
             animate: currentElements.length === 0 ? false : true
           });
+        },
+        insertSvg: async (url) => {
+          const currentElements = excalidrawAPI.getSceneElements();
+          const dimension = await getSvgDimensions(url);
+          const rets = [
+            {
+              ...dimension,
+              url
+            }
+          ];
+          const existElements = currentElements.filter(
+            (el) => el.type === "embeddable" && el.customData?.component === "svg" && 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: `svg-${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: "svg",
+                  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.17",
+  "version": "0.0.14-beta.19",
   "type": "module",
   "main": "lib/index.js",
   "exports": {