mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-30 03:01:54 +00:00
[API] Remove unused drag & drop interface (#746)
Not maintained or functional.
This commit is contained in:
@@ -27,7 +27,6 @@ import type {
|
|||||||
} from "./interfaces"
|
} from "./interfaces"
|
||||||
import type { LGraph } from "./LGraph"
|
import type { LGraph } from "./LGraph"
|
||||||
import type {
|
import type {
|
||||||
CanvasDragEvent,
|
|
||||||
CanvasEventDetail,
|
CanvasEventDetail,
|
||||||
CanvasMouseEvent,
|
CanvasMouseEvent,
|
||||||
CanvasPointerEvent,
|
CanvasPointerEvent,
|
||||||
@@ -507,7 +506,6 @@ export class LGraphCanvas implements ConnectionColorContext {
|
|||||||
_mouseout_callback?(e: PointerEvent): void
|
_mouseout_callback?(e: PointerEvent): void
|
||||||
_mousecancel_callback?(e: PointerEvent): void
|
_mousecancel_callback?(e: PointerEvent): void
|
||||||
_key_callback?(e: KeyboardEvent): void
|
_key_callback?(e: KeyboardEvent): void
|
||||||
_ondrop_callback?(e: DragEvent): unknown
|
|
||||||
bgctx?: CanvasRenderingContext2D | null
|
bgctx?: CanvasRenderingContext2D | null
|
||||||
is_rendering?: boolean
|
is_rendering?: boolean
|
||||||
/** @deprecated Panels */
|
/** @deprecated Panels */
|
||||||
@@ -527,7 +525,6 @@ export class LGraphCanvas implements ConnectionColorContext {
|
|||||||
node_panel?: any
|
node_panel?: any
|
||||||
/** @deprecated Panels */
|
/** @deprecated Panels */
|
||||||
options_panel?: any
|
options_panel?: any
|
||||||
onDropItem?: (e: Event) => any
|
|
||||||
_bg_img?: HTMLImageElement
|
_bg_img?: HTMLImageElement
|
||||||
_pattern?: CanvasPattern | null
|
_pattern?: CanvasPattern | null
|
||||||
_pattern_img?: HTMLImageElement
|
_pattern_img?: HTMLImageElement
|
||||||
@@ -760,16 +757,6 @@ export class LGraphCanvas implements ConnectionColorContext {
|
|||||||
this.autoresize = options.autoresize
|
this.autoresize = options.autoresize
|
||||||
}
|
}
|
||||||
|
|
||||||
static getFileExtension(url: string): string {
|
|
||||||
const question = url.indexOf("?")
|
|
||||||
if (question !== -1) url = url.substring(0, question)
|
|
||||||
|
|
||||||
const point = url.lastIndexOf(".")
|
|
||||||
return point === -1
|
|
||||||
? ""
|
|
||||||
: url.substring(point + 1).toLowerCase()
|
|
||||||
}
|
|
||||||
|
|
||||||
static onGroupAdd(info: unknown, entry: unknown, mouse_event: MouseEvent): void {
|
static onGroupAdd(info: unknown, entry: unknown, mouse_event: MouseEvent): void {
|
||||||
const canvas = LGraphCanvas.active_canvas
|
const canvas = LGraphCanvas.active_canvas
|
||||||
|
|
||||||
@@ -1676,12 +1663,8 @@ export class LGraphCanvas implements ConnectionColorContext {
|
|||||||
// keyup event must be bound on the document
|
// keyup event must be bound on the document
|
||||||
document.addEventListener("keyup", this._key_callback, true)
|
document.addEventListener("keyup", this._key_callback, true)
|
||||||
|
|
||||||
// Dropping Stuff over nodes
|
|
||||||
this._ondrop_callback = this.processDrop.bind(this)
|
|
||||||
|
|
||||||
canvas.addEventListener("dragover", this._doNothing, false)
|
canvas.addEventListener("dragover", this._doNothing, false)
|
||||||
canvas.addEventListener("dragend", this._doNothing, false)
|
canvas.addEventListener("dragend", this._doNothing, false)
|
||||||
canvas.addEventListener("drop", this._ondrop_callback, false)
|
|
||||||
canvas.addEventListener("dragenter", this._doReturnTrue, false)
|
canvas.addEventListener("dragenter", this._doReturnTrue, false)
|
||||||
|
|
||||||
this._events_binded = true
|
this._events_binded = true
|
||||||
@@ -1710,13 +1693,11 @@ export class LGraphCanvas implements ConnectionColorContext {
|
|||||||
canvas.removeEventListener("keydown", this._key_callback!)
|
canvas.removeEventListener("keydown", this._key_callback!)
|
||||||
document.removeEventListener("keyup", this._key_callback!)
|
document.removeEventListener("keyup", this._key_callback!)
|
||||||
canvas.removeEventListener("contextmenu", this._doNothing)
|
canvas.removeEventListener("contextmenu", this._doNothing)
|
||||||
canvas.removeEventListener("drop", this._ondrop_callback!)
|
|
||||||
canvas.removeEventListener("dragenter", this._doReturnTrue)
|
canvas.removeEventListener("dragenter", this._doReturnTrue)
|
||||||
|
|
||||||
this._mousedown_callback = undefined
|
this._mousedown_callback = undefined
|
||||||
this._mousewheel_callback = undefined
|
this._mousewheel_callback = undefined
|
||||||
this._key_callback = undefined
|
this._key_callback = undefined
|
||||||
this._ondrop_callback = undefined
|
|
||||||
|
|
||||||
this._events_binded = false
|
this._events_binded = false
|
||||||
}
|
}
|
||||||
@@ -3241,87 +3222,6 @@ export class LGraphCanvas implements ConnectionColorContext {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* process a item drop event on top the canvas
|
|
||||||
*/
|
|
||||||
processDrop(e: DragEvent): boolean | undefined {
|
|
||||||
e.preventDefault()
|
|
||||||
this.adjustMouseEvent(e)
|
|
||||||
const x = e.clientX
|
|
||||||
const y = e.clientY
|
|
||||||
const is_inside = !this.viewport || isInRect(x, y, this.viewport)
|
|
||||||
if (!is_inside) return
|
|
||||||
|
|
||||||
const pos = [e.canvasX, e.canvasY]
|
|
||||||
const node = this.graph ? this.graph.getNodeOnPos(pos[0], pos[1]) : null
|
|
||||||
|
|
||||||
if (!node) {
|
|
||||||
const r = this.onDropItem?.(e)
|
|
||||||
if (!r) this.checkDropItem(e)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (node.onDropFile || node.onDropData) {
|
|
||||||
const files = e.dataTransfer?.files
|
|
||||||
if (files?.length) {
|
|
||||||
for (let i = 0; i < files.length; i++) {
|
|
||||||
const file = files[0]
|
|
||||||
const filename = file.name
|
|
||||||
node.onDropFile?.(file)
|
|
||||||
|
|
||||||
if (node.onDropData) {
|
|
||||||
// prepare reader
|
|
||||||
const reader = new FileReader()
|
|
||||||
reader.addEventListener("load", (event) => {
|
|
||||||
const data = event.target?.result
|
|
||||||
if (!data) return
|
|
||||||
node.onDropData?.(data, filename, file)
|
|
||||||
})
|
|
||||||
|
|
||||||
// read data
|
|
||||||
const type = file.type.split("/")[0]
|
|
||||||
if (type == "text" || type == "") {
|
|
||||||
reader.readAsText(file)
|
|
||||||
} else if (type == "image") {
|
|
||||||
reader.readAsDataURL(file)
|
|
||||||
} else {
|
|
||||||
reader.readAsArrayBuffer(file)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (node.onDropItem?.(e)) return true
|
|
||||||
|
|
||||||
return this.onDropItem
|
|
||||||
? this.onDropItem(e)
|
|
||||||
: false
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* called if the graph doesn't have a default drop item behaviour
|
|
||||||
* @deprecated This relies on the already-broken node_type_by_file_extension
|
|
||||||
*/
|
|
||||||
checkDropItem(e: CanvasDragEvent): void {
|
|
||||||
if (!e.dataTransfer?.files.length) return
|
|
||||||
|
|
||||||
const file = e.dataTransfer.files[0]
|
|
||||||
const ext = LGraphCanvas.getFileExtension(file.name).toLowerCase()
|
|
||||||
const nodetype = LiteGraph.node_types_by_file_extension[ext]
|
|
||||||
if (!nodetype) return
|
|
||||||
if (!this.graph) throw new NullGraphError()
|
|
||||||
|
|
||||||
this.graph.beforeChange()
|
|
||||||
const node = LiteGraph.createNode(nodetype.type)
|
|
||||||
if (!node) throw new TypeError("Deprecated checkDropItem")
|
|
||||||
|
|
||||||
node.pos = [e.canvasX, e.canvasY]
|
|
||||||
this.graph.add(node)
|
|
||||||
node.onDropFile?.(file)
|
|
||||||
this.graph.afterChange()
|
|
||||||
}
|
|
||||||
|
|
||||||
processNodeDblClicked(n: LGraphNode): void {
|
processNodeDblClicked(n: LGraphNode): void {
|
||||||
this.onShowNodePanel?.(n)
|
this.onShowNodePanel?.(n)
|
||||||
this.onNodeDblClicked?.(n)
|
this.onNodeDblClicked?.(n)
|
||||||
|
|||||||
Reference in New Issue
Block a user