From 784e3d92967c685914d12ef4d6ad853d60dd883e Mon Sep 17 00:00:00 2001 From: Dariusz L Date: Tue, 22 Jul 2025 23:19:34 +0200 Subject: [PATCH] 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. --- js/CanvasView.js | 120 --------------------------------------- js/MaskTool.js | 3 - src/CanvasView.ts | 139 ---------------------------------------------- src/MaskTool.ts | 4 -- src/types.ts | 1 - 5 files changed, 267 deletions(-) diff --git a/js/CanvasView.js b/js/CanvasView.js index 454778e..80854d2 100644 --- a/js/CanvasView.js +++ b/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 () => { diff --git a/js/MaskTool.js b/js/MaskTool.js index 9eb1d49..9bbfa56 100644 --- a/js/MaskTool.js +++ b/js/MaskTool.js @@ -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; diff --git a/src/CanvasView.ts b/src/CanvasView.ts index 1570c57..32d59bf 100644 --- a/src/CanvasView.ts +++ b/src/CanvasView.ts @@ -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 () => { diff --git a/src/MaskTool.ts b/src/MaskTool.ts index baa0820..0cf44db 100644 --- a/src/MaskTool.ts +++ b/src/MaskTool.ts @@ -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; diff --git a/src/types.ts b/src/types.ts index 2411d20..3cb8a90 100644 --- a/src/types.ts +++ b/src/types.ts @@ -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; } declare global {