mirror of
https://github.com/konvajs/konva.git
synced 2025-07-16 01:31:19 +08:00
1806 lines
56 KiB
JavaScript
1806 lines
56 KiB
JavaScript
(function() {
|
|
// CONSTANTS
|
|
var ABSOLUTE_OPACITY = 'absoluteOpacity',
|
|
ABSOLUTE_TRANSFORM = 'absoluteTransform',
|
|
BEFORE = 'before',
|
|
CHANGE = 'Change',
|
|
CHILDREN = 'children',
|
|
DOT = '.',
|
|
EMPTY_STRING = '',
|
|
GET = 'get',
|
|
ID = 'id',
|
|
KINETIC = 'kinetic',
|
|
LISTENING = 'listening',
|
|
//LISTENING_ENABLED = 'listeningEnabled',
|
|
MOUSEENTER = 'mouseenter',
|
|
MOUSELEAVE = 'mouseleave',
|
|
NAME = 'name',
|
|
SET = 'set',
|
|
SHAPE = 'Shape',
|
|
SPACE = ' ',
|
|
STAGE = 'stage',
|
|
TRANSFORM = 'transform',
|
|
UPPER_STAGE = 'Stage',
|
|
VISIBLE = 'visible',
|
|
|
|
TRANSFORM_CHANGE_STR = [
|
|
'xChange.kinetic',
|
|
'yChange.kinetic',
|
|
'scaleXChange.kinetic',
|
|
'scaleYChange.kinetic',
|
|
'skewXChange.kinetic',
|
|
'skewYChange.kinetic',
|
|
'rotationChange.kinetic',
|
|
'offsetXChange.kinetic',
|
|
'offsetYChange.kinetic',
|
|
'transformsEnabledChange.kinetic'
|
|
].join(SPACE);
|
|
|
|
Kinetic.Util.addMethods(Kinetic.Node, {
|
|
_init: function(config) {
|
|
var that = this;
|
|
this._id = Kinetic.idCounter++;
|
|
this.eventListeners = {};
|
|
this.attrs = {};
|
|
this._cache = {};
|
|
this.setAttrs(config);
|
|
|
|
// event bindings for cache handling
|
|
this.on(TRANSFORM_CHANGE_STR, function() {
|
|
this._clearCache(TRANSFORM);
|
|
that._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
|
|
});
|
|
this.on('visibleChange.kinetic', function() {
|
|
that._clearSelfAndDescendantCache(VISIBLE);
|
|
});
|
|
this.on('listeningChange.kinetic', function() {
|
|
that._clearSelfAndDescendantCache(LISTENING);
|
|
});
|
|
this.on('opacityChange.kinetic', function() {
|
|
that._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
|
|
});
|
|
},
|
|
_clearCache: function(attr){
|
|
if (attr) {
|
|
delete this._cache[attr];
|
|
}
|
|
else {
|
|
this._cache = {};
|
|
}
|
|
},
|
|
_getCache: function(attr, privateGetter){
|
|
var cache = this._cache[attr];
|
|
|
|
// if not cached, we need to set it using the private getter method.
|
|
if (cache === undefined) {
|
|
this._cache[attr] = privateGetter.call(this);
|
|
}
|
|
|
|
return this._cache[attr];
|
|
},
|
|
/*
|
|
* when the logic for a cached result depends on ancestor propagation, use this
|
|
* method to clear self and children cache
|
|
*/
|
|
_clearSelfAndDescendantCache: function(attr) {
|
|
this._clearCache(attr);
|
|
|
|
if (this.children) {
|
|
this.getChildren().each(function(node) {
|
|
node._clearSelfAndDescendantCache(attr);
|
|
});
|
|
}
|
|
},
|
|
/**
|
|
* clear cached canvas
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Node}
|
|
* @example
|
|
* node.clearCache();
|
|
*/
|
|
clearCache: function(attr) {
|
|
delete this._cache.canvas;
|
|
},
|
|
/**
|
|
* cache node to improve drawing performance.
|
|
* NOTE: if you have filters applied to your node, your shape is already cached.
|
|
* explicitly calling cache() will override your filters.
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Node}
|
|
* @example
|
|
* node.cache();
|
|
*/
|
|
cache: function(box) {
|
|
var x = box.x || 0,
|
|
y = box.y || 0,
|
|
sceneCanvasCache = new Kinetic.SceneCanvas({
|
|
pixelRatio: 1,
|
|
width: box.width,
|
|
height: box.height
|
|
}),
|
|
hitCanvasCache = new Kinetic.HitCanvas({
|
|
pixelRatio: 1,
|
|
width: box.width,
|
|
height: box.height
|
|
}),
|
|
origTransEnabled = this.transformsEnabled(),
|
|
origX = this.x(),
|
|
origY = this.y();
|
|
|
|
this.transformsEnabled('position');
|
|
this.x(x * -1);
|
|
this.y(y * -1);
|
|
|
|
this.drawScene(sceneCanvasCache);
|
|
this.drawHit(hitCanvasCache);
|
|
|
|
this.x(origX);
|
|
this.y(origY);
|
|
this.transformsEnabled(origTransEnabled);
|
|
|
|
this._cache.canvas = {
|
|
scene: sceneCanvasCache,
|
|
hit: hitCanvasCache,
|
|
x: x,
|
|
y: y
|
|
};
|
|
|
|
return this;
|
|
},
|
|
/*
|
|
* the default isDraggable method returns false.
|
|
* if the DragAndDrop module is included, this is overwritten
|
|
*/
|
|
isDraggable: function() {
|
|
return false;
|
|
},
|
|
/**
|
|
* bind events to the node. KineticJS supports mouseover, mousemove,
|
|
* mouseout, mouseenter, mouseleave, mousedown, mouseup, click, dblclick, touchstart, touchmove,
|
|
* touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Kinetic Stage supports
|
|
* contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup,
|
|
* contentClick, contentDblclick, contentTouchstart, contentTouchmove, contentTouchend, contentTap,
|
|
* and contentDblTap. Pass in a string of events delimmited 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
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {String} evtStr e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo'
|
|
* @param {Function} handler The handler function is passed an event object
|
|
* @returns {Kinetic.Node}
|
|
* @example
|
|
* // add click listener<br>
|
|
* node.on('click', function() {<br>
|
|
* console.log('you clicked me!');<br>
|
|
* });<br><br>
|
|
*
|
|
* // get the target node<br>
|
|
* node.on('click', function(evt) {<br>
|
|
* console.log(evt.targetNode);<br>
|
|
* });<br><br>
|
|
*
|
|
* // stop event propagation<br>
|
|
* node.on('click', function(evt) {<br>
|
|
* evt.cancelBubble = true;<br>
|
|
* });<br><br>
|
|
*
|
|
* // bind multiple listeners<br>
|
|
* node.on('click touchstart', function() {<br>
|
|
* console.log('you clicked/touched me!');<br>
|
|
* });<br><br>
|
|
*
|
|
* // namespace listener<br>
|
|
* node.on('click.foo', function() {<br>
|
|
* console.log('you clicked/touched me!');<br>
|
|
* });
|
|
*/
|
|
on: function(evtStr, handler) {
|
|
var events = evtStr.split(SPACE),
|
|
len = events.length,
|
|
n, event, parts, baseEvent, name;
|
|
|
|
/*
|
|
* loop through types and attach event listeners to
|
|
* each one. eg. 'click mouseover.namespace mouseout'
|
|
* will create three event bindings
|
|
*/
|
|
for(n = 0; n < len; n++) {
|
|
event = events[n];
|
|
parts = event.split(DOT);
|
|
baseEvent = parts[0];
|
|
name = parts[1] || EMPTY_STRING;
|
|
|
|
// create events array if it doesn't exist
|
|
if(!this.eventListeners[baseEvent]) {
|
|
this.eventListeners[baseEvent] = [];
|
|
}
|
|
|
|
this.eventListeners[baseEvent].push({
|
|
name: name,
|
|
handler: handler
|
|
});
|
|
|
|
// NOTE: this flag is set to true when any event handler is added, even non
|
|
// mouse or touch gesture events. This improves performance for most
|
|
// cases where users aren't using events, but is still very light weight.
|
|
// To ensure perfect accuracy, devs can explicitly set listening to false.
|
|
/*
|
|
if (name !== KINETIC) {
|
|
this._listeningEnabled = true;
|
|
this._clearSelfAndAncestorCache(LISTENING_ENABLED);
|
|
}
|
|
*/
|
|
}
|
|
|
|
return this;
|
|
},
|
|
/**
|
|
* 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
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {String} evtStr e.g. 'click', 'mousedown touchstart', '.foobar'
|
|
* @returns {Kinetic.Node}
|
|
* @example
|
|
* // remove listener<br>
|
|
* node.off('click');<br><br>
|
|
*
|
|
* // remove multiple listeners<br>
|
|
* node.off('click touchstart');<br><br>
|
|
*
|
|
* // remove listener by name<br>
|
|
* node.off('click.foo');
|
|
*/
|
|
off: function(evtStr) {
|
|
var events = evtStr.split(SPACE),
|
|
len = events.length,
|
|
n, t, event, parts, baseEvent, name;
|
|
|
|
for(n = 0; n < len; n++) {
|
|
event = events[n];
|
|
parts = event.split(DOT);
|
|
baseEvent = parts[0];
|
|
name = parts[1];
|
|
|
|
if(baseEvent) {
|
|
if(this.eventListeners[baseEvent]) {
|
|
this._off(baseEvent, name);
|
|
}
|
|
}
|
|
else {
|
|
for(t in this.eventListeners) {
|
|
this._off(t, name);
|
|
}
|
|
}
|
|
}
|
|
return this;
|
|
},
|
|
/**
|
|
* remove self from parent, but don't destroy
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Node}
|
|
* @example
|
|
* node.remove();
|
|
*/
|
|
remove: function() {
|
|
var parent = this.getParent();
|
|
|
|
if(parent && parent.children) {
|
|
parent.children.splice(this.index, 1);
|
|
parent._setChildrenIndices();
|
|
delete this.parent;
|
|
}
|
|
|
|
// every cached attr that is calculated via node tree
|
|
// traversal must be cleared when removing a node
|
|
this._clearSelfAndDescendantCache(STAGE);
|
|
this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
|
|
this._clearSelfAndDescendantCache(VISIBLE);
|
|
this._clearSelfAndDescendantCache(LISTENING);
|
|
this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
|
|
|
|
return this;
|
|
},
|
|
/**
|
|
* remove and destroy self
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @example
|
|
* node.destroy();
|
|
*/
|
|
destroy: function() {
|
|
// remove from ids and names hashes
|
|
Kinetic._removeId(this.getId());
|
|
Kinetic._removeName(this.getName(), this._id);
|
|
|
|
this.remove();
|
|
},
|
|
/**
|
|
* get attr
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {String} attr
|
|
* @returns {Integer|String|Object|Array}
|
|
* @example
|
|
* var x = node.getAttr('x');
|
|
*/
|
|
getAttr: function(attr) {
|
|
var method = GET + Kinetic.Util._capitalize(attr);
|
|
if(Kinetic.Util._isFunction(this[method])) {
|
|
return this[method]();
|
|
}
|
|
// otherwise get directly
|
|
else {
|
|
return this.attrs[attr];
|
|
}
|
|
},
|
|
/**
|
|
* get ancestors
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Collection}
|
|
* @example
|
|
* shape.getAncestors().each(function(node) {
|
|
* console.log(node.getId());
|
|
* })
|
|
*/
|
|
getAncestors: function() {
|
|
var parent = this.getParent(),
|
|
ancestors = new Kinetic.Collection();
|
|
|
|
while (parent) {
|
|
ancestors.push(parent);
|
|
parent = parent.getParent();
|
|
}
|
|
|
|
return ancestors;
|
|
},
|
|
/**
|
|
* get attrs object literal
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Object}
|
|
*/
|
|
getAttrs: function() {
|
|
return this.attrs || {};
|
|
},
|
|
/**
|
|
* set multiple attrs at once using an object literal
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Object} config object containing key value pairs
|
|
* @returns {Kinetic.Node}
|
|
* @example
|
|
* node.setAttrs({<br>
|
|
* x: 5,<br>
|
|
* fill: 'red'<br>
|
|
* });<br>
|
|
*/
|
|
setAttrs: function(config) {
|
|
var key, method;
|
|
|
|
if(config) {
|
|
for(key in config) {
|
|
if (key === CHILDREN) {
|
|
|
|
}
|
|
else {
|
|
method = SET + Kinetic.Util._capitalize(key);
|
|
// use setter if available
|
|
if(Kinetic.Util._isFunction(this[method])) {
|
|
this[method](config[key]);
|
|
}
|
|
// otherwise set directly
|
|
else {
|
|
this._setAttr(key, config[key]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return 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
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Boolean}
|
|
*/
|
|
isListening: function() {
|
|
return this._getCache(LISTENING, this._isListening);
|
|
},
|
|
_isListening: function() {
|
|
var listening = this.getListening(),
|
|
parent = this.getParent();
|
|
|
|
// the following conditions are a simplification of the truth table above.
|
|
// please modify carefully
|
|
if (listening === 'inherit') {
|
|
if (parent) {
|
|
return parent.isListening();
|
|
}
|
|
else {
|
|
return true;
|
|
}
|
|
}
|
|
else {
|
|
return listening;
|
|
}
|
|
},
|
|
/**
|
|
* 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
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Boolean}
|
|
*/
|
|
isVisible: function() {
|
|
return this._getCache(VISIBLE, this._isVisible);
|
|
},
|
|
_isVisible: function() {
|
|
var visible = this.getVisible(),
|
|
parent = this.getParent();
|
|
|
|
// the following conditions are a simplification of the truth table above.
|
|
// please modify carefully
|
|
if (visible === 'inherit') {
|
|
if (parent) {
|
|
return parent.isVisible();
|
|
}
|
|
else {
|
|
return true;
|
|
}
|
|
}
|
|
else {
|
|
return visible;
|
|
}
|
|
},
|
|
/**
|
|
* 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
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Boolean}
|
|
*/
|
|
shouldDrawHit: function() {
|
|
var layer = this.getLayer();
|
|
return layer && layer.isHitGraphEnabled() && this.isListening() && this.isVisible() && !Kinetic.isDragging();
|
|
},
|
|
/**
|
|
* show node
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
show: function() {
|
|
this.setVisible(true);
|
|
return this;
|
|
},
|
|
/**
|
|
* hide node. Hidden nodes are no longer detectable
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
hide: function() {
|
|
this.setVisible(false);
|
|
return this;
|
|
},
|
|
/**
|
|
* get zIndex relative to the node's siblings who share the same parent
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Integer}
|
|
*/
|
|
getZIndex: function() {
|
|
return this.index || 0;
|
|
},
|
|
/**
|
|
* get absolute z-index which takes into account sibling
|
|
* and ancestor indices
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Integer}
|
|
*/
|
|
getAbsoluteZIndex: function() {
|
|
var level = this.getLevel(),
|
|
that = this,
|
|
index = 0,
|
|
nodes, len, n, child;
|
|
|
|
function addChildren(children) {
|
|
nodes = [];
|
|
len = children.length;
|
|
for(n = 0; n < len; n++) {
|
|
child = children[n];
|
|
index++;
|
|
|
|
if(child.nodeType !== SHAPE) {
|
|
nodes = nodes.concat(child.getChildren().toArray());
|
|
}
|
|
|
|
if(child._id === that._id) {
|
|
n = len;
|
|
}
|
|
}
|
|
|
|
if(nodes.length > 0 && nodes[0].getLevel() <= level) {
|
|
addChildren(nodes);
|
|
}
|
|
}
|
|
if(that.nodeType !== UPPER_STAGE) {
|
|
addChildren(that.getStage().getChildren());
|
|
}
|
|
|
|
return index;
|
|
},
|
|
/**
|
|
* get node level in node tree. Returns an integer.<br><br>
|
|
* e.g. Stage level will always be 0. Layers will always be 1. Groups and Shapes will always
|
|
* be >= 2
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Integer}
|
|
*/
|
|
getLevel: function() {
|
|
var level = 0,
|
|
parent = this.parent;
|
|
|
|
while(parent) {
|
|
level++;
|
|
parent = parent.parent;
|
|
}
|
|
return level;
|
|
},
|
|
setPosition: function(pos) {
|
|
this.setX(pos.x);
|
|
this.setY(pos.y);
|
|
return this;
|
|
},
|
|
getPosition: function() {
|
|
return {
|
|
x: this.getX(),
|
|
y: this.getY()
|
|
};
|
|
},
|
|
/**
|
|
* get absolute position relative to the top left corner of the stage container div
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Object}
|
|
*/
|
|
getAbsolutePosition: function() {
|
|
var absoluteMatrix = this.getAbsoluteTransform().getMatrix(),
|
|
absoluteTransform = new Kinetic.Transform(),
|
|
offset = this.offset();
|
|
|
|
// clone the matrix array
|
|
absoluteTransform.m = absoluteMatrix.slice();
|
|
absoluteTransform.translate(offset.x, offset.y);
|
|
|
|
return absoluteTransform.getTranslation();
|
|
},
|
|
/**
|
|
* set absolute position
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Object} pos
|
|
* @param {Number} pos.x
|
|
* @param {Number} pos.y
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
setAbsolutePosition: function(pos) {
|
|
var origTrans = this._clearTransform(),
|
|
it;
|
|
|
|
// don't clear translation
|
|
this.attrs.x = origTrans.x;
|
|
this.attrs.y = origTrans.y;
|
|
delete origTrans.x;
|
|
delete origTrans.y;
|
|
|
|
// unravel transform
|
|
it = this.getAbsoluteTransform();
|
|
|
|
it.invert();
|
|
it.translate(pos.x, pos.y);
|
|
pos = {
|
|
x: this.attrs.x + it.getTranslation().x,
|
|
y: this.attrs.y + it.getTranslation().y
|
|
};
|
|
|
|
this.setPosition({x:pos.x, y:pos.y});
|
|
this._setTransform(origTrans);
|
|
|
|
return this;
|
|
},
|
|
_setTransform: function(trans) {
|
|
var key;
|
|
|
|
for(key in trans) {
|
|
this.attrs[key] = trans[key];
|
|
}
|
|
|
|
this._clearCache(TRANSFORM);
|
|
this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
|
|
},
|
|
_clearTransform: function() {
|
|
var trans = {
|
|
x: this.getX(),
|
|
y: this.getY(),
|
|
rotation: this.getRotation(),
|
|
scaleX: this.getScaleX(),
|
|
scaleY: this.getScaleY(),
|
|
offsetX: this.getOffsetX(),
|
|
offsetY: this.getOffsetY(),
|
|
skewX: this.getSkewX(),
|
|
skewY: this.getSkewY()
|
|
};
|
|
|
|
this.attrs.x = 0;
|
|
this.attrs.y = 0;
|
|
this.attrs.rotation = 0;
|
|
this.attrs.scaleX = 1;
|
|
this.attrs.scaleY = 1;
|
|
this.attrs.offsetX = 0;
|
|
this.attrs.offsetY = 0;
|
|
this.attrs.skewX = 0;
|
|
this.attrs.skewY = 0;
|
|
|
|
this._clearCache(TRANSFORM);
|
|
this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
|
|
|
|
// return original transform
|
|
return trans;
|
|
},
|
|
/**
|
|
* move node by an amount relative to its current position
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Object} change
|
|
* @param {Number} change.x
|
|
* @param {Number} change.y
|
|
* @returns {Kinetic.Node}
|
|
* @example
|
|
* // move node in x direction by 1px and y direction by 2px<br>
|
|
* node.move({<br>
|
|
* x: 1,<br>
|
|
* y: 2)<br>
|
|
* });
|
|
*/
|
|
move: function(change) {
|
|
var changeX = change.x,
|
|
changeY = change.y,
|
|
x = this.getX(),
|
|
y = this.getY();
|
|
|
|
if(changeX !== undefined) {
|
|
x += changeX;
|
|
}
|
|
|
|
if(changeY !== undefined) {
|
|
y += changeY;
|
|
}
|
|
|
|
this.setPosition({x:x, y:y});
|
|
return this;
|
|
},
|
|
_eachAncestorReverse: function(func, includeSelf) {
|
|
var family = [],
|
|
parent = this.getParent(),
|
|
len, n;
|
|
|
|
// build family by traversing ancestors
|
|
if(includeSelf) {
|
|
family.unshift(this);
|
|
}
|
|
while(parent) {
|
|
family.unshift(parent);
|
|
parent = parent.parent;
|
|
}
|
|
|
|
len = family.length;
|
|
for(n = 0; n < len; n++) {
|
|
func(family[n]);
|
|
}
|
|
},
|
|
/**
|
|
* rotate node by an amount in radians relative to its current rotation
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Number} theta
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
rotate: function(theta) {
|
|
this.setRotation(this.getRotation() + theta);
|
|
return this;
|
|
},
|
|
/**
|
|
* rotate node by an amount in degrees relative to its current rotation
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Number} deg
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
rotateDeg: function(deg) {
|
|
this.setRotation(this.getRotation() + Kinetic.Util._degToRad(deg));
|
|
return this;
|
|
},
|
|
/**
|
|
* move node to the top of its siblings
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Boolean}
|
|
*/
|
|
moveToTop: function() {
|
|
var index = this.index;
|
|
this.parent.children.splice(index, 1);
|
|
this.parent.children.push(this);
|
|
this.parent._setChildrenIndices();
|
|
return true;
|
|
},
|
|
/**
|
|
* move node up
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Boolean}
|
|
*/
|
|
moveUp: function() {
|
|
var index = this.index,
|
|
len = this.parent.getChildren().length;
|
|
if(index < len - 1) {
|
|
this.parent.children.splice(index, 1);
|
|
this.parent.children.splice(index + 1, 0, this);
|
|
this.parent._setChildrenIndices();
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
/**
|
|
* move node down
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Boolean}
|
|
*/
|
|
moveDown: function() {
|
|
var index = this.index;
|
|
if(index > 0) {
|
|
this.parent.children.splice(index, 1);
|
|
this.parent.children.splice(index - 1, 0, this);
|
|
this.parent._setChildrenIndices();
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
/**
|
|
* move node to the bottom of its siblings
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Boolean}
|
|
*/
|
|
moveToBottom: function() {
|
|
var index = this.index;
|
|
if(index > 0) {
|
|
this.parent.children.splice(index, 1);
|
|
this.parent.children.unshift(this);
|
|
this.parent._setChildrenIndices();
|
|
return true;
|
|
}
|
|
return false;
|
|
},
|
|
/**
|
|
* set zIndex relative to siblings
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Integer} zIndex
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
setZIndex: function(zIndex) {
|
|
var index = this.index;
|
|
this.parent.children.splice(index, 1);
|
|
this.parent.children.splice(zIndex, 0, this);
|
|
this.parent._setChildrenIndices();
|
|
return this;
|
|
},
|
|
/**
|
|
* get absolute opacity
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Number}
|
|
*/
|
|
getAbsoluteOpacity: function() {
|
|
return this._getCache(ABSOLUTE_OPACITY, this._getAbsoluteOpacity);
|
|
},
|
|
_getAbsoluteOpacity: function() {
|
|
var absOpacity = this.getOpacity();
|
|
if(this.getParent()) {
|
|
absOpacity *= this.getParent().getAbsoluteOpacity();
|
|
}
|
|
return absOpacity;
|
|
},
|
|
/**
|
|
* move node to another container
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Container} newContainer
|
|
* @returns {Kinetic.Node}
|
|
* @example
|
|
* // move node from current layer into layer2<br>
|
|
* node.moveTo(layer2);
|
|
*/
|
|
moveTo: function(newContainer) {
|
|
Kinetic.Node.prototype.remove.call(this);
|
|
newContainer.add(this);
|
|
return this;
|
|
},
|
|
/**
|
|
* convert Node into an object for serialization. Returns an object.
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Object}
|
|
*/
|
|
toObject: function() {
|
|
var type = Kinetic.Util,
|
|
obj = {},
|
|
attrs = this.getAttrs(),
|
|
key, val, getter, defaultValue;
|
|
|
|
obj.attrs = {};
|
|
|
|
// serialize only attributes that are not function, image, DOM, or objects with methods
|
|
for(key in attrs) {
|
|
val = attrs[key];
|
|
if (!type._isFunction(val) && !type._isElement(val) && !(type._isObject(val) && type._hasMethods(val))) {
|
|
getter = this[GET + Kinetic.Util._capitalize(key)];
|
|
defaultValue = getter ? getter.call({attrs: {}}) : null;
|
|
if (defaultValue !== val) {
|
|
obj.attrs[key] = val;
|
|
}
|
|
}
|
|
}
|
|
|
|
obj.className = this.getClassName();
|
|
return obj;
|
|
},
|
|
/**
|
|
* convert Node into a JSON string. Returns a JSON string.
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {String}}
|
|
*/
|
|
toJSON: function() {
|
|
return JSON.stringify(this.toObject());
|
|
},
|
|
/**
|
|
* get parent container
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
getParent: function() {
|
|
return this.parent;
|
|
},
|
|
/**
|
|
* get layer ancestor
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Layer}
|
|
*/
|
|
getLayer: function() {
|
|
var parent = this.getParent();
|
|
return parent ? parent.getLayer() : null;
|
|
},
|
|
/**
|
|
* get stage ancestor
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Stage}
|
|
*/
|
|
getStage: function() {
|
|
return this._getCache(STAGE, this._getStage);
|
|
},
|
|
_getStage: function() {
|
|
var parent = this.getParent();
|
|
if(parent) {
|
|
return parent.getStage();
|
|
}
|
|
else {
|
|
return undefined;
|
|
}
|
|
},
|
|
/**
|
|
* fire event
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @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 {EventObject} 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 {Kinetic.Node}
|
|
* @example
|
|
* // manually fire click event<br>
|
|
* node.fire('click');<br><br>
|
|
*
|
|
* // fire custom event<br>
|
|
* node.fire('foo');<br><br>
|
|
*
|
|
* // fire custom event with custom event object<br>
|
|
* node.fire('foo', {<br>
|
|
* bar: 10<br>
|
|
* });<br><br>
|
|
*
|
|
* // fire click event that bubbles<br>
|
|
* node.fire('click', null, true);
|
|
*/
|
|
fire: function(eventType, evt, bubble) {
|
|
// bubble
|
|
if (bubble) {
|
|
this._fireAndBubble(eventType, evt || {});
|
|
}
|
|
// no bubble
|
|
else {
|
|
this._fire(eventType, evt || {});
|
|
}
|
|
return this;
|
|
},
|
|
/**
|
|
* get absolute transform of the node which takes into
|
|
* account its ancestor transforms
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Transform}
|
|
*/
|
|
getAbsoluteTransform: function() {
|
|
return this._getCache(ABSOLUTE_TRANSFORM, this._getAbsoluteTransform);
|
|
},
|
|
_getAbsoluteTransform: function() {
|
|
var at = new Kinetic.Transform(),
|
|
transformsEnabled, trans;
|
|
|
|
// start with stage and traverse downwards to self
|
|
this._eachAncestorReverse(function(node) {
|
|
transformsEnabled = node.transformsEnabled();
|
|
trans = node.getTransform();
|
|
|
|
if (transformsEnabled === 'all') {
|
|
at.multiply(trans);
|
|
}
|
|
else if (transformsEnabled === 'position') {
|
|
at.translate(node.x(), node.y());
|
|
}
|
|
}, true);
|
|
return at;
|
|
},
|
|
/**
|
|
* get transform of the node
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Transform}
|
|
*/
|
|
getTransform: function() {
|
|
return this._getCache(TRANSFORM, this._getTransform);
|
|
},
|
|
_getTransform: function() {
|
|
var m = new Kinetic.Transform(),
|
|
x = this.getX(),
|
|
y = this.getY(),
|
|
rotation = this.getRotation(),
|
|
scaleX = this.getScaleX(),
|
|
scaleY = this.getScaleY(),
|
|
skewX = this.getSkewX(),
|
|
skewY = this.getSkewY(),
|
|
offsetX = this.getOffsetX(),
|
|
offsetY = this.getOffsetY();
|
|
|
|
if(x !== 0 || y !== 0) {
|
|
m.translate(x, y);
|
|
}
|
|
if(rotation !== 0) {
|
|
m.rotate(rotation);
|
|
}
|
|
if(skewX !== 0 || skewY !== 0) {
|
|
m.skew(skewX, skewY);
|
|
}
|
|
if(scaleX !== 1 || scaleY !== 1) {
|
|
m.scale(scaleX, scaleY);
|
|
}
|
|
if(offsetX !== 0 || offsetY !== 0) {
|
|
m.translate(-1 * offsetX, -1 * offsetY);
|
|
}
|
|
|
|
return m;
|
|
},
|
|
/**
|
|
* 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
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Object} attrs override attrs
|
|
* @returns {Kinetic.Node}
|
|
* @example
|
|
* // simple clone<br>
|
|
* var clone = node.clone();<br><br>
|
|
*
|
|
* // clone a node and override the x position<br>
|
|
* var clone = rect.clone({<br>
|
|
* x: 5<br>
|
|
* });
|
|
*/
|
|
clone: function(obj) {
|
|
// instantiate new node
|
|
var className = this.getClassName(),
|
|
node = new Kinetic[className](this.attrs),
|
|
key, allListeners, len, n, listener;
|
|
|
|
// copy over listeners
|
|
for(key in this.eventListeners) {
|
|
allListeners = this.eventListeners[key];
|
|
len = allListeners.length;
|
|
for(n = 0; n < len; n++) {
|
|
listener = allListeners[n];
|
|
/*
|
|
* don't include kinetic namespaced listeners because
|
|
* these are generated by the constructors
|
|
*/
|
|
if(listener.name.indexOf(KINETIC) < 0) {
|
|
// if listeners array doesn't exist, then create it
|
|
if(!node.eventListeners[key]) {
|
|
node.eventListeners[key] = [];
|
|
}
|
|
node.eventListeners[key].push(listener);
|
|
}
|
|
}
|
|
}
|
|
|
|
// apply attr overrides
|
|
node.setAttrs(obj);
|
|
return node;
|
|
},
|
|
/**
|
|
* Creates a composite data URL. 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
|
|
* @memberof Kinetic.Node.prototype
|
|
* @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
|
|
* @returns {String}
|
|
*/
|
|
toDataURL: function(config) {
|
|
config = config || {};
|
|
|
|
var mimeType = config.mimeType || null,
|
|
quality = config.quality || null,
|
|
stage = this.getStage(),
|
|
x = config.x || 0,
|
|
y = config.y || 0,
|
|
canvas = new Kinetic.SceneCanvas({
|
|
width: config.width || this.getWidth() || (stage ? stage.getWidth() : 0),
|
|
height: config.height || this.getHeight() || (stage ? stage.getHeight() : 0),
|
|
pixelRatio: 1
|
|
}),
|
|
context = canvas.getContext();
|
|
|
|
context.save();
|
|
|
|
if(x || y) {
|
|
context.translate(-1 * x, -1 * y);
|
|
}
|
|
|
|
this.drawScene(canvas);
|
|
context.restore();
|
|
|
|
return canvas.toDataURL(mimeType, quality);
|
|
},
|
|
/**
|
|
* 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
|
|
* @memberof Kinetic.Node.prototype
|
|
* @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
|
|
* @returns {Image}
|
|
* @example
|
|
* var image = node.toImage({<br>
|
|
* callback: function(img) {<br>
|
|
* // do stuff with img<br>
|
|
* }<br>
|
|
* });
|
|
*/
|
|
toImage: function(config) {
|
|
Kinetic.Util._getImage(this.toDataURL(config), function(img) {
|
|
config.callback(img);
|
|
});
|
|
},
|
|
/**
|
|
* set size
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Object} size
|
|
* @param {Number} width
|
|
* @param {Number} height
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
setSize: function(size) {
|
|
this.setWidth(size.width);
|
|
this.setHeight(size.height);
|
|
return this;
|
|
},
|
|
/**
|
|
* get size
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Object}
|
|
*/
|
|
getSize: function() {
|
|
return {
|
|
width: this.getWidth(),
|
|
height: this.getHeight()
|
|
};
|
|
},
|
|
/**
|
|
* get width
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Integer}
|
|
*/
|
|
getWidth: function() {
|
|
return this.attrs.width || 0;
|
|
},
|
|
/**
|
|
* get height
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Integer}
|
|
*/
|
|
getHeight: function() {
|
|
return this.attrs.height || 0;
|
|
},
|
|
/**
|
|
* get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc.
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {String}
|
|
*/
|
|
getClassName: function() {
|
|
return this.className || this.nodeType;
|
|
},
|
|
/**
|
|
* get the node type, which may return Stage, Layer, Group, or Node
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {String}
|
|
*/
|
|
getType: function() {
|
|
return this.nodeType;
|
|
},
|
|
_get: function(selector) {
|
|
return this.nodeType === selector ? [this] : [];
|
|
},
|
|
_off: function(type, name) {
|
|
var evtListeners = this.eventListeners[type],
|
|
i, evtName;
|
|
|
|
for(i = 0; i < evtListeners.length; i++) {
|
|
evtName = evtListeners[i].name;
|
|
// the following two conditions must be true in order to remove a handler:
|
|
// 1) the current event name cannot be kinetic unless the event name is kinetic
|
|
// this enables developers to force remove a kinetic specific listener for whatever reason
|
|
// 2) an event name is not specified, or if one is specified, it matches the current event name
|
|
if((evtName !== 'kinetic' || name === 'kinetic') && (!name || evtName === name)) {
|
|
evtListeners.splice(i, 1);
|
|
if(evtListeners.length === 0) {
|
|
delete this.eventListeners[type];
|
|
break;
|
|
}
|
|
i--;
|
|
}
|
|
}
|
|
},
|
|
_fireBeforeChangeEvent: function(attr, oldVal, newVal) {
|
|
this._fire([BEFORE, Kinetic.Util._capitalize(attr), CHANGE].join(EMPTY_STRING), {
|
|
oldVal: oldVal,
|
|
newVal: newVal
|
|
});
|
|
},
|
|
_fireChangeEvent: function(attr, oldVal, newVal) {
|
|
this._fire(attr + CHANGE, {
|
|
oldVal: oldVal,
|
|
newVal: newVal
|
|
});
|
|
},
|
|
/**
|
|
* set id
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {String} id
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
setId: function(id) {
|
|
var oldId = this.getId();
|
|
|
|
Kinetic._removeId(oldId);
|
|
Kinetic._addId(this, id);
|
|
this._setAttr(ID, id);
|
|
return this;
|
|
},
|
|
setName: function(name) {
|
|
var oldName = this.getName();
|
|
|
|
Kinetic._removeName(oldName, this._id);
|
|
Kinetic._addName(this, name);
|
|
this._setAttr(NAME, name);
|
|
return this;
|
|
},
|
|
/**
|
|
* set attr
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {String} attr
|
|
* @param {*} val
|
|
* @returns {Kinetic.Node}
|
|
* @example
|
|
* node.setAttr('x', 5);
|
|
*/
|
|
setAttr: function() {
|
|
var args = Array.prototype.slice.call(arguments),
|
|
attr = args[0],
|
|
val = args[1],
|
|
method = SET + Kinetic.Util._capitalize(attr),
|
|
func = this[method];
|
|
|
|
if(Kinetic.Util._isFunction(func)) {
|
|
func.call(this, val);
|
|
}
|
|
// otherwise set directly
|
|
else {
|
|
this._setAttr(attr, val);
|
|
}
|
|
return this;
|
|
},
|
|
_setAttr: function(key, val) {
|
|
var oldVal;
|
|
if(val !== undefined) {
|
|
oldVal = this.attrs[key];
|
|
this.attrs[key] = val;
|
|
this._fireChangeEvent(key, oldVal, val);
|
|
}
|
|
},
|
|
_setComponentAttr: function(key, component, val) {
|
|
var oldVal;
|
|
if(val !== undefined) {
|
|
oldVal = this.attrs[key];
|
|
|
|
if (!oldVal) {
|
|
// set value to default value using getAttr
|
|
this.attrs[key] = this.getAttr(key);
|
|
}
|
|
|
|
//this._fireBeforeChangeEvent(key, oldVal, val);
|
|
this.attrs[key][component] = val;
|
|
this._fireChangeEvent(key, oldVal, val);
|
|
}
|
|
},
|
|
_fireAndBubble: function(eventType, evt, compareShape) {
|
|
var okayToRun = true;
|
|
|
|
if(evt && this.nodeType === SHAPE) {
|
|
evt.targetNode = this;
|
|
}
|
|
|
|
if(eventType === MOUSEENTER && compareShape && this._id === compareShape._id) {
|
|
okayToRun = false;
|
|
}
|
|
else if(eventType === MOUSELEAVE && compareShape && this._id === compareShape._id) {
|
|
okayToRun = false;
|
|
}
|
|
|
|
if(okayToRun) {
|
|
this._fire(eventType, evt);
|
|
|
|
// simulate event bubbling
|
|
if(evt && !evt.cancelBubble && this.parent) {
|
|
if(compareShape && compareShape.parent) {
|
|
this._fireAndBubble.call(this.parent, eventType, evt, compareShape.parent);
|
|
}
|
|
else {
|
|
this._fireAndBubble.call(this.parent, eventType, evt);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
_fire: function(eventType, evt) {
|
|
var events = this.eventListeners[eventType],
|
|
i;
|
|
|
|
if (events) {
|
|
for(i = 0; i < events.length; i++) {
|
|
events[i].handler.call(this, evt);
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* draw both scene and hit graphs. If the node being drawn is the stage, all of the layers will be cleared and redrawn
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
draw: function() {
|
|
this.drawScene();
|
|
this.drawHit();
|
|
return this;
|
|
}
|
|
});
|
|
|
|
/**
|
|
* create node with JSON string. 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(), setDrawFunc(),
|
|
* and setImage() methods
|
|
* @method
|
|
* @memberof Kinetic.Node
|
|
* @param {String} JSON string
|
|
* @param {DomElement} [container] optional container dom element used only if you're
|
|
* creating a stage node
|
|
*/
|
|
Kinetic.Node.create = function(json, container) {
|
|
return this._createNode(JSON.parse(json), container);
|
|
};
|
|
Kinetic.Node._createNode = function(obj, container) {
|
|
var className = Kinetic.Node.prototype.getClassName.call(obj),
|
|
children = obj.children,
|
|
no, len, n;
|
|
|
|
// if container was passed in, add it to attrs
|
|
if(container) {
|
|
obj.attrs.container = container;
|
|
}
|
|
|
|
no = new Kinetic[className](obj.attrs);
|
|
if(children) {
|
|
len = children.length;
|
|
for(n = 0; n < len; n++) {
|
|
no.add(this._createNode(children[n]));
|
|
}
|
|
}
|
|
|
|
return no;
|
|
};
|
|
// add getters setters
|
|
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'position');
|
|
/**
|
|
* get or set node position relative to parent
|
|
* @name position
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Object} pos
|
|
* @param {Number} pos.x
|
|
* @param {Nubmer} pos.y
|
|
* @returns {Object}
|
|
* @example
|
|
* // get position<br>
|
|
* var position = node.position();<br><br>
|
|
*
|
|
* // set position<br>
|
|
* node.position({<br>
|
|
* x: 5<br>
|
|
* y: 10
|
|
* });
|
|
*/
|
|
|
|
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'x', 0);
|
|
|
|
/**
|
|
* get or set x position
|
|
* @name x
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Number} x
|
|
* @returns {Object}
|
|
* @example
|
|
* // get x<br>
|
|
* var x = node.x();<br><br>
|
|
*
|
|
* // set x<br>
|
|
* node.x(5);
|
|
*/
|
|
|
|
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'y', 0);
|
|
|
|
/**
|
|
* get or set y position
|
|
* @name y
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Number} y
|
|
* @returns {Integer}
|
|
* @example
|
|
* // get y<br>
|
|
* var y = node.y();<br><br>
|
|
*
|
|
* // set y<br>
|
|
* node.y(5);
|
|
*/
|
|
|
|
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'opacity', 1);
|
|
|
|
/**
|
|
* get or set opacity. Opacity values range from 0 to 1.
|
|
* A node with an opacity of 0 is fully transparent, and a node
|
|
* with an opacity of 1 is fully opaque
|
|
* @name opacity
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Object} opacity
|
|
* @returns {Number}
|
|
* @example
|
|
* // get opacity<br>
|
|
* var opacity = node.opacity();<br><br>
|
|
*
|
|
* // set opacity<br>
|
|
* node.opacity(0.5);
|
|
*/
|
|
|
|
Kinetic.Factory.addGetter(Kinetic.Node, 'name');
|
|
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'name');
|
|
|
|
/**
|
|
* set name
|
|
* @name name
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {String} name
|
|
* @returns {String}
|
|
* @example
|
|
* // get name<br>
|
|
* var name = node.name();<br><br>
|
|
*
|
|
* // set name<br>
|
|
* node.name('foo');
|
|
*/
|
|
|
|
Kinetic.Factory.addGetter(Kinetic.Node, 'id');
|
|
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'id');
|
|
|
|
/**
|
|
* set id
|
|
* @name id
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {String} id
|
|
* @returns {String}
|
|
* @example
|
|
* // get id<br>
|
|
* var name = node.id();<br><br>
|
|
*
|
|
* // set id<br>
|
|
* node.id('foo');
|
|
*/
|
|
|
|
Kinetic.Factory.addRotationGetterSetter(Kinetic.Node, 'rotation', 0);
|
|
|
|
/**
|
|
* get or set rotation in radians
|
|
* @name rotation
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Number} theta
|
|
* @returns {Number}
|
|
* @example
|
|
* // get rotation in radians<br>
|
|
* var rotation = node.rotation();<br><br>
|
|
*
|
|
* // set rotation in radians<br>
|
|
* node.rotation(Math.PI / 2);
|
|
*/
|
|
|
|
/**
|
|
* get or set rotation in degrees
|
|
* @name rotationDeg
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Number} deg
|
|
* @returns {Number}
|
|
* @example
|
|
* // get rotation in degrees<br>
|
|
* var rotationDeg = node.rotationDeg();<br><br>
|
|
*
|
|
* // set rotation in degrees<br>
|
|
* node.rotationDeg(45);
|
|
*/
|
|
|
|
Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'scale', 1);
|
|
|
|
/**
|
|
* get or set scale
|
|
* @name scale
|
|
* @param {Object} scale
|
|
* @param {Number} scale.x
|
|
* @param {Number} scale.y
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Object}
|
|
* @example
|
|
* // get scale<br>
|
|
* var scale = node.scale();<br><br>
|
|
*
|
|
* // set scale <br>
|
|
* shape.scale({<br>
|
|
* x: 2<br>
|
|
* y: 3<br>
|
|
* });
|
|
*/
|
|
|
|
/**
|
|
* get or set scale x
|
|
* @name scaleX
|
|
* @param {Number} x
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Number}
|
|
* @example
|
|
* // get scale x<br>
|
|
* var scaleX = node.scaleX();<br><br>
|
|
*
|
|
* // set scale x<br>
|
|
* node.scaleX(2);
|
|
*/
|
|
|
|
/**
|
|
* get or set scale y
|
|
* @name scaleY
|
|
* @param {Number} y
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Number}
|
|
* @example
|
|
* // get scale y<br>
|
|
* var scaleY = node.scaleY();<br><br>
|
|
*
|
|
* // set scale y<br>
|
|
* node.scaleY(2);
|
|
*/
|
|
|
|
Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'skew', 0);
|
|
|
|
/**
|
|
* set skew
|
|
* @name setSkew
|
|
* @param {Object} skew
|
|
* @param {Number} skew.x
|
|
* @param {Number} skew.y
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Node}
|
|
* @example
|
|
* // set x and y <br>
|
|
* shape.setSkew({<br>
|
|
* x: 20<br>
|
|
* y: 10
|
|
* });
|
|
*/
|
|
|
|
/**
|
|
* get skew
|
|
* @name getSkew
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Object}
|
|
*/
|
|
|
|
/**
|
|
* set skew x
|
|
* @name setSkewX
|
|
* @param {Number} x
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
|
|
/**
|
|
* get skew x
|
|
* @name getSkewX
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Number}
|
|
*/
|
|
|
|
/**
|
|
* set skew y
|
|
* @name setSkewY
|
|
* @param {Number} y
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
|
|
/**
|
|
* get skew y
|
|
* @name getSkewY
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Number}
|
|
*/
|
|
|
|
Kinetic.Factory.addPointGetterSetter(Kinetic.Node, 'offset', 0);
|
|
|
|
/**
|
|
* get/set offset. A node's offset defines the position and rotation point
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Object} offset
|
|
* @param {Number} offset.x
|
|
* @param {Number} offset.y
|
|
* @returns {Object}
|
|
* @example
|
|
* // set x and y <br>
|
|
* shape.offset({<br>
|
|
* x: 20<br>
|
|
* y: 10<br>
|
|
* });<br><br>
|
|
*/
|
|
|
|
/**
|
|
* get/set offset x
|
|
* @name offsetX
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Number} x
|
|
* @returns {Integer}
|
|
*/
|
|
|
|
/**
|
|
* get/set offset y
|
|
* @name offsetY
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Number} y
|
|
* @returns {Integer}
|
|
*/
|
|
|
|
Kinetic.Factory.addSetter(Kinetic.Node, 'width', 0);
|
|
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'width');
|
|
|
|
/**
|
|
* set width
|
|
* @name setWidth
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Number} width
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
|
|
Kinetic.Factory.addSetter(Kinetic.Node, 'height', 0);
|
|
Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node, 'height');
|
|
|
|
/**
|
|
* set height
|
|
* @name setHeight
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Number} height
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
|
|
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'listening', 'inherit');
|
|
|
|
/**
|
|
* listen or don't listen to events. Can be "inherit", true, or false. The default is "inherit".
|
|
* @name setListening
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Boolean|String} listening
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
|
|
/**
|
|
* determine if node is listening or not.
|
|
* @name getListening
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Boolean|String}
|
|
*/
|
|
|
|
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'visible', 'inherit');
|
|
|
|
/**
|
|
* set visible. Can be "inherit", true, or false. The default is "inherit".
|
|
* @name setVisible
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {Boolean} visible
|
|
* @returns {Kinetic.Node}
|
|
*/
|
|
|
|
/**
|
|
* get visible property for the node. If you need to determine if the node is actually visible,
|
|
* use the isVisible() method because it takes ancestors into account
|
|
* @name getVisible
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @returns {Boolean}
|
|
*/
|
|
|
|
Kinetic.Factory.addGetterSetter(Kinetic.Node, 'transformsEnabled', 'all');
|
|
|
|
/**
|
|
* get/set transforms that are enabled. Can be "all", "none", or "position". The default
|
|
* is "all"
|
|
* @name transformsEnabled
|
|
* @method
|
|
* @memberof Kinetic.Node.prototype
|
|
* @param {String} enabled
|
|
* @returns {String}
|
|
*/
|
|
|
|
Kinetic.Collection.mapMethods([
|
|
'on',
|
|
'off',
|
|
'remove',
|
|
'destroy',
|
|
'show',
|
|
'hide',
|
|
'move',
|
|
'rotate',
|
|
'moveToTop',
|
|
'moveUp',
|
|
'moveDown',
|
|
'moveToBottom',
|
|
'moveTo',
|
|
'fire',
|
|
'draw'
|
|
]);
|
|
})();
|