diff --git a/js/CanvasView.js b/js/CanvasView.js
index 2906431..cda1aa1 100644
--- a/js/CanvasView.js
+++ b/js/CanvasView.js
@@ -96,6 +96,33 @@ async function createCanvasWidget(node, widget, app) {
border-radius: 6px;
}
+ .painter-clipboard-group {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ background-color: rgba(0,0,0,0.15);
+ padding: 3px;
+ border-radius: 6px;
+ border: 1px solid rgba(255,255,255,0.1);
+ position: relative;
+ }
+
+ .painter-clipboard-group::before {
+ content: "";
+ position: absolute;
+ top: -2px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 20px;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, rgba(74, 108, 212, 0.6), transparent);
+ border-radius: 1px;
+ }
+
+ .painter-clipboard-group .painter-button {
+ margin: 1px;
+ }
+
.painter-separator {
width: 1px;
height: 28px;
@@ -368,7 +395,7 @@ async function createCanvasWidget(node, widget, app) {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
- z-index: 9998;
+ z-index: 111;
display: flex;
align-items: center;
justify-content: center;
@@ -549,112 +576,114 @@ async function createCanvasWidget(node, widget, app) {
title: "Import image from another node",
onclick: () => canvas.canvasIO.importLatestImage()
}),
- $el("button.painter-button.primary", {
- textContent: "Paste Image",
- title: "Paste image from clipboard",
- onclick: () => {
- // Use the direct handlePaste method from CanvasLayers
- const fitOnAddWidget = node.widgets.find(w => w.name === "fit_on_add");
- const addMode = fitOnAddWidget && fitOnAddWidget.value ? 'fit' : 'center';
- canvas.canvasLayers.handlePaste(addMode);
- }
- }),
- $el("button.painter-button", {
- id: `clipboard-toggle-${node.id}`,
- textContent: "📋 System",
- title: "Toggle clipboard source: System Clipboard",
- style: {
- minWidth: "100px",
- fontSize: "11px",
- backgroundColor: "#4a4a4a"
- },
- onclick: (e) => {
- const button = e.target;
- if (canvas.canvasLayers.clipboardPreference === 'system') {
- canvas.canvasLayers.clipboardPreference = 'clipspace';
- button.textContent = "📋 Clipspace";
- button.title = "Toggle clipboard source: ComfyUI Clipspace";
- button.style.backgroundColor = "#4a6cd4";
- } else {
- canvas.canvasLayers.clipboardPreference = 'system';
- button.textContent = "📋 System";
- button.title = "Toggle clipboard source: System Clipboard";
- button.style.backgroundColor = "#4a4a4a";
+ $el("div.painter-clipboard-group", {}, [
+ $el("button.painter-button.primary", {
+ textContent: "Paste Image",
+ title: "Paste image from clipboard",
+ onclick: () => {
+ // Use the direct handlePaste method from CanvasLayers
+ const fitOnAddWidget = node.widgets.find(w => w.name === "fit_on_add");
+ const addMode = fitOnAddWidget && fitOnAddWidget.value ? 'fit' : 'center';
+ canvas.canvasLayers.handlePaste(addMode);
}
- log.info(`Clipboard preference toggled to: ${canvas.canvasLayers.clipboardPreference}`);
- },
- onmouseenter: (e) => {
- const currentPreference = canvas.canvasLayers.clipboardPreference;
- let tooltipContent = '';
-
- if (currentPreference === 'system') {
- tooltipContent = `
- 📋 System Clipboard Mode
-
- | Ctrl + C | Copy selected layers to internal clipboard + system clipboard as flattened image |
- | Ctrl + V | Priority: |
- | 1️⃣ Internal clipboard (copied layers) |
- | 2️⃣ System clipboard (images, screenshots) |
- | 3️⃣ System clipboard (file paths, URLs) |
- | Paste Image | Same as Ctrl+V but respects fit_on_add setting |
- | Drag & Drop | Load images directly from files |
-
-
- ⚠️ Security Note: "Paste Image" button for external images may not work due to browser security restrictions. Use Ctrl+V instead or Drag & Drop.
-
-
- 💡 Best for: Working with screenshots, copied images, file paths, and urls.
-
- `;
- } else {
- tooltipContent = `
- 📋 ComfyUI Clipspace Mode
-
- | Ctrl + C | Copy selected layers to internal clipboard + ComfyUI Clipspace as flattened image |
- | Ctrl + V | Priority: |
- | 1️⃣ Internal clipboard (copied layers) |
- | 2️⃣ ComfyUI Clipspace (workflow images) |
- | 3️⃣ System clipboard (fallback) |
- | Paste Image | Same as Ctrl+V but respects fit_on_add setting |
- | Drag & Drop | Load images directly from files |
-
-
- 💡 Best for: ComfyUI workflow integration and node-to-node image transfer
-
- `;
+ }),
+ $el("button.painter-button", {
+ id: `clipboard-toggle-${node.id}`,
+ textContent: "📋 System",
+ title: "Toggle clipboard source: System Clipboard",
+ style: {
+ minWidth: "100px",
+ fontSize: "11px",
+ backgroundColor: "#4a4a4a"
+ },
+ onclick: (e) => {
+ const button = e.target;
+ if (canvas.canvasLayers.clipboardPreference === 'system') {
+ canvas.canvasLayers.clipboardPreference = 'clipspace';
+ button.textContent = "📋 Clipspace";
+ button.title = "Toggle clipboard source: ComfyUI Clipspace";
+ button.style.backgroundColor = "#4a6cd4";
+ } else {
+ canvas.canvasLayers.clipboardPreference = 'system';
+ button.textContent = "📋 System";
+ button.title = "Toggle clipboard source: System Clipboard";
+ button.style.backgroundColor = "#4a4a4a";
+ }
+ log.info(`Clipboard preference toggled to: ${canvas.canvasLayers.clipboardPreference}`);
+ },
+ onmouseenter: (e) => {
+ const currentPreference = canvas.canvasLayers.clipboardPreference;
+ let tooltipContent = '';
+
+ if (currentPreference === 'system') {
+ tooltipContent = `
+ 📋 System Clipboard Mode
+
+ | Ctrl + C | Copy selected layers to internal clipboard + system clipboard as flattened image |
+ | Ctrl + V | Priority: |
+ | 1️⃣ Internal clipboard (copied layers) |
+ | 2️⃣ System clipboard (images, screenshots) |
+ | 3️⃣ System clipboard (file paths, URLs) |
+ | Paste Image | Same as Ctrl+V but respects fit_on_add setting |
+ | Drag & Drop | Load images directly from files |
+
+
+ ⚠️ Security Note: "Paste Image" button for external images may not work due to browser security restrictions. Use Ctrl+V instead or Drag & Drop.
+
+
+ 💡 Best for: Working with screenshots, copied images, file paths, and urls.
+
+ `;
+ } else {
+ tooltipContent = `
+ 📋 ComfyUI Clipspace Mode
+
+ | Ctrl + C | Copy selected layers to internal clipboard + ComfyUI Clipspace as flattened image |
+ | Ctrl + V | Priority: |
+ | 1️⃣ Internal clipboard (copied layers) |
+ | 2️⃣ ComfyUI Clipspace (workflow images) |
+ | 3️⃣ System clipboard (fallback) |
+ | Paste Image | Same as Ctrl+V but respects fit_on_add setting |
+ | Drag & Drop | Load images directly from files |
+
+
+ 💡 Best for: ComfyUI workflow integration and node-to-node image transfer
+
+ `;
+ }
+
+ helpTooltip.innerHTML = tooltipContent;
+ helpTooltip.style.visibility = 'hidden';
+ helpTooltip.style.display = 'block';
+
+ const buttonRect = e.target.getBoundingClientRect();
+ const tooltipRect = helpTooltip.getBoundingClientRect();
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
+
+ let left = buttonRect.left;
+ let top = buttonRect.bottom + 5;
+
+ if (left + tooltipRect.width > viewportWidth) {
+ left = viewportWidth - tooltipRect.width - 10;
+ }
+
+ if (top + tooltipRect.height > viewportHeight) {
+ top = buttonRect.top - tooltipRect.height - 5;
+ }
+
+ if (left < 10) left = 10;
+ if (top < 10) top = 10;
+
+ helpTooltip.style.left = `${left}px`;
+ helpTooltip.style.top = `${top}px`;
+ helpTooltip.style.visibility = 'visible';
+ },
+ onmouseleave: () => {
+ helpTooltip.style.display = 'none';
}
-
- helpTooltip.innerHTML = tooltipContent;
- helpTooltip.style.visibility = 'hidden';
- helpTooltip.style.display = 'block';
-
- const buttonRect = e.target.getBoundingClientRect();
- const tooltipRect = helpTooltip.getBoundingClientRect();
- const viewportWidth = window.innerWidth;
- const viewportHeight = window.innerHeight;
-
- let left = buttonRect.left;
- let top = buttonRect.bottom + 5;
-
- if (left + tooltipRect.width > viewportWidth) {
- left = viewportWidth - tooltipRect.width - 10;
- }
-
- if (top + tooltipRect.height > viewportHeight) {
- top = buttonRect.top - tooltipRect.height - 5;
- }
-
- if (left < 10) left = 10;
- if (top < 10) top = 10;
-
- helpTooltip.style.left = `${left}px`;
- helpTooltip.style.top = `${top}px`;
- helpTooltip.style.visibility = 'visible';
- },
- onmouseleave: () => {
- helpTooltip.style.display = 'none';
- }
- }),
+ })
+ ]),
]),
$el("div.painter-separator"),