Pouzor
2a8c9d618b
New nodes previously landed at a fixed canvas origin, often off-screen, forcing the user to drag them into view. Add a projector (registered by CanvasContainer inside ReactFlowProvider) that maps the visible-canvas centre into flow coordinates, and use it for add-node, group rect, text, Zigbee/Z-Wave imports, and pending-device approval (single + bulk). ha-relevant: yes
31 lines
1.2 KiB
TypeScript
31 lines
1.2 KiB
TypeScript
import type { XYPosition } from '@xyflow/react'
|
||
|
||
// Projects the centre of the visible canvas into flow-space coordinates.
|
||
// Registered by CanvasContainer (inside ReactFlowProvider) so that add-node
|
||
// handlers living outside the provider — App handlers, modals — can still drop
|
||
// new nodes where the user is actually looking instead of at a fixed canvas
|
||
// origin.
|
||
type Projector = () => XYPosition
|
||
|
||
let projector: Projector | null = null
|
||
|
||
// Used before any canvas is mounted (tests, first render). Matches the old
|
||
// hard-coded add position so behaviour degrades gracefully.
|
||
const FALLBACK: XYPosition = { x: 300, y: 300 }
|
||
|
||
export function setViewportCenterProjector(fn: Projector | null): void {
|
||
projector = fn
|
||
}
|
||
|
||
// Flow-space coordinate at the centre of the visible canvas.
|
||
export function getViewportCenter(): XYPosition {
|
||
return projector ? projector() : { ...FALLBACK }
|
||
}
|
||
|
||
// Flow-space top-left position so that a box of `width`×`height` ends up
|
||
// centred on screen. With no size it returns the raw centre point.
|
||
export function getCenteredPosition(width = 0, height = 0): XYPosition {
|
||
const c = getViewportCenter()
|
||
return { x: c.x - width / 2, y: c.y - height / 2 }
|
||
}
|