mirror of
https://github.com/Azornes/Comfyui-LayerForge.git
synced 2026-03-21 20:52:12 -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);
|
||||
}, 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;
|
||||
nodeType.prototype.onRemoved = function () {
|
||||
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",
|
||||
callback: async () => {
|
||||
|
||||
@@ -209,9 +209,6 @@ export class MaskTool {
|
||||
maskImage.src = tempCanvas.toDataURL();
|
||||
return maskImage;
|
||||
}
|
||||
get maskContext() {
|
||||
return this.maskCtx;
|
||||
}
|
||||
resize(width, height) {
|
||||
this.initPreviewCanvas();
|
||||
const oldMask = this.maskCanvas;
|
||||
|
||||
@@ -1201,128 +1201,6 @@ app.registerExtension({
|
||||
}, 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;
|
||||
nodeType.prototype.onRemoved = function (this: ComfyNode) {
|
||||
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",
|
||||
callback: async () => {
|
||||
|
||||
@@ -272,10 +272,6 @@ export class MaskTool {
|
||||
return maskImage;
|
||||
}
|
||||
|
||||
get maskContext(): CanvasRenderingContext2D {
|
||||
return this.maskCtx;
|
||||
}
|
||||
|
||||
resize(width: number, height: number): void {
|
||||
this.initPreviewCanvas();
|
||||
const oldMask = this.maskCanvas;
|
||||
|
||||
@@ -32,7 +32,6 @@ export interface ComfyNode {
|
||||
addDOMWidget: (name: string, type: string, element: HTMLElement, options?: any) => any;
|
||||
addWidget: (type: string, name: string, value: any, callback?: (value: any) => void, options?: any) => any;
|
||||
setDirtyCanvas: (force: boolean, dirty: boolean) => void;
|
||||
sendCanvasToClipspace?: () => Promise<void>;
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
||||
Reference in New Issue
Block a user