From d9428573e451eadfd2d54c88cf042dcc2034411d Mon Sep 17 00:00:00 2001
From: bruefire <sprinkla.sendonly@gmail.com>
Date: Sat, 9 Dec 2023 16:29:35 +0900
Subject: [PATCH] fixed a canvas length mismatching bug.

---
 js/MaskEditorForVframes.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/js/MaskEditorForVframes.js b/js/MaskEditorForVframes.js
index 96d6bd0..ef158ce 100644
--- a/js/MaskEditorForVframes.js
+++ b/js/MaskEditorForVframes.js
@@ -254,6 +254,7 @@ class MaskEditorDialog extends ComfyDialog {
 		var cancelButton = this.createRightButton("Cancel", () => {
 			document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp);
 			document.removeEventListener("keydown", MaskEditorDialog.handleKeyDown);
+			
 			self.close();
 		});
 
@@ -341,6 +342,11 @@ class MaskEditorDialog extends ComfyDialog {
 
 			const config = { attributes: true };
 			observer.observe(this.element, config);
+
+		}
+		else if(this.#paths.length != this.backMaskCanvases.length) {
+			this.backMaskCanvases = [...new Array(this.#paths.length)].map(_ => document.createElement("canvas"));
+			this.backSketchCanvases = [...new Array(this.#paths.length)].map(_ => document.createElement("canvas"));
 		}
 
 		this.setImages(this.imgCanvas, this.backupCanvas);
@@ -375,7 +381,7 @@ class MaskEditorDialog extends ComfyDialog {
 
 		// image load
 		const orig_image = new Image();
-		window.addEventListener("resize", () => {
+		this.resizingEventHandler = () => {
 			// repositioning
 			imgCanvas.width = window.innerWidth - 250;
 			imgCanvas.height = window.innerHeight - 200;
@@ -415,7 +421,9 @@ class MaskEditorDialog extends ComfyDialog {
 
 			this.prepareSketchLayer();
 			maskCtx.drawImage(this.getBackCanvasForCurrentMode(this.#selectedIndex), 0, 0, maskCanvas.width, maskCanvas.height);
-		});
+		};
+
+		window.addEventListener("resize", this.resizingEventHandler);
 
 		const touched_image = new Image();
 
@@ -723,6 +731,11 @@ class MaskEditorDialog extends ComfyDialog {
 		this.close();
 	}
 
+	close() {
+		window.removeEventListener("resize", this.resizingEventHandler);
+		super.close();
+	}
+
 
 	#_updatePathDataHnadler = null;
 	get #updatePathDataHnadler() {