@visactor/vrender-core/es/interface/graphic.d.ts

```typescript import { xxx } from '@visactor/vrender-core'; ```

import type { IAABBBounds, IMatrix, IPointLike, IPoint, BoundsAnchorType, IOBBBounds } from '@visactor/vutils';
import type { IAnimate, IStep, EasingType, IAnimateTarget, ITimeline } from './animation';
import type { IColor } from './color';
import type { IGroup } from './graphic/group';
import type { IShadowRoot } from './graphic/shadow-root';
import type { ILayer } from './layer';
import type { INode } from './node-tree';
import type { ICustomPath2D } from './path';
import type { IStage } from './stage';
import type { IGlyphGraphicAttribute } from './graphic/glyph';
import type { IContainPointMode } from '../common/enums';
import type { IFace3d } from './graphic/face3d';
import type { IPickerService } from './picker';
import type { ISymbolClass } from './graphic/symbol';
import type { IContext2d } from './context';
type IStrokeSeg = {
    start: number;
    end: number;
    length: number;
};
export type GraphicType = 'area' | 'circle' | 'ellipse' | 'line' | 'rect' | 'rect3d' | 'path' | 'richtext' | 'text' | 'arc' | 'arc3d' | 'image' | 'symbol' | 'group' | 'shadowroot' | 'polygon' | 'pyramid3d' | 'glyph' | string;
export type Cursor = 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'grab' | 'grabbing' | 'all-scroll' | 'col-resize' | 'row-resize' | 'n-resize' | 'e-resize' | 's-resize' | 'w-resize' | 'ne-resize' | 'nw-resize' | 'se-resize' | 'sw-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'zoom-in' | 'zoom-out';
export type ITransform = {
    x: number;
    y: number;
    z: number;
    dx: number;
    dy: number;
    dz: number;
    scrollX: number;
    scrollY: number;
    scaleX: number;
    scaleY: number;
    scaleZ: number;
    angle: number;
    alpha: number;
    beta: number;
    scaleCenter: [number | string, number | string];
    anchor: [number | string, number | string];
    anchor3d: [number | string, number | string, number] | [number | string, number | string];
    postMatrix: IMatrix;
};
export type IFillType = boolean | string | IColor;
export type IFillStyle = {
    fillOpacity: number;
    shadowBlur: number;
    shadowColor: string;
    shadowOffsetX: number;
    shadowOffsetY: number;
    fill: IFillType;
};
export type ILayout = {
    alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center';
};
export type IBorderStyle = Omit<IStrokeStyle, 'outerBorder' | 'innerBorder'> & {
    distance: number | string;
    visible?: boolean;
};
export type IStrokeType = boolean | string | IColor | null;
export type IStrokeStyle = {
    outerBorder: Partial<IBorderStyle>;
    innerBorder: Partial<IBorderStyle>;
    strokeOpacity: number;
    lineDash: number[];
    lineDashOffset: number;
    lineWidth: number;
    lineCap: CanvasLineCap;
    lineJoin: CanvasLineJoin;
    miterLimit: number;
    strokeBoundsBuffer: number;
    stroke: IStrokeType[] | IStrokeType;
};
type TextureType = 'circle' | 'diamond' | 'rect' | 'vertical-line' | 'horizontal-line' | 'bias-lr' | 'bias-rl' | 'grid' | 'wave';
type ITextureSource = string | HTMLImageElement | HTMLCanvasElement;
export type IConnectedStyle = {
    connectedType: 'connect' | 'none';
    connectedStyle: {
        stroke: IStrokeStyle['stroke'];
        strokeOpacity: IStrokeStyle['strokeOpacity'];
        lineDash: IStrokeStyle['lineDash'];
        lineDashOffset: IStrokeStyle['lineDashOffset'];
        lineCap: IStrokeStyle['lineCap'];
        lineJoin: IStrokeStyle['lineJoin'];
        lineWidth: IStrokeStyle['lineWidth'];
        fill: IFillStyle['fill'];
        fillOpacity: IFillStyle['fillOpacity'];
    };
    connectedX: number;
    connectedY: number;
};
export type IBackgroundConfig = {
    stroke?: string | boolean;
    fill?: string | boolean;
    lineWidth?: number;
    cornerRadius?: number;
    expandX?: number;
    expandY?: number;
};
export type BackgroundSizing = 'cover' | 'contain' | 'fill' | 'auto';
export type BackgroundRepeatMode = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
export type BackgroundSizingShorthand = 'no-repeat-cover' | 'no-repeat-contain' | 'no-repeat-fill' | 'no-repeat-auto';
export type BackgroundMode = BackgroundRepeatMode | BackgroundSizingShorthand;
export type BackgroundPositionHorizontalKeyword = 'left' | 'center' | 'right';
export type BackgroundPositionVerticalKeyword = 'top' | 'center' | 'bottom';
export type BackgroundPositionKeyword = BackgroundPositionHorizontalKeyword | BackgroundPositionVerticalKeyword;
export type BackgroundPositionPercent = `${number}%`;
export type BackgroundPositionValue = number | BackgroundPositionKeyword | BackgroundPositionPercent;
export type BackgroundPositionPreset = 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
export type BackgroundPosition = BackgroundPositionKeyword | BackgroundPositionPreset | [BackgroundPositionValue, BackgroundPositionValue];
export type IBackgroundType = string | HTMLImageElement | HTMLCanvasElement | IBackgroundConfig;
export interface SimpleDomStyleOptions {
    width: number;
    height: number;
    style?: string | Record<string, any> | ((pos: {
        top: number;
        left: number;
        width: number;
        height: number;
    }, graphic: IGraphic, wrapContainer: HTMLElement) => Record<string, any>);
}
export interface CommonDomOptions {
    id?: string;
    container: string | HTMLElement | null;
    visible?: boolean;
    pointerEvents?: boolean | string;
    penetrateEventList?: string[];
    anchorType?: 'position' | 'boundsLeftTop' | BoundsAnchorType;
}
export type IRoughStyle = {
    fillStyle: 'hachure' | 'solid' | 'zigzag' | 'cross-hatch' | 'dots' | 'sunburst' | 'dashed' | 'zigzag-line';
    roughness: number;
    bowing: number;
};
export type IGraphicStyle = ILayout & IFillStyle & IStrokeStyle & IPickStyle & {
    forceBoundsWidth: number | (() => number) | undefined;
    forceBoundsHeight: number | (() => number) | undefined;
    opacity: number;
    shadowGraphic?: IGraphic | undefined;
    backgroundMode: BackgroundMode;
    backgroundFit: boolean;
    backgroundKeepAspectRatio: boolean;
    backgroundScale: number;
    backgroundOffsetX: number;
    backgroundOffsetY: number;
    backgroundPosition: BackgroundPosition;
    backgroundClip: boolean;
    backgroundCornerRadius: number | number[];
    backgroundOpacity: number;
    autoAnimateTexture: boolean;
    textureRatio: number;
    textureOptions: {
        alignToGraphic?: boolean;
        alignOffsetX?: number;
        alignOffsetY?: number;
        radius?: number;
        dynamicTexture?: (ctx: IContext2d, row: number, column: number, rowCount: number, columnCount: number, ratio: number, graphic: IGraphic, width?: number, height?: number) => void;
        beforeDynamicTexture?: (ctx: IContext2d, row: number, column: number, rowCount: number, columnCount: number, ratio: number, graphic: IGraphic, width?: number, height?: number) => void;
        gridConfig?: {
            columns?: number;
            rows?: number;
            gutterColumn?: number;
            gutterRow?: number;
        };
        useNewCanvas?: boolean;
        [key: string]: any;
    };
    background: IBackgroundType | {
        background: IBackgroundType;
        dx?: number;
        dy?: number;
        width?: number;
        height?: number;
        x?: number;
        y?: number;
    } | null;
    texture: TextureType | ITextureSource;
    textureColor: string;
    textureSize: number;
    texturePadding: number;
    blur: number;
    cursor: Cursor | null;
    filter: string;
    renderStyle?: 'default' | 'rough' | any;
    roughStyle?: IRoughStyle | null;
    html: ({
        dom: string | HTMLElement;
    } & SimpleDomStyleOptions & CommonDomOptions) | null;
    react: ({
        element: any;
    } & SimpleDomStyleOptions & CommonDomOptions) | null;
    vue: ({
        element: any;
    } & SimpleDomStyleOptions & CommonDomOptions) | null;
};
export type IPickStyle = {
    pickStrokeBuffer: number;
};
export type IDebugType = {
    _debug_bounds: boolean | ((c: any, g: any) => void);
};
export type IGraphicAttribute = IDebugType & IGraphicStyle & ITransform & {
    strokeSeg: IStrokeSeg | null;
    boundsPadding: number | number[];
    pickMode: 'accurate' | 'imprecise' | 'custom';
    boundsMode: 'accurate' | 'imprecise' | 'empty';
    customPickShape: () => boolean | null;
    pickable: boolean;
    fillPickable: boolean;
    strokePickable: boolean;
    childrenPickable: boolean;
    visible: boolean;
    zIndex: number;
    layout: any;
    renderable: boolean;
    keepDirIn3d?: boolean;
    shadowRootIdx: number;
    shadowPickMode?: 'full' | 'graphic';
    globalZIndex: number;
    globalCompositeOperation: CanvasRenderingContext2D['globalCompositeOperation'] | '';
    overflow: 'scroll' | 'hidden' | 'scroll-x' | 'scroll-y';
    fillStrokeOrder: number;
    keepStrokeScale: boolean;
    clipConfig: {
        shape: string;
    } | null;
};
export interface IGraphicJson<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>> {
    attribute: Partial<T>;
    _uid: number;
    type: string;
    name: string;
    children: IGraphicJson<T>[];
}
export type ISetAttributeContext = {
    type?: number;
    animationState?: {
        step?: IStep;
        isFirstFrameOfStep?: boolean;
        ratio?: number;
        end?: boolean;
    };
    skipUpdateCallback?: boolean;
};
export type IGraphicAnimateParams = {
    slience?: boolean;
    id?: number | string;
    timeline?: ITimeline;
    onStart?: () => void;
    onFrame?: (step: IStep, ratio: number) => void;
    onEnd?: () => void;
    onRemove?: () => void;
    interpolate?: (key: string, ratio: number, from: any, to: any, nextAttributes: any) => boolean;
};
export interface IGraphic<T extends Partial<IGraphicAttribute> = Partial<IGraphicAttribute>> extends INode, IAnimateTarget {
    type?: GraphicType;
    numberType?: number;
    stage?: IStage;
    layer?: ILayer;
    shadowRoot?: IShadowRoot;
    glyphHost?: IGraphic<IGlyphGraphicAttribute>;
    backgroundImg?: boolean;
    attachedThemeGraphic?: IGraphic<any>;
    context?: Record<string, any>;
    bindDom?: Map<string | HTMLElement, {
        container: HTMLElement | string;
        dom: HTMLElement | any;
        wrapGroup: HTMLDivElement | any;
        root?: any;
    }>;
    valid: boolean;
    parent: IGroup | null;
    isContainer?: boolean;
    in3dMode?: boolean;
    widthWithoutTransform?: number;
    heightWithoutTransform?: number;
    stamp?: number;
    animationBackUps?: {
        from: Record<string, any>;
        to: Record<string, any>;
    };
    attribute: Partial<T>;
    pathProxy?: ICustomPath2D | ((attrs: T) => ICustomPath2D);
    incremental?: number;
    incrementalAt?: number;
    states?: Record<string, Partial<T>>;
    normalAttrs?: Partial<T>;
    stateProxy?: (stateName: string, targetStates?: string[]) => Partial<T>;
    findFace?: () => IFace3d;
    toggleState: (stateName: string, hasAnimation?: boolean) => void;
    removeState: (stateName: string | string[], hasAnimation?: boolean) => void;
    clearStates: (hasAnimation?: boolean) => void;
    useStates: (states: string[], hasAnimation?: boolean) => void;
    addState: (stateName: string, keepCurrentStates?: boolean, hasAnimation?: boolean) => void;
    hasState: (stateName?: string) => boolean;
    getState: (stateName: string) => Partial<T>;
    onBeforeAttributeUpdate?: (val: any, attributes: Partial<T>, key: null | string | string[], context?: ISetAttributeContext) => T | undefined;
    applyStateAttrs: (attrs: Partial<T>, stateNames: string[], hasAnimation?: boolean, isClear?: boolean) => void;
    updateNormalAttrs: (stateAttrs: Partial<T>) => void;
    readonly AABBBounds: IAABBBounds;
    readonly OBBBounds: IOBBBounds;
    readonly globalAABBBounds: IAABBBounds;
    readonly transMatrix: IMatrix;
    readonly globalTransMatrix: IMatrix;
    getOffsetXY: (attr?: ITransform) => IPoint;
    containsPoint: (x: number, y: number, mode?: IContainPointMode, picker?: IPickerService) => boolean;
    setMode: (mode: '3d' | '2d') => void;
    isValid: () => boolean;
    getClipPath: () => ISymbolClass | null;
    translate: (x: number, y: number) => this;
    translateTo: (x: number, y: number) => this;
    scale: (scaleX: number, scaleY: number, scaleCenter?: IPointLike) => this;
    scaleTo: (scaleX: number, scaleY: number) => this;
    rotate: (angle: number, rotateCenter?: IPointLike) => this;
    rotateTo: (angle: number) => this;
    skewTo: (b: number, c: number) => this;
    addUpdateBoundTag: () => void;
    addUpdateShapeAndBoundsTag: () => void;
    addUpdateLayoutTag: () => void;
    update: (d?: {
        bounds: boolean;
        trans: boolean;
    }) => void;
    animate?: (params?: IGraphicAnimateParams) => IAnimate;
    name?: string;
    shouldUpdateShape: () => boolean;
    clearUpdateShapeTag: () => void;
    setAttributes: (params: Partial<T>, forceUpdateTag?: boolean, context?: ISetAttributeContext) => void;
    initAttributes: (params: Partial<T>) => void;
    setAttribute: (key: string, value: any, forceUpdateTag?: boolean, context?: ISetAttributeContext) => void;
    setStage: (stage?: IStage, layer?: ILayer) => void;
    onSetStage: (cb: (g: IGraphic, stage: IStage) => void) => void;
    shouldUpdateAABBBounds: () => boolean;
    shouldSelfChangeUpdateAABBBounds: () => boolean;
    shouldUpdateGlobalMatrix: () => boolean;
    addUpdatePositionTag: () => void;
    addUpdateGlobalPositionTag: () => void;
    attachShadow: () => IShadowRoot;
    detachShadow: () => void;
    toJson: () => IGraphicJson;
    createPathProxy: (path?: string) => void;
    toCustomPath?: () => ICustomPath2D;
    resources?: Map<string | HTMLImageElement | HTMLCanvasElement | IBackgroundConfig, {
        state: 'init' | 'loading' | 'success' | 'fail';
        data?: HTMLImageElement | HTMLCanvasElement;
    }>;
    imageLoadSuccess: (url: string, data: HTMLImageElement) => void;
    imageLoadFail: (url: string) => void;
    clone: () => IGraphic;
    stopAnimates: (stopChildren?: boolean) => void;
    getNoWorkAnimateAttr: () => Record<string, number>;
    getGraphicTheme: () => T;
    getAttributes: (final?: boolean) => Partial<T>;
    pauseAnimation?: (deep?: boolean) => void;
    resumeAnimation?: (deep?: boolean) => void;
    stopAnimation?: (deep?: boolean) => void;
    reApplyAnimationState?: (state: string, deep?: boolean) => this;
}
export interface IRoot extends IGraphic {
    pick: (x: number, y: number) => IGraphic;
}
export type IAnimateConfig = {
    duration?: number;
    easing?: EasingType;
};
export type GraphicReleaseStatus = 'released' | 'willRelease';
export {};