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

Private method stage._setPointerPosition() is deprecated

Browse Source 
New method `stage.setPointersPositions(event)`
This commit is contained in:
Anton Lavrenov 2019-02-19 20:17:49 -05:00
parent ab4a14abce
commit 0ae1f66b60
10 changed files with 156 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -18,6 +18,7 @@ That changes are private and internal specific. They should not break most of `K
* `id` and `name` properties defaults are empty strings, not `undefined`
* internal `_cache` property was updated to use es2015 `Map` instead of `{}`.
* `text.getTextHeight()` is deprecated. Use `text.height()` or `text.fontSize()` instead.
* Private method `stage._setPointerPosition()` is deprecated. Use `stage.setPointersPositions(event)`;
### Added
* Show a warning when a stage has too many layers
@ -28,6 +29,8 @@ That changes are private and internal specific. They should not break most of `K
* Show a warning when user is trying to reuse destroyed shape.
* new publish method `measureSize(string)` for `Konva.Text`
* You can configure what mouse buttons can be used for drag&drop. To enable right button you can use `Konva.dragButtons = [0, 1]`.
* Now you can hide stage `stage.visible(false)`. It will set its container display style to "none".
* New method `stage.setPointersPositions(event)`. Usually you don't need to use it manually.
### Changed
* Full rewrite to Typescript with tons of refactoring and small optimizations. The public API should be 100% the same

79
konva.js
View File

