mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-25 16:59:45 +00:00
[API] Remove unused LiteGraph APIs (#582)
* [API] Remove unused LiteGraph APIs These features have not been maintained, and would require refactoring / rewrites. As code search revealed them to be unused, they are being removed. - addNodeMethod - compareObjects - auto_sort_node_types * Udpate API.md
This commit is contained in:
filtered
49
API.md
49
API.md
@@ -10,7 +10,7 @@ This document is intended to provide a brief introduction to new Litegraph APIs.
|
||||
|
||||
</summary>
|
||||
|
||||
CanvasPointer replaces much of the original pointer handling code. It provides a standard click, double-click, and drag UX for users.
|
||||
CanvasPointer replaces much of the original pointer handling code. It provides a standard click, double-click, and drag UX for users.
|
||||
|
||||
<detail open>
|
||||
|
||||
@@ -20,7 +20,6 @@ CanvasPointer replaces much of the original pointer handling code. It provides
|
||||
|
||||
</summary>
|
||||
|
||||
|
||||
- Dragging multiple items no longer requires that the shift key be held down
|
||||
- Clicking an item when multiple nodes / etc are selected will still deselect everything else
|
||||
- Clicking a connected link on an input no longer disconnects and reconnects it
|
||||
@@ -41,14 +40,14 @@ CanvasPointer replaces much of the original pointer handling code. It provides
|
||||
|
||||
### Click "drift"
|
||||
|
||||
A small amount of buffering is performed between down/up events to prevent accidental micro-drag events. If either of the two controls are exceeded, the event will be considered a drag event, not a click.
|
||||
A small amount of buffering is performed between down/up events to prevent accidental micro-drag events. If either of the two controls are exceeded, the event will be considered a drag event, not a click.
|
||||
|
||||
- `buffterTime` is the maximum time that tiny movements can be ignored (Default: 150ms)
|
||||
- `maxClickDrift` controls how far a click can drift from its down event before it is considered a drag (Default: 6)
|
||||
|
||||
### Double-click
|
||||
|
||||
When double clicking, the double click callback is executed shortly after one normal click callback (if present). At present, dragging from the second click simply invalidates the event - nothing will happen.
|
||||
When double clicking, the double click callback is executed shortly after one normal click callback (if present). At present, dragging from the second click simply invalidates the event - nothing will happen.
|
||||
|
||||
- `doubleClickTime` is the maximum time between two `down` events for them to be considered a double click (Default: 300ms)
|
||||
- Distance between the two events must be less than `3 * maxClickDrift`
|
||||
@@ -78,12 +77,12 @@ Clicking, double-clicking, and dragging can now all be configured during the ini
|
||||
A click event can be as simple as:
|
||||
|
||||
```ts
|
||||
if (node.isClickedInSpot(e.canvasX, e.canvasY)) this.pointer.onClick = () => node.gotClickInSpot()
|
||||
if (node.isClickedInSpot(e.canvasX, e.canvasY))
|
||||
this.pointer.onClick = () => node.gotClickInSpot()
|
||||
```
|
||||
|
||||
Full usage can be seen in the old `processMouseDown` handler, which is still in place (several monkey patches in the wild).
|
||||
|
||||
|
||||
### Registering a click or drag event
|
||||
|
||||
Example usage:
|
||||
@@ -91,11 +90,11 @@ Example usage:
|
||||
```typescript
|
||||
const { pointer } = this
|
||||
// Click / double click - executed on pointerup
|
||||
pointer.onClick = (e) => node.executeClick(e)
|
||||
pointer.onClick = e => node.executeClick(e)
|
||||
pointer.onDoubleClick = node.gotDoubleClick
|
||||
|
||||
// Drag events - executed on pointermove
|
||||
pointer.onDragStart = (e) => {
|
||||
pointer.onDragStart = e => {
|
||||
node.isBeingDragged = true
|
||||
canvas.startedDragging(e)
|
||||
}
|
||||
@@ -104,12 +103,12 @@ pointer.onDrag = () => {}
|
||||
pointer.onDragEnd = () => {}
|
||||
|
||||
// Always run, regardless of outcome
|
||||
pointer.finally = () => node.isBeingDragged = false
|
||||
pointer.finally = () => (node.isBeingDragged = false)
|
||||
```
|
||||
|
||||
## Widgets
|
||||
|
||||
Adds `onPointerDown` callback to node widgets. A few benefits of the new API:
|
||||
Adds `onPointerDown` callback to node widgets. A few benefits of the new API:
|
||||
|
||||
- Simplified usage
|
||||
- Exposes callbacks like "double click", removing the need to time / measure multiple pointer events
|
||||
@@ -122,26 +121,23 @@ Adds `onPointerDown` callback to node widgets. A few benefits of the new API:
|
||||
// Callbacks for each pointer action can be configured ahead of time
|
||||
widget.onPointerDown = function (pointer, node, canvas) {
|
||||
const e = pointer.eDown
|
||||
const offsetFromNode = [
|
||||
e.canvasX - node.pos[0],
|
||||
e.canvasY - node.pos[1],
|
||||
]
|
||||
const offsetFromNode = [e.canvasX - node.pos[0], e.canvasY - node.pos[1]]
|
||||
|
||||
// Click events - no overlap with drag events
|
||||
pointer.onClick = (upEvent) => {
|
||||
pointer.onClick = upEvent => {
|
||||
// Provides access to the whole lifecycle of events in every callback
|
||||
console.log(pointer.eDown)
|
||||
console.log(pointer.eMove ?? "Pointer didn't move")
|
||||
console.log(pointer.eUp)
|
||||
}
|
||||
pointer.onDoubleClick = (upEvent) => this.customFunction(upEvent)
|
||||
pointer.onDoubleClick = upEvent => this.customFunction(upEvent)
|
||||
|
||||
// Runs once before the first onDrag event
|
||||
pointer.onDragStart = () => {}
|
||||
// Receives every movement event
|
||||
pointer.onDrag = (moveEvent) => {}
|
||||
pointer.onDrag = moveEvent => {}
|
||||
// The pointerup event of a drag
|
||||
pointer.onDragEnd = (upEvent) => {}
|
||||
pointer.onDragEnd = upEvent => {}
|
||||
|
||||
// Semantics of a "finally" block (try/catch). Once set, the block always executes.
|
||||
pointer.finally = () => {}
|
||||
@@ -155,13 +151,13 @@ widget.onPointerDown = function (pointer, node, canvas) {
|
||||
|
||||
### TypeScript & JSDoc
|
||||
|
||||
In-IDE typing is available for use in at least mainstream editors. It can be added to JS projects using the @comfyorg/litegraph npm package.
|
||||
In-IDE typing is available for use in at least mainstream editors. It can be added to JS projects using the @comfyorg/litegraph npm package.
|
||||
|
||||
```ts
|
||||
/** @import { IWidget } from './path/to/@comfyorg/litegraph/litegraph.d.ts' */
|
||||
/** @type IWidget */
|
||||
const widget = node.widgets[0]
|
||||
widget.onPointerDown = function (pointer, node, canvas) { }
|
||||
widget.onPointerDown = function (pointer, node, canvas) {}
|
||||
```
|
||||
|
||||
#### VS Code
|
||||
@@ -170,7 +166,7 @@ widget.onPointerDown = function (pointer, node, canvas) { }
|
||||
|
||||
## Hovering over
|
||||
|
||||
Adds API for downstream consumers to handle custom cursors. A bitwise enum of items,
|
||||
Adds API for downstream consumers to handle custom cursors. A bitwise enum of items,
|
||||
|
||||
```typescript
|
||||
type LGraphCanvasState = {
|
||||
@@ -190,11 +186,18 @@ if (canvas.state.hoveringOver & CanvasItem.ResizeSe) element.style.cursor = 'se-
|
||||
|
||||
</detail>
|
||||
|
||||
|
||||
# Removed public interfaces
|
||||
|
||||
All are unused and incomplete. Have bugs beyond just typescript typing, and are (currently) not worth maintaining. If any of these features are desired down the track, they can be reimplemented.
|
||||
All are unused and incomplete. Have bugs beyond just typescript typing, and are (currently) not worth maintaining. If any of these features are desired down the track, they can be reimplemented.
|
||||
|
||||
- Live mode
|
||||
- Subgraph
|
||||
- `dragged_node`
|
||||
|
||||
## LiteGraph
|
||||
|
||||
These features have not been maintained, and would require refactoring / rewrites. As code search revealed them to be unused, they are being removed.
|
||||
|
||||
- addNodeMethod
|
||||
- compareObjects
|
||||
- auto_sort_node_types (option)
|
||||
|
||||
Reference in New Issue
Block a user