image-labeling/dist/index.d.ts

A comprehensive package for tagging images.

declare class SVGEl {
    node: SVGElement;
    private events;
    constructor(node: SVGElement, events?: {
        event: string;
        cb: EventListener;
    }[]);
    append: (el: SVGEl) => void;
    fill(color: string): this;
    move(x: number, y: number): this;
    addClass(name: string): this;
    removeClass(name: string): this;
    stroke(obj: {
        color?: string;
        width?: number;
        opacity?: number;
        dasharray?: string;
    }): this;
    getAttr: (name: string) => string | null;
    attr(name: string, value: string): this;
    register(event: string, cb: EventListener): void;
    mouseup(cb: (ev: MouseEvent) => any): this;
    mousedown(cb: (ev: MouseEvent) => any): this;
    mousemove(cb: (ev: MouseEvent) => any): this;
    mouseover(cb: (ev: MouseEvent) => any): this;
    mouseout(cb: (ev: MouseEvent) => any): this;
    touchstart(cb: (ev: TouchEvent) => any): this;
    touchmove(cb: (ev: TouchEvent) => any): this;
    touchend(cb: (ev: TouchEvent) => any): this;
    click(cb: (ev: MouseEvent) => any): this;
    dblclick(cb: (ev: MouseEvent) => any): this;
    on(event: string, cb: (ev: any) => any): this;
    off(event: string): this;
    opacity(o: number): this;
    remove: () => void;
    increment(d: [x: number, y: number]): void;
    after: (el: SVGEl) => void;
    before: (el: SVGEl) => void;
}
declare class CircleEl extends SVGEl {
    node: SVGCircleElement;
    constructor(node: SVGCircleElement);
    increment: typeof roundIncrement;
    x: typeof RoundElX;
    y: typeof RoundElY;
    radius(r: number): this;
}
declare class EllipseEl extends SVGEl {
    node: SVGEllipseElement;
    constructor(node: SVGEllipseElement);
    increment: typeof roundIncrement;
    x: typeof RoundElX;
    y: typeof RoundElY;
    radius(rx: number, ry: number): this;
}
declare class RectEl extends SVGEl {
    node: SVGRectElement;
    constructor(node: SVGRectElement);
    radius(r: number): this;
    move(x: number, y: number): this;
}
declare class PolylineEl extends SVGEl {
    node: SVGPolylineElement;
    constructor(node: SVGPolylineElement);
    array(): number[][];
    plot(points: [number, number][]): void;
    increment(d: [x: number, y: number]): void;
}
declare class TextEl extends SVGEl {
    node: SVGTextElement;
    constructor(node: SVGTextElement);
    font(size: number, weight: string, fill?: string, anchor?: string): this;
    move(x: number, y: number): this;
    bbox: () => DOMRect;
}
declare class PathEl extends SVGEl {
    node: SVGPathElement;
    constructor(node: SVGPathElement);
    plot(d: string): this;
}
declare class ImageEl extends SVGEl {
    node: SVGImageElement;
    constructor(node: SVGImageElement);
    size(w: string, h: string): this;
    bbox: () => DOMRect;
}
declare class SVGSVGEl extends SVGEl {
    node: SVGSVGElement;
    constructor(node: SVGSVGElement);
    circle(r: number): CircleEl;
    ellipse(rx: number, ry: number): EllipseEl;
    rect(w: number, h: number): RectEl;
    polyline(points: [number, number][]): PolylineEl;
    plain(text: string): TextEl;
    path(d: string): PathEl;
    image(url: string, onload: (target: ImageEl) => any): ImageEl;
    size(w: number, h: number): void;
}
declare function RoundElX(this: SVGEl, x?: number): any;
declare function RoundElY(this: SVGEl, y?: number): any;
declare function roundIncrement(this: CircleEl | EllipseEl, d: [x: number, y: number]): void;

