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

update CHANGELOG with new version

Browse Source
This commit is contained in:
Anton Lavrenov 2023-01-19 18:42:25 -05:00
parent a54cfcae48
commit 322b821efb
6 changed files with 110 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@ -3,6 +3,12 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).
### 8.4.1 (2023-01-19)
- Typescript fixes for `container.add()` method. Ability to use empty array as argument. E.g. `container.add(...emptyArray)`
- Fix underline for justify text
- Fix gradient display on underline or line-through text
### 8.4.0 (2023-01-05)
- Add support for `cornerRadius` for Konva.Image

30
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v8.4.0
* http://konvajs.org/
* Licensed under the MIT
* Date: Thu Jan 05 2023
* Date: Thu Jan 19 2023
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -5355,22 +5355,27 @@
* add a child and children into container
* @name Konva.Container#add
* @method
* @param {...Konva.Node} child
* @param {...Konva.Node} children
* @returns {Container}
* @example
* layer.add(rect);
* layer.add(shape1, shape2, shape3);
* // empty arrays are accepted, though each individual child must be defined
* layer.add(...shapes);
* // remember to redraw layer if you changed something
* layer.draw();
*/
add(...children) {
if (arguments.length > 1) {
for (var i = 0; i < arguments.length; i++) {
this.add(arguments[i]);
if (children.length === 0) {
return this;
}
if (children.length > 1) {
for (var i = 0; i < children.length; i++) {
this.add(children[i]);
}
return this;
}
var child = children[0];
const child = children[0];
if (child.getParent()) {
child.moveTo(this);
return this;
@ -13498,14 +13503,13 @@
spacesNumber = text.split(' ').length - 1;
oneWord = spacesNumber === 0;
lineWidth =
align === JUSTIFY && lastLine && !oneWord
? totalWidth - padding * 2
: width;
align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
context.lineTo(lineTranslateX + Math.round(lineWidth), translateY + lineTranslateY + Math.round(fontSize / 2));
// I have no idea what is real ratio
// just /15 looks good enough
context.lineWidth = fontSize / 15;
context.strokeStyle = fill;
const gradient = this._getLinearGradient();
context.strokeStyle = gradient || fill;
context.stroke();
context.restore();
}
@ -13521,7 +13525,8 @@
: width;
context.lineTo(lineTranslateX + Math.round(lineWidth), translateY + lineTranslateY);
context.lineWidth = fontSize / 15;
context.strokeStyle = fill;
const gradient = this._getLinearGradient();
context.strokeStyle = gradient || fill;
context.stroke();
context.restore();
}
@ -13627,7 +13632,8 @@
normalizeFontFamily(this.fontFamily()));
}
_addTextLine(line) {
if (this.align() === JUSTIFY) {
const align = this.align();
if (align === JUSTIFY) {
line = line.trim();
}
var width = this._getTextWidth(line);

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

29
src/Context.ts
View File

@ -322,13 +322,7 @@ export class Context {
* @method
* @name Konva.Context#arcTo
*/
arcTo(
a0: number,
a1: number,
a2: number,
a3: number,
a4: number
) {
arcTo(a0: number, a1: number, a2: number, a3: number, a4: number) {
this._context.arcTo(a0, a1, a2, a3, a4);
}
/**
@ -359,12 +353,7 @@ export class Context {
* @method
* @name Konva.Context#clearRect
*/
clearRect(
a0: number,
a1: number,
a2: number,
a3: number
) {
clearRect(a0: number, a1: number, a2: number, a3: number) {
this._context.clearRect(a0, a1, a2, a3);
}
/**
@ -401,12 +390,7 @@ export class Context {
* @method
* @name Konva.Context#createLinearGradient
*/
createLinearGradient(
a0: number,
a1: number,
a2: number,
a3: number
) {
createLinearGradient(a0: number, a1: number, a2: number, a3: number) {
return this._context.createLinearGradient(a0, a1, a2, a3);
}
/**
@ -762,9 +746,12 @@ export class Context {
}
// supported context properties
type CanvasContextProps = Pick<CanvasRenderingContext2D, typeof CONTEXT_PROPERTIES[number]>;
type CanvasContextProps = Pick<
CanvasRenderingContext2D,
typeof CONTEXT_PROPERTIES[number]
>;
export interface Context extends CanvasContextProps { };
export interface Context extends CanvasContextProps {}
CONTEXT_PROPERTIES.forEach(function (prop) {
Object.defineProperty(Context.prototype, prop, {

14
src/shapes/Text.ts
View File

@ -243,9 +243,7 @@ export class Text extends Shape<TextConfig> {
spacesNumber = text.split(' ').length - 1;
oneWord = spacesNumber === 0;
lineWidth =
align === JUSTIFY && lastLine && !oneWord
? totalWidth - padding * 2
: width;
align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
context.lineTo(
lineTranslateX + Math.round(lineWidth),
translateY + lineTranslateY + Math.round(fontSize / 2)
@ -254,7 +252,9 @@ export class Text extends Shape<TextConfig> {
// I have no idea what is real ratio
// just /15 looks good enough
context.lineWidth = fontSize / 15;
context.strokeStyle = fill;
const gradient = this._getLinearGradient();
context.strokeStyle = gradient || fill;
context.stroke();
context.restore();
}
@ -273,7 +273,8 @@ export class Text extends Shape<TextConfig> {
translateY + lineTranslateY
);
context.lineWidth = fontSize / 15;
context.strokeStyle = fill;
const gradient = this._getLinearGradient();
context.strokeStyle = gradient || fill;
context.stroke();
context.restore();
}
@ -390,7 +391,8 @@ export class Text extends Shape<TextConfig> {
);
}
_addTextLine(line) {
if (this.align() === JUSTIFY) {
const align = this.align();
if (align === JUSTIFY) {
line = line.trim();
}
var width = this._getTextWidth(line);

71
test/unit/Text-test.ts
View File

@ -719,10 +719,14 @@ describe('Text', function () {
stage.add(layer);
var trace =
'fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();restore();save();save();beginPath();moveTo();lineTo();stroke();restore();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();fillStyle;fillText();restore();restore();';
if (isNode) {
return;
}
assert.equal(layer.getContext().getTrace(true), trace);
var trace =
'fillText(c,69.696,77);fillStyle=#555;fillText(e,81.696,77);fillStyle=#555;fillText(s,94.482,77);fillStyle=#555;fillText(;,106.482,77);fillStyle=#555;fillText( ,117.549,77);fillStyle=#555;fillText(A,126.438,77);fillStyle=#555;fillText(n,140.776,77);fillStyle=#555;fillText(d,153.563,77);fillStyle=#555;fillText( ,168.525,77);fillStyle=#555;fillText(o,177.415,77);fillStyle=#555;fillText(n,190.201,77);fillStyle=#555;fillText(e,202.987,77);fillStyle=#555;fillText( ,217.95,77);fillStyle=#555;fillText(m,226.84,77);fillStyle=#555;fillText(a,243.502,77);fillStyle=#555;fillText(n,256.288,77);fillStyle=#555;fillText( ,271.251,77);fillStyle=#555;fillText(i,280.141,77);fillStyle=#555;fillText(n,288.251,77);fillStyle=#555;fillText( ,303.214,77);fillStyle=#555;fillText(h,312.104,77);fillStyle=#555;fillText(i,324.89,77);fillStyle=#555;fillText(s,333,77);restore();save();save();beginPath();moveTo(0,98);lineTo(245,98);stroke();restore();fillStyle=#555;fillText(t,0,91);fillStyle=#555;fillText(i,8.89,91);fillStyle=#555;fillText(m,17,91);fillStyle=#555;fillText(e,33.662,91);fillStyle=#555;fillText( ,46.448,91);fillStyle=#555;fillText(p,55.338,91);fillStyle=#555;fillText(l,68.124,91);fillStyle=#555;fillText(a,76.234,91);fillStyle=#555;fillText(y,89.021,91);fillStyle=#555;fillText(s,101.021,91);fillStyle=#555;fillText( ,113.021,91);fillStyle=#555;fillText(m,121.91,91);fillStyle=#555;fillText(a,138.572,91);fillStyle=#555;fillText(n,151.358,91);fillStyle=#555;fillText(y,164.145,91);fillStyle=#555;fillText( ,176.145,91);fillStyle=#555;fillText(p,185.034,91);fillStyle=#555;fillText(a,197.82,91);fillStyle=#555;fillText(r,210.606,91);fillStyle=#555;fillText(t,220.269,91);fillStyle=#555;fillText(s,229.158,91);fillStyle=#555;fillText(.,241.158,91);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
// ======================================================
@ -895,6 +899,67 @@ describe('Text', function () {
assert.equal(layer.getContext().getTrace(true), trace);
});
it('text multi line with underline and strike and gradient', function () {
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
x: 10,
y: 10,
text: 'hello\nworld',
fontSize: 80,
// fill: 'red',
fillPriority: 'linear-gradient',
fillLinearGradientStartPoint: { x: 0, y: 0 },
fillLinearGradientEndPoint: { x: 100, y: 0 },
fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
fillAfterStrokeEnabled: true,
textDecoration: 'underline line-through',
});
layer.add(text);
stage.add(layer);
if (isNode) {
return;
}
var trace =
'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();save();beginPath();moveTo(0,80);lineTo(169,80);stroke();restore();save();beginPath();moveTo(0,40);lineTo(169,40);stroke();restore();fillStyle=[object CanvasGradient];fillText(hello,0,40);restore();save();save();beginPath();moveTo(0,160);lineTo(191,160);stroke();restore();save();beginPath();moveTo(0,120);lineTo(191,120);stroke();restore();fillStyle=[object CanvasGradient];fillText(world,0,120);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
it('text multi line with underline and strike and gradient vertical', function () {
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
x: 10,
y: 10,
text: 'hello\nworld',
fontSize: 80,
// fill: 'red',
fillPriority: 'linear-gradient',
fillLinearGradientStartPoint: { x: 0, y: 0 },
fillLinearGradientEndPoint: { x: 0, y: 160 },
fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
fillAfterStrokeEnabled: true,
textDecoration: 'underline line-through',
});
layer.add(text);
stage.add(layer);
if (isNode) {
return;
}
var trace =
'clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 80px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();save();beginPath();moveTo(0,80);lineTo(169,80);stroke();restore();save();beginPath();moveTo(0,40);lineTo(169,40);stroke();restore();fillStyle=[object CanvasGradient];fillText(hello,0,40);restore();save();save();beginPath();moveTo(0,160);lineTo(191,160);stroke();restore();save();beginPath();moveTo(0,120);lineTo(191,120);stroke();restore();fillStyle=[object CanvasGradient];fillText(world,0,120);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
// ======================================================
it('change font size should update text data', function () {
var stage = addStage();