Add method to toggle visibility of Node.

This commit is contained in:
Viktor Persson 2022-11-25 15:10:53 +01:00
parent 763a7be0f9
commit 5362c97cb6
2 changed files with 27 additions and 0 deletions

View File

@ -1043,6 +1043,15 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
this.visible(false); this.visible(false);
return this; return this;
} }
/**
* toggle visibility of node.
* @method
* @name Konva.Node#toggleVisibility
* @returns {Konva.Node}
*/
toggleVisibility() {
return this.isVisible() ? this.hide() : this.show();
}
getZIndex() { getZIndex() {
return this.index || 0; return this.index || 0;
} }

View File

@ -943,6 +943,14 @@ describe('Node', function () {
layer2.show(); layer2.show();
assert.equal(layer2.isVisible(), true); assert.equal(layer2.isVisible(), true);
assert.equal(layer2.canvas._canvas.style.display, 'block'); assert.equal(layer2.canvas._canvas.style.display, 'block');
layer2.toggleVisibility();
assert.equal(layer2.isVisible(), false);
assert.equal(layer2.canvas._canvas.style.display, 'none');
layer2.toggleVisibility();
assert.equal(layer2.isVisible(), true);
assert.equal(layer2.canvas._canvas.style.display, 'block');
}); });
// ====================================================== // ======================================================
@ -2271,6 +2279,16 @@ describe('Node', function () {
layer.draw(); layer.draw();
assert.equal(circle.isVisible(), true); assert.equal(circle.isVisible(), true);
circle.toggleVisibility();
layer.draw();
assert.equal(circle.isVisible(), false);
circle.toggleVisibility();
layer.draw();
assert.equal(circle.isVisible(), true);
}); });
// ====================================================== // ======================================================