mirror of
https://github.com/Azornes/Comfyui-LayerForge.git
synced 2026-03-25 22:35:43 -03:00
Remove Clipspace integration from CanvasView
Eliminates the sendCanvasToClipspace method and related UI/menu options from CanvasView and its TypeScript counterpart, as well as the associated type definition. Also removes the unused maskContext getter from MaskTool. This refactor likely reflects a change in feature requirements or a move away from Impact Pack compatibility.
This commit is contained in:
120
js/CanvasView.js
120
js/CanvasView.js
@@ -1085,107 +1085,6 @@ app.registerExtension({
|
|||||||
this.setDirtyCanvas(true, true);
|
this.setDirtyCanvas(true, true);
|
||||||
}, 100);
|
}, 100);
|
||||||
};
|
};
|
||||||
// Add method to send canvas to clipspace for Impact Pack compatibility
|
|
||||||
nodeType.prototype.sendCanvasToClipspace = async function () {
|
|
||||||
try {
|
|
||||||
log.info(`Sending canvas to clipspace for node ${this.id}`);
|
|
||||||
if (!this.canvasWidget || !this.canvasWidget.canvas) {
|
|
||||||
throw new Error("Canvas widget not available");
|
|
||||||
}
|
|
||||||
// Check if we already have a clipspace-compatible image
|
|
||||||
if (this.clipspaceImg) {
|
|
||||||
log.info("Using existing clipspace image");
|
|
||||||
this.imgs = [this.clipspaceImg];
|
|
||||||
ComfyApp.copyToClipspace(this);
|
|
||||||
// Start monitoring for SAM Detector results
|
|
||||||
startSAMDetectorMonitoring(this);
|
|
||||||
// Show success message
|
|
||||||
const notification = document.createElement('div');
|
|
||||||
notification.style.cssText = `
|
|
||||||
position: fixed;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
background: #4a7c59;
|
|
||||||
color: white;
|
|
||||||
padding: 12px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
|
||||||
z-index: 10001;
|
|
||||||
font-size: 14px;
|
|
||||||
`;
|
|
||||||
notification.textContent = "Canvas sent to Clipspace successfully!";
|
|
||||||
document.body.appendChild(notification);
|
|
||||||
setTimeout(() => {
|
|
||||||
if (notification.parentNode) {
|
|
||||||
notification.parentNode.removeChild(notification);
|
|
||||||
}
|
|
||||||
}, 3000);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const canvas = this.canvasWidget.canvas;
|
|
||||||
// Get the flattened canvas as blob
|
|
||||||
const blob = await canvas.canvasLayers.getFlattenedCanvasAsBlob();
|
|
||||||
if (!blob) {
|
|
||||||
throw new Error("Failed to generate canvas blob");
|
|
||||||
}
|
|
||||||
// Upload the image to ComfyUI's temp storage
|
|
||||||
const formData = new FormData();
|
|
||||||
const filename = `layerforge-clipspace-${this.id}-${Date.now()}.png`;
|
|
||||||
formData.append("image", blob, filename);
|
|
||||||
formData.append("overwrite", "true");
|
|
||||||
formData.append("type", "temp");
|
|
||||||
const response = await api.fetchApi("/upload/image", {
|
|
||||||
method: "POST",
|
|
||||||
body: formData,
|
|
||||||
});
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`Failed to upload image: ${response.statusText}`);
|
|
||||||
}
|
|
||||||
const data = await response.json();
|
|
||||||
log.debug('Image uploaded for clipspace:', data);
|
|
||||||
// Create image element with proper URL
|
|
||||||
const img = new Image();
|
|
||||||
img.src = api.apiURL(`/view?filename=${encodeURIComponent(data.name)}&type=${data.type}&subfolder=${data.subfolder}`);
|
|
||||||
// Wait for image to load
|
|
||||||
await new Promise((resolve, reject) => {
|
|
||||||
img.onload = resolve;
|
|
||||||
img.onerror = reject;
|
|
||||||
});
|
|
||||||
// Set the image to the node for clipspace
|
|
||||||
this.imgs = [img];
|
|
||||||
this.clipspaceImg = img;
|
|
||||||
// Copy to ComfyUI clipspace
|
|
||||||
ComfyApp.copyToClipspace(this);
|
|
||||||
// Start monitoring for SAM Detector results
|
|
||||||
startSAMDetectorMonitoring(this);
|
|
||||||
log.info("Canvas successfully sent to ComfyUI clipspace");
|
|
||||||
// Show success message
|
|
||||||
const notification = document.createElement('div');
|
|
||||||
notification.style.cssText = `
|
|
||||||
position: fixed;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
background: #4a7c59;
|
|
||||||
color: white;
|
|
||||||
padding: 12px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
|
||||||
z-index: 10001;
|
|
||||||
font-size: 14px;
|
|
||||||
`;
|
|
||||||
notification.textContent = "Canvas sent to Clipspace successfully!";
|
|
||||||
document.body.appendChild(notification);
|
|
||||||
setTimeout(() => {
|
|
||||||
if (notification.parentNode) {
|
|
||||||
notification.parentNode.removeChild(notification);
|
|
||||||
}
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
catch (error) {
|
|
||||||
log.error("Error sending canvas to clipspace:", error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const onRemoved = nodeType.prototype.onRemoved;
|
const onRemoved = nodeType.prototype.onRemoved;
|
||||||
nodeType.prototype.onRemoved = function () {
|
nodeType.prototype.onRemoved = function () {
|
||||||
log.info(`Cleaning up canvas node ${this.id}`);
|
log.info(`Cleaning up canvas node ${this.id}`);
|
||||||
@@ -1395,25 +1294,6 @@ app.registerExtension({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
content: "Send to Clipspace",
|
|
||||||
callback: async () => {
|
|
||||||
try {
|
|
||||||
log.info("Sending LayerForge canvas to ComfyUI Clipspace");
|
|
||||||
if (self.canvasWidget && self.canvasWidget.canvas && self.sendCanvasToClipspace) {
|
|
||||||
await self.sendCanvasToClipspace();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
log.error("Canvas widget not available or sendCanvasToClipspace method missing");
|
|
||||||
alert("Canvas not ready. Please try again.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
catch (e) {
|
|
||||||
log.error("Error sending to Clipspace:", e);
|
|
||||||
alert(`Failed to send to Clipspace: ${e.message}`);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
content: "Open Image",
|
content: "Open Image",
|
||||||
callback: async () => {
|
callback: async () => {
|
||||||
|
|||||||
@@ -209,9 +209,6 @@ export class MaskTool {
|
|||||||
maskImage.src = tempCanvas.toDataURL();
|
maskImage.src = tempCanvas.toDataURL();
|
||||||
return maskImage;
|
return maskImage;
|
||||||
}
|
}
|
||||||
get maskContext() {
|
|
||||||
return this.maskCtx;
|
|
||||||
}
|
|
||||||
resize(width, height) {
|
resize(width, height) {
|
||||||
this.initPreviewCanvas();
|
this.initPreviewCanvas();
|
||||||
const oldMask = this.maskCanvas;
|
const oldMask = this.maskCanvas;
|
||||||
|
|||||||
@@ -1201,128 +1201,6 @@ app.registerExtension({
|
|||||||
}, 100);
|
}, 100);
|
||||||
};
|
};
|
||||||
|
|
||||||
// Add method to send canvas to clipspace for Impact Pack compatibility
|
|
||||||
nodeType.prototype.sendCanvasToClipspace = async function (this: ComfyNode) {
|
|
||||||
try {
|
|
||||||
log.info(`Sending canvas to clipspace for node ${this.id}`);
|
|
||||||
|
|
||||||
if (!(this as any).canvasWidget || !(this as any).canvasWidget.canvas) {
|
|
||||||
throw new Error("Canvas widget not available");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if we already have a clipspace-compatible image
|
|
||||||
if ((this as any).clipspaceImg) {
|
|
||||||
log.info("Using existing clipspace image");
|
|
||||||
this.imgs = [(this as any).clipspaceImg];
|
|
||||||
ComfyApp.copyToClipspace(this);
|
|
||||||
|
|
||||||
// Start monitoring for SAM Detector results
|
|
||||||
startSAMDetectorMonitoring(this);
|
|
||||||
|
|
||||||
// Show success message
|
|
||||||
const notification = document.createElement('div');
|
|
||||||
notification.style.cssText = `
|
|
||||||
position: fixed;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
background: #4a7c59;
|
|
||||||
color: white;
|
|
||||||
padding: 12px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
|
||||||
z-index: 10001;
|
|
||||||
font-size: 14px;
|
|
||||||
`;
|
|
||||||
notification.textContent = "Canvas sent to Clipspace successfully!";
|
|
||||||
document.body.appendChild(notification);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
if (notification.parentNode) {
|
|
||||||
notification.parentNode.removeChild(notification);
|
|
||||||
}
|
|
||||||
}, 3000);
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const canvas = (this as any).canvasWidget.canvas;
|
|
||||||
|
|
||||||
// Get the flattened canvas as blob
|
|
||||||
const blob = await canvas.canvasLayers.getFlattenedCanvasAsBlob();
|
|
||||||
if (!blob) {
|
|
||||||
throw new Error("Failed to generate canvas blob");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Upload the image to ComfyUI's temp storage
|
|
||||||
const formData = new FormData();
|
|
||||||
const filename = `layerforge-clipspace-${this.id}-${Date.now()}.png`;
|
|
||||||
formData.append("image", blob, filename);
|
|
||||||
formData.append("overwrite", "true");
|
|
||||||
formData.append("type", "temp");
|
|
||||||
|
|
||||||
const response = await api.fetchApi("/upload/image", {
|
|
||||||
method: "POST",
|
|
||||||
body: formData,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`Failed to upload image: ${response.statusText}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
log.debug('Image uploaded for clipspace:', data);
|
|
||||||
|
|
||||||
// Create image element with proper URL
|
|
||||||
const img = new Image();
|
|
||||||
img.src = api.apiURL(`/view?filename=${encodeURIComponent(data.name)}&type=${data.type}&subfolder=${data.subfolder}`);
|
|
||||||
|
|
||||||
// Wait for image to load
|
|
||||||
await new Promise((resolve, reject) => {
|
|
||||||
img.onload = resolve;
|
|
||||||
img.onerror = reject;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Set the image to the node for clipspace
|
|
||||||
this.imgs = [img];
|
|
||||||
(this as any).clipspaceImg = img;
|
|
||||||
|
|
||||||
// Copy to ComfyUI clipspace
|
|
||||||
ComfyApp.copyToClipspace(this);
|
|
||||||
|
|
||||||
// Start monitoring for SAM Detector results
|
|
||||||
startSAMDetectorMonitoring(this);
|
|
||||||
|
|
||||||
log.info("Canvas successfully sent to ComfyUI clipspace");
|
|
||||||
|
|
||||||
// Show success message
|
|
||||||
const notification = document.createElement('div');
|
|
||||||
notification.style.cssText = `
|
|
||||||
position: fixed;
|
|
||||||
top: 20px;
|
|
||||||
right: 20px;
|
|
||||||
background: #4a7c59;
|
|
||||||
color: white;
|
|
||||||
padding: 12px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
|
||||||
z-index: 10001;
|
|
||||||
font-size: 14px;
|
|
||||||
`;
|
|
||||||
notification.textContent = "Canvas sent to Clipspace successfully!";
|
|
||||||
document.body.appendChild(notification);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
if (notification.parentNode) {
|
|
||||||
notification.parentNode.removeChild(notification);
|
|
||||||
}
|
|
||||||
}, 3000);
|
|
||||||
|
|
||||||
} catch (error: any) {
|
|
||||||
log.error("Error sending canvas to clipspace:", error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onRemoved = nodeType.prototype.onRemoved;
|
const onRemoved = nodeType.prototype.onRemoved;
|
||||||
nodeType.prototype.onRemoved = function (this: ComfyNode) {
|
nodeType.prototype.onRemoved = function (this: ComfyNode) {
|
||||||
log.info(`Cleaning up canvas node ${this.id}`);
|
log.info(`Cleaning up canvas node ${this.id}`);
|
||||||
@@ -1572,23 +1450,6 @@ app.registerExtension({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
|
||||||
content: "Send to Clipspace",
|
|
||||||
callback: async () => {
|
|
||||||
try {
|
|
||||||
log.info("Sending LayerForge canvas to ComfyUI Clipspace");
|
|
||||||
if ((self as any).canvasWidget && (self as any).canvasWidget.canvas && self.sendCanvasToClipspace) {
|
|
||||||
await self.sendCanvasToClipspace();
|
|
||||||
} else {
|
|
||||||
log.error("Canvas widget not available or sendCanvasToClipspace method missing");
|
|
||||||
alert("Canvas not ready. Please try again.");
|
|
||||||
}
|
|
||||||
} catch (e: any) {
|
|
||||||
log.error("Error sending to Clipspace:", e);
|
|
||||||
alert(`Failed to send to Clipspace: ${e.message}`);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
content: "Open Image",
|
content: "Open Image",
|
||||||
callback: async () => {
|
callback: async () => {
|
||||||
|
|||||||
@@ -272,10 +272,6 @@ export class MaskTool {
|
|||||||
return maskImage;
|
return maskImage;
|
||||||
}
|
}
|
||||||
|
|
||||||
get maskContext(): CanvasRenderingContext2D {
|
|
||||||
return this.maskCtx;
|
|
||||||
}
|
|
||||||
|
|
||||||
resize(width: number, height: number): void {
|
resize(width: number, height: number): void {
|
||||||
this.initPreviewCanvas();
|
this.initPreviewCanvas();
|
||||||
const oldMask = this.maskCanvas;
|
const oldMask = this.maskCanvas;
|
||||||
|
|||||||
@@ -32,7 +32,6 @@ export interface ComfyNode {
|
|||||||
addDOMWidget: (name: string, type: string, element: HTMLElement, options?: any) => any;
|
addDOMWidget: (name: string, type: string, element: HTMLElement, options?: any) => any;
|
||||||
addWidget: (type: string, name: string, value: any, callback?: (value: any) => void, options?: any) => any;
|
addWidget: (type: string, name: string, value: any, callback?: (value: any) => void, options?: any) => any;
|
||||||
setDirtyCanvas: (force: boolean, dirty: boolean) => void;
|
setDirtyCanvas: (force: boolean, dirty: boolean) => void;
|
||||||
sendCanvasToClipspace?: () => Promise<void>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
|||||||
Reference in New Issue
Block a user