mirror of
https://github.com/konvajs/konva.git
synced 2025-06-28 02:21:20 +08:00
fix resizer bugs, fix lint errors
This commit is contained in:
Anton Lavrenov
parent
54d8a1c379
commit
551a013a79
@ -124,7 +124,7 @@
|
||||
"camelcase": 0,
|
||||
"comma-spacing": 2,
|
||||
"comma-style": 0,
|
||||
"complexity": [1, 11],
|
||||
"complexity": [1, 15],
|
||||
"computed-property-spacing": [0, "never"],
|
||||
"consistent-return": 1,
|
||||
"consistent-this": [0, "that"],
|
||||
@ -158,7 +158,7 @@
|
||||
"max-len": [2, 320, 4],
|
||||
"max-nested-callbacks": [2, 2],
|
||||
"max-params": [1, 8],
|
||||
"max-statements": [1, 20],
|
||||
"max-statements": [1, 60],
|
||||
"new-cap": 0,
|
||||
"new-parens": 2,
|
||||
"newline-after-var": 0,
|
||||
|
||||
96
konva.js
96
konva.js
@ -2,7 +2,7 @@
|
||||
* Konva JavaScript Framework v1.7.6
|
||||
* http://konvajs.github.io/
|
||||
* 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)
|
||||
* Modified work Copyright (C) 2014 - 2017 by Anton Lavrenov (Konva)
|
||||
@ -18285,7 +18285,7 @@
|
||||
anchor.on('mouseout', function() {
|
||||
var layer = this.getLayer();
|
||||
document.body.style.cursor = 'default';
|
||||
this.setStrokeWidth(2);
|
||||
this.setStrokeWidth(1);
|
||||
layer.draw();
|
||||
});
|
||||
this.add(anchor);
|
||||
@ -18300,7 +18300,6 @@
|
||||
this.sin = height / hypotenuse;
|
||||
this.cos = width / hypotenuse;
|
||||
|
||||
// console.log(1, hypotenuse);
|
||||
window.addEventListener('mousemove', this.handleMouseMove);
|
||||
window.addEventListener('touchmove', this.handleMouseMove);
|
||||
window.addEventListener('mouseup', this.handleMouseUp);
|
||||
@ -18308,6 +18307,7 @@
|
||||
},
|
||||
|
||||
handleMouseMove: function(e) {
|
||||
var x, y, newHypotenuse;
|
||||
var resizerNode = this.findOne('.' + this.movingResizer);
|
||||
var stage = resizerNode.getStage();
|
||||
|
||||
@ -18328,29 +18328,26 @@
|
||||
resizerNode.setAbsolutePosition(newAbsPos);
|
||||
|
||||
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').y() - resizerNode.y(), 2)
|
||||
);
|
||||
|
||||
// console.log(2, newHypotenuse);
|
||||
var x = newHypotenuse * this.cos;
|
||||
var y = newHypotenuse * this.sin;
|
||||
|
||||
// console.log(this.findOne('.bottom-right').x() - x);
|
||||
x = newHypotenuse * this.cos;
|
||||
y = newHypotenuse * this.sin;
|
||||
|
||||
this.findOne('.top-left').x(this.findOne('.bottom-right').x() - x);
|
||||
this.findOne('.top-left').y(this.findOne('.bottom-right').y() - y);
|
||||
} else if (this.movingResizer === 'top-center') {
|
||||
this.findOne('.top-left').y(resizerNode.y());
|
||||
} 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').y() - resizerNode.y(), 2)
|
||||
);
|
||||
|
||||
var x = newHypotenuse * this.cos;
|
||||
var y = newHypotenuse * this.sin;
|
||||
x = newHypotenuse * this.cos;
|
||||
y = newHypotenuse * this.sin;
|
||||
|
||||
this.findOne('.top-right').x(x);
|
||||
this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y);
|
||||
@ -18363,49 +18360,43 @@
|
||||
} else if (this.movingResizer === 'middle-right') {
|
||||
this.findOne('.bottom-right').x(resizerNode.x());
|
||||
} 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').y() - resizerNode.y(), 2)
|
||||
);
|
||||
|
||||
var x = newHypotenuse * this.cos;
|
||||
var y = newHypotenuse * this.sin;
|
||||
x = newHypotenuse * this.cos;
|
||||
y = newHypotenuse * this.sin;
|
||||
|
||||
this.findOne('.bottom-left').x(this.findOne('.top-right').x() - x);
|
||||
this.findOne('.bottom-left').y(y);
|
||||
|
||||
var pos = resizerNode.position();
|
||||
pos = resizerNode.position();
|
||||
|
||||
this.findOne('.top-left').x(pos.x);
|
||||
this.findOne('.bottom-right').y(pos.y);
|
||||
} else if (this.movingResizer === 'bottom-center') {
|
||||
this.findOne('.bottom-right').y(resizerNode.y());
|
||||
} 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').y(), 2)
|
||||
);
|
||||
|
||||
var x = newHypotenuse * this.cos;
|
||||
var y = newHypotenuse * this.sin;
|
||||
x = newHypotenuse * this.cos;
|
||||
y = newHypotenuse * this.sin;
|
||||
|
||||
this.findOne('.bottom-right').x(x);
|
||||
this.findOne('.bottom-right').y(y);
|
||||
} else if (this.movingResizer === 'rotater') {
|
||||
var x = resizerNode.x() - this._el.width() * this._el.scaleX() / 2;
|
||||
var y = -resizerNode.y() + this._el.height() * this._el.scaleY() / 2;
|
||||
x = resizerNode.x() - this._el.width() * this._el.scaleX() / 2;
|
||||
y = -resizerNode.y() + this._el.height() * this._el.scaleY() / 2;
|
||||
|
||||
var dAlpha = Math.atan2(-y, x) + Math.PI / 2;
|
||||
var attrs = this._getAttrs();
|
||||
|
||||
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 newAlpha = Konva.Util._degToRad(newRotation);
|
||||
|
||||
@ -18435,27 +18426,22 @@
|
||||
return;
|
||||
}
|
||||
|
||||
var layer = resizerNode.getLayer();
|
||||
var absPos = this.findOne('.top-left').getAbsolutePosition();
|
||||
|
||||
var x = Math.round(absPos.x);
|
||||
var y = Math.round(absPos.y);
|
||||
var width = Math.round(
|
||||
this.findOne('.bottom-right').x() - this.findOne('.top-left').x()
|
||||
);
|
||||
x = absPos.x;
|
||||
y = absPos.y;
|
||||
var width =
|
||||
this.findOne('.bottom-right').x() - this.findOne('.top-left').x();
|
||||
|
||||
var height = Math.round(
|
||||
this.findOne('.bottom-right').y() - this.findOne('.top-left').y()
|
||||
);
|
||||
var height =
|
||||
this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
|
||||
|
||||
var pos = {
|
||||
x: this._el._centroid ? x + width / 2 : x,
|
||||
y: this._el._centroid ? y + height / 2 : y,
|
||||
this._setElementAttrs({
|
||||
absX: this._el._centroid ? x + width / 2 : x,
|
||||
absY: this._el._centroid ? y + height / 2 : y,
|
||||
width: width,
|
||||
height: height
|
||||
};
|
||||
|
||||
this._setElementAttrs(pos);
|
||||
});
|
||||
},
|
||||
|
||||
handleMouseUp: function() {
|
||||
@ -18469,7 +18455,6 @@
|
||||
if (this._el._centroid) {
|
||||
var topLeftResizer = this.findOne('.top-left');
|
||||
var absPos = topLeftResizer.getAbsolutePosition();
|
||||
console.log(absPos);
|
||||
|
||||
return {
|
||||
x: absPos.x,
|
||||
@ -18498,11 +18483,14 @@
|
||||
var scaleY = attrs.height / this._el.height();
|
||||
|
||||
this._el.setAttrs({
|
||||
x: attrs.x,
|
||||
y: attrs.y,
|
||||
scaleX: scaleX,
|
||||
scaleY: scaleY
|
||||
});
|
||||
|
||||
this._el.setAbsolutePosition({
|
||||
x: attrs.absX,
|
||||
y: attrs.absY
|
||||
});
|
||||
}
|
||||
this._update();
|
||||
this.getLayer().batchDraw();
|
||||
@ -18523,40 +18511,40 @@
|
||||
});
|
||||
}
|
||||
|
||||
this.get('.top-left')[0].position({
|
||||
this.findOne('.top-left').position({
|
||||
x: 0,
|
||||
y: 0
|
||||
});
|
||||
this.get('.top-center')[0].position({
|
||||
this.findOne('.top-center').position({
|
||||
x: width / 2,
|
||||
y: 0
|
||||
});
|
||||
this.get('.top-right')[0].position({
|
||||
this.findOne('.top-right').position({
|
||||
x: width,
|
||||
y: 0
|
||||
});
|
||||
this.get('.middle-left')[0].position({
|
||||
this.findOne('.middle-left').position({
|
||||
x: 0,
|
||||
y: height / 2
|
||||
});
|
||||
this.get('.middle-right')[0].position({
|
||||
this.findOne('.middle-right').position({
|
||||
x: width,
|
||||
y: height / 2
|
||||
});
|
||||
this.get('.bottom-left')[0].position({
|
||||
this.findOne('.bottom-left').position({
|
||||
x: 0,
|
||||
y: height
|
||||
});
|
||||
this.get('.bottom-center')[0].position({
|
||||
this.findOne('.bottom-center').position({
|
||||
x: width / 2,
|
||||
y: height
|
||||
});
|
||||
this.get('.bottom-right')[0].position({
|
||||
this.findOne('.bottom-right').position({
|
||||
x: width,
|
||||
y: height
|
||||
});
|
||||
|
||||
this.get('.rotater')[0].position({
|
||||
this.findOne('.rotater').position({
|
||||
x: width / 2,
|
||||
y: -50
|
||||
});
|
||||
|
||||
6
konva.min.js
vendored
6
konva.min.js
vendored
File diff suppressed because one or more lines are too long
@ -20,20 +20,20 @@
|
||||
"prettier": "prettier --write \"src/**/*.js\" \"test/**/*.js\" --single-quote"
|
||||
},
|
||||
"devDependencies": {
|
||||
"chai": "4.1.1",
|
||||
"chai": "4.1.2",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-connect": "^5.0.0",
|
||||
"gulp-eslint": "^4.0.0",
|
||||
"gulp-jscpd": "0.0.8",
|
||||
"gulp-jsdoc3": "^1.0.1",
|
||||
"gulp-mocha-phantomjs": "^0.12.1",
|
||||
"gulp-mocha-phantomjs": "^0.12.2",
|
||||
"gulp-rename": "^1.2.2",
|
||||
"gulp-replace": "^0.6.1",
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"gulp-util": "^3.0.8",
|
||||
"mocha": "3.5.0",
|
||||
"prettier": "^1.5.3"
|
||||
"mocha": "4.0.1",
|
||||
"prettier": "^1.9.2"
|
||||
},
|
||||
"keywords": [
|
||||
"canvas",
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
anchor.on('mouseout', function() {
|
||||
var layer = this.getLayer();
|
||||
document.body.style.cursor = 'default';
|
||||
this.setStrokeWidth(2);
|
||||
this.setStrokeWidth(1);
|
||||
layer.draw();
|
||||
});
|
||||
this.add(anchor);
|
||||
@ -79,7 +79,6 @@
|
||||
this.sin = height / hypotenuse;
|
||||
this.cos = width / hypotenuse;
|
||||
|
||||
// console.log(1, hypotenuse);
|
||||
window.addEventListener('mousemove', this.handleMouseMove);
|
||||
window.addEventListener('touchmove', this.handleMouseMove);
|
||||
window.addEventListener('mouseup', this.handleMouseUp);
|
||||
@ -87,6 +86,7 @@
|
||||
},
|
||||
|
||||
handleMouseMove: function(e) {
|
||||
var x, y, newHypotenuse;
|
||||
var resizerNode = this.findOne('.' + this.movingResizer);
|
||||
var stage = resizerNode.getStage();
|
||||
|
||||
@ -107,29 +107,26 @@
|
||||
resizerNode.setAbsolutePosition(newAbsPos);
|
||||
|
||||
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').y() - resizerNode.y(), 2)
|
||||
);
|
||||
|
||||
// console.log(2, newHypotenuse);
|
||||
var x = newHypotenuse * this.cos;
|
||||
var y = newHypotenuse * this.sin;
|
||||
|
||||
// console.log(this.findOne('.bottom-right').x() - x);
|
||||
x = newHypotenuse * this.cos;
|
||||
y = newHypotenuse * this.sin;
|
||||
|
||||
this.findOne('.top-left').x(this.findOne('.bottom-right').x() - x);
|
||||
this.findOne('.top-left').y(this.findOne('.bottom-right').y() - y);
|
||||
} else if (this.movingResizer === 'top-center') {
|
||||
this.findOne('.top-left').y(resizerNode.y());
|
||||
} 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').y() - resizerNode.y(), 2)
|
||||
);
|
||||
|
||||
var x = newHypotenuse * this.cos;
|
||||
var y = newHypotenuse * this.sin;
|
||||
x = newHypotenuse * this.cos;
|
||||
y = newHypotenuse * this.sin;
|
||||
|
||||
this.findOne('.top-right').x(x);
|
||||
this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y);
|
||||
@ -142,49 +139,43 @@
|
||||
} else if (this.movingResizer === 'middle-right') {
|
||||
this.findOne('.bottom-right').x(resizerNode.x());
|
||||
} 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').y() - resizerNode.y(), 2)
|
||||
);
|
||||
|
||||
var x = newHypotenuse * this.cos;
|
||||
var y = newHypotenuse * this.sin;
|
||||
x = newHypotenuse * this.cos;
|
||||
y = newHypotenuse * this.sin;
|
||||
|
||||
this.findOne('.bottom-left').x(this.findOne('.top-right').x() - x);
|
||||
this.findOne('.bottom-left').y(y);
|
||||
|
||||
var pos = resizerNode.position();
|
||||
pos = resizerNode.position();
|
||||
|
||||
this.findOne('.top-left').x(pos.x);
|
||||
this.findOne('.bottom-right').y(pos.y);
|
||||
} else if (this.movingResizer === 'bottom-center') {
|
||||
this.findOne('.bottom-right').y(resizerNode.y());
|
||||
} 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').y(), 2)
|
||||
);
|
||||
|
||||
var x = newHypotenuse * this.cos;
|
||||
var y = newHypotenuse * this.sin;
|
||||
x = newHypotenuse * this.cos;
|
||||
y = newHypotenuse * this.sin;
|
||||
|
||||
this.findOne('.bottom-right').x(x);
|
||||
this.findOne('.bottom-right').y(y);
|
||||
} else if (this.movingResizer === 'rotater') {
|
||||
var x = resizerNode.x() - this._el.width() * this._el.scaleX() / 2;
|
||||
var y = -resizerNode.y() + this._el.height() * this._el.scaleY() / 2;
|
||||
x = resizerNode.x() - this._el.width() * this._el.scaleX() / 2;
|
||||
y = -resizerNode.y() + this._el.height() * this._el.scaleY() / 2;
|
||||
|
||||
var dAlpha = Math.atan2(-y, x) + Math.PI / 2;
|
||||
var attrs = this._getAttrs();
|
||||
|
||||
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 newAlpha = Konva.Util._degToRad(newRotation);
|
||||
|
||||
@ -214,27 +205,22 @@
|
||||
return;
|
||||
}
|
||||
|
||||
var layer = resizerNode.getLayer();
|
||||
var absPos = this.findOne('.top-left').getAbsolutePosition();
|
||||
|
||||
var x = Math.round(absPos.x);
|
||||
var y = Math.round(absPos.y);
|
||||
var width = Math.round(
|
||||
this.findOne('.bottom-right').x() - this.findOne('.top-left').x()
|
||||
);
|
||||
x = absPos.x;
|
||||
y = absPos.y;
|
||||
var width =
|
||||
this.findOne('.bottom-right').x() - this.findOne('.top-left').x();
|
||||
|
||||
var height = Math.round(
|
||||
this.findOne('.bottom-right').y() - this.findOne('.top-left').y()
|
||||
);
|
||||
var height =
|
||||
this.findOne('.bottom-right').y() - this.findOne('.top-left').y();
|
||||
|
||||
var pos = {
|
||||
x: this._el._centroid ? x + width / 2 : x,
|
||||
y: this._el._centroid ? y + height / 2 : y,
|
||||
this._setElementAttrs({
|
||||
absX: this._el._centroid ? x + width / 2 : x,
|
||||
absY: this._el._centroid ? y + height / 2 : y,
|
||||
width: width,
|
||||
height: height
|
||||
};
|
||||
|
||||
this._setElementAttrs(pos);
|
||||
});
|
||||
},
|
||||
|
||||
handleMouseUp: function() {
|
||||
@ -248,7 +234,6 @@
|
||||
if (this._el._centroid) {
|
||||
var topLeftResizer = this.findOne('.top-left');
|
||||
var absPos = topLeftResizer.getAbsolutePosition();
|
||||
console.log(absPos);
|
||||
|
||||
return {
|
||||
x: absPos.x,
|
||||
@ -277,11 +262,14 @@
|
||||
var scaleY = attrs.height / this._el.height();
|
||||
|
||||
this._el.setAttrs({
|
||||
x: attrs.x,
|
||||
y: attrs.y,
|
||||
scaleX: scaleX,
|
||||
scaleY: scaleY
|
||||
});
|
||||
|
||||
this._el.setAbsolutePosition({
|
||||
x: attrs.absX,
|
||||
y: attrs.absY
|
||||
});
|
||||
}
|
||||
this._update();
|
||||
this.getLayer().batchDraw();
|
||||
@ -302,40 +290,40 @@
|
||||
});
|
||||
}
|
||||
|
||||
this.get('.top-left')[0].position({
|
||||
this.findOne('.top-left').position({
|
||||
x: 0,
|
||||
y: 0
|
||||
});
|
||||
this.get('.top-center')[0].position({
|
||||
this.findOne('.top-center').position({
|
||||
x: width / 2,
|
||||
y: 0
|
||||
});
|
||||
this.get('.top-right')[0].position({
|
||||
this.findOne('.top-right').position({
|
||||
x: width,
|
||||
y: 0
|
||||
});
|
||||
this.get('.middle-left')[0].position({
|
||||
this.findOne('.middle-left').position({
|
||||
x: 0,
|
||||
y: height / 2
|
||||
});
|
||||
this.get('.middle-right')[0].position({
|
||||
this.findOne('.middle-right').position({
|
||||
x: width,
|
||||
y: height / 2
|
||||
});
|
||||
this.get('.bottom-left')[0].position({
|
||||
this.findOne('.bottom-left').position({
|
||||
x: 0,
|
||||
y: height
|
||||
});
|
||||
this.get('.bottom-center')[0].position({
|
||||
this.findOne('.bottom-center').position({
|
||||
x: width / 2,
|
||||
y: height
|
||||
});
|
||||
this.get('.bottom-right')[0].position({
|
||||
this.findOne('.bottom-right').position({
|
||||
x: width,
|
||||
y: height
|
||||
});
|
||||
|
||||
this.get('.rotater')[0].position({
|
||||
this.findOne('.rotater').position({
|
||||
x: width / 2,
|
||||
y: -50
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user