lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-05 20:48:28 +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

23
src/Canvas.js
View File

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

11
src/Global.js
View File

@ -50,6 +50,7 @@ var Kinetic = {};
traceArrMax: 100,
dblClickWindow: 400,
pixelRatio: undefined,
enableThrottling: true,
// user agent
UA: (function() {
@ -60,11 +61,17 @@ var Kinetic = {};
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\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 {
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) {
this._fire(CONTENT_MOUSEOVER, evt);
if (!Kinetic.UA.mobile) {
this._fire(CONTENT_MOUSEOVER, evt);
}
},
_mouseout: function(evt) {
this._setPointerPosition(evt);
var targetShape = this.targetShape;
if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt);
var targetShape = this.targetShape;
if(targetShape && !Kinetic.isDragging()) {
targetShape._fireAndBubble(MOUSEOUT, 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);
if(targetShape && !Kinetic.isDragging()) {
targetShape._fireAndBubble(MOUSEOUT, evt);
targetShape._fireAndBubble(MOUSELEAVE, evt);
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
this._fire(CONTENT_MOUSEMOVE, evt);
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;
}
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
@ -401,21 +407,23 @@
if (evt.preventDefault) {
evt.preventDefault();
}
},
}, 17),
_mousedown: function(evt) {
this._setPointerPosition(evt);
var shape = this.getIntersection(this.getPointerPosition());
if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt);
var shape = this.getIntersection(this.getPointerPosition());
Kinetic.listenClickTap = true;
Kinetic.listenClickTap = true;
if (shape && shape.isListening()) {
this.clickStartShape = shape;
shape._fireAndBubble(MOUSEDOWN, evt);
if (shape && shape.isListening()) {
this.clickStartShape = shape;
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
// try to drag and drop the canvas element
if (evt.preventDefault) {
@ -423,45 +431,48 @@
}
},
_mouseup: function(evt) {
this._setPointerPosition(evt);
var shape = this.getIntersection(this.getPointerPosition()),
clickStartShape = this.clickStartShape,
fireDblClick = false;
if (!Kinetic.UA.mobile) {
this._setPointerPosition(evt);
var that = this,
shape = this.getIntersection(this.getPointerPosition()),
clickStartShape = this.clickStartShape,
fireDblClick = false;
if(Kinetic.inDblClickWindow) {
fireDblClick = true;
Kinetic.inDblClickWindow = false;
}
else {
Kinetic.inDblClickWindow = true;
}
if(Kinetic.inDblClickWindow) {
fireDblClick = true;
Kinetic.inDblClickWindow = false;
}
else {
Kinetic.inDblClickWindow = true;
}
setTimeout(function() {
Kinetic.inDblClickWindow = false;
}, Kinetic.dblClickWindow);
setTimeout(function() {
Kinetic.inDblClickWindow = false;
}, Kinetic.dblClickWindow);
if (shape && shape.isListening()) {
shape._fireAndBubble(MOUSEUP, evt);
if (shape && shape.isListening()) {
shape._fireAndBubble(MOUSEUP, evt);
// detect if click or double click occurred
if(Kinetic.listenClickTap && clickStartShape && clickStartShape._id === shape._id) {
shape._fireAndBubble(CLICK, evt);
// detect if click or double click occurred
if(Kinetic.listenClickTap && clickStartShape && clickStartShape._id === shape._id) {
shape._fireAndBubble(CLICK, evt);
if(fireDblClick) {
shape._fireAndBubble(DBL_CLICK, evt);
if(fireDblClick) {
shape._fireAndBubble(DBL_CLICK, evt);
}
}
}
}
// content events
this._fire(CONTENT_MOUSEUP, evt);
if (Kinetic.listenClickTap) {
this._fire(CONTENT_CLICK, evt);
if(fireDblClick) {
this._fire(CONTENT_DBL_CLICK, evt);
// content events
this._fire(CONTENT_MOUSEUP, evt);
if (Kinetic.listenClickTap) {
this._fire(CONTENT_CLICK, evt);
if(fireDblClick) {
this._fire(CONTENT_DBL_CLICK, evt);
}
}
}
Kinetic.listenClickTap = false;
Kinetic.listenClickTap = false;
}
// always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element
@ -530,7 +541,7 @@
Kinetic.listenClickTap = false;
},
_touchmove: function(evt) {
_touchmove: Kinetic.Util._throttle(function(evt) {
this._setPointerPosition(evt);
var dd = Kinetic.DD,
shape = this.getIntersection(this.getPointerPosition());
@ -549,7 +560,7 @@
if(dd) {
dd._drag(evt);
}
},
}, 17),
_setPointerPosition: function(evt) {
var contentPosition = this._getContentPosition(),
offsetX = evt.offsetX,

34
src/Util.js
View File

@ -319,6 +319,40 @@
_isString: function(obj) {
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
*/

18
src/plugins/TextPath.js
View File

@ -13,6 +13,7 @@
* @param {String} [config.fontFamily] default is Calibri
* @param {Number} [config.fontSize] default is 12
* @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.data SVG data string
* @@shapeParams
@ -380,6 +381,23 @@
* @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);
/**

24
src/shapes/Text.js
View File

@ -18,7 +18,7 @@
WORD = 'word',
CHAR = 'char',
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
attrChangeListLen = ATTR_CHANGE_LIST.length,
@ -33,6 +33,7 @@
* @param {String} [config.fontFamily] default is Arial
* @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.fontVariant] can be normal or small-caps. Default is normal
* @param {String} config.text
* @param {String} [config.align] can be left, center, or right
* @param {Number} [config.padding]
@ -193,7 +194,7 @@
};
},
_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) {
return this.textArr.push({text: line, width: width});
@ -220,7 +221,7 @@
this.textArr = [];
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) {
var line = lines[i],
lineWidth = this._getTextWidth(line);
@ -364,6 +365,23 @@
* 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);
/**

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

@ -1,6 +1,6 @@
suite('DragAndDropEvents', function() {
// ======================================================
test('test dragstart, dragmove, dragend', function() {
test('test dragstart, dragmove, dragend', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
@ -89,51 +89,55 @@ suite('DragAndDropEvents', function() {
assert(!Kinetic.isDragging(), ' isDragging() should be false 5');
assert(Kinetic.isDragReady(), ' isDragReady()) should be true 6');
stage._mousemove({
clientX: 100,
clientY: 98 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 98 + top
});
assert(Kinetic.isDragging(), ' isDragging() should be true 7');
assert(Kinetic.isDragReady(), ' isDragReady()) should be true 8');
assert(Kinetic.isDragging(), ' isDragging() should be true 7');
assert(Kinetic.isDragReady(), ' isDragReady()) should be true 8');
assert(dragStart, 'dragstart event was not triggered 9');
//assert.equal(dragMove, 'dragmove event was not triggered');
assert(!dragEnd, 'dragend event should not have been triggered 10');
assert(dragStart, 'dragstart event was not triggered 9');
//assert.equal(dragMove, 'dragmove event was not triggered');
assert(!dragEnd, 'dragend event should not have been triggered 10');
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 100,
clientY: 98 + top
});
Kinetic.DD._endDragAfter({dragEndNode:circle});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 100,
clientY: 98 + top
});
Kinetic.DD._endDragAfter({dragEndNode:circle});
assert(dragStart, 'dragstart event was not triggered 11');
assert(dragMove, 'dragmove event was not triggered 12');
assert(dragEnd, 'dragend event was not triggered 13');
assert(dragStart, 'dragstart event was not triggered 11');
assert(dragMove, 'dragmove event was not triggered 12');
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.isDragReady(), ' isDragReady()) should be false 16');
assert(!Kinetic.isDragging(), ' isDragging() should be false 15');
assert(!Kinetic.isDragReady(), ' isDragReady()) should be false 16');
//console.log(greenCircle.getPosition());
//console.log(circle.getPosition());
//console.log(greenCircle.getPosition());
//console.log(circle.getPosition());
assert.equal(greenCircle.getX(), 40, 'green circle x 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.getY(), 100, 'circle y should be 100');
assert.equal(greenCircle.getX(), 40, 'green circle x 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.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 layer = new Kinetic.Layer();
@ -194,31 +198,33 @@ suite('DragAndDropEvents', function() {
assert(!circle.isDragging(), 'circle should not be dragging');
stage._mousemove({
clientX: 100,
clientY: 98 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 98 + top
});
assert(circle.isDragging(), 'circle should be dragging');
assert(!dragEnd, 'dragEnd should not have fired yet');
assert(circle.isDragging(), 'circle should be dragging');
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
circle.destroy();
layer.draw();
assert(!circle.isDragging(), 'destroying circle should stop drag and drop');
assert(dragEnd, 'dragEnd should have fired');
// removing or destroying the circle should trigger dragend
circle.destroy();
layer.draw();
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 layer = new Kinetic.Layer();
@ -253,24 +259,28 @@ suite('DragAndDropEvents', function() {
clientY: 40 + top
});
stage._mousemove({
clientX: 100,
clientY: 100 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 100 + top
});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 100,
clientY: 100 + top
});
Kinetic.DD._endDragAfter({dragEndNode:circle});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 100,
clientY: 100 + top
});
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 layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -316,24 +326,27 @@ suite('DragAndDropEvents', function() {
clientY: 100 + top
});
stage._mousemove({
clientX: 100,
clientY: 100 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 100,
clientY: 100 + top
});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 100,
clientY: 100 + top
});
Kinetic.DD._endDragAfter({dragEndNode:circle});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 100,
clientY: 100 + top
});
Kinetic.DD._endDragAfter({dragEndNode:circle});
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().x, 380, 'circle x should be 380');
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 layer = new Kinetic.Layer({
drawFunc: function() {
@ -378,27 +391,31 @@ suite('DragAndDropEvents', function() {
clientY: 96 + top
});
stage._mousemove({
clientX: 210,
clientY: 109 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 210,
clientY: 109 + top
});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 210,
clientY: 109 + top
});
Kinetic.DD._endDragAfter({dragEndNode:circle2});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 210,
clientY: 109 + top
});
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.getY(), 13, 'layer y should be 13');
assert.equal(layer.getX(), -189, 'layer x should be -189');
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'),
stage = new Kinetic.Stage({
container: container,
@ -436,21 +453,24 @@ suite('DragAndDropEvents', function() {
clientY: 100 + top
});
stage._mousemove({
clientX: 300,
clientY: 110 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 300,
clientY: 110 + top
});
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 300,
clientY: 110 + top
});
Kinetic.DD._endDragAfter();
Kinetic.DD._endDragBefore();
stage._mouseup({
clientX: 300,
clientY: 110 + top
});
Kinetic.DD._endDragAfter();
assert.equal(stage.getX(), 300);
assert.equal(stage.getY(), 10);
assert.equal(stage.getX(), 300);
assert.equal(stage.getY(), 10);
done();
}, 20);
});
});

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

@ -1,7 +1,10 @@
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 layer = new Kinetic.Layer();
@ -112,26 +115,30 @@ suite('MouseEvents', function() {
assert.equal(stageContentMouseup, 3);
//assert.equal(stageContentDblClick, 1);
stage._mousemove({
clientX: 200,
clientY: 1 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 200,
clientY: 1 + top
});
assert.equal(stageContentMousemove, 1);
assert.equal(stageContentMousemove, 1);
stage._mouseout({
clientX: 0,
clientY: 0
});
stage._mouseout({
clientX: 0,
clientY: 0
});
assert.equal(stageContentMouseout, 1);
assert.equal(stageContentMouseout, 1);
stage._mouseover({
clientX: 0,
clientY: 0
});
stage._mouseover({
clientX: 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 layer = new Kinetic.Layer({
throttle: 999
@ -433,30 +440,32 @@ suite('MouseEvents', function() {
assert.equal(circle.getFill(), 'red', 'circle fill should be red');
assert.equal(circle.getStroke(), 'black', 'circle stroke should be black');
stage._mousemove({
clientX: 377,
clientY: 101 + top
});
setTimeout(function() {
stage._mousemove({
clientX: 377,
clientY: 101 + top
});
assert.equal(circle.getFill(), 'yellow', 'circle fill should be yellow');
assert.equal(circle.getStroke(), 'purple', 'circle stroke should be purple');
assert.equal(circle.getFill(), 'yellow', 'circle fill should be yellow');
assert.equal(circle.getStroke(), 'purple', 'circle stroke should be purple');
// move mouse back out of circle
stage._mousemove({
clientX: 157,
clientY: 138 + top
});
stage._mousemove({
clientX: 157,
clientY: 138 + top
});
setTimeout(function() {
// move mouse back out of circle
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 layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -518,107 +527,110 @@ suite('MouseEvents', function() {
var top = stage.content.getBoundingClientRect().top;
// move mouse to center of circle to trigger mouseover
stage._mousemove({
clientX: 290,
clientY: 100 + top
});
setTimeout(function() {
// move mouse to center of circle to trigger mouseover
stage._mousemove({
clientX: 290,
clientY: 100 + top
});
assert(mouseover, '1) mouseover should be true');
assert(!mousemove, '1) mousemove should be true');
assert(!mousedown, '1) mousedown should be false');
assert(!mouseup, '1) mouseup should be false');
assert(!click, '1) click should be false');
assert(!dblclick, '1) dblclick should be false');
assert(!mouseout, '1) mouseout should be false');
assert(mouseover, '1) mouseover should be true');
assert(!mousemove, '1) mousemove should be true');
assert(!mousedown, '1) mousedown should be false');
assert(!mouseup, '1) mouseup should be false');
assert(!click, '1) click should be false');
assert(!dblclick, '1) dblclick should be false');
assert(!mouseout, '1) mouseout should be false');
// move mouse again inside circle to trigger mousemove
stage._mousemove({
clientX: 290,
clientY: 100 + top
});
setTimeout(function() {
// move mouse again inside circle to trigger mousemove
stage._mousemove({
clientX: 290,
clientY: 100 + top
});
assert(mouseover, '2) mouseover should be true');
assert(mousemove, '2) mousemove should be true');
assert(!mousedown, '2) mousedown should be false');
assert(!mouseup, '2) mouseup should be false');
assert(!click, '2) click should be false');
assert(!dblclick, '2) dblclick should be false');
assert(!mouseout, '2) mouseout should be false');
assert(mouseover, '2) mouseover should be true');
assert(mousemove, '2) mousemove should be true');
assert(!mousedown, '2) mousedown should be false');
assert(!mouseup, '2) mouseup should be false');
assert(!click, '2) click should be false');
assert(!dblclick, '2) dblclick should be false');
assert(!mouseout, '2) mouseout should be false');
// mousedown inside circle
stage._mousedown({
clientX: 290,
clientY: 100 + top
});
// mousedown inside circle
stage._mousedown({
clientX: 290,
clientY: 100 + top
});
assert(mouseover, '3) mouseover should be true');
assert(mousemove, '3) mousemove should be true');
assert(mousedown, '3) mousedown should be true');
assert(!mouseup, '3) mouseup should be false');
assert(!click, '3) click should be false');
assert(!dblclick, '3) dblclick should be false');
assert(!mouseout, '3) mouseout should be false');
assert(mouseover, '3) mouseover should be true');
assert(mousemove, '3) mousemove should be true');
assert(mousedown, '3) mousedown should be true');
assert(!mouseup, '3) mouseup should be false');
assert(!click, '3) click should be false');
assert(!dblclick, '3) dblclick should be false');
assert(!mouseout, '3) mouseout should be false');
// mouseup inside circle
stage._mouseup({
clientX: 290,
clientY: 100 + top
});
// mouseup inside circle
stage._mouseup({
clientX: 290,
clientY: 100 + top
});
assert(mouseover, '4) mouseover should be true');
assert(mousemove, '4) mousemove should be true');
assert(mousedown, '4) mousedown should be true');
assert(mouseup, '4) mouseup should be true');
assert(click, '4) click should be true');
assert(!dblclick, '4) dblclick should be false');
assert(!mouseout, '4) mouseout should be false');
assert(mouseover, '4) mouseover should be true');
assert(mousemove, '4) mousemove should be true');
assert(mousedown, '4) mousedown should be true');
assert(mouseup, '4) mouseup should be true');
assert(click, '4) click should be true');
assert(!dblclick, '4) dblclick should be false');
assert(!mouseout, '4) mouseout should be false');
// mousedown inside circle
stage._mousedown({
clientX: 290,
clientY: 100 + top
});
// mousedown inside circle
stage._mousedown({
clientX: 290,
clientY: 100 + top
});
assert(mouseover, '5) mouseover should be true');
assert(mousemove, '5) mousemove should be true');
assert(mousedown, '5) mousedown should be true');
assert(mouseup, '5) mouseup should be true');
assert(click, '5) click should be true');
assert(!dblclick, '5) dblclick should be false');
assert(!mouseout, '5) mouseout should be false');
assert(mouseover, '5) mouseover should be true');
assert(mousemove, '5) mousemove should be true');
assert(mousedown, '5) mousedown should be true');
assert(mouseup, '5) mouseup should be true');
assert(click, '5) click should be true');
assert(!dblclick, '5) dblclick should be false');
assert(!mouseout, '5) mouseout should be false');
// mouseup inside circle to trigger double click
stage._mouseup({
clientX: 290,
clientY: 100 + top
});
// mouseup inside circle to trigger double click
stage._mouseup({
clientX: 290,
clientY: 100 + top
});
assert(mouseover, '6) mouseover should be true');
assert(mousemove, '6) mousemove should be true');
assert(mousedown, '6) mousedown should be true');
assert(mouseup, '6) mouseup should be true');
assert(click, '6) click should be true');
assert(dblclick, '6) dblclick should be true');
assert(!mouseout, '6) mouseout should be false');
assert(mouseover, '6) mouseover should be true');
assert(mousemove, '6) mousemove should be true');
assert(mousedown, '6) mousedown should be true');
assert(mouseup, '6) mouseup should be true');
assert(click, '6) click should be true');
assert(dblclick, '6) dblclick should be true');
assert(!mouseout, '6) mouseout should be false');
// move mouse outside of circle to trigger mouseout
stage._mousemove({
clientX: 0,
clientY: 100 + top
});
stage._mousemove({
clientX: 0,
clientY: 100 + top
});
setTimeout(function() {
// move mouse outside of circle to trigger mouseout
stage._mousemove({
clientX: 0,
clientY: 100 + top
});
assert(mouseover, '7) mouseover should be true');
assert(mousemove, '7) mousemove should be true');
assert(mousedown, '7) mousedown should be true');
assert(mouseup, '7) mouseup should be true');
assert(click, '7) click should be true');
assert(dblclick, '7) dblclick should be true');
assert(mouseout, '7) mouseout should be true');
assert(mouseover, '7) mouseover should be true');
assert(mousemove, '7) mousemove should be true');
assert(mousedown, '7) mousedown should be true');
assert(mouseup, '7) mouseup should be true');
assert(click, '7) click should be true');
assert(dblclick, '7) dblclick 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 layer = new Kinetic.Layer();
var group = new Kinetic.Group({
@ -772,84 +784,90 @@ suite('MouseEvents', function() {
var top = stage.content.getBoundingClientRect().top;
// move mouse outside of circles
stage._mousemove({
clientX: 177,
clientY: 146 + top
});
setTimeout(function() {
// move mouse outside of circles
stage._mousemove({
clientX: 177,
clientY: 146 + top
});
assert.equal(redMouseenters, 0, 'redMouseenters should be 0');
assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 0, 'groupMouseenters should be 0');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
assert.equal(redMouseenters, 0, 'redMouseenters should be 0');
assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 0, 'groupMouseenters should be 0');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse inside of red circle
stage._mousemove({
clientX: 236,
clientY: 145 + top
});
setTimeout(function() {
// move mouse inside of red circle
stage._mousemove({
clientX: 236,
clientY: 145 + top
});
//console.log('groupMouseenters=' + groupMouseenters);
//console.log('groupMouseenters=' + groupMouseenters);
assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse inside of green circle
stage._mousemove({
clientX: 284,
clientY: 118 + top
});
setTimeout(function() {
// move mouse inside of green circle
stage._mousemove({
clientX: 284,
clientY: 118 + top
});
assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
// move mouse back to red circle
setTimeout(function() {
// move mouse back to red circle
stage._mousemove({
clientX: 345,
clientY: 105 + top
});
stage._mousemove({
clientX: 345,
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
stage._mousemove({
clientX: 177,
clientY: 146 + top
});
stage._mousemove({
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');
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');
//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 layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -960,82 +978,102 @@ suite('MouseEvents', function() {
circle.on('mouseout', function() {
mouseouts++;
});
// move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
assert.equal(mouseovers, 0, '1) mouseovers should be 0');
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);
setTimeout(function() {
// set drawBufferFunc with setter
// move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
circle.hitFunc(function(context) {
var _context = context._context;
_context.beginPath();
_context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
_context.closePath();
context.fillStrokeShape(this);
setTimeout(function() {
assert.equal(mouseovers, 0, '1) mouseovers should be 0');
assert.equal(mouseouts, 0, '1) mouseouts should be 0');
});
stage._mousemove({
clientX: 286,
clientY: 118 + top
});
layer.getHitCanvas().getContext().clear();
layer.drawHit();
assert.equal(mouseovers, 1, '2) mouseovers should be 1');
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
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
// set drawBufferFunc with setter
assert.equal(mouseovers, 1, '4) mouseovers should be 1');
assert.equal(mouseouts, 1, '4) mouseouts should be 1');
circle.hitFunc(function(context) {
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');
assert.equal(mouseouts, 1, '5) mouseouts should be 1');
layer.getHitCanvas().getContext().clear();
layer.drawHit();
stage._mousemove({
clientX: 321,
clientY: 112 + top
});
setTimeout(function() {
assert.equal(mouseovers, 1, '6) mouseovers should be 1');
assert.equal(mouseouts, 1, '6) mouseouts should be 1');
// move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
// move to center of circle
stage._mousemove({
clientX: 375,
clientY: 112 + top
});
assert.equal(mouseovers, 1, '4) mouseovers should be 1');
assert.equal(mouseouts, 1, '4) mouseouts should be 1');
assert.equal(mouseovers, 2, '7) mouseovers should be 2');
assert.equal(mouseouts, 1, '7) mouseouts should be 1');
setTimeout(function() {
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 layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -215,20 +215,24 @@ suite('TouchEvents', function() {
assert(tap, '11) tap should be true');
assert(dbltap, '11) dbltap should be true');
// touchmove circle
stage._touchmove({
touches: [{
clientX: 290,
clientY: 100 + top,
}],
preventDefault: function() {
}
});
setTimeout(function() {
// touchmove circle
stage._touchmove({
touches: [{
clientX: 290,
clientY: 100 + top,
}],
preventDefault: function() {
}
});
assert(touchstart, '12) touchstart should be true');
assert(touchmove, '12) touchmove should be true');
assert(touchend, '12) touchend should be true');
assert(tap, '12) tap should be true');
assert(dbltap, '12) dbltap should be true');
assert(touchstart, '12) touchstart should be true');
assert(touchmove, '12) touchmove should be true');
assert(touchend, '12) touchend should be true');
assert(tap, '12) tap 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/TouchEvents-test.js"></script>
<script src="functional/KineticEvents-test.js"></script>
<script src="functional/DragAndDropEvents-test.js"></script>
<!--=============== manual tests ================-->

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

@ -1,38 +1,45 @@
suite('DragAndDrop', function() {
// ======================================================
test('test drag and drop properties and methods', function() {
var stage = addStage();
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle'
});
test('test drag and drop properties and methods', function(done) {
var stage = addStage();
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle'
});
stage.add(layer);
layer.add(circle);
layer.draw();
// test defaults
assert.equal(circle.draggable(), false);
setTimeout(function() {
//change properties
circle.setDraggable(true);
layer.draw();
// 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
assert.equal(circle.getDraggable(), true);
// test new properties
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,
229, 109, 60, 98,
287, 109, 41, 98
]
]
},
frameRate: 10,
draggable: true,
@ -72,7 +72,7 @@ suite('Sprite', function() {
};
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();
imageObj.onload = function() {
var stage = addStage();
@ -122,9 +122,6 @@ suite('Sprite', function() {
assert.equal(sprite.frameIndex() > 2, true);
done();
}, 68);
};
imageObj.src = 'assets/scorpion-sprite.png';
});

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

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