324 lines
8.4 KiB
JavaScript
324 lines
8.4 KiB
JavaScript
import { app } from "/scripts/app.js";
|
|
import { api } from "/scripts/api.js"
|
|
import { ComfyWidgets } from "/scripts/widgets.js";
|
|
|
|
let myticker =0;
|
|
let dummyBlob;
|
|
let editor= {}; // one image editor for all nodes, otherwise communication is messy when reload happens
|
|
// for now that means only one editor node is practical.
|
|
// adding a protocol that identifies multiple nodes would allow the one editor
|
|
// 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;
|
|
localStorage.setItem(keyName, 'true');
|
|
}
|
|
|
|
function clearSignal(key) {
|
|
const keyName = plugin_name+":"+key;
|
|
localStorage.removeItem(keyName);
|
|
}
|
|
|
|
function getSignal(key) {
|
|
const keyName = plugin_name+":"+key;
|
|
return localStorage.getItem(keyName) === 'true';
|
|
}
|
|
|
|
function checkAndClear(key) {
|
|
const keyName = plugin_name+":"+key;
|
|
let result=localStorage.getItem(keyName) === 'true';
|
|
if (result) localStorage.removeItem(keyName);
|
|
return result;
|
|
}
|
|
|
|
|
|
|
|
app.registerExtension({
|
|
name: "canvas_tab",
|
|
async init() {
|
|
console.log("init:"+this.name)
|
|
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) {
|
|
},
|
|
|
|
async getCustomWidgets(app) {
|
|
return {
|
|
CANVAS(node,inputName,inputData,app) {
|
|
return addCanvasWidget(node,inputName,inputData, app)
|
|
}
|
|
}
|
|
},
|
|
|
|
nodeCreated(node) {
|
|
const title = node.getTitle();
|
|
// node.type not set at this point?
|
|
if (title==="Edit In Another Tab") {
|
|
initEditorNode(node);
|
|
addDragDropSupport(node);
|
|
}
|
|
else if (title==="Send to Editor Tab") {
|
|
initTransmitNode(node);
|
|
addDragDropSupport(node);
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
function initEditorNode(node)
|
|
{
|
|
node.collected_images = [];
|
|
node.addWidget("button","Edit","bingo", (widget,graphCanvas, node, {x,y}, event) => focusEditor(node));
|
|
node.widgets.reverse();// because auto created widget get put in first
|
|
|
|
node.canvasWidget=node.widgets[1];
|
|
node.maskWidget=node.widgets[2];
|
|
|
|
console.log(node);
|
|
node.maskWidget.onTopOf = node.canvasWidget;
|
|
|
|
editor.channel.port1.postMessage({retransmit:true})
|
|
return;
|
|
}
|
|
|
|
function addDragDropSupport(node) {
|
|
// Add handler to check if an image is being dragged over our node
|
|
node.onDragOver = function (e) {
|
|
if (e.dataTransfer && e.dataTransfer.items) {
|
|
const image = [...e.dataTransfer.items].find((f) => f.kind === "file");
|
|
return !!image;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
// On drop upload files
|
|
node.onDragDrop = function (e) {
|
|
let handled = false;
|
|
for (const file of e.dataTransfer.files) {
|
|
if (file.type.startsWith("image/")) {
|
|
const url = URL.createObjectURL(file)
|
|
transmitImages([url])
|
|
setTimeout(_=>URL.revokeObjectURL(url),1000);
|
|
handled = true;
|
|
}
|
|
}
|
|
return handled;
|
|
};
|
|
|
|
}
|
|
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);
|
|
}
|
|
}
|
|
|
|
function initTransmitNode(node)
|
|
{
|
|
node.collected_images = [];
|
|
|
|
node.onExecuted = (output)=> {
|
|
if (output?.collected_images) {
|
|
transmitImages(output.collected_images);
|
|
}
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
function openEditor() {
|
|
editor = {};// start over with new editor;
|
|
if (getSignal('clientPage')) {
|
|
//if clientPage is set, there might be a new page to replace the lost one
|
|
setSignal('findImageEditor')
|
|
setTimeout(_=>{
|
|
if (checkAndClear("findImageEditor")) {
|
|
//if the flag is still set by here, assume there's no-one out there
|
|
console.log("open window a")
|
|
editor.window = window.open(editor_path, plugin_name);
|
|
}
|
|
} ,1000)
|
|
} else {
|
|
console.log("open window b")
|
|
editor.window = window.open(editor_path, plugin_name);
|
|
}
|
|
}
|
|
|
|
function focusEditor() {
|
|
if (!editor.window || editor.window.closed) {
|
|
openEditor();
|
|
} else {
|
|
editor.window.focus();
|
|
}
|
|
}
|
|
|
|
|
|
async function uploadBlob(blob,filename="blob") {
|
|
try {
|
|
// Wrap file in formdata so it includes filename
|
|
const body = new FormData();
|
|
body.append("image", blob,filename);
|
|
const resp = await api.fetchApi("/upload/image", {
|
|
method: "POST",
|
|
body,
|
|
});
|
|
|
|
if (resp.status === 200) {
|
|
return await resp.json();;
|
|
} else {
|
|
alert(resp.status + " - " + resp.statusText);
|
|
}
|
|
} catch (error) {
|
|
alert(error);
|
|
}
|
|
}
|
|
|
|
function addCanvasWidget(node,name,inputData,app) {
|
|
|
|
const widget = {
|
|
type: inputData[0],
|
|
name,
|
|
size: [128,128],
|
|
image: null,
|
|
sendBlobRequired : true,
|
|
uploadedBlobName : "",
|
|
_blob: null,
|
|
background :"#8888",
|
|
_value : "",
|
|
get value() {
|
|
return this._value
|
|
},
|
|
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) {
|
|
ctx.globalAlpha=0.5;
|
|
y= this.onTopOf.last_y;
|
|
|
|
} else {
|
|
ctx.globalAlpha=1;
|
|
ctx.fillStyle = this.background;
|
|
ctx.fillRect(0,y,width,nodeHeight-y);
|
|
}
|
|
if (this.image) {
|
|
const imageAspect = this.image.width/this.image.height;
|
|
let height = nodeHeight-y;
|
|
const widgetAspect = width / height;
|
|
let targetWidth,targetHeight;
|
|
if (imageAspect>widgetAspect) {
|
|
targetWidth=width;
|
|
targetHeight=width/imageAspect;
|
|
} else {
|
|
targetHeight=height;
|
|
targetWidth=height*imageAspect;
|
|
}
|
|
ctx.drawImage(this.image, (width-targetWidth)/2,y+(height-targetHeight)/2,targetWidth,targetHeight);
|
|
}
|
|
},
|
|
computeSize(...args) {
|
|
return [128,128];
|
|
},
|
|
async serializeValue(nodeId,widgetIndex) {
|
|
let widget = node.widgets[widgetIndex];
|
|
let blob = widget.blob;
|
|
if (!(blob instanceof Blob)) blob = dummyBlob;
|
|
if (widget.sendBlobRequired) {
|
|
let result = await uploadBlob(blob,widget.name+"_Image.png")
|
|
if (result) {
|
|
widget.uploadedBlobName = result.name;
|
|
widget.sendBlobRequired=false;
|
|
}
|
|
}
|
|
console.log(widget)
|
|
return widget.uploadedBlobName;
|
|
}
|
|
}
|
|
node.addCustomWidget(widget);
|
|
|
|
return widget;
|
|
}
|
|
|
|
function initiateCommunication() {
|
|
if (editor.window && !editor.window.closed) {
|
|
editor.channel= new MessageChannel();
|
|
editor.window.postMessage('Initiate communication', '*', [editor.channel.port2]);
|
|
editor.channel.port1.onmessage = messageFromEditor;
|
|
}
|
|
}
|
|
|
|
function loadBlobIntoWidget(widget, blob) {
|
|
const objectURL = URL.createObjectURL(blob);
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
widget.blob = blob;
|
|
widget.image = img;
|
|
app.graph.setDirtyCanvas(true);
|
|
URL.revokeObjectURL(objectURL);
|
|
};
|
|
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
|
|
if (event.data.image instanceof Blob) {
|
|
for (const node of nodes) {
|
|
loadBlobIntoWidget(node.canvasWidget,event.data.image);
|
|
}
|
|
}
|
|
if (event.data.mask instanceof Blob) {
|
|
for (const node of nodes) {
|
|
loadBlobIntoWidget(node.maskWidget,event.data.mask);
|
|
}
|
|
} else {
|
|
console.log('Message received from Image Editor:', event.data);
|
|
}
|
|
}
|
|
|
|
function checkForExistingEditor() {
|
|
if (getSignal('clientPage')) {
|
|
setSignal("findImageEditor")
|
|
// Signal the Image Editor page to identify itself for reattachment
|
|
}
|
|
}
|
|
|
|
|