From c624dc1bb95cb455c7b010db7b1860b8927e1273 Mon Sep 17 00:00:00 2001
From: new-sankaku <sakurasakusankaku@gmail.com>
Date: Mon, 29 Jul 2024 23:09:16 +0900
Subject: [PATCH] =?UTF-8?q?=E9=A0=86=E5=BA=8F=E4=BF=9D=E9=9A=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 SP-MangaEditer/index.html        | 164 +++++++++++++++----------------
 SP-MangaEditer/js/html-loader.js |  66 +++++++------
 2 files changed, 120 insertions(+), 110 deletions(-)

diff --git a/SP-MangaEditer/index.html b/SP-MangaEditer/index.html
index 366036d..a3ea189 100644
--- a/SP-MangaEditer/index.html
+++ b/SP-MangaEditer/index.html
@@ -67,23 +67,23 @@
 
     <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <link rel="stylesheet" href="css/form.css?v=4.2">
-    <link rel="stylesheet" href="css/common.css?v=4.2">
-    <link rel="stylesheet" href="css/components.css?v=4.2">
-    <link rel="stylesheet" href="css/layout.css?v=4.2">
-    <link rel="stylesheet" href="css/ImageControleManager.css?v=4.2">
-    <link rel="stylesheet" href="css/anime.css?v=4.2">
-    <link rel="stylesheet" href="css/layoutLayer.css?v=4.2">
-    <link rel="stylesheet" href="css/toast.css?v=4.2">
-    <link rel="stylesheet" href="css/ui/modeChange.css?v=4.2">
-    <link rel="stylesheet" href="css/ui/objectMenu.css?v=4.2">
-    <link rel="stylesheet" href="css/ui/share.css?v=4.2">
-    <link rel="stylesheet" href="css/ui/flowtingWindow.css?v=4.2">
-    <link rel="stylesheet" href="css/ui/imagePromptHelper.css?v=4.2">
-
-    <link rel="stylesheet" href="css/tippy.css?v=4.2">
-    <link rel="stylesheet" href="third/tippy/tippy.css?v=4.2">
-    <link href="third/Bootstrup/bootstrap.min.css?v=4.2" rel="stylesheet">
+    <link rel="stylesheet" href="css/form.css?v=4.3">
+    <link rel="stylesheet" href="css/common.css?v=4.3">
+    <link rel="stylesheet" href="css/components.css?v=4.3">
+    <link rel="stylesheet" href="css/layout.css?v=4.3">
+    <link rel="stylesheet" href="css/ImageControleManager.css?v=4.3">
+    <link rel="stylesheet" href="css/anime.css?v=4.3">
+    <link rel="stylesheet" href="css/layoutLayer.css?v=4.3">
+    <link rel="stylesheet" href="css/toast.css?v=4.3">
+    <link rel="stylesheet" href="css/ui/modeChange.css?v=4.3">
+    <link rel="stylesheet" href="css/ui/objectMenu.css?v=4.3">
+    <link rel="stylesheet" href="css/ui/share.css?v=4.3">
+    <link rel="stylesheet" href="css/ui/flowtingWindow.css?v=4.3">
+    <link rel="stylesheet" href="css/ui/imagePromptHelper.css?v=4.3">
+
+    <link rel="stylesheet" href="css/tippy.css?v=4.3">
+    <link rel="stylesheet" href="third/tippy/tippy.css?v=4.3">
+    <link href="third/Bootstrup/bootstrap.min.css?v=4.3" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">
 
@@ -118,77 +118,77 @@
     <div id="sp-manga-toastContainer" class="position-fixed bottom-0 end-0 p-3" style="z-index: 11; min-width: 250px;">
     </div>
 
-    <script src="third/glfx/glfx.js?v=4.2"></script>
-    <script src="third/Fabric.js/fabric.min.js?v=4.2"></script>
-    <script src="third/Fabric.js/fabric.min_PlusEraser.js?v=4.2"></script>
-    <script src="third/i18next/i18next.min.js?v=4.2"></script>
-    <script src="third/jsts/jsts.min.js?v=4.2"></script>
-    <script src="third/browser-image-compression/browser-image-compression.js?v=4.2"></script>
-    <script src="third/intro/intro.min.js?v=4.2"></script>
+    <script src="third/glfx/glfx.js?v=4.3"></script>
+    <script src="third/Fabric.js/fabric.min.js?v=4.3"></script>
+    <script src="third/Fabric.js/fabric.min_PlusEraser.js?v=4.3"></script>
+    <script src="third/i18next/i18next.min.js?v=4.3"></script>
+    <script src="third/jsts/jsts.min.js?v=4.3"></script>
+    <script src="third/browser-image-compression/browser-image-compression.js?v=4.3"></script>
+    <script src="third/intro/intro.min.js?v=4.3"></script>
     <script src="js/fabric/dist/fabric-brush.min.js"></script>
