MAIDR JavaScript API
    Preparing search index...

    Class SvgAbstract

    Abstract utility class for SVG element manipulation, conversion, and highlighting operations.

    Index

    Methods

    • Marks an element as created (and therefore owned) by MAIDR. Public so trace code that clones or synthesizes highlight elements outside this utility can participate in ownership-aware disposal.

      Type Parameters

      • T extends SVGElement

      Parameters

      • element: T

        The element to mark

      Returns T

      The same element, for chaining

    • Returns true if the element was created by MAIDR (safe to remove on disposal). Original chart elements referenced for in-place highlighting are not owned and must never be removed.

      Parameters

      • element: Element

        The element to check

      Returns boolean

    • Converts an SVG element to a Base64-encoded JPEG data URL.

      Parameters

      • svg: HTMLElement

        The SVG element to convert

      Returns Promise<string>

      A promise resolving to the Base64 data URL, or empty string on error

    • Selects all SVG elements matching a query and optionally clones them.

      Type Parameters

      • T extends SVGElement

        The type of SVG element to select

      Parameters

      • query: string

        CSS selector string to query elements

      • shouldClone: boolean = true

        Whether to clone elements and insert them as hidden copies (default: true)

      Returns T[]

      Array of selected (or cloned) SVG elements, empty when the query is not a usable selector

    • Selects a single SVG element matching a query and optionally clones it.

      Type Parameters

      • T extends SVGElement

        The type of SVG element to select

      Parameters

      • query: string

        CSS selector string to query the element

      • shouldClone: boolean = true

        Whether to clone the element and insert it as a hidden copy (default: true)

      Returns T | null

      The selected (or cloned) SVG element, or null when nothing matches or the query is not a usable selector

    • Clones an element, hides the copy, and inserts it straight after the original.

      This is the side effect selectElement performs once it has found its element, split out so a caller can do the finding first. Resolving a positional* selector -- :nth-child(N) and friends -- while earlier clones are already in the DOM counts siblings the chart never drew, and answers with the clone of an earlier element; a caller with a list of such selectors has to look them all up before inserting anything (#1004).

      Type Parameters

      • T extends SVGElement

      Parameters

      • element: T

        The live element to stand a highlight copy beside

      Returns T

      The inserted clone

    • Select the Nth element matching a query, in document order.

      Useful when a single CSS selector matches multiple sibling elements (e.g. multi-series Vega-Lite line charts where each series renders as a separate <g class="mark-line role-mark layer_0_marks"> group, all with the same class). CSS :nth-child(N) cannot address the Nth matching group when classes differ; this helper does it via JS.

      Always returns the live DOM element (no cloning side-effects), since the indexed-selection use case is for resolving live DOM nodes that downstream code (highlight pipeline, etc.) operates on directly.

      Type Parameters

      • T extends SVGElement

        The type of SVG element to select

      Parameters

      • query: string

        CSS selector string

      • n: number

        Zero-based index into the query results

      Returns T | null

      The Nth matching element, or null if no Nth match exists or the query is not a usable selector

    • Creates an empty, hidden, transparent SVG element of the specified type.

      Parameters

      • type: string = 'rect'

        The SVG element type to create (default: 'rect')

      Returns SVGElement

      The newly created SVG element

    • Creates one circle element per centre, styled to match the parent element's stroke or fill.

      A whole series at once rather than a point at a time, because the two expensive parts of the job are per-series rather than per-point: the paint is one computed style for a line all of whose markers share it, and the insertion is one fragment. Reading a style back after inserting an element is what forces the browser to recalculate it, so a loop alternating the two paid a recalculation per point of every line, at construction and again on every live-data rebuild.

      Parameters

      • centres: readonly { cx: string | number; cy: string | number }[]

        Where to put each circle, in order

      • parent: SVGElement

        The SVG element to inherit styling from and sit beside

      Returns SVGElement[]

      The circles, in the order the centres were given

    • Builds one line per request, each along one edge of one element's bounding box, and returns them detached.

      A whole batch at once rather than a line at a time, for the reason given on createCircleElements: measuring an element after inserting a node beside it is what forces the browser to lay the chart out again, and a loop that alternated the two paid a layout per line. Reading every anchor first and building from the numbers costs one layout for the batch however many lines it holds -- and a candlestick or a box plot builds two per candle or per box, at construction and again on every live-data rebuild.

      Building is split from inserting because where a line lands among its siblings is behaviour, not bookkeeping: an anchor that is also the original of a hidden clone pairs with that clone by previousElementSibling, so a line inserted between them changes which elements a trace reports as its originals and therefore what a high-contrast reader is shown. The caller inserts with insertDerived, at the point in its own writes where the line belongs.

      Each anchor is measured and styled once even when several lines are drawn along it: inserting a hidden sibling does not move the anchor, so the second read only ever returned what the first did.

      When a bounding box has zero width (vertical path) or zero height (horizontal path), a minimum span is used so the resulting line is visible.

      Parameters

      • requests: readonly LineRequest[]

        The lines to draw, in the order they should be made

      Returns SVGElement[]

      The lines, index-aligned with the requests, not yet in the document

    • Puts derived nodes into the document directly after the element they were derived from, one at a time and in the order they were built.

      insertAdjacentElement(AFTER_END, ...) puts each node straight after the anchor, so building a then b and inserting both leaves [anchor, b, a]. That reversal is the child order every renderer, highlight and high-contrast pass has always seen, so it is reproduced exactly rather than tidied: the caller passes the nodes in the order it built them.

      Where the caller makes this call matters as much as the order within it. A node inserted after an anchor that is itself the original of a hidden clone lands between the two, and AbstractTrace.getAllOriginalElements pairs a clone to its original by previousElementSibling; inserting earlier or later than the chart's own clones therefore changes which elements HighContrastService recolours. Callers insert at the point their one-at-a-time predecessor did.

      An anchor with no parent inserts nothing, exactly as insertAdjacentElement does.

      Parameters

      • anchor: SVGElement

        The element the nodes were derived from and sit beside

      • ...nodes: readonly (SVGElement | null)[]

        The nodes, in the order they were built; nulls are skipped

      Returns void

    • Draws the whiskers between box plots' caps and their boxes.

      A box plot's selectors name the caps and the box, and a highlight only ever needs those. A renderer showing the chart's shape needs the whisker between them as well, or a box arrives as a rectangle with two detached dashes floating beyond it. The whisker runs from the cap's centre to the nearer edge of the box, and it is hidden: it is geometry for a renderer to read, not a mark for the chart to show.

      A whole batch at once for the reason given on buildLineElements: one box plot's whiskers used to be measured after the previous one's had been inserted, so every box cost the browser two more layouts. The same element is measured once however many whiskers touch it -- a box and both its caps were read four times per box. The whiskers come back detached, for the caller to insert with insertDerived where its one-at-a-time predecessor did.

      Parameters

      • requests: readonly WhiskerRequest[]

        The whiskers to draw, in the order they should be made

      Returns (SVGElement | null)[]

      One entry per request, index-aligned and not yet in the document: the hidden line, or null when the cap and the box do not sit apart along the box's axis, or when the document cannot measure them

    • Creates a highlighted clone of an SVG element with enhanced visibility.

      When the element has a zero-size bounding box (e.g. a single-point <path d="M x y"> used for median markers in violin plots), a visible <circle> is created at that position instead.

      Parameters

      • element: SVGElement

        The SVG element to highlight

      • fallbackColor: string

        Color to use if original color cannot be determined

      Returns SVGElement

      The highlighted clone element

    • Calculates a contrasting color (black or white) based on the element's fill color.

      Parameters

      • element: SVGElement

        The SVG element to analyze

      Returns string

      '#000' for light backgrounds, '#fff' for dark backgrounds

    • Applies CSS outline styling to highlight a subplot element.

      Parameters

      • element: SVGElement

        The SVG element to highlight

      • color: string

        The color for the outline

      Returns void

    • Removes CSS outline highlighting from a subplot element.

      Parameters

      • element: SVGElement

        The SVG element to remove highlighting from

      Returns void

    • Applies SVG stroke highlighting to a subplot with adaptive color based on background.

      Parameters

      • group: SVGElement

        The SVG group element to highlight

      • fallbackColor: string

        Color to use if background color cannot be determined

      • OptionalfigureBgElement: SVGElement

        Optional background element to inherit color from

      Returns void

    • Removes SVG stroke highlighting from a subplot element.

      Parameters

      • group: SVGElement

        The SVG group element to remove highlighting from

      Returns void