@antv/g

@antv/g

Version 5.1.1
Published 7 hours ago
2.11 MB
11 dependencies
MIT license

Install

npm i @antv/g

yarn add @antv/g

pnpm add @antv/g

Overview

A core module including ECS and DI container.

Index

Variables

variable BUILT_IN_PROPERTIES

const BUILT_IN_PROPERTIES: PropertyMetadata[];

Blink used them in code generation(css_properties.json5)

variable CameraEvent

const CameraEvent: { UPDATED: string };

variable CanvasConfig

const CanvasConfig: Syringe.DefinedToken;

variable ContextNode

const ContextNode: Syringe.DefinedToken;

variable ContextService

const ContextService: Syringe.DefinedToken;

variable CSS

const CSS: {
    number: (n: number) => CSSUnitValue;
    percent: (n: number) => CSSUnitValue;
    px: (n: number) => CSSUnitValue;
    em: (n: number) => CSSUnitValue;
    deg: (n: number) => CSSUnitValue;
    grad: (n: number) => CSSUnitValue;
    rad: (n: number) => CSSUnitValue;
    turn: (n: number) => CSSUnitValue;
    s: (n: number) => CSSUnitValue;
    ms: (n: number) => CSSUnitValue;
    registerProperty: (definition: PropertyDefinition) => void;
    registerLayout: (name: string, clazz: LayoutDefinitionCtor) => void;
};

holds useful CSS-related methods.
See Also
- https://developer.mozilla.org/en-US/docs/Web/API/CSS
  * CSS Typed OM
- https://developer.mozilla.org/en-US/docs/Web/API/CSS/factory_functions * register property
- https://developer.mozilla.org/en-US/docs/Web/API/CSS/RegisterProperty * CSS Layout API

variable DefaultCamera

const DefaultCamera: Syringe.DefinedToken;

variable DELEGATION_SPLITTER

const DELEGATION_SPLITTER: string;

variable FragmentResultFactory

const FragmentResultFactory: Syringe.DefinedToken;

variable FragmentResultOptions

const FragmentResultOptions: Syringe.DefinedToken;

The web developer defined layout method can return either a FragmentResultOptions or a FragmentResult.

variable GeometryAABBUpdater

const GeometryAABBUpdater: Syringe.DefinedToken;

variable GeometryUpdaterFactory

const GeometryUpdaterFactory: Syringe.DefinedToken;

variable isBrowser

const isBrowser: boolean;

variable LayoutChildrenFactory

const LayoutChildrenFactory: Syringe.DefinedToken;

variable LayoutChildrenOptions

const LayoutChildrenOptions: Syringe.DefinedToken;

variable LayoutContextFactory

const LayoutContextFactory: Syringe.DefinedToken;

variable LayoutContextOptions

const LayoutContextOptions: Syringe.DefinedToken;

variable LayoutEdgesFactory

const LayoutEdgesFactory: Syringe.DefinedToken;

variable LayoutEdgesOptions

const LayoutEdgesOptions: Syringe.DefinedToken;

variable layoutEngine

const layoutEngine: LayoutEngine;

variable LayoutFragmentFactory

const LayoutFragmentFactory: Syringe.DefinedToken;

variable LayoutFragmentOptions

const LayoutFragmentOptions: Syringe.DefinedToken;

variable MOUSE_POINTER_ID

const MOUSE_POINTER_ID: number;

variable ObjectTyped

const ObjectTyped: {
    keys: <T extends {}>(yourObject: T) => (keyof T)[];
    values: <T_1 extends {}>(yourObject: T_1) => T_1[keyof T_1][];
    entries: <T_2 extends {}>(yourObject: T_2) => [keyof T_2, T_2[keyof T_2]][];
};

Nicely typed aliases for some Object Methods - PSA: Don't mutate yourObjects - Numerical keys are BAD, resolve that issue upstream - Discussion: https://stackoverflow.com/a/65117465/565877

variable Odeg

const Odeg: CSSUnitValue;

variable Opx

const Opx: CSSUnitValue;

variable parseLength

const parseLength: CSSValueParser;

See Also
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/length length with only absolute unit, eg. 1px

variable PropertySyntax

const PropertySyntax: {
    COLOR: string;
    PAINT: string;
    NUMBER: string;
    LENGTH: string;
    PERCENTAGE: string;
    LENGTH_PERCENTAGE: string;
    LIST_OF_POINTS: string;
};

variable RenderingContext

const RenderingContext: Syringe.DefinedToken;

variable RenderingPluginContribution

const RenderingPluginContribution: Syringe.DefinedToken;

variable SceneGraphSelector

const SceneGraphSelector: Syringe.DefinedToken;

variable SceneGraphSelectorFactory

const SceneGraphSelectorFactory: Syringe.DefinedToken;

variable SceneGraphService

const SceneGraphService: Syringe.DefinedToken;

variable StyleValueRegistry

const StyleValueRegistry: Syringe.DefinedToken;

variable TOUCH_TO_POINTER

const TOUCH_TO_POINTER: Record<string, string>;

