mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-02 14:27:40 +00:00
965ab674d5
## Summary - Replace `any` types with proper TypeScript types in litegraph core files - Focused on `LGraphCanvas.ts`, `LGraphNode.ts`, and `LGraph.ts` ## Changes **LGraphCanvas.ts:** - `ICreatePanelOptions` interface: `closable`, `window`, `width`, `height` - `options` property: `skip_events`, `viewport`, `skip_render`, `autoresize` - `prompt` function: `value` and `callback` parameters - `onSearchBox` return type: `string[] | void` - `onSearchBoxSelection` callback: `name: string`, `event: MouseEvent` - `onDrawBackground` / `onDrawForeground` callbacks: `visible_area: Rectangle` - Properties Panel callback parameters **LGraphNode.ts:** - `onDropFile` / `onDropData`: `file: File`, `filename: string` - `action_call` option: `string` (5 occurrences) - `onSerialize` return type: `void` - `onDrawTitleBar.fgcolor`: `string` **LGraph.ts:** - `LGraphConfig`: `align_to_grid`, `links_ontop` as `boolean` - `triggerInput`: `value: unknown` - `setCallback`: `func: (() => void) | undefined` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7935-Road-to-No-Explicit-Any-Part-3-Litegraph-2e36d73d3650819eb9f9ec9c16ebc3b9) by [Unito](https://www.unito.io)
72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import type { LGraphCanvas, Rectangle } from '@/lib/litegraph/src/litegraph'
|
|
import { createBounds } from '@/lib/litegraph/src/litegraph'
|
|
import { app } from '@/scripts/app'
|
|
|
|
/**
|
|
* Draws a dashed border around selected items that maintains constant pixel size
|
|
* regardless of zoom level, similar to the DOM selection overlay.
|
|
*/
|
|
function drawSelectionBorder(
|
|
ctx: CanvasRenderingContext2D,
|
|
canvas: LGraphCanvas
|
|
) {
|
|
const selectedItems = canvas.selectedItems
|
|
|
|
// Only draw if multiple items selected
|
|
if (selectedItems.size <= 1) return
|
|
|
|
// Use the same bounds calculation as the toolbox
|
|
const bounds = createBounds(selectedItems, 10)
|
|
if (!bounds) return
|
|
|
|
const [x, y, width, height] = bounds
|
|
|
|
// Save context state
|
|
ctx.save()
|
|
|
|
// Set up dashed line style that doesn't scale with zoom
|
|
const borderWidth = 2 / canvas.ds.scale // Constant 2px regardless of zoom
|
|
ctx.lineWidth = borderWidth
|
|
ctx.strokeStyle =
|
|
getComputedStyle(document.documentElement)
|
|
.getPropertyValue('--border-color')
|
|
.trim() || '#ffffff66'
|
|
|
|
// Create dash pattern that maintains visual size
|
|
const dashSize = 5 / canvas.ds.scale
|
|
ctx.setLineDash([dashSize, dashSize])
|
|
|
|
// Draw the border using the bounds directly
|
|
ctx.beginPath()
|
|
ctx.roundRect(x, y, width, height, 8 / canvas.ds.scale)
|
|
ctx.stroke()
|
|
|
|
// Restore context
|
|
ctx.restore()
|
|
}
|
|
|
|
/**
|
|
* Extension that adds a dashed selection border for multiple selected nodes
|
|
*/
|
|
const ext = {
|
|
name: 'Comfy.SelectionBorder',
|
|
|
|
async init() {
|
|
// Hook into the canvas drawing
|
|
const originalDrawForeground = app.canvas.onDrawForeground
|
|
|
|
app.canvas.onDrawForeground = function (
|
|
ctx: CanvasRenderingContext2D,
|
|
visibleArea: Rectangle
|
|
) {
|
|
// Call original if it exists
|
|
originalDrawForeground?.call(this, ctx, visibleArea)
|
|
|
|
// Draw our selection border
|
|
drawSelectionBorder(ctx, app.canvas)
|
|
}
|
|
}
|
|
}
|
|
|
|
app.registerExtension(ext)
|