DMleadgen
46d973904b
Next.js website for Rocky Mountain Vending company featuring: - Product catalog with Stripe integration - Service areas and parts pages - Admin dashboard with Clerk authentication - SEO optimized pages with JSON-LD structured data Co-authored-by: Cursor <cursoragent@cursor.com>
79 lines
No EOL
3.4 KiB
Text
79 lines
No EOL
3.4 KiB
Text
export class ElementScreenshotRenderer {
|
|
/**
|
|
* Given the location of an element and the sizes of the preview and screenshot,
|
|
* compute the absolute positions (in screenshot coordinate scale) of the screenshot content
|
|
* and the highlighted rect around the element.
|
|
* @param {Rect} elementRectSC
|
|
* @param {Size} elementPreviewSizeSC
|
|
* @param {Size} screenshotSize
|
|
*/
|
|
static getScreenshotPositions(elementRectSC: Rect, elementPreviewSizeSC: Size, screenshotSize: Size): {
|
|
screenshot: {
|
|
left: number;
|
|
top: number;
|
|
};
|
|
clip: {
|
|
left: number;
|
|
top: number;
|
|
};
|
|
};
|
|
/**
|
|
* Render a clipPath SVG element to assist marking the element's rect.
|
|
* The elementRect and previewSize are in screenshot coordinate scale.
|
|
* @param {DOM} dom
|
|
* @param {HTMLElement} maskEl
|
|
* @param {{left: number, top: number}} positionClip
|
|
* @param {Rect} elementRect
|
|
* @param {Size} elementPreviewSize
|
|
*/
|
|
static renderClipPathInScreenshot(dom: DOM, maskEl: HTMLElement, positionClip: {
|
|
left: number;
|
|
top: number;
|
|
}, elementRect: Rect, elementPreviewSize: Size): void;
|
|
/**
|
|
* Called by report renderer. Defines a css variable used by any element screenshots
|
|
* in the provided report element.
|
|
* Allows for multiple Lighthouse reports to be rendered on the page, each with their
|
|
* own full page screenshot.
|
|
* @param {HTMLElement} el
|
|
* @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
|
|
*/
|
|
static installFullPageScreenshot(el: HTMLElement, screenshot: LH.Result.FullPageScreenshot["screenshot"]): void;
|
|
/**
|
|
* Installs the lightbox elements and wires up click listeners to all .lh-element-screenshot elements.
|
|
* @param {InstallOverlayFeatureParams} opts
|
|
*/
|
|
static installOverlayFeature(opts: InstallOverlayFeatureParams): void;
|
|
/**
|
|
* Given the size of the element in the screenshot and the total available size of our preview container,
|
|
* compute the factor by which we need to zoom out to view the entire element with context.
|
|
* @param {Rect} elementRectSC
|
|
* @param {Size} renderContainerSizeDC
|
|
* @return {number}
|
|
*/
|
|
static _computeZoomFactor(elementRectSC: Rect, renderContainerSizeDC: Size): number;
|
|
/**
|
|
* Renders an element with surrounding context from the full page screenshot.
|
|
* Used to render both the thumbnail preview in details tables and the full-page screenshot in the lightbox.
|
|
* Returns null if element rect is outside screenshot bounds.
|
|
* @param {DOM} dom
|
|
* @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
|
|
* @param {Rect} elementRectSC Region of screenshot to highlight.
|
|
* @param {Size} maxRenderSizeDC e.g. maxThumbnailSize or maxLightboxSize.
|
|
* @return {Element|null}
|
|
*/
|
|
static render(dom: DOM, screenshot: LH.Result.FullPageScreenshot["screenshot"], elementRectSC: Rect, maxRenderSizeDC: Size): Element | null;
|
|
}
|
|
export type DOM = import("./dom.js").DOM;
|
|
export type Rect = LH.Audit.Details.Rect;
|
|
export type Size = {
|
|
width: number;
|
|
height: number;
|
|
};
|
|
export type InstallOverlayFeatureParams = {
|
|
dom: DOM;
|
|
rootEl: Element;
|
|
overlayContainerEl: Element;
|
|
fullPageScreenshot: LH.Result.FullPageScreenshot;
|
|
};
|
|
//# sourceMappingURL=element-screenshot-renderer.d.ts.map |