Functions

function baseTypeToString

baseTypeToString: (
    baseType: BaseType
) =>
    | ''
    | 'percent'
    | 'length'
    | 'angle'
    | 'time'
    | 'frequency'
    | 'resolution'
    | 'flex';

function camelCase

camelCase: (str?: string) => string;

function clamp

clamp: (number: number, boundOne: number, boundTwo: number) => number;

function clampedMergeNumbers

clampedMergeNumbers: (
    min: number,
    max: number
) => (
    left: CSSUnitValue,
    right: CSSUnitValue
) => [number, number, (i: number) => string];

function cleanExistedCanvas

cleanExistedCanvas: (container: string | HTMLElement, canvas: Canvas) => void;

destroy existed canvas with the same id

function clonePath

clonePath: (pathArray: PathCommand[]) => PathCommand[];

function compareAnimations

compareAnimations: (
    leftAnimation: Animation,
    rightAnimation: Animation
) => number;

function convertAngleUnit

convertAngleUnit: (value: CSSUnitValue) => number;

function convertEffectInput

convertEffectInput: (
    keyframes: ComputedKeyframe[],
    timing: AnimationEffectTiming,
    target: IElement | null
) => (target: IElement, fraction: number) => void;

function convertPercentUnit

convertPercentUnit: (
    valueWithUnit: CSSUnitValue,
    vec3Index: number,
    target: DisplayObject
) => number;

function convertToPath

convertToPath: (
    object: Circle | Ellipse | Rect | Line | Polyline | Polygon | Path,
    applyLocalTransform?: boolean
) => string;

convert object to path, should account for: * transform & origin * anchor * lineWidth

function createVec3

createVec3: (x: number | vec2 | vec3 | vec4, y?: number, z?: number) => vec3;

function DCHECK

DCHECK: (bool: boolean) => void;

function DCHECK_EQ

DCHECK_EQ: (a: any, b: any) => void;

function DCHECK_NE

DCHECK_NE: (a: any, b: any) => void;

function decompose

decompose: (mat: mat3) => number[];

function deg2rad

deg2rad: (deg: number) => number;

function deg2turn

deg2turn: (deg: number) => number;

function dirtifyToRoot

dirtifyToRoot: (element: INode, affectChildren?: boolean) => void;

function equalizeSegments

equalizeSegments: (
    path1: PathCommand[],
    path2: PathCommand[],
    TL?: number
) => PathCommand[][];

function equalSet

equalSet: (as: Set<any>, bs: Set<any>) => boolean;

function formatAttribute

formatAttribute: (name: string, value: any) => [string, any];

function fromRotationTranslationScale

fromRotationTranslationScale: (
    rotation: number,
    x: number,
    y: number,
    scaleX: number,
    scaleY: number
) => mat3;

function getAngle

getAngle: (angle?: number) => number;

function getDrawDirection

getDrawDirection: (pathArray: PathCommand[]) => boolean;

function getEuler

getEuler: (out: vec3, quat: quat | mat4) => vec3;

See Also
- https://github.com/toji/gl-matrix/issues/329
- https://doc.babylonjs.com/divingDeeper/mesh/transforms/center_origin/rotation_conventions

function getPathArea

getPathArea: (pathArray: PathCommand[]) => number;

function getRotatedCurve

getRotatedCurve: (
    a: PathCommand[],
    b: PathCommand[]
) => (
    | string[]
    | ['a' | 'A', number, number, number, number, number, number, number]
    | ['C' | 'c', number, number, number, number, number, number]
    | ['o' | 'O', number, number]
    | ['h' | 'H', number]
    | ['l' | 'L', number, number]
    | ['m' | 'M', number, number]
    | ['r' | 'R', number, number, number, number]
    | ['q' | 'Q', number, number, number, number]
    | ['s' | 'S', number, number, number, number, number, number, number]
    | ['t' | 'T', number, number]
    | ['v' | 'V', number]
    | ['U' | 'u', number, number, number]
)[];

function getRotationInRadians

getRotationInRadians: (mat: mat3) => number;

function getScaling

getScaling: (out: vec2, mat: mat3) => vec2;

decompose mat3 extract translation/scaling/rotation(in radians)
gl-matrix didn't provide them for mat3, but we can
See Also
- https://math.stackexchange.com/a/1463487
- https://math.stackexchange.com/a/417813

function getTranslation

getTranslation: (out: vec2, mat: mat3) => vec2;

function grad2deg

grad2deg: (grads: number) => number;

function isBoolean

isBoolean: (value: any) => value is boolean;

function isComparison

isComparison: (op: CSSMathOperator) => boolean;

function isFunction

isFunction: (value: any) => value is Function;

function isNil

isNil: (a: any) => boolean;

function isNumber

isNumber: (value: any) => value is number;

function isObject

isObject: (value: any) => value is object;

function isString

isString: (str: any) => str is string;

function isUndefined

isUndefined: (a: any) => boolean;

function makePerspective

makePerspective: (
    out: mat4,
    left: number,
    right: number,
    top: number,
    bottom: number,
    near: number,
    far: number
) => mat4;

