✨支持在长按鼠标右键时显示大图，对动图进行缩放

CHANGELOG.md

@@ -116,6 +116,10 @@ if (!check) {
 
 至此问题完美解决。
 
+### ✨支持在长按鼠标右键时显示大图，对动图进行缩放
+
+右键预览大图时可以通过鼠标滚轮来缩放画布尺寸。但是我发现动画不会随画布尺寸变化，现在进行了完善。
+
 ### ✨新增了 Input 组件
 
 通过引入 `Input.ts` 可以在页面上显示一个输入框（input 或者 textarea），并且可以通过一些选项进行配置，以接收用户的输入。
@@ -128,6 +132,8 @@ if (!check) {
 
 不过目前在主分支里并没有实际使用它。
 
+### 🕑更新了作品发布时间数据
+
 ## 16.1.2 2023/08/11
 
 ### 🐛修复了“显示更大的缩略图”的一些问题

dist/js/content.js

@@ -8856,6 +8856,17 @@ class PreviewUgoira {
         this.canvas.width = this.width;
         this.canvas.height = this.height;
     }
+    setSize(width, height) {
+        // 当用户移动鼠标时，ShowOriginSizeImage 会频繁触发 setSize
+        // 如果频繁的重设尺寸，会导致动画闪烁。所以判断只在有必要时才重设尺寸
+        if (width === this.width && height === this.height) {
+            return;
+        }
+        this.width = width;
+        this.height = height;
+        this.canvas.width = this.width;
+        this.canvas.height = this.height;
+    }
     destroy() {
         this.destroyed = true;
         window.cancelAnimationFrame(this.animationID);
@@ -11170,6 +11181,8 @@ class ShowOriginSizeImage {
         this.wrap.style.height = this.style.height + 'px';
         this.wrap.style.marginTop = this.style.mt + 'px';
         this.wrap.style.marginLeft = this.style.ml + 'px';
+        this.previewUgoira &&
+            this.previewUgoira.setSize(this.style.width, this.style.height);
     }
     setData(urls, data, index) {
         this.urls = urls;

src/ts/PreviewUgoira.ts

@@ -335,6 +335,19 @@ class PreviewUgoira {
     this.animationID = window.requestAnimationFrame(this.play)
   }
 
+  public setSize(width: number, height: number) {
+    // 当用户移动鼠标时，ShowOriginSizeImage 会频繁触发 setSize
+    // 如果频繁的重设尺寸，会导致动画闪烁。所以判断只在有必要时才重设尺寸
+    if (width === this.width && height === this.height) {
+      return
+    }
+
+    this.width = width
+    this.height = height
+    this.canvas.width = this.width
+    this.canvas.height = this.height
+  }
+
   public destroy() {
     this.destroyed = true
     window.cancelAnimationFrame(this.animationID)

src/ts/ShowOriginSizeImage.ts

@@ -454,6 +454,9 @@ class ShowOriginSizeImage {
     this.wrap.style.height = this.style.height + 'px'
     this.wrap.style.marginTop = this.style.mt + 'px'
     this.wrap.style.marginLeft = this.style.ml + 'px'
+
+    this.previewUgoira &&
+      this.previewUgoira.setSize(this.style.width, this.style.height)
   }
 
   public setData(urls: Urls, data: ArtworkData, index: number) {