-    <script src="js/fabric/brushes/ink_brush.js?v=4.2"></script>
-    <link rel="stylesheet" href="third/intro/introjs.min.css?v=4.2">
-    <link rel="stylesheet" href="css/ui/intro.css?v=4.2">
-    <script src="third/tippy/popper.min.js?v=4.2"></script>
-    <script src="third/tippy/tippy-bundle.umd.min.js?v=4.2"></script>
+    <script src="js/fabric/brushes/ink_brush.js?v=4.3"></script>
+    <link rel="stylesheet" href="third/intro/introjs.min.css?v=4.3">
+    <link rel="stylesheet" href="css/ui/intro.css?v=4.3">
+    <script src="third/tippy/popper.min.js?v=4.3"></script>
+    <script src="third/tippy/tippy-bundle.umd.min.js?v=4.3"></script>
     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/rough.js/3.1.0/rough.js"></script> -->
     <link rel="stylesheet" href="css/styles-css.css">
-    <script src="js/Settings.js?v=4.2" defer></script>
-    <script src="third/jszip/jszip.min.js?v=4.2" defer></script>
-    <script src="third/crypto-js/crypto-js.min.js?v=4.2"></script>
-    <script src="third/Bootstrup/bootstrap.bundle.min.js?v=4.2"></script>
-    <script src="js/ui/canvasObjectMenu.js?v=4.2" defer></script>
-    <script src="js/ui/intro.js?v=4.2" defer></script>
-    <script src="js/ui/Toast.js?v=4.2" defer></script>
-    <script src="js/ui/tippy.js?v=4.2" defer></script>
+    <script src="js/Settings.js?v=4.3" defer></script>
+    <script src="third/jszip/jszip.min.js?v=4.3" defer></script>
+    <script src="third/crypto-js/crypto-js.min.js?v=4.3"></script>
+    <script src="third/Bootstrup/bootstrap.bundle.min.js?v=4.3"></script>
+    <script src="js/ui/canvasObjectMenu.js?v=4.3" defer></script>
+    <script src="js/ui/intro.js?v=4.3" defer></script>
+    <script src="js/ui/Toast.js?v=4.3" defer></script>
+    <script src="js/ui/tippy.js?v=4.3" defer></script>
     <script src="js/ui/i18next.js" defer></script>
-    <script src="js/ui/modeChange.js?v=4.2" defer></script>
-    <script src="js/ui/flowtingWindow.js?v=4.2" defer></script>
-    <script src="js/html-component/hc-ImagePromptHelper.js?v=4.2" defer></script>
-    <script src="js/ImagePromptHelper.js?v=4.2" defer></script>
-    <script src="js/util/LoadUtil.js?v=4.2" defer></script>
+    <script src="js/ui/modeChange.js?v=4.3" defer></script>
+    <script src="js/ui/flowtingWindow.js?v=4.3" defer></script>
+    <script src="js/html-component/hc-ImagePromptHelper.js?v=4.3" defer></script>
+    <script src="js/ImagePromptHelper.js?v=4.3" defer></script>
+    <script src="js/util/LoadUtil.js?v=4.3" defer></script>
     
