Spaces:
Building
on
A10G
Building
on
A10G
import { app } from "../../scripts/app.js"; | |
import { ComfyDialog, $el } from "../../scripts/ui.js"; | |
import { ComfyApp } from "../../scripts/app.js"; | |
import { api } from "../../scripts/api.js" | |
import { ClipspaceDialog } from "./clipspace.js"; | |
// Helper function to convert a data URL to a Blob object | |
function dataURLToBlob(dataURL) { | |
const parts = dataURL.split(';base64,'); | |
const contentType = parts[0].split(':')[1]; | |
const byteString = atob(parts[1]); | |
const arrayBuffer = new ArrayBuffer(byteString.length); | |
const uint8Array = new Uint8Array(arrayBuffer); | |
for (let i = 0; i < byteString.length; i++) { | |
uint8Array[i] = byteString.charCodeAt(i); | |
} | |
return new Blob([arrayBuffer], { type: contentType }); | |
} | |
function loadedImageToBlob(image) { | |
const canvas = document.createElement('canvas'); | |
canvas.width = image.width; | |
canvas.height = image.height; | |
const ctx = canvas.getContext('2d'); | |
ctx.drawImage(image, 0, 0); | |
const dataURL = canvas.toDataURL('image/png', 1); | |
const blob = dataURLToBlob(dataURL); | |
return blob; | |
} | |
function loadImage(imagePath) { | |
return new Promise((resolve, reject) => { | |
const image = new Image(); | |
image.onload = function() { | |
resolve(image); | |
}; | |
image.src = imagePath; | |
}); | |
} | |
async function uploadMask(filepath, formData) { | |
await api.fetchApi('/upload/mask', { | |
method: 'POST', | |
body: formData | |
}).then(response => {}).catch(error => { | |
console.error('Error:', error); | |
}); | |
ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']] = new Image(); | |
ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src = api.apiURL("/view?" + new URLSearchParams(filepath).toString() + app.getPreviewFormatParam() + app.getRandParam()); | |
if(ComfyApp.clipspace.images) | |
ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']] = filepath; | |
ClipspaceDialog.invalidatePreview(); | |
} | |
function prepare_mask(image, maskCanvas, maskCtx, maskColor) { | |
// paste mask data into alpha channel | |
maskCtx.drawImage(image, 0, 0, maskCanvas.width, maskCanvas.height); | |
const maskData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height); | |
// invert mask | |
for (let i = 0; i < maskData.data.length; i += 4) { | |
if(maskData.data[i+3] == 255) | |
maskData.data[i+3] = 0; | |
else | |
maskData.data[i+3] = 255; | |
maskData.data[i] = maskColor.r; | |
maskData.data[i+1] = maskColor.g; | |
maskData.data[i+2] = maskColor.b; | |
} | |
maskCtx.globalCompositeOperation = 'source-over'; | |
maskCtx.putImageData(maskData, 0, 0); | |
} | |
class MaskEditorDialog extends ComfyDialog { | |
static instance = null; | |
static getInstance() { | |
if(!MaskEditorDialog.instance) { | |
MaskEditorDialog.instance = new MaskEditorDialog(app); | |
} | |
return MaskEditorDialog.instance; | |
} | |
is_layout_created = false; | |
constructor() { | |
super(); | |
this.element = $el("div.comfy-modal", { parent: document.body }, | |
[ $el("div.comfy-modal-content", | |
[...this.createButtons()]), | |
]); | |
} | |
createButtons() { | |
return []; | |
} | |
createButton(name, callback) { | |
var button = document.createElement("button"); | |
button.style.pointerEvents = "auto"; | |
button.innerText = name; | |
button.addEventListener("click", callback); | |
return button; | |
} | |
createLeftButton(name, callback) { | |
var button = this.createButton(name, callback); | |
button.style.cssFloat = "left"; | |
button.style.marginRight = "4px"; | |
return button; | |
} | |
createRightButton(name, callback) { | |
var button = this.createButton(name, callback); | |
button.style.cssFloat = "right"; | |
button.style.marginLeft = "4px"; | |
return button; | |
} | |
createLeftSlider(self, name, callback) { | |
const divElement = document.createElement('div'); | |
divElement.id = "maskeditor-slider"; | |
divElement.style.cssFloat = "left"; | |
divElement.style.fontFamily = "sans-serif"; | |
divElement.style.marginRight = "4px"; | |
divElement.style.color = "var(--input-text)"; | |
divElement.style.backgroundColor = "var(--comfy-input-bg)"; | |
divElement.style.borderRadius = "8px"; | |
divElement.style.borderColor = "var(--border-color)"; | |
divElement.style.borderStyle = "solid"; | |
divElement.style.fontSize = "15px"; | |
divElement.style.height = "21px"; | |
divElement.style.padding = "1px 6px"; | |
divElement.style.display = "flex"; | |
divElement.style.position = "relative"; | |
divElement.style.top = "2px"; | |
divElement.style.pointerEvents = "auto"; | |
self.brush_slider_input = document.createElement('input'); | |
self.brush_slider_input.setAttribute('type', 'range'); | |
self.brush_slider_input.setAttribute('min', '1'); | |
self.brush_slider_input.setAttribute('max', '100'); | |
self.brush_slider_input.setAttribute('value', '10'); | |
const labelElement = document.createElement("label"); | |
labelElement.textContent = name; | |
divElement.appendChild(labelElement); | |
divElement.appendChild(self.brush_slider_input); | |
self.brush_slider_input.addEventListener("change", callback); | |
return divElement; | |
} | |
setlayout(imgCanvas, maskCanvas) { | |
const self = this; | |
// If it is specified as relative, using it only as a hidden placeholder for padding is recommended | |
// to prevent anomalies where it exceeds a certain size and goes outside of the window. | |
var bottom_panel = document.createElement("div"); | |
bottom_panel.style.position = "absolute"; | |
bottom_panel.style.bottom = "0px"; | |
bottom_panel.style.left = "20px"; | |
bottom_panel.style.right = "20px"; | |
bottom_panel.style.height = "50px"; | |
bottom_panel.style.pointerEvents = "none"; | |
var brush = document.createElement("div"); | |
brush.id = "brush"; | |
brush.style.backgroundColor = "transparent"; | |
brush.style.outline = "1px dashed black"; | |
brush.style.boxShadow = "0 0 0 1px white"; | |
brush.style.borderRadius = "50%"; | |
brush.style.MozBorderRadius = "50%"; | |
brush.style.WebkitBorderRadius = "50%"; | |
brush.style.position = "absolute"; | |
brush.style.zIndex = 8889; | |
brush.style.pointerEvents = "none"; | |
this.brush = brush; | |
this.element.appendChild(imgCanvas); | |
this.element.appendChild(maskCanvas); | |
this.element.appendChild(bottom_panel); | |
document.body.appendChild(brush); | |
var clearButton = this.createLeftButton("Clear", () => { | |
self.maskCtx.clearRect(0, 0, self.maskCanvas.width, self.maskCanvas.height); | |
}); | |
this.brush_size_slider = this.createLeftSlider(self, "Thickness", (event) => { | |
self.brush_size = event.target.value; | |
self.updateBrushPreview(self, null, null); | |
}); | |
this.colorButton = this.createLeftButton(this.getColorButtonText(), () => { | |
if (self.brush_color_mode === "black") { | |
self.brush_color_mode = "white"; | |
} | |
else if (self.brush_color_mode === "white") { | |
self.brush_color_mode = "negative"; | |
} | |
else { | |
self.brush_color_mode = "black"; | |
} | |
self.updateWhenBrushColorModeChanged(); | |
}); | |
var cancelButton = this.createRightButton("Cancel", () => { | |
document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp); | |
document.removeEventListener("keydown", MaskEditorDialog.handleKeyDown); | |
self.close(); | |
}); | |
this.saveButton = this.createRightButton("Save", () => { | |
document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp); | |
document.removeEventListener("keydown", MaskEditorDialog.handleKeyDown); | |
self.save(); | |
}); | |
this.element.appendChild(imgCanvas); | |
this.element.appendChild(maskCanvas); | |
this.element.appendChild(bottom_panel); | |
bottom_panel.appendChild(clearButton); | |
bottom_panel.appendChild(this.saveButton); | |
bottom_panel.appendChild(cancelButton); | |
bottom_panel.appendChild(this.brush_size_slider); | |
bottom_panel.appendChild(this.colorButton); | |
imgCanvas.style.position = "absolute"; | |
maskCanvas.style.position = "absolute"; | |
imgCanvas.style.top = "200"; | |
imgCanvas.style.left = "0"; | |
maskCanvas.style.top = imgCanvas.style.top; | |
maskCanvas.style.left = imgCanvas.style.left; | |
const maskCanvasStyle = this.getMaskCanvasStyle(); | |
maskCanvas.style.mixBlendMode = maskCanvasStyle.mixBlendMode; | |
maskCanvas.style.opacity = maskCanvasStyle.opacity; | |
} | |
async show() { | |
this.zoom_ratio = 1.0; | |
this.pan_x = 0; | |
this.pan_y = 0; | |
if(!this.is_layout_created) { | |
// layout | |
const imgCanvas = document.createElement('canvas'); | |
const maskCanvas = document.createElement('canvas'); | |
imgCanvas.id = "imageCanvas"; | |
maskCanvas.id = "maskCanvas"; | |
this.setlayout(imgCanvas, maskCanvas); | |
// prepare content | |
this.imgCanvas = imgCanvas; | |
this.maskCanvas = maskCanvas; | |
this.maskCtx = maskCanvas.getContext('2d', {willReadFrequently: true }); | |
this.setEventHandler(maskCanvas); | |
this.is_layout_created = true; | |
// replacement of onClose hook since close is not real close | |
const self = this; | |
const observer = new MutationObserver(function(mutations) { | |
mutations.forEach(function(mutation) { | |
if (mutation.type === 'attributes' && mutation.attributeName === 'style') { | |
if(self.last_display_style && self.last_display_style != 'none' && self.element.style.display == 'none') { | |
document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp); | |
self.brush.style.display = "none"; | |
ComfyApp.onClipspaceEditorClosed(); | |
} | |
self.last_display_style = self.element.style.display; | |
} | |
}); | |
}); | |
const config = { attributes: true }; | |
observer.observe(this.element, config); | |
} | |
// The keydown event needs to be reconfigured when closing the dialog as it gets removed. | |
document.addEventListener('keydown', MaskEditorDialog.handleKeyDown); | |
if(ComfyApp.clipspace_return_node) { | |
this.saveButton.innerText = "Save to node"; | |
} | |
else { | |
this.saveButton.innerText = "Save"; | |
} | |
this.saveButton.disabled = false; | |
this.element.style.display = "block"; | |
this.element.style.width = "85%"; | |
this.element.style.margin = "0 7.5%"; | |
this.element.style.height = "100vh"; | |
this.element.style.top = "50%"; | |
this.element.style.left = "42%"; | |
this.element.style.zIndex = 8888; // NOTE: alert dialog must be high priority. | |
await this.setImages(this.imgCanvas); | |
this.is_visible = true; | |
} | |
isOpened() { | |
return this.element.style.display == "block"; | |
} | |
invalidateCanvas(orig_image, mask_image) { | |
this.imgCanvas.width = orig_image.width; | |
this.imgCanvas.height = orig_image.height; | |
this.maskCanvas.width = orig_image.width; | |
this.maskCanvas.height = orig_image.height; | |
let imgCtx = this.imgCanvas.getContext('2d', {willReadFrequently: true }); | |
let maskCtx = this.maskCanvas.getContext('2d', {willReadFrequently: true }); | |
imgCtx.drawImage(orig_image, 0, 0, orig_image.width, orig_image.height); | |
prepare_mask(mask_image, this.maskCanvas, maskCtx, this.getMaskColor()); | |
} | |
async setImages(imgCanvas) { | |
let self = this; | |
const imgCtx = imgCanvas.getContext('2d', {willReadFrequently: true }); | |
const maskCtx = this.maskCtx; | |
const maskCanvas = this.maskCanvas; | |
imgCtx.clearRect(0,0,this.imgCanvas.width,this.imgCanvas.height); | |
maskCtx.clearRect(0,0,this.maskCanvas.width,this.maskCanvas.height); | |
// image load | |
const filepath = ComfyApp.clipspace.images; | |
const alpha_url = new URL(ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src) | |
alpha_url.searchParams.delete('channel'); | |
alpha_url.searchParams.delete('preview'); | |
alpha_url.searchParams.set('channel', 'a'); | |
let mask_image = await loadImage(alpha_url); | |
// original image load | |
const rgb_url = new URL(ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src); | |
rgb_url.searchParams.delete('channel'); | |
rgb_url.searchParams.set('channel', 'rgb'); | |
this.image = new Image(); | |
this.image.onload = function() { | |
maskCanvas.width = self.image.width; | |
maskCanvas.height = self.image.height; | |
self.invalidateCanvas(self.image, mask_image); | |
self.initializeCanvasPanZoom(); | |
}; | |
this.image.src = rgb_url; | |
} | |
initializeCanvasPanZoom() { | |
// set initialize | |
let drawWidth = this.image.width; | |
let drawHeight = this.image.height; | |
let width = this.element.clientWidth; | |
let height = this.element.clientHeight; | |
if (this.image.width > width) { | |
drawWidth = width; | |
drawHeight = (drawWidth / this.image.width) * this.image.height; | |
} | |
if (drawHeight > height) { | |
drawHeight = height; | |
drawWidth = (drawHeight / this.image.height) * this.image.width; | |
} | |
this.zoom_ratio = drawWidth/this.image.width; | |
const canvasX = (width - drawWidth) / 2; | |
const canvasY = (height - drawHeight) / 2; | |
this.pan_x = canvasX; | |
this.pan_y = canvasY; | |
this.invalidatePanZoom(); | |
} | |
invalidatePanZoom() { | |
let raw_width = this.image.width * this.zoom_ratio; | |
let raw_height = this.image.height * this.zoom_ratio; | |
if(this.pan_x + raw_width < 10) { | |
this.pan_x = 10 - raw_width; | |
} | |
if(this.pan_y + raw_height < 10) { | |
this.pan_y = 10 - raw_height; | |
} | |
let width = `${raw_width}px`; | |
let height = `${raw_height}px`; | |
let left = `${this.pan_x}px`; | |
let top = `${this.pan_y}px`; | |
this.maskCanvas.style.width = width; | |
this.maskCanvas.style.height = height; | |
this.maskCanvas.style.left = left; | |
this.maskCanvas.style.top = top; | |
this.imgCanvas.style.width = width; | |
this.imgCanvas.style.height = height; | |
this.imgCanvas.style.left = left; | |
this.imgCanvas.style.top = top; | |
} | |
setEventHandler(maskCanvas) { | |
const self = this; | |
if(!this.handler_registered) { | |
maskCanvas.addEventListener("contextmenu", (event) => { | |
event.preventDefault(); | |
}); | |
this.element.addEventListener('wheel', (event) => this.handleWheelEvent(self,event)); | |
this.element.addEventListener('pointermove', (event) => this.pointMoveEvent(self,event)); | |
this.element.addEventListener('touchmove', (event) => this.pointMoveEvent(self,event)); | |
this.element.addEventListener('dragstart', (event) => { | |
if(event.ctrlKey) { | |
event.preventDefault(); | |
} | |
}); | |
maskCanvas.addEventListener('pointerdown', (event) => this.handlePointerDown(self,event)); | |
maskCanvas.addEventListener('pointermove', (event) => this.draw_move(self,event)); | |
maskCanvas.addEventListener('touchmove', (event) => this.draw_move(self,event)); | |
maskCanvas.addEventListener('pointerover', (event) => { this.brush.style.display = "block"; }); | |
maskCanvas.addEventListener('pointerleave', (event) => { this.brush.style.display = "none"; }); | |
document.addEventListener('pointerup', MaskEditorDialog.handlePointerUp); | |
this.handler_registered = true; | |
} | |
} | |
getMaskCanvasStyle() { | |
if (this.brush_color_mode === "negative") { | |
return { | |
mixBlendMode: "difference", | |
opacity: "1", | |
}; | |
} | |
else { | |
return { | |
mixBlendMode: "initial", | |
opacity: "0.7", | |
}; | |
} | |
} | |
getMaskColor() { | |
if (this.brush_color_mode === "black") { | |
return { r: 0, g: 0, b: 0 }; | |
} | |
if (this.brush_color_mode === "white") { | |
return { r: 255, g: 255, b: 255 }; | |
} | |
if (this.brush_color_mode === "negative") { | |
// negative effect only works with white color | |
return { r: 255, g: 255, b: 255 }; | |
} | |
return { r: 0, g: 0, b: 0 }; | |
} | |
getMaskFillStyle() { | |
const maskColor = this.getMaskColor(); | |
return "rgb(" + maskColor.r + "," + maskColor.g + "," + maskColor.b + ")"; | |
} | |
getColorButtonText() { | |
let colorCaption = "unknown"; | |
if (this.brush_color_mode === "black") { | |
colorCaption = "black"; | |
} | |
else if (this.brush_color_mode === "white") { | |
colorCaption = "white"; | |
} | |
else if (this.brush_color_mode === "negative") { | |
colorCaption = "negative"; | |
} | |
return "Color: " + colorCaption; | |
} | |
updateWhenBrushColorModeChanged() { | |
this.colorButton.innerText = this.getColorButtonText(); | |
// update mask canvas css styles | |
const maskCanvasStyle = this.getMaskCanvasStyle(); | |
this.maskCanvas.style.mixBlendMode = maskCanvasStyle.mixBlendMode; | |
this.maskCanvas.style.opacity = maskCanvasStyle.opacity; | |
// update mask canvas rgb colors | |
const maskColor = this.getMaskColor(); | |
const maskData = this.maskCtx.getImageData(0, 0, this.maskCanvas.width, this.maskCanvas.height); | |
for (let i = 0; i < maskData.data.length; i += 4) { | |
maskData.data[i] = maskColor.r; | |
maskData.data[i+1] = maskColor.g; | |
maskData.data[i+2] = maskColor.b; | |
} | |
this.maskCtx.putImageData(maskData, 0, 0); | |
} | |
brush_size = 10; | |
brush_color_mode = "black"; | |
drawing_mode = false; | |
lastx = -1; | |
lasty = -1; | |
lasttime = 0; | |
static handleKeyDown(event) { | |
const self = MaskEditorDialog.instance; | |
if (event.key === ']') { | |
self.brush_size = Math.min(self.brush_size+2, 100); | |
self.brush_slider_input.value = self.brush_size; | |
} else if (event.key === '[') { | |
self.brush_size = Math.max(self.brush_size-2, 1); | |
self.brush_slider_input.value = self.brush_size; | |
} else if(event.key === 'Enter') { | |
self.save(); | |
} | |
self.updateBrushPreview(self); | |
} | |
static handlePointerUp(event) { | |
event.preventDefault(); | |
this.mousedown_x = null; | |
this.mousedown_y = null; | |
MaskEditorDialog.instance.drawing_mode = false; | |
} | |
updateBrushPreview(self) { | |
const brush = self.brush; | |
var centerX = self.cursorX; | |
var centerY = self.cursorY; | |
brush.style.width = self.brush_size * 2 * this.zoom_ratio + "px"; | |
brush.style.height = self.brush_size * 2 * this.zoom_ratio + "px"; | |
brush.style.left = (centerX - self.brush_size * this.zoom_ratio) + "px"; | |
brush.style.top = (centerY - self.brush_size * this.zoom_ratio) + "px"; | |
} | |
handleWheelEvent(self, event) { | |
event.preventDefault(); | |
if(event.ctrlKey) { | |
// zoom canvas | |
if(event.deltaY < 0) { | |
this.zoom_ratio = Math.min(10.0, this.zoom_ratio+0.2); | |
} | |
else { | |
this.zoom_ratio = Math.max(0.2, this.zoom_ratio-0.2); | |
} | |
this.invalidatePanZoom(); | |
} | |
else { | |
// adjust brush size | |
if(event.deltaY < 0) | |
this.brush_size = Math.min(this.brush_size+2, 100); | |
else | |
this.brush_size = Math.max(this.brush_size-2, 1); | |
this.brush_slider_input.value = this.brush_size; | |
this.updateBrushPreview(this); | |
} | |
} | |
pointMoveEvent(self, event) { | |
this.cursorX = event.pageX; | |
this.cursorY = event.pageY; | |
self.updateBrushPreview(self); | |
if(event.ctrlKey) { | |
event.preventDefault(); | |
self.pan_move(self, event); | |
} | |
let left_button_down = window.TouchEvent && event instanceof TouchEvent || event.buttons == 1; | |
if(event.shiftKey && left_button_down) { | |
self.drawing_mode = false; | |
const y = event.clientY; | |
let delta = (self.zoom_lasty - y)*0.005; | |
self.zoom_ratio = Math.max(Math.min(10.0, self.last_zoom_ratio - delta), 0.2); | |
this.invalidatePanZoom(); | |
return; | |
} | |
} | |
pan_move(self, event) { | |
if(event.buttons == 1) { | |
if(this.mousedown_x) { | |
let deltaX = this.mousedown_x - event.clientX; | |
let deltaY = this.mousedown_y - event.clientY; | |
self.pan_x = this.mousedown_pan_x - deltaX; | |
self.pan_y = this.mousedown_pan_y - deltaY; | |
self.invalidatePanZoom(); | |
} | |
} | |
} | |
draw_move(self, event) { | |
if(event.ctrlKey || event.shiftKey) { | |
return; | |
} | |
event.preventDefault(); | |
this.cursorX = event.pageX; | |
this.cursorY = event.pageY; | |
self.updateBrushPreview(self); | |
let left_button_down = window.TouchEvent && event instanceof TouchEvent || event.buttons == 1; | |
let right_button_down = [2, 5, 32].includes(event.buttons); | |
if (!event.altKey && left_button_down) { | |
var diff = performance.now() - self.lasttime; | |
const maskRect = self.maskCanvas.getBoundingClientRect(); | |
var x = event.offsetX; | |
var y = event.offsetY | |
if(event.offsetX == null) { | |
x = event.targetTouches[0].clientX - maskRect.left; | |
} | |
if(event.offsetY == null) { | |
y = event.targetTouches[0].clientY - maskRect.top; | |
} | |
x /= self.zoom_ratio; | |
y /= self.zoom_ratio; | |
var brush_size = this.brush_size; | |
if(event instanceof PointerEvent && event.pointerType == 'pen') { | |
brush_size *= event.pressure; | |
this.last_pressure = event.pressure; | |
} | |
else if(window.TouchEvent && event instanceof TouchEvent && diff < 20){ | |
// The firing interval of PointerEvents in Pen is unreliable, so it is supplemented by TouchEvents. | |
brush_size *= this.last_pressure; | |
} | |
else { | |
brush_size = this.brush_size; | |
} | |
if(diff > 20 && !this.drawing_mode) | |
requestAnimationFrame(() => { | |
self.maskCtx.beginPath(); | |
self.maskCtx.fillStyle = this.getMaskFillStyle(); | |
self.maskCtx.globalCompositeOperation = "source-over"; | |
self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false); | |
self.maskCtx.fill(); | |
self.lastx = x; | |
self.lasty = y; | |
}); | |
else | |
requestAnimationFrame(() => { | |
self.maskCtx.beginPath(); | |
self.maskCtx.fillStyle = this.getMaskFillStyle(); | |
self.maskCtx.globalCompositeOperation = "source-over"; | |
var dx = x - self.lastx; | |
var dy = y - self.lasty; | |
var distance = Math.sqrt(dx * dx + dy * dy); | |
var directionX = dx / distance; | |
var directionY = dy / distance; | |
for (var i = 0; i < distance; i+=5) { | |
var px = self.lastx + (directionX * i); | |
var py = self.lasty + (directionY * i); | |
self.maskCtx.arc(px, py, brush_size, 0, Math.PI * 2, false); | |
self.maskCtx.fill(); | |
} | |
self.lastx = x; | |
self.lasty = y; | |
}); | |
self.lasttime = performance.now(); | |
} | |
else if((event.altKey && left_button_down) || right_button_down) { | |
const maskRect = self.maskCanvas.getBoundingClientRect(); | |
const x = (event.offsetX || event.targetTouches[0].clientX - maskRect.left) / self.zoom_ratio; | |
const y = (event.offsetY || event.targetTouches[0].clientY - maskRect.top) / self.zoom_ratio; | |
var brush_size = this.brush_size; | |
if(event instanceof PointerEvent && event.pointerType == 'pen') { | |
brush_size *= event.pressure; | |
this.last_pressure = event.pressure; | |
} | |
else if(window.TouchEvent && event instanceof TouchEvent && diff < 20){ | |
brush_size *= this.last_pressure; | |
} | |
else { | |
brush_size = this.brush_size; | |
} | |
if(diff > 20 && !drawing_mode) // cannot tracking drawing_mode for touch event | |
requestAnimationFrame(() => { | |
self.maskCtx.beginPath(); | |
self.maskCtx.globalCompositeOperation = "destination-out"; | |
self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false); | |
self.maskCtx.fill(); | |
self.lastx = x; | |
self.lasty = y; | |
}); | |
else | |
requestAnimationFrame(() => { | |
self.maskCtx.beginPath(); | |
self.maskCtx.globalCompositeOperation = "destination-out"; | |
var dx = x - self.lastx; | |
var dy = y - self.lasty; | |
var distance = Math.sqrt(dx * dx + dy * dy); | |
var directionX = dx / distance; | |
var directionY = dy / distance; | |
for (var i = 0; i < distance; i+=5) { | |
var px = self.lastx + (directionX * i); | |
var py = self.lasty + (directionY * i); | |
self.maskCtx.arc(px, py, brush_size, 0, Math.PI * 2, false); | |
self.maskCtx.fill(); | |
} | |
self.lastx = x; | |
self.lasty = y; | |
}); | |
self.lasttime = performance.now(); | |
} | |
} | |
handlePointerDown(self, event) { | |
if(event.ctrlKey) { | |
if (event.buttons == 1) { | |
this.mousedown_x = event.clientX; | |
this.mousedown_y = event.clientY; | |
this.mousedown_pan_x = this.pan_x; | |
this.mousedown_pan_y = this.pan_y; | |
} | |
return; | |
} | |
var brush_size = this.brush_size; | |
if(event instanceof PointerEvent && event.pointerType == 'pen') { | |
brush_size *= event.pressure; | |
this.last_pressure = event.pressure; | |
} | |
if ([0, 2, 5].includes(event.button)) { | |
self.drawing_mode = true; | |
event.preventDefault(); | |
if(event.shiftKey) { | |
self.zoom_lasty = event.clientY; | |
self.last_zoom_ratio = self.zoom_ratio; | |
return; | |
} | |
const maskRect = self.maskCanvas.getBoundingClientRect(); | |
const x = (event.offsetX || event.targetTouches[0].clientX - maskRect.left) / self.zoom_ratio; | |
const y = (event.offsetY || event.targetTouches[0].clientY - maskRect.top) / self.zoom_ratio; | |
self.maskCtx.beginPath(); | |
if (!event.altKey && event.button == 0) { | |
self.maskCtx.fillStyle = this.getMaskFillStyle(); | |
self.maskCtx.globalCompositeOperation = "source-over"; | |
} else { | |
self.maskCtx.globalCompositeOperation = "destination-out"; | |
} | |
self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false); | |
self.maskCtx.fill(); | |
self.lastx = x; | |
self.lasty = y; | |
self.lasttime = performance.now(); | |
} | |
} | |
async save() { | |
const backupCanvas = document.createElement('canvas'); | |
const backupCtx = backupCanvas.getContext('2d', {willReadFrequently:true}); | |
backupCanvas.width = this.image.width; | |
backupCanvas.height = this.image.height; | |
backupCtx.clearRect(0,0, backupCanvas.width, backupCanvas.height); | |
backupCtx.drawImage(this.maskCanvas, | |
0, 0, this.maskCanvas.width, this.maskCanvas.height, | |
0, 0, backupCanvas.width, backupCanvas.height); | |
// paste mask data into alpha channel | |
const backupData = backupCtx.getImageData(0, 0, backupCanvas.width, backupCanvas.height); | |
// refine mask image | |
for (let i = 0; i < backupData.data.length; i += 4) { | |
if(backupData.data[i+3] == 255) | |
backupData.data[i+3] = 0; | |
else | |
backupData.data[i+3] = 255; | |
backupData.data[i] = 0; | |
backupData.data[i+1] = 0; | |
backupData.data[i+2] = 0; | |
} | |
backupCtx.globalCompositeOperation = 'source-over'; | |
backupCtx.putImageData(backupData, 0, 0); | |
const formData = new FormData(); | |
const filename = "clipspace-mask-" + performance.now() + ".png"; | |
const item = | |
{ | |
"filename": filename, | |
"subfolder": "clipspace", | |
"type": "input", | |
}; | |
if(ComfyApp.clipspace.images) | |
ComfyApp.clipspace.images[0] = item; | |
if(ComfyApp.clipspace.widgets) { | |
const index = ComfyApp.clipspace.widgets.findIndex(obj => obj.name === 'image'); | |
if(index >= 0) | |
ComfyApp.clipspace.widgets[index].value = item; | |
} | |
const dataURL = backupCanvas.toDataURL(); | |
const blob = dataURLToBlob(dataURL); | |
let original_url = new URL(this.image.src); | |
const original_ref = { filename: original_url.searchParams.get('filename') }; | |
let original_subfolder = original_url.searchParams.get("subfolder"); | |
if(original_subfolder) | |
original_ref.subfolder = original_subfolder; | |
let original_type = original_url.searchParams.get("type"); | |
if(original_type) | |
original_ref.type = original_type; | |
formData.append('image', blob, filename); | |
formData.append('original_ref', JSON.stringify(original_ref)); | |
formData.append('type', "input"); | |
formData.append('subfolder', "clipspace"); | |
this.saveButton.innerText = "Saving..."; | |
this.saveButton.disabled = true; | |
await uploadMask(item, formData); | |
ComfyApp.onClipspaceEditorSave(); | |
this.close(); | |
} | |
} | |
app.registerExtension({ | |
name: "Comfy.MaskEditor", | |
init(app) { | |
ComfyApp.open_maskeditor = | |
function () { | |
const dlg = MaskEditorDialog.getInstance(); | |
if(!dlg.isOpened()) { | |
dlg.show(); | |
} | |
}; | |
const context_predicate = () => ComfyApp.clipspace && ComfyApp.clipspace.imgs && ComfyApp.clipspace.imgs.length > 0 | |
ClipspaceDialog.registerButton("MaskEditor", context_predicate, ComfyApp.open_maskeditor); | |
} | |
}); | |