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

fix resizer bugs, fix lint errors

Browse Source
This commit is contained in:
Anton Lavrenov 2017-12-21 09:57:16 +07:00
parent 54d8a1c379
commit 551a013a79
5 changed files with 92 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintrc
View File

@ -124,7 +124,7 @@
"camelcase": 0, "camelcase": 0,
"comma-spacing": 2, "comma-spacing": 2,
"comma-style": 0, "comma-style": 0,
"complexity": [1, 11], "complexity": [1, 15],
"computed-property-spacing": [0, "never"], "computed-property-spacing": [0, "never"],
"consistent-return": 1, "consistent-return": 1,
"consistent-this": [0, "that"], "consistent-this": [0, "that"],
@ -158,7 +158,7 @@
"max-len": [2, 320, 4], "max-len": [2, 320, 4],
"max-nested-callbacks": [2, 2], "max-nested-callbacks": [2, 2],
"max-params": [1, 8], "max-params": [1, 8],
"max-statements": [1, 20], "max-statements": [1, 60],
"new-cap": 0, "new-cap": 0,
"new-parens": 2, "new-parens": 2,
"newline-after-var": 0, "newline-after-var": 0,

96
konva.js
View File

@ -2,7 +2,7 @@
* Konva JavaScript Framework v1.7.6 * Konva JavaScript Framework v1.7.6
* http://konvajs.github.io/ * http://konvajs.github.io/
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Tue Dec 19 2017 * Date: Thu Dec 21 2017
* *
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva) * Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva)
@ -18285,7 +18285,7 @@
anchor.on('mouseout', function() { anchor.on('mouseout', function() {
var layer = this.getLayer(); var layer = this.getLayer();
document.body.style.cursor = 'default'; document.body.style.cursor = 'default';
this.setStrokeWidth(2); this.setStrokeWidth(1);
layer.draw(); layer.draw();
}); });
this.add(anchor); this.add(anchor);
@ -18300,7 +18300,6 @@
this.sin = height / hypotenuse; this.sin = height / hypotenuse;
this.cos = width / hypotenuse; this.cos = width / hypotenuse;
// console.log(1, hypotenuse);
window.addEventListener('mousemove', this.handleMouseMove); window.addEventListener('mousemove', this.handleMouseMove);
window.addEventListener('touchmove', this.handleMouseMove); window.addEventListener('touchmove', this.handleMouseMove);
window.addEventListener('mouseup', this.handleMouseUp); window.addEventListener('mouseup', this.handleMouseUp);
@ -18308,6 +18307,7 @@
}, },
handleMouseMove: function(e) { handleMouseMove: function(e) {
var x, y, newHypotenuse;
var resizerNode = this.findOne('.' + this.movingResizer); var resizerNode = this.findOne('.' + this.movingResizer);
var stage = resizerNode.getStage(); var stage = resizerNode.getStage();
@ -18328,29 +18328,26 @@
resizerNode.setAbsolutePosition(newAbsPos); resizerNode.setAbsolutePosition(newAbsPos);
if (this.movingResizer === 'top-left') { if (this.movingResizer === 'top-left') {
var newHypotenuse = Math.sqrt( newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-right').x() - resizerNode.x(), 2) + Math.pow(this.findOne('.bottom-right').x() - resizerNode.x(), 2) +
Math.pow(this.findOne('.bottom-right').y() - resizerNode.y(), 2) Math.pow(this.findOne('.bottom-right').y() - resizerNode.y(), 2)
); );
// console.log(2, newHypotenuse); x = newHypotenuse * this.cos;
var x = newHypotenuse * this.cos; y = newHypotenuse * this.sin;
var y = newHypotenuse * this.sin;
// console.log(this.findOne('.bottom-right').x() - x);
this.findOne('.top-left').x(this.findOne('.bottom-right').x() - x); this.findOne('.top-left').x(this.findOne('.bottom-right').x() - x);
this.findOne('.top-left').y(this.findOne('.bottom-right').y() - y); this.findOne('.top-left').y(this.findOne('.bottom-right').y() - y);
} else if (this.movingResizer === 'top-center') { } else if (this.movingResizer === 'top-center') {
this.findOne('.top-left').y(resizerNode.y()); this.findOne('.top-left').y(resizerNode.y());
} else if (this.movingResizer === 'top-right') { } else if (this.movingResizer === 'top-right') {
var newHypotenuse = Math.sqrt( newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-left').x() - resizerNode.x(), 2) + Math.pow(this.findOne('.bottom-left').x() - resizerNode.x(), 2) +
Math.pow(this.findOne('.bottom-left').y() - resizerNode.y(), 2) Math.pow(this.findOne('.bottom-left').y() - resizerNode.y(), 2)
); );
var x = newHypotenuse * this.cos; x = newHypotenuse * this.cos;
var y = newHypotenuse * this.sin; y = newHypotenuse * this.sin;
this.findOne('.top-right').x(x); this.findOne('.top-right').x(x);
this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y); this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y);
@ -18363,49 +18360,43 @@
} else if (this.movingResizer === 'middle-right') { } else if (this.movingResizer === 'middle-right') {
this.findOne('.bottom-right').x(resizerNode.x()); this.findOne('.bottom-right').x(resizerNode.x());
} else if (this.movingResizer === 'bottom-left') { } else if (this.movingResizer === 'bottom-left') {
var newHypotenuse = Math.sqrt( newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.top-right').x() - resizerNode.x(), 2) + Math.pow(this.findOne('.top-right').x() - resizerNode.x(), 2) +
Math.pow(this.findOne('.top-right').y() - resizerNode.y(), 2) Math.pow(this.findOne('.top-right').y() - resizerNode.y(), 2)
); );
var x = newHypotenuse * this.cos; x = newHypotenuse * this.cos;
var y = newHypotenuse * this.sin; y = newHypotenuse * this.sin;
this.findOne('.bottom-left').x(this.findOne('.top-right').x() - x); this.findOne('.bottom-left').x(this.findOne('.top-right').x() - x);
this.findOne('.bottom-left').y(y); this.findOne('.bottom-left').y(y);
var pos = resizerNode.position(); pos = resizerNode.position();
this.findOne('.top-left').x(pos.x); this.findOne('.top-left').x(pos.x);
this.findOne('.bottom-right').y(pos.y); this.findOne('.bottom-right').y(pos.y);
} else if (this.movingResizer === 'bottom-center') { } else if (this.movingResizer === 'bottom-center') {
this.findOne('.bottom-right').y(resizerNode.y()); this.findOne('.bottom-right').y(resizerNode.y());
} else if (this.movingResizer === 'bottom-right') { } else if (this.movingResizer === 'bottom-right') {
var newHypotenuse = Math.sqrt( newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-right').x(), 2) + Math.pow(this.findOne('.bottom-right').x(), 2) +
Math.pow(this.findOne('.bottom-right').y(), 2) Math.pow(this.findOne('.bottom-right').y(), 2)
); );
var x = newHypotenuse * this.cos; x = newHypotenuse * this.cos;
var y = newHypotenuse * this.sin; y = newHypotenuse * this.sin;
this.findOne('.bottom-right').x(x); this.findOne('.bottom-right').x(x);
this.findOne('.bottom-right').y(y); this.findOne('.bottom-right').y(y);
} else if (this.movingResizer === 'rotater') { } else if (this.movingResizer === 'rotater') {
var x = resizerNode.x() - this._el.width() * this._el.scaleX() / 2; x = resizerNode.x() - this._el.width() * this._el.scaleX() / 2;
var y = -resizerNode.y() + this._el.height() * this._el.scaleY() / 2; y = -resizerNode.y() + this._el.height() * this._el.scaleY() / 2;
var dAlpha = Math.atan2(-y, x) + Math.PI / 2; var dAlpha = Math.atan2(-y, x) + Math.PI / 2;
var attrs = this._getAttrs(); var attrs = this._getAttrs();
var newRotation = this.rotation() + dAlpha / Math.PI * 180; var newRotation = this.rotation() + dAlpha / Math.PI * 180;
// console.log(newRotation);
// if (this._el._centroid) {
// this._setElementAttrs({
// rotation: newRotation
// });
// }
var alpha = Konva.Util._degToRad(this._el.rotation()); var alpha = Konva.Util._degToRad(this._el.rotation());
var newAlpha = Konva.Util._degToRad(newRotation); var newAlpha = Konva.Util._degToRad(newRotation);
@ -18435,27 +18426,22 @@
return; return;
} }
var layer = resizerNode.getLayer();
var absPos = this.findOne('.top-left').getAbsolutePosition(); var absPos = this.findOne('.top-left').getAbsolutePosition();
var x = Math.round(absPos.x); x = absPos.x;
var y = Math.round(absPos.y); y = absPos.y;
var width = Math.round( var width =
this.findOne('.bottom-right').x() - this.findOne('.top-left').x() this.findOne('.bottom-right').x() - this.findOne('.top-left').x();
);
var height = Math.round( var height =
this.findOne('.bottom-right').y() - this.findOne('.top-left').y() this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
);
var pos = { this._setElementAttrs({
x: this._el._centroid ? x + width / 2 : x, absX: this._el._centroid ? x + width / 2 : x,
y: this._el._centroid ? y + height / 2 : y, absY: this._el._centroid ? y + height / 2 : y,
width: width, width: width,
height: height height: height
}; });
this._setElementAttrs(pos);
}, },
handleMouseUp: function() { handleMouseUp: function() {
@ -18469,7 +18455,6 @@
if (this._el._centroid) { if (this._el._centroid) {
var topLeftResizer = this.findOne('.top-left'); var topLeftResizer = this.findOne('.top-left');
var absPos = topLeftResizer.getAbsolutePosition(); var absPos = topLeftResizer.getAbsolutePosition();
console.log(absPos);
return { return {
x: absPos.x, x: absPos.x,
@ -18498,11 +18483,14 @@
var scaleY = attrs.height / this._el.height(); var scaleY = attrs.height / this._el.height();
this._el.setAttrs({ this._el.setAttrs({
x: attrs.x,
y: attrs.y,
scaleX: scaleX, scaleX: scaleX,
scaleY: scaleY scaleY: scaleY
}); });
this._el.setAbsolutePosition({
x: attrs.absX,
y: attrs.absY
});
} }
this._update(); this._update();
this.getLayer().batchDraw(); this.getLayer().batchDraw();
@ -18523,40 +18511,40 @@
}); });
} }
this.get('.top-left')[0].position({ this.findOne('.top-left').position({
x: 0, x: 0,
y: 0 y: 0
}); });
this.get('.top-center')[0].position({ this.findOne('.top-center').position({
x: width / 2, x: width / 2,
y: 0 y: 0
}); });
this.get('.top-right')[0].position({ this.findOne('.top-right').position({
x: width, x: width,
y: 0 y: 0
}); });
this.get('.middle-left')[0].position({ this.findOne('.middle-left').position({
x: 0, x: 0,
y: height / 2 y: height / 2
}); });
this.get('.middle-right')[0].position({ this.findOne('.middle-right').position({
x: width, x: width,
y: height / 2 y: height / 2
}); });
this.get('.bottom-left')[0].position({ this.findOne('.bottom-left').position({
x: 0, x: 0,
y: height y: height
}); });
this.get('.bottom-center')[0].position({ this.findOne('.bottom-center').position({
x: width / 2, x: width / 2,
y: height y: height
}); });
this.get('.bottom-right')[0].position({ this.findOne('.bottom-right').position({
x: width, x: width,
y: height y: height
}); });
this.get('.rotater')[0].position({ this.findOne('.rotater').position({
x: width / 2, x: width / 2,
y: -50 y: -50
}); });

