lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

merge

Browse Source
This commit is contained in:
Лаврёнов Антон 2014-02-27 09:13:55 +08:00
commit 098fabbfc1
13 changed files with 652 additions and 488 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/Canvas.js
View File

@ -2,14 +2,21 @@
// calculate pixel ratio // calculate pixel ratio
var canvas = document.createElement('canvas'), var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'), context = canvas.getContext('2d'),
devicePixelRatio = window.devicePixelRatio || 1, // if using a mobile device, calculate the pixel ratio. Otherwise, just use
backingStoreRatio = context.webkitBackingStorePixelRatio // 1. For desktop browsers, if the user has zoom enabled, it affects the pixel ratio
|| context.mozBackingStorePixelRatio // and causes artifacts on the canvas. As of 02/26/2014, there doesn't seem to be a way
|| context.msBackingStorePixelRatio // to reliably calculate the browser zoom for modern browsers, which is why we just set
|| context.oBackingStorePixelRatio // the pixel ratio to 1 for desktops
|| context.backingStorePixelRatio _pixelRatio = Kinetic.UA.mobile ? (function() {
|| 1, var devicePixelRatio = window.devicePixelRatio || 1,
_pixelRatio = devicePixelRatio / backingStoreRatio; backingStoreRatio = context.webkitBackingStorePixelRatio
|| context.mozBackingStorePixelRatio
|| context.msBackingStorePixelRatio
|| context.oBackingStorePixelRatio
|| context.backingStorePixelRatio
|| 1;
return devicePixelRatio / backingStoreRatio;
})() : 1;
/** /**
* Canvas Renderer constructor * Canvas Renderer constructor

11
src/Global.js
View File

@ -50,6 +50,7 @@ var Kinetic = {};
traceArrMax: 100, traceArrMax: 100,
dblClickWindow: 400, dblClickWindow: 400,
pixelRatio: undefined, pixelRatio: undefined,
enableThrottling: true,
// user agent // user agent
UA: (function() { UA: (function() {
@ -60,11 +61,17 @@ var Kinetic = {};
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) || /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\w.]+)/.exec( ua ) || /(msie) ([\w.]+)/.exec( ua ) ||
ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) || ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
[]; [],
// adding mobile flag as well
mobile = !!(navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i));
return { return {
browser: match[ 1 ] || '', browser: match[ 1 ] || '',
version: match[ 2 ] || '0' version: match[ 2 ] || '0',
// adding mobile flab
mobile: mobile
}; };
})(), })(),

181
src/Stage.js
View File

@ -342,58 +342,64 @@
} }
}, },
_mouseover: function(evt) { _mouseover: function(evt) {
this._fire(CONTENT_MOUSEOVER, evt); if (!Kinetic.UA.mobile) {
this._fire(CONTENT_MOUSEOVER, evt);
}
}, },
_mouseout: function(evt) { _mouseout: function(evt) {
this._setPointerPosition(evt); if (!Kinetic.UA.mobile) {
var targetShape = this.targetShape; this._setPointerPosition(evt);
var targetShape = this.targetShape;
if(targetShape && !Kinetic.isDragging()) { if(targetShape && !Kinetic.isDragging()) {
targetShape._fireAndBubble(MOUSEOUT, evt); targetShape._fireAndBubble(MOUSEOUT, evt);
targetShape._fireAndBubble(MOUSELEAVE, evt); targetShape._fireAndBubble(MOUSELEAVE, evt);
this.targetShape = null;
}
this.pointerPos = undefined;
this._fire(CONTENT_MOUSEOUT, evt);
},
_mousemove: function(evt) {
this._setPointerPosition(evt);
var dd = Kinetic.DD,
shape = this.getIntersection(this.getPointerPosition());
if(shape && shape.isListening()) {
if(!Kinetic.isDragging() && (!this.targetShape || this.targetShape._id !== shape._id)) {
if(this.targetShape) {
this.targetShape._fireAndBubble(MOUSEOUT, evt, shape);
this.targetShape._fireAndBubble(MOUSELEAVE, evt, shape);
}
shape._fireAndBubble(MOUSEOVER, evt, this.targetShape);
shape._fireAndBubble(MOUSEENTER, evt, this.targetShape);
this.targetShape = shape;
}
else {
shape._fireAndBubble(MOUSEMOVE, evt);
}
}
/*
* if no shape was detected, clear target shape and try
* to run mouseout from previous target shape
*/
else {
if(this.targetShape && !Kinetic.isDragging()) {
this.targetShape._fireAndBubble(MOUSEOUT, evt);
this.targetShape._fireAndBubble(MOUSELEAVE, evt);
this.targetShape = null; this.targetShape = null;
} }
this.pointerPos = undefined;
this._fire(CONTENT_MOUSEOUT, evt);
} }
},
_mousemove: Kinetic.Util._throttle(function(evt) {
if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt);
var dd = Kinetic.DD,
shape = this.getIntersection(this.getPointerPosition());
// content event if(shape && shape.isListening()) {
this._fire(CONTENT_MOUSEMOVE, evt); if(!Kinetic.isDragging() && (!this.targetShape || this.targetShape._id !== shape._id)) {
if(this.targetShape) {
this.targetShape._fireAndBubble(MOUSEOUT, evt, shape);
this.targetShape._fireAndBubble(MOUSELEAVE, evt, shape);
}
shape._fireAndBubble(MOUSEOVER, evt, this.targetShape);
shape._fireAndBubble(MOUSEENTER, evt, this.targetShape);
this.targetShape = shape;
}
else {
shape._fireAndBubble(MOUSEMOVE, evt);
}
}
/*
* if no shape was detected, clear target shape and try
* to run mouseout from previous target shape
*/
else {
if(this.targetShape && !Kinetic.isDragging()) {
this.targetShape._fireAndBubble(MOUSEOUT, evt);
this.targetShape._fireAndBubble(MOUSELEAVE, evt);
this.targetShape = null;
}
if(dd) { }
dd._drag(evt);
// content event
this._fire(CONTENT_MOUSEMOVE, evt);
if(dd) {
dd._drag(evt);
}
} }
// always call preventDefault for desktop events because some browsers // always call preventDefault for desktop events because some browsers
@ -401,21 +407,23 @@
if (evt.preventDefault) { if (evt.preventDefault) {
evt.preventDefault(); evt.preventDefault();
} }
}, }, 17),
_mousedown: function(evt) { _mousedown: function(evt) {
this._setPointerPosition(evt); if (!Kinetic.UA.mobile) {
var shape = this.getIntersection(this.getPointerPosition()); this._setPointerPosition(evt);
var shape = this.getIntersection(this.getPointerPosition());
Kinetic.listenClickTap = true; Kinetic.listenClickTap = true;
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
this.clickStartShape = shape; this.clickStartShape = shape;
shape._fireAndBubble(MOUSEDOWN, evt); shape._fireAndBubble(MOUSEDOWN, evt);
}
// content event
this._fire(CONTENT_MOUSEDOWN, evt);
} }
// content event
this._fire(CONTENT_MOUSEDOWN, evt);
// always call preventDefault for desktop events because some browsers // always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element // try to drag and drop the canvas element
if (evt.preventDefault) { if (evt.preventDefault) {
@ -423,45 +431,48 @@
} }
}, },
_mouseup: function(evt) { _mouseup: function(evt) {
this._setPointerPosition(evt); if (!Kinetic.UA.mobile) {
var shape = this.getIntersection(this.getPointerPosition()), this._setPointerPosition(evt);
clickStartShape = this.clickStartShape, var that = this,
fireDblClick = false; shape = this.getIntersection(this.getPointerPosition()),
clickStartShape = this.clickStartShape,
fireDblClick = false;
if(Kinetic.inDblClickWindow) { if(Kinetic.inDblClickWindow) {
fireDblClick = true; fireDblClick = true;
Kinetic.inDblClickWindow = false; Kinetic.inDblClickWindow = false;
} }
else { else {
Kinetic.inDblClickWindow = true; Kinetic.inDblClickWindow = true;
} }
setTimeout(function() { setTimeout(function() {
Kinetic.inDblClickWindow = false; Kinetic.inDblClickWindow = false;
}, Kinetic.dblClickWindow); }, Kinetic.dblClickWindow);
if (shape && shape.isListening()) { if (shape && shape.isListening()) {
shape._fireAndBubble(MOUSEUP, evt); shape._fireAndBubble(MOUSEUP, evt);
// detect if click or double click occurred // detect if click or double click occurred
if(Kinetic.listenClickTap && clickStartShape && clickStartShape._id === shape._id) { if(Kinetic.listenClickTap && clickStartShape && clickStartShape._id === shape._id) {
shape._fireAndBubble(CLICK, evt); shape._fireAndBubble(CLICK, evt);
if(fireDblClick) { if(fireDblClick) {
shape._fireAndBubble(DBL_CLICK, evt); shape._fireAndBubble(DBL_CLICK, evt);
}
} }
} }
} // content events
// content events this._fire(CONTENT_MOUSEUP, evt);
this._fire(CONTENT_MOUSEUP, evt); if (Kinetic.listenClickTap) {
if (Kinetic.listenClickTap) { this._fire(CONTENT_CLICK, evt);
this._fire(CONTENT_CLICK, evt); if(fireDblClick) {
if(fireDblClick) { this._fire(CONTENT_DBL_CLICK, evt);
this._fire(CONTENT_DBL_CLICK, evt); }
} }
}
Kinetic.listenClickTap = false; Kinetic.listenClickTap = false;
}
// always call preventDefault for desktop events because some browsers // always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element // try to drag and drop the canvas element
@ -530,7 +541,7 @@
Kinetic.listenClickTap = false; Kinetic.listenClickTap = false;
}, },
_touchmove: function(evt) { _touchmove: Kinetic.Util._throttle(function(evt) {
this._setPointerPosition(evt); this._setPointerPosition(evt);
var dd = Kinetic.DD, var dd = Kinetic.DD,
shape = this.getIntersection(this.getPointerPosition()); shape = this.getIntersection(this.getPointerPosition());
@ -549,7 +560,7 @@
if(dd) { if(dd) {
dd._drag(evt); dd._drag(evt);
} }
}, }, 17),
_setPointerPosition: function(evt) { _setPointerPosition: function(evt) {
var contentPosition = this._getContentPosition(), var contentPosition = this._getContentPosition(),
offsetX = evt.offsetX, offsetX = evt.offsetX,

34
src/Util.js
View File

@ -319,6 +319,40 @@
_isString: function(obj) { _isString: function(obj) {
return Object.prototype.toString.call(obj) == OBJECT_STRING; return Object.prototype.toString.call(obj) == OBJECT_STRING;
}, },
// Returns a function, that, when invoked, will only be triggered at most once
// during a given window of time. Normally, the throttled function will run
// as much as it can, without ever going more than once per `wait` duration;
// but if you'd like to disable the execution on the leading edge, pass
// `{leading: false}`. To disable execution on the trailing edge, ditto.
_throttle: function(func, wait, options) {
var context, args, result;
var timeout = null;
var previous = 0;
options || (options = {});
var later = function() {
previous = options.leading === false ? 0 : new Date().getTime();
timeout = null;
result = func.apply(context, args);
context = args = null;
};
return function() {
var now = new Date().getTime();
if (!previous && options.leading === false) previous = now;
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0) {
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(context, args);
context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
},
/* /*
* other utils * other utils
*/ */

18
src/plugins/TextPath.js
View File

@ -13,6 +13,7 @@
* @param {String} [config.fontFamily] default is Calibri * @param {String} [config.fontFamily] default is Calibri
* @param {Number} [config.fontSize] default is 12 * @param {Number} [config.fontSize] default is 12
* @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal * @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal
* @param {String} [config.fontVariant] can be normal or small-caps. Default is normal
* @param {String} config.text * @param {String} config.text
* @param {String} config.data SVG data string * @param {String} config.data SVG data string
* @@shapeParams * @@shapeParams
@ -380,6 +381,23 @@
* @memberof Kinetic.TextPath.prototype * @memberof Kinetic.TextPath.prototype
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.TextPath, 'fontVariant', NORMAL);
/**
* set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default.
* @name setFontVariant
* @method
* @memberof Kinetic.TextPath.prototype
* @param {String} fontVariant
*/
/**
* @get font variant
* @name getFontVariant
* @method
* @memberof Kinetic.TextPath.prototype
*/
Kinetic.Factory.addGetter(Kinetic.TextPath, 'text', EMPTY_STRING); Kinetic.Factory.addGetter(Kinetic.TextPath, 'text', EMPTY_STRING);
/** /**

24
src/shapes/Text.js
View File

@ -18,7 +18,7 @@
WORD = 'word', WORD = 'word',
CHAR = 'char', CHAR = 'char',
NONE = 'none', NONE = 'none',
ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'wrap'], ATTR_CHANGE_LIST = ['fontFamily', 'fontSize', 'fontStyle', 'fontVariant', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'wrap'],
// cached variables // cached variables
attrChangeListLen = ATTR_CHANGE_LIST.length, attrChangeListLen = ATTR_CHANGE_LIST.length,
@ -33,6 +33,7 @@
* @param {String} [config.fontFamily] default is Arial * @param {String} [config.fontFamily] default is Arial
* @param {Number} [config.fontSize] in pixels. Default is 12 * @param {Number} [config.fontSize] in pixels. Default is 12
* @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal * @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal
* @param {String} [config.fontVariant] can be normal or small-caps. Default is normal
* @param {String} config.text * @param {String} config.text
* @param {String} [config.align] can be left, center, or right * @param {String} [config.align] can be left, center, or right
* @param {Number} [config.padding] * @param {Number} [config.padding]
@ -193,7 +194,7 @@
}; };
}, },
_getContextFont: function() { _getContextFont: function() {
return this.getFontStyle() + SPACE + this.getFontSize() + PX_SPACE + this.getFontFamily(); return this.getFontStyle() + SPACE + this.getFontVariant() + SPACE + this.getFontSize() + PX_SPACE + this.getFontFamily();
}, },
_addTextLine: function (line, width) { _addTextLine: function (line, width) {
return this.textArr.push({text: line, width: width}); return this.textArr.push({text: line, width: width});
@ -220,7 +221,7 @@
this.textArr = []; this.textArr = [];
dummyContext.save(); dummyContext.save();
dummyContext.font = this.getFontStyle() + SPACE + fontSize + PX_SPACE + this.getFontFamily(); dummyContext.font = this._getContextFont();
for (var i = 0, max = lines.length; i < max; ++i) { for (var i = 0, max = lines.length; i < max; ++i) {
var line = lines[i], var line = lines[i],
lineWidth = this._getTextWidth(line); lineWidth = this._getTextWidth(line);
@ -364,6 +365,23 @@
* text.fontStyle('bold'); * text.fontStyle('bold');
*/ */
Kinetic.Factory.addGetterSetter(Kinetic.Text, 'fontVariant', NORMAL);
/**
* set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default.
* @name fontVariant
* @method
* @memberof Kinetic.Text.prototype
* @param {String} fontVariant
* @returns {String}
* @example
* // get font variant<br>
* var fontVariant = text.fontVariant();<br><br>
*
* // set font variant<br>
* text.fontVariant('small-caps');
*/
Kinetic.Factory.addGetterSetter(Kinetic.Text, 'padding', 0); Kinetic.Factory.addGetterSetter(Kinetic.Text, 'padding', 0);
/** /**

210
test/functional/DragAndDropEvents-test.js
View File

@ -1,6 +1,6 @@
suite('DragAndDropEvents', function() { suite('DragAndDropEvents', function() {
// ====================================================== // ======================================================
test('test dragstart, dragmove, dragend', function() { test('test dragstart, dragmove, dragend', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
@ -89,51 +89,55 @@ suite('DragAndDropEvents', function() {
assert(!Kinetic.isDragging(), ' isDragging() should be false 5'); assert(!Kinetic.isDragging(), ' isDragging() should be false 5');
assert(Kinetic.isDragReady(), ' isDragReady()) should be true 6'); assert(Kinetic.isDragReady(), ' isDragReady()) should be true 6');
stage._mousemove({ setTimeout(function() {
clientX: 100, stage._mousemove({
clientY: 98 + top clientX: 100,
}); clientY: 98 + top
});
assert(Kinetic.isDragging(), ' isDragging() should be true 7'); assert(Kinetic.isDragging(), ' isDragging() should be true 7');
assert(Kinetic.isDragReady(), ' isDragReady()) should be true 8'); assert(Kinetic.isDragReady(), ' isDragReady()) should be true 8');
assert(dragStart, 'dragstart event was not triggered 9'); assert(dragStart, 'dragstart event was not triggered 9');
//assert.equal(dragMove, 'dragmove event was not triggered'); //assert.equal(dragMove, 'dragmove event was not triggered');
assert(!dragEnd, 'dragend event should not have been triggered 10'); assert(!dragEnd, 'dragend event should not have been triggered 10');
Kinetic.DD._endDragBefore(); Kinetic.DD._endDragBefore();
stage._mouseup({ stage._mouseup({
clientX: 100, clientX: 100,
clientY: 98 + top clientY: 98 + top
}); });
Kinetic.DD._endDragAfter({dragEndNode:circle}); Kinetic.DD._endDragAfter({dragEndNode:circle});
assert(dragStart, 'dragstart event was not triggered 11'); assert(dragStart, 'dragstart event was not triggered 11');
assert(dragMove, 'dragmove event was not triggered 12'); assert(dragMove, 'dragmove event was not triggered 12');
assert(dragEnd, 'dragend event was not triggered 13'); assert(dragEnd, 'dragend event was not triggered 13');
assert.equal(events.toString(), 'mouseup,dragend', 'mouseup should occur before dragend 14'); assert.equal(events.toString(), 'mouseup,dragend', 'mouseup should occur before dragend 14');
assert(!Kinetic.isDragging(), ' isDragging() should be false 15'); assert(!Kinetic.isDragging(), ' isDragging() should be false 15');
assert(!Kinetic.isDragReady(), ' isDragReady()) should be false 16'); assert(!Kinetic.isDragReady(), ' isDragReady()) should be false 16');
//console.log(greenCircle.getPosition()); //console.log(greenCircle.getPosition());
//console.log(circle.getPosition()); //console.log(circle.getPosition());
assert.equal(greenCircle.getX(), 40, 'green circle x should be 40'); assert.equal(greenCircle.getX(), 40, 'green circle x should be 40');
assert.equal(greenCircle.getY(), 40, 'green circle y should be 40'); assert.equal(greenCircle.getY(), 40, 'green circle y should be 40');
assert.equal(circle.getX(), 100, 'circle x should be 100'); assert.equal(circle.getX(), 100, 'circle x should be 100');
assert.equal(circle.getY(), 100, 'circle y should be 100'); assert.equal(circle.getY(), 100, 'circle y should be 100');
showHit(layer); showHit(layer);
done();
}, 20);
}); });
// ====================================================== // ======================================================
test('destroy shape while dragging', function() { test('destroy shape while dragging', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
@ -194,31 +198,33 @@ suite('DragAndDropEvents', function() {
assert(!circle.isDragging(), 'circle should not be dragging'); assert(!circle.isDragging(), 'circle should not be dragging');
stage._mousemove({ setTimeout(function() {
clientX: 100, stage._mousemove({
clientY: 98 + top clientX: 100,
}); clientY: 98 + top
});
assert(circle.isDragging(), 'circle should be dragging'); assert(circle.isDragging(), 'circle should be dragging');
assert(!dragEnd, 'dragEnd should not have fired yet'); assert(!dragEnd, 'dragEnd should not have fired yet');
// at this point, we are in drag and drop mode // at this point, we are in drag and drop mode
// removing or destroying the circle should trigger dragend // removing or destroying the circle should trigger dragend
circle.destroy(); circle.destroy();
layer.draw(); layer.draw();
assert(!circle.isDragging(), 'destroying circle should stop drag and drop');
assert(dragEnd, 'dragEnd should have fired');
assert(!circle.isDragging(), 'destroying circle should stop drag and drop');
assert(dragEnd, 'dragEnd should have fired');
done();
}, 20);
}); });
// ====================================================== // ======================================================
test('click should not occur after drag and drop', function() { test('click should not occur after drag and drop', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
@ -253,24 +259,28 @@ suite('DragAndDropEvents', function() {
clientY: 40 + top clientY: 40 + top
}); });
stage._mousemove({ setTimeout(function() {
clientX: 100, stage._mousemove({
clientY: 100 + top clientX: 100,
}); clientY: 100 + top
});
Kinetic.DD._endDragBefore(); Kinetic.DD._endDragBefore();
stage._mouseup({ stage._mouseup({
clientX: 100, clientX: 100,
clientY: 100 + top clientY: 100 + top
}); });
Kinetic.DD._endDragAfter({dragEndNode:circle}); Kinetic.DD._endDragAfter({dragEndNode:circle});
assert(!clicked, 'click event should not have been fired'); assert(!clicked, 'click event should not have been fired');
done();
}, 20);
}); });
// ====================================================== // ======================================================
test('cancel drag and drop by setting draggable to false', function() { test('cancel drag and drop by setting draggable to false', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
@ -316,24 +326,27 @@ suite('DragAndDropEvents', function() {
clientY: 100 + top clientY: 100 + top
}); });
stage._mousemove({ setTimeout(function() {
clientX: 100, stage._mousemove({
clientY: 100 + top clientX: 100,
}); clientY: 100 + top
});
Kinetic.DD._endDragBefore(); Kinetic.DD._endDragBefore();
stage._mouseup({ stage._mouseup({
clientX: 100, clientX: 100,
clientY: 100 + top clientY: 100 + top
}); });
Kinetic.DD._endDragAfter({dragEndNode:circle}); Kinetic.DD._endDragAfter({dragEndNode:circle});
assert.equal(circle.getPosition().x, 380, 'circle x should be 380'); assert.equal(circle.getPosition().x, 380, 'circle x should be 380');
assert.equal(circle.getPosition().y, 100, 'circle y should be 100'); assert.equal(circle.getPosition().y, 100, 'circle y should be 100');
done();
}, 20);
}); });
// ====================================================== // ======================================================
test('drag and drop layer', function() { test('drag and drop layer', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer({ var layer = new Kinetic.Layer({
drawFunc: function() { drawFunc: function() {
@ -378,27 +391,31 @@ suite('DragAndDropEvents', function() {
clientY: 96 + top clientY: 96 + top
}); });
stage._mousemove({ setTimeout(function() {
clientX: 210, stage._mousemove({
clientY: 109 + top clientX: 210,
}); clientY: 109 + top
});
Kinetic.DD._endDragBefore(); Kinetic.DD._endDragBefore();
stage._mouseup({ stage._mouseup({
clientX: 210, clientX: 210,
clientY: 109 + top clientY: 109 + top
}); });
Kinetic.DD._endDragAfter({dragEndNode:circle2}); Kinetic.DD._endDragAfter({dragEndNode:circle2});
//console.log(layer.getPosition()) //console.log(layer.getPosition())
assert.equal(layer.getX(), -189, 'layer x should be -189'); assert.equal(layer.getX(), -189, 'layer x should be -189');
assert.equal(layer.getY(), 13, 'layer y should be 13'); assert.equal(layer.getY(), 13, 'layer y should be 13');
done();
}, 20);
}); });
// ====================================================== // ======================================================
test('drag and drop stage', function() { test('drag and drop stage', function(done) {
var container = document.createElement('div'), var container = document.createElement('div'),
stage = new Kinetic.Stage({ stage = new Kinetic.Stage({
container: container, container: container,
@ -436,21 +453,24 @@ suite('DragAndDropEvents', function() {
clientY: 100 + top clientY: 100 + top
}); });
stage._mousemove({ setTimeout(function() {
clientX: 300, stage._mousemove({
clientY: 110 + top clientX: 300,
}); clientY: 110 + top
});
Kinetic.DD._endDragBefore(); Kinetic.DD._endDragBefore();
stage._mouseup({ stage._mouseup({
clientX: 300, clientX: 300,
clientY: 110 + top clientY: 110 + top
}); });
Kinetic.DD._endDragAfter(); Kinetic.DD._endDragAfter();
assert.equal(stage.getX(), 300); assert.equal(stage.getX(), 300);
assert.equal(stage.getY(), 10); assert.equal(stage.getY(), 10);
done();
}, 20);
}); });
}); });

542
test/functional/MouseEvents-test.js
View File

@ -1,7 +1,10 @@
suite('MouseEvents', function() { suite('MouseEvents', function() {
// NOTE: disable throttling so these tests can run synchronously
Kinetic.enableThrottling = false;
// ====================================================== // ======================================================
test('stage content mouse events', function() { test('stage content mouse events', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
@ -112,26 +115,30 @@ suite('MouseEvents', function() {
assert.equal(stageContentMouseup, 3); assert.equal(stageContentMouseup, 3);
//assert.equal(stageContentDblClick, 1); //assert.equal(stageContentDblClick, 1);
stage._mousemove({ setTimeout(function() {
clientX: 200, stage._mousemove({
clientY: 1 + top clientX: 200,
}); clientY: 1 + top
});
assert.equal(stageContentMousemove, 1); assert.equal(stageContentMousemove, 1);
stage._mouseout({ stage._mouseout({
clientX: 0, clientX: 0,
clientY: 0 clientY: 0
}); });
assert.equal(stageContentMouseout, 1); assert.equal(stageContentMouseout, 1);
stage._mouseover({ stage._mouseover({
clientX: 0, clientX: 0,
clientY: 0 clientY: 0
}); });
assert.equal(stageContentMouseover, 1); assert.equal(stageContentMouseover, 1);
done();
}, 20);
}); });
@ -395,7 +402,7 @@ suite('MouseEvents', function() {
}); });
// ====================================================== // ======================================================
test('modify fill stroke and stroke width on hover with circle', function() { test('modify fill stroke and stroke width on hover with circle', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer({ var layer = new Kinetic.Layer({
throttle: 999 throttle: 999
@ -433,30 +440,32 @@ suite('MouseEvents', function() {
assert.equal(circle.getFill(), 'red', 'circle fill should be red'); assert.equal(circle.getFill(), 'red', 'circle fill should be red');
assert.equal(circle.getStroke(), 'black', 'circle stroke should be black'); assert.equal(circle.getStroke(), 'black', 'circle stroke should be black');
stage._mousemove({ setTimeout(function() {
clientX: 377, stage._mousemove({
clientY: 101 + top clientX: 377,
}); clientY: 101 + top
});
assert.equal(circle.getFill(), 'yellow', 'circle fill should be yellow'); assert.equal(circle.getFill(), 'yellow', 'circle fill should be yellow');
assert.equal(circle.getStroke(), 'purple', 'circle stroke should be purple'); assert.equal(circle.getStroke(), 'purple', 'circle stroke should be purple');
// move mouse back out of circle setTimeout(function() {
stage._mousemove({ // move mouse back out of circle
clientX: 157, stage._mousemove({
clientY: 138 + top clientX: 157,
}); clientY: 138 + top
stage._mousemove({ });
clientX: 157,
clientY: 138 + top
});
assert.equal(circle.getFill(), 'red', 'circle fill should be red');
assert.equal(circle.getStroke(), 'black', 'circle stroke should be black'); assert.equal(circle.getFill(), 'red', 'circle fill should be red');
assert.equal(circle.getStroke(), 'black', 'circle stroke should be black');
done();
}, 20);
}, 20);
}); });
// ====================================================== // ======================================================
test('mousedown mouseup mouseover mouseout mousemove click dblclick', function() { test('mousedown mouseup mouseover mouseout mousemove click dblclick', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
@ -518,107 +527,110 @@ suite('MouseEvents', function() {
var top = stage.content.getBoundingClientRect().top; var top = stage.content.getBoundingClientRect().top;
// move mouse to center of circle to trigger mouseover setTimeout(function() {
stage._mousemove({ // move mouse to center of circle to trigger mouseover
clientX: 290, stage._mousemove({
clientY: 100 + top clientX: 290,
}); clientY: 100 + top
});
assert(mouseover, '1) mouseover should be true'); assert(mouseover, '1) mouseover should be true');
assert(!mousemove, '1) mousemove should be true'); assert(!mousemove, '1) mousemove should be true');
assert(!mousedown, '1) mousedown should be false'); assert(!mousedown, '1) mousedown should be false');
assert(!mouseup, '1) mouseup should be false'); assert(!mouseup, '1) mouseup should be false');
assert(!click, '1) click should be false'); assert(!click, '1) click should be false');
assert(!dblclick, '1) dblclick should be false'); assert(!dblclick, '1) dblclick should be false');
assert(!mouseout, '1) mouseout should be false'); assert(!mouseout, '1) mouseout should be false');
// move mouse again inside circle to trigger mousemove setTimeout(function() {
stage._mousemove({ // move mouse again inside circle to trigger mousemove
clientX: 290, stage._mousemove({
clientY: 100 + top clientX: 290,
}); clientY: 100 + top
});
assert(mouseover, '2) mouseover should be true'); assert(mouseover, '2) mouseover should be true');
assert(mousemove, '2) mousemove should be true'); assert(mousemove, '2) mousemove should be true');
assert(!mousedown, '2) mousedown should be false'); assert(!mousedown, '2) mousedown should be false');
assert(!mouseup, '2) mouseup should be false'); assert(!mouseup, '2) mouseup should be false');
assert(!click, '2) click should be false'); assert(!click, '2) click should be false');
assert(!dblclick, '2) dblclick should be false'); assert(!dblclick, '2) dblclick should be false');
assert(!mouseout, '2) mouseout should be false'); assert(!mouseout, '2) mouseout should be false');
// mousedown inside circle // mousedown inside circle
stage._mousedown({ stage._mousedown({
clientX: 290, clientX: 290,
clientY: 100 + top clientY: 100 + top
}); });
assert(mouseover, '3) mouseover should be true'); assert(mouseover, '3) mouseover should be true');
assert(mousemove, '3) mousemove should be true'); assert(mousemove, '3) mousemove should be true');
assert(mousedown, '3) mousedown should be true'); assert(mousedown, '3) mousedown should be true');
assert(!mouseup, '3) mouseup should be false'); assert(!mouseup, '3) mouseup should be false');
assert(!click, '3) click should be false'); assert(!click, '3) click should be false');
assert(!dblclick, '3) dblclick should be false'); assert(!dblclick, '3) dblclick should be false');
assert(!mouseout, '3) mouseout should be false'); assert(!mouseout, '3) mouseout should be false');
// mouseup inside circle // mouseup inside circle
stage._mouseup({ stage._mouseup({
clientX: 290, clientX: 290,
clientY: 100 + top clientY: 100 + top
}); });
assert(mouseover, '4) mouseover should be true'); assert(mouseover, '4) mouseover should be true');
assert(mousemove, '4) mousemove should be true'); assert(mousemove, '4) mousemove should be true');
assert(mousedown, '4) mousedown should be true'); assert(mousedown, '4) mousedown should be true');
assert(mouseup, '4) mouseup should be true'); assert(mouseup, '4) mouseup should be true');
assert(click, '4) click should be true'); assert(click, '4) click should be true');
assert(!dblclick, '4) dblclick should be false'); assert(!dblclick, '4) dblclick should be false');
assert(!mouseout, '4) mouseout should be false'); assert(!mouseout, '4) mouseout should be false');
// mousedown inside circle // mousedown inside circle
stage._mousedown({ stage._mousedown({
clientX: 290, clientX: 290,
clientY: 100 + top clientY: 100 + top
}); });
assert(mouseover, '5) mouseover should be true'); assert(mouseover, '5) mouseover should be true');
assert(mousemove, '5) mousemove should be true'); assert(mousemove, '5) mousemove should be true');
assert(mousedown, '5) mousedown should be true'); assert(mousedown, '5) mousedown should be true');
assert(mouseup, '5) mouseup should be true'); assert(mouseup, '5) mouseup should be true');
assert(click, '5) click should be true'); assert(click, '5) click should be true');
assert(!dblclick, '5) dblclick should be false'); assert(!dblclick, '5) dblclick should be false');
assert(!mouseout, '5) mouseout should be false'); assert(!mouseout, '5) mouseout should be false');
// mouseup inside circle to trigger double click // mouseup inside circle to trigger double click
stage._mouseup({ stage._mouseup({
clientX: 290, clientX: 290,
clientY: 100 + top clientY: 100 + top
}); });
assert(mouseover, '6) mouseover should be true'); assert(mouseover, '6) mouseover should be true');
assert(mousemove, '6) mousemove should be true'); assert(mousemove, '6) mousemove should be true');
assert(mousedown, '6) mousedown should be true'); assert(mousedown, '6) mousedown should be true');
assert(mouseup, '6) mouseup should be true'); assert(mouseup, '6) mouseup should be true');
assert(click, '6) click should be true'); assert(click, '6) click should be true');
assert(dblclick, '6) dblclick should be true'); assert(dblclick, '6) dblclick should be true');
assert(!mouseout, '6) mouseout should be false'); assert(!mouseout, '6) mouseout should be false');
// move mouse outside of circle to trigger mouseout setTimeout(function() {
stage._mousemove({ // move mouse outside of circle to trigger mouseout
clientX: 0, stage._mousemove({
clientY: 100 + top clientX: 0,
}); clientY: 100 + top
stage._mousemove({ });
clientX: 0,
clientY: 100 + top
});
assert(mouseover, '7) mouseover should be true'); assert(mouseover, '7) mouseover should be true');
assert(mousemove, '7) mousemove should be true'); assert(mousemove, '7) mousemove should be true');
assert(mousedown, '7) mousedown should be true'); assert(mousedown, '7) mousedown should be true');
assert(mouseup, '7) mouseup should be true'); assert(mouseup, '7) mouseup should be true');
assert(click, '7) click should be true'); assert(click, '7) click should be true');
assert(dblclick, '7) dblclick should be true'); assert(dblclick, '7) dblclick should be true');
assert(mouseout, '7) mouseout should be true'); assert(mouseout, '7) mouseout should be true');
done();
}, 20);
}, 20);
}, 20);
}); });
// ====================================================== // ======================================================
@ -700,7 +712,7 @@ suite('MouseEvents', function() {
}); });
// ====================================================== // ======================================================
test('group mouseenter events', function() { test('group mouseenter events', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var group = new Kinetic.Group({ var group = new Kinetic.Group({
@ -772,84 +784,90 @@ suite('MouseEvents', function() {
var top = stage.content.getBoundingClientRect().top; var top = stage.content.getBoundingClientRect().top;
// move mouse outside of circles setTimeout(function() {
stage._mousemove({ // move mouse outside of circles
clientX: 177, stage._mousemove({
clientY: 146 + top clientX: 177,
}); clientY: 146 + top
});
assert.equal(redMouseenters, 0, 'redMouseenters should be 0'); assert.equal(redMouseenters, 0, 'redMouseenters should be 0');
assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0'); assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0'); assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0'); assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 0, 'groupMouseenters should be 0'); assert.equal(groupMouseenters, 0, 'groupMouseenters should be 0');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0'); assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse inside of red circle setTimeout(function() {
stage._mousemove({ // move mouse inside of red circle
clientX: 236, stage._mousemove({
clientY: 145 + top clientX: 236,
}); clientY: 145 + top
});
//console.log('groupMouseenters=' + groupMouseenters); //console.log('groupMouseenters=' + groupMouseenters);
assert.equal(redMouseenters, 1, 'redMouseenters should be 1'); assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0'); assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0'); assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0'); assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1'); assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0'); assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse inside of green circle setTimeout(function() {
stage._mousemove({ // move mouse inside of green circle
clientX: 284, stage._mousemove({
clientY: 118 + top clientX: 284,
}); clientY: 118 + top
});
assert.equal(redMouseenters, 1, 'redMouseenters should be 1'); assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1'); assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1'); assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0'); assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1'); assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0'); assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse back to red circle setTimeout(function() {
// move mouse back to red circle
stage._mousemove({ stage._mousemove({
clientX: 345, clientX: 345,
clientY: 105 + top clientY: 105 + top
}); });
stage._mousemove({
clientX: 345,
clientY: 105 + top
});
assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse outside of circles assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
stage._mousemove({ assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
clientX: 177, assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
clientY: 146 + top assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
}); assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
stage._mousemove({ assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
clientX: 177,
clientY: 146 + top
});
assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
assert.equal(redMouseleaves, 2, 'redMouseleaves should be 2');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 1, 'groupMouseleaves should be 1');
//document.body.appendChild(layer.bufferCanvas.element) setTimeout(function() {
// move mouse outside of circles
stage._mousemove({
clientX: 177,
clientY: 146 + top
});
//layer.bufferCanvas.element.style.marginTop = '220px'; assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
assert.equal(redMouseleaves, 2, 'redMouseleaves should be 2');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 1, 'groupMouseleaves should be 1');
//document.body.appendChild(layer.bufferCanvas.element)
//layer.bufferCanvas.element.style.marginTop = '220px';
done();
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
}); });
@ -923,7 +941,7 @@ suite('MouseEvents', function() {
}); });
// ====================================================== // ======================================================
test('test custom circle hit function', function() { test('test custom circle hit function', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
@ -960,82 +978,102 @@ suite('MouseEvents', function() {
circle.on('mouseout', function() { circle.on('mouseout', function() {
mouseouts++; mouseouts++;
}); });
// move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
assert.equal(mouseovers, 0, '1) mouseovers should be 0'); setTimeout(function() {
assert.equal(mouseouts, 0, '1) mouseouts should be 0');
stage._mousemove({
clientX: 286,
clientY: 118 + top
});
assert.equal(mouseovers, 1, '2) mouseovers should be 1');
assert.equal(mouseouts, 0, '2)mouseouts should be 0');
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '3) mouseovers should be 1');
assert.equal(mouseouts, 1, '3) mouseouts should be 1');
showHit(layer);
// set drawBufferFunc with setter // move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
circle.hitFunc(function(context) { setTimeout(function() {
var _context = context._context; assert.equal(mouseovers, 0, '1) mouseovers should be 0');
_context.beginPath(); assert.equal(mouseouts, 0, '1) mouseouts should be 0');
_context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
_context.closePath();
context.fillStrokeShape(this);
}); stage._mousemove({
clientX: 286,
clientY: 118 + top
});
layer.getHitCanvas().getContext().clear(); assert.equal(mouseovers, 1, '2) mouseovers should be 1');
layer.drawHit(); assert.equal(mouseouts, 0, '2)mouseouts should be 0');
setTimeout(function() {
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '3) mouseovers should be 1');
assert.equal(mouseouts, 1, '3) mouseouts should be 1');
showHit(layer);
// move mouse far outside circle // set drawBufferFunc with setter
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '4) mouseovers should be 1'); circle.hitFunc(function(context) {
assert.equal(mouseouts, 1, '4) mouseouts should be 1'); var _context = context._context;
_context.beginPath();
_context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
_context.closePath();
context.fillStrokeShape(this);
stage._mousemove({ });
clientX: 286,
clientY: 118 + top
});
assert.equal(mouseovers, 1, '5) mouseovers should be 1'); layer.getHitCanvas().getContext().clear();
assert.equal(mouseouts, 1, '5) mouseouts should be 1'); layer.drawHit();
stage._mousemove({ setTimeout(function() {
clientX: 321,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '6) mouseovers should be 1'); // move mouse far outside circle
assert.equal(mouseouts, 1, '6) mouseouts should be 1'); stage._mousemove({
clientX: 113,
clientY: 112 + top
});
// move to center of circle assert.equal(mouseovers, 1, '4) mouseovers should be 1');
stage._mousemove({ assert.equal(mouseouts, 1, '4) mouseouts should be 1');
clientX: 375,
clientY: 112 + top
});
assert.equal(mouseovers, 2, '7) mouseovers should be 2'); setTimeout(function() {
assert.equal(mouseouts, 1, '7) mouseouts should be 1');
stage._mousemove({
clientX: 286,
clientY: 118 + top
});
assert.equal(mouseovers, 1, '5) mouseovers should be 1');
assert.equal(mouseouts, 1, '5) mouseouts should be 1');
setTimeout(function() {
stage._mousemove({
clientX: 321,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '6) mouseovers should be 1');
assert.equal(mouseouts, 1, '6) mouseouts should be 1');
setTimeout(function() {
// move to center of circle
stage._mousemove({
clientX: 375,
clientY: 112 + top
});
assert.equal(mouseovers, 2, '7) mouseovers should be 2');
assert.equal(mouseouts, 1, '7) mouseouts should be 1');
done();
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
}, 20);
}); });
}); });

34
test/functional/TouchEvents-test.js
View File

@ -92,7 +92,7 @@ suite('TouchEvents', function() {
// ====================================================== // ======================================================
test('touchstart touchend touchmove tap dbltap', function() { test('touchstart touchend touchmove tap dbltap', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
@ -215,20 +215,24 @@ suite('TouchEvents', function() {
assert(tap, '11) tap should be true'); assert(tap, '11) tap should be true');
assert(dbltap, '11) dbltap should be true'); assert(dbltap, '11) dbltap should be true');
// touchmove circle setTimeout(function() {
stage._touchmove({ // touchmove circle
touches: [{ stage._touchmove({
clientX: 290, touches: [{
clientY: 100 + top, clientX: 290,
}], clientY: 100 + top,
preventDefault: function() { }],
} preventDefault: function() {
}); }
});
assert(touchstart, '12) touchstart should be true'); assert(touchstart, '12) touchstart should be true');
assert(touchmove, '12) touchmove should be true'); assert(touchmove, '12) touchmove should be true');
assert(touchend, '12) touchend should be true'); assert(touchend, '12) touchend should be true');
assert(tap, '12) tap should be true'); assert(tap, '12) tap should be true');
assert(dbltap, '12) dbltap should be true'); assert(dbltap, '12) dbltap should be true');
done();
}, 17);
}); });
}); });

1
test/runner.html
View File

@ -102,7 +102,6 @@
<script src="functional/MouseEvents-test.js"></script> <script src="functional/MouseEvents-test.js"></script>
<script src="functional/TouchEvents-test.js"></script> <script src="functional/TouchEvents-test.js"></script>
<script src="functional/KineticEvents-test.js"></script>
<script src="functional/DragAndDropEvents-test.js"></script> <script src="functional/DragAndDropEvents-test.js"></script>
<!--=============== manual tests ================--> <!--=============== manual tests ================-->

51
test/unit/DragAndDrop-test.js
View File

@ -1,38 +1,45 @@
suite('DragAndDrop', function() { suite('DragAndDrop', function() {
// ====================================================== // ======================================================
test('test drag and drop properties and methods', function() { test('test drag and drop properties and methods', function(done) {
var stage = addStage(); var stage = addStage();
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.getWidth() / 2, x: stage.getWidth() / 2,
y: stage.getHeight() / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
strokeWidth: 4, strokeWidth: 4,
name: 'myCircle' name: 'myCircle'
}); });
stage.add(layer); stage.add(layer);
layer.add(circle); layer.add(circle);
layer.draw();
// test defaults setTimeout(function() {
assert.equal(circle.draggable(), false);
//change properties layer.draw();
circle.setDraggable(true);
// test defaults
assert.equal(circle.draggable(), false);
//change properties
circle.setDraggable(true);
//circle.on('click', function(){}); //circle.on('click', function(){});
layer.draw(); layer.draw();
showHit(layer); showHit(layer);
// test new properties // test new properties
assert.equal(circle.getDraggable(), true); assert.equal(circle.getDraggable(), true);
done();
}, 50);
}); });
// ====================================================== // ======================================================

7
test/unit/shapes/Sprite-test.js
View File

@ -28,7 +28,7 @@ suite('Sprite', function() {
156, 109, 70, 98, 156, 109, 70, 98,
229, 109, 60, 98, 229, 109, 60, 98,
287, 109, 41, 98 287, 109, 41, 98
] ]
}, },
frameRate: 10, frameRate: 10,
draggable: true, draggable: true,
@ -72,7 +72,7 @@ suite('Sprite', function() {
}; };
imageObj.src = 'assets/scorpion-sprite.png'; imageObj.src = 'assets/scorpion-sprite.png';
}); });
test('can change frame rate on fly', function(done){ test.skip('can change frame rate on fly', function(done){
var imageObj = new Image(); var imageObj = new Image();
imageObj.onload = function() { imageObj.onload = function() {
var stage = addStage(); var stage = addStage();
@ -122,9 +122,6 @@ suite('Sprite', function() {
assert.equal(sprite.frameIndex() > 2, true); assert.equal(sprite.frameIndex() > 2, true);
done(); done();
}, 68); }, 68);
}; };
imageObj.src = 'assets/scorpion-sprite.png'; imageObj.src = 'assets/scorpion-sprite.png';
}); });

4
test/unit/shapes/Text-test.js
View File

@ -67,6 +67,7 @@ suite('Text', function(){
fontSize: 50, fontSize: 50,
fontFamily: 'Calibri', fontFamily: 'Calibri',
fontStyle: 'normal', fontStyle: 'normal',
fontVariant: 'normal',
fill: '#888', fill: '#888',
stroke: '#333', stroke: '#333',
align: 'right', align: 'right',
@ -97,6 +98,7 @@ suite('Text', function(){
assert.equal(text.getFontSize(), 50); assert.equal(text.getFontSize(), 50);
assert.equal(text.getFontFamily(), 'Calibri'); assert.equal(text.getFontFamily(), 'Calibri');
assert.equal(text.getFontStyle(), 'normal'); assert.equal(text.getFontStyle(), 'normal');
assert.equal(text.getFontVariant(), 'normal');
assert.equal(text.getFill(), '#888'); assert.equal(text.getFill(), '#888');
assert.equal(text.getStroke(), '#333'); assert.equal(text.getStroke(), '#333');
assert.equal(text.getAlign(), 'right'); assert.equal(text.getAlign(), 'right');
@ -117,6 +119,7 @@ suite('Text', function(){
text.setFontSize(10); text.setFontSize(10);
text.setFontFamily('Arial'); text.setFontFamily('Arial');
text.setFontStyle('bold'); text.setFontStyle('bold');
text.setFontVariant('small-caps');
text.setFill('green'); text.setFill('green');
text.setStroke('yellow'); text.setStroke('yellow');
text.setAlign('left'); text.setAlign('left');
@ -132,6 +135,7 @@ suite('Text', function(){
assert.equal(text.getFontSize(), 10); assert.equal(text.getFontSize(), 10);
assert.equal(text.getFontFamily(), 'Arial'); assert.equal(text.getFontFamily(), 'Arial');
assert.equal(text.getFontStyle(), 'bold'); assert.equal(text.getFontStyle(), 'bold');
assert.equal(text.getFontVariant(), 'small-caps');
assert.equal(text.getFill(), 'green'); assert.equal(text.getFill(), 'green');
assert.equal(text.getStroke(), 'yellow'); assert.equal(text.getStroke(), 'yellow');
assert.equal(text.getAlign(), 'left'); assert.equal(text.getAlign(), 'left');