diff --git a/packages/joint-core/src/dia/ToolsView.mjs b/packages/joint-core/src/dia/ToolsView.mjs index 180f0889e..fcce15b1d 100644 --- a/packages/joint-core/src/dia/ToolsView.mjs +++ b/packages/joint-core/src/dia/ToolsView.mjs @@ -52,15 +52,7 @@ export const ToolsView = mvc.View.extend({ const tool = tools[i]; tool.updateVisibility(); if (!tool.isVisible()) continue; - if (!this.isRendered) { - // There is at least one visible tool - this.isRendered = Array(n).fill(false); - } - if (!this.isRendered[i]) { - // First update executes render() - tool.render(); - this.isRendered[i] = true; - } else if (opt.tool !== tool.cid) { + if (this.ensureToolRendered(tools, i) && opt.tool !== tool.cid) { tool.update(); } } @@ -79,6 +71,20 @@ export const ToolsView = mvc.View.extend({ return this; }, + ensureToolRendered(tools, i) { + if (!this.isRendered) { + // There is at least one visible tool + this.isRendered = Array(tools.length).fill(false); + } + if (!this.isRendered[i]) { + // First update executes render() + tools[i].render(); + this.isRendered[i] = true; + return false; + } + return true; + }, + focusTool: function(focusedTool) { var tools = this.tools; @@ -103,7 +109,7 @@ export const ToolsView = mvc.View.extend({ tool.show(); // Check if the tool is conditionally visible too if (tool.isVisible()) { - tool.update(); + this.ensureToolRendered(tools, i) && tool.update(); } } } @@ -115,7 +121,12 @@ export const ToolsView = mvc.View.extend({ }, show: function() { - return this.blurTool(null); + this.blurTool(null); + // If this the first time the tools are shown, make sure they are mounted + if (!this.isMounted()) { + this.mount(); + } + return this; }, onRemove: function() { diff --git a/packages/joint-core/test/jointjs/dia/linkTools.js b/packages/joint-core/test/jointjs/dia/linkTools.js index 495469cc1..8b647a516 100644 --- a/packages/joint-core/test/jointjs/dia/linkTools.js +++ b/packages/joint-core/test/jointjs/dia/linkTools.js @@ -196,6 +196,21 @@ QUnit.module('linkTools', function(hooks) { button2UpdateSpy.restore(); }); }); + + + QUnit.test('show()', function(assert) { + paper.freeze(); + const remove = new joint.linkTools.Vertices(); + const toolsView = new joint.dia.ToolsView({ tools: [remove] }); + linkView.addTools(toolsView); + linkView.hideTools(); + paper.unfreeze(); + assert.notOk(toolsView.isRendered); + assert.notOk(toolsView.el.isConnected); + linkView.showTools(); + assert.ok(toolsView.isRendered); + assert.ok(toolsView.el.isConnected); + }); }); QUnit.module('RotateLabel', function() {