1

src/l10n/en.json

@@ -285,7 +285,11 @@
   "plugins.cleanPro.cleanHeadlessBlocks": "Clean Headless Blocks",
   "plugins.cleanPro.docs.title": "Plugin Doc",
   "plugins.witcatInfiniteCanvas.title": "Infinite Canvas by Witcat",
-  "plugins.witcatInfiniteCanvas.open": "Enable Infinite Canvas"
+  "plugins.witcatInfiniteCanvas.open": "Enable Infinite Canvas",
+  "plugins.witcatInfiniteCanvas.originalImageUpload": "Original Image Upload",
+  "plugins.witcatInfiniteCanvas.unsupportedFileExtension": "Unsupported file extension",
+  "plugins.witcatInfiniteCanvas.fileReaderError": "File reader error",
+  "plugins.witcatInfiniteCanvas.imageLoadError": "Image load error",
   "plugins.findDefinition.title": "find definition of custom block",
   "plugins.findDefinition.description": "Right-click on a custom block in the code area and select【Jump To Definition】to jump to the definition location of that custom block.",
   "plugins.findDefinition.goToDefinition": "Jump To Definition",

src/l10n/es.json

@@ -263,5 +263,11 @@
   "plugins.mobileCodeBatchSelect.zoomStage": "Zoom en el Escenario",
   "plugins.mobileCodeBatchSelect.zoomStage.description": "Pellizca en un área vacía en el espacio de trabajo del script para acercar o alejar.",
   "plugins.mobileCodeBatchSelect.boxSelect": "Selección de Bloques en Caja",
-  "plugins.mobileCodeBatchSelect.boxSelect.description": "Toca dos veces y mantén presionado con uno o dos dedos en un área vacía, luego arrastra para seleccionar varios bloques. Toca dos veces en un área vacía para deseleccionar."
+  "plugins.mobileCodeBatchSelect.boxSelect.description": "Toca dos veces y mantén presionado con uno o dos dedos en un área vacía, luego arrastra para seleccionar varios bloques. Toca dos veces en un área vacía para deseleccionar.",
+  "plugins.witcatInfiniteCanvas.open": "Habilitar Lienzo Infinito",
+  "plugins.witcatInfiniteCanvas.originalImageUpload": "Subir imagen original",
+  "plugins.witcatInfiniteCanvas.unsupportedFileExtension": "Extensión de archivo no admitida",
+  "plugins.witcatInfiniteCanvas.fileReaderError": "Error de lectura de archivo",
+  "plugins.witcatInfiniteCanvas.imageLoadError": "Error de carga de imagen",
+  "plugins.findDefinition.title": "buscar definición de bloque personalizado"
 }

src/l10n/ms.json

@@ -266,5 +266,11 @@
   "plugins.mobileCodeBatchSelect.zoomStage": "Zum Kawasan Peringkat",
   "plugins.mobileCodeBatchSelect.zoomStage.description": "Cubit pada kawasan kosong dalam ruang kerja skrip untuk mengezum masuk dan keluar.",
   "plugins.mobileCodeBatchSelect.boxSelect": "Pilih Blok dengan Kotak",
-  "plugins.mobileCodeBatchSelect.boxSelect.description": "Ketuk dua kali dan tahan dengan satu atau dua jari di kawasan kosong, kemudian seret untuk memilih berbilang blok. Ketuk dua kali di kawasan kosong untuk nyahpilih."
+  "plugins.mobileCodeBatchSelect.boxSelect.description": "Ketuk dua kali dan tahan dengan satu atau dua jari di kawasan kosong, kemudian seret untuk memilih berbilang blok. Ketuk dua kali di kawasan kosong untuk nyahpilih.",
+  "plugins.witcatInfiniteCanvas.open": "Dayakan Kanvas Tak Terhingga",
+  "plugins.witcatInfiniteCanvas.originalImageUpload": "Muat Naik Imej Asal",
+  "plugins.witcatInfiniteCanvas.unsupportedFileExtension": "Sambungan fail tidak disokong",
+  "plugins.witcatInfiniteCanvas.fileReaderError": "Ralat pembaca fail",
+  "plugins.witcatInfiniteCanvas.imageLoadError": "Ralat memuatkan imej",
+  "plugins.findDefinition.title": "cari definisi blok tersuai"
 }

