import type { DataPoint } from "@d3plus/data";
import type { D3Selection } from "@d3plus/dom";
import type { AccessorFn } from "../utils/index.js";
/**
    Creates SVG images based on an array of data.
    @example <caption>a sample row of data</caption>
var data = {"url": "file.png", "width": "100", "height": "50"};
@example <caption>passed to the generator</caption>
new Image().data([data]).render();
@example <caption>creates the following</caption>
<image class="d3plus-Image" opacity="1" href="file.png" width="100" height="50" x="0" y="0"></image>
@example <caption>this is shorthand for the following</caption>
image().data([data])();
@example <caption>which also allows a post-draw callback function</caption>
image().data([data])(function() { alert("draw complete!"); })
*/
export default class Image {
    _duration: number;
    _height: AccessorFn;
    _id: AccessorFn;
    _opacity: AccessorFn;
    _pointerEvents: AccessorFn;
    _select: D3Selection;
    _url: AccessorFn;
    _width: AccessorFn;
    _x: AccessorFn;
    _y: AccessorFn;
    _data: DataPoint[];
    /**
        Invoked when creating a new class instance, and sets any default parameters.
        @private
  */
    constructor();
    /**
        Renders the current Image to the page. If a *callback* is specified, it will be called once the images are done drawing.
      @param callback Optional callback invoked after rendering completes.
  */
    render(callback?: () => void): this;
    /**
        The data array used to create image shapes. An <image> tag will be drawn for each object in the array.
  */
    data(): DataPoint[];
    data(_: DataPoint[]): this;
    /**
        The animation duration in milliseconds.
  */
    duration(): number;
    duration(_: number): this;
    /**
        The height accessor for each image.
  
  @example
  function(d) {
    return d.height;
  }
  */
    height(): AccessorFn;
    height(_: AccessorFn | number): this;
    /**
        The unique id accessor for each image.
  
  @example
  function(d) {
    return d.id;
  }
  */
    id(): AccessorFn;
    id(_: AccessorFn): this;
    /**
        The opacity of each image.
  */
    opacity(): AccessorFn;
    opacity(_: AccessorFn | number): this;
    /**
        The pointer-events.
  */
    pointerEvents(): AccessorFn;
    pointerEvents(_: AccessorFn | string): this;
    /**
        The SVG container element as a d3 selector or DOM element.
  */
    select(): D3Selection;
    select(_: string | HTMLElement | SVGElement | null): this;
    /**
        Accessor function for the URL of each image.
  
  @example
  function(d) {
    return d.url;
  }
  */
    url(): AccessorFn;
    url(_: AccessorFn): this;
    /**
        The width accessor for each image.
  
  @example
  function(d) {
    return d.width;
  }
  */
    width(): AccessorFn;
    width(_: AccessorFn | number): this;
    /**
        The x position accessor for each image.
  
  @example
  function(d) {
    return d.x || 0;
  }
  */
    x(): AccessorFn;
    x(_: AccessorFn | number): this;
    /**
        The y position accessor for each image.
  
  @example
  function(d) {
    return d.y || 0;
  }
  */
    y(): AccessorFn;
    y(_: AccessorFn | number): this;
}
