polen
Version:
A framework for delightful GraphQL developer portals
63 lines • 2.13 kB
TypeScript
/**
* Layer 3: Simplified Positioning & Layout Engine
*
* Maps GraphQL AST positions to DOM coordinates for overlay placement.
* This simplified version focuses on working with Polen's existing infrastructure.
*/
import type { Identifier } from './types.js';
/**
* DOM position for rendering overlays
*/
export interface DOMPosition {
/** Distance from top of container in pixels */
top: number;
/** Distance from left of container in pixels */
left: number;
/** Width of the identifier in pixels */
width: number;
/** Height of the identifier in pixels */
height: number;
}
/**
* Position calculation result
*/
export interface PositionResult {
/** The calculated DOM position */
position: DOMPosition;
/** The identifier this position is for */
identifier: Identifier;
}
/**
* Simplified position calculator for syntax-highlighted code
*
* This version uses a more straightforward approach:
* 1. Find the line element by line number
* 2. Search for the identifier text within that line
* 3. Create a span around the identifier for positioning
*
* This approach modifies the DOM but is more reliable for testing
* and works well with React's reconciliation.
*/
export declare class SimplePositionCalculator {
/**
* Prepare a code block for positioning by wrapping identifiers in spans
*/
prepareCodeBlock(containerElement: Element, identifiers: Identifier[]): void;
/**
* Get positions of all wrapped identifiers
*/
getIdentifierPositions(containerElement: Element, relativeToElement?: Element): Map<string, PositionResult>;
}
/**
* Create invisible overlay for a position
*/
export declare const createSimpleOverlay: (position: DOMPosition, identifier: Identifier, options?: {
onClick?: (identifier: Identifier) => void;
onHover?: (identifier: Identifier, event: MouseEvent) => void;
className?: string;
}) => HTMLElement;
/**
* Factory function for position calculator
*/
export declare const createSimplePositionCalculator: () => SimplePositionCalculator;
//# sourceMappingURL=positioning-simple.d.ts.map