lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix correct rendering of Konva.Label when heigh of text is changed

Browse Source
This commit is contained in:
Anton Lavrenov
2020-11-25 10:19:40 -05:00
parent e90442ab1c
commit ceae701fd8
5 changed files with 57 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/shapes/Label.ts
View File

@@ -3,7 +3,10 @@ import { Factory } from '../Factory';
import { Shape, ShapeConfig } from '../Shape';
import { Group } from '../Group';
import { ContainerConfig } from '../Container';
import {getNumberOrArrayOfNumbersValidator, getNumberValidator} from '../Validators';
import {
getNumberOrArrayOfNumbersValidator,
getNumberValidator,
} from '../Validators';
import { _registerNode } from '../Global';
import { GetSet } from '../types';
@@ -18,7 +21,8 @@ var ATTR_CHANGE_LIST = [
'padding',
'lineHeight',
'text',
'width'
'width',
'height',
],
CHANGE_KONVA = 'Change.konva',
NONE = 'none',
@@ -70,7 +74,7 @@ var ATTR_CHANGE_LIST = [
export class Label extends Group {
constructor(config) {
super(config);
this.on('add.konva', function(evt) {
this.on('add.konva', function (evt) {
this._addListeners(evt.child);
this._sync();
});
@@ -99,7 +103,7 @@ export class Label extends Group {
_addListeners(text) {
var that = this,
n;
var func = function() {
var func = function () {
that._sync();
};
@@ -157,12 +161,12 @@ export class Label extends Group {
x: -1 * x,
y: -1 * y,
width: width,
height: height
height: height,
});
text.setAttrs({
x: -1 * x,
y: -1 * y
y: -1 * y,
});
}
}
@@ -195,11 +199,11 @@ export interface TagConfig extends ShapeConfig {
export class Tag extends Shape<TagConfig> {
_sceneFunc(context) {
var width = this.width(),
height = this.height(),
pointerDirection = this.pointerDirection(),
pointerWidth = this.pointerWidth(),
pointerHeight = this.pointerHeight(),
cornerRadius = this.cornerRadius();
height = this.height(),
pointerDirection = this.pointerDirection(),
pointerWidth = this.pointerWidth(),
pointerHeight = this.pointerHeight(),
cornerRadius = this.cornerRadius();
let topLeft = 0;
let topRight = 0;
@@ -208,9 +212,9 @@ export class Tag extends Shape<TagConfig> {
if (typeof cornerRadius === 'number') {
topLeft = topRight = bottomLeft = bottomRight = Math.min(
cornerRadius,
width / 2,
height / 2
cornerRadius,
width / 2,
height / 2
);
} else {
topLeft = Math.min(cornerRadius[0] || 0, width / 2, height / 2);
@@ -230,12 +234,12 @@ export class Tag extends Shape<TagConfig> {
context.lineTo(width - topRight, 0);
context.arc(
width - topRight,
topRight,
topRight,
(Math.PI * 3) / 2,
0,
false
width - topRight,
topRight,
topRight,
(Math.PI * 3) / 2,
0,
false
);
if (pointerDirection === RIGHT) {
@@ -246,12 +250,12 @@ export class Tag extends Shape<TagConfig> {
context.lineTo(width, height - bottomRight);
context.arc(
width - bottomRight,
height - bottomRight,
bottomRight,
0,
Math.PI / 2,
false
width - bottomRight,
height - bottomRight,
bottomRight,
0,
Math.PI / 2,
false
);
if (pointerDirection === DOWN) {
@@ -262,12 +266,12 @@ export class Tag extends Shape<TagConfig> {
context.lineTo(bottomLeft, height);
context.arc(
bottomLeft,
height - bottomLeft,
bottomLeft,
Math.PI / 2,
Math.PI,
false
bottomLeft,
height - bottomLeft,
bottomLeft,
Math.PI / 2,
Math.PI,
false
);
if (pointerDirection === LEFT) {
@@ -277,13 +281,7 @@ export class Tag extends Shape<TagConfig> {
}
context.lineTo(0, topLeft);
context.arc(
topLeft,
topLeft,
topLeft,
Math.PI,
(Math.PI * 3) / 2,
false);
context.arc(topLeft, topLeft, topLeft, Math.PI, (Math.PI * 3) / 2, false);
context.closePath();
context.fillStrokeShape(this);
@@ -313,7 +311,7 @@ export class Tag extends Shape<TagConfig> {
x: x,
y: y,
width: width,
height: height
height: height,
};
}
@@ -374,6 +372,11 @@ Factory.addGetterSetter(Tag, 'pointerHeight', 0, getNumberValidator());
* tag.cornerRadius([0, 10, 20, 30]);
*/
Factory.addGetterSetter(Tag, 'cornerRadius', 0, getNumberOrArrayOfNumbersValidator(4));
Factory.addGetterSetter(
Tag,
'cornerRadius',
0,
getNumberOrArrayOfNumbersValidator(4)
);
Collection.mapMethods(Tag);