-    <script src="js/util/FabricUtil.js?v=4.2" defer></script>
-    <script src="js/util/ImageUtil.js?v=4.2" defer></script>
-    <script src="js/util/AnimeUtil.js?v=4.2" defer></script>
-    <script src="js/util/ShareUtil.js?v=4.2" defer></script>
-    <script src="js/CanvasManager.js?v=4.2" defer></script>
-    <script src="js/ProjectManagement.js?v=4.2" defer></script>
-    <script src="js/Shortcut.js?v=4.2" defer></script>
-    <script src="js/panel/Grid.js?v=4.2" defer></script>
-    <script src="js/panel/PanelManager.js?v=4.2" defer></script>
-    <script src="js/panel/PanelTemplate.js?v=4.2" defer></script>
-    <script src="js/PromptManager.js?v=4.2" defer></script>
-    <script src="js/ai/queue/Spinner.js?v=4.2" defer></script>
-    <script src="js/ai/queue/TaskQueue.js?v=4.2" defer></script>
-    <script src="js/ai/SDWebUI/SDWebUISettings.js?v=4.2" defer></script>
-    <script src="js/ai/SDWebUI/SDWebUIMultiCallApi.js?v=4.2" defer></script>
-    <script src="js/ai/SDWebUI/SDWebUISingleCallApi.js?v=4.2" defer></script>
+    <script src="js/util/FabricUtil.js?v=4.3" defer></script>
+    <script src="js/util/ImageUtil.js?v=4.3" defer></script>
+    <script src="js/util/AnimeUtil.js?v=4.3" defer></script>
+    <script src="js/util/ShareUtil.js?v=4.3" defer></script>
+    <script src="js/CanvasManager.js?v=4.3" defer></script>
+    <script src="js/ProjectManagement.js?v=4.3" defer></script>
+    <script src="js/Shortcut.js?v=4.3" defer></script>
+    <script src="js/panel/Grid.js?v=4.3" defer></script>
+    <script src="js/panel/PanelManager.js?v=4.3" defer></script>
+    <script src="js/panel/PanelTemplate.js?v=4.3" defer></script>
+    <script src="js/PromptManager.js?v=4.3" defer></script>
+    <script src="js/ai/queue/Spinner.js?v=4.3" defer></script>
+    <script src="js/ai/queue/TaskQueue.js?v=4.3" defer></script>
+    <script src="js/ai/SDWebUI/SDWebUISettings.js?v=4.3" defer></script>
+    <script src="js/ai/SDWebUI/SDWebUIMultiCallApi.js?v=4.3" defer></script>
+    <script src="js/ai/SDWebUI/SDWebUISingleCallApi.js?v=4.3" defer></script>
     <script src="js/ai/ComfyuiManagement.js" defer></script>
