From 0e09d99a115370a76c1ab1e7d9915c7ba4e7ce56 Mon Sep 17 00:00:00 2001 From: Neil Graham Date: Mon, 27 Nov 2023 09:57:07 +1300 Subject: [PATCH] rewrite of inter-page connection negotiation mechanism --- web/main.js | 65 ++++++++++++++++++++++++++++-------------------- web/page/main.js | 26 +++++++++++-------- 2 files changed, 53 insertions(+), 38 deletions(-) diff --git a/web/main.js b/web/main.js index bfa60a9..600580f 100644 --- a/web/main.js +++ b/web/main.js @@ -10,6 +10,7 @@ let editor= {}; // one image editor for all nodes, otherwise communication is m // to serve multiple nodes. const plugin_name = "canvas_link"; +const editor_path = "/extensions/canvas_tab/page/index.html" function setSignal(key) { const keyName = plugin_name+":"+key; @@ -39,13 +40,13 @@ app.registerExtension({ name: "canvas_tab", init() { console.log("init:"+this.name) - installStorageListener(); checkForExistingEditor(); const blankImage=document.createElement("canvas"); blankImage.width=64; blankImage.height=64; blankImage.toBlob(a=>dummyBlob=a) + addEventListener("message",handleWindowMessage) }, async beforeRegisterNodeDef(nodeType, nodeData, app) { @@ -89,7 +90,7 @@ function initEditorNode(node) node.maskWidget.onTopOf = node.canvasWidget; - + editor.channel.port1.postMessage({retransmit:true}) return; } @@ -119,13 +120,14 @@ function addDragDropSupport(node) { } function transmitImages(images) { + console.log("transmit",editor) if (!editor.window || editor.window.closed) openEditor(); if(editor.channel) { editor.channel.port1.postMessage({images}) } else { //try again after half a second just in case we caught it setting up. - setTimeout(_=>{editor?.channel.port1.postMessage({images})}, 500); + setTimeout(_=>{editor?.channel?.port1.postMessage({images})}, 500); } } @@ -150,11 +152,13 @@ function openEditor() { setTimeout(_=>{ if (checkAndClear("findImageEditor")) { //if the flag is still set by here, assume there's no-one out there - editor.window = window.open('/extensions/canvas_tab/page/index.html', plugin_name); + console.log("open window a") + editor.window = window.open(editor_path, plugin_name); } } ,1000) } else { - editor.window = window.open('/extensions/canvas_tab/page/index.html', plugin_name); + console.log("open window b") + editor.window = window.open(editor_path, plugin_name); } } @@ -194,6 +198,9 @@ function addCanvasWidget(node,name,inputData,app) { name, size: [128,128], image: null, + sendBlobRequired : false, + uploadedBlobName : "", + _blob: null, background :"#8888", _value : "", get value() { @@ -202,6 +209,13 @@ function addCanvasWidget(node,name,inputData,app) { set value(newValue) { this._value=newValue }, + get blob() { + return this._blob; + }, + set blob(newValue) { + this._blob=newValue; + this.sendBlobRequired = true; + }, draw(ctx, node, width, y) { let [nodeWidth,nodeHeight] = node.size; if (this.onTopOf) { @@ -235,10 +249,12 @@ function addCanvasWidget(node,name,inputData,app) { let widget = node.widgets[widgetIndex]; let blob = widget.blob; if (!(blob instanceof Blob)) blob = dummyBlob; - - let result = await uploadBlob(blob,widget.name+"_Image.png") - if (result) { - return result.name; + if (widget.sendBlobRequired) { + let result = await uploadBlob(blob,widget.name+"_Image.png") + if (result) { + widget.uploadedBlobName = result.name; + widget.sendBlobRequired=false; + } } return ""; } @@ -268,6 +284,17 @@ function loadBlobIntoWidget(widget, blob) { img.src = objectURL; } +function handleWindowMessage(e) { + + if (typeof e.data === "object" && e.data?.category === plugin_name) { + let data = e.data.data; + if (data == "Editor Here") { + editor.window = e.source; + initiateCommunication(); + } else console.log("window message received",e) + } +} + function messageFromEditor(event) { const nodes = app.graph.findNodesByType("Canvas_Tab"); //send same thing to all of the Canvas_Tab nodes @@ -286,26 +313,10 @@ function messageFromEditor(event) { } function checkForExistingEditor() { - if (checkAndClear('clientAttached')) { + if (getSignal('clientPage')) { setSignal("findImageEditor") // Signal the Image Editor page to identify itself for reattachment } } -function installStorageListener() { - window.addEventListener('storage', (event) => { - if (event.key.startsWith(plugin_name)) { - const key = event.key.slice(plugin_name.length+1); - if (key === 'reconnect' && event.newValue === 'true') { - clearSignal('reconnect'); - initiateCommunication(); - } - - if (key === 'foundImageEditor' && event.newValue === 'true') { - editor.window = window.open('', plugin_name); - initiateCommunication(); - clearSignal('foundImageEditor'); - } - } - }); -} + diff --git a/web/page/main.js b/web/page/main.js index 0ab4065..ce94619 100644 --- a/web/page/main.js +++ b/web/page/main.js @@ -73,34 +73,38 @@ window.addEventListener('load', () => { } else { setSignal("clientPage"); } - clearSignal("reconnect");// zap any existing signal to trigger change event on other side - setSignal("reconnect");// Signal the main page to reconnect + console.log("at load time our opener was ", window.opener) + window.opener.postMessage({category:plugin_name,data:"Editor Here"}) + }); window.addEventListener("unload", _=> clearSignal("clientPage")); window.addEventListener('storage', (event) => { if (checkAndClear('findImageEditor')) { - // Signal the main page that the Image editor page is here - setSignal("foundImageEditor") + window.opener.postMessage({category:plugin_name,data:"Editor Here"}) + } }); window.addEventListener('message', (event) => { if (event.data === 'Initiate communication') { - setSignal("clientAttached"); portToMain = event.ports[0]; // Save the port for future use portToMain.postMessage('Hello from Image_editor!'); - //transmitCanvas(); - portToMain.onmessage = (messageEvent) => { - console.log(messageEvent) - if (messageEvent.data instanceof Object) { - const images=messageEvent.data.images[0]; + portToMain.onmessage = (messageEvent) => { + if (messageEvent.data instanceof Object) { + const data = messageEvent.data; + const images=data.images; if (images?.length > 0) { - loadImagefromURL(messageEvent.data.images[0]); + loadImagefromURL(images[0]); } + + if (data?.retransmit) { + activePic.updateVisualRepresentation(true); + } + } else console.log('Message received from main page:', messageEvent.data); }; }