import Style from './style';
export declare abstract class GraphOptions {
    /**
     * 颜色或者填充色
     */
    color?: string;
    /**
     * 边框定义
     */
    border?: Border;
    protected constructor(color?: string);
    setup(options?: {
        border?: Border;
        color?: string;
    }): this;
}
export declare class Border {
    width: number;
    color?: string;
    opacity?: number;
    private constructor();
    clone({ width, color, opacity }: any): Border;
    static build(width: number, color?: string, opacity?: number): Border;
}
export interface IPoint {
    readonly x: number;
    readonly y: number;
}
export declare class Point implements IPoint {
    readonly x: number;
    readonly y: number;
    /**
     * @param x 横坐标点
     * @param y 纵坐标点
     */
    constructor(x: number, y: number);
    /**
     * @param x x坐标偏移量
     * @param y y坐标偏移量
     */
    offset({ x, y }: {
        x?: number | undefined;
        y?: number | undefined;
    }): Point;
    offsetX(x: number): Point;
    offsetY(y: number): Point;
    /**
     * @param x 横坐标点
     * @param y 纵坐标点
     */
    static build(x: number, y: number): Point;
    static from(point: IPoint): Point;
    toString(): string;
}
export interface ViewBox {
    readonly point: IPoint;
    readonly width: number | string;
    readonly height: number | string;
}
export declare const getViewBoxValue: (viewBox?: ViewBox | string) => string;
export interface FontOptions {
    size?: string | 'large' | 'larger' | 'medium' | 'revert' | 'small' | 'smaller' | 'x-large' | 'xx-large' | 'xxx-large' | 'x-small' | 'xx-small' | 'xxx-small';
    weight?: number | 'bold' | 'bolder';
    family?: string;
    style?: 'initial' | 'italic' | 'oblique' | 'normal' | 'unset' | 'revert';
    color?: string;
}
export declare const parseStyle: (style: Style | string | undefined) => string;
/**
 * 图形
 */
export declare class Graph {
    protected readonly options: GraphOptions;
    protected readonly element: SVGElement;
    protected readonly nodes: Graph[];
    protected constructor(element: SVGElement);
    get graphs(): Graph[];
    setClass(className: string): this;
    setId(id: string): this;
    genUid(): string;
    append(node: Graph | SVGElement): this;
    append(node: Array<Graph | SVGElement>): this;
    static parseElement(content: string): SVGElement;
    static createElement(tagName: string, attrs?: any): SVGElement;
    /**
     * 属性设置
     * @param attrs 属性对象 属性如果不需要做驼峰转下划线 则需要名字以“:”修饰
     *  @example
     *      {":viewBox": '0 0 10 10'} =>  viewBox: 0 0 10 10
     *      {"viewBox": '0 0 10 10'} =>  view-box: 0 0 10 10
     * @param element
     * @protected
     */
    protected static attr(attrs: any, element: SVGElement): SVGElement;
    html(html: string): this;
    /**
     * 引用剪切路径
     * @param id clipPath 的id
     */
    clipPath(id: string): this;
    border(border: Border): this;
    border(border: {
        width: number;
        color?: string;
        opacity?: number;
    }): this;
    fill(color: string): this;
    fill(color: string, opacity?: number): this;
    /**
     * 设置透明
     */
    transparent(): this;
    protected getStyle(name?: string): Style | string | undefined;
    css<K extends keyof Style>(name: K, value: string): this;
    style(css: string): this;
    style(style: Style): this;
    font(options: FontOptions): this;
    attr(attrs: Object): this;
    attr(name: string, value: any): this;
    /**
     * 对应 transform="translate(75,25)"
     * @param horizontal 水平移动距离
     * @param vertical 垂直移动距离
     */
    translate(horizontal: number, vertical?: number): this;
    /**
     * @link https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/
     * eg: 向右平移10 matrix(1,0,0,1,10,0)
     * 1. matrix表现偏移就是：
     *     transform: matrix(a, b, c, d, e水平偏移距离, f垂直偏移距离);
     *     你只要关心后面两个参数就可以了，前面4个参数无所谓
     *
     * 使用变换矩阵
     * 对于matrix(1, 0, 0, 1, 30, 30)偏移，位置计算等式为：
     *    x' = ax+cy+e = 1*x+0*y+30 = x + 30;
     *    y' = bx+dy+f = 0*x+1*y+30 = y + 30;
     *    现在是第236块，坐标是(-40, 50). 于是有：
     *      x' = x + 30 = -40 + 30 = -10;
     *      y' = y + 30 = 50 + 30 = 80;
     * 缩放
     *    x' = ax+cy+e = s*x+0*y+0 = s*x;
     *    y' = bx+dy+f = 0*x+s*y+0 = s*y;
     *
     */
    matrix(a: number, b: number, c: number, d: number, e: number, f: number): this;
    /**
     * 缩放
     *  y未设置值时，值等于x
     */
    scale(x: number, y?: number): this;
    skew(options: {
        x?: number;
        y?: number;
    }): this;
    /**
     * 向x斜切angle度 斜切45度 skewX(45)
     */
    skewX(angle: number): this;
    /**
     * 向y斜切angle度 斜切45度 skewY(45)
     */
    skewY(angle: number): this;
    rotate(angle: number): this;
    rotate(angle: number, point: IPoint): this;
    protected attrs(): any;
    /**
     * 注意 当包含子元素时候该方法多次调用将会导致内容重复出现
     * 多次调用会重复往element里面添加内容
     */
    draw(): SVGElement;
    /**
     * 添加事件监听 仅前端有效
     * @param type
     * @param listener
     * @param options
     */
    addEventListener(type: string, listener: (evt: Event) => void, options?: boolean | {
        capture?: boolean;
        once?: boolean;
        passive?: boolean;
    }): this;
    /**
     * 移除事件监听 仅前端有效
     * @param type
     * @param listener
     * @param options
     */
    removeEventListener(type: string, listener: (evt: Event) => void, options?: boolean | {
        capture?: boolean;
    }): this;
    toString(): string;
}