src/l10n/ru.json

@@ -263,5 +263,11 @@
   "plugins.mobileCodeBatchSelect.zoomStage": "Масштабирование сцены",
   "plugins.mobileCodeBatchSelect.zoomStage.description": "Сожмите два пальца на пустой области в рабочем пространстве, чтобы изменить масштаб.",
   "plugins.mobileCodeBatchSelect.boxSelect": "Выбор блоков рамкой",
-  "plugins.mobileCodeBatchSelect.boxSelect.description": "Дважды коснитесь и удерживайте одним или двумя пальцами на пустой области, затем переместите палец, чтобы выделить несколько блоков. Дважды коснитесь пустой области, чтобы снять выделение."
+  "plugins.mobileCodeBatchSelect.boxSelect.description": "Дважды коснитесь и удерживайте одним или двумя пальцами на пустой области, затем переместите палец, чтобы выделить несколько блоков. Дважды коснитесь пустой области, чтобы снять выделение.",
+  "plugins.witcatInfiniteCanvas.open": "Включить бесконечный холст",
+  "plugins.witcatInfiniteCanvas.originalImageUpload": "Загрузить оригинальное изображение",
+  "plugins.witcatInfiniteCanvas.unsupportedFileExtension": "Неподдерживаемое расширение файла",
+  "plugins.witcatInfiniteCanvas.fileReaderError": "Ошибка чтения файла",
+  "plugins.witcatInfiniteCanvas.imageLoadError": "Ошибка загрузки изображения",
+  "plugins.findDefinition.title": "найти определение пользовательского блока"
 }

src/l10n/uk.json

@@ -261,5 +261,11 @@
   "plugins.mobileCodeBatchSelect.zoomStage": "Збільшення сцени",
   "plugins.mobileCodeBatchSelect.zoomStage.description": "Щипніть два пальці на порожній ділянці в робочій зоні, щоб змінити масштаб.",
   "plugins.mobileCodeBatchSelect.boxSelect": "Виділення блоків рамкою",
-  "plugins.mobileCodeBatchSelect.boxSelect.description": "Двічі торкніться і утримуйте одним або двома пальцями на порожній області, потім проведіть пальцем, щоб вибрати кілька блоків. Двічі торкніться порожньої області, щоб скасувати вибір."
+  "plugins.mobileCodeBatchSelect.boxSelect.description": "Двічі торкніться і утримуйте одним або двома пальцями на порожній області, потім проведіть пальцем, щоб вибрати кілька блоків. Двічі торкніться порожньої області, щоб скасувати вибір.",
+  "plugins.witcatInfiniteCanvas.open": "Увімкнути нескінченне полотно",
+  "plugins.witcatInfiniteCanvas.originalImageUpload": "Завантажити оригінальне зображення",
+  "plugins.witcatInfiniteCanvas.unsupportedFileExtension": "Непідтримуване розширення файлу",
+  "plugins.witcatInfiniteCanvas.fileReaderError": "Помилка читання файлу",
+  "plugins.witcatInfiniteCanvas.imageLoadError": "Помилка завантаження зображення",
+  "plugins.findDefinition.title": "знайти визначення користувацького блоку"
 }

src/l10n/zh-cn.json

@@ -286,7 +286,11 @@
   "plugins.cleanPro.cleanHeadlessBlocks": "清理无头块",
   "plugins.cleanPro.docs.title": "插件文档",
   "plugins.witcatInfiniteCanvas.title": "白猫的无限画布",
-  "plugins.witcatInfiniteCanvas.open": "启用无限画布"
+  "plugins.witcatInfiniteCanvas.open": "启用无限画布",
+  "plugins.witcatInfiniteCanvas.originalImageUpload": "原图上传",
+  "plugins.witcatInfiniteCanvas.unsupportedFileExtension": "不支持的文件扩展名",
+  "plugins.witcatInfiniteCanvas.fileReaderError": "文件读取错误",
+  "plugins.witcatInfiniteCanvas.imageLoadError": "图片加载错误",
   "plugins.findDefinition.title": "查找自定义块的定义位置",
   "plugins.findDefinition.description": "在代码区右键单击自定义块，选择【跳转到定义】即可跳转到该自定义块的定义位置。",
   "plugins.findDefinition.goToDefinition": "跳转到定义",

