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

Fix Konva.Transformer behavior on scaled with CSS stage. fix #841.

Browse Source
This commit is contained in:
Anton Lavrenov 2020-02-06 10:14:49 -05:00
parent d663a19342
commit 1c3a019134
11 changed files with 154 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -5,6 +5,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## Not released:
* Fix `Konva.Transformer` behavior on scaled with CSS stage
## 4.1.3 - 2020-01-30
* Fix line with tension calculations

50
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v4.1.3
* http://konvajs.org/
* Licensed under the MIT
* Date: Thu Jan 30 2020
* Date: Thu Feb 06 2020
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -1528,7 +1528,7 @@
* @param {Konva.Shape} shape
*/
Context.prototype.fillShape = function (shape) {
if (shape.getFillEnabled()) {
if (shape.fillEnabled()) {
this._fill(shape);
}
};
@ -1542,7 +1542,7 @@
* @param {Konva.Shape} shape
*/
Context.prototype.strokeShape = function (shape) {
if (shape.getStrokeEnabled()) {
if (shape.hasStroke()) {
this._stroke(shape);
}
};
@ -1556,12 +1556,8 @@
* @param {Konva.Shape} shape
*/
Context.prototype.fillStrokeShape = function (shape) {
if (shape.getFillEnabled()) {
this._fill(shape);
}
if (shape.getStrokeEnabled()) {
this._stroke(shape);
}
this.fillShape(shape);
this.strokeShape(shape);
};
Context.prototype.getTrace = function (relaxed) {
var traceArr = this.traceArr, len = traceArr.length, str = '', n, trace, method, args;
@ -2174,6 +2170,11 @@
shape._fillFuncHit(this);
this.restore();
};
HitContext.prototype.strokeShape = function (shape) {
if (shape.hasHitStroke()) {
this._stroke(shape);
}
};
HitContext.prototype._stroke = function (shape) {
if (shape.hasHitStroke()) {
// ignore strokeScaleEnabled for Text
@ -6722,8 +6723,8 @@
var stage = this.getStage();
if (stage) {
stage.content.removeChild(this.getCanvas()._canvas);
if (index < stage.getChildren().length - 1) {
stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[index + 1].getCanvas()._canvas);
if (index < stage.children.length - 1) {
stage.content.insertBefore(this.getCanvas()._canvas, stage.children[index + 1].getCanvas()._canvas);
}
else {
stage.content.appendChild(this.getCanvas()._canvas);
@ -6750,8 +6751,8 @@
return false;
}
stage.content.removeChild(this.getCanvas()._canvas);
if (this.index < stage.getChildren().length - 1) {
stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[this.index + 1].getCanvas()._canvas);
if (this.index < stage.children.length - 1) {
stage.content.insertBefore(this.getCanvas()._canvas, stage.children[this.index + 1].getCanvas()._canvas);
}
else {
stage.content.appendChild(this.getCanvas()._canvas);
@ -6763,7 +6764,7 @@
if (Node.prototype.moveDown.call(this)) {
var stage = this.getStage();
if (stage) {
var children = stage.getChildren();
var children = stage.children;
stage.content.removeChild(this.getCanvas()._canvas);
stage.content.insertBefore(this.getCanvas()._canvas, children[this.index + 1].getCanvas()._canvas);
}
@ -6776,7 +6777,7 @@
if (Node.prototype.moveToBottom.call(this)) {
var stage = this.getStage();
if (stage) {
var children = stage.getChildren();
var children = stage.children;
stage.content.removeChild(this.getCanvas()._canvas);
stage.content.insertBefore(this.getCanvas()._canvas, children[1].getCanvas()._canvas);
}
@ -7210,7 +7211,7 @@
* @returns {Boolean}
*/
Shape.prototype.hasFill = function () {
return !!(this.fill() ||
return this.fillEnabled() && !!(this.fill() ||
this.fillPatternImage() ||
this.fillLinearGradientColorStops() ||
this.fillRadialGradientColorStops());
@ -14918,23 +14919,10 @@
var x, y, newHypotenuse;
var anchorNode = this.findOne('.' + this._movingAnchorName);
var stage = anchorNode.getStage();
var box = stage.getContent().getBoundingClientRect();
var zeroPoint = {
x: box.left,
y: box.top
};
var pointerPos = {
left: e.clientX !== undefined ? e.clientX : e.touches[0].clientX,
top: e.clientX !== undefined ? e.clientY : e.touches[0].clientY
};
var newAbsPos = {
x: pointerPos.left - zeroPoint.x,
y: pointerPos.top - zeroPoint.y
};
anchorNode.setAbsolutePosition(newAbsPos);
stage.setPointersPositions(e);
anchorNode.setAbsolutePosition(stage.getPointerPosition());
var keepProportion = this.keepRatio() || e.shiftKey;
var padding = this.padding();
// console.log(keepProportion);
if (this._movingAnchorName === 'top-left') {
if (keepProportion) {
newHypotenuse = Math.sqrt(Math.pow(this.findOne('.bottom-right').x() - anchorNode.x() - padding * 2, 2) +

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -48,7 +48,7 @@
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-sourcemaps": "^0.4.2",
"rollup-plugin-typescript2": "^0.25.2",
"typescript": "^3.7.2"
"typescript": "^3.7.5"
},
"keywords": [
"canvas",

12
src/BaseLayer.ts
View File

@ -99,10 +99,10 @@ export abstract class BaseLayer extends Container<Group | Shape> {
if (stage) {
stage.content.removeChild(this.getCanvas()._canvas);
if (index < stage.getChildren().length - 1) {
if (index < stage.children.length - 1) {
stage.content.insertBefore(
this.getCanvas()._canvas,
stage.getChildren()[index + 1].getCanvas()._canvas
stage.children[index + 1].getCanvas()._canvas
);
} else {
stage.content.appendChild(this.getCanvas()._canvas);
@ -130,10 +130,10 @@ export abstract class BaseLayer extends Container<Group | Shape> {
}
stage.content.removeChild(this.getCanvas()._canvas);
if (this.index < stage.getChildren().length - 1) {
if (this.index < stage.children.length - 1) {
stage.content.insertBefore(
this.getCanvas()._canvas,
stage.getChildren()[this.index + 1].getCanvas()._canvas
stage.children[this.index + 1].getCanvas()._canvas
);
} else {
stage.content.appendChild(this.getCanvas()._canvas);
@ -145,7 +145,7 @@ export abstract class BaseLayer extends Container<Group | Shape> {
if (Node.prototype.moveDown.call(this)) {
var stage = this.getStage();
if (stage) {
var children = stage.getChildren();
var children = stage.children;
stage.content.removeChild(this.getCanvas()._canvas);
stage.content.insertBefore(
this.getCanvas()._canvas,
@ -161,7 +161,7 @@ export abstract class BaseLayer extends Container<Group | Shape> {
if (Node.prototype.moveToBottom.call(this)) {
var stage = this.getStage();
if (stage) {
var children = stage.getChildren();
var children = stage.children;
stage.content.removeChild(this.getCanvas()._canvas);
stage.content.insertBefore(
this.getCanvas()._canvas,

24
src/Context.ts
View File

@ -1,6 +1,7 @@
import { Util } from './Util';
import { Konva } from './Global';
import { Canvas } from './Canvas';
import { Shape } from './Shape';
var COMMA = ',',
OPEN_PAREN = '(',
@ -110,8 +111,8 @@ export class Context {
* @name Konva.Context#fillShape
* @param {Konva.Shape} shape
*/
fillShape(shape) {
if (shape.getFillEnabled()) {
fillShape(shape: Shape) {
if (shape.fillEnabled()) {
this._fill(shape);
}
}
@ -125,8 +126,8 @@ export class Context {
* @name Konva.Context#strokeShape
* @param {Konva.Shape} shape
*/
strokeShape(shape) {
if (shape.getStrokeEnabled()) {
strokeShape(shape: Shape) {
if (shape.hasStroke()) {
this._stroke(shape);
}
}
@ -141,13 +142,9 @@ export class Context {
* @name Konva.Context#fillStrokeShape
* @param {Konva.Shape} shape
*/
fillStrokeShape(shape) {
if (shape.getFillEnabled()) {
this._fill(shape);
}
if (shape.getStrokeEnabled()) {
this._stroke(shape);
}
fillStrokeShape(shape: Shape) {
this.fillShape(shape);
this.strokeShape(shape);
}
getTrace(relaxed) {
@ -825,6 +822,11 @@ export class HitContext extends Context {
shape._fillFuncHit(this);
this.restore();
}
strokeShape(shape: Shape) {
if (shape.hasHitStroke()) {
this._stroke(shape);
}
}
_stroke(shape) {
if (shape.hasHitStroke()) {
// ignore strokeScaleEnabled for Text

2
src/Shape.ts
View File

@ -349,7 +349,7 @@ export class Shape<Config extends ShapeConfig = ShapeConfig> extends Node<
* @returns {Boolean}
*/
hasFill() {
return !!(
return this.fillEnabled() && !!(
this.fill() ||
this.fillPatternImage() ||
this.fillLinearGradientColorStops() ||

18
src/shapes/Transformer.ts
View File

@ -434,28 +434,14 @@ export class Transformer extends Group {
var anchorNode = this.findOne('.' + this._movingAnchorName);
var stage = anchorNode.getStage();
var box = stage.getContent().getBoundingClientRect();
var zeroPoint = {
x: box.left,
y: box.top
};
var pointerPos = {
left: e.clientX !== undefined ? e.clientX : e.touches[0].clientX,
top: e.clientX !== undefined ? e.clientY : e.touches[0].clientY
};
var newAbsPos = {
x: pointerPos.left - zeroPoint.x,
y: pointerPos.top - zeroPoint.y
};
stage.setPointersPositions(e);
anchorNode.setAbsolutePosition(newAbsPos);
anchorNode.setAbsolutePosition(stage.getPointerPosition());
var keepProportion = this.keepRatio() || e.shiftKey;
var padding = this.padding();
// console.log(keepProportion);
if (this._movingAnchorName === 'top-left') {
if (keepProportion) {
newHypotenuse = Math.sqrt(

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

@ -1049,7 +1049,8 @@ suite('Shape', function() {
width: 100,
height: 50,
stroke: 'red',
strokeWidth: 20
strokeWidth: 20,
draggable: true
});
// default value
assert.equal(rect.strokeHitEnabled(), true);
@ -1122,7 +1123,6 @@ suite('Shape', function() {
// );
});
test('enable hitStrokeWidth even if we have no stroke on scene', function() {
var stage = addStage();
@ -1918,4 +1918,51 @@ suite('Shape', function() {
assert.equal(callCount, 1);
Konva.Util.warn = oldWarn;
});
test('hasFill getter', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var shape = new Konva.Shape({
stroke: 'black',
strokeWidth: 4,
sceneFunc: function(context) {
context.beginPath();
context.moveTo(20, 50);
context.quadraticCurveTo(550, 0, 500, 500);
context.fillStrokeShape(shape);
},
fill: 'red',
fillEnabled: false
});
layer.add(shape);
assert.equal(shape.hasFill(), false);
});
test('test hit of non filled shape', function() {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var line = new Konva.Shape({
sceneFunc: function(context) {
context.beginPath();
context.moveTo(20, 50);
context.quadraticCurveTo(550, 0, 500, 500);
context.fillStrokeShape(line);
}
});
layer.add(line);
layer.draw();
// we still should register shape here
// like for a non filled rectangle (with just stroke),
// we need fill it for full events
var shape = layer.getIntersection({ x: 50, y: 70 });
assert.equal(shape, line);
});
});

11
test/unit/Stage-test.js
View File

@ -1378,15 +1378,4 @@ suite('Stage', function() {
Konva.Util.warn = oldWarn;
assert.equal(called, true);
});
// test.only('Warn when styles or stage are applied', function() {
// var stage = addStage();
// // var layer = new Konva.Layer();
// // stage.add(layer);
// var container = stage.content;
// console.log(
// getComputedStyle(container).width,
// getComputedStyle(container).height
// );
// });
});

59
test/unit/shapes/Transformer-test.js
View File

@ -2577,4 +2577,63 @@ suite('Transformer', function() {
stage.draw();
});
test('try to move anchor on scaled with css stage', function() {
var stage = addStage();
stage.container().style.transform = 'scale(0.5)';
stage.container().style.transformOrigin = 'top left';
var layer = new Konva.Layer();
stage.add(layer);
var rect = new Konva.Rect({
x: 0,
y: 0,
draggable: true,
width: 100,
height: 100,
fill: 'yellow'
});
layer.add(rect);
var tr = new Konva.Transformer({
node: rect,
keepRatio: false
});
layer.add(tr);
layer.draw();
stage.simulateMouseMove({
x: 50,
y: 50
});
stage.simulateMouseDown({
x: 50,
y: 50
});
var target = stage.getIntersection({
x: 50,
y: 50
});
var top = stage.content.getBoundingClientRect().top;
tr._handleMouseMove({
target: target,
clientX: 100,
clientY: 50 + top
});
// here is duplicate, because transformer is listening window events
tr._handleMouseUp({
clientX: 100,
clientY: 50 + top
});
stage.simulateMouseUp({
x: 100,
y: 50
});
assert.equal(rect.width() * rect.scaleX(), 200);
});
});