From de426ae7d0d01c3b6b3223af7c12ab46ae5e41ff Mon Sep 17 00:00:00 2001
From: laoluo <ron.f.luo@gmail.com>
Date: Sun, 18 Sep 2022 19:35:16 +0800
Subject: [PATCH] feat(scribble-tool): Fix the size error after changing img

---
 .../src/core/toolOperation/ScribbleTool.ts    | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/lb-annotation/src/core/toolOperation/ScribbleTool.ts b/packages/lb-annotation/src/core/toolOperation/ScribbleTool.ts
index b7e9108de..5d696d300 100644
--- a/packages/lb-annotation/src/core/toolOperation/ScribbleTool.ts
+++ b/packages/lb-annotation/src/core/toolOperation/ScribbleTool.ts
@@ -50,7 +50,7 @@ class ScribbleTool extends BasicToolOperation {
     this.penSize = size;
   }
 
-  public createCacheCanvas(imgNode?: HTMLImageElement) {
+  public initCacheCanvas(imgNode?: HTMLImageElement) {
     if (this.cacheCanvas || !imgNode) {
       return;
     }
@@ -60,14 +60,21 @@ class ScribbleTool extends BasicToolOperation {
     this.cacheContext = ctx;
   }
 
+  public updateCacheCanvasSize(imgNode: HTMLImageElement) {
+    if (this.cacheCanvas) {
+      this.cacheCanvas.width = imgNode.width;
+      this.cacheCanvas.height = imgNode.height;
+    }
+  }
+
   public updateUrl2CacheContext(url: string) {
     ImgConversionUtils.createImgDom(url).then((img) => {
       if (!this.cacheContext) {
-        this.createCacheCanvas(img);
+        this.initCacheCanvas(img);
       }
       if (this.cacheContext) {
         this.cacheContext.save();
-        this.cacheContext.clearRect(0, 0, img.width, img.height);
+        this.clearResult();
         this.cacheContext.drawImage(img, 0, 0, img.width, img.height);
         this.cacheContext.restore();
         this.render();
@@ -75,6 +82,15 @@ class ScribbleTool extends BasicToolOperation {
     });
   }
 
+  public setImgNode(imgNode: HTMLImageElement, basicImgInfo?: Partial<{ valid: boolean; rotate: number }>): void {
+    super.setImgNode(imgNode, basicImgInfo);
+    if (this.cacheCanvas) {
+      this.updateCacheCanvasSize(imgNode);
+    } else {
+      this.initCacheCanvas(imgNode);
+    }
+  }
+
   public setResult(data: IScribbleData[]) {
     // Only has one layer
     const { url } = data?.[0] ?? {};
@@ -112,7 +128,7 @@ class ScribbleTool extends BasicToolOperation {
     }
 
     // Init Image
-    this.createCacheCanvas(this.imgNode);
+    this.initCacheCanvas(this.imgNode);
     this.mouseEvents('onMouseDown').call(this, e);
   };
 
@@ -245,11 +261,15 @@ class ScribbleTool extends BasicToolOperation {
     return [[], this.basicImgInfo, { imgBase64 }];
   }
 
-  public clearResult() {
+  public clearCacheCanvas() {
     this.cacheContext?.clearRect(0, 0, this.cacheContext.canvas.width, this.cacheContext.canvas.height);
     this.render();
   }
 
+  public clearResult() {
+    this.clearCacheCanvas();
+  }
+
   public renderPoint(radius: number) {
     DrawUtils.drawCircleWithFill(this.canvas, this.coord, radius, { color: this.color });
   }