@pacem/pacem-2d 1.0.0-abel

package/typings/index.d.ts

@@ -0,0 +1,613 @@
+import { Components as Components_2 } from '@pacem/pacem-core';
+import { CustomUIEvent } from '@pacem/pacem-core';
+import { EventKeyModifier } from '@pacem/pacem-core';
+import { Matrix2D } from '@pacem/pacem-foundation';
+import { PacemEventTarget } from '@pacem/pacem-core';
+import { Point } from '@pacem/pacem-foundation';
+import { Rect } from '@pacem/pacem-foundation';
+import { Size } from '@pacem/pacem-foundation';
+import { UI } from '@pacem/pacem-core';
+
+declare class AdapterUtils {
+    static stageDispatch(stage: Stage, type: 'down' | 'up' | 'click' | 'over' | 'out' | 'move', evt: MouseEvent | TouchEvent): void;
+    static isValidViewbox(viewbox: any): viewbox is Rect;
+    /**
+     * Dispatches a UI event related to a `Drawable` and returns a boolean that tells if the event was prevented (true) or not (false).
+     * @param target The `Drawable` instance.
+     * @param type Short event type name.
+     * @param evt The original event.
+     */
+    static itemDispatch(target: Drawable, type: 'down' | 'up' | 'click' | 'over' | 'out', evt: MouseEvent | TouchEvent): boolean;
+    /**
+     * Dispatches a drag event related to a `Drawable` and returns a boolean that tells if the event was prevented (true) or not (false).
+     * @param target The `Drawable` instance.
+     * @param evt The `DragDropEvent` instance.
+     * @param offset The tracked offset.
+     */
+    static itemDispatch(target: Drawable, evt: UI.DragDropEvent, offset: Point): boolean;
+}
+
+export declare namespace Components {
+    export {
+        Drawing_2 as Drawing
+    }
+}
+
+declare type CornerRadius = {
+    rx: CornerRadiusComponent;
+    ry: CornerRadiusComponent;
+    type: CornerType;
+};
+
+declare type CornerRadiusComponent = {
+    value: number;
+    unit?: 'pct' | 'u';
+};
+
+declare enum CornerType {
+    Rounded = "rounded",
+    Cut = "cut"
+}
+
+declare class DragEvent_2 extends UI2DEvent<DragEventArgs> {
+}
+
+declare interface DragEventArgs {
+    readonly offset: Point;
+    readonly item: Drawable;
+}
+
+declare interface Drawable {
+    stage?: Stage;
+    /** Gets or sets whether the drawable is hit-testable. */
+    inert?: boolean;
+    hide?: boolean;
+    /** @deprecated will be likely removed sooner or later to be handled outside the stage/adapter. */
+    draggable?: boolean;
+    tag?: any;
+}
+
+declare abstract class DrawableElement extends Components_2.PacemCrossItemsContainerElement<DrawableElement> implements Drawable {
+    validate(_: DrawableElement): boolean;
+    protected findContainer(): DrawableElement | Pacem2DElement;
+    get stage(): Pacem2DElement;
+    get parent(): DrawableElement;
+    tag: any;
+    inert: boolean;
+    disconnectedCallback(): void;
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+}
+
+declare class DrawableEvent extends UI2DEvent<Drawable> {
+    constructor(type: string, args: Drawable, originalEvent: MouseEvent | TouchEvent | KeyboardEvent, m: Matrix2D);
+}
+
+export declare namespace Drawing {
+    export {
+        isDrawable,
+        isUiObject,
+        isLinearGradient,
+        isRadialGradient,
+        isPresentationObject,
+        isShape,
+        isGroup,
+        isText,
+        isImage,
+        ViewBoxAlignment,
+        ViewBoxAspectRatio,
+        Stage,
+        Drawable,
+        UiObject,
+        GradientStop,
+        Gradient,
+        LinearGradient,
+        RadialGradient,
+        PresentationState,
+        PresentationObject,
+        Marker,
+        ShapeGeometry,
+        Shape,
+        Group,
+        Text_2 as Text,
+        Image_2 as Image,
+        DragEventArgs,
+        UI2DEvent,
+        DragEvent_2 as DragEvent,
+        DrawableEvent,
+        StageEvent
+    }
+}
+
+export declare namespace Drawing_2 {
+    export {
+        DrawableElement,
+        Stage_2 as Stage,
+        StageOptions,
+        UiElement,
+        PresentationElement,
+        ShapeElement,
+        PacemGroupElement,
+        PacemEllipseElement,
+        PacemCircleElement,
+        CornerRadiusComponent,
+        CornerRadius,
+        CornerType,
+        PacemRectElement,
+        PacemLineElement,
+        PacemPathElement,
+        PacemPolygonElement,
+        PacemPolylineElement,
+        PacemImageElement,
+        PacemTextElement,
+        getStageOptions,
+        Pacem2DElement,
+        AdapterUtils,
+        PacemCanvasAdapterElement,
+        PacemSvgAdapterElement
+    }
+}
+
+declare function getStageOptions(stage: Stage): StageOptions;
+
+declare interface Gradient {
+    stops: GradientStop[];
+}
+
+declare interface GradientStop {
+    offset: number;
+    color: string;
+    opacity?: number;
+}
+
+declare interface Group extends UiObject {
+    childDrawables: Drawable[];
+}
+
+declare interface Image_2 extends UiObject {
+    src: string;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+
+declare function isDrawable(object: any): object is Drawable;
+
+declare function isGroup(object: any): object is Group;
+
+declare function isImage(object: any): object is Image_2;
+
+declare function isLinearGradient(object: Gradient): object is LinearGradient;
+
+declare function isPresentationObject(object: any): object is PresentationObject;
+
+declare function isRadialGradient(object: Gradient): object is RadialGradient;
+
+declare function isShape(object: any): object is Shape;
+
+declare function isText(object: any): object is Text_2;
+
+declare function isUiObject(object: any): object is UiObject;
+
+declare interface LinearGradient extends Gradient {
+    start: Point;
+    end: Point;
+}
+
+declare type Marker = {
+    pathData: string;
+    stroke?: string;
+    fill?: string;
+    viewbox?: Rect;
+    ref?: Point;
+    width?: number;
+    height?: number;
+};
+
+declare abstract class Pacem2DAdapterElement extends PacemEventTarget {
+    protected DefaultShapeValues: {
+        stroke: string;
+        lineWidth: number;
+        fill: string;
+    };
+    /**
+     * Returns the transform matrix that projects page coords into stage coords.
+     * @param scene {Pacem2DElement} Container for the stage/scene
+     */
+    abstract getTransformMatrix(scene: Pacem2DElement): Matrix2D;
+    /**
+     * Updates the stage with the new size.
+     * @param scene {Pacem2DElement} Container for the stage/scene
+     * @param size {Size} New size
+     */
+    abstract invalidateSize(scene: Pacem2DElement, size: Size): any;
+    /**
+     * Initializes the 2d scene and returns its corresponding DOM element.
+     * @param scene {Pacem2DElement} Container for the stage/scene
+     */
+    abstract initialize(scene: Pacem2DElement): HTMLElement | SVGElement;
+    /**
+     * Disposes the 2d scene resources.
+     * @param scene {Pacem2DElement} Container for the stage/scene
+     */
+    abstract dispose(scene: Pacem2DElement): void;
+    /**
+     * Returns the foremost drawable element under the pointer.
+     * @param scene {Pacem2DElement} Container for the stage/scene
+     */
+    abstract getHitTarget(scene: Pacem2DElement): Drawable;
+    /**
+     * Draws the elements of provided the scene.
+     * @param scene {Pacem2DElement} Container for the stage/scene
+     * @param item {Drawable} If provided, tries to limit the drawing execution to the drawable itself
+     * @param forceGroupRedraw {Boolean} In case the item is a group, it forces the redraw of its content
+     */
+    abstract draw(scene: Pacem2DElement, item?: Drawable, forceGroupRedraw?: boolean): any;
+    /**
+     * Processes the stage content and returns an image accordingly.
+     * */
+    abstract snapshot(stage: Pacem2DElement, bgColor?: string, type?: string, quality?: number): PromiseLike<Blob>;
+    protected snapshotElement(element: HTMLElement | SVGElement, bgColor?: string, type?: string, quality?: number): PromiseLike<Blob>;
+}
+
+declare class Pacem2DElement extends Components_2.PacemItemsContainerElement<DrawableElement> implements Stage_2 {
+    #private;
+    get stage(): HTMLElement;
+    snapshot(bgColor?: string, type?: string, quality?: number): Promise<any> | PromiseLike<Blob>;
+    get transformMatrix(): Matrix2D;
+    private _transformMatrixScale;
+    validate(item: DrawableElement): boolean;
+    adapter: Pacem2DAdapterElement;
+    viewbox: Rect;
+    aspectRatio: ViewBoxAspectRatio;
+    datasource: Drawable[];
+    options: StageOptions;
+    zoom: number;
+    private _stage;
+    private _resize;
+    draw(item?: Drawable): any;
+    draw(item: Group, deepRedraw: boolean): any;
+    private _drawDebounced;
+    /** Debounced draw invocation. */
+    requestDraw(item?: Drawable): any;
+    requestDraw(item: Group, redrawContent: boolean): any;
+    private _buildUpDatasourceFromDOM;
+    private _resizeHandler;
+    private _getActualAspectRatio;
+    private _zoomFromValue;
+    private _zoom;
+    private _zoomHandler;
+    private _getPanPoint;
+    private _panHandler;
+    private _panStartHandler;
+    private _panEndHandler;
+    private _invalidateSize;
+    viewActivatedCallback(): void;
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+    disconnectedCallback(): void;
+}
+
+/** Implementation postponed. Focus on SVG adapter. */
+declare class PacemCanvasAdapterElement extends Pacem2DAdapterElement {
+    #private;
+    snapshot(stage: Pacem2DElement, backgroundColor?: string, type?: string, quality?: number): PromiseLike<Blob>;
+    getCanvas(stage: Pacem2DElement): HTMLCanvasElement;
+    private _getScreenInverseMatrix;
+    getTransformMatrix(scene: Pacem2DElement): Matrix2D;
+    viewActivatedCallback(): void;
+    disconnectedCallback(): void;
+    invalidateSize(scene: Pacem2DElement, size: Size): void;
+    getHitTarget(stage: Pacem2DElement): Drawable;
+    initialize(scene: Pacem2DElement): HTMLElement | SVGElement;
+    dispose(scene: Pacem2DElement): void;
+    private _requestDraw;
+    draw(scene: Pacem2DElement): void;
+    private _hitTarget;
+    private _pointer;
+    private _scopeEvent;
+    private _dragging;
+    private _dragInitHandler;
+    private _draggingHandler;
+    private _dragEndHandler;
+    private _mouseleaveHandler;
+    private _mousemoveHandler;
+    private _mouseDownUpHandler;
+    private _draw;
+    private _setPresentationState;
+    private _drawImage;
+    private _drawText;
+    private _drawShape;
+    private _drawMarker;
+    private _scenes;
+    private _handles;
+}
+
+declare class PacemCircleElement extends ShapeElement {
+    center: Point;
+    radius: number;
+    start: number;
+    end: number;
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+    protected getPathData(): string;
+    protected getShapeGeometry(): ShapeGeometry;
+    static getPathData(c?: Point, r?: number, start?: number, end?: number): string;
+}
+
+declare class PacemEllipseElement extends ShapeElement {
+    center: Point;
+    rx: number;
+    ry: number;
+    start: number;
+    end: number;
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+    protected getPathData(): string;
+    protected getShapeGeometry(): ShapeGeometry;
+    static getPathData(c?: Point, rx?: number, ry?: number, start?: number, end?: number): string;
+}
+
+declare class PacemGroupElement extends PresentationElement implements Group {
+    #private;
+    validate(item: DrawableElement): boolean;
+    datasource: Drawable[];
+    get childDrawables(): Drawable[];
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+}
+
+declare class PacemImageElement extends UiElement implements Image_2 {
+    src: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+}
+
+declare class PacemLineElement extends ShapeElement {
+    from: Point;
+    to: Point;
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+    protected getShapeGeometry(): ShapeGeometry;
+    protected getPathData(): string;
+    static getPathData(from?: Point, to?: Point): string;
+}
+
+declare class PacemPathElement extends ShapeElement {
+    d: string;
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+    protected getPathData: () => string;
+    protected getShapeGeometry(): ShapeGeometry;
+}
+
+declare class PacemPolygonElement extends ShapeElement {
+    sides: number;
+    /** The circumradius of the polygon. */
+    radius: number;
+    center: Point;
+    starIndent: number;
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+    protected getPathData(): string;
+    protected getShapeGeometry(): ShapeGeometry;
+    static getShapeGeometry(center: Point, radius: number, sides: number, starIndent?: number): ShapeGeometry;
+    static getPathData(center: Point, radius: number, sides: number, starIndent?: number): string;
+}
+
+declare class PacemPolylineElement extends ShapeElement {
+    points: Point[];
+    closed: boolean;
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+    static getShapeGeometry(points: Point[], closed: boolean): ShapeGeometry;
+    protected getShapeGeometry(): ShapeGeometry;
+    protected getPathData(): string;
+    static getPathData(points: Point[], closed: boolean): string;
+}
+
+declare class PacemRectElement extends ShapeElement {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    r: [CornerRadius, CornerRadius, CornerRadius, CornerRadius];
+    cornerType: CornerType;
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+    protected getPathData(): string;
+    protected getShapeGeometry(): ShapeGeometry;
+    static getPathData(x: number, y: number, w: number, h: number): string;
+    static getPathData(x: number, y: number, w: number, h: number, r: CornerRadius): string;
+    static getPathData(x: number, y: number, w: number, h: number, r: [CornerRadius, CornerRadius, CornerRadius, CornerRadius]): string;
+}
+
+declare class PacemSvgAdapterElement extends Pacem2DAdapterElement {
+    #private;
+    snapshot(stage: Stage, background?: string, type?: string, quality?: number): PromiseLike<Blob>;
+    getTransformMatrix(scene: Pacem2DElement): Matrix2D;
+    viewActivatedCallback(): void;
+    disconnectedCallback(): void;
+    invalidateSize(scene: Pacem2DElement, size: Size): void;
+    initialize(scene: Pacem2DElement): HTMLElement | SVGElement;
+    dispose(scene: Pacem2DElement): void;
+    private _hitTarget;
+    getHitTarget(scene: Pacem2DElement): Drawable;
+    draw(scene: Pacem2DElement, item?: Drawable): any;
+    draw(scene: Pacem2DElement, item: Group, deepRedraw: boolean): any;
+    private _dragInitHandler;
+    private _draggingHandler;
+    private _dragEndHandler;
+    private _mouseleaveHandler;
+    private _mousemoveHandler;
+    private _mouseDownUpHandler;
+    private _hasItems;
+    private _disposeSvg;
+    private _draw;
+    private _buildSVGElement;
+    private _ensureGradient;
+    private _ensureMarker;
+    private _scenes;
+    private _markers;
+    private _gradients;
+    private _items;
+}
+
+declare class PacemTextElement extends UiElement implements Text_2 {
+    text: string;
+    color: string;
+    fontFamily: string;
+    fontSize: number;
+    fontWeight: string;
+    fontStyle: string;
+    anchor: Point;
+    textAnchor: 'start' | 'middle' | 'end';
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+}
+
+declare abstract class PresentationElement extends UiElement implements PresentationObject {
+    stroke: string;
+    fill: string | Gradient;
+    dashArray?: number[];
+    lineWidth: number;
+    lineJoin?: CanvasLineJoin;
+    lineCap?: CanvasLineCap;
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+}
+
+declare interface PresentationObject extends UiObject, PresentationState {
+}
+
+declare interface PresentationState {
+    stroke?: string;
+    lineWidth?: number;
+    fill?: string | Gradient;
+    dashArray?: number[];
+    lineJoin?: CanvasLineJoin;
+    lineCap?: CanvasLineCap;
+    readonly transformMatrix?: Matrix2D;
+    opacity?: number;
+}
+
+declare class PresentationState {
+    static combine(lhs: PresentationState, rhs: PresentationState, precomputedMatrix?: Matrix2D): PresentationState;
+}
+
+declare interface RadialGradient extends Gradient {
+    center: Point;
+    radius: number;
+}
+
+declare interface Shape extends PresentationObject {
+    pathData: string;
+    markerStart?: Marker;
+    markerEnd?: Marker;
+    markerMid?: Marker;
+    readonly vertices?: Point[];
+    readonly boundingRect?: Rect;
+}
+
+declare class Shape {
+    static empty(): ShapeGeometry;
+}
+
+declare abstract class ShapeElement extends PresentationElement implements Shape {
+    #private;
+    protected data: string;
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+    viewActivatedCallback(): void;
+    protected recomputeShape(): void;
+    get pathData(): string;
+    get boundingRect(): Rect;
+    get vertices(): Point[];
+    protected abstract getShapeGeometry(): ShapeGeometry;
+}
+
+declare type ShapeGeometry = {
+    pathData: string;
+    vertices: Point[];
+    boundingRect: Rect;
+};
+
+declare interface Stage extends EventTarget {
+    draw(item?: Drawable): any;
+    viewbox: Rect;
+    aspectRatio?: ViewBoxAspectRatio;
+    readonly transformMatrix: Matrix2D;
+    readonly stage: HTMLElement;
+}
+
+declare interface Stage_2 extends Stage {
+    readonly adapter: Pacem2DAdapterElement;
+}
+
+declare class StageEvent extends UI2DEvent<Stage> {
+    constructor(type: string, args: Stage, originalEvent: MouseEvent | TouchEvent | KeyboardEvent, m?: Matrix2D);
+}
+
+declare type StageOptions = {
+    panControl: boolean;
+    zoomControl: boolean;
+    panModifiers: EventKeyModifier[];
+    zoomModifiers: EventKeyModifier[];
+    clickModifiers: EventKeyModifier[];
+};
+
+declare interface Text_2 extends UiObject {
+    text: string;
+    fontFamily?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+    fontSize?: number;
+    color?: string;
+    anchor?: Point;
+    textAnchor?: 'start' | 'middle' | 'end';
+}
+
+declare abstract class UI2DEvent<T> extends CustomUIEvent<T> {
+    #private;
+    constructor(type: string, eventInit: CustomEventInit<T>, originalEvent: MouseEvent | TouchEvent | KeyboardEvent, transformMatrix: Matrix2D);
+    /** Gets the screen transform matrix. */
+    get transformMatrix(): Matrix2D;
+    project(pt?: Point): Point;
+}
+
+declare abstract class UiElement extends DrawableElement implements UiObject {
+    #private;
+    rotate: number;
+    scaleX: number;
+    scaleY: number;
+    translateX: number;
+    translateY: number;
+    opacity: number;
+    viewActivatedCallback(): void;
+    propertyChangedCallback(name: string, old: any, val: any, first?: boolean): void;
+    private _updateTransformMatrix;
+    /** @internal */
+    get transformMatrix(): {
+        a: number;
+        b: number;
+        c: number;
+        d: number;
+        e: number;
+        f: number;
+    };
+}
+
+declare interface UiObject extends Drawable {
+    opacity?: number;
+    readonly transformMatrix?: Matrix2D;
+}
+
+declare type ViewBoxAlignment = 'min' | 'mid' | 'max';
+
+declare type ViewBoxAspectRatio = 'none' | {
+    x: ViewBoxAlignment;
+    y: ViewBoxAlignment;
+    slice?: boolean;
+};
+
+
+
+declare global {
+    namespace Pacem {
+        export {
+            Components,
+            Drawing
+        };
+    }
+}