diff --git a/js/MaskEditorForVframes.js b/js/MaskEditorForVframes.js index dd5e371..f1ab133 100644 --- a/js/MaskEditorForVframes.js +++ b/js/MaskEditorForVframes.js @@ -54,28 +54,32 @@ class MaskEditorDialog extends ComfyDialog { set path_data(value) { const parts = value?.split(":"); if (parts) { - const oldId = this.#vframeId; + const oldId = this.#seqImgId; const dirIds = parts.pop(); - const id = dirIds.split("/")[0]; - this.#vframeId = id; + const ids = dirIds.split("/"); + this.#seqImgId = ids[0]; + this.#seqMskId = ids[1]; + this.#seqSkhId = ids[2]; this.#paths = parts.map(file_name => { return { filename: file_name, - subfolder: "extVideoFrame" + id, + subfolder: "extVideoFrame" + this.#seqImgId, type: "input" } }); this.#selectedIndex = 0; - if (this.#vframeId != oldId) { + if (this.#seqImgId != oldId) { this.backupMaskCanvases = null; this.backupSketchCanvases = null; } } } #paths = null; - #vframeId = -1; + #seqImgId = -1; + #seqMskId = null; + #seqSkhId = null; #selectedIndex = 0; @@ -367,6 +371,33 @@ class MaskEditorDialog extends ComfyDialog { const config = { attributes: true }; observer.observe(this.element, config); + if (this.#seqMskId) { + const maskPaths = this.#paths.map(data => { + let data0 = Object.assign({}, data); + data0.subfolder = "extVideoFrame" + String(this.#seqMskId); + return data0; + }); + const sketchPaths = this.#paths.map(data => { + let data0 = Object.assign({}, data); + data0.subfolder = "extVideoFrame" + String(this.#seqSkhId); + return data0; + }); + const loadPrev = (path, i, canvases) => { + const params = new URLSearchParams(path); + const url = new URL(api.apiURL("/view?" + params.toString()), window.location.href); + let img = new Image(); + img.src = url; + img.onload = () => { + let canvas = canvases[i]; + canvas.width = img.width; + canvas.height = img.height; + canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height); + }; + }; + maskPaths.forEach((elem, i) => loadPrev(elem, i, this.backMaskCanvases)); + sketchPaths.forEach((elem, i) => loadPrev(elem, i, this.backSketchCanvases)); + } + } else if(this.#paths.length != this.backMaskCanvases.length) { this.backMaskCanvases = [...new Array(this.#paths.length)].map(_ => document.createElement("canvas"));