lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 06:55:17 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into getClientRect-no-rounding

Browse Source
This commit is contained in:
Anton Lavrenov 2022-03-12 22:57:20 -05:00 committed by GitHub
commit 831288e4c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 167 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -3,6 +3,10 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).
- Fix characters positions calculations on `fontFamily` changes in `TextPath`.
- Remove rounding in `node.getClientRect()` results
- Fix event object on `transformstart` event.
## 8.3.3 (2022-03-23)
- Fix `justify` align for text with several paragraphs.

6
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v8.3.3
* http://konvajs.org/
* Licensed under the MIT
* Date: Wed Feb 23 2022
* Date: Tue Mar 08 2022
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -15001,9 +15001,9 @@
x: pos.x - ap.x,
y: pos.y - ap.y,
};
this._fire('transformstart', { evt: e, target: this.getNode() });
this._fire('transformstart', { evt: e.evt, target: this.getNode() });
this._nodes.forEach((target) => {
target._fire('transformstart', { evt: e, target });
target._fire('transformstart', { evt: e.evt, target });
});
}
_handleMouseMove(e) {

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

27
package.json
View File

@ -60,11 +60,11 @@
}
],
"devDependencies": {
"@parcel/transformer-image": "2.0.0-beta.2",
"@size-limit/preset-big-lib": "^5.0.4",
"@types/mocha": "^9.0.0",
"canvas": "^2.8.0",
"chai": "4.3.4",
"@parcel/transformer-image": "2.3.2",
"@size-limit/preset-big-lib": "^7.0.8",
"@types/mocha": "^9.1.0",
"canvas": "^2.9.0",
"chai": "4.3.6",
"filehound": "^1.17.5",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
@ -77,18 +77,19 @@
"gulp-uglify": "^3.0.2",
"gulp-uglify-es": "^3.0.0",
"gulp-util": "^3.0.8",
"mocha": "8.4.0",
"mocha-headless-chrome": "^3.1.0",
"parcel": "2.0.0-beta.2",
"rollup": "^2.57.0",
"mocha": "9.2.2",
"mocha-headless-chrome": "^4.0.0",
"parcel": "2.3.2",
"process": "^0.11.10",
"rollup": "^2.70.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-sourcemaps": "^0.6.3",
"rollup-plugin-typescript2": "^0.30.0",
"size-limit": "^5.0.4",
"ts-mocha": "^8.0.0",
"rollup-plugin-typescript2": "^0.31.2",
"size-limit": "^7.0.8",
"ts-mocha": "^9.0.2",
"ts-node": "^9.1.1",
"typescript": "^4.4.3"
"typescript": "^4.6.2"
},
"keywords": [
"canvas",

21
src/Node.ts
View File

@ -322,8 +322,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
var width = Math.ceil(conf.width || rect.width),
height = Math.ceil(conf.height || rect.height),
pixelRatio = conf.pixelRatio,
x = conf.x === undefined ? rect.x : conf.x,
y = conf.y === undefined ? rect.y : conf.y,
x = conf.x === undefined ? Math.floor(rect.x) : conf.x,
y = conf.y === undefined ? Math.floor(rect.y) : conf.y,
offset = conf.offset || 0,
drawBorder = conf.drawBorder || false,
hitCanvasPixelRatio = conf.hitCanvasPixelRatio || 1;
@ -335,12 +335,25 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
return;
}
width += offset * 2;
height += offset * 2;
// let's just add 1 pixel extra,
// because using Math.floor on x, y position may shift drawing
width += offset * 2 + 1;
height += offset * 2 + 1;
x -= offset;
y -= offset;
// if (Math.floor(x) < x) {
// x = Math.floor(x);
// // width += 1;
// }
// if (Math.floor(y) < y) {
// y = Math.floor(y);
// // height += 1;
// }
// console.log({ x, y, width, height }, rect);
var cachedSceneCanvas = new SceneCanvas({
pixelRatio: pixelRatio,
width: width,

5
src/Shape.ts
View File

@ -535,9 +535,10 @@ export class Shape<
const width = preWidth + blurRadius * 2;
const height = preHeight + blurRadius * 2;
const rect = {
width,
height,
width: width,
height: height,
x:
-(strokeWidth / 2 + blurRadius) +
Math.min(shadowOffsetX, 0) +

40
src/shapes/Arc.ts
View File

@ -62,26 +62,32 @@ export class Arc extends Shape<ArcConfig> {
}
getSelfRect() {
const innerRadius = this.innerRadius()
const outerRadius = this.outerRadius()
const clockwise = this.clockwise()
const innerRadius = this.innerRadius();
const outerRadius = this.outerRadius();
const clockwise = this.clockwise();
const angle = Konva.getAngle(clockwise ? 360 - this.angle() : this.angle());
const boundLeftRatio = Math.cos(Math.min(angle, Math.PI))
const boundRightRatio = 1
const boundTopRatio = Math.sin(Math.min(Math.max(Math.PI, angle), 3 * Math.PI / 2))
const boundBottomRatio = Math.sin(Math.min(angle, Math.PI / 2))
const boundLeft = boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius)
const boundRight = boundRightRatio * (boundRightRatio > 0 ? outerRadius : innerRadius)
const boundTop = boundTopRatio * (boundTopRatio > 0 ? innerRadius : outerRadius)
const boundBottom = boundBottomRatio * (boundBottomRatio > 0 ? outerRadius : innerRadius)
const boundLeftRatio = Math.cos(Math.min(angle, Math.PI));
const boundRightRatio = 1;
const boundTopRatio = Math.sin(
Math.min(Math.max(Math.PI, angle), (3 * Math.PI) / 2)
);
const boundBottomRatio = Math.sin(Math.min(angle, Math.PI / 2));
const boundLeft =
boundLeftRatio * (boundLeftRatio > 0 ? innerRadius : outerRadius);
const boundRight =
boundRightRatio * (boundRightRatio > 0 ? outerRadius : innerRadius);
const boundTop =
boundTopRatio * (boundTopRatio > 0 ? innerRadius : outerRadius);
const boundBottom =
boundBottomRatio * (boundBottomRatio > 0 ? outerRadius : innerRadius);
return {
x: Math.round(boundLeft),
y: Math.round(clockwise ? -1 * boundBottom : boundTop),
width: Math.round(boundRight - boundLeft),
height: Math.round(boundBottom - boundTop)
}
x: boundLeft,
y: clockwise ? -1 * boundBottom : boundTop,
width: boundRight - boundLeft,
height: boundBottom - boundTop,
};
}
innerRadius: GetSet<number, this>;

8
src/shapes/Path.ts
View File

@ -188,10 +188,10 @@ export class Path extends Shape<PathConfig> {
}
}
return {
x: Math.round(minX),
y: Math.round(minY),
width: Math.round(maxX - minX),
height: Math.round(maxY - minY),
x: minX,
y: minY,
width: maxX - minX,
height: maxY - minY,
};
}
/**

10
src/shapes/TextPath.ts
View File

@ -98,7 +98,7 @@ export class TextPath extends Shape<TextPathConfig> {
// update text data for certain attr changes
this.on(
'textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva',
'textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva fontSizeChange.konva fontFamilyChange.konva',
this._setTextData
);
@ -646,10 +646,10 @@ Factory.addGetterSetter(TextPath, 'align', 'left');
* @param {Number} letterSpacing
* @returns {Number}
* @example
* // get line height
* // get letter spacing value
* var letterSpacing = shape.letterSpacing();
*
* // set the line height
* // set the letter spacing value
* shape.letterSpacing(2);
*/
@ -662,10 +662,10 @@ Factory.addGetterSetter(TextPath, 'letterSpacing', 0, getNumberValidator());
* @param {String} textBaseline
* @returns {String}
* @example
* // get line height
* // get current text baseline
* var textBaseline = shape.textBaseline();
*
* // set the line height
* // set new text baseline
* shape.textBaseline('top');
*/
Factory.addGetterSetter(TextPath, 'textBaseline', 'middle');

