lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
Anton Lavrenov
2016-05-06 14:10:50 +07:00
parent 0f77dc4f8b
commit 9470bc5fe2
17 changed files with 30 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
test/unit/shapes/Arrow-test.js Normal file
View File

@@ -0,0 +1,38 @@
suite('Arrow', function() {
// ======================================================
test('add arrow', function() {
var stage = addStage();
var layer = new Konva.Layer();
var arrow = new Konva.Arrow({
points: [73,160, 340, 23],
stroke: 'blue',
fill : 'blue',
strokeWidth: 1,
draggable: true,
tension: 0
});
layer.add(arrow);
stage.add(layer);
arrow.setPoints([1, 2, 3, 4]);
assert.equal(arrow.points()[0], 1);
arrow.setPoints([5,6,7,8]);
assert.equal(arrow.getPoints()[0], 5);
arrow.setPoints([73, 160, 340, 23, 50,100, 80, 50]);
arrow.tension(0);
arrow.pointerLength(15);
assert.equal(arrow.pointerLength(), 15);
arrow.pointerWidth(15);
assert.equal(arrow.pointerWidth(), 15);
assert.equal(arrow.getClassName(), 'Arrow');
layer.draw();
showHit(layer);
});
});

220
test/unit/shapes/Label-test.js Normal file
View File

@@ -0,0 +1,220 @@
suite('Label', function() {
// ======================================================
test('add label', function() {
var stage = addStage();
var layer = new Konva.Layer();
var label = new Konva.Label({
x: 100,
y: 100,
draggable: true
});
// add a tag to the label
label.add(new Konva.Tag({
fill: '#bbb',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
lineJoin: 'round',
pointerDirection: 'up',
pointerWidth: 20,
pointerHeight: 20,
cornerRadius: 5
}));
// add text to the label
label.add(new Konva.Text({
text: '',
fontSize: 50,
//fontFamily: 'Calibri',
//fontStyle: 'normal',
lineHeight: 1.2,
//padding: 10,
fill: 'green'
}));
layer.add(label);
stage.add(layer);
label.getText().setFontSize(100);
label.getText().setFontSize(50);
label.getText().setText('Hello big world');
layer.draw();
assert.equal(label.getType(), 'Group');
assert.equal(label.getClassName(), 'Label');
// use relaxed trace because text can be a slightly different size in different browsers,
// resulting in slightly different tag dimensions
var relaxedTrace = layer.getContext().getTrace(true);
// console.log(relaxedTrace);
// assert.equal(relaxedTrace, 'clearRect();save();save();globalAlpha;shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;drawImage();restore();drawImage();restore();save();transform();font;textBaseline;textAlign;save();translate();save();fillStyle;fillText();restore();translate();restore();restore();clearRect();save();save();globalAlpha;shadowColor;shadowBlur;shadowOffsetX;shadowOffsetY;drawImage();restore();drawImage();restore();save();transform();font;textBaseline;textAlign;save();translate();save();fillStyle;fillText();restore();translate();restore();restore();');
});
// ======================================================
test('create label from json', function() {
var stage = addStage();
var json = '{"attrs":{"x":100,"y":100,"draggable":true},"className":"Label","children":[{"attrs":{"fill":"#bbb","stroke":"#333","shadowColor":"black","shadowBlur":10,"shadowOffsetX":10,"shadowOffsetY":10,"shadowOpacity":0.2,"lineJoin":"round","pointerDirection":"up","pointerWidth":20,"pointerHeight":20,"cornerRadius":5,"x":-151.5,"y":20,"width":303,"height":60},"className":"Tag"},{"attrs":{"text":"Hello big world","fontSize":50,"lineHeight":1.2,"fill":"green","width":"auto","height":"auto","x":-151.5,"y":20},"className":"Text"}]}';
var layer = new Konva.Layer();
var label = Konva.Node.create(json);
layer.add(label);
stage.add(layer);
});
test('find label class', function() {
var stage = addStage();
var layer = new Konva.Layer();
var label = new Konva.Label({
x: 100,
y: 100
});
// add a tag to the label
label.add(new Konva.Tag({
fill: '#bbb'
}));
// add text to the label
label.add(new Konva.Text({
text: 'Test Label',
fill: 'green'
}));
layer.add(label);
stage.add(layer);
assert.equal(stage.find('Label')[0], label);
});
test.skip('cache label', function() {
var stage = addStage();
var layer = new Konva.Layer();
// tooltip
var tooltip = new Konva.Label({
x: 170,
y: 75,
opacity: 0.75
});
tooltip.add(new Konva.Tag({
fill: 'black',
pointerDirection: 'down',
pointerWidth: 10,
pointerHeight: 10,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOpacity: 0.5
}));
tooltip.add(new Konva.Text({
text: 'Tooltip pointing down',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
}));
var tooltipUp = new Konva.Label({
x: 170,
y: 75,
opacity: 0.75
});
tooltipUp.add(new Konva.Tag({
fill: 'black',
pointerDirection: 'up',
pointerWidth: 10,
pointerHeight: 10,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOpacity: 0.5
}));
tooltipUp.add(new Konva.Text({
text: 'Tooltip pointing up',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
}));
// label with left pointer
var labelLeft = new Konva.Label({
x: 20,
y: 130,
opacity: 0.75
});
labelLeft.add(new Konva.Tag({
fill: 'green',
pointerDirection: 'left',
pointerWidth: 30,
pointerHeight: 28,
lineJoin: 'round'
}));
labelLeft.add(new Konva.Text({
text: 'Label pointing left',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
}));
// label with left pointer
var labelRight = new Konva.Label({
x: 160,
y: 170,
offsetX : 20,
opacity: 0.75
});
labelRight.add(new Konva.Tag({
fill: 'green',
pointerDirection: 'right',
pointerWidth: 20,
pointerHeight: 28,
lineJoin: 'round'
}));
labelRight.add(new Konva.Text({
text: 'Label right',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
}));
// simple label
var simpleLabel = new Konva.Label({
x: 180,
y: 150,
opacity: 0.75
});
simpleLabel.add(new Konva.Tag({
fill: 'yellow'
}));
simpleLabel.add(new Konva.Text({
text: 'Simple label',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'black'
}));
// add the labels to layer
layer.add(tooltip, tooltipUp, labelLeft, labelRight, simpleLabel);
layer.children.cache();
stage.add(layer);
cloneAndCompareLayer(layer, 254);
});
});