6
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
package.json
View File

@ -20,20 +20,20 @@
"prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote" "prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote"
}, },
"devDependencies": { "devDependencies": {
"chai": "4.1.1", "chai": "4.1.2",
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"gulp-connect": "^5.0.0", "gulp-connect": "^5.0.0",
"gulp-eslint": "^4.0.0", "gulp-eslint": "^4.0.0",
"gulp-jscpd": "0.0.8", "gulp-jscpd": "0.0.8",
"gulp-jsdoc3": "^1.0.1", "gulp-jsdoc3": "^1.0.1",
"gulp-mocha-phantomjs": "^0.12.1", "gulp-mocha-phantomjs": "^0.12.2",
"gulp-rename": "^1.2.2", "gulp-rename": "^1.2.2",
"gulp-replace": "^0.6.1", "gulp-replace": "^0.6.1",
"gulp-uglify": "^3.0.0", "gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8", "gulp-util": "^3.0.8",
"mocha": "3.5.0", "mocha": "4.0.1",
"prettier": "^1.5.3" "prettier": "^1.9.2"
}, },
"keywords": [ "keywords": [
"canvas", "canvas",

94
src/shapes/Resizer.js
View File

@ -64,7 +64,7 @@
anchor.on('mouseout', function() { anchor.on('mouseout', function() {
var layer = this.getLayer(); var layer = this.getLayer();
document.body.style.cursor = 'default'; document.body.style.cursor = 'default';
this.setStrokeWidth(2); this.setStrokeWidth(1);
layer.draw(); layer.draw();
}); });
this.add(anchor); this.add(anchor);
@ -79,7 +79,6 @@
this.sin = height / hypotenuse; this.sin = height / hypotenuse;
this.cos = width / hypotenuse; this.cos = width / hypotenuse;
// console.log(1, hypotenuse);
window.addEventListener('mousemove', this.handleMouseMove); window.addEventListener('mousemove', this.handleMouseMove);
window.addEventListener('touchmove', this.handleMouseMove); window.addEventListener('touchmove', this.handleMouseMove);
window.addEventListener('mouseup', this.handleMouseUp); window.addEventListener('mouseup', this.handleMouseUp);
@ -87,6 +86,7 @@
}, },
handleMouseMove: function(e) { handleMouseMove: function(e) {
var x, y, newHypotenuse;
var resizerNode = this.findOne('.' + this.movingResizer); var resizerNode = this.findOne('.' + this.movingResizer);
var stage = resizerNode.getStage(); var stage = resizerNode.getStage();
@ -107,29 +107,26 @@
resizerNode.setAbsolutePosition(newAbsPos); resizerNode.setAbsolutePosition(newAbsPos);
if (this.movingResizer === 'top-left') { if (this.movingResizer === 'top-left') {
var newHypotenuse = Math.sqrt( newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-right').x() - resizerNode.x(), 2) + Math.pow(this.findOne('.bottom-right').x() - resizerNode.x(), 2) +
Math.pow(this.findOne('.bottom-right').y() - resizerNode.y(), 2) Math.pow(this.findOne('.bottom-right').y() - resizerNode.y(), 2)
); );
// console.log(2, newHypotenuse); x = newHypotenuse * this.cos;
var x = newHypotenuse * this.cos; y = newHypotenuse * this.sin;
var y = newHypotenuse * this.sin;
// console.log(this.findOne('.bottom-right').x() - x);
this.findOne('.top-left').x(this.findOne('.bottom-right').x() - x); this.findOne('.top-left').x(this.findOne('.bottom-right').x() - x);
this.findOne('.top-left').y(this.findOne('.bottom-right').y() - y); this.findOne('.top-left').y(this.findOne('.bottom-right').y() - y);
} else if (this.movingResizer === 'top-center') { } else if (this.movingResizer === 'top-center') {
this.findOne('.top-left').y(resizerNode.y()); this.findOne('.top-left').y(resizerNode.y());
} else if (this.movingResizer === 'top-right') { } else if (this.movingResizer === 'top-right') {
var newHypotenuse = Math.sqrt( newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-left').x() - resizerNode.x(), 2) + Math.pow(this.findOne('.bottom-left').x() - resizerNode.x(), 2) +
Math.pow(this.findOne('.bottom-left').y() - resizerNode.y(), 2) Math.pow(this.findOne('.bottom-left').y() - resizerNode.y(), 2)
); );
var x = newHypotenuse * this.cos; x = newHypotenuse * this.cos;
var y = newHypotenuse * this.sin; y = newHypotenuse * this.sin;
this.findOne('.top-right').x(x); this.findOne('.top-right').x(x);
this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y); this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y);
@ -142,49 +139,43 @@
} else if (this.movingResizer === 'middle-right') { } else if (this.movingResizer === 'middle-right') {
this.findOne('.bottom-right').x(resizerNode.x()); this.findOne('.bottom-right').x(resizerNode.x());
} else if (this.movingResizer === 'bottom-left') { } else if (this.movingResizer === 'bottom-left') {
var newHypotenuse = Math.sqrt( newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.top-right').x() - resizerNode.x(), 2) + Math.pow(this.findOne('.top-right').x() - resizerNode.x(), 2) +
Math.pow(this.findOne('.top-right').y() - resizerNode.y(), 2) Math.pow(this.findOne('.top-right').y() - resizerNode.y(), 2)
); );
var x = newHypotenuse * this.cos; x = newHypotenuse * this.cos;
var y = newHypotenuse * this.sin; y = newHypotenuse * this.sin;
this.findOne('.bottom-left').x(this.findOne('.top-right').x() - x); this.findOne('.bottom-left').x(this.findOne('.top-right').x() - x);
this.findOne('.bottom-left').y(y); this.findOne('.bottom-left').y(y);
var pos = resizerNode.position(); pos = resizerNode.position();
this.findOne('.top-left').x(pos.x); this.findOne('.top-left').x(pos.x);
this.findOne('.bottom-right').y(pos.y); this.findOne('.bottom-right').y(pos.y);
} else if (this.movingResizer === 'bottom-center') { } else if (this.movingResizer === 'bottom-center') {
this.findOne('.bottom-right').y(resizerNode.y()); this.findOne('.bottom-right').y(resizerNode.y());
} else if (this.movingResizer === 'bottom-right') { } else if (this.movingResizer === 'bottom-right') {
var newHypotenuse = Math.sqrt( newHypotenuse = Math.sqrt(
Math.pow(this.findOne('.bottom-right').x(), 2) + Math.pow(this.findOne('.bottom-right').x(), 2) +
Math.pow(this.findOne('.bottom-right').y(), 2) Math.pow(this.findOne('.bottom-right').y(), 2)
); );
var x = newHypotenuse * this.cos; x = newHypotenuse * this.cos;
var y = newHypotenuse * this.sin; y = newHypotenuse * this.sin;
this.findOne('.bottom-right').x(x); this.findOne('.bottom-right').x(x);
this.findOne('.bottom-right').y(y); this.findOne('.bottom-right').y(y);
} else if (this.movingResizer === 'rotater') { } else if (this.movingResizer === 'rotater') {
var x = resizerNode.x() - this._el.width() * this._el.scaleX() / 2; x = resizerNode.x() - this._el.width() * this._el.scaleX() / 2;
var y = -resizerNode.y() + this._el.height() * this._el.scaleY() / 2; y = -resizerNode.y() + this._el.height() * this._el.scaleY() / 2;
var dAlpha = Math.atan2(-y, x) + Math.PI / 2; var dAlpha = Math.atan2(-y, x) + Math.PI / 2;
var attrs = this._getAttrs(); var attrs = this._getAttrs();
var newRotation = this.rotation() + dAlpha / Math.PI * 180; var newRotation = this.rotation() + dAlpha / Math.PI * 180;
// console.log(newRotation);
// if (this._el._centroid) {
// this._setElementAttrs({
// rotation: newRotation
// });
// }
var alpha = Konva.Util._degToRad(this._el.rotation()); var alpha = Konva.Util._degToRad(this._el.rotation());
var newAlpha = Konva.Util._degToRad(newRotation); var newAlpha = Konva.Util._degToRad(newRotation);
@ -214,27 +205,22 @@
return; return;
} }
var layer = resizerNode.getLayer();
var absPos = this.findOne('.top-left').getAbsolutePosition(); var absPos = this.findOne('.top-left').getAbsolutePosition();
var x = Math.round(absPos.x); x = absPos.x;
var y = Math.round(absPos.y); y = absPos.y;
var width = Math.round( var width =
this.findOne('.bottom-right').x() - this.findOne('.top-left').x() this.findOne('.bottom-right').x() - this.findOne('.top-left').x();
);
var height = Math.round( var height =
this.findOne('.bottom-right').y() - this.findOne('.top-left').y() this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
);
var pos = { this._setElementAttrs({
x: this._el._centroid ? x + width / 2 : x, absX: this._el._centroid ? x + width / 2 : x,
y: this._el._centroid ? y + height / 2 : y, absY: this._el._centroid ? y + height / 2 : y,
width: width, width: width,
height: height height: height
}; });
this._setElementAttrs(pos);
}, },
handleMouseUp: function() { handleMouseUp: function() {
@ -248,7 +234,6 @@
if (this._el._centroid) { if (this._el._centroid) {
var topLeftResizer = this.findOne('.top-left'); var topLeftResizer = this.findOne('.top-left');
var absPos = topLeftResizer.getAbsolutePosition(); var absPos = topLeftResizer.getAbsolutePosition();
console.log(absPos);
return { return {
x: absPos.x, x: absPos.x,
@ -277,11 +262,14 @@
var scaleY = attrs.height / this._el.height(); var scaleY = attrs.height / this._el.height();
this._el.setAttrs({ this._el.setAttrs({
x: attrs.x,
y: attrs.y,
scaleX: scaleX, scaleX: scaleX,
scaleY: scaleY scaleY: scaleY
}); });
this._el.setAbsolutePosition({
x: attrs.absX,
y: attrs.absY
});
} }
this._update(); this._update();
this.getLayer().batchDraw(); this.getLayer().batchDraw();
@ -302,40 +290,40 @@
}); });
} }
this.get('.top-left')[0].position({ this.findOne('.top-left').position({
x: 0, x: 0,
y: 0 y: 0
}); });
this.get('.top-center')[0].position({ this.findOne('.top-center').position({
x: width / 2, x: width / 2,
y: 0 y: 0
}); });
this.get('.top-right')[0].position({ this.findOne('.top-right').position({
x: width, x: width,
y: 0 y: 0
}); });
this.get('.middle-left')[0].position({ this.findOne('.middle-left').position({
x: 0, x: 0,
y: height / 2 y: height / 2
}); });
this.get('.middle-right')[0].position({ this.findOne('.middle-right').position({
x: width, x: width,
y: height / 2 y: height / 2
}); });
this.get('.bottom-left')[0].position({ this.findOne('.bottom-left').position({
x: 0, x: 0,
y: height y: height
}); });
this.get('.bottom-center')[0].position({ this.findOne('.bottom-center').position({
x: width / 2, x: width / 2,
y: height y: height
}); });
this.get('.bottom-right')[0].position({ this.findOne('.bottom-right').position({
x: width, x: width,
y: height y: height
}); });
this.get('.rotater')[0].position({ this.findOne('.rotater').position({
x: width / 2, x: width / 2,
y: -50 y: -50
}); });