4
src/shapes/Transformer.ts
View File

@ -649,9 +649,9 @@ export class Transformer extends Group {
x: pos.x - ap.x,
y: pos.y - ap.y,
};
this._fire('transformstart', { evt: e, target: this.getNode() });
this._fire('transformstart', { evt: e.evt, target: this.getNode() });
this._nodes.forEach((target) => {
target._fire('transformstart', { evt: e, target });
target._fire('transformstart', { evt: e.evt, target });
});
}
_handleMouseMove(e) {

13
test/unit/Arc-test.ts
View File

@ -5,6 +5,7 @@ import {
Konva,
createCanvas,
compareLayerAndCanvas,
assertAlmostDeepEqual,
} from './test-utils';
describe('Arc', function () {
@ -88,7 +89,7 @@ describe('Arc', function () {
layer.add(arc);
stage.add(layer);
assert.deepEqual(arc.getSelfRect(), {
assertAlmostDeepEqual(arc.getSelfRect(), {
x: 0,
y: 0,
width: 80,
@ -116,7 +117,7 @@ describe('Arc', function () {
layer.add(arc);
stage.add(layer);
assert.deepEqual(arc.getSelfRect(), {
assertAlmostDeepEqual(arc.getSelfRect(), {
x: -80,
y: -80,
width: 160,
@ -140,7 +141,7 @@ describe('Arc', function () {
layer.add(arc);
stage.add(layer);
assert.deepEqual(arc.getSelfRect(), {
assertAlmostDeepEqual(arc.getSelfRect(), {
x: 0,
y: -80,
width: 80,
@ -163,14 +164,14 @@ describe('Arc', function () {
layer.add(arc);
stage.add(layer);
assert.deepEqual(arc.getSelfRect(), {
assertAlmostDeepEqual(arc.getSelfRect(), {
x: 25,
y: 0,
width: 55,
height: 69,
height: 69.282032302755,
});
});
it('cache', function () {
var stage = addStage();
var layer = new Konva.Layer();

9
test/unit/Node-cache-test.ts
View File

@ -70,8 +70,8 @@ describe('Caching', function () {
context.fillStyle = 'green';
context.fill();
compareLayerAndCanvas(layer, canvas, 200);
cloneAndCompareLayer(layer, 150);
compareLayerAndCanvas(layer, canvas, 200, 100);
cloneAndCompareLayer(layer, 150, 100);
});
it('cache rectangle with fill and stroke', function () {
@ -831,7 +831,8 @@ describe('Caching', function () {
group.cache();
const canvas = group._cache.get('canvas').scene;
assert.equal(canvas.width, 105 * canvas.pixelRatio);
console.log(canvas.width / 2);
assert.equal(canvas.width, 106 * canvas.pixelRatio);
});
it('cache group with rectangle with fill and opacity', function () {
@ -1468,7 +1469,7 @@ describe('Caching', function () {
layer.draw();
assert.equal(
circle._cache.get('canvas').filter.width,
20 * circle._cache.get('canvas').filter.pixelRatio
21 * circle._cache.get('canvas').filter.pixelRatio
);
circle.filters([]);
// TODO: should we clear cache canvas?

95
test/unit/Path-test.ts
View File

File diff suppressed because one or more lines are too long

4
test/unit/RegularPolygon-test.ts
View File

@ -203,7 +203,7 @@ describe('RegularPolygon', function () {
var box = poly.getClientRect();
assertAlmostEqual(box.width, 92.60254037844388);
assertAlmostEqual(box.height, 81.00000000000003);
assertAlmostEqual(box.width, 91.60254037844388);
assertAlmostEqual(box.height, 80.00000000000003);
});
});

1
test/unit/Transformer-test.ts
View File

@ -2535,6 +2535,7 @@ describe('Transformer', function () {
callCount += 1;
assert.equal(e.target, rect);
assert.equal(tr.getActiveAnchor(), 'top-left');
assert.equal(typeof e.evt.clientX === 'number', true);
});
rect.on('transform', function (e) {

6
test/unit/test-utils.ts
View File

@ -384,3 +384,9 @@ export const assertAlmostEqual = function (val1, val2) {
throw new Error('Expected ' + val1 + ' to be almost equal to ' + val2);
}
};
export const assertAlmostDeepEqual = function (obj1, obj2) {
for (var key1 in obj1) {
assertAlmostEqual(obj1[key1], obj2[key1]);
}
};