function makeQuerablePromise

makeQuerablePromise: <T>(promise: Promise<T>) => PromiseStatus<T>;

This function allow you to modify a JS Promise by adding some status properties. Based on: http://stackoverflow.com/questions/21485545/is-there-a-way-to-tell-if-an-es6-promise-is-fulfilled-rejected-resolved But modified according to the specs of promises : https://promisesaplus.com/

function makeTiming

makeTiming: (
    timingInput: KeyframeEffectOptions,
    forGroup: boolean
) => AnimationEffectTiming;

function mergeColors

mergeColors: (
    left: CSSRGB | CSSGradientValue,
    right: CSSRGB | CSSGradientValue
) => [number[], number[], (color: number[]) => string];

function mergeDimensionList

mergeDimensionList: (
    left: CSSUnitValue[],
    right: CSSUnitValue[],
    target: IElement | null
) => [number[], number[], (list: number[]) => string];

function mergeDimensions

mergeDimensions: (
    left: CSSUnitValue,
    right: CSSUnitValue,
    target: IElement,
    nonNegative?: boolean,
    index?: number
) => [number, number, (value: number) => string];

merge CSSUnitValue
Example 1
10px + 20px = 30px 10deg + 10rad

function mergeNumberLists

mergeNumberLists: (
    left: CSSUnitValue[],
    right: CSSUnitValue[]
) => [number[], number[], (numberList: number[]) => number[]];

function mergeNumbers

mergeNumbers: (
    left: CSSUnitValue,
    right: CSSUnitValue
) => [number, number, (n: number) => string];

function mergePaths

mergePaths: (
    left: ParsedPathStyleProps['path'],
    right: ParsedPathStyleProps['path'],
    object: IElement
) => [PathCommand[], PathCommand[], (b: PathCommand[]) => PathCommand[]];

function mergeTransforms

mergeTransforms: (
    left: ParsedTransform[],
    right: ParsedTransform[],
    target: DisplayObject | null
) => [number[][], number[][], (d: number[][]) => string];

function normalizeKeyframes

normalizeKeyframes: (
    effectInput: Keyframe[] | PropertyIndexedKeyframes | null,
    timing?: AnimationEffectTiming
) => ComputedKeyframe[];

function normalizeTimingInput

normalizeTimingInput: (
    timingInput: KeyframeEffectOptions | number | undefined,
    forGroup: boolean
) => AnimationEffectTiming;

function numberToString

numberToString: (x: number) => string;

function numericTimingToObject

numericTimingToObject: (
    timingInput: KeyframeEffectOptions | number
) => KeyframeEffectOptions;

function parseAngle

parseAngle: (css: string) => CSSUnitValue;

function parseColor

parseColor: (colorStr: string) => CSSRGB | CSSGradientValue;

See Also
- https://github.com/WebKit/WebKit/blob/main/Source/WebCore/css/parser/CSSParser.cpp#L97

function parseDimension

parseDimension: (
    unitRegExp: RegExp,
    string: string
) => CSSStyleValue | undefined;

function parseDimensionArray

parseDimensionArray: (string: string | (string | number)[]) => CSSUnitValue[];

function parseFilter

parseFilter: (filterStr?: string) => ParsedFilterStyleProperty[];

function parseLengthOrPercentage

parseLengthOrPercentage: (css: string) => CSSUnitValue;

length with absolute or relative unit, eg. 1px, 0.7em, 50%, calc(100% - 200px);
See Also
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/length-percentage

function parseNumber

parseNumber: (string: string | number) => CSSUnitValue;

parse string or number to CSSUnitValue(numeric)
eg. * 0 -> CSSUnitValue(0) * '2' -> CSSUnitValue(2)

function parseNumberList

parseNumberList: (string: string | number[]) => CSSUnitValue[];

separate string to array eg. * [0.5, 0.5] -> [CSSUnitValue, CSSUnitValue]

function parseParam

parseParam: (css: string) => CSSUnitValue;

function parsePath

parsePath: (path: string, object: DisplayObject) => ParsedPathStyleProps['path'];

function parsePoints

parsePoints: (
    pointsOrStr: string | [number, number][],
    object: DisplayObject
) => {
    points: [number, number][];
    totalLength: number;
    segments: [number, number][];
};

Example 1
points="100,10 250,150 200,110"
See Also
- https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/points

function parserPercentage

parserPercentage: (css: string) => CSSUnitValue;

See Also
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage

function parseTransform

parseTransform: (string: string) => ParsedTransform[];

none scale(1) scale(1, 2) scaleX(1)

function parseTransformOrigin

parseTransformOrigin: (value: string | number[]) => [CSSUnitValue, CSSUnitValue];

See Also
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin eg. 'center' 'top left' '50px 50px'

function rad2deg

rad2deg: (rad: number) => number;

function reverseCurve

reverseCurve: (pathArray: PathCommand[]) => PathCommand[];

function setDOMSize

setDOMSize: (
    $el: HTMLElement | OffscreenCanvas,
    width: number,
    height: number
) => void;

