@antv/g
- Version 5.1.1
- Published
- 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
- BUILT_IN_PROPERTIES
- CameraEvent
- CanvasConfig
- ContextNode
- ContextService
- CSS
- DefaultCamera
- DELEGATION_SPLITTER
- FragmentResultFactory
- FragmentResultOptions
- GeometryAABBUpdater
- GeometryUpdaterFactory
- isBrowser
- LayoutChildrenFactory
- LayoutChildrenOptions
- LayoutContextFactory
- LayoutContextOptions
- LayoutEdgesFactory
- LayoutEdgesOptions
- layoutEngine
- LayoutFragmentFactory
- LayoutFragmentOptions
- MOUSE_POINTER_ID
- ObjectTyped
- Odeg
- Opx
- parseLength
- PropertySyntax
- RenderingContext
- RenderingPluginContribution
- SceneGraphSelector
- SceneGraphSelectorFactory
- SceneGraphService
- StyleValueRegistry
- TOUCH_TO_POINTER
Functions
- baseTypeToString()
- camelCase()
- clamp()
- clampedMergeNumbers()
- cleanExistedCanvas()
- clonePath()
- compareAnimations()
- convertAngleUnit()
- convertEffectInput()
- convertPercentUnit()
- convertToPath()
- createVec3()
- DCHECK()
- DCHECK_EQ()
- DCHECK_NE()
- decompose()
- deg2rad()
- deg2turn()
- dirtifyToRoot()
- equalizeSegments()
- equalSet()
- formatAttribute()
- fromRotationTranslationScale()
- getAngle()
- getDrawDirection()
- getEuler()
- getPathArea()
- getRotatedCurve()
- getRotationInRadians()
- getScaling()
- getTranslation()
- grad2deg()
- isBoolean()
- isComparison()
- isFunction()
- isNil()
- isNumber()
- isObject()
- isString()
- isUndefined()
- makePerspective()
- makeQuerablePromise()
- makeTiming()
- mergeColors()
- mergeDimensionList()
- mergeDimensions()
- mergeNumberLists()
- mergeNumbers()
- mergePaths()
- mergeTransforms()
- normalizeKeyframes()
- normalizeTimingInput()
- numberToString()
- numericTimingToObject()
- parseAngle()
- parseColor()
- parseDimension()
- parseDimensionArray()
- parseFilter()
- parseLengthOrPercentage()
- parseNumber()
- parseNumberList()
- parseParam()
- parsePath()
- parsePoints()
- parserPercentage()
- parseTransform()
- parseTransformOrigin()
- rad2deg()
- reverseCurve()
- setDOMSize()
- sortByZIndex()
- toFontString()
- turn2deg()
- typeCheck()
- unitTypeToBaseType()
Classes
Animation
- addEventListener()
- cancel()
- commitStyles()
- currentTime
- dispatchEvent()
- effect
- finish()
- finished
- id
- markTarget()
- oncancel
- onfinish
- onframe
- onremove
- pause()
- pending
- persist()
- play()
- playbackRate
- playState
- ready
- removeEventListener()
- reverse()
- startTime
- targetAnimations()
- tick()
- timeline
- totalDuration
- unmarkTarget()
- updatePlaybackRate()
- updatePromises()
Camera
- canvas
- clearJitterProjectionMatrix()
- clearViewOffset()
- createLandmark()
- dolly()
- getAzimuth()
- getDistance()
- getDollyingStep()
- getElevation()
- getFar()
- getFocalPoint()
- getFrustum()
- getNear()
- getOrthoMatrix()
- getPerspective()
- getPerspectiveInverse()
- getPosition()
- getProjectionMode()
- getRoll()
- getView()
- getViewTransform()
- getWorldTransform()
- getZoom()
- gotoLandmark()
- isOrtho()
- jitterProjectionMatrix()
- matrix
- pan()
- rotate()
- setAspect()
- setAzimuth()
- setDistance()
- setElevation()
- setEnableUpdate()
- setFar()
- setFocalPoint()
- setFov()
- setMatrix()
- setMaxDistance()
- setMinDistance()
- setNear()
- setOrthographic()
- setPerspective()
- setPosition()
- setProjectionMode()
- setRoll()
- setTrackingMode()
- setType()
- setViewOffset()
- setWorldRotation()
- setZoom()
Canvas
- appendChild()
- cancelAnimationFrame
- canvas2Viewport()
- changeSize()
- client2Viewport()
- container
- customElements
- destroy()
- devicePixelRatio
- document
- Element
- getCamera()
- getClientByPoint()
- getConfig()
- getContainer()
- getContextService()
- getEventService()
- getPointByClient()
- getRenderingContext()
- getRenderingService()
- getRoot()
- getStats()
- insertBefore()
- isMouseEvent
- isTouchEvent
- ready
- removeChild()
- removeChildren()
- render()
- requestAnimationFrame
- resize()
- setCursor()
- setRenderer()
- supportPointerEvent
- supportTouchEvent
- viewport2Canvas()
- viewport2Client()
CSSStyleValue
- buildCSSText()
- canonicalUnitTypeForCategory()
- clone()
- conversionToCanonicalUnitsScaleFactor()
- getType()
- isAngle()
- isContainerPercentageLength()
- isFlex()
- isFrequency()
- isLength()
- isNumericValue()
- isRelativeUnit()
- isResolution()
- isTime()
- isViewportPercentageLength()
- parse()
- parseAll()
- stringToUnitType()
- toString()
- unitFromName()
- unitTypeToString()
- unitTypeToUnitCategory()
DefaultSceneGraphService
- attach()
- detach()
- dirtifyLocal()
- dirtifyWorld()
- getBoundingClientRect()
- getBounds()
- getGeometryBounds()
- getLocalBounds()
- getLocalPosition()
- getLocalRotation()
- getLocalScale()
- getLocalTransform()
- getOrigin()
- getPosition()
- getRotation()
- getScale()
- getWorldTransform()
- matches()
- querySelector()
- querySelectorAll()
- resetLocalTransform()
- rotate
- rotateLocal
- scaleLocal()
- setEulerAngles
- setLocalEulerAngles()
- setLocalPosition()
- setLocalRotation()
- setLocalScale()
- setLocalTransform()
- setOrigin()
- setPosition
- setRotation
- syncHierarchy()
- translate
- translateLocal
DisplayObject
- add()
- animate()
- attr()
- cloneNode()
- config
- destroy()
- get()
- getAnimations()
- getBBox()
- getChildByIndex()
- getChildren()
- getClip()
- getConfig()
- getCount()
- getEulerAngles()
- getFirst()
- getLast()
- getLocalEulerAngles()
- getLocalMatrix()
- getLocalPosition()
- getLocalRotation()
- getLocalScale()
- getLocalTransform()
- getMatrix()
- getOrigin()
- getParent()
- getPosition()
- getRotation()
- getScale()
- getWorldTransform()
- hide()
- interactive
- internalSetAttribute()
- isCulled()
- isInteractive()
- isVisible()
- move()
- moveTo()
- resetLocalTransform()
- rotate()
- rotateLocal()
- scale()
- scaleLocal()
- set()
- setAttribute()
- setClip()
- setEulerAngles()
- setLocalEulerAngles()
- setLocalMatrix()
- setLocalPosition()
- setLocalRotation()
- setLocalScale()
- setLocalTransform()
- setMatrix()
- setOrigin()
- setPosition()
- setRotation()
- setZIndex()
- show()
- styleValueRegistry
- toBack()
- toFront()
- translate()
- translateLocal()
Document
- append()
- appendChild()
- childElementCount
- children
- cloneNode()
- createElement()
- createElementNS()
- defaultView
- destroy()
- documentElement
- elementFromPoint()
- elementsFromPoint()
- find()
- findAll()
- firstElementChild
- getElementById()
- getElementsByClassName()
- getElementsByName()
- getElementsByTagName()
- insertBefore()
- lastElementChild
- ownerDocument
- prepend()
- querySelector()
- querySelectorAll()
- removeChild()
- replaceChild()
- timeline
Element
- after()
- append()
- appendChild()
- attributes
- before()
- childElementCount
- children
- classList
- className
- clientLeft
- clientTop
- cloneNode()
- computedStyle
- computedStyleMap()
- cullable
- destroy()
- destroyed
- entity
- find()
- findAll()
- firstElementChild
- geometry
- getAttribute()
- getAttributeNames()
- getAttributeNode()
- getAttributeNodeNS()
- getAttributeNS()
- getBoundingClientRect()
- getBounds()
- getClientRects()
- getElementById()
- getElementsByClassName()
- getElementsByName()
- getElementsByTagName()
- getGeometryBounds()
- getLocalBounds()
- getRenderBounds()
- hasAttribute()
- hasAttributeNS()
- hasAttributes()
- id
- insertBefore()
- isElement()
- lastElementChild
- matches()
- name
- namespaceURI
- nextSibling
- parentElement
- parsedStyle
- prepend()
- previousSibling
- querySelector()
- querySelectorAll()
- remove()
- removeAttribute()
- removeAttributeNode()
- removeAttributeNS()
- removeChild()
- removeChildren()
- renderable
- replaceChild()
- replaceChildren()
- replaceWith()
- sceneGraphService
- scrollLeft
- scrollTop
- setAttribute()
- setAttributeNode()
- setAttributeNodeNS()
- setAttributeNS()
- sortable
- style
- tagName
- toggleAttribute()
- transformable
EventService
- addEventMapping()
- canvas2Viewport()
- canvasConfig
- client2Viewport()
- cursor
- dispatchEvent()
- hitTest()
- init()
- mapEvent()
- onPointerDown
- onPointerMove
- onPointerOut
- onPointerOver
- onPointerUp
- onPointerUpOutside
- onTouchCancel
- onTouchEnd
- onTouchMove
- onTouchStart
- onWheel
- propagate()
- propagationPath()
- setPickHandler()
- viewport2Canvas()
- viewport2Client()
FederatedEvent
- AT_TARGET
- bubbles
- BUBBLING_PHASE
- cancelable
- cancelBubble
- canvas
- canvasX
- canvasY
- CAPTURING_PHASE
- composed
- composedPath()
- currentTarget
- defaultPrevented
- detail
- eventPhase
- initEvent()
- initUIEvent()
- isTrusted
- layer
- layerX
- layerY
- manager
- name
- nativeEvent
- NONE
- originalEvent
- page
- pageX
- pageY
- path
- preventDefault()
- propagationImmediatelyStopped
- propagationPath
- propagationStopped
- returnValue
- srcElement
- stopImmediatePropagation()
- stopPropagation()
- target
- timeStamp
- type
- view
- viewport
- viewportX
- viewportY
- which
- x
- y
Node
- appendChild()
- baseURI
- childNodes
- cloneNode()
- compareDocumentPosition()
- contain()
- contains()
- destroy()
- DOCUMENT_POSITION_CONTAINED_BY
- DOCUMENT_POSITION_CONTAINS
- DOCUMENT_POSITION_DISCONNECTED
- DOCUMENT_POSITION_FOLLOWING
- DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC
- DOCUMENT_POSITION_PRECEDING
- firstChild
- forEach()
- getAncestor()
- getRootNode()
- hasChildNodes()
- insertBefore()
- isConnected
- isDefaultNamespace()
- isEqualNode()
- isNode()
- isSameNode()
- lastChild
- lookupNamespaceURI()
- lookupPrefix()
- nextSibling
- nodeName
- nodeType
- nodeValue
- normalize()
- ownerDocument
- parent
- parentElement
- parentNode
- previousSibling
- removeChild()
- replaceChild()
- shadow
- textContent
Interfaces
BaseStyleProps
- anchor
- class
- clipPath
- clipPathTargets
- cursor
- display
- fill
- fillOpacity
- filter
- hitArea
- increasedLineWidthForHitTesting
- interactive
- lineCap
- lineDash
- lineDashOffset
- lineJoin
- lineWidth
- miterLimit
- offsetPath
- offsetPathTargets
- opacity
- pointerEvents
- shadowBlur
- shadowColor
- shadowOffsetX
- shadowOffsetY
- stroke
- strokeOpacity
- textTransform
- transform
- transformOrigin
- visibility
- zIndex
INode
- appendChild
- baseURI
- childNodes
- cloneNode
- compareDocumentPosition
- contains
- destroy
- firstChild
- forEach
- getAncestor
- getRootNode
- hasChildNodes
- insertBefore
- isConnected
- isDefaultNamespace
- isEqualNode
- isSameNode
- lastChild
- lookupNamespaceURI
- lookupPrefix
- nextSibling
- nodeName
- nodeType
- nodeValue
- normalize
- ownerDocument
- parentElement
- parentNode
- previousSibling
- removeChild
- replaceChild
- shadow
- textContent
SceneGraphService
- attach
- detach
- getBoundingClientRect
- getBounds
- getGeometryBounds
- getLocalBounds
- getLocalPosition
- getLocalRotation
- getLocalScale
- getLocalTransform
- getOrigin
- getPosition
- getRotation
- getScale
- getWorldTransform
- matches
- querySelector
- querySelectorAll
- resetLocalTransform
- rotate
- rotateLocal
- scaleLocal
- setEulerAngles
- setLocalEulerAngles
- setLocalPosition
- setLocalRotation
- setLocalScale
- setLocalTransform
- setOrigin
- setPosition
- setRotation
- syncHierarchy
- translate
- translateLocal
Enums
PropertyName
- ALIGN_CONTENT
- ALIGN_ITEMS
- ALIGN_SELF
- BORDER
- BORDER_BOTTOM
- BORDER_END
- BORDER_START
- BORDER_TOP
- BOTTOM
- BOX_SIZING
- FLEX
- FLEX_BASIS
- FLEX_DIRECTION
- FLEX_FLOW
- FLEX_GROW
- FLEX_SHRINK
- FLEX_WRAP
- HEIGHT
- JUSTIFY_CONTENT
- LAYOUT
- LEFT
- MARGIN
- MARGIN_BOTTOM
- MARGIN_END
- MARGIN_START
- MARGIN_TOP
- MAX_HEIGHT
- MAX_WIDTH
- MIN_HEIGHT
- MIN_WIDTH
- OFFSET_HEIGHT
- OFFSET_WIDTH
- ORDER
- PADDING
- PADDING_BOTTOM
- PADDING_END
- PADDING_START
- PADDING_TOP
- RIGHT
- TOP
- WIDTH
UnitType
- kCentimeters
- kChs
- kContainerBlockSize
- kContainerHeight
- kContainerInlineSize
- kContainerMax
- kContainerMin
- kContainerWidth
- kDegrees
- kDotsPerCentimeter
- kDotsPerInch
- kDotsPerPixel
- kDynamicViewportBlockSize
- kDynamicViewportHeight
- kDynamicViewportInlineSize
- kDynamicViewportMax
- kDynamicViewportMin
- kDynamicViewportWidth
- kEms
- kExs
- kFraction
- kGradians
- kHertz
- kInches
- kInteger
- kKilohertz
- kLargeViewportBlockSize
- kLargeViewportHeight
- kLargeViewportInlineSize
- kLargeViewportMax
- kLargeViewportMin
- kLargeViewportWidth
- kMillimeters
- kMilliseconds
- kNumber
- kPercentage
- kPicas
- kPixels
- kPoints
- kQuarterMillimeters
- kQuirkyEms
- kRadians
- kRems
- kSeconds
- kSmallViewportBlockSize
- kSmallViewportHeight
- kSmallViewportInlineSize
- kSmallViewportMax
- kSmallViewportMin
- kSmallViewportWidth
- kTurns
- kUnknown
- kUserUnits
- kViewportBlockSize
- kViewportHeight
- kViewportInlineSize
- kViewportMax
- kViewportMin
- kViewportWidth
Type Aliases
- ColorSpace
- CombinedNumber
- ComninedValue
- ContextId
- CSSColorAngle
- CSSColorNumber
- CSSColorPercent
- CSSColorRGBComp
- CSSGlobalKeywords
- CSSNumberish
- CSSNumericSumValue
- CSSValueParser
- Cursor
- EmitterListeners
- InteractivePointerEvent
- Interpolatable
- LayoutDefinitionCtor
- LayoutWorkTask
- Length
- LengthOrPercentage
- LengthOrPercentageOrAuto
- MeasureFn
- PathCommand
- Percentage
- Tuple3
- Tuple3Number
- Tuple4
- Tuple4Number
- UnitMap
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 mutateyourObject
s - 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: (