Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package kanva
Note: Version bump only for package kanva
Note: Version bump only for package kanva
Note: Version bump only for package kanva
npm: move tslib from dev dependencies to dependencies (f7531a5)
react: properly pass 'style' prop to Kanva root element (99ccb1f)
Note: Version bump only for package kanva
example: fix handleScale operating on wrong argument in various storybook stories (9fe99a7)
charts: add new area band type chart, data container can now process tuple of numbers in internal series (d3c53f0)
example: add new area band type chart example in storybook (73382f6)
Note: Version bump only for package kanva
Note: Version bump only for package kanva
bar-chart.view: bar chart rendering (0dc5b5f)
Core/View: pointer event offset now includes view LP padding (b61bb37)
data-container: #getYValuesMatch occasional crash potential fix (888704b)
data-container: #getYValuesMatch, #getScales crash prevention (ba615d0)
DataContainer: Missing this.scales issue (6fffdf0)
ImageView: Refresh onLoad image changed to MEASURE. Storybook for Image added. (87c8925)
line-chart.view: add XY point normalizing function (82b4aba)
pointer-events: filter-out UP pointer events for tooltip action (1703a32)
select area zoom: min selected area applied for both x and y min values (9119142)
tooltip extension: primary match set to the closest match to the given x point. Matches returned only for the series that are in expected range (dc01967)
transform extension options: copy scaleOptions instead of rewriting received object (ccb9620)
data-container: tooltip extension barebones (d2f2ceb)
data-container: tooltip-extension bar chart support (4fc52aa)
Pointer Events: AreaChart & BarChart pointer events snap (37f97b0)
Pointer Events: dispatching fabricated pointer events (c700c0c)
pointer-events: tooltip positioning, onMount callback (8133365)
tooltip-extension: Area Chart stationary tooltip (41335a8)
zoom: enable setting zoom option after extension initialization (d59a2f3)
zoom: enable updating instead of rewriting of transformExtension options (a91de19)
zooming: select area zoom extension custom styling (99b8ac7)
zooming: zooming by selecting area extension (8c892ea)
kanva: first public release
Draw on Canvas using Views
Kanva is a canvas framework for Node.js & browser web apps, inspired by structures present in Android ecosystem.
Kanva is broken down into several packages, allowing you to pick what's really needed.
Most important yarn
scripts during development:
start
- runs builds for all packages in watch mode
verify
- runs lint & tests
A layout and view system that draws stuff on canvas, has no external dependencies besides TypeScript typings (for now :wink: ). The idea is similar to what we can do with RelativeLayout (or ConstraintLayout) and Views on Android. Base classes are:
It's like component in React. It has it's own lifecycle and is able to accept properties. To access properties from React wrapper, properties need to have Java-style setters and getters (i.e. for property myProperty
, you have setMyProperty()
and getMyProperty()
). Usually we want to see the change after setting a value, this is why view needs to call require()
method inside property setters.
The lifecycle looks like this:
This is what lets us position the view inside another view. One can set the LayoutParams' values by chaining available methods. The dimensions of View can be set as a number (in pixels), MATCH_PARENT
or WRAP_CONTENT
. The calculated size is then wrapped to minWidth
/maxWidth
and minHeight
/maxHeight
.
MATCH_PARENT
- the view is as big as it's parent
WRAP_CONTENT
- view takes the smallest amount of space possible
Views can be positioned absolutely or relatively. Absolute positioning is the simplest one: just set the desired x
and y
coordinates and view will appear there. Relative positioning is a bit more complex concept, illustrated below.
This section is unfortunately still work in progress...
Package | Description |
---|---|
+ new AreaSelectGestureDetector(options
: ):
Returns:
▸ onGestureEvent(event
: ): boolean
Overrides .
▸ onPointerEvent(event
: ): boolean
Inherited from .
Core of Kanva
React bindings for Kanva core.
Chart views in Kanva
React bindings for chart views in Kanva
Storybook showcase of Kanva's possibilities
Name | Type |
|
Name | Type |
|
Name | Type |
|
Draw on Canvas using Views
Kanva is a canvas framework for Node.js & browser web apps, inspired by structures present in Android ecosystem.
Kanva is broken down into several packages, allowing you to pick what's really needed.
Most important yarn
scripts during development:
start
- runs builds for all packages in watch mode
verify
- runs lint & tests
Package
Description
Core of Kanva
React bindings for Kanva core.
Chart views in Kanva
@kanva/charts-react
React bindings for chart views in Kanva
@kanva/example
Storybook showcase of Kanva's possibilities
CanvasPointerEvent
• pointerCount: number = 0
• scrollX: number = 0
• scrollY: number = 0
• scrollZ: number = 0
Parameters:
▸ offsetPointers(offsetX
: number, offsetY
: number): void
Parameters:
Returns: void
Context
Parameters:
Readonly
canvasCreator• debugEnabled: boolean = false
Readonly
imageClass▸ deregisterView(id
: number): void
Parameters:
Returns: void
▸ getId(id
: string | number | undefined): undefined | string | number
Parameters:
Returns: undefined | string | number
▸ registerView(idName
: string): number
Parameters:
Returns: number
▸ resolve(id
: string | number | undefined): number | undefined
Parameters:
Returns: number | undefined
+ new CanvasPointerEvent():
Returns:
• action:
• offset:
• pointers: [] = new Array(10).fill(null).map(() => ({}) as any)
• target:
• get primaryPointer():
Returns:
▸ clone():
Returns:
▸ cloneTo(event
: ):
Returns:
+ new DragGestureDetector(options
: ):
Returns:
▸ onGestureEvent(event
: ): boolean
Overrides .
▸ onPointerEvent(event
: ): boolean
Inherited from .
+ new Context(options
: ):
Name | Type | Default |
---|
Returns:
• canvasCreator:
• imageClass:
Name | Type |
---|
Implementation of
Name | Type |
---|
Implementation of
Name | Type |
---|
Implementation of
Name | Type |
---|
Name | Type |
| number |
| number |
| number |
| string | number | undefined |
| string |
| string | number | undefined |
Name | Type |
|
Name | Type |
|
Name | Type |
|
Name | Type |
|
| {} |
Line
Parameters:
• endX: number
• endY: number
• startX: number
• startY: number
Parameters:
Returns: this
▸ add(x
: number, y
: number): this
Parameters:
Returns: this
Returns a copy of Line that can be mutated separately.
Copies all of this Line's properties to a Line specified in an argument. Returns the line passed as argument.
Parameters:
▸ extend(distance
: number): this
Extends this line by a specified distance. Starting point remains the same, ending point changes it's place by the distance. If current line has the length of 0, it's extended horizontally. Resulting Line is the same, mutated Line.
Parameters:
Returns: this
▸ length(): number
Returns: number
▸ move(distance
: number): this
Moves this line by a specified distance on the same angle. Acting similarly to {@link Line#extend}, but modifies both starting and ending points by a specified distance. If current line has the length of 0, it's moved horizontally. Resulting Line is the same, mutated Line.
Parameters:
Returns: this
Parameters:
Returns: this
▸ offset(x
: number, y
: number): this
Parameters:
Returns: this
Returns a point on this line, at specified position (ranged from 0 to 1). I.e. to get the center of line, pass 0.5. Creates a new Point, but in order to reuse the existing one, you can pass it as a second argument.
Parameters:
▸ toString(): string
Returns: string
LayoutParams
Optional
aboveIdOptional
belowIdOptional
bottomId• centerH: boolean = DefaultProps.CENTER_HORIZONTAL
• centerV: boolean = DefaultProps.CENTER_VERTICAL
• dependenciesModified: boolean = false
Optional
endId• hDimension: Dimension = parseDimension(DefaultProps.HEIGHT)
• isAbsolute: boolean = DefaultProps.IS_ABSOLUTE
• isAnimated: boolean = DefaultProps.IS_ANIMATED
• maxH: number = DefaultProps.MAX_HEIGHT
• maxW: number = DefaultProps.MAX_WIDTH
• minH: number = DefaultProps.MIN_HEIGHT
• minW: number = DefaultProps.MIN_WIDTH
Optional
startIdOptional
toEndOfIdOptional
toStartOfIdOptional
topId• wDimension: Dimension = parseDimension(DefaultProps.WIDTH)
• xDimension: Dimension = parseDimension(DefaultProps.X)
• yDimension: Dimension = parseDimension(DefaultProps.Y)
Parameters:
Returns: this
▸ absolute(absolute?
: undefined | false | true): this
Parameters:
Returns: this
Parameters:
Returns: this
Parameters:
Returns: this
▸ alignParentBottom(): this
Returns: this
▸ alignParentEnd(): this
Returns: this
▸ alignParentStart(): this
Returns: this
▸ alignParentTop(): this
Returns: this
Parameters:
Returns: this
Parameters:
Returns: this
▸ animate(animate?
: undefined | false | true): this
Parameters:
Returns: this
▸ asProps(): LayoutProps
Returns: LayoutProps
Parameters:
Returns: this
▸ center(center?
: undefined | false | true): this
Parameters:
Returns: this
▸ centerHorizontal(center?
: undefined | false | true): this
Parameters:
Returns: this
▸ centerVertical(center?
: undefined | false | true): this
Parameters:
Returns: this
Parameters:
Returns: this
Parameters:
Returns: this
▸ maxHeight(maxHeight
: number): this
Parameters:
Returns: this
▸ maxWidth(maxWidth
: number): this
Parameters:
Returns: this
▸ minHeight(minHeight
: number): this
Parameters:
Returns: this
▸ minWidth(minWidth
: number): this
Parameters:
Returns: this
Parameters:
Returns: this
Parameters:
Returns: this
Parameters:
Returns: this
Parameters:
Returns: this
Parameters:
Returns: this
Parameters:
Returns: this
Parameters:
Returns: this
▸ updateWithProps(__namedParameters
: object): boolean
Parameters:
▪Default value
__namedParameters: object= {}
Returns: boolean
Parameters:
Returns: this
↳ ImageView
Parameters:
Protected
Optional
backgroundColor• backgroundColor? : undefined | string
Protected
Optional
borderColor• borderColor? : undefined | string
Protected
Optional
borderRectReadonly
contextProtected
height• height: number = 0
Optional
id• id? : undefined | number
Protected
innerRectThis are the bounds of view including padding.
Protected
lpReadonly
name• name: string
This are the bounds of view absolute offset.
Protected
Optional
onMount• onMount? : undefined | function
Protected
rectThis are bounds of a view including margin and padding
Protected
visibility• visibility: Visibility = Visibility.VISIBLE
Protected
width• width: number = 0
• get innerHeight(): number
Returns: number
• get innerWidth(): number
Returns: number
Parameters:
Returns: void
▸ destroy(): void
Returns: void
Parameters:
Returns: boolean
Parameters:
Returns: void
▸ getBackgroundColor(): undefined | string
Returns: undefined | string
▸ getBorder(): undefined | string
Returns: undefined | string
▸ getBorderColor(): undefined | string
Returns: undefined | string
▸ getId(): undefined | string | number
Returns: undefined | string | number
▸ getInternalWrappedHeight(): number
Returns: number
▸ getInternalWrappedWidth(): number
Returns: number
▸ getMatchParentHeight(): number
Returns: number
▸ getMatchParentWidth(): number
Returns: number
▸ getOnMount(): undefined | function
Returns: undefined | function
▸ getScaleType(): ImageScaleType
Returns: ImageScaleType
▸ getSource(): undefined | string
Returns: undefined | string
▸ getVisibility(): Visibility
Returns: Visibility
▸ hasParent(): boolean
Returns: boolean
▸ layout(force?
: undefined | false | true): void
Prepares the layout for all children
Parameters:
Returns: void
Measures the component and adjusts it's dimensions to min/max width and height values.
Parameters:
Returns: void
true if width or height changed, false otherwise
▸ mount(): void
Returns: void
▸ onDestroy(): void
Returns: void
Parameters:
Returns: void
▸ onLayout(): void
Returns: void
▸ onMeasure(width
: number, height
: number): object
Parameters:
Returns: object
height: number
width: number
Parameters:
Returns: boolean
▸ onSizeChanged(_width
: number, _height
: number, _oldWidth
: number, _oldHeight
: number): void
Parameters:
Returns: void
▸ onSnapshot(): object
Returns: object
source: undefined | string = this.source
Parameters:
Returns: void
▸ removeChildAt(startIndex
: number, endIndex
: number): void
Parameters:
Returns: void
▸ require(requiredChanges
: RequiredViewChanges): void
Parameters:
Returns: void
▸ requireGuard(requiredChanges
: RequiredViewChanges): boolean
Parameters:
Returns: boolean
▸ requireGuardAndTake(requiredChanges
: RequiredViewChanges, force?
: undefined | false | true): boolean
Parameters:
Returns: boolean
▸ resolvePositionDependencies(): void
Prepare arrays of children ordered horizontally and vertically, so that they could be measured in a single pass, without waiting for their dependencies to be resolved.
This has to be called before measure whenever child's layoutParams change or views are added/removed.
throws
an error in case of unresolvable dependency (circular or lack of required view)
Returns: void
▸ screenshot(): string | undefined
Returns: string | undefined
▸ setBackgroundColor(backgroundColor
: string | undefined): void
Parameters:
Returns: void
Parameters:
Returns: void
▸ setBorderColor(borderColor
: string | undefined): void
Parameters:
Returns: void
Parameters:
Returns: void
▸ setId(id?
: undefined | string): void
Parameters:
Returns: void
Parameters:
Returns: void
▸ setOnMount(callback
: function): void
Parameters:
▪ callback: function
Parameters:
Returns: void
▸ setScaleType(scaleType
: ImageScaleType): void
Parameters:
Returns: void
▸ setSource(source
: string): void
Parameters:
Returns: void
▸ setVisibility(visibility
: Visibility): void
Parameters:
Returns: void
▸ snapshot(): object
Returns: object
Point
Parameters:
• x: number
• y: number
Returns a copy of Point that can be mutated separately.
Copies all of this Point's properties to a Point specified in an argument. Returns the point passed as argument.
Parameters:
▸ toString(): string
Returns: string
NoContext
▸ deregisterView(_id
: number): void
Parameters:
Returns: void
▸ getId(_id
: string | number): string | number
Parameters:
Returns: string | number
▸ registerView(_idName
: string): number
Parameters:
Returns: number
▸ resolve(_id
: string | number | undefined): number | undefined
Parameters:
Returns: number | undefined
Paint
Optional
fillStyle• fillStyle? : undefined | string
• fontString: string = defaultPaintOptions.font
• lineDash: number[] = defaultPaintOptions.lineDash
• lineRounding: boolean = defaultPaintOptions.lineRounding
• lineWidth: number = defaultPaintOptions.lineWidth
Optional
strokeStyle• strokeStyle? : undefined | string
• textDirection: CanvasDirection = defaultPaintOptions.textDirection
Static
Readonly
DEFAULT▸ canDrawFill(): boolean
Returns: boolean
▸ canDrawStroke(): boolean
Returns: boolean
▸ canDrawText(): boolean
Returns: boolean
▸ getLineHeight(): number
Returns: number
▸ isBright(): boolean
Returns: boolean
▸ setFillStyle(fill
: string): this
Parameters:
Returns: this
Parameters:
Returns: this
▸ setLineDash(lineDash
: number[]): this
Parameters:
Returns: this
▸ setLineRounding(lineRounding
: boolean): this
Parameters:
Returns: this
▸ setLineWidth(lineWidth
: number): this
Parameters:
Returns: this
▸ setStrokeStyle(stroke
: string): this
Parameters:
Returns: this
Parameters:
Returns: this
Parameters:
Returns: this
▸ setTextDirection(textDirection
: CanvasDirection): this
Parameters:
Returns: this
▸ snapshot(): object
Returns: object
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
+ new Point(x
: number, y
: number):
Returns:
▸ clone(): ‹›
Returns: ‹›
▸ cloneTo(point
: ): ‹›
Returns: ‹›
Implementation of
Implementation of
Implementation of .
• font: = defaultFont
Implementation of .
• textAlign: = defaultPaintOptions.textAlign
Implementation of .
• textBaseline: = defaultPaintOptions.textBaseline
Implementation of .
Implementation of .
▪ DEFAULT: ‹› = new Paint()
▸ clone(): ‹›
Returns: ‹›
Name | Type |
---|
▸ setFont(font
: ): this
Name | Type |
---|
Name | Type |
---|
Name | Type |
---|
Name | Type |
---|
Name | Type |
---|
▸ setTextAlign(textAlign
: ): this
Name | Type |
---|
▸ setTextBaseline(textBaseline
: ): this
Name | Type |
---|
Name | Type |
---|
Name
Type
startX
number
startY
number
endX
number
endY
number
Name
Type
x
number
y
number
Name
Type
distance
number
Name
Type
distance
number
Name
Type
x
number
y
number
absolute?
undefined | false | true
animate?
undefined | false | true
center?
undefined | false | true
center?
undefined | false | true
center?
undefined | false | true
maxHeight
number
maxWidth
number
minHeight
number
minWidth
number
force?
undefined | false | true
width
number
height
number
_width
number
_height
number
_oldWidth
number
_oldHeight
number
startIndex
number
-
endIndex
number
startIndex + 1
requiredChanges
requiredChanges
requiredChanges
force?
undefined | false | true
backgroundColor
string | undefined
borderColor
string | undefined
id?
undefined | string
scaleType
source
string
visibility
Visibility.VISIBLE
Name | Type | Default |
| number | 0 |
| number | 0 |
Name | Type |
| number |
Name | Type |
| string | number |
Name | Type |
| string |
Name | Type |
| string | number | undefined |
| string |
| number[] |
| boolean |
| number |
| string |
| CanvasDirection |
Name
Type
event
previousEvent
Name
Type
event
Name
Type
line
Name
Type
line
Name
Type
line
Name
Type
Default
position
number
-
result
new Point()
id?
id?
id?
id?
id?
id?
height
margin?
padding?
x
y
id?
id?
id?
id?
above
undefined | string | number
DefaultProps.ABOVE
alignBottom
undefined | string | number
DefaultProps.ALIGN_BOTTOM
alignEnd
undefined | string | number
DefaultProps.ALIGN_END
alignStart
undefined | string | number
DefaultProps.ALIGN_START
alignTop
undefined | string | number
DefaultProps.ALIGN_TOP
below
undefined | string | number
DefaultProps.BELOW
centerHorizontal
boolean
DefaultProps.CENTER_HORIZONTAL
centerVertical
boolean
DefaultProps.CENTER_VERTICAL
height
null | string | number
DefaultProps.HEIGHT
isAbsolute
boolean
DefaultProps.IS_ABSOLUTE
isAnimated
boolean
DefaultProps.IS_ANIMATED
margin
DefaultProps.MARGIN
maxHeight
number
DefaultProps.MAX_HEIGHT
maxWidth
number
DefaultProps.MAX_WIDTH
minHeight
number
DefaultProps.MIN_HEIGHT
minWidth
number
DefaultProps.MIN_WIDTH
padding
DefaultProps.PADDING
posX
null | string | number
DefaultProps.X
posY
null | string | number
DefaultProps.Y
toEndOf
undefined | string | number
DefaultProps.TO_END_OF
toStartOf
undefined | string | number
DefaultProps.TO_START_OF
width
null | string | number
DefaultProps.WIDTH
width
context
child
-
position
number
-1
event
canvas
-
force
boolean
false
canvas
force?
undefined | false | true
canvas
_event
child
borderRect
child
position
number
lp
view
Name | Type |
|
|
|
|
Rect
Parameters:
• b: number
• l: number
• r: number
• t: number
• get height(): number
Returns: number
• get width(): number
Returns: number
Returns a copy of Rect that can be mutated separately.
Copies all of this Rect's properties to a Rect specified in an argument. Returns the line passed as argument.
Parameters:
▸ contains(x
: number, y
: number): boolean
Parameters:
Returns: boolean
Expands this Rect by other Rect's dimensions (i.e. to reduce padding) or by a constant numeric value from each side. Resulting Rect is the same, mutated Rect.
Parameters:
Returns: this
Shrinks this Rect by other Rect's dimensions (i.e. to apply padding) or by a constant numeric value from each side. Resulting Rect is the same, mutated Rect.
Parameters:
Returns: this
Parameters:
Returns: boolean
Moves this Rect by left top position of passed rect or by XY coordinates of a Point. Resulting Rect is the same, mutated Rect.
Parameters:
Returns: this
▸ offset(x
: number, y
: number): this
Moves this Rect by passed x and y coordinates. Resulting Rect is the same, mutated Rect.
Parameters:
Returns: this
▸ toString(): string
Returns: string
Static
fromParameters:
↳ RootCanvasView
Parameters:
Protected
Optional
backgroundColor• backgroundColor? : undefined | string
Protected
Optional
borderColor• borderColor? : undefined | string
Protected
Optional
borderRectReadonly
contextProtected
height• height: number = 0
Optional
id• id? : undefined | number
Protected
innerRectThis are the bounds of view including padding.
Protected
lpReadonly
name• name: string
This are the bounds of view absolute offset.
Protected
Optional
onMount• onMount? : undefined | function
Protected
rectThis are bounds of a view including margin and padding
Protected
visibility• visibility: Visibility = Visibility.VISIBLE
Protected
width• width: number = 0
• get innerHeight(): number
Returns: number
• get innerWidth(): number
Returns: number
Parameters:
Returns: void
▸ destroy(): void
Returns: void
Parameters:
Returns: boolean
Parameters:
Returns: void
▸ getBackgroundColor(): undefined | string
Returns: undefined | string
▸ getBorder(): undefined | string
Returns: undefined | string
▸ getBorderColor(): undefined | string
Returns: undefined | string
▸ getCanvas(): HTMLCanvasElement
Returns: HTMLCanvasElement
▸ getId(): undefined | string | number
Returns: undefined | string | number
Parameters:
Returns: number | undefined
Parameters:
Returns: number | undefined
▸ getMatchParentHeight(): number
Returns: number
▸ getMatchParentWidth(): number
Returns: number
▸ getOnMount(): undefined | function
Returns: undefined | function
▸ getScale(): number
Returns: number
▸ getVisibility(): Visibility
Returns: Visibility
▸ hasParent(): boolean
Returns: boolean
▸ layout(force?
: undefined | false | true): void
Prepares the layout for all children
Parameters:
Returns: void
Measures the component and adjusts it's dimensions to min/max width and height values.
Parameters:
Returns: void
true if width or height changed, false otherwise
▸ mount(): void
Returns: void
▸ onDestroy(): void
Returns: void
Parameters:
Returns: void
▸ onLayout(): void
Returns: void
▸ onMeasure(width
: number, height
: number): object
Parameters:
Returns: object
height: number
width: number
Parameters:
Returns: boolean
▸ onSizeChanged(): void
Returns: void
▸ onSnapshot(): object
Returns: object
dpr: number = this.dpr
Parameters:
Returns: void
▸ removeChildAt(startIndex
: number, endIndex
: number): void
Parameters:
Returns: void
▸ require(requiredChanges
: RequiredViewChanges): void
Parameters:
Returns: void
▸ requireGuard(requiredChanges
: RequiredViewChanges): boolean
Parameters:
Returns: boolean
▸ requireGuardAndTake(requiredChanges
: RequiredViewChanges, force?
: undefined | false | true): boolean
Parameters:
Returns: boolean
▸ resolvePositionDependencies(): void
Prepare arrays of children ordered horizontally and vertically, so that they could be measured in a single pass, without waiting for their dependencies to be resolved.
This has to be called before measure whenever child's layoutParams change or views are added/removed.
throws
an error in case of unresolvable dependency (circular or lack of required view)
Returns: void
▸ run(): void
Returns: void
▸ screenshot(): string | undefined
Returns: string | undefined
▸ setBackgroundColor(backgroundColor
: string | undefined): void
Parameters:
Returns: void
Parameters:
Returns: void
▸ setBorderColor(borderColor
: string | undefined): void
Parameters:
Returns: void
Parameters:
Returns: void
▸ setDebugEnabled(enabled
: boolean): void
Parameters:
Returns: void
▸ setId(id?
: undefined | string): void
Parameters:
Returns: void
Parameters:
Returns: void
▸ setOnMount(callback
: function): void
Parameters:
▪ callback: function
Parameters:
Returns: void
▸ setVisibility(visibility
: Visibility): void
Parameters:
Returns: void
▸ setupPointerEvents(): void
Returns: void
▸ snapshot(): object
Returns: object
ViewCanvas
Parameters:
Protected
Readonly
canvasReadonly
context• context: CanvasRenderingContext2D
Parameters:
Returns: void
Parameters:
Returns: void
Parameters:
Returns: void
Parameters:
Returns: void
Parameters:
Returns: TextMetrics
Parameters:
Returns: void
Parameters:
Returns: void
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
+ new ViewCanvas(canvas
: ):
Name | Type |
---|
Returns:
• canvas:
▸ drawPath(paint
: ): void
Name | Type |
---|
▸ drawRect(rect
: , paint
: , borders?
: ): void
Name | Type |
---|
▸ drawText(x
: number, y
: number, text
: string, paint
: , paintOverrides?
: , maxWidth
: number): void
Name | Type | Default |
---|
▸ line(line
: ): void
Name | Type |
---|
▸ measureText(text
: string, paint
: ): TextMetrics
Name | Type |
---|
▸ roundRect(x
: number, y
: number, w
: number, h
: number, r
: ): void
Name | Type |
---|
▸ setPaint(paint
: , paintOverrides?
: ): void
Name | Type |
---|
Name
Type
options
ScaleGestureDetectorOptions
Name
Type
x
number
y
number
Name
Type
x
number
y
number
force?
undefined | false | true
width
number
height
number
startIndex
number
-
endIndex
number
startIndex + 1
requiredChanges
requiredChanges
requiredChanges
force?
undefined | false | true
backgroundColor
string | undefined
borderColor
string | undefined
enabled
boolean
id?
undefined | string
visibility
Visibility.VISIBLE
Name
Type
event
Name
Type
event
Name
Type
value
Name
Type
rect
Name
Type
expansion
Name
Type
shrink
Name
Type
rect
Name
Type
offset
Name
Type
rectLike
context
canvas
child
-
position
number
-1
event
canvas
_canvas
_canvas
canvas
force?
undefined | false | true
_canvas
_event
child
borderRect
child
position
number
lp
view
|
|
|
|
|
| number | - |
| number | - |
| string | - |
| - |
| - |
| number | 0 |
|
| string |
|
| number |
| number |
| number |
| number |
|
|
|
▪ _Props: Record‹string, any›
View
Parameters:
Protected
Optional
backgroundColor• backgroundColor? : undefined | string
Protected
Optional
borderColor• borderColor? : undefined | string
Protected
Optional
borderRectReadonly
contextProtected
height• height: number = 0
Optional
id• id? : undefined | number
Protected
innerRectThis are the bounds of view including padding.
Protected
lpReadonly
name• name: string
This are the bounds of view absolute offset.
Protected
Optional
onMount• onMount? : undefined | function
Protected
rectThis are bounds of a view including margin and padding
Protected
visibility• visibility: Visibility = Visibility.VISIBLE
Protected
width• width: number = 0
• get innerHeight(): number
Returns: number
• get innerWidth(): number
Returns: number
Parameters:
Returns: void
▸ destroy(): void
Returns: void
Parameters:
Returns: boolean
Parameters:
Returns: void
▸ getBackgroundColor(): undefined | string
Returns: undefined | string
▸ getBorder(): undefined | string
Returns: undefined | string
▸ getBorderColor(): undefined | string
Returns: undefined | string
▸ getId(): undefined | string | number
Returns: undefined | string | number
Parameters:
Returns: number | undefined
Parameters:
Returns: number | undefined
▸ getMatchParentHeight(): number
Returns: number
▸ getMatchParentWidth(): number
Returns: number
▸ getOnMount(): undefined | function
Returns: undefined | function
▸ getVisibility(): Visibility
Returns: Visibility
▸ hasParent(): boolean
Returns: boolean
▸ layout(force?
: undefined | false | true): void
Prepares the layout for all children
Parameters:
Returns: void
Measures the component and adjusts it's dimensions to min/max width and height values.
Parameters:
Returns: void
true if width or height changed, false otherwise
▸ mount(): void
Returns: void
▸ onDestroy(): void
Returns: void
Parameters:
Returns: void
▸ onLayout(): void
Returns: void
▸ onMeasure(width
: number, height
: number): object
Parameters:
Returns: object
height: number
width: number
Parameters:
Returns: boolean
▸ onSizeChanged(_width
: number, _height
: number, _oldWidth
: number, _oldHeight
: number): void
Parameters:
Returns: void
▸ onSnapshot(): object
Returns: object
Parameters:
Returns: void
▸ removeChildAt(startIndex
: number, endIndex
: number): void
Parameters:
Returns: void
▸ require(requiredChanges
: RequiredViewChanges): void
Parameters:
Returns: void
▸ requireGuard(requiredChanges
: RequiredViewChanges): boolean
Parameters:
Returns: boolean
▸ requireGuardAndTake(requiredChanges
: RequiredViewChanges, force?
: undefined | false | true): boolean
Parameters:
Returns: boolean
▸ resolvePositionDependencies(): void
Prepare arrays of children ordered horizontally and vertically, so that they could be measured in a single pass, without waiting for their dependencies to be resolved.
This has to be called before measure whenever child's layoutParams change or views are added/removed.
throws
an error in case of unresolvable dependency (circular or lack of required view)
Returns: void
▸ screenshot(): string | undefined
Returns: string | undefined
▸ setBackgroundColor(backgroundColor
: string | undefined): void
Parameters:
Returns: void
Parameters:
Returns: void
▸ setBorderColor(borderColor
: string | undefined): void
Parameters:
Returns: void
Parameters:
Returns: void
▸ setId(id?
: undefined | string): void
Parameters:
Returns: void
Parameters:
Returns: void
▸ setOnMount(callback
: function): void
Parameters:
▪ callback: function
Parameters:
Returns: void
▸ setVisibility(visibility
: Visibility): void
Parameters:
Returns: void
▸ snapshot(): object
Returns: object
↳ TextView
Parameters:
Protected
Optional
backgroundColor• backgroundColor? : undefined | string
Protected
Optional
borderColor• borderColor? : undefined | string
Protected
Optional
borderRectReadonly
contextProtected
height• height: number = 0
Optional
id• id? : undefined | number
Protected
innerRectThis are the bounds of view including padding.
Protected
lpReadonly
name• name: string
This are the bounds of view absolute offset.
Protected
Optional
onMount• onMount? : undefined | function
Protected
rectThis are bounds of a view including margin and padding
Protected
visibility• visibility: Visibility = Visibility.VISIBLE
Protected
width• width: number = 0
• get innerHeight(): number
Returns: number
• get innerWidth(): number
Returns: number
Parameters:
Returns: void
▸ destroy(): void
Returns: void
Parameters:
Returns: boolean
Parameters:
Returns: void
▸ getBackgroundColor(): undefined | string
Returns: undefined | string
▸ getBorder(): undefined | string
Returns: undefined | string
▸ getBorderColor(): undefined | string
Returns: undefined | string
▸ getId(): undefined | string | number
Returns: undefined | string | number
▸ getInternalWrappedHeight(): number
Returns: number
Parameters:
Returns: undefined | number
▸ getMatchParentHeight(): number
Returns: number
▸ getMatchParentWidth(): number
Returns: number
▸ getOnMount(): undefined | function
Returns: undefined | function
▸ getText(): string
Returns: string
▸ getTextPaint(): Font
Returns: Font
▸ getVisibility(): Visibility
Returns: Visibility
▸ getY(textBaseline
: TextBaseline): number
Parameters:
Returns: number
▸ hasParent(): boolean
Returns: boolean
▸ layout(force?
: undefined | false | true): void
Prepares the layout for all children
Parameters:
Returns: void
Measures the component and adjusts it's dimensions to min/max width and height values.
Parameters:
Returns: void
true if width or height changed, false otherwise
▸ mount(): void
Returns: void
▸ onDestroy(): void
Returns: void
Parameters:
Returns: void
▸ onLayout(): void
Returns: void
▸ onMeasure(width
: number, height
: number): object
Parameters:
Returns: object
height: number
width: number
Parameters:
Returns: boolean
▸ onSizeChanged(_width
: number, _height
: number, _oldWidth
: number, _oldHeight
: number): void
Parameters:
Returns: void
▸ onSnapshot(): object
Returns: object
text: string = this.textString
textPaint: object = this.textPaint.snapshot()
Parameters:
Returns: void
▸ removeChildAt(startIndex
: number, endIndex
: number): void
Parameters:
Returns: void
▸ require(requiredChanges
: RequiredViewChanges): void
Parameters:
Returns: void
▸ requireGuard(requiredChanges
: RequiredViewChanges): boolean
Parameters:
Returns: boolean
▸ requireGuardAndTake(requiredChanges
: RequiredViewChanges, force?
: undefined | false | true): boolean
Parameters:
Returns: boolean
▸ resolvePositionDependencies(): void
Prepare arrays of children ordered horizontally and vertically, so that they could be measured in a single pass, without waiting for their dependencies to be resolved.
This has to be called before measure whenever child's layoutParams change or views are added/removed.
throws
an error in case of unresolvable dependency (circular or lack of required view)
Returns: void
▸ screenshot(): string | undefined
Returns: string | undefined
▸ setBackgroundColor(backgroundColor
: string | undefined): void
Parameters:
Returns: void
Parameters:
Returns: void
▸ setBorderColor(borderColor
: string | undefined): void
Parameters:
Returns: void
Parameters:
Returns: void
▸ setId(id?
: undefined | string): void
Parameters:
Returns: void
Parameters:
Returns: void
▸ setOnMount(callback
: function): void
Parameters:
▪ callback: function
Parameters:
Returns: void
▸ setText(text
: string): void
Parameters:
Returns: void
Parameters:
Returns: void
▸ setVisibility(visibility
: Visibility): void
Parameters:
Returns: void
▸ snapshot(): object
Returns: object
Name | Type | Default |
---|---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
force?
undefined | false | true
width
number
height
number
_width
number
_height
number
_oldWidth
number
_oldHeight
number
startIndex
number
-
endIndex
number
startIndex + 1
requiredChanges
requiredChanges
requiredChanges
force?
undefined | false | true
backgroundColor
string | undefined
borderColor
string | undefined
id?
undefined | string
visibility
Visibility.VISIBLE
textBaseline
force?
undefined | false | true
width
number
height
number
_width
number
_height
number
_oldWidth
number
_oldHeight
number
startIndex
number
-
endIndex
number
startIndex + 1
requiredChanges
requiredChanges
requiredChanges
force?
undefined | false | true
backgroundColor
string | undefined
borderColor
string | undefined
id?
undefined | string
text
string
visibility
Visibility.VISIBLE
This section is unfortunately still work in progress...
This section is unfortunately still work in progress...
This section is unfortunately still work in progress...
context
-
name
string
"View"
child
-
position
number
-1
event
canvas
-
force
boolean
false
_canvas
_canvas
canvas
force?
undefined | false | true
_canvas
_event
child
borderRect
child
position
number
lp
view
context
child
-
position
number
-1
event
canvas
-
force
boolean
false
canvas
canvas
force?
undefined | false | true
canvas
_event
child
borderRect
child
position
number
lp
view
paint
Const
ImageView• ImageView: ReactViewComponent = createReactView(KanvaImageView)
Const
KanvaContext• KanvaContext: Context‹ContextObject› = React.createContext({ ctx: new NoContext(), parent: undefined as any, })
Const
TextView• TextView: ReactViewComponent = createReactView(KanvaTextView)
Const
View• View: ReactViewComponent = createReactView(KanvaView)
Const
createReactView▸ createReactView‹Props›(viewClass
: object): ReactViewComponent
Type parameters:
▪ Props: object
Parameters:
Returns: ReactViewComponent
Const
getAllGettersAndSetters▸ getAllGettersAndSetters(obj
: object): object[]
Parameters:
Returns: object[]
Name | Type |
---|---|
Name | Type |
---|---|
viewClass
object
obj
object
Const
AreaChartView• AreaChartView: object = createReactView(KanvaAreaChartView)
new __type(props
: Partial‹ViewProps & Props›): object
context: React.ContextType‹typeof KanvaContext›
internalProps: InternalProps
isDebugEnabled: boolean
layoutParams? : LayoutProps | undefined
propHandlers: Record‹string, object›
propNames: string[]
props: Readonly‹Partial‹ViewProps & Props›› & Readonly‹object›
refs(): object
state: Readonly‹object›
view? : View‹ViewProps› | undefined
UNSAFE_componentWillMount(): void
UNSAFE_componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
UNSAFE_componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
componentDidCatch(error
: Error, errorInfo
: ErrorInfo): void
componentDidMount(): void
componentDidUpdate(): void
componentWillMount(): void
componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
componentWillUnmount(): void
componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
createAndAttachView(): void
forceUpdate(callback?
: function | undefined): void
getSnapshotBeforeUpdate(prevProps
: Readonly‹Partial‹ViewProps & Props››, prevState
: Readonly‹object›): any
refreshProps(): void
render(): Element
setState‹K›(state
: object | function | Pick‹object, K› | null, callback?
: function | undefined): void
shouldComponentUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): boolean
contextType: Context‹ContextObject›
displayName: string
Const
AxisView• AxisView: object = createReactView(KanvaAxisView)
new __type(props
: Partial‹ViewProps & Props›): object
context: React.ContextType‹typeof KanvaContext›
internalProps: InternalProps
isDebugEnabled: boolean
layoutParams? : LayoutProps | undefined
propHandlers: Record‹string, object›
propNames: string[]
props: Readonly‹Partial‹ViewProps & Props›› & Readonly‹object›
refs(): object
state: Readonly‹object›
view? : View‹ViewProps› | undefined
UNSAFE_componentWillMount(): void
UNSAFE_componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
UNSAFE_componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
componentDidCatch(error
: Error, errorInfo
: ErrorInfo): void
componentDidMount(): void
componentDidUpdate(): void
componentWillMount(): void
componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
componentWillUnmount(): void
componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
createAndAttachView(): void
forceUpdate(callback?
: function | undefined): void
getSnapshotBeforeUpdate(prevProps
: Readonly‹Partial‹ViewProps & Props››, prevState
: Readonly‹object›): any
refreshProps(): void
render(): Element
setState‹K›(state
: object | function | Pick‹object, K› | null, callback?
: function | undefined): void
shouldComponentUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): boolean
contextType: Context‹ContextObject›
displayName: string
Const
BarChartView• BarChartView: object = createReactView(KanvaBarChartView)
new __type(props
: Partial‹ViewProps & Props›): object
context: React.ContextType‹typeof KanvaContext›
internalProps: InternalProps
isDebugEnabled: boolean
layoutParams? : LayoutProps | undefined
propHandlers: Record‹string, object›
propNames: string[]
props: Readonly‹Partial‹ViewProps & Props›› & Readonly‹object›
refs(): object
state: Readonly‹object›
view? : View‹ViewProps› | undefined
UNSAFE_componentWillMount(): void
UNSAFE_componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
UNSAFE_componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
componentDidCatch(error
: Error, errorInfo
: ErrorInfo): void
componentDidMount(): void
componentDidUpdate(): void
componentWillMount(): void
componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
componentWillUnmount(): void
componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
createAndAttachView(): void
forceUpdate(callback?
: function | undefined): void
getSnapshotBeforeUpdate(prevProps
: Readonly‹Partial‹ViewProps & Props››, prevState
: Readonly‹object›): any
refreshProps(): void
render(): Element
setState‹K›(state
: object | function | Pick‹object, K› | null, callback?
: function | undefined): void
shouldComponentUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): boolean
contextType: Context‹ContextObject›
displayName: string
Const
ChartGridView• ChartGridView: object = createReactView(KanvaChartGridView)
new __type(props
: Partial‹ViewProps & Props›): object
context: React.ContextType‹typeof KanvaContext›
internalProps: InternalProps
isDebugEnabled: boolean
layoutParams? : LayoutProps | undefined
propHandlers: Record‹string, object›
propNames: string[]
props: Readonly‹Partial‹ViewProps & Props›› & Readonly‹object›
refs(): object
state: Readonly‹object›
view? : View‹ViewProps› | undefined
UNSAFE_componentWillMount(): void
UNSAFE_componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
UNSAFE_componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
componentDidCatch(error
: Error, errorInfo
: ErrorInfo): void
componentDidMount(): void
componentDidUpdate(): void
componentWillMount(): void
componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
componentWillUnmount(): void
componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
createAndAttachView(): void
forceUpdate(callback?
: function | undefined): void
getSnapshotBeforeUpdate(prevProps
: Readonly‹Partial‹ViewProps & Props››, prevState
: Readonly‹object›): any
refreshProps(): void
render(): Element
setState‹K›(state
: object | function | Pick‹object, K› | null, callback?
: function | undefined): void
shouldComponentUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): boolean
contextType: Context‹ContextObject›
displayName: string
Const
ChartZoomView• ChartZoomView: object = createReactView(KanvaChartZoomView)
new __type(props
: Partial‹ViewProps & Props›): object
context: React.ContextType‹typeof KanvaContext›
internalProps: InternalProps
isDebugEnabled: boolean
layoutParams? : LayoutProps | undefined
propHandlers: Record‹string, object›
propNames: string[]
props: Readonly‹Partial‹ViewProps & Props›› & Readonly‹object›
refs(): object
state: Readonly‹object›
view? : View‹ViewProps› | undefined
UNSAFE_componentWillMount(): void
UNSAFE_componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
UNSAFE_componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
componentDidCatch(error
: Error, errorInfo
: ErrorInfo): void
componentDidMount(): void
componentDidUpdate(): void
componentWillMount(): void
componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
componentWillUnmount(): void
componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
createAndAttachView(): void
forceUpdate(callback?
: function | undefined): void
getSnapshotBeforeUpdate(prevProps
: Readonly‹Partial‹ViewProps & Props››, prevState
: Readonly‹object›): any
refreshProps(): void
render(): Element
setState‹K›(state
: object | function | Pick‹object, K› | null, callback?
: function | undefined): void
shouldComponentUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): boolean
contextType: Context‹ContextObject›
displayName: string
Const
LegendView• LegendView: object = createReactView(KanvaLegendView)
new __type(props
: Partial‹ViewProps & Props›): object
context: React.ContextType‹typeof KanvaContext›
internalProps: InternalProps
isDebugEnabled: boolean
layoutParams? : LayoutProps | undefined
propHandlers: Record‹string, object›
propNames: string[]
props: Readonly‹Partial‹ViewProps & Props›› & Readonly‹object›
refs(): object
state: Readonly‹object›
view? : View‹ViewProps› | undefined
UNSAFE_componentWillMount(): void
UNSAFE_componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
UNSAFE_componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
componentDidCatch(error
: Error, errorInfo
: ErrorInfo): void
componentDidMount(): void
componentDidUpdate(): void
componentWillMount(): void
componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
componentWillUnmount(): void
componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
createAndAttachView(): void
forceUpdate(callback?
: function | undefined): void
getSnapshotBeforeUpdate(prevProps
: Readonly‹Partial‹ViewProps & Props››, prevState
: Readonly‹object›): any
refreshProps(): void
render(): Element
setState‹K›(state
: object | function | Pick‹object, K› | null, callback?
: function | undefined): void
shouldComponentUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): boolean
contextType: Context‹ContextObject›
displayName: string
Const
LineChartView• LineChartView: object = createReactView(KanvaLineChartView)
new __type(props
: Partial‹ViewProps & Props›): object
context: React.ContextType‹typeof KanvaContext›
internalProps: InternalProps
isDebugEnabled: boolean
layoutParams? : LayoutProps | undefined
propHandlers: Record‹string, object›
propNames: string[]
props: Readonly‹Partial‹ViewProps & Props›› & Readonly‹object›
refs(): object
state: Readonly‹object›
view? : View‹ViewProps› | undefined
UNSAFE_componentWillMount(): void
UNSAFE_componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
UNSAFE_componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
componentDidCatch(error
: Error, errorInfo
: ErrorInfo): void
componentDidMount(): void
componentDidUpdate(): void
componentWillMount(): void
componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
componentWillUnmount(): void
componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
createAndAttachView(): void
forceUpdate(callback?
: function | undefined): void
getSnapshotBeforeUpdate(prevProps
: Readonly‹Partial‹ViewProps & Props››, prevState
: Readonly‹object›): any
refreshProps(): void
render(): Element
setState‹K›(state
: object | function | Pick‹object, K› | null, callback?
: function | undefined): void
shouldComponentUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): boolean
contextType: Context‹ContextObject›
displayName: string
Const
PieChartView• PieChartView: object = createReactView(KanvaPieChartView)
new __type(props
: Partial‹ViewProps & Props›): object
context: React.ContextType‹typeof KanvaContext›
internalProps: InternalProps
isDebugEnabled: boolean
layoutParams? : LayoutProps | undefined
propHandlers: Record‹string, object›
propNames: string[]
props: Readonly‹Partial‹ViewProps & Props›› & Readonly‹object›
refs(): object
state: Readonly‹object›
view? : View‹ViewProps› | undefined
UNSAFE_componentWillMount(): void
UNSAFE_componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
UNSAFE_componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
componentDidCatch(error
: Error, errorInfo
: ErrorInfo): void
componentDidMount(): void
componentDidUpdate(): void
componentWillMount(): void
componentWillReceiveProps(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextContext
: any): void
componentWillUnmount(): void
componentWillUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): void
createAndAttachView(): void
forceUpdate(callback?
: function | undefined): void
getSnapshotBeforeUpdate(prevProps
: Readonly‹Partial‹ViewProps & Props››, prevState
: Readonly‹object›): any
refreshProps(): void
render(): Element
setState‹K›(state
: object | function | Pick‹object, K› | null, callback?
: function | undefined): void
shouldComponentUpdate(nextProps
: Readonly‹Partial‹ViewProps & Props››, nextState
: Readonly‹object›, nextContext
: any): boolean
contextType: Context‹ContextObject›
displayName: string
Ƭ AreaSelectEvent: DataContainerEvent‹AREA_SELECT, Rect | undefined›
Ƭ AxisLabelAccessor: function
▸ (value
: number, index
: number): string
Parameters:
Ƭ DataChangeEvent: DataContainerEvent‹DATA_CHANGE›
Ƭ DataContainerEventListener: function
▸ (action
: DataContainerEvent‹T, P›): P
Parameters:
Ƭ DataNormalizer: function
▸ (point
: XYPoint): NormalizedXYPoint
Parameters:
Ƭ DeepPartial: object
Ƭ GetScalesEvent: DataContainerEvent‹GET_SCALES, ScaleFunctions›
Ƭ PointAccessor: function
▸ (point
: DataPoint, index
: number, series
: DataPoint[]): XYPoint
Parameters:
Ƭ SimpleOnScaleListener: function
▸ (args
: SimpleOnScaleListenerArgs): void
Parameters:
Ƭ TooltipEventHandler: function
▸ (event
: TooltipEvent): void
Parameters:
Const
TOOLTIP_EXTENSION• TOOLTIP_EXTENSION: "DataContainerTooltipExtension" = "DataContainerTooltipExtension"
Const
TRANSFORM_EXTENSION• TRANSFORM_EXTENSION: "DataContainerTransformExtension" = "DataContainerTransformExtension"
Const
VIEW_TAG• VIEW_TAG: "LineChartView" = "LineChartView"
Const
X_SCALE_BAR_OFFSET• X_SCALE_BAR_OFFSET: 0.5 = 0.5
Const
performanceResults• performanceResults: Record‹string, PerformanceResults›
Const
calculateMinLineLength▸ calculateMinLineLength(start
: number, end
: number, scale
: ScaleFunction, customMinLength?
: MinLineChartChunkLength): number
Parameters:
Returns: number
Const
defaultNormalizeData▸ defaultNormalizeData(__namedParameters
: object): object | object
Parameters:
▪ __namedParameters: object
Returns: object | object
Const
findBestMatchInSortedArray▸ findBestMatchInSortedArray‹T›(array
: T[], matcher
: function): T | undefined
Type parameters:
▪ T
Parameters:
▪ array: T[]
▪ matcher: function
▸ (element
: T): number
Parameters:
Returns: T | undefined
Const
floorToNearest▸ floorToNearest(value
: number, nearest
: number): number
Parameters:
Returns: number
Const
getContinuousNumericScale▸ getContinuousNumericScale(scaleType
: DataScaleType): ScaleContinuousNumeric‹number, number›
Parameters:
Returns: ScaleContinuousNumeric‹number, number›
Const
getPaint▸ getPaint‹P›(paint
: P, contrastPaint
: P | undefined, backgroundIsBright
: boolean): P
Type parameters:
▪ P: Paint | undefined
Parameters:
Returns: P
Const
isTupleOfNumbers▸ isTupleOfNumbers(value
: unknown): value is [number, number]
Parameters:
Returns: value is [number, number]
Const
isXYArray▸ isXYArray(data
: any): data is XYPoint‹any›[]
Parameters:
Returns: data is XYPoint‹any›[]
Const
mergeXY▸ mergeXY(x
: number[], y
: number[]): XYPoint[]
Parameters:
Returns: XYPoint[]
Const
performanceCounter▸ performanceCounter(name
: string): end
Parameters:
Returns: end
Const
precision▸ precision(a
: number): number
Parameters:
Returns: number
Const
prepareAxisPoints▸ prepareAxisPoints(axisValues
: AxisPoint[], scale
: ScaleFunction): AxisPoint[]
Parameters:
Returns: AxisPoint[]
Const
prepareAxisValues▸ prepareAxisValues(scale
: ScaleFunction, params
: AxisParameters, seriesLength
: number): AxisPoint[]
Parameters:
Returns: AxisPoint[]
Const
roundToNearest▸ roundToNearest(value
: number, nearest
: number): number
Parameters:
Returns: number
Const
segmentizePoints▸ segmentizePoints‹In, Filter, Out›(data
: XYPoint‹In›[], filterBy
: Filter): XYPoint‹Out›[][]
Type parameters:
▪ In
▪ Filter
▪ Out
Parameters:
Returns: XYPoint‹Out›[][]
Const
DEFAULT_OPTIONS▪ pan: object
pointers: number = 1
▪ scale: object
drag: true = true
listenerThreshold: number = 1
multitouch: true = true
scroll: true = true
selectArea: false = false
limit: object
x: [number, number] = [1, 1]
y: [number, number] = [1, 1]
minSelectedAreaThreshold: object
x: number = 50
y: number = 0
Const
defaultStyle• alignment: LegendAlignment = LegendAlignment.ROW
• backgroundPaint: Paint‹› = new Paint() .setLineWidth(1.5)
• barRadius: number = 0
• barWidth: number = 0.5
• borders: Rect‹› = new Rect({left: 1, right: 1, top: 1, bottom: 1 })
• innerRadius: number = 0
• isBackgroundBright: boolean = true
• labelPadding: number = 4
• labelPaint: Paint‹› = new Paint()
• padding: number = 0
• paint: Paint‹› = new Paint().setFillStyle(rgba('#FFF', 0.5)).setStrokeStyle('#FFF')
• paints: object
• type: DataDisplayType = DataDisplayType.LINE
• wrapLabelsOnEdge: boolean = true
▪ background: object
paint: Paint‹› = new Paint() .setFillStyle(rgba('#FFF', .1))
radius: number = 0
width: number = 8
▪ foreground: object
paint: Paint‹› = new Paint() .setFillStyle(rgba('#FFF', .5))
radius: number = 0
width: number = 8
▪ minChunkLength: object
domain: number = 0
Const
labelPaintOverrides• textAlign: CENTER = TextAlign.CENTER
• textBaseline: BOTTOM = TextBaseline.BOTTOM
Ƭ CanvasCreator: function
▸ (options
: CanvasCreatorOptions): Canvas
Parameters:
Ƭ DeepReadonly: T extends Primitive ? T : DeepReadonlyObject‹T›
Ƭ DeepReadonlyObject: object
Ƭ DimensionInput: string | number | undefined | null
Ƭ FontStyle: "normal" | "italic" | "oblique"
Ƭ FontVariant: "normal" | "small-caps"
Ƭ FontWeight: "normal" | "bold" | "bolder" | "lighter" | 100 | "100" | 200 | "200" | 300 | "300" | 400 | "400" | 500 | "500" | 600 | "600" | 700 | "700" | 800 | "800" | 900 | "900"
Ƭ Id: number | string
Ƭ ImageClass: object
Ƭ OnAreaSelectListener: function
▸ (areaSelectEvent
: AreaSelectEvent): boolean
Parameters:
Ƭ OnDragListener: function
▸ (dragEvent
: DragEvent): boolean
Parameters:
Ƭ OnScaleListener: function
▸ (scaleEvent
: ScaleEvent): boolean
Parameters:
Ƭ Primitive: string | number | boolean | undefined | null
Ƭ RadiusInput: number | Partial‹Radius› | null | undefined
Ƭ RectInput: RectObjectInput | number
Ƭ SupportedDomPointerEvent: MouseEvent | WheelEvent | TouchEvent
Const
DEBUG_POINTER_EVENTS• DEBUG_POINTER_EVENTS: false = false
Const
DEFAULT_POINTER_COUNT• DEFAULT_POINTER_COUNT: 1 = 1
Const
MATCH_PARENT• MATCH_PARENT: -1 = -1
Const
PARENT_ID• PARENT_ID: -1 = -1
Const
WHEEL_SCROLL_SPAN• WHEEL_SCROLL_SPAN: 100 = 100
Const
WRAP_CONTENT• WRAP_CONTENT: -2 = -2
Const
colorRegex• colorRegex: RegExp‹› = /^(?:#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2}))|(?:#([0-9a-f])([0-9a-f])([0-9a-f]))|(?:rgb((\d+),\s*(\d+),\s*(\d+)))|(?:rgba((\d+),\s*(\d+),\s*(\d+),\s*(\d*.?\d+)))$/i
Const
defaultImageClass• defaultImageClass: undefined | object = (() => { try { // Browsers default return Image; } catch { return undefined; } })()
Const
defaultLayoutProps• defaultLayoutProps: LayoutProps = new LayoutParams().asProps()
Const
isBrowser• isBrowser: false | requestAnimationFrame & requestAnimationFrame = typeof window !== 'undefined' && window.requestAnimationFrame
Const
supportedDomPointerEvents• supportedDomPointerEvents: ("touchmove" | "mousemove" | "mousedown" | "touchstart" | "mouseover" | "mouseenter" | "touchcancel" | "mouseout" | "mouseup" | "touchend" | "wheel")[] = [ 'touchmove', 'mousemove', 'mousedown', 'touchstart', 'mouseover', 'mouseenter', 'touchcancel', 'mouseout', 'mouseup', 'touchend', 'wheel', ]
Const
calcDimension▸ calcDimension(dimension
: Dimension, parentDimension
: number): undefined | number
Parameters:
Returns: undefined | number
Const
createEventDispatcherParameters:
Returns: EventListener
▸ createLayoutMap‹K›(t
: Record‹K, LayoutProps›): object
Type parameters:
▪ K: string
Parameters:
Returns: object
Const
deepFreezeType parameters:
▪ T
Parameters:
Const
defaultCanvasCreator▸ defaultCanvasCreator(__namedParameters
: object): HTMLCanvasElement
Parameters:
▪ __namedParameters: object
Returns: HTMLCanvasElement
Const
domEventToPointerAction▸ domEventToPointerAction(event
: Event): PointerAction | undefined
Parameters:
Returns: PointerAction | undefined
Const
existingNonParentDependencyParameters:
Returns: id is number
Const
fillPointerEventDataParameters:
Returns: void
Const
getBox▸ getBox(width
: number, height
: number, scale
: number): object
Parameters:
Returns: object
str: string = +
style: string = font-size: 1px; padding: ${isSafari() ? height * scale / 2 : 0}px ${Math.floor(width * scale / 2)}px; color: transparent; line-height: ${height * scale}px;
Const
getElementOffset▸ getElementOffset(element
: HTMLElement, offset
: Offset): Offset
Parameters:
Returns: Offset
Const
horizontalLayoutDependenciesParameters:
Returns: number[]
Const
isBright▸ isBright(color
: Color): boolean
Parameters:
Returns: boolean
Const
isChrome▸ isChrome(): boolean
Returns: boolean
Const
isMouseEvent▸ isMouseEvent(event
: Event): event is MouseEvent
Parameters:
Returns: event is MouseEvent
Const
isSafari▸ isSafari(): boolean
Returns: boolean
Const
isTouchEvent▸ isTouchEvent(event
: Event): event is TouchEvent
Parameters:
Returns: event is TouchEvent
Const
isWheelEvent▸ isWheelEvent(event
: Event): event is WheelEvent
Parameters:
Returns: event is WheelEvent
Const
logPointerEventParameters:
Returns: void
Const
logScreenshotParameters:
Returns: void
Const
luminance▸ luminance(c
: Color): number
Parameters:
Returns: number
Const
mouseToPointer▸ mouseToPointer(event
: MouseEvent, offset
: Offset, canvasPointer
: CanvasPointer): void
Parameters:
Returns: void
Const
noContextError▸ noContextError(): Error
Returns: Error
Const
normalizeRadiusParameters:
Returns: Radius
Const
parseColor▸ parseColor(colorString
: string | undefined): typeof colorString extends undefined ? undefined : Color | undefined
Parameters:
Returns: typeof colorString extends undefined ? undefined : Color | undefined
Const
parseDimensionParameters:
Returns: Dimension
Const
parseFont▸ parseFont(__namedParameters
: object): string
Parameters:
▪ __namedParameters: object
Returns: string
Const
registerEventDispatcher▸ registerEventDispatcher(element
: Element, dispatcher
: EventListener): (Anonymous function)
Parameters:
Returns: (Anonymous function)
Const
removeDefaultProps▸ removeDefaultProps(props
: LayoutProps): any
Parameters:
Returns: any
Const
removeEqualProps▸ removeEqualProps(object
: any, defaultObject
: any): any
Parameters:
Returns: any
Const
removeUndefinedProps▸ removeUndefinedProps(object
: any): any
Parameters:
Returns: any
Const
resolveDimensionDependenciesType parameters:
▪ T: ViewLike
Parameters:
▪ children: T[]
▪ dependencySelector: function
Parameters:
Returns: T[]
Const
resolveLayoutParamsIdsParameters:
Returns: void
Const
rgba▸ rgba(color
: string, alpha
: number): string
Parameters:
Returns: string
Const
roundCoordinate▸ roundCoordinate(coordinate
: number): number
Parameters:
Returns: number
Const
scaleImageParameters:
Const
touchToPointer▸ touchToPointer(touch
: Touch | null, offset
: Offset, canvasPointer
: CanvasPointer): void
Parameters:
Returns: void
Const
verticalLayoutDependenciesParameters:
Returns: number[]
Const
xor▸ xor(a
: boolean, b
: boolean): boolean
Parameters:
Returns: boolean
Const
DefaultProps• ABOVE: undefined = undefined
• ALIGN_BOTTOM: undefined = undefined
• ALIGN_END: undefined = undefined
• ALIGN_START: undefined = undefined
• ALIGN_TOP: undefined = undefined
• BELOW: undefined = undefined
• CENTER_HORIZONTAL: boolean = false
• CENTER_VERTICAL: boolean = false
• HEIGHT: number = WRAP_CONTENT
• IS_ABSOLUTE: boolean = false
• IS_ANIMATED: boolean = false
• MAX_HEIGHT: number = Number.MAX_SAFE_INTEGER
• MAX_WIDTH: number = Number.MAX_SAFE_INTEGER
• MIN_HEIGHT: number = 0
• MIN_WIDTH: number = 0
• TO_END_OF: undefined = undefined
• TO_START_OF: undefined = undefined
• WIDTH: number = WRAP_CONTENT
• X: number = 0
• Y: number = 0
Const
defaultFont• fontFamily: string = "Arial"
• fontSize: number = 12
Const
defaultPaintOptions• font: string = parseFont(defaultFont)
• lineDash: never[] = []
• lineRounding: boolean = false
• lineWidth: number = 0
• textAlign: TextAlign = 'left' as TextAlign
• textBaseline: TextBaseline = 'bottom' as TextBaseline
• textDirection: CanvasDirection = 'ltr' as CanvasDirection
Const
zeroRadius• bl: number = 0
• br: number = 0
• tl: number = 0
• tr: number = 0
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type | Default |
---|---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
Name | Type |
---|---|
value
number
index
number
action
DataContainerEvent‹T, P›
point
point
DataPoint
index
number
series
DataPoint[]
args
event
start
number
end
number
scale
customMinLength?
x
number
y
number
element
T
value
number
nearest
number
scaleType
paint
P
contrastPaint
P | undefined
backgroundIsBright
boolean
value
unknown
data
any
x
number[]
y
number[]
name
string
a
number
axisValues
scale
scale
-
params
-
seriesLength
number
10
value
number
nearest
number
data
XYPoint‹In›[]
filterBy
Filter
options
areaSelectEvent
dragEvent
scaleEvent
dimension
parentDimension
number
t
Record‹K, LayoutProps›
object
T
height
number
width
number
event
Event
width
number
height
number
scale
number
element
HTMLElement
offset
color
event
Event
event
Event
event
Event
c
event
MouseEvent
offset
canvasPointer
colorString
string | undefined
fontFamily
string
fontSize
number
fontStyle
undefined | "normal" | "italic" | "oblique"
fontVariant
undefined | "normal" | "small-caps"
fontWeight
undefined | "normal" | "bold" | "bolder" | "lighter" | 100 | "100" | 200 | "200" | 300 | "300" | 400 | "400" | 500 | "500" | 600 | "600" | 700 | "700" | 800 | "800" | 900 | "900"
element
Element
dispatcher
EventListener
props
object
any
defaultObject
any
object
any
color
string
alpha
number
coordinate
number
touch
Touch | null
offset
canvasPointer
a
boolean
b
boolean
view
id
pointerEvent
view
event
Event
lp
pointerEvent
view
-
scale
number
1
radius
value
lp
layoutParams
context
scaleType
imageWidth
number
imageHeight
number
innerWidth
number
innerHeight
number
rect
lp