From 29be243bd27c8e106c7be07fdb749ffa40335e3a Mon Sep 17 00:00:00 2001
From: Roman Bruckner <roman@jointjs.com>
Date: Mon, 2 Dec 2024 17:20:40 +0100
Subject: [PATCH] fix(dia.ToolsView): make sure tools are rendered before the
 first update (#2815)

---
 packages/joint-core/src/dia/ToolsView.mjs     | 33 ++++++++++++-------
 .../joint-core/test/jointjs/dia/linkTools.js  | 15 +++++++++
 2 files changed, 37 insertions(+), 11 deletions(-)

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() {