@ -2313,7 +2313,7 @@
// it is possible that pos is undefined
// reattach it
if (!pos) {
node.getStage()._setPointerPosition(evt);
node.getStage().setPointersPositions(evt);
pos = node.getStage().getPointerPosition();
}
var dragDistance = node.dragDistance();
@ -2322,7 +2322,7 @@
return;
}
}
node.getStage()._setPointerPosition(evt);
node.getStage().setPointersPositions(evt);
if (!DD.isDragging) {
DD.isDragging = true;
node.fire('dragstart', {
@ -5536,6 +5536,7 @@
ctx[UNDERSCORE + eventName](evt);
}, false);
}
var NO_POINTERS_MESSAGE = "Pointer position is missing and not registered by the stage. Looks like it is outside of the stage container. You can set it manually from event: stage.setPointersPositions(event);";
var stages = [];
/**
* Stage constructor. A stage is used to contain multiple layers
@ -5578,7 +5579,9 @@
_this._buildDOM();
_this._bindContentEvents();
stages.push(_this);
_this.on('widthChange heightChange', _this._resizeDOM);
_this.on('widthChange.konva heightChange.konva', _this._resizeDOM);
_this.on('visibleChange.konva', _this._checkVisibility);
_this._checkVisibility();
return _this;
}
Stage.prototype._validateAdd = function (child) {
@ -5586,6 +5589,10 @@
Util.throw('You may only add layers to the stage.');
}
};
Stage.prototype._checkVisibility = function () {
var style = this.visible() ? '' : 'none';
this.content.style.display = style;
};
/**
* set container dom element which contains the stage wrapper div element
* @method
@ -5594,7 +5601,6 @@
*/
Stage.prototype.setContainer = function (container) {
if (typeof container === STRING) {
// TODO: use simple query selector
if (container.charAt(0) === '.') {
var className = container.slice(1);
container = document.getElementsByClassName(className)[0];
@ -5657,7 +5663,9 @@
* @returns {Object}
*/
Stage.prototype.getPointerPosition = function () {
// TODO: warn if it is undefined
if (!this.pointerPos) {
Util.warn(NO_POINTERS_MESSAGE);
}
return this.pointerPos;
};
Stage.prototype.getStage = function () {
@ -5772,12 +5780,12 @@
}
};
Stage.prototype._mouseover = function (evt) {
this._setPointerPosition(evt);
this.setPointersPositions(evt);
this._fire(CONTENT_MOUSEOVER, { evt: evt });
this._fire(MOUSEOVER, { evt: evt, target: this, currentTarget: this });
};
Stage.prototype._mouseout = function (evt) {
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var targetShape = this.targetShape;
if (targetShape && !getGlobalKonva().isDragging()) {
targetShape._fireAndBubble(MOUSEOUT, { evt: evt });
@ -5792,7 +5800,7 @@
if (UA.ieMobile) {
return this._touchmove(evt);
}
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var shape;
if (!getGlobalKonva().isDragging()) {
shape = this.getIntersection(this.getPointerPosition());
@ -5846,7 +5854,7 @@
if (UA.ieMobile) {
return this._touchstart(evt);
}
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition());
getGlobalKonva().listenClickTap = true;
if (shape && shape.isListening()) {
@ -5876,7 +5884,7 @@
if (UA.ieMobile) {
return this._touchend(evt);
}
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()), clickStartShape = this.clickStartShape, clickEndShape = this.clickEndShape, fireDblClick = false, dd = getGlobalKonva().DD;
if (getGlobalKonva().inDblClickWindow) {
fireDblClick = true;
@ -5936,7 +5944,7 @@
}
};
Stage.prototype._contextmenu = function (evt) {
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition());
if (shape && shape.isListening()) {
shape._fireAndBubble(CONTEXTMENU, { evt: evt });
@ -5951,7 +5959,7 @@
this._fire(CONTENT_CONTEXTMENU, { evt: evt });
};
Stage.prototype._touchstart = function (evt) {
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition());
getGlobalKonva().listenClickTap = true;
if (shape && shape.isListening()) {
@ -5973,7 +5981,7 @@
this._fire(CONTENT_TOUCHSTART, { evt: evt });
};
Stage.prototype._touchend = function (evt) {
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()), fireDblClick = false;
if (getGlobalKonva().inDblClickWindow) {
fireDblClick = true;
@ -6027,7 +6035,7 @@
getGlobalKonva().listenClickTap = false;
};
Stage.prototype._touchmove = function (evt) {
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var dd = getGlobalKonva().DD, shape;
if (!getGlobalKonva().isDragging()) {
shape = this.getIntersection(this.getPointerPosition());
@ -6056,7 +6064,7 @@
}
};
Stage.prototype._wheel = function (evt) {
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition());
if (shape && shape.isListening()) {
shape._fireAndBubble(WHEEL, { evt: evt });
@ -6070,7 +6078,21 @@
}
this._fire(CONTENT_WHEEL, { evt: evt });
};
Stage.prototype._setPointerPosition = function (evt) {
/**
* manually register pointers positions (mouse/touch) in the stage.
* So you can use stage.getPointerPosition(). Usually you don't need to use that method
* because all internal events are automatically registered. It may be useful if event
* is triggered outside of the stage, but you still want to use Konva methods to get pointers position.
* @method
* @name Konva.Stage#setPointersPositions
* @param {Object} event Event object
* @example
*
* window.addEventListener('mousemove', (e) => {
* stage.setPointersPositions(e);
* });
*/
Stage.prototype.setPointersPositions = function (evt) {
var contentPosition = this._getContentPosition(), x = null, y = null;
evt = evt ? evt : window.event;
// touch events
@ -6095,6 +6117,10 @@
};
}
};
Stage.prototype._setPointerPosition = function (evt) {
Util.warn('Method _setPointerPosition is deprecated. Use "stage.setPointersPositions(event)" instead.');
this.setPointersPositions(evt);
};
Stage.prototype._getContentPosition = function () {
var rect = this.content.getBoundingClientRect
? this.content.getBoundingClientRect()
@ -13822,7 +13848,7 @@
return _this;
}
/**
* alias to `setNode`
* alias to `tr.node(shape)`
* @method
* @name Konva.Transformer#attachTo
* @returns {Konva.Transformer}
@ -13851,23 +13877,7 @@
};
node.on(additionalEvents, upChange);
node.on(TRANSFORM_CHANGE_STR$1, upChange);
// node.on(
// additionalEvents,
// function() {
// if (!this._transforming) {
// this.update();
// }
// }.bind(this)
// );
// node.on(
// REDRAW_CHANGE_STR,
// function() {
// if (!this._transforming) {
// this.update();
// }
// }.bind(this)
// );
// we may need it if we set not in initial props
// we may need it if we set node in initial props
// so elements are not defined yet
var elementsCreated = !!this.findOne('.top-left');
if (elementsCreated) {
@ -13875,7 +13885,6 @@
}
return this;
};
// TODO: add docs, use overloaded setter/getter
Transformer.prototype.getNode = function () {
return this._node;
};

2
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
src/DragAndDrop.ts
View File

@ -29,7 +29,7 @@ export const DD = {
// it is possible that pos is undefined
// reattach it
if (!pos) {
node.getStage()._setPointerPosition(evt);
node.getStage().setPointersPositions(evt);
pos = node.getStage().getPointerPosition();
}
var dragDistance = node.dragDistance();
@ -42,7 +42,7 @@ export const DD = {
}
}
node.getStage()._setPointerPosition(evt);
node.getStage().setPointersPositions(evt);
if (!DD.isDragging) {
DD.isDragging = true;
node.fire(

60
src/Stage.ts
View File

@ -74,6 +74,8 @@ function addEvent(ctx, eventName) {
);
}
const NO_POINTERS_MESSAGE = `Pointer position is missing and not registered by the stage. Looks like it is outside of the stage container. You can set it manually from event: stage.setPointersPositions(event);`;
export const stages: Stage[] = [];
/**
@ -110,7 +112,9 @@ export class Stage extends Container {
this._buildDOM();
this._bindContentEvents();
stages.push(this);
this.on('widthChange heightChange', this._resizeDOM);
this.on('widthChange.konva heightChange.konva', this._resizeDOM);
this.on('visibleChange.konva', this._checkVisibility);
this._checkVisibility();
}
_validateAdd(child) {
@ -118,6 +122,11 @@ export class Stage extends Container {
Util.throw('You may only add layers to the stage.');
}
}
_checkVisibility() {
const style = this.visible() ? '' : 'none';
this.content.style.display = style;
}
/**
* set container dom element which contains the stage wrapper div element
* @method
@ -126,7 +135,6 @@ export class Stage extends Container {
*/
setContainer(container) {
if (typeof container === STRING) {
// TODO: use simple query selector
if (container.charAt(0) === '.') {
var className = container.slice(1);
container = document.getElementsByClassName(className)[0];
@ -193,7 +201,9 @@ export class Stage extends Container {
* @returns {Object}
*/
getPointerPosition() {
// TODO: warn if it is undefined
if (!this.pointerPos) {
Util.warn(NO_POINTERS_MESSAGE);
}
return this.pointerPos;
}
getStage() {
@ -342,12 +352,12 @@ export class Stage extends Container {
}
}
_mouseover(evt) {
this._setPointerPosition(evt);
this.setPointersPositions(evt);
this._fire(CONTENT_MOUSEOVER, { evt: evt });
this._fire(MOUSEOVER, { evt: evt, target: this, currentTarget: this });
}
_mouseout(evt) {
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var targetShape = this.targetShape;
if (targetShape && !getGlobalKonva().isDragging()) {
@ -364,7 +374,7 @@ export class Stage extends Container {
if (UA.ieMobile) {
return this._touchmove(evt);
}
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var shape;
if (!getGlobalKonva().isDragging()) {
@ -419,7 +429,7 @@ export class Stage extends Container {
if (UA.ieMobile) {
return this._touchstart(evt);
}
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition());
getGlobalKonva().listenClickTap = true;
@ -452,7 +462,7 @@ export class Stage extends Container {
if (UA.ieMobile) {
return this._touchend(evt);
}
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()),
clickStartShape = this.clickStartShape,
clickEndShape = this.clickEndShape,
@ -523,7 +533,7 @@ export class Stage extends Container {
}
}
_contextmenu(evt) {
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition());
if (shape && shape.isListening()) {
@ -538,7 +548,7 @@ export class Stage extends Container {
this._fire(CONTENT_CONTEXTMENU, { evt: evt });
}
_touchstart(evt) {
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition());
getGlobalKonva().listenClickTap = true;
@ -562,7 +572,7 @@ export class Stage extends Container {
this._fire(CONTENT_TOUCHSTART, { evt: evt });
}
_touchend(evt) {
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition()),
fireDblClick = false;
@ -623,7 +633,7 @@ export class Stage extends Container {
getGlobalKonva().listenClickTap = false;
}
_touchmove(evt) {
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var dd = getGlobalKonva().DD,
shape;
if (!getGlobalKonva().isDragging()) {
@ -654,7 +664,7 @@ export class Stage extends Container {
}
}
_wheel(evt) {
this._setPointerPosition(evt);
this.setPointersPositions(evt);
var shape = this.getIntersection(this.getPointerPosition());
if (shape && shape.isListening()) {
@ -668,7 +678,21 @@ export class Stage extends Container {
}
this._fire(CONTENT_WHEEL, { evt: evt });
}
_setPointerPosition(evt) {
/**
* manually register pointers positions (mouse/touch) in the stage.
* So you can use stage.getPointerPosition(). Usually you don't need to use that method
* because all internal events are automatically registered. It may be useful if event
* is triggered outside of the stage, but you still want to use Konva methods to get pointers position.
* @method
* @name Konva.Stage#setPointersPositions
* @param {Object} event Event object
* @example
*
* window.addEventListener('mousemove', (e) => {
* stage.setPointersPositions(e);
* });
*/
setPointersPositions(evt) {
var contentPosition = this._getContentPosition(),
x = null,
y = null;
@ -695,6 +719,12 @@ export class Stage extends Container {
};
}
}
_setPointerPosition(evt) {
Util.warn(
'Method _setPointerPosition is deprecated. Use "stage.setPointersPositions(event)" instead.'
);
this.setPointersPositions(evt);
}
_getContentPosition() {
var rect = this.content.getBoundingClientRect
? this.content.getBoundingClientRect()
@ -787,5 +817,3 @@ Stage.prototype.nodeType = STAGE;
* stage.container(container);
*/
Factory.addGetterSetter(Stage, 'container');

3
src/shapes/TextPath.ts
View File

@ -528,8 +528,7 @@ export class TextPath extends Shape {
text: GetSet<string, this>;
data: GetSet<string, this>;
// TODO: add better types
kerningFunc: GetSet<Function, this>;
kerningFunc: GetSet<(leftChar: string, rightChar: string) => number, this>;
textBaseline: GetSet<string, this>;
textDecoration: GetSet<string, this>;
}

25
src/shapes/Transformer.ts
View File

@ -173,7 +173,7 @@ export class Transformer extends Group {
}
}
/**
* alias to `setNode`
* alias to `tr.node(shape)`
* @method
* @name Konva.Transformer#attachTo
* @returns {Konva.Transformer}
@ -204,33 +204,14 @@ export class Transformer extends Group {
node.on(additionalEvents, upChange);
node.on(TRANSFORM_CHANGE_STR, upChange);
// node.on(
// additionalEvents,
// function() {
// if (!this._transforming) {
// this.update();
// }
// }.bind(this)
// );
// node.on(
// REDRAW_CHANGE_STR,
// function() {
// if (!this._transforming) {
// this.update();
// }
// }.bind(this)
// );
// we may need it if we set not in initial props
// we may need it if we set node in initial props
// so elements are not defined yet
var elementsCreated = !!this.findOne('.top-left');
if (elementsCreated) {
this.update();
}
return this;
return this;
}
// TODO: add docs, use overloaded setter/getter
getNode() {
return this._node;
}

13
test/runner.js
View File

@ -87,13 +87,18 @@ function addStats() {
animate();
}
function addStage() {
var container = document.createElement('div'),
stage = new Konva.Stage({
function addStage(attrs) {
var container = document.createElement('div');
const props = Object.assign(
{
container: container,
width: 578,
height: 200
});
},
attrs
);
var stage = new Konva.Stage(props);
konvaContainer.appendChild(container);
return stage;

16
test/unit/Node-test.js
View File

@ -3104,7 +3104,9 @@ suite('Node', function() {
// ======================================================
test('hide stage', function() {
var stage = addStage();
var stage = addStage({
visible: false
});
var layer = new Konva.Layer();
var group = new Konva.Group();
@ -3121,15 +3123,25 @@ suite('Node', function() {
scale: {
x: 2,
y: 1
}
},
visible: false
});
group.add(rect);
layer.add(group);
stage.add(layer);
assert.equal(stage.content.style.display, 'none');
stage.show();
stage.draw();
assert.equal(stage.content.style.display, '');
stage.hide();
stage.draw();
assert.equal(stage.content.style.display, 'none');
// TODO: stage hide() fails. also need to find a good way to test this
});

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

@ -35,6 +35,41 @@ suite('Transformer', function() {
assert.equal(pos.y, rect.y() + rect.height());
});
test('try set/get 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 circle = new Konva.Rect({
x: 10,
y: 60,
radius: 100,
fill: 'yellow'
});
layer.add(circle);
var tr = new Konva.Transformer({
node: rect
});
layer.add(tr);
layer.draw();
assert.equal(tr.node(), rect);
tr.attachTo(circle);
assert.equal(tr.node(), circle);
});
test('try to fit simple rectangle', function() {
var stage = addStage();
var layer = new Konva.Layer();