konva
Version:
<p align="center"> <img src="https://raw.githubusercontent.com/konvajs/konvajs.github.io/master/apple-touch-icon-180x180.png" alt="Konva logo" height="180" /> </p>
827 lines (825 loc) • 28.2 kB
TypeScript
import { Collection, Transform } from './Util';
import { SceneCanvas } from './Canvas';
import { Container } from './Container';
import { GetSet, Vector2d } from './types';
export declare type Filter = (this: Node, imageData: ImageData) => void;
declare type globalCompositeOperationType = '' | 'source-over' | 'source-in' | 'source-out' | 'source-atop' | 'destination-over' | 'destination-in' | 'destination-out' | 'destination-atop' | 'lighter' | 'copy' | 'xor' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity';
/**
* Node constructor. Nodes are entities that can be transformed, layered,
* and have bound events. The stage, layers, groups, and shapes all extend Node.
* @constructor
* @memberof Konva
* @param {Object} config
* @@nodeParams
*/
export declare abstract class Node {
_id: number;
eventListeners: {};
attrs: any;
index: number;
parent: Container;
_cache: any;
_filterUpToDate: boolean;
_isUnderCache: boolean;
children: Collection<Node>;
nodeType: string;
className: string;
constructor(config: any);
hasChildren(): boolean;
getChildren(): Collection<Node>;
/** @lends Konva.Node.prototype */
_clearCache(attr: any): void;
_getCache(attr: any, privateGetter: any): any;
_clearSelfAndDescendantCache(attr?: any): void;
/**
* clear cached canvas
* @method
* @name Konva.Node#clearCache
* @returns {Konva.Node}
* @example
* node.clearCache();
*/
clearCache(): this;
/**
* cache node to improve drawing performance, apply filters, or create more accurate
* hit regions. For all basic shapes size of cache canvas will be automatically detected.
* If you need to cache your custom `Konva.Shape` instance you have to pass shape's bounding box
* properties. Look at [https://konvajs.github.io/docs/performance/Shape_Caching.html](https://konvajs.github.io/docs/performance/Shape_Caching.html) for more information.
* @method
* @name Konva.Node#cache
* @param {Object} [config]
* @param {Number} [config.x]
* @param {Number} [config.y]
* @param {Number} [config.width]
* @param {Number} [config.height]
* @param {Number} [config.offset] increase canvas size by `offset` pixel in all directions.
* @param {Boolean} [config.drawBorder] when set to true, a red border will be drawn around the cached
* region for debugging purposes
* @param {Number} [config.pixelRatio] change quality (or pixel ratio) of cached image. pixelRatio = 2 will produce 2x sized cache.
* @returns {Konva.Node}
* @example
* // cache a shape with the x,y position of the bounding box at the center and
* // the width and height of the bounding box equal to the width and height of
* // the shape obtained from shape.width() and shape.height()
* image.cache();
*
* // cache a node and define the bounding box position and size
* node.cache({
* x: -30,
* y: -30,
* width: 100,
* height: 200
* });
*
* // cache a node and draw a red border around the bounding box
* // for debugging purposes
* node.cache({
* x: -30,
* y: -30,
* width: 100,
* height: 200,
* offset : 10,
* drawBorder: true
* });
*/
cache(config: any): this;
abstract drawScene(canvas?: any, top?: any, caching?: any, skipBuffer?: any): void;
abstract drawHit(canvas?: any, top?: any, caching?: any, skipBuffer?: any): void;
/**
* Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc).
* The rectangle position is relative to parent container.
* The purpose of the method is similar to getBoundingClientRect API of the DOM.
* @method
* @name Konva.Node#getClientRect
* @param {Object} config
* @param {Boolean} [config.skipTransform] should we apply transform to node for calculating rect?
* @param {Boolean} [config.skipShadow] should we apply shadow to the node for calculating bound box?
* @param {Boolean} [config.skipStroke] should we apply stroke to the node for calculating bound box?
* @param {Object} [config.relativeTo] calculate client rect relative to one of the parents
* @returns {Object} rect with {x, y, width, height} properties
* @example
* var rect = new Konva.Rect({
* width : 100,
* height : 100,
* x : 50,
* y : 50,
* strokeWidth : 4,
* stroke : 'black',
* offsetX : 50,
* scaleY : 2
* });
*
* // get client rect without think off transformations (position, rotation, scale, offset, etc)
* rect.getClientRect({ skipTransform: true});
* // returns {
* // x : -2, // two pixels for stroke / 2
* // y : -2,
* // width : 104, // increased by 4 for stroke
* // height : 104
* //}
*
* // get client rect with transformation applied
* rect.getClientRect();
* // returns Object {x: -2, y: 46, width: 104, height: 208}
*/
getClientRect(config?: {
skipTransform?: boolean;
skipShadow?: boolean;
skipStroke?: boolean;
relativeTo?: Container;
}): {
x: number;
y: number;
width: number;
height: number;
};
_transformedRect(rect: any, top: any): {
x: any;
y: any;
width: number;
height: number;
};
_drawCachedSceneCanvas(context: any): void;
_drawCachedHitCanvas(context: any): void;
_getCachedSceneCanvas(): any;
/**
* bind events to the node. KonvaJS supports mouseover, mousemove,
* mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, contextmenu, click, dblclick, touchstart, touchmove,
* touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Konva Stage supports
* contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, contentWheel, contentContextmenu
* contentClick, contentDblclick, contentTouchstart, contentTouchmove, contentTouchend, contentTap,
* and contentDblTap. Pass in a string of events delimited by a space to bind multiple events at once
* such as 'mousedown mouseup mousemove'. Include a namespace to bind an
* event by name such as 'click.foobar'.
* @method
* @name Konva.Node#on
* @param {String} evtStr e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo'
* @param {Function} handler The handler function is passed an event object
* @returns {Konva.Node}
* @example
* // add click listener
* node.on('click', function() {
* console.log('you clicked me!');
* });
*
* // get the target node
* node.on('click', function(evt) {
* console.log(evt.target);
* });
*
* // stop event propagation
* node.on('click', function(evt) {
* evt.cancelBubble = true;
* });
*
* // bind multiple listeners
* node.on('click touchstart', function() {
* console.log('you clicked/touched me!');
* });
*
* // namespace listener
* node.on('click.foo', function() {
* console.log('you clicked/touched me!');
* });
*
* // get the event type
* node.on('click tap', function(evt) {
* var eventType = evt.type;
* });
*
* // get native event object
* node.on('click tap', function(evt) {
* var nativeEvent = evt.evt;
* });
*
* // for change events, get the old and new val
* node.on('xChange', function(evt) {
* var oldVal = evt.oldVal;
* var newVal = evt.newVal;
* });
*
* // get event targets
* // with event delegations
* layer.on('click', 'Group', function(evt) {
* var shape = evt.target;
* var group = evtn.currentTarger;
* });
*/
on(evtStr: any, handler: any): any;
/**
* remove event bindings from the node. Pass in a string of
* event types delimmited by a space to remove multiple event
* bindings at once such as 'mousedown mouseup mousemove'.
* include a namespace to remove an event binding by name
* such as 'click.foobar'. If you only give a name like '.foobar',
* all events in that namespace will be removed.
* @method
* @name Konva.Node#off
* @param {String} evtStr e.g. 'click', 'mousedown touchstart', '.foobar'
* @returns {Konva.Node}
* @example
* // remove listener
* node.off('click');
*
* // remove multiple listeners
* node.off('click touchstart');
*
* // remove listener by name
* node.off('click.foo');
*/
off(evtStr: any, callback?: any): this;
dispatchEvent(evt: any): this;
addEventListener(type: any, handler: any): this;
removeEventListener(type: any): this;
_delegate(event: any, selector: any, handler: any): void;
/**
* remove a node from parent, but don't destroy. You can reuse the node later.
* @method
* @name Konva.Node#remove
* @returns {Konva.Node}
* @example
* node.remove();
*/
remove(): this;
/**
* remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy().
* If the node is a container (Group, Stage or Layer) it will destroy all children too.
* @method
* @name Konva.Node#destroy
* @example
* node.destroy();
*/
destroy(): this;
/**
* get attr
* @method
* @name Konva.Node#getAttr
* @param {String} attr
* @returns {Integer|String|Object|Array}
* @example
* var x = node.getAttr('x');
*/
getAttr(attr: any): any;
/**
* get ancestors
* @method
* @name Konva.Node#getAncestors
* @returns {Konva.Collection}
* @example
* shape.getAncestors().each(function(node) {
* console.log(node.getId());
* })
*/
getAncestors(): Collection<Node>;
/**
* get attrs object literal
* @method
* @name Konva.Node#getAttrs
* @returns {Object}
*/
getAttrs(): any;
/**
* set multiple attrs at once using an object literal
* @method
* @name Konva.Node#setAttrs
* @param {Object} config object containing key value pairs
* @returns {Konva.Node}
* @example
* node.setAttrs({
* x: 5,
* fill: 'red'
* });
*/
setAttrs(config: any): this;
/**
* determine if node is listening for events by taking into account ancestors.
*
* Parent | Self | isListening
* listening | listening |
* ----------+-----------+------------
* T | T | T
* T | F | F
* F | T | T
* F | F | F
* ----------+-----------+------------
* T | I | T
* F | I | F
* I | I | T
*
* @method
* @name Konva.Node#isListening
* @returns {Boolean}
*/
isListening(): any;
_isListening(): any;
/**
* determine if node is visible by taking into account ancestors.
*
* Parent | Self | isVisible
* visible | visible |
* ----------+-----------+------------
* T | T | T
* T | F | F
* F | T | T
* F | F | F
* ----------+-----------+------------
* T | I | T
* F | I | F
* I | I | T
* @method
* @name Konva.Node#isVisible
* @returns {Boolean}
*/
isVisible(): any;
_isVisible(relativeTo: any): any;
/**
* determine if listening is enabled by taking into account descendants. If self or any children
* have _isListeningEnabled set to true, then self also has listening enabled.
* @method
* @name Konva.Node#shouldDrawHit
* @returns {Boolean}
*/
shouldDrawHit(): any;
/**
* show node. set visible = true
* @method
* @name Konva.Node#show
* @returns {Konva.Node}
*/
show(): this;
/**
* hide node. Hidden nodes are no longer detectable
* @method
* @name Konva.Node#hide
* @returns {Konva.Node}
*/
hide(): this;
getZIndex(): number;
/**
* get absolute z-index which takes into account sibling
* and ancestor indices
* @method
* @name Konva.Node#getAbsoluteZIndex
* @returns {Integer}
*/
getAbsoluteZIndex(): number;
/**
* get node depth in node tree. Returns an integer.
* e.g. Stage depth will always be 0. Layers will always be 1. Groups and Shapes will always
* be >= 2
* @method
* @name Konva.Node#getDepth
* @returns {Integer}
*/
getDepth(): number;
setPosition(pos: any): this;
getPosition(): {
x: number;
y: number;
};
getAbsolutePosition(top: any): {
x: number;
y: number;
};
setAbsolutePosition(pos: any): this;
_setTransform(trans: any): void;
_clearTransform(): {
x: number;
y: number;
rotation: number;
scaleX: number;
scaleY: number;
offsetX: number;
offsetY: number;
skewX: number;
skewY: number;
};
/**
* move node by an amount relative to its current position
* @method
* @name Konva.Node#move
* @param {Object} change
* @param {Number} change.x
* @param {Number} change.y
* @returns {Konva.Node}
* @example
* // move node in x direction by 1px and y direction by 2px
* node.move({
* x: 1,
* y: 2)
* });
*/
move(change: any): this;
_eachAncestorReverse(func: any, top: any): void;
/**
* rotate node by an amount in degrees relative to its current rotation
* @method
* @name Konva.Node#rotate
* @param {Number} theta
* @returns {Konva.Node}
*/
rotate(theta: any): this;
/**
* move node to the top of its siblings
* @method
* @name Konva.Node#moveToTop
* @returns {Boolean}
*/
moveToTop(): boolean;
/**
* move node up
* @method
* @name Konva.Node#moveUp
* @returns {Boolean} flag is moved or not
*/
moveUp(): boolean;
/**
* move node down
* @method
* @name Konva.Node#moveDown
* @returns {Boolean}
*/
moveDown(): boolean;
/**
* move node to the bottom of its siblings
* @method
* @name Konva.Node#moveToBottom
* @returns {Boolean}
*/
moveToBottom(): boolean;
setZIndex(zIndex: any): false | this;
/**
* get absolute opacity
* @method
* @name Konva.Node#getAbsoluteOpacity
* @returns {Number}
*/
getAbsoluteOpacity(): any;
_getAbsoluteOpacity(): number;
/**
* move node to another container
* @method
* @name Konva.Node#moveTo
* @param {Container} newContainer
* @returns {Konva.Node}
* @example
* // move node from current layer into layer2
* node.moveTo(layer2);
*/
moveTo(newContainer: any): this;
/**
* convert Node into an object for serialization. Returns an object.
* @method
* @name Konva.Node#toObject
* @returns {Object}
*/
toObject(): any;
/**
* convert Node into a JSON string. Returns a JSON string.
* @method
* @name Konva.Node#toJSON
* @returns {String}
*/
toJSON(): string;
/**
* get parent container
* @method
* @name Konva.Node#getParent
* @returns {Konva.Node}
*/
getParent(): Container;
/**
* get all ancestros (parent then parent of the parent, etc) of the node
* @method
* @name Konva.Node#findAncestors
* @param {String} [selector] selector for search
* @param {Boolean} [includeSelf] show we think that node is ancestro itself?
* @param {Konva.Node} [stopNode] optional node where we need to stop searching (one of ancestors)
* @returns {Array} [ancestors]
* @example
* // get one of the parent group
* var parentGroups = node.findAncestors('Group');
*/
findAncestors(selector: any, includeSelf: any, stopNode: any): any[];
isAncestorOf(node: any): boolean;
/**
* get ancestor (parent or parent of the parent, etc) of the node that match passed selector
* @method
* @name Konva.Node#findAncestor
* @param {String} [selector] selector for search
* @param {Boolean} [includeSelf] show we think that node is ancestro itself?
* @param {Konva.Node} [stopNode] optional node where we need to stop searching (one of ancestors)
* @returns {Konva.Node} ancestor
* @example
* // get one of the parent group
* var group = node.findAncestors('.mygroup');
*/
findAncestor(selector: any, includeSelf: any, stopNode: any): any;
_isMatch(selector: any): boolean;
/**
* get layer ancestor
* @method
* @name Konva.Node#getLayer
* @returns {Konva.Layer}
*/
getLayer(): any;
/**
* get stage ancestor
* @method
* @name Konva.Node#getStage
* @returns {Konva.Stage}
*/
getStage(): any;
_getStage(): any;
/**
* fire event
* @method
* @name Konva.Node#fire
* @param {String} eventType event type. can be a regular event, like click, mouseover, or mouseout, or it can be a custom event, like myCustomEvent
* @param {Event} [evt] event object
* @param {Boolean} [bubble] setting the value to false, or leaving it undefined, will result in the event
* not bubbling. Setting the value to true will result in the event bubbling.
* @returns {Konva.Node}
* @example
* // manually fire click event
* node.fire('click');
*
* // fire custom event
* node.fire('foo');
*
* // fire custom event with custom event object
* node.fire('foo', {
* bar: 10
* });
*
* // fire click event that bubbles
* node.fire('click', null, true);
*/
fire(eventType: any, evt: any, bubble?: any): this;
/**
* get absolute transform of the node which takes into
* account its ancestor transforms
* @method
* @name Konva.Node#getAbsoluteTransform
* @returns {Konva.Transform}
*/
getAbsoluteTransform(top?: any): any;
_getAbsoluteTransform(top: any): Transform;
/**
* get absolute scale of the node which takes into
* account its ancestor scales
* @method
* @name Konva.Node#getAbsoluteScale
* @returns {Konva.Transform}
*/
getAbsoluteScale(top?: any): any;
_getAbsoluteScale(top: any): {
x: number;
y: number;
};
/**
* get transform of the node
* @method
* @name Konva.Node#getTransform
* @returns {Konva.Transform}
*/
getTransform(): any;
_getTransform(): Transform;
/**
* clone node. Returns a new Node instance with identical attributes. You can also override
* the node properties with an object literal, enabling you to use an existing node as a template
* for another node
* @method
* @name Konva.Node#clone
* @param {Object} obj override attrs
* @returns {Konva.Node}
* @example
* // simple clone
* var clone = node.clone();
*
* // clone a node and override the x position
* var clone = rect.clone({
* x: 5
* });
*/
clone(obj: any): any;
_toKonvaCanvas(config: any): SceneCanvas;
/**
* converts node into an canvas element.
* @method
* @name Konva.Node#toCanvas
* @param {Object} config
* @param {Function} config.callback function executed when the composite has completed
* @param {Number} [config.x] x position of canvas section
* @param {Number} [config.y] y position of canvas section
* @param {Number} [config.width] width of canvas section
* @param {Number} [config.height] height of canvas section
* @paremt {Number} [config.pixelRatio] pixelRatio of ouput image. Default is 1.
* @example
* var canvas = node.toCanvas();
*/
toCanvas(config: any): HTMLCanvasElement;
/**
* Creates a composite data URL (base64 string). If MIME type is not
* specified, then "image/png" will result. For "image/jpeg", specify a quality
* level as quality (range 0.0 - 1.0)
* @method
* @name Konva.Node#toDataURL
* @param {Object} config
* @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
* "image/png" is the default
* @param {Number} [config.x] x position of canvas section
* @param {Number} [config.y] y position of canvas section
* @param {Number} [config.width] width of canvas section
* @param {Number} [config.height] height of canvas section
* @param {Number} [config.quality] jpeg quality. If using an "image/jpeg" mimeType,
* you can specify the quality from 0 to 1, where 0 is very poor quality and 1
* is very high quality
* @param {Number} [config.pixelRatio] pixelRatio of output image url. Default is 1
* @returns {String}
*/
toDataURL(config: any): string;
/**
* converts node into an image. Since the toImage
* method is asynchronous, a callback is required. toImage is most commonly used
* to cache complex drawings as an image so that they don't have to constantly be redrawn
* @method
* @name Konva.Node#toImage
* @param {Object} config
* @param {Function} config.callback function executed when the composite has completed
* @param {String} [config.mimeType] can be "image/png" or "image/jpeg".
* "image/png" is the default
* @param {Number} [config.x] x position of canvas section
* @param {Number} [config.y] y position of canvas section
* @param {Number} [config.width] width of canvas section
* @param {Number} [config.height] height of canvas section
* @param {Number} [config.quality] jpeg quality. If using an "image/jpeg" mimeType,
* you can specify the quality from 0 to 1, where 0 is very poor quality and 1
* is very high quality
* @paremt {Number} [config.pixelRatio] pixelRatio of ouput image. Default is 1.
* @example
* var image = node.toImage({
* callback(img) {
* // do stuff with img
* }
* });
*/
toImage(config: any): void;
setSize(size: any): this;
getSize(): {
width: number;
height: number;
};
/**
* get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc.
* @method
* @name Konva.Node#getClassName
* @returns {String}
*/
getClassName(): string;
/**
* get the node type, which may return Stage, Layer, Group, or Shape
* @method
* @name Konva.Node#getTranslation
* @returns {String}
*/
getType(): string;
getDragDistance(): any;
_get(selector: any): this[];
_off(type: any, name?: any, callback?: any): void;
_fireChangeEvent(attr: any, oldVal: any, newVal: any): void;
setId(id: any): this;
setName(name: any): this;
/**
* add name to node
* @method
* @name Konva.Node#addName
* @param {String} name
* @returns {Konva.Node}
* @example
* node.name('red');
* node.addName('selected');
* node.name(); // return 'red selected'
*/
addName(name: any): this;
/**
* check is node has name
* @method
* @name Konva.Node#hasName
* @param {String} name
* @returns {Boolean}
* @example
* node.name('red');
* node.hasName('red'); // return true
* node.hasName('selected'); // return false
*/
hasName(name: any): boolean;
/**
* remove name from node
* @method
* @name Konva.Node#removeName
* @param {String} name
* @returns {Konva.Node}
* @example
* node.name('red selected');
* node.removeName('selected');
* node.hasName('selected'); // return false
* node.name(); // return 'red'
*/
removeName(name: any): this;
/**
* set attr
* @method
* @name Konva.Node#setAttr
* @param {String} attr
* @param {*} val
* @returns {Konva.Node}
* @example
* node.setAttr('x', 5);
*/
setAttr(attr: any, val: any): this;
_setAttr(key: any, val: any): void;
_setComponentAttr(key: any, component: any, val: any): void;
_fireAndBubble(eventType: any, evt: any, compareShape?: any): void;
_fire(eventType: any, evt: any): void;
/**
* draw both scene and hit graphs. If the node being drawn is the stage, all of the layers will be cleared and redrawn
* @method
* @name Konva.Node#draw
* @returns {Konva.Node}
*/
draw(): this;
preventDefault: GetSet<boolean, this>;
blue: GetSet<number, this>;
brightness: GetSet<number, this>;
contrast: GetSet<number, this>;
blurRadius: GetSet<number, this>;
green: GetSet<number, this>;
hue: GetSet<number, this>;
kaleidoscopeAngle: GetSet<number, this>;
kaleidoscopePower: GetSet<number, this>;
levels: GetSet<number, this>;
noise: GetSet<number, this>;
pixelSize: GetSet<number, this>;
red: GetSet<number, this>;
saturation: GetSet<number, this>;
threshold: GetSet<number, this>;
value: GetSet<number, this>;
dragBoundFunc: GetSet<(pos: Vector2d) => Vector2d, this>;
draggable: GetSet<boolean, this>;
embossBlend: GetSet<boolean, this>;
embossDirection: GetSet<string, this>;
embossStrength: GetSet<number, this>;
embossWhiteLevel: GetSet<number, this>;
enhance: GetSet<number, this>;
filters: GetSet<any[], this>;
position: GetSet<Vector2d, this>;
size: GetSet<Vector2d, this>;
id: GetSet<string, this>;
listening: GetSet<boolean | 'inherit', this>;
name: GetSet<string, this>;
offset: GetSet<Vector2d, this>;
offsetX: GetSet<number, this>;
offsetY: GetSet<number, this>;
opacity: GetSet<number, this>;
rotation: GetSet<number, this>;
zIndex: GetSet<number, this>;
scale: GetSet<Vector2d, this>;
scaleX: GetSet<number, this>;
scaleY: GetSet<number, this>;
skew: GetSet<Vector2d, this>;
skewX: GetSet<number, this>;
skewY: GetSet<number, this>;
startDrag: () => void;
stopDrag: () => void;
to: (params: any) => void;
_setDragPosition: (pos: Vector2d) => void;
setDraggable: (val: boolean) => void;
isDragging: () => boolean;
_listenDrag: () => void;
_dragChange: () => void;
_dragCleanup: () => void;
transformsEnabled: GetSet<string, this>;
visible: GetSet<boolean | 'inherit', this>;
width: GetSet<number, this>;
height: GetSet<number, this>;
x: GetSet<number, this>;
y: GetSet<number, this>;
globalCompositeOperation: GetSet<globalCompositeOperationType, this>;
/**
* create node with JSON string or an Object. De-serializtion does not generate custom
* shape drawing functions, images, or event handlers (this would make the
* serialized object huge). If your app uses custom shapes, images, and
* event handlers (it probably does), then you need to select the appropriate
* shapes after loading the stage and set these properties via on(), setSceneFunc(),
* and setImage() methods
* @method
* @memberof Konva.Node
* @param {String|Object} json string or object
* @param {Element} [container] optional container dom element used only if you're
* creating a stage node
*/
static create(data: any, container: any): any;
static _createNode(obj: any, container?: any): any;
}
export {};