function sortByZIndex

sortByZIndex: (o1: IElement, o2: IElement) => number;

function toFontString

toFontString: (attributes: Partial<ParsedTextStyleProps>) => string;

function turn2deg

turn2deg: (turn: number) => number;

function typeCheck

typeCheck: (
    values: CSSNumericValue[],
    op: Function,
    error: boolean
) => CSSNumericValueType;

function unitTypeToBaseType

unitTypeToBaseType: (
    unit: UnitType
) =>
    | BaseType.kLength
    | BaseType.kAngle
    | BaseType.kTime
    | BaseType.kFrequency
    | BaseType.kResolution
    | BaseType.kFlex
    | BaseType.kPercent;

Classes

class AABB

class AABB {}

Axis-Aligned Bounding Box 为了便于后续 Frustum Culling，通过查找表定义 p-vertex 和 n-vertex
See Also
- https://github.com/antvis/GWebGPUEngine/issues/3

constructor

constructor(center?: vec3, halfExtents?: vec3);

property center

center: vec3;

property halfExtents

halfExtents: vec3;

property max

max: vec3;

property min

min: vec3;

method add

add: (aabb: AABB) => void;

method containsPoint

containsPoint: (point: vec3) => boolean;

method getMax

getMax: () => vec3;

method getMin

getMin: () => vec3;

method getNegativeFarPoint

getNegativeFarPoint: (plane: Plane) => vec3;

get n-vertex
Parameter plane
plane of CullingVolume

method getPositiveFarPoint

getPositiveFarPoint: (plane: Plane) => vec3;

get p-vertex
Parameter plane
plane of CullingVolume

method intersection

intersection: (aabb: AABB) => AABB | null;

method intersects

intersects: (aabb: AABB) => boolean;

method isEmpty

static isEmpty: (aabb: AABB) => boolean;

method setFromTransformedAABB

setFromTransformedAABB: (aabb: AABB, m: mat4) => void;

method setMinMax

setMinMax: (min: vec3, max: vec3) => void;

method update

update: (center?: vec3, halfExtents?: vec3) => void;

class AbstractLayoutDefinition

abstract class AbstractLayoutDefinition {}

property childrenInputProperties

static childrenInputProperties: string[];

property inputProperties

static inputProperties: string[];

property layoutOptions

static layoutOptions: LayoutOptions;

method intrinsicSizes

abstract intrinsicSizes: (
    children: LayoutChildren[],
    edges: LayoutEdges,
    styleMap: Map<string, any>
) => Promise<IntrinsicSizes>;

method layout

abstract layout: (
    children: LayoutChildren[],
    edges: LayoutEdges,
    constraints: LayoutConstraints,
    styleMap: Map<string, any>
) => Promise<FragmentResultOptions | FragmentResult>;

class AbstractRenderer

class AbstractRenderer implements IRenderer {}

constructor

constructor(config?: Partial<RendererConfig>);

method getConfig

getConfig: () => RendererConfig;

method getPlugin

getPlugin: (name: string) => RendererPlugin;

method getPlugins

getPlugins: () => RendererPlugin[];

method registerPlugin

registerPlugin: (plugin: RendererPlugin) => void;

method setConfig

setConfig: (config: Partial<RendererConfig>) => void;

method unregisterPlugin

unregisterPlugin: (plugin: RendererPlugin) => void;

class Animation

class Animation {}

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/Animation/Animation

constructor

constructor(effect: KeyframeEffect, timeline: AnimationTimeline);

property currentTime

currentTime: number;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/Animation/currentTime

property effect

effect: KeyframeEffect;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/Animation/effect

property finished

readonly finished: Promise<any>;

Example 1
Promise.all( elem.getAnimations().map( function(animation) { return animation.finished } ) ).then( function() { return elem.remove(); } );
See Also
- https://developer.mozilla.org/en-US/docs/Web/API/Animation/finished

property id

id: string;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/Animation/id

property oncancel

oncancel: (this: Animation, ev: AnimationPlaybackEvent) => any;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/Animation/oncancel

property onfinish

onfinish: (this: Animation, ev: AnimationPlaybackEvent) => any;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/Animation/onfinish

property onframe

onframe: (this: Animation, ev: AnimationPlaybackEvent) => any;

get called after each frame when running

property onremove

onremove: (this: Animation, ev: Event) => any;

property pending

readonly pending: boolean;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/Animation/pending

property playbackRate

playbackRate: number;

property playState

readonly playState: AnimationPlayState;

property ready

readonly ready: Promise<any>;