888
test/unit/shapes/Path-test.js Normal file
View File

File diff suppressed because one or more lines are too long

153
test/unit/shapes/RegularPolygon-test.js Normal file
View File

@@ -0,0 +1,153 @@
suite('RegularPolygon', function() {
// ======================================================
test('add regular polygon triangle', function() {
var stage = addStage();
var layer = new Konva.Layer();
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 3,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar',
center: {
x: 0,
y: -50
}
});
layer.add(poly);
stage.add(layer);
assert.equal(poly.getClassName(), 'RegularPolygon');
});
// ======================================================
test('add regular polygon square', function() {
var stage = addStage();
var layer = new Konva.Layer();
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 4,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
layer.add(poly);
stage.add(layer);
});
// ======================================================
test('add regular polygon pentagon', function() {
var stage = addStage();
var layer = new Konva.Layer();
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 5,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
layer.add(poly);
stage.add(layer);
});
// ======================================================
test('add regular polygon octogon', function() {
var stage = addStage();
var layer = new Konva.Layer();
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 8,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
layer.add(poly);
stage.add(layer);
});
// ======================================================
test('attr sync', function() {
var stage = addStage();
var layer = new Konva.Layer();
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 5,
radius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar'
});
layer.add(poly);
stage.add(layer);
assert.equal(poly.getWidth(), 100);
assert.equal(poly.getHeight(), 100);
poly.setWidth(120);
assert.equal(poly.radius(), 60);
assert.equal(poly.getHeight(), 120);
poly.setHeight(140);
assert.equal(poly.radius(), 70);
assert.equal(poly.getHeight(), 140);
});
test('polygon cache', function() {
Konva.pixelRatio = 1;
var stage = addStage();
var layer = new Konva.Layer();
var poly = new Konva.RegularPolygon({
x: 200,
y: 100,
sides: 5,
radius: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 5,
name: 'foobar'
});
poly.cache();
layer.add(poly);
stage.add(layer);
assert.deepEqual(poly.getSelfRect(), {
x : -50,
y : -50,
height : 100,
width : 100
});
if (!window.isPhantomJS) {
cloneAndCompareLayer(layer, 254);
}
Konva.pixelRatio = undefined;
});
});

148
test/unit/shapes/Star-test.js Normal file
View File

@@ -0,0 +1,148 @@
suite('Star', function() {
// ======================================================
test('add five point star', function() {
var stage = addStage();
var layer = new Konva.Layer();
var star = new Konva.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 40,
outerRadius: 70,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
name: 'foobar',
center: {
x: 0,
y: -70
},
scale: {
x: 0.5,
y: 0.5
}
});
layer.add(star);
stage.add(layer);
assert.equal(star.getClassName(), 'Star');
});
// ======================================================
test('add star with line join and shadow', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 250,
y: 75,
width: 100,
height: 100,
fill: 'red'
});
var star = new Konva.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 40,
outerRadius: 70,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.5,
draggable: true
});
layer.add(rect);
layer.add(star);
stage.add(layer);
assert.equal(star.getLineJoin(), 'round');
star.setLineJoin('bevel');
assert.equal(star.getLineJoin(), 'bevel');
star.setLineJoin('round');
});
// ======================================================
test('attr sync', function() {
var stage = addStage();
var layer = new Konva.Layer();
var star = new Konva.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 30,
outerRadius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.5,
draggable: true
});
layer.add(star);
stage.add(layer);
assert.equal(star.getWidth(), 100);
assert.equal(star.getHeight(), 100);
star.setWidth(120);
assert.equal(star.outerRadius(), 60);
assert.equal(star.getHeight(), 120);
star.setHeight(140);
assert.equal(star.outerRadius(), 70);
assert.equal(star.getHeight(), 140);
});
// ======================================================
test('star cache', function() {
var stage = addStage();
var layer = new Konva.Layer();
var star = new Konva.Star({
x: 200,
y: 100,
numPoints: 5,
innerRadius: 30,
outerRadius: 50,
fill: 'green',
stroke: 'blue',
strokeWidth: 5,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [20, 20],
shadowOpacity: 0.5,
draggable: true
});
layer.add(star);
star.cache();
stage.add(layer);
assert.deepEqual(star.getSelfRect(), {
x : -50,
y : -50,
height : 100,
width : 100
});
cloneAndCompareLayer(layer, 50);
});
});

218
test/unit/shapes/TextPath-test.js Normal file
View File

File diff suppressed because one or more lines are too long