src/plugins/witcat-infinite-canvas/index.tsx

@@ -1,11 +1,73 @@
 import * as React from "react";
+import toast from "react-hot-toast";
 import Icon from "./icon";
+import { UploadIcon } from "./upload-icon";
 
 declare const window: Window & {
   scratchPaintInfiniteCanvas: boolean;
 };
 
-const WitcatInfiniteCanvas: React.FC<PluginContext> = ({ registerSettings, msg }) => {
+const WitcatInfiniteCanvas: React.FC<PluginContext> = ({ registerSettings, msg, utils, vm }) => {
+  const handleOriginalUpload = React.useCallback(() => {
+    if (!vm.editingTarget) return;
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".svg, .png, .jpg, .jpeg";
+    input.onchange = (e: Event) => {
+      const target = e.target as HTMLInputElement;
+      const file = target.files?.[0];
+      if (!file) return;
+
+      const ext = file.name.substring(file.name.lastIndexOf(".")).toLowerCase();
+      if (![".svg", ".png", ".jpg", ".jpeg"].includes(ext)) {
+        toast.error(msg("plugins.witcatInfiniteCanvas.unsupportedFileExtension"));
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onerror = () => {
+        toast.error(msg("plugins.witcatInfiniteCanvas.fileReaderError"));
+      };
+
+      if (file.type === "image/svg+xml" || ext === ".svg") {
+        reader.onload = (readerEvent) => {
+          const content = readerEvent.target?.result as string;
+          if (!content) return;
+          utils.addCostumeToTarget(
+            content,
+            file.name,
+            "image/svg+xml",
+            vm.editingTarget.id
+          );
+        };
+        reader.readAsText(file);
+      } else {
+        reader.onload = (readerEvent) => {
+          const result = readerEvent.target?.result as string;
+          if (!result) return;
+
+          const img = new Image();
+          img.onload = () => {
+            const svg = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${img.width}" height="${img.height}" viewBox="0 0 ${img.width} ${img.height}"><image width="${img.width}" height="${img.height}" xlink:href="${result}" /></svg>`;
+            utils.addCostumeToTarget(
+              svg,
+              file.name.replace(/\.[^/.]+$/, "") + ".svg",
+              "image/svg+xml",
+              vm.editingTarget.id
+            );
+          };
+          img.onerror = () => {
+            toast.error(msg("plugins.witcatInfiniteCanvas.imageLoadError"));
+          };
+          img.src = result;
+        };
+        reader.readAsDataURL(file);
+      }
+      input.remove();
+    };
+    input.click();
+  }, [utils, vm]);
+
   React.useEffect(() => {
     const register = registerSettings(
       msg("plugins.witcatInfiniteCanvas.title"),
@@ -24,16 +86,37 @@ const WitcatInfiniteCanvas: React.FC<PluginContext> = ({ registerSettings, msg }
                 window.scratchPaintInfiniteCanvas = v;
               },
             },
+            {
+              key: "originalImageUpload",
+              type: "switch",
+              label: msg("plugins.witcatInfiniteCanvas.originalImageUpload"),
+              value: false,
+              onChange(v: boolean) {
+                if (v) {
+                  utils.expandCostumeMenuItems([
+                    {
+                      id: "originalImageUpload",
+                      title: msg("plugins.witcatInfiniteCanvas.originalImageUpload"),
+                      img: UploadIcon,
+                      onClick: handleOriginalUpload,
+                    },
+                  ]);
+                } else {
+                  utils.removeCostumeMenuItems(["originalImageUpload"]);
+                }
+              },
+            },
           ],
         },
       ],
-      <Icon></Icon>,
+      <Icon></Icon>
     );
     return () => {
       window.scratchPaintInfiniteCanvas = false;
+      utils.removeCostumeMenuItems(["originalImageUpload"]);
       register.dispose();
     };
-  }, [registerSettings, msg]);
+  }, [registerSettings, msg, utils, handleOriginalUpload]);
 
   return null;
 };

src/plugins/witcat-infinite-canvas/upload-icon.ts

@@ -0,0 +1 @@
+export const UploadIcon = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 16L12 4" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 8L12 4L16 8" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 20L20 20" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`)}`;

webpackDevServer.config.js

@@ -114,4 +114,4 @@ module.exports = {
     }),
   ],
   target: ["web", "es6"],
-};
+};