Example 1
animation.pause(); animation.ready.then(function() { // Displays 'running' alert(animation.playState); }); animation.play();
See Also
- https://developer.mozilla.org/en-US/docs/Web/API/Animation/ready

property startTime

startTime: number;

property timeline

timeline: AnimationTimeline;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/Animation/timeline

property totalDuration

readonly totalDuration: number;

method addEventListener

addEventListener: {
    <K extends keyof AnimationEventMap>(
        type: K,
        listener: (this: Animation, ev: AnimationEventMap[K]) => any,
        options?: boolean | AddEventListenerOptions
    ): void;
    (
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | AddEventListenerOptions
    ): void;
};

method cancel

cancel: () => void;

method commitStyles

commitStyles: () => void;

method dispatchEvent

dispatchEvent: (event: Event) => boolean;

method finish

finish: () => void;

method markTarget

markTarget: () => void;

method pause

pause: () => void;

method persist

persist: () => void;

method play

play: () => void;

method removeEventListener

removeEventListener: {
    <K extends keyof AnimationEventMap>(
        type: K,
        listener: (this: Animation, ev: AnimationEventMap[K]) => any,
        options?: boolean | EventListenerOptions
    ): void;
    (
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | EventListenerOptions
    ): void;
};

method reverse

reverse: () => void;

method targetAnimations

targetAnimations: () => Animation[];

method tick

tick: (timelineTime: number, isAnimationFrame: boolean) => void;

method unmarkTarget

unmarkTarget: () => void;

method updatePlaybackRate

updatePlaybackRate: (playbackRate: number) => void;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/Animation/updatePlaybackRate

method updatePromises

updatePromises: () => Promise<any>;

state machine, resolve/reject ready/finished Promise according to current state

class AnimationEffectTiming

class AnimationEffectTiming implements EffectTiming {}

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming

property activeDuration

activeDuration: number;

ComputedEffectTiming
See Also
- https://developer.mozilla.org/en-US/docs/Web/API/AnimationEffect/getComputedTiming

property composite

composite: string;

property currentIteration

currentIteration: number;

property delay

delay: number;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/delay

property direction

direction: PlaybackDirection;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/direction

property duration

duration: number | 'auto';

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/duration

property easing

easing: string;

property easingFunction

easingFunction: (x: number) => number;

property effect

effect: KeyframeEffect;

ref to effect

property endDelay

endDelay: number;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/endDelay

property endTime

endTime: number;

property fill

fill: FillMode;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/fill

property iterations

iterations: number;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/iterations

property iterationStart

iterationStart: number;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/iterationStart

property playbackRate

playbackRate: number;

Deprecated

property progress

progress: number;

class AnimationEvent

class AnimationEvent extends FederatedEvent implements AnimationPlaybackEvent {}

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/AnimationPlaybackEvent

constructor

constructor(
    manager: EventService,
    target: Animation,
    currentTime: number,
    timelineTime: number
);

property currentTime

currentTime: number;

property timelineTime

timelineTime: number;

class AnimationTimeline

class AnimationTimeline implements AnimationTimeline {}

See Also
- https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/web-animations-js/index.d.ts

constructor

constructor(document: Document);

property animations

animations: Animation[];

all active animations

property animationsWithPromises

animationsWithPromises: Animation[];

property currentTime

currentTime: number;

method applyDirtiedAnimation

applyDirtiedAnimation: (animation: Animation) => void;

method applyPendingEffects

applyPendingEffects: () => void;

method destroy

destroy: () => void;

method getAnimations

getAnimations: () => Animation[];

method isTicking

isTicking: () => boolean;

method play

play: (effect: KeyframeEffect) => Animation;

method restart

restart: () => boolean;

method tick

tick: (
    t: number,
    isAnimationFrame: boolean,
    updatingAnimations: Animation[]
) => Animation[][];

class BoundingSphere

class BoundingSphere {}

constructor

constructor(center?: vec3, radius?: number);

property center

center: vec3;

property radius

radius: number;

method containsPoint

containsPoint: (point: vec3) => boolean;

method intersects

intersects: (sphere: BoundingSphere) => boolean;

class Camera

class Camera extends EventEmitter {}

参考「WebGL Insights - 23.Designing Cameras for WebGL Applications」，基于 Responsible Camera 思路设计
See Also
- https://github.com/d13g0/nucleo.js/blob/master/source/camera/Camera.js
  保存相机参数，定义相机动作： 1. dolly 沿 n 轴移动 2. pan 沿 u v 轴移动 3. rotate 以方位角旋转 4. 移动到 Landmark，具有平滑的动画效果，其间禁止其他用户交互

constructor

constructor(type?: CameraType, trackingMode?: CameraTrackingMode);

property canvas

canvas: Canvas;

property matrix

matrix: mat4;

相机矩阵

method clearJitterProjectionMatrix

clearJitterProjectionMatrix: () => void;

method clearViewOffset

clearViewOffset: () => this;

method createLandmark

createLandmark: (
    name: string,
    params?: Partial<{
        position: vec3 | vec2;
        focalPoint: vec3 | vec2;
        zoom: number;
        roll: number;
    }>
) => Landmark;

method dolly

dolly: (value: number) => this;

沿 n 轴移动，当距离视点远时移动速度较快，离视点越近速度越慢

method getAzimuth

getAzimuth: () => number;

method getDistance

getDistance: () => number;

method getDollyingStep

getDollyingStep: () => number;

method getElevation

getElevation: () => number;

method getFar

getFar: () => number;

method getFocalPoint

getFocalPoint: () => vec3;

method getFrustum

getFrustum: () => Frustum;

method getNear

getNear: () => number;

method getOrthoMatrix

getOrthoMatrix: () => mat4;

method getPerspective

getPerspective: () => mat4;

method getPerspectiveInverse

getPerspectiveInverse: () => mat4;

method getPosition

getPosition: () => vec3;

method getProjectionMode

getProjectionMode: () => CameraProjectionMode;

method getRoll

getRoll: () => number;

method getView

getView: () => {
    enabled: boolean;
    fullWidth: number;
    fullHeight: number;
    offsetX: number;
    offsetY: number;
    width: number;
    height: number;
};

method getViewTransform

getViewTransform: () => mat4;

计算 MV 矩阵，为相机矩阵的逆矩阵

method getWorldTransform

getWorldTransform: () => mat4;

method getZoom

getZoom: () => number;

method gotoLandmark

gotoLandmark: (
    name: string | Landmark,
    options?:
        | number
        | Partial<{
              easing: string;
              easingFunction: TypeEasingFunction;
              duration: number;
              onfinish: () => void;
          }>
) => void;

method isOrtho

isOrtho: () => boolean;

method jitterProjectionMatrix

jitterProjectionMatrix: (x: number, y: number) => void;

method pan

pan: (tx: number, ty: number) => this;

沿水平(right) & 垂直(up)平移相机

method rotate

rotate: (azimuth: number, elevation: number, roll: number) => this;

Changes the azimuth and elevation with respect to the current camera axes
Parameter azimuth
the relative azimuth
Parameter elevation
the relative elevation
Parameter roll
the relative roll

method setAspect

setAspect: (aspect: number) => this;

method setAzimuth

setAzimuth: (az: number) => this;

设置相机方位角，不同相机模式下需要重新计算相机位置或者是视点位置 the azimuth in degrees

method setDistance

setDistance: (d: number) => this;

Moves the camera towards/from the focal point.

method setElevation

setElevation: (el: number) => this;

设置相机方位角，不同相机模式下需要重新计算相机位置或者是视点位置

method setEnableUpdate

setEnableUpdate: (enabled: boolean) => void;

method setFar

setFar: (far: number) => this;

method setFocalPoint

setFocalPoint: (x: number | vec2 | vec3, y?: number, z?: number) => this;

Sets the focal point of this camera in world coordinates.
support scalars or vectors.
Example 1
setFocalPoint(1, 2, 3); setFocalPoint([1, 2, 3]);

method setFov

setFov: (fov: number) => this;

method setMatrix

setMatrix: (matrix: mat4) => this;

设置相机矩阵

method setMaxDistance

setMaxDistance: (d: number) => this;

method setMinDistance

setMinDistance: (d: number) => this;

method setNear

setNear: (near: number) => this;

method setOrthographic

setOrthographic: (
    l: number,
    r: number,
    t: number,
    b: number,
    near: number,
    far: number
) => this;

method setPerspective

setPerspective: (near: number, far: number, fov: number, aspect: number) => this;

method setPosition

setPosition: (x: number | vec2 | vec3, y?: number, z?: number) => this;

Move the camera in world coordinates. It will keep looking at the current focal point.
support scalars or vectors.
Example 1
setPosition(1, 2, 3); setPosition([1, 2, 3]);

method setProjectionMode

setProjectionMode: (projectionMode: CameraProjectionMode) => this;

method setRoll

setRoll: (angle: number) => this;

设置相机方位角，不同相机模式下需要重新计算相机位置或者是视点位置

method setTrackingMode

setTrackingMode: (trackingMode: CameraTrackingMode) => this;

method setType

setType: (type: CameraType, trackingMode?: CameraTrackingMode) => this;

method setViewOffset

setViewOffset: (
    fullWidth: number,
    fullHeight: number,
    x: number,
    y: number,
    width: number,
    height: number
) => this;

Sets an offset in a larger frustum, used in PixelPicking

method setWorldRotation

setWorldRotation: (flag: boolean) => this;

If flag is true, it reverses the azimuth and elevation angles. Subsequent calls to rotate, setAzimuth, setElevation, changeAzimuth or changeElevation will cause the inverted effect. setRoll or changeRoll is not affected by this method.
This inversion is useful when one wants to simulate that the world is moving, instead of the camera.
By default the camera angles are not reversed.
Parameter flag
the boolean flag to reverse the angles.

method setZoom

setZoom: (zoom: number) => this;

class Canvas

class Canvas extends EventTarget implements ICanvas {}

can be treated like Window in DOM provide some extra methods like window, such as: * window.requestAnimationFrame * window.devicePixelRatio
prototype chains: Canvas(Window) -> EventTarget

constructor

constructor(config: CanvasConfig);

property cancelAnimationFrame

cancelAnimationFrame: (handle: number) => void;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame

property container

container: any;

child container of current canvas, use hierarchy container

property customElements

customElements: CustomElementRegistry;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry

property devicePixelRatio

devicePixelRatio: number;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

property document

document: Document;

window.document

property Element

Element: typeof DisplayObject;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/Element

property isMouseEvent

isMouseEvent: (event: InteractivePointerEvent) => event is MouseEvent;

is this native event a MouseEvent?

property isTouchEvent

isTouchEvent: (event: InteractivePointerEvent) => event is TouchEvent;

is this native event a TouchEvent?

property ready

readonly ready: Promise<any>;

property requestAnimationFrame

requestAnimationFrame: (callback: FrameRequestCallback) => number;

See Also
- https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

property supportPointerEvent

supportPointerEvent: boolean;

whether the runtime supports PointerEvent? if not, the event system won't trigger pointer events like pointerdown

property supportTouchEvent

supportTouchEvent: boolean;

whether the runtime supports TouchEvent? if not, the event system won't trigger touch events like touchstart

method appendChild

appendChild: <T extends IChildNode>(child: T, index?: number) => T;

method canvas2Viewport

canvas2Viewport: (canvas: PointLike) => PointLike;

method changeSize

changeSize: (width: number, height: number) => void;

compatible with G 3.0
Deprecated
resize

method client2Viewport

client2Viewport: (client: PointLike) => PointLike;

method destroy

destroy: (destroyScenegraph?: boolean) => void;

method getCamera

getCamera: () => Camera;

get the camera of canvas

method getClientByPoint

getClientByPoint: (x: number, y: number) => PointLike;

Deprecated
viewport2Client

method getConfig

getConfig: () => Partial<CanvasConfig>;

method getContainer

getContainer: () => any;

method getContextService

getContextService: () => ContextService<unknown>;

method getEventService

getEventService: () => EventService;

method getPointByClient

getPointByClient: (clientX: number, clientY: number) => PointLike;

Deprecated
client2Viewport

method getRenderingContext

getRenderingContext: () => RenderingContext;

method getRenderingService

getRenderingService: () => RenderingService;

method getRoot

getRoot: () => import('.').Group;

get the root displayObject in scenegraph this.document.documentElement

method getStats

getStats: () => { total: number; rendered: number; renderedOnscreen: number };

method insertBefore

insertBefore: <T extends IChildNode, N extends IChildNode>(
    newChild: T,
    refChild: N | null
) => T;

method removeChild

removeChild: <T extends IChildNode>(child: T, destroy?: boolean) => T;

method removeChildren

removeChildren: (destroy?: boolean) => void;

method render

render: () => void;

method resize

resize: (width: number, height: number) => void;

method setCursor

setCursor: (cursor: Cursor) => void;

method setRenderer

setRenderer: (renderer: IRenderer) => void;

method viewport2Canvas

viewport2Canvas: (viewport: PointLike) => PointLike;

method viewport2Client

viewport2Client: (canvas: PointLike) => PointLike;

class Circle

class Circle extends DisplayObject<CircleStyleProps, ParsedCircleStyleProps> {}

constructor

constructor({ style, ...rest }?: DisplayObjectConfig<CircleStyleProps>);

class CircleUpdater

class CircleUpdater implements GeometryAABBUpdater<ParsedCircleStyleProps> {}

method update

update: (
    parsedStyle: ParsedCircleStyleProps,
    object: Circle
) => { width: number; height: number };

class CSSColorValue

abstract class CSSColorValue extends CSSStyleValue {}

CSSColorValue is the base class used for the various CSS color interfaces.
See Also
- https://drafts.css-houdini.org/css-typed-om-1/#colorvalue-objects

constructor

constructor(colorSpace: ColorSpace);

property colorSpace

colorSpace: ColorSpace;

method getType

getType: () => CSSStyleValueType;

method to

to: (colorSpace: ColorSpace) => CSSColorValue;

See Also
- https://drafts.css-houdini.org/css-typed-om-1/#dom-csscolorvalue-to

class CSSGradientValue

class CSSGradientValue extends CSSStyleValue {}

constructor

constructor(
    type: GradientPatternType,
    value: LinearGradient | RadialGradient | Pattern
);

property type

type: GradientPatternType;

property value

value: LinearGradient | RadialGradient | Pattern;

method buildCSSText

buildCSSText: (n: Nested, p: ParenLess, result: string) => string;

method clone

clone: () => CSSGradientValue;

method getType

getType: () => CSSStyleValueType;

class CSSKeywordValue

class CSSKeywordValue extends CSSStyleValue {}

CSSKeywordValue represents CSS Values that are specified as keywords eg. 'initial'
See Also
- https://developer.mozilla.org/en-US/docs/Web/API/CSSKeywordValue
- https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/core/css/cssom/css_keyword_value.idl

constructor

constructor(value: string);

property value

value: string;

method buildCSSText

buildCSSText: (n: Nested, p: ParenLess, result: string) => string;

method clone

clone: () => CSSKeywordValue;

method getType

getType: () => CSSStyleValueType;

class CSSMathInvert

class CSSMathInvert extends CSSMathValue {}

constructor

constructor(value: CSSNumericValue, type: CSSNumericValueType);

property operator

operator: string;

method buildCSSText

buildCSSText: (nested: Nested, paren_less: ParenLess, result: string) => string;

method clone

clone: () => CSSMathInvert;

method create

static create: (value: CSSNumericValue) => CSSMathInvert;

method equals

equals: (other: CSSNumericValue) => any;

method getType

getType: () => CSSStyleValueType;

method sumValue

sumValue: () => CSSNumericSumValue;

class CSSMathMax

class CSSMathMax extends CSSMathVariadic {}

property operator

operator: string;

method buildCSSText

buildCSSText: (nested: Nested, paren_less: ParenLess, result: string) => string;

method clone

clone: () => CSSMathMax;

method create

static create: (values: CSSNumericValue[]) => CSSMathMax;

method getType

getType: () => CSSStyleValueType;

method sumValue

sumValue: () => CSSNumericSumValue;

class CSSMathMin

class CSSMathMin extends CSSMathVariadic {}

property operator

operator: string;

method buildCSSText

buildCSSText: (nested: Nested, paren_less: ParenLess, result: string) => string;

method clone

clone: () => CSSMathMin;

method create

static create: (values: CSSNumericValue[]) => CSSMathMin;

method getType

getType: () => CSSStyleValueType;

method sumValue

sumValue: () => CSSNumericSumValue;

class CSSMathNegate

class CSSMathNegate extends CSSMathValue {}

constructor

constructor(value: CSSNumericValue, type: CSSNumericValueType);

property operator

operator: string;

property value

value: CSSNumericValue;

method buildCSSText

buildCSSText: (nested: Nested, paren_less: ParenLess, result: string) => string;

method clone

clone: () => CSSMathNegate;

method create

static create: (value: CSSNumericValue) => CSSMathNegate;

method equals

equals: (other: CSSNumericValue) => any;

method getType

getType: () => CSSStyleValueType;

method sumValue

sumValue: () => CSSNumericSumValue;

class CSSMathProduct

class CSSMathProduct extends CSSMathVariadic {}

Represents the product of one or more CSSNumericValues.
See Also
- https://drafts.css-houdini.org/css-typed-om/#cssmathproduct

property operator

operator: string;

method buildCSSText

buildCSSText: (nested: Nested, paren_less: ParenLess, result: string) => string;

method clone

clone: () => CSSMathProduct;

method create

static create: (values: CSSNumericValue[]) => CSSMathProduct;

method getType

getType: () => CSSStyleValueType;

method multiplyUnitMaps

static multiplyUnitMaps: (a: UnitMap, b: UnitMap) => UnitMap;

method sumValue

sumValue: () => CSSNumericSumValue;

class CSSMathSum

class CSSMathSum extends CSSMathVariadic {}

Represents the sum of one or more CSSNumericValues.
See Also
- https://drafts.css-houdini.org/css-typed-om/#cssmathsum

property operator

operator: string;

method buildCSSText

buildCSSText: (nested: Nested, paren_less: ParenLess, result: string) => string;

method canCreateNumericTypeFromSumValue

static canCreateNumericTypeFromSumValue: (sum: CSSNumericSumValue) => boolean;

method clone

clone: () => CSSMathSum;

method create

static create: (values: CSSNumericValue[]) => CSSMathSum;

method getType

getType: () => CSSStyleValueType;

method numericTypeFromUnitMap

static numericTypeFromUnitMap: (

@antv/g

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Variables

variable BUILT_IN_PROPERTIES

variable CameraEvent

variable CanvasConfig

variable ContextNode

variable ContextService

variable CSS

See Also

variable DefaultCamera

variable DELEGATION_SPLITTER

variable FragmentResultFactory

variable FragmentResultOptions

variable GeometryAABBUpdater

variable GeometryUpdaterFactory

variable isBrowser

variable LayoutChildrenFactory

variable LayoutChildrenOptions

variable LayoutContextFactory

variable LayoutContextOptions

variable LayoutEdgesFactory

variable LayoutEdgesOptions

variable layoutEngine

variable LayoutFragmentFactory

variable LayoutFragmentOptions

variable MOUSE_POINTER_ID

variable ObjectTyped

variable Odeg

variable Opx

variable parseLength

See Also

variable PropertySyntax

variable RenderingContext

variable RenderingPluginContribution

variable SceneGraphSelector

variable SceneGraphSelectorFactory

variable SceneGraphService

variable StyleValueRegistry

variable TOUCH_TO_POINTER

Functions

function baseTypeToString

function camelCase

function clamp

function clampedMergeNumbers

function cleanExistedCanvas

function clonePath

function compareAnimations

function convertAngleUnit

function convertEffectInput

function convertPercentUnit

function convertToPath

function createVec3

function DCHECK

function DCHECK_EQ

function DCHECK_NE

function decompose

function deg2rad

function deg2turn

function dirtifyToRoot

function equalizeSegments

function equalSet

function formatAttribute

function fromRotationTranslationScale

function getAngle

function getDrawDirection

function getEuler

See Also

function getPathArea

function getRotatedCurve

function getRotationInRadians

function getScaling