- 添加图片加载状态

- 游戏王 2 期添加字体参数
kooriookami · Aug 26, 2023 · 1127b81 · 1127b81
1 parent 7e1d3ac
commit 1127b81
Show file tree

Hide file tree

Showing 14 changed files with 1,291 additions and 861 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ### 1.1.0
 
-_2023-08-xx_
+_2023-08-25_
 
 - 添加图片加载状态
 - 游戏王 2 期添加字体参数

diff --git a/docs/assets/image-af29dd04.svg b/docs/assets/image-af29dd04.svg
diff --git a/docs/assets/index-10e4cbfd.js b/docs/assets/index-10e4cbfd.js
diff --git a/docs/assets/index-122d4d45.css b/docs/assets/index-122d4d45.css
diff --git a/docs/assets/index-c12785d9.css b/docs/assets/index-c12785d9.css
diff --git a/docs/assets/index-f6a4247d.js b/docs/assets/index-f6a4247d.js
diff --git a/docs/assets/loader-6cd4fccd.svg b/docs/assets/loader-6cd4fccd.svg
diff --git a/docs/index.html b/docs/index.html
@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="./vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Yugioh Card</title>
-    <script type="module" crossorigin src="./assets/index-f6a4247d.js"></script>
-    <link rel="stylesheet" href="./assets/index-122d4d45.css">
+    <script type="module" crossorigin src="./assets/index-10e4cbfd.js"></script>
+    <link rel="stylesheet" href="./assets/index-c12785d9.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,23 +31,23 @@
   "license": "ISC",
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
-    "element-plus": "^2.3.9",
+    "element-plus": "^2.3.10",
     "json-editor-vue": "^0.10.6",
     "lodash": "^4.17.21",
     "normalize.css": "^8.0.1",
-    "vanilla-jsoneditor": "^0.17.8",
+    "vanilla-jsoneditor": "^0.18.2",
     "vue": "^3.3.4",
     "yugioh-card": "workspace:*"
   },
   "devDependencies": {
     "@iconify/vue": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "eslint": "^8.46.0",
+    "@vitejs/plugin-vue": "^4.3.3",
+    "eslint": "^8.47.0",
     "eslint-define-config": "^1.23.0",
     "eslint-plugin-vue": "^9.17.0",
     "jsonfile": "^6.1.0",
     "rollup-plugin-copy": "^3.4.0",
-    "sass": "^1.65.1",
+    "sass": "^1.66.1",
     "vite": "^4.4.9"
   }
 }
diff --git a/packages/yugioh-card/package.json b/packages/yugioh-card/package.json
@@ -1,6 +1,6 @@
 {
   "name": "yugioh-card",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "main": "src/index.js",
   "module": "src/index.js",
   "repository": {
@@ -18,8 +18,8 @@
   "author": "kooriookami",
   "license": "ISC",
   "dependencies": {
-    "leafer-compress-text": "^1.0.17",
-    "leafer-ui": "^1.0.0-beta.9",
+    "leafer-compress-text": "^1.0.18",
+    "leafer-ui": "^1.0.0-beta.10",
     "lodash": "^4.17.21"
   }
 }
diff --git a/packages/yugioh-card/src/card/index.js b/packages/yugioh-card/src/card/index.js
@@ -72,7 +72,9 @@ export class Card {
   }
 
   listenImageStatus(imageLeaf) {
-    // todo 监听loading
+    imageLeaf.on(ImageEvent.LOAD, () => {
+      this.drawImageStatus(imageLeaf, ImageEvent.LOAD);
+    });
     imageLeaf.on(ImageEvent.LOADED, () => {
       this.drawImageStatus(imageLeaf, ImageEvent.LOADED);
     });
@@ -89,7 +91,7 @@ export class Card {
     }
 
     let statusUrl = '';
-    if (status === 'loading') {
+    if (status === ImageEvent.LOAD) {
       statusUrl = loaderIcon;
     } else if (status === ImageEvent.ERROR) {
       statusUrl = imageIcon;
@@ -101,19 +103,18 @@ export class Card {
       height: 120,
       x: x + width / 2 - 60,
       y: y + height / 2 - 60,
-      visible: ['loading', ImageEvent.ERROR].includes(status) && url,
+      visible: [ImageEvent.LOAD, ImageEvent.ERROR].includes(status) && url,
       zIndex: zIndex + 1,
     });
 
-    if (status === 'loading') {
+    if (status === ImageEvent.LOAD) {
       this.imageStatusEvent = this.leafer.on_(AnimateEvent.FRAME, () => {
         this.imageStatusLeaf.rotateOf({ x: 60, y: 60 }, 3);
       });
     } else {
       this.imageStatusLeaf.rotateOf({ x: 60, y: 60 }, 0 - this.imageStatusLeaf.rotation);
       this.leafer.off_(this.imageStatusEvent);
     }
-    console.log(status);
   }
 
   updateScale() {

diff --git a/packages/yugioh-card/src/yugioh-card/index.js b/packages/yugioh-card/src/yugioh-card/index.js
@@ -659,6 +659,9 @@ export class YugiohCard extends Card {
   drawCopyright() {
     if (!this.copyrightLeaf) {
       this.copyrightLeaf = new Image();
+      this.copyrightLeaf.on(ImageEvent.LOADED, () => {
+        this.copyrightLeaf.x = this.cardWidth - 141 - this.copyrightLeaf.width;
+      });
       this.leafer.add(this.copyrightLeaf);
     }
 
@@ -670,11 +673,6 @@ export class YugiohCard extends Card {
       visible: this.data.copyright,
       zIndex: 30,
     });
-
-    this.copyrightLeaf.x = this.cardWidth - 141 - this.copyrightLeaf.width;
-    this.copyrightLeaf.once(ImageEvent.LOADED, () => {
-      this.copyrightLeaf.x = this.cardWidth - 141 - this.copyrightLeaf.width;
-    });
   }
 
   drawLaser() {

diff --git a/packages/yugioh-card/src/yugioh-series-2-card/index.js b/packages/yugioh-card/src/yugioh-series-2-card/index.js
@@ -428,6 +428,9 @@ export class YugiohSeries2Card extends Card {
   drawCopyright() {
     if (!this.copyrightLeaf) {
       this.copyrightLeaf = new Image();
+      this.copyrightLeaf.on(ImageEvent.LOADED, () => {
+        this.copyrightLeaf.x = this.cardWidth - 161 - this.copyrightLeaf.width;
+      });
       this.leafer.add(this.copyrightLeaf);
     }
 
@@ -438,11 +441,6 @@ export class YugiohSeries2Card extends Card {
       visible: this.data.copyright,
       zIndex: 30,
     });
-
-    this.copyrightLeaf.x = this.cardWidth - 161 - this.copyrightLeaf.width;
-    this.copyrightLeaf.once(ImageEvent.LOADED, () => {
-      this.copyrightLeaf.x = this.cardWidth - 161 - this.copyrightLeaf.width;
-    });
   }
 
   drawLaser() {