-    <script src="js/ai/GenerativeAI.js?v=4.2" defer></script>
-    <script src="js/layer/FloatingWindowManagement.js?v=4.2" defer></script>
-    <script src="js/layer/LayerAIManagement.js?v=4.2" defer></script>
-    <script src="js/layer/LayerManagement.js?v=4.2" defer></script>
-    <script src="js/layer/ImageHistoryManagement.js?v=4.2" defer></script>
-    <script src="js/sidebar/Sidebar.js?v=4.2" defer></script>
-    <script src="js/sidebar/TextEffect.js?v=4.2" defer></script>
-    <script src="js/sidebar/VerticalText.js?v=4.2" defer></script>
-    <script src="js/sidebar/SpeechBubbleEffect.js?v=4.2" defer></script>
-    <script src="js/sidebar/OriginalBrush.js?v=4.2" defer></script>
-    <script src="js/sidebar/PenTools.js?v=4.2" defer></script>
-    <script src="js/sidebar/Knife.js?v=4.2" defer></script>
-    <script src="js/controle/CommonControleManagement.js?v=4.2" defer></script>
-    <script src="js/controle/ImageControleManager.js?v=4.2" defer></script>
-    <script src="js/controle/InfomationControle.js?v=4.2" defer></script>
-    <script src="js/controle/glfxControle.js?v=4.2" defer></script>
-    <script src="js/io/ImageDownload.js?v=4.2" defer></script>
-    <!-- <script src="js/effect/roughHelper.js?v=4.2" defer></script> -->
-    <script src="js/event/FabricManagement.js?v=4.2" defer></script>
-    <script src="js/svg/GoogleIconNames.js?v=4.2"></script>
-    <script src="js/svg/GoogleIconHelper.js?v=4.2"></script>
-    <script src="js/svg/MangaPanelsImage_Landscape.js?v=4.2" defer></script>
-    <script src="js/svg/MangaPanelsImage_Vertical.js?v=4.2" defer></script>
-    <script src="js/svg/SpeechBubble.js?v=4.2" defer></script>
+    <script src="js/ai/GenerativeAI.js?v=4.3" defer></script>
+    <script src="js/layer/FloatingWindowManagement.js?v=4.3" defer></script>
+    <script src="js/layer/LayerAIManagement.js?v=4.3" defer></script>
+    <script src="js/layer/LayerManagement.js?v=4.3" defer></script>
+    <script src="js/layer/ImageHistoryManagement.js?v=4.3" defer></script>
+    <script src="js/sidebar/Sidebar.js?v=4.3" defer></script>
+    <script src="js/sidebar/TextEffect.js?v=4.3" defer></script>
+    <script src="js/sidebar/VerticalText.js?v=4.3" defer></script>
+    <script src="js/sidebar/SpeechBubbleEffect.js?v=4.3" defer></script>
+    <script src="js/sidebar/OriginalBrush.js?v=4.3" defer></script>
+    <script src="js/sidebar/PenTools.js?v=4.3" defer></script>
+    <script src="js/sidebar/Knife.js?v=4.3" defer></script>
+    <script src="js/controle/CommonControleManagement.js?v=4.3" defer></script>
+    <script src="js/controle/ImageControleManager.js?v=4.3" defer></script>
+    <script src="js/controle/InfomationControle.js?v=4.3" defer></script>
+    <script src="js/controle/glfxControle.js?v=4.3" defer></script>
+    <script src="js/io/ImageDownload.js?v=4.3" defer></script>
+    <!-- <script src="js/effect/roughHelper.js?v=4.3" defer></script> -->
+    <script src="js/event/FabricManagement.js?v=4.3" defer></script>
+    <script src="js/svg/GoogleIconNames.js?v=4.3"></script>
+    <script src="js/svg/GoogleIconHelper.js?v=4.3"></script>
+    <script src="js/svg/MangaPanelsImage_Landscape.js?v=4.3" defer></script>
+    <script src="js/svg/MangaPanelsImage_Vertical.js?v=4.3" defer></script>
+    <script src="js/svg/SpeechBubble.js?v=4.3" defer></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/SP-MangaEditer/js/html-loader.js b/SP-MangaEditer/js/html-loader.js
index fd849ee..b05905a 100644
--- a/SP-MangaEditer/js/html-loader.js
+++ b/SP-MangaEditer/js/html-loader.js
@@ -5,41 +5,44 @@ function log(message, type = 'info') {
 }
 
 function loadContent(scriptId, targetId) {
-    const script = document.createElement('script');
-    script.src = 'js/html-component/' + scriptId + '.js';
-
-    script.onload = function() {
-        if (typeof window.html === 'function') {
-            const content = window.html();
-            if( targetId ){
-                document.getElementById(targetId).innerHTML = content;
-            }else{
-                document.getElementById("head-id").innerHTML = document.getElementById("head-id").innerHTML + content;
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = 'js/html-component/' + scriptId + '.js';
+        script.onload = function () {
+            if (typeof window.html === 'function') {
+                const content = window.html();
+                if (targetId) {
+                    document.getElementById(targetId).innerHTML = content;
+                } else {
+                    document.getElementById("head-id").innerHTML += content;
+                }
+                delete window.html;
+                resolve();
+            } else {
+                document.getElementById("head-id").innerHTML = `<p style="color: red;">Error: Content for ${scriptId} could not be loaded.</p>`;
+                reject(new Error(`Content for ${scriptId} could not be loaded.`));
             }
-            delete window.html;
-            // console.log( "innerHTML:", document.getElementById("head-id").innerHTML );
-        } else {
-            document.getElementById("head-id").innerHTML = `<p style="color: red;">Error: Content for ${scriptId} could not be loaded.</p>`;
-        }
-    };
+        };
+        script.onerror = function () {
+            document.getElementById("head-id").innerHTML = `<p style="color: red;">Error: Script ${scriptId}.js could not be loaded.</p>`;
+            reject(new Error(`Script ${scriptId}.js could not be loaded.`));
+        };
+        document.head.appendChild(script);
+    });
+}
 
-    script.onerror = function() {
-        document.getElementById("head-id").innerHTML = `<p style="color: red;">Error: Script ${scriptId}.js could not be loaded.</p>`;
-    };
 
-    document.head.appendChild(script);
-}
 
 function loadCSS(href) {
     const link = document.createElement('link');
     link.rel = 'stylesheet';
     link.href = href;
 
-    link.onload = function() {
+    link.onload = function () {
         log(`CSS ${href} loaded successfully`);
     };
 
-    link.onerror = function() {
+    link.onerror = function () {
         log(`Failed to load CSS: ${href}`, 'error');
     };
 
@@ -48,8 +51,15 @@ function loadCSS(href) {
 
 log('app.js executed');
 
-loadContent('menu-html', 'desu-nav');
-loadContent('sidebar-html');
-loadContent('canvas-html');
-loadContent('layer-html');
-loadContent('controle-html');
+// 使用例
+Promise.all([
+    loadContent('menu-html', 'desu-nav'),
+    loadContent('sidebar-html'),
+    loadContent('canvas-html'),
+    loadContent('layer-html'),
+    loadContent('controle-html')
+  ]).then(() => {
+    console.log('All content loaded');
+  }).catch((error) => {
+    console.error('Error loading content:', error);
+  });