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

update CHANGELOG with new version

Browse Source
This commit is contained in:
Anton Lavrenov 2021-11-15 08:27:41 -05:00
parent cbe2e2f2ef
commit 4dfdd6eeaf
5 changed files with 76 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -3,7 +3,9 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).
###
## 8.2.4 (2021-12-15)
- Fix not working `Konva.Transformer` when several transformers were used
## 8.2.2

26
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v8.2.3
* http://konvajs.org/
* Licensed under the MIT
* Date: Fri Oct 22 2021
* Date: Mon Nov 15 2021
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -14463,9 +14463,7 @@
'offsetYChange',
'transformsEnabledChange',
'strokeWidthChange',
]
.map((e) => e + `.${EVENTS_NAME}`)
.join(' ');
];
var ANGLES = {
'top-left': -45,
'top-center': 0,
@ -14641,6 +14639,9 @@
getNode() {
return this._nodes && this._nodes[0];
}
_getEventNamespace() {
return EVENTS_NAME + this._id;
}
setNodes(nodes = []) {
if (this._nodes && this._nodes.length) {
this.detach();
@ -14653,9 +14654,6 @@
this.rotation(0);
}
this._nodes.forEach((node) => {
const additionalEvents = node._attrsAffectingSize
.map((prop) => prop + 'Change.' + EVENTS_NAME)
.join(' ');
const onChange = () => {
if (this.nodes().length === 1 && this.useSingleNodeRotation()) {
this.rotation(this.nodes()[0].getAbsoluteRotation());
@ -14665,10 +14663,12 @@
this.update();
}
};
const additionalEvents = node._attrsAffectingSize
.map((prop) => prop + 'Change.' + this._getEventNamespace())
.join(' ');
node.on(additionalEvents, onChange);
node.on(TRANSFORM_CHANGE_STR, onChange);
node.on(`absoluteTransformChange.${EVENTS_NAME}`, onChange);
node.on(`xChange.${EVENTS_NAME} yChange.${EVENTS_NAME}`, onChange);
node.on(TRANSFORM_CHANGE_STR.map((e) => e + `.${this._getEventNamespace()}`).join(' '), onChange);
node.on(`absoluteTransformChange.${this._getEventNamespace()}`, onChange);
this._proxyDrag(node);
});
this._resetTransformCache();
@ -14682,7 +14682,7 @@
}
_proxyDrag(node) {
let lastPos;
node.on(`dragstart.${EVENTS_NAME}`, (e) => {
node.on(`dragstart.${this._getEventNamespace()}`, (e) => {
lastPos = node.getAbsolutePosition();
// actual dragging of Transformer doesn't make sense
// but we need to make sure it also has all drag events
@ -14690,7 +14690,7 @@
this.startDrag(e, false);
}
});
node.on(`dragmove.${EVENTS_NAME}`, (e) => {
node.on(`dragmove.${this._getEventNamespace()}`, (e) => {
if (!lastPos) {
return;
}
@ -14740,7 +14740,7 @@
// remove events
if (this._nodes) {
this._nodes.forEach((node) => {
node.off('.' + EVENTS_NAME);
node.off('.' + this._getEventNamespace());
});
}
this._nodes = [];

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

33
src/shapes/Transformer.ts
View File

@ -76,9 +76,7 @@ var TRANSFORM_CHANGE_STR = [
'offsetYChange',
'transformsEnabledChange',
'strokeWidthChange',
]
.map((e) => e + `.${EVENTS_NAME}`)
.join(' ');
];
var ANGLES = {
'top-left': -45,
@ -282,6 +280,10 @@ export class Transformer extends Group {
return this._nodes && this._nodes[0];
}
_getEventNamespace() {
return EVENTS_NAME + this._id;
}
setNodes(nodes: Array<Node> = []) {
if (this._nodes && this._nodes.length) {
this.detach();
@ -293,10 +295,6 @@ export class Transformer extends Group {
this.rotation(0);
}
this._nodes.forEach((node) => {
const additionalEvents = node._attrsAffectingSize
.map((prop) => prop + 'Change.' + EVENTS_NAME)
.join(' ');
const onChange = () => {
if (this.nodes().length === 1 && this.useSingleNodeRotation()) {
this.rotation(this.nodes()[0].getAbsoluteRotation());
@ -307,10 +305,17 @@ export class Transformer extends Group {
this.update();
}
};
const additionalEvents = node._attrsAffectingSize
.map((prop) => prop + 'Change.' + this._getEventNamespace())
.join(' ');
node.on(additionalEvents, onChange);
node.on(TRANSFORM_CHANGE_STR, onChange);
node.on(`absoluteTransformChange.${EVENTS_NAME}`, onChange);
node.on(`xChange.${EVENTS_NAME} yChange.${EVENTS_NAME}`, onChange);
node.on(
TRANSFORM_CHANGE_STR.map(
(e) => e + `.${this._getEventNamespace()}`
).join(' '),
onChange
);
node.on(`absoluteTransformChange.${this._getEventNamespace()}`, onChange);
this._proxyDrag(node);
});
this._resetTransformCache();
@ -325,7 +330,7 @@ export class Transformer extends Group {
_proxyDrag(node: Node) {
let lastPos;
node.on(`dragstart.${EVENTS_NAME}`, (e) => {
node.on(`dragstart.${this._getEventNamespace()}`, (e) => {
lastPos = node.getAbsolutePosition();
// actual dragging of Transformer doesn't make sense
// but we need to make sure it also has all drag events
@ -333,7 +338,7 @@ export class Transformer extends Group {
this.startDrag(e, false);
}
});
node.on(`dragmove.${EVENTS_NAME}`, (e) => {
node.on(`dragmove.${this._getEventNamespace()}`, (e) => {
if (!lastPos) {
return;
}
@ -384,7 +389,7 @@ export class Transformer extends Group {
// remove events
if (this._nodes) {
this._nodes.forEach((node) => {
node.off('.' + EVENTS_NAME);
node.off('.' + this._getEventNamespace());
});
}
this._nodes = [];
@ -1667,7 +1672,7 @@ Factory.addGetterSetter(Transformer, 'shouldOverdrawWholeArea', false);
* transformer.rotation(45);
* transformer.update();
*/
Factory.addGetterSetter(Transformer, 'useSingleNodeRotation', true);
Factory.addGetterSetter(Transformer, 'useSingleNodeRotation', true);
Factory.backCompat(Transformer, {
lineEnabled: 'borderEnabled',

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

@ -4636,7 +4636,7 @@ describe('Transformer', function () {
width: 100,
height: 100,
fill: 'yellow',
rotation: 45
rotation: 45,
});
layer.add(rect);
@ -4651,4 +4651,42 @@ describe('Transformer', function () {
assert.equal(tr.rotation(), 0);
});
it('use several transformers on a single node', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var rect = new Konva.Rect({
x: 100,
y: 60,
draggable: true,
width: 100,
height: 100,
fill: 'yellow',
});
layer.add(rect);
var tr1 = new Konva.Transformer({
nodes: [rect],
});
layer.add(tr1);
var tr2 = new Konva.Transformer({
nodes: [rect],
});
layer.add(tr2);
// detach tr1
tr1.nodes([]);
// update rect
rect.setAttrs({ x: 0, y: 0, width: 50, height: 50 });
// it should update second transformer
assert.equal(tr2.x(), rect.x());
assert.equal(tr2.y(), rect.y());
assert.equal(tr2.width(), rect.width());
assert.equal(tr2.height(), rect.height());
});
});