type Point = {
    X: number;
    Y: number;
};
type ArrayXY = [number, number];
type StaticData = {
    width: number;
    height: number;
    ratio: number;
    discRadius: number;
    /** Stroke and discs can be hidden when not in edit/draw mode */
    hb: boolean | undefined;
    shortcut: Shortcut | undefined;
    categoryOpt: {
        vertical: 'top' | 'middle' | 'bottom';
    };
    touch: 'enabled' | undefined;
};
type Shortcut = {
    del?: boolean;
    bksp?: boolean;
};
declare abstract class Shape {
    categories: string[];
    phi: number;
    color?: string | undefined;
    id: number;
    getCenterWithOffset: () => Point;
    abstract type: string;
    abstract labelPosition(vertical: 'top' | 'middle' | 'bottom'): ArrayXY;
    abstract getCenter(): ArrayXY;
    abstract zoom(factor: number): void;
    abstract output(ratio: number): Shape;
    abstract centerChanged(newCenter: ArrayXY): void;
    constructor(categories?: string[], phi?: number, color?: string | undefined, id?: number);
    getOutput(ratio: number, svg: SVGSVGEl): Shape;
    rotatePosition(): ArrayXY;
}
declare class Dot extends Shape {
    position: ArrayXY;
    categories: string[];
    color?: string | undefined;
    id: number;
    type: string;
    constructor(position?: ArrayXY, categories?: string[], color?: string | undefined, id?: number);
    labelPosition(vertical: 'top' | 'middle' | 'bottom'): ArrayXY;
    getCenter(): ArrayXY;
    zoom(factor: number): void;
    output(ratio: number): Dot;
    centerChanged(newPos: ArrayXY): void;
}
interface IlElementExtra {
    categoriesPlain?: TextEl;
    categoriesRect?: RectEl;
    shape: Shape;
    shadow: SVGEl;
    discs: CircleEl[];
    editing: boolean;
    connector?: PolylineEl;
}
type ElementWithExtra = SVGEl & IlElementExtra;
declare abstract class AngledShape extends Shape {
    points: ArrayXY[];
    categories: string[];
    color?: string | undefined;
    id: number;
    constructor(points?: ArrayXY[], categories?: string[], color?: string | undefined, id?: number);
    labelPosition(vertical: 'top' | 'middle' | 'bottom'): ArrayXY;
    outPoints(ratio: number): ArrayXY[];
    getCenter(): ArrayXY;
    centerChanged(newCenter: ArrayXY): void;
    zoom(factor: number): void;
}
declare enum Color {
    BlackDisc = "#000",
    GreenDisc = "#009900",
    GrayDisc = "#a6a6a6",
    BlackLine = "#000",
    GreenLine = "#030",
    LightGreenLine = "#ccffcc",
    RedLine = "#f00",
    WhiteLine = "#fff",
    ShapeFill = "#ffffff00"
}
declare enum ActType {
    Added = 0,
    Edited = 1,
    Selected = 2,
    CtxMenu = 3
}
declare class Rectangle extends AngledShape {
    type: string;
    output(ratio: number): Rectangle;
}
declare class Polygon extends AngledShape {
    type: string;
    output(ratio: number): Polygon;
}
declare abstract class RoundShape extends Shape {
    centre: ArrayXY;
    categories: string[];
    phi: number;
    color?: string | undefined;
    id: number;
    constructor(centre?: ArrayXY, categories?: string[], phi?: number, color?: string | undefined, id?: number);
    abstract get width(): number;
    abstract set width(w: number);
    abstract get height(): number;
    abstract set height(h: number);
    getCenter(): ArrayXY;
    centerChanged(newCenter: ArrayXY): void;
}
declare class Circle extends RoundShape {
    centre: ArrayXY;
    radius: number;
    categories: string[];
    color?: string | undefined;
    id: number;
    type: string;
    constructor(centre?: ArrayXY, radius?: number, categories?: string[], color?: string | undefined, id?: number);
    get width(): number;
    set width(w: number);
    get height(): number;
    set height(h: number);
    labelPosition(vertical: 'top' | 'middle' | 'bottom'): ArrayXY;
    zoom(factor: number): void;
    output: (ratio: number) => Shape;
}
declare class Ellipse extends RoundShape {
    centre: ArrayXY;
    radiusX: number;
    radiusY: number;
    categories: string[];
    phi: number;
    color?: string | undefined;
    id: number;
    type: string;
    constructor(centre?: ArrayXY, radiusX?: number, radiusY?: number, categories?: string[], phi?: number, color?: string | undefined, id?: number);
    get width(): number;
    set width(w: number);
    get height(): number;
    set height(h: number);
    labelPosition(vertical: 'top' | 'middle' | 'bottom'): ArrayXY;
    zoom(factor: number): void;
    output: (ratio: number) => Shape;
}

declare abstract class ShapeBuilder<T extends Shape> {
    onEdited: (shape: Shape) => void;
    enlist: (shape: Shape) => void;
    constructor(onEdited: (shape: Shape) => void, enlist: (shape: Shape) => void);
    static _svg: SVGSVGEl;
    static _sd: StaticData;
    svg: SVGSVGEl;
    sd: StaticData;
    abstract element?: ElementWithExtra;
    abstract shape?: T;
    /** Stroke and discs can be hidden when not in edit/draw mode by setting hideBorder=true */
    abstract canHB: boolean;
    private lastPoint?;
    private moveIcon;
    protected movePath?: PathEl;
    private rotateIcon;
    protected rotateArr: SVGEl[];
    protected canRotate: boolean;
    drawing: boolean;
    abstract plotShape(): void;
    abstract createElement(shape: T): void;
    abstract newShape(): T;
    abstract startDraw(): void;
    abstract plot(element: ElementWithExtra): void;
    abstract stopDraw(): void;
    abstract editShape(): void;
    dragIndex?: number;
    drawDisc(x: number, y: number, radius: number, color: string): CircleEl;
    rotate(elem?: ElementWithExtra): void;
    abstract ofType<S extends Shape>(shape: S): boolean;
    basePlotShape(): void;
    labeledStyle(element: ElementWithExtra, labeled: boolean, color?: string): void;
    setOptions(element: ElementWithExtra, categories: string[], color?: string): void;
    removeElement(): void;
    addMoveIcon(): void;
    addRotateIcon(): void;
    initDrag(): void;
    drag_md(e: MouseEvent): void;
    drag_ts(e: TouchEvent): void;
    drag_mm(e: MouseEvent): void;
    drag_tm(e: TouchEvent): void;
    drag_moveevent(point: Point): void;
    drag_upevent(touch: boolean): void;
    stopDrag(): void;
    rotate_md(e: MouseEvent): void;
    rotate_ts(e: TouchEvent): void;
    rotate_mm(e: MouseEvent): void;
    rotate_tm(e: TouchEvent): void;
    rotate_moveevent(point: Point): void;
    rotate_upevent(touch: boolean): void;
    zoom(elem: ElementWithExtra, factor: number): void;
    stopEdit(): void;
    stopEditShape(elem: ElementWithExtra): void;
    edit(): void;
}

declare class Director {
    svg: SVGSVGEl;
    container: HTMLDivElement;
    static instance?: Director;
    static actions: {
        type: ActType;
        func: (shape: Shape) => any;
    }[];
    protected maxId: number;
    builders: ShapeBuilder<Shape>[];
    elements: ElementWithExtra[];
    origin?: Point;
    winEv: {
        keydown: (e: KeyboardEvent) => false | void;
        keyup: (e: KeyboardEvent) => void;
        blur: () => void;
    };
    constructor(svg: SVGSVGEl, container: HTMLDivElement);
    raise(type: ActType, shape: Shape): void;
    getBuilder<T extends Shape>(shape: T): ShapeBuilder<T>;
    stopEdit: () => void;
    setMaxId: (val: number) => number;
    edit(id: number): void;
    zoom(factor: number): void;
    getElement: (id: number) => ElementWithExtra;
    setOptions(element: ElementWithExtra, categories: string[], color?: string): void;
    plot(shapes: Shape[]): void;
    startDraw(shape: Shape): void;
    stopDraw(): void;
    enlist(shape: Shape, isNew: boolean): void;
    updateCategories(id: number, categories: string[], color?: string): void;
    removeById(id: number): void;
    remove(): void;
    drag_md(container: HTMLDivElement, e: MouseEvent): void;
    drag_mm(e: MouseEvent): void;
    drag_mu(): void;
    getShapes: () => Shape[];
    findShape: (id: number) => Shape;
    static init(svg: SVGSVGEl, sd: StaticData, container: HTMLDivElement): void;
    static setActions(actions: {
        type: ActType;
        func: ((shape: Shape) => any) | undefined;
    }[]): void;
    static get: () => Director | undefined;
    static clear(svgEl?: SVGSVGElement): void;
    _clear(): void;
    mousewheel(e: WheelEvent): void;
    setSizeAndRatio(factor: number, relative: boolean): number;
}

declare class Util {
    static ArrayXYSum: (...array: ArrayXY[]) => ArrayXY;
    static rotate: (pos: ArrayXY, center: ArrayXY, teta: number) => ArrayXY;
    static fileName: (url: string | null) => string;
    static parseColor: (str: string) => number[];
    static removeOpacity: (color: string) => string;
    static toPx: (scrollWidth: number, dim?: number | string) => number | undefined;
    static touchPos: (e: TouchEvent, end?: boolean) => {
        X: number;
        Y: number;
    };
}

export { ActType, type ArrayXY, Circle, Color, Director, Dot, Ellipse, ImageEl, type Point, Polygon, Rectangle, SVGSVGEl, Shape, type Shortcut, Util };