mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-20 23:04:06 +00:00
50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import type { InjectionKey } from 'vue'
|
|
|
|
import type { Point } from '@/renderer/core/layout/types'
|
|
|
|
/**
|
|
* Lightweight, injectable transform state used by layout-aware components.
|
|
*
|
|
* Consumers use this interface to convert coordinates between LiteGraph's
|
|
* canvas space and the DOM's screen space, access the current pan/zoom
|
|
* (camera), and perform basic viewport culling checks.
|
|
*
|
|
* Coordinate mapping:
|
|
* - screen = (canvas + offset) * scale
|
|
* - canvas = screen / scale - offset
|
|
*
|
|
* The full implementation and additional helpers live in
|
|
* `useTransformState()`. This interface deliberately exposes only the
|
|
* minimal surface needed outside that composable.
|
|
*
|
|
* @example
|
|
* const state = inject(TransformStateKey)!
|
|
* const screen = state.canvasToScreen({ x: 100, y: 50 })
|
|
*/
|
|
interface TransformState {
|
|
/** Convert a screen-space point (CSS pixels) to canvas space. */
|
|
screenToCanvas: (p: Point) => Point
|
|
/** Convert a canvas-space point to screen space (CSS pixels). */
|
|
canvasToScreen: (p: Point) => Point
|
|
/** Current pan/zoom; `x`/`y` are offsets, `z` is scale. */
|
|
camera?: { x: number; y: number; z: number }
|
|
/**
|
|
* Test whether a node's rectangle intersects the (expanded) viewport.
|
|
* Handy for viewport culling and lazy work.
|
|
*
|
|
* @param nodePos Top-left in canvas space `[x, y]`
|
|
* @param nodeSize Size in canvas units `[width, height]`
|
|
* @param viewport Screen-space viewport `{ width, height }`
|
|
* @param margin Optional fractional margin (e.g. `0.2` = 20%)
|
|
*/
|
|
isNodeInViewport?: (
|
|
nodePos: ArrayLike<number>,
|
|
nodeSize: ArrayLike<number>,
|
|
viewport: { width: number; height: number },
|
|
margin?: number
|
|
) => boolean
|
|
}
|
|
|
|
export const TransformStateKey: InjectionKey<TransformState> =
|
|
Symbol('transformState')
|