From c3d44215921aa16c927a044314ae1c97a33fc426 Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Wed, 9 Oct 2024 16:49:27 +0100 Subject: [PATCH 001/160] Add option to use pfx or p12 for TLS connections --- package.json | 2 +- .../@node-red/nodes/core/network/05-tls.html | 72 +++++++++++++++++-- .../@node-red/nodes/core/network/05-tls.js | 46 +++++++++--- .../nodes/locales/en-US/messages.json | 10 ++- 4 files changed, 110 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 6015c0c9e8..e948f8cd9b 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,7 @@ "@node-rs/bcrypt": "1.10.4" }, "devDependencies": { - "dompurify": "2.4.1", + "dompurify": "3.1.7", "grunt": "1.6.1", "grunt-chmod": "~1.1.1", "grunt-cli": "~1.4.3", diff --git a/packages/node_modules/@node-red/nodes/core/network/05-tls.html b/packages/node_modules/@node-red/nodes/core/network/05-tls.html index 8414e98cae..1dda38842c 100644 --- a/packages/node_modules/@node-red/nodes/core/network/05-tls.html +++ b/packages/node_modules/@node-red/nodes/core/network/05-tls.html @@ -20,6 +20,13 @@
+ + +
+
@@ -31,7 +38,7 @@
-
+
@@ -43,11 +50,23 @@
+
+ + + + + + + + + + +
- +
-
+
@@ -83,6 +102,7 @@ category: 'config', defaults: { name: {value:""}, + certType: {value:"files"}, cert: {value:"", validate: function(v,opt) { var currentKey = $("#node-config-input-key").val(); if (currentKey === undefined) { @@ -103,6 +123,8 @@ } return RED._("node-red:tls.error.invalid-key"); }}, + p12: {value:""}, + p12name: {value:""}, ca: {value:""}, certname: {value:""}, keyname: {value:""}, @@ -115,6 +137,7 @@ certdata: {type:"text"}, keydata: {type:"text"}, cadata: {type:"text"}, + p12data: {type:"text"}, passphrase: {type:"password"} }, label: function() { @@ -124,6 +147,21 @@ return this.name?"node_label_italic":""; }, oneditprepare: function() { + $("#node-config-input-certType").on('change',function() { + if ($("#node-config-input-certType").val() === "pfx") { + $("#node-tls-conf-cer").hide(); + $("#node-tls-conf-key").hide(); + $("#node-tls-conf-ca").hide(); + $("#node-tls-conf-p12").show(); + } + else { + $("#node-tls-conf-cer").show(); + $("#node-tls-conf-key").show(); + $("#node-tls-conf-ca").show(); + $("#node-tls-conf-p12").hide(); + } + }); + function updateFileUpload() { if ($("#node-config-input-uselocalfiles").is(':checked')) { $(".tls-config-input-path").show(); @@ -145,9 +183,19 @@ reader.onload = function(event) { $("#tls-config-"+property+"name").text(filename); $(filenameInputId).val(filename); - $(dataInputId).val(event.target.result); + if (property === "p12") { + $(dataInputId).val(btoa(String.fromCharCode(...new Uint8Array(event.target.result)))) + } + else { + $(dataInputId).val(event.target.result); + } + } + if (property === "p12") { + reader.readAsArrayBuffer(file); + } + else { + reader.readAsText(file,"UTF-8"); } - reader.readAsText(file,"UTF-8"); } $("#node-config-input-certfile" ).on("change", function() { saveFile("cert", this.files[0]); @@ -158,6 +206,9 @@ $("#node-config-input-cafile" ).on("change", function() { saveFile("ca", this.files[0]); }); + $("#node-config-input-p12file" ).on("change", function() { + saveFile("p12", this.files[0]); + }); function clearNameData(prop) { $("#tls-config-"+prop+"name").text(""); @@ -173,6 +224,9 @@ $("#tls-config-button-ca-clear").on("click", function() { clearNameData("ca"); }); + $("#tls-config-button-p12-clear").on("click", function() { + clearNameData("p12"); + }); if (RED.settings.tlsConfigDisableLocalFiles) { $("#node-config-row-uselocalfiles").hide(); @@ -180,12 +234,13 @@ $("#node-config-row-uselocalfiles").show(); } // in case paths were set from old TLS config - if(this.cert || this.key || this.ca) { + if (this.cert || this.key || this.ca || this.p12) { $("#node-config-input-uselocalfiles").prop('checked',true); } $("#tls-config-certname").text(this.certname); $("#tls-config-keyname").text(this.keyname); $("#tls-config-caname").text(this.caname); + $("#tls-config-p12name").text(this.p12name); updateFileUpload(); }, oneditsave: function() { @@ -193,10 +248,13 @@ clearNameData("ca"); clearNameData("cert"); clearNameData("key"); - } else { + clearNameData("p12"); + } + else { $("#node-config-input-ca").val(""); $("#node-config-input-cert").val(""); $("#node-config-input-key").val(""); + $("#node-config-input-p12").val(""); } } }); diff --git a/packages/node_modules/@node-red/nodes/core/network/05-tls.js b/packages/node_modules/@node-red/nodes/core/network/05-tls.js index 888d749fd8..c1b2c2105c 100644 --- a/packages/node_modules/@node-red/nodes/core/network/05-tls.js +++ b/packages/node_modules/@node-red/nodes/core/network/05-tls.js @@ -25,6 +25,8 @@ module.exports = function(RED) { var certPath = n.cert.trim(); var keyPath = n.key.trim(); var caPath = n.ca.trim(); + var p12Path = n.p12.trim(); + this.certType = n.certType || "files"; this.servername = (n.servername||"").trim(); this.alpnprotocol = (n.alpnprotocol||"").trim(); @@ -46,18 +48,31 @@ module.exports = function(RED) { if (caPath) { this.ca = fs.readFileSync(caPath); } - } catch(err) { + } + catch(err) { + this.valid = false; + this.error(err.toString()); + return; + } + } + else if (p12Path.length > 0) { + try { + this.pfx = fs.readFileSync(p12Path); + } + catch(err) { this.valid = false; this.error(err.toString()); return; } - } else { + } + else { if (this.credentials) { var certData = this.credentials.certdata || ""; var keyData = this.credentials.keydata || ""; var caData = this.credentials.cadata || ""; + var p12Data = this.credentials.p12data || ""; - if ((certData.length > 0) !== (keyData.length > 0)) { + if ((certData.length > 0) !== (keyData.length > 0) && p12Data.length === 0) { this.valid = false; this.error(RED._("tls.error.missing-file")); return; @@ -72,6 +87,9 @@ module.exports = function(RED) { if (caData) { this.ca = caData; } + if (p12Data) { + this.pfx = Buffer.from(p12Data, 'base64'); + } } } } @@ -80,6 +98,7 @@ module.exports = function(RED) { certdata: {type:"text"}, keydata: {type:"text"}, cadata: {type:"text"}, + p12data: {type:"text"}, passphrase: {type:"password"} }, settings: { @@ -92,14 +111,21 @@ module.exports = function(RED) { TLSConfig.prototype.addTLSOptions = function(opts) { if (this.valid) { - if (this.key) { - opts.key = this.key; - } - if (this.cert) { - opts.cert = this.cert; + if (this.certType === "files") { + if (this.key) { + opts.key = this.key; + } + if (this.cert) { + opts.cert = this.cert; + } + if (this.ca) { + opts.ca = this.ca; + } } - if (this.ca) { - opts.ca = this.ca; + else { + if (this.pfx) { + opts.pfx = this.pfx; + } } if (this.credentials && this.credentials.passphrase) { opts.passphrase = this.credentials.passphrase; diff --git a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json index bc89992e2f..ae6d760726 100644 --- a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json +++ b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json @@ -204,19 +204,25 @@ "ca": "CA Certificate", "verify-server-cert": "Verify server certificate", "servername": "Server Name", - "alpnprotocol": "ALPN Protocol" + "alpnprotocol": "ALPN Protocol", + "certtype": "Cert Type", + "files": "Individual files", + "p12": "pfx or p12", + "pfx": "pfx or p12 file" }, "placeholder": { "cert": "path to certificate (PEM format)", "key": "path to private key (PEM format)", + "p12": "path to .pfx or .p12 (PKCS12 format)", "ca": "path to CA certificate (PEM format)", - "passphrase": "private key passphrase (optional)", + "passphrase": "password or passphrase (optional)", "servername": "for use with SNI", "alpnprotocol": "for use with ALPN" }, "error": { "missing-file": "No certificate/key file provided", "invalid-cert": "Certificate not specified", + "invalid-p12": "pfx/p12 not specified", "invalid-key": "Private key not specified" } }, From 214fbc0e47cc9688d691a7dcdd3a9e621b4567a0 Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Wed, 9 Oct 2024 16:56:24 +0100 Subject: [PATCH 002/160] revert dompurify to match dev branch --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e948f8cd9b..6015c0c9e8 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,7 @@ "@node-rs/bcrypt": "1.10.4" }, "devDependencies": { - "dompurify": "3.1.7", + "dompurify": "2.4.1", "grunt": "1.6.1", "grunt-chmod": "~1.1.1", "grunt-cli": "~1.4.3", From 71440be009b11a787f510743f6a5036cb682af7b Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Wed, 9 Oct 2024 17:46:07 +0100 Subject: [PATCH 003/160] Fixup tls config for tests --- .../@node-red/nodes/core/network/05-tls.js | 13 +++++++------ test/resources/50-file-test-file.txt | 2 ++ .../lib/nodes/.testUserHome/.config.runtime.json | 4 ++++ 3 files changed, 13 insertions(+), 6 deletions(-) create mode 100644 test/resources/50-file-test-file.txt create mode 100644 test/unit/@node-red/runtime/lib/nodes/.testUserHome/.config.runtime.json diff --git a/packages/node_modules/@node-red/nodes/core/network/05-tls.js b/packages/node_modules/@node-red/nodes/core/network/05-tls.js index c1b2c2105c..5a3147af66 100644 --- a/packages/node_modules/@node-red/nodes/core/network/05-tls.js +++ b/packages/node_modules/@node-red/nodes/core/network/05-tls.js @@ -22,15 +22,16 @@ module.exports = function(RED) { RED.nodes.createNode(this,n); this.valid = true; this.verifyservercert = n.verifyservercert; - var certPath = n.cert.trim(); - var keyPath = n.key.trim(); - var caPath = n.ca.trim(); - var p12Path = n.p12.trim(); + var certPath, keyPath, caPath, p12Path; + if (n.cert) { certPath = n.cert.trim(); } + if (n.key) { keyPath = n.key.trim(); } + if (n.ca) { caPath = n.ca.trim(); } + if (n.p12) { p12Path = n.p12.trim(); } this.certType = n.certType || "files"; this.servername = (n.servername||"").trim(); this.alpnprotocol = (n.alpnprotocol||"").trim(); - if ((certPath.length > 0) || (keyPath.length > 0) || (caPath.length > 0)) { + if ((certPath && certPath.length > 0) || (keyPath && keyPath.length > 0) || (caPath && caPath.length > 0)) { if ( (certPath.length > 0) !== (keyPath.length > 0)) { this.valid = false; @@ -55,7 +56,7 @@ module.exports = function(RED) { return; } } - else if (p12Path.length > 0) { + else if (p12Path && p12Path.length > 0) { try { this.pfx = fs.readFileSync(p12Path); } diff --git a/test/resources/50-file-test-file.txt b/test/resources/50-file-test-file.txt new file mode 100644 index 0000000000..0491f12fe2 --- /dev/null +++ b/test/resources/50-file-test-file.txt @@ -0,0 +1,2 @@ +File message line 1 +File message line 2 diff --git a/test/unit/@node-red/runtime/lib/nodes/.testUserHome/.config.runtime.json b/test/unit/@node-red/runtime/lib/nodes/.testUserHome/.config.runtime.json new file mode 100644 index 0000000000..7bf5a81bda --- /dev/null +++ b/test/unit/@node-red/runtime/lib/nodes/.testUserHome/.config.runtime.json @@ -0,0 +1,4 @@ +{ + "instanceId": "bff8dba3f474d406", + "_credentialSecret": "c9ca84d93a4f6236426cc740b147b50f32b3dd9aab9f4191390a604197722a4d" +} \ No newline at end of file From e4e3e0be7b420e0b389b0690dbbf085e140f85e7 Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Wed, 9 Oct 2024 21:30:28 +0100 Subject: [PATCH 004/160] Add pfx tls test for tls config node --- .../nodes/core/network/21-httprequest_spec.js | 35 ++++++++++++++++-- test/resources/ssl/test.pfx | Bin 0 -> 2579 bytes 2 files changed, 31 insertions(+), 4 deletions(-) create mode 100644 test/resources/ssl/test.pfx diff --git a/test/nodes/core/network/21-httprequest_spec.js b/test/nodes/core/network/21-httprequest_spec.js index 0df73b970b..703fa15768 100644 --- a/test/nodes/core/network/21-httprequest_spec.js +++ b/test/nodes/core/network/21-httprequest_spec.js @@ -211,7 +211,7 @@ describe('HTTP Request Node', function() { } else { hash = crypto.createHash('md5'); } - + var hex = hash.update(value).digest('hex'); if (algorithm === 'SHA-512-256') { hex = hex.slice(0, 64); @@ -1802,10 +1802,37 @@ describe('HTTP Request Node', function() { }) }); + it('should use pfx tls file', function(done) { + var flow = [ + {id:"n1",type:"http request",wires:[["n2"]],method:"GET",ret:"txt",url:getSslTestURLWithoutProtocol('/text'),tls:"n3"}, + {id:"n2", type:"helper"}, + {id:"n3", type:"tls-config", p12:"test/resources/ssl/test.pfx", verifyservercert:false}]; + var testNodes = [httpRequestNode, tlsNode]; + helper.load(testNodes, flow, function() { + var n3 = helper.getNode("n3"); + var n2 = helper.getNode("n2"); + var n1 = helper.getNode("n1"); + n2.on("input", function(msg) { + try { + msg.should.have.property('payload','hello'); + msg.should.have.property('statusCode',200); + msg.should.have.property('headers'); + msg.headers.should.have.property('content-length',''+('hello'.length)); + msg.headers.should.have.property('content-type').which.startWith('text/html'); + msg.should.have.property('responseUrl').which.startWith('https://'); + done(); + } catch(err) { + done(err); + } + }); + n1.receive({payload:"foo"}); + }); + }); + it('should use env var http_proxy', function(done) { const url = getTestURL('/postInspect') const proxyUrl = "http://localhost:" + testProxyPort - + const flow = [ { id: "n1", type: "http request", wires: [["n2"]], method: "POST", ret: "obj", url: url }, { id: "n2", type: "helper" }, @@ -1830,7 +1857,7 @@ describe('HTTP Request Node', function() { it('should use env var https_proxy', function(done) { const url = getSslTestURL('/postInspect') const proxyUrl = "http://localhost:" + testProxyPort - + const flow = [ { id: "n1", type: "http request", wires: [["n2"]], method: "POST", ret: "obj", url: url }, { id: "n2", type: "helper" }, @@ -1855,7 +1882,7 @@ describe('HTTP Request Node', function() { it('should not use env var http*_proxy when no_proxy is set', function(done) { const url = getSslTestURL('/postInspect') const proxyUrl = "http://localhost:" + testProxyPort - + const flow = [ { id: "n1", type: "http request", wires: [["n2"]], method: "POST", ret: "obj", url: url }, { id: "n2", type: "helper" }, diff --git a/test/resources/ssl/test.pfx b/test/resources/ssl/test.pfx new file mode 100644 index 0000000000000000000000000000000000000000..519d8a3fc8ca753a4de4d85697a8efb939a59471 GIT binary patch literal 2579 zcmai$X*d)L7st(*nP%+UEktA~Ll{fQolJxfGA8@3$%IIRvKvd;cY|!%m8|6=j4;U3 zh%8|Y5zSix8$k;3Al74a0tjF_ZcP6s0EENu0nCmtMJW6`vLPfuTshgwbBV&1 z`Te6>d_2pdoQ83&>b1d{Cq?>%;Kz&P3%mgTF zHPg_=rRwfHpUp$Je#M1Su~3Epp&BAGh5}z1%q)veanmnIX)OFOL#LLR7a6+E8R8lGmlm@~1y%k?0DQNWtu;m$r4X>L$Y_ zwo5+5#cP&dm zwHvJb$gI#nLoeB$$Jh;*0-D+7Kxm6^wWxblIVmz2MlaWJ_uCgO67Sm1e3r3MT9+#Q z+UXA3gDN64Qcuk`?6p{`XUFtF)2SVnwCTjg`f-DPUFW zr(FU0L6Z4mmdtkGb?&UuCBpcD9LmaeD0f8eo?SKMtz*&-?3Zj_nf=km^MX!@zsJEF z16ln)&-ZLDl!91fZlx8J>xG}0RpPKSHZ-?45+M5%8tKeg!Q+}orEB&|cMX5QTSZIo z8^d;w13IXG;It-`$=^`EatF<#gnA>Rh&qDLCSKwV&5IOAaS{i2LW=8hR0bb?$-Rz! zPkOL1e}@d1Qx|(ZHl5zLzuB?Tf`4wn6+P7 zvy><)7`I|fvv$n}evxVlztezzy2)CLo}I@mMD{f&Buw00uXMtyAy4+=?MLwW$;!3% z7mu_iEn~cWEQZyrwD(!Wg4$IkGtB~9jPosZM9a*haBZoVF)}p{`Z~#BMxvd2oHXAjD3&mK7{rE zPGMsK0FT2<$ME8Ri6Voz|E8IZc`u-;KFH);mivE-qGYuq%OpP!V&`P=hbJ`i76=a- zCIz$;(Z#WDorVim7(&SCx@$Q_VK0HB@fDwjzuDaNyTDWanj-+MC!>e^x+A#RTdjTM zqqPVXxJf9J_06%ABv7)b7!JRy8;q7q&|huO|7w`a;ht5e)<%c#H5^{t*v`!=S{dvCtf}>ZbF7J8(rdq0kp{72& zpbR|gy7Rfh+fZCzSd{>cSJKp(^fuQ$X*KtILR0g!fQ{ju^b8PFQN+Az_CV*R`Gni1 zTT09KOFw)ivdo!?xcRZqFCJpN?z^av*qw$ehs1IeuEEKALL#yoPhb@1No*(g*fcF9E*J5xL zW@F4aMuhI5+Q(DA93k0yIu&-Q!ZeP#sB;{3X-Y$4+Gok@98>I*WQ)-=mEMJV7AF^t z3VdCOlix}Pc9xjOWR<8pv5#I{symgvpuUh~M!5a6;!vkPs4(nptsl~4Sw-=Sf{fYX z2vn{w6PQO|DZr+Cv?LM?7Do}a;XBp`XiN=s=} zq%g6*>xq)ujus=~b2>isic#PbS3ADkcN0YkNCPE(Ucnz`jlSUCug;&vwH&^_L+@!W zQP$PA$G8<*ZLqD6;Is8&7}zyRI8>^7onu&CXwl&LpI^qyMmR5cx6)(qod_Qvb9aj=CVF- zzn13U%ca^BV#D|OE2zWOmg;^9mU@Qp#+4A|1#?;FNT!_d6CqR~oUuiuv*gL(hg)0S zaLJgf?oHJ<;SubwxhQt}Hg<~qDcrW8D7JNONiL2w^egRwgBv!)h>@{Vs417Hz1ha! zy+%Brj){#p{Y)fiJPY#{d%RUtX}9Ih($Tl>+r>IKBWJ&cd7V0zXH*QI$i5>UcXf(k zoxjpe35j)}n?S7InqxSrO`#YuOfK9nrD7l5*j^fR@$4>z_Z%Hl8Z`Rxs-_2TlxXQz zO37daf#2&Wtktr~r*uZcqYSe_ux$S3t-IK!QjV&vatYDsyd{T}Ga@GCcr=6pPUZ(r6U*);q<8vRADWom~W@puz+Y=x=+s;_X zDa8j;_5IA^X6a{Fyv>X{hwfr`f38edn@z2Pkng|61`|mdj2mmvIL|Oa8^Cpfu6Uw+Q4d+TGHog8h+JS~WItMNk WG^mZ(Ed@cPXH`#t)5~-JQSIMkamAqk literal 0 HcmV?d00001 From fd4f7477060e62c79cafe45dfbe4f004d1e5aeca Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Mon, 11 Nov 2024 16:26:20 +0000 Subject: [PATCH 005/160] If creds dont exist - create in flows dir rather than userdir So they stay alongside flows --- .../runtime/lib/storage/localfilesystem/projects/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/runtime/lib/storage/localfilesystem/projects/index.js b/packages/node_modules/@node-red/runtime/lib/storage/localfilesystem/projects/index.js index ca87d76e9b..8d6cea26aa 100644 --- a/packages/node_modules/@node-red/runtime/lib/storage/localfilesystem/projects/index.js +++ b/packages/node_modules/@node-red/runtime/lib/storage/localfilesystem/projects/index.js @@ -85,7 +85,10 @@ function init(_settings, _runtime) { var ffBase = fspath.basename(flowsFullPath,ffExt); flowsFileBackup = getBackupFilename(flowsFullPath); - credentialsFile = fspath.join(settings.userDir,ffBase+"_cred"+ffExt); + credentialsFile = fspath.join(settings.userDir,ffBase+"_cred"+ffExt); // if creds file exists in "old" location use + if (!fs.existsSync(credentialsFile)) { // if not then locate it next to flows file in user dir + credentialsFile = fspath.join(fspath.dirname(flowsFullPath), ffBase+"_cred"+ffExt); + } credentialsFileBackup = getBackupFilename(credentialsFile) var setupProjectsPromise; From 8aa65e77619bb31128b3fd6cc6f6d6a7e36d69e6 Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Mon, 11 Nov 2024 16:28:42 +0000 Subject: [PATCH 006/160] fix comments to be what is happening. --- .../runtime/lib/storage/localfilesystem/projects/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/node_modules/@node-red/runtime/lib/storage/localfilesystem/projects/index.js b/packages/node_modules/@node-red/runtime/lib/storage/localfilesystem/projects/index.js index 8d6cea26aa..b19889bcbd 100644 --- a/packages/node_modules/@node-red/runtime/lib/storage/localfilesystem/projects/index.js +++ b/packages/node_modules/@node-red/runtime/lib/storage/localfilesystem/projects/index.js @@ -85,8 +85,8 @@ function init(_settings, _runtime) { var ffBase = fspath.basename(flowsFullPath,ffExt); flowsFileBackup = getBackupFilename(flowsFullPath); - credentialsFile = fspath.join(settings.userDir,ffBase+"_cred"+ffExt); // if creds file exists in "old" location use - if (!fs.existsSync(credentialsFile)) { // if not then locate it next to flows file in user dir + credentialsFile = fspath.join(settings.userDir,ffBase+"_cred"+ffExt); // if creds file exists in "old" location userdir then use it + if (!fs.existsSync(credentialsFile)) { // if not then locate it next to flows file in flows dir credentialsFile = fspath.join(fspath.dirname(flowsFullPath), ffBase+"_cred"+ffExt); } credentialsFileBackup = getBackupFilename(credentialsFile) From fbf2c7b570b2824e347bb5060942ee2b780b1d40 Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Tue, 3 Dec 2024 14:35:56 +0000 Subject: [PATCH 007/160] Update 05-tls.js --- packages/node_modules/@node-red/nodes/core/network/05-tls.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/node_modules/@node-red/nodes/core/network/05-tls.js b/packages/node_modules/@node-red/nodes/core/network/05-tls.js index 5a3147af66..0c588fc66d 100644 --- a/packages/node_modules/@node-red/nodes/core/network/05-tls.js +++ b/packages/node_modules/@node-red/nodes/core/network/05-tls.js @@ -32,8 +32,7 @@ module.exports = function(RED) { this.alpnprotocol = (n.alpnprotocol||"").trim(); if ((certPath && certPath.length > 0) || (keyPath && keyPath.length > 0) || (caPath && caPath.length > 0)) { - - if ( (certPath.length > 0) !== (keyPath.length > 0)) { + if ( (certPath && certPath.length > 0) !== (keyPath && keyPath.length > 0)) { this.valid = false; this.error(RED._("tls.error.missing-file")); return; From 936f024e33f08ddf58dae4291ad5a6b8f6d3cd65 Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Wed, 4 Dec 2024 12:54:06 +0000 Subject: [PATCH 008/160] reverse test logic of existence of pfx --- .../@node-red/nodes/core/network/05-tls.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/node_modules/@node-red/nodes/core/network/05-tls.js b/packages/node_modules/@node-red/nodes/core/network/05-tls.js index 0c588fc66d..3dd3ba8b56 100644 --- a/packages/node_modules/@node-red/nodes/core/network/05-tls.js +++ b/packages/node_modules/@node-red/nodes/core/network/05-tls.js @@ -31,7 +31,17 @@ module.exports = function(RED) { this.servername = (n.servername||"").trim(); this.alpnprotocol = (n.alpnprotocol||"").trim(); - if ((certPath && certPath.length > 0) || (keyPath && keyPath.length > 0) || (caPath && caPath.length > 0)) { + if (this.certType === "pfx" && p12Path && p12Path.length > 0) { + try { + this.pfx = fs.readFileSync(p12Path); + } + catch(err) { + this.valid = false; + this.error(err.toString()); + return; + } + } + else if ((certPath && certPath.length > 0) || (keyPath && keyPath.length > 0) || (caPath && caPath.length > 0)) { if ( (certPath && certPath.length > 0) !== (keyPath && keyPath.length > 0)) { this.valid = false; this.error(RED._("tls.error.missing-file")); @@ -55,16 +65,6 @@ module.exports = function(RED) { return; } } - else if (p12Path && p12Path.length > 0) { - try { - this.pfx = fs.readFileSync(p12Path); - } - catch(err) { - this.valid = false; - this.error(err.toString()); - return; - } - } else { if (this.credentials) { var certData = this.credentials.certdata || ""; From 6bac244c287a9f891c5b36f1cfc004bb29965eb1 Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Wed, 4 Dec 2024 21:34:41 +0000 Subject: [PATCH 009/160] Delete 50-file-test-file.txt --- test/resources/50-file-test-file.txt | 2 -- 1 file changed, 2 deletions(-) delete mode 100644 test/resources/50-file-test-file.txt diff --git a/test/resources/50-file-test-file.txt b/test/resources/50-file-test-file.txt deleted file mode 100644 index 0491f12fe2..0000000000 --- a/test/resources/50-file-test-file.txt +++ /dev/null @@ -1,2 +0,0 @@ -File message line 1 -File message line 2 From 8272d4e1e4150b71a7381eda6d868f1dceb03bdd Mon Sep 17 00:00:00 2001 From: Dave Conway-Jones Date: Wed, 4 Dec 2024 21:42:19 +0000 Subject: [PATCH 010/160] Delete .config.runtime.json --- .../runtime/lib/nodes/.testUserHome/.config.runtime.json | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 test/unit/@node-red/runtime/lib/nodes/.testUserHome/.config.runtime.json diff --git a/test/unit/@node-red/runtime/lib/nodes/.testUserHome/.config.runtime.json b/test/unit/@node-red/runtime/lib/nodes/.testUserHome/.config.runtime.json deleted file mode 100644 index 7bf5a81bda..0000000000 --- a/test/unit/@node-red/runtime/lib/nodes/.testUserHome/.config.runtime.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "instanceId": "bff8dba3f474d406", - "_credentialSecret": "c9ca84d93a4f6236426cc740b147b50f32b3dd9aab9f4191390a604197722a4d" -} \ No newline at end of file From bd51b0c153277601a522315b5a59ce966d8e5b0c Mon Sep 17 00:00:00 2001 From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com> Date: Thu, 25 Sep 2025 08:03:37 +0000 Subject: [PATCH 011/160] feat: Add enhanced zoom and scroll features - Added space+scroll zoom functionality - Implemented cursor-centered zoom (focuses on cursor position) - Enhanced pinch-to-zoom with trackpad support (Ctrl+wheel) - Added momentum scrolling with edge bounce animation - Improved touch pinch gesture handling with proper center tracking Co-authored-by: Dimitrie Hoekstra --- .../@node-red/editor-client/src/js/ui/view.js | 210 ++++++++++++++++-- 1 file changed, 192 insertions(+), 18 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 89019005fe..cd2df75d74 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -44,6 +44,21 @@ RED.view = (function() { moveTouchCenter = [], touchStartTime = 0; + var spacebarPressed = false; + + // Momentum scrolling state + var scrollVelocity = { x: 0, y: 0 }; + var lastScrollTime = 0; + var lastScrollPos = { x: 0, y: 0 }; + var scrollAnimationId = null; + var momentumActive = false; + + // Bounce effect parameters + var BOUNCE_DAMPING = 0.6; + var BOUNCE_TENSION = 0.3; + var MIN_VELOCITY = 0.5; + var FRICTION = 0.95; + var workspaceScrollPositions = {}; var gridSize = 20; @@ -466,19 +481,19 @@ RED.view = (function() { if (!isNaN(moveTouchDistance)) { oldScaleFactor = scaleFactor; - scaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000))); + var newScaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000))); - var deltaTouchCenter = [ // Try to pan whilst zooming - not 100% - startTouchCenter[0]*(scaleFactor-oldScaleFactor),//-(touchCenter[0]-moveTouchCenter[0]), - startTouchCenter[1]*(scaleFactor-oldScaleFactor) //-(touchCenter[1]-moveTouchCenter[1]) + // Calculate pinch center relative to chart + var pinchCenter = [ + touchCenter[0] - offset.left, + touchCenter[1] - offset.top ]; + // Use zoomView with pinch center as focal point + zoomView(newScaleFactor, pinchCenter); + startTouchDistance = moveTouchDistance; moveTouchCenter = touchCenter; - - chart.scrollLeft(scrollPos[0]+deltaTouchCenter[0]); - chart.scrollTop(scrollPos[1]+deltaTouchCenter[1]); - redraw(); } } d3.event.preventDefault(); @@ -509,6 +524,22 @@ RED.view = (function() { document.addEventListener("keyup", handleAltToggle) document.addEventListener("keydown", handleAltToggle) + // Handle spacebar for zoom mode + function handleSpacebarToggle(e) { + if (e.keyCode === 32 || e.key === ' ') { + if (e.type === "keydown" && !spacebarPressed) { + spacebarPressed = true; + // Prevent default space scrolling behavior + e.preventDefault(); + } else if (e.type === "keyup" && spacebarPressed) { + spacebarPressed = false; + e.preventDefault(); + } + } + } + document.addEventListener("keyup", handleSpacebarToggle) + document.addEventListener("keydown", handleSpacebarToggle) + // Workspace Background eventLayer.append("svg:rect") .attr("class","red-ui-workspace-chart-background") @@ -609,12 +640,52 @@ RED.view = (function() { $("#red-ui-view-zoom-in").on("click", zoomIn); RED.popover.tooltip($("#red-ui-view-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in'); chart.on("DOMMouseScroll mousewheel", function (evt) { - if ( evt.altKey ) { + if ( evt.altKey || spacebarPressed ) { evt.preventDefault(); evt.stopPropagation(); + // Get cursor position relative to the chart + var offset = chart.offset(); + var cursorPos = [ + evt.originalEvent.pageX - offset.left, + evt.originalEvent.pageY - offset.top + ]; var move = -(evt.originalEvent.detail) || evt.originalEvent.wheelDelta; - if (move <= 0) { zoomOut(); } - else { zoomIn(); } + if (move <= 0) { zoomOut(cursorPos); } + else { zoomIn(cursorPos); } + } + }); + + // Modern wheel event handler for better trackpad support (pinch-to-zoom) and momentum + var momentumTimer = null; + chart.on("wheel", function(evt) { + // ctrlKey is set during pinch gestures on trackpads + if (evt.ctrlKey || evt.altKey || spacebarPressed) { + evt.preventDefault(); + evt.stopPropagation(); + // Get cursor position relative to the chart + var offset = chart.offset(); + var cursorPos = [ + evt.originalEvent.pageX - offset.left, + evt.originalEvent.pageY - offset.top + ]; + var delta = evt.originalEvent.deltaY; + if (delta > 0) { zoomOut(cursorPos); } + else if (delta < 0) { zoomIn(cursorPos); } + } else { + // Regular scroll - track velocity and apply momentum + handleScroll(); + + // Cancel previous momentum timer + if (momentumTimer) { + clearTimeout(momentumTimer); + } + + // Start momentum after scroll stops + momentumTimer = setTimeout(function() { + if (Math.abs(scrollVelocity.x) > MIN_VELOCITY || Math.abs(scrollVelocity.y) > MIN_VELOCITY) { + startMomentumScroll(); + } + }, 100); } }); @@ -964,6 +1035,9 @@ RED.view = (function() { RED.settings.setLocal('scroll-positions', JSON.stringify(workspaceScrollPositions) ) } chart.on("scroll", function() { + // Track scroll velocity for momentum + handleScroll(); + if (RED.settings.get("editor.view.view-store-position")) { if (onScrollTimer) { clearTimeout(onScrollTimer) @@ -2478,14 +2552,14 @@ RED.view = (function() { } - function zoomIn() { + function zoomIn(focalPoint) { if (scaleFactor < 2) { - zoomView(scaleFactor+0.1); + zoomView(scaleFactor+0.1, focalPoint); } } - function zoomOut() { + function zoomOut(focalPoint) { if (scaleFactor > 0.3) { - zoomView(scaleFactor-0.1); + zoomView(scaleFactor-0.1, focalPoint); } } function zoomZero() { zoomView(1); } @@ -2494,12 +2568,32 @@ RED.view = (function() { function searchNext() { RED.actions.invoke("core:search-next"); } - function zoomView(factor) { + function zoomView(factor, focalPoint) { var screenSize = [chart.width(),chart.height()]; var scrollPos = [chart.scrollLeft(),chart.scrollTop()]; - var center = [(scrollPos[0] + screenSize[0]/2)/scaleFactor,(scrollPos[1] + screenSize[1]/2)/scaleFactor]; + + // Use focal point if provided (e.g., cursor position), otherwise use viewport center + var center; + if (focalPoint) { + // focalPoint is in screen coordinates, convert to workspace coordinates + center = [(scrollPos[0] + focalPoint[0])/scaleFactor, (scrollPos[1] + focalPoint[1])/scaleFactor]; + } else { + // Default to viewport center + center = [(scrollPos[0] + screenSize[0]/2)/scaleFactor,(scrollPos[1] + screenSize[1]/2)/scaleFactor]; + } + + var oldScaleFactor = scaleFactor; scaleFactor = factor; - var newCenter = [(scrollPos[0] + screenSize[0]/2)/scaleFactor,(scrollPos[1] + screenSize[1]/2)/scaleFactor]; + + // Calculate where the focal point will be after zoom + var newCenter; + if (focalPoint) { + // Keep the focal point at the same screen position + newCenter = [(scrollPos[0] + focalPoint[0])/scaleFactor, (scrollPos[1] + focalPoint[1])/scaleFactor]; + } else { + newCenter = [(scrollPos[0] + screenSize[0]/2)/scaleFactor,(scrollPos[1] + screenSize[1]/2)/scaleFactor]; + } + var delta = [(newCenter[0]-center[0])*scaleFactor,(newCenter[1]-center[1])*scaleFactor] chart.scrollLeft(scrollPos[0]-delta[0]); chart.scrollTop(scrollPos[1]-delta[1]); @@ -2511,6 +2605,86 @@ RED.view = (function() { } } + // Momentum scrolling functions + function startMomentumScroll() { + if (scrollAnimationId) { + cancelAnimationFrame(scrollAnimationId); + } + momentumActive = true; + animateMomentumScroll(); + } + + function animateMomentumScroll() { + if (!momentumActive) return; + + var scrollX = chart.scrollLeft(); + var scrollY = chart.scrollTop(); + var maxScrollX = chart[0].scrollWidth - chart.width(); + var maxScrollY = chart[0].scrollHeight - chart.height(); + + // Apply friction + scrollVelocity.x *= FRICTION; + scrollVelocity.y *= FRICTION; + + // Check for edges and apply bounce + var newScrollX = scrollX + scrollVelocity.x; + var newScrollY = scrollY + scrollVelocity.y; + + // Bounce effect at edges + if (newScrollX < 0) { + newScrollX = 0; + scrollVelocity.x = -scrollVelocity.x * BOUNCE_DAMPING; + } else if (newScrollX > maxScrollX) { + newScrollX = maxScrollX; + scrollVelocity.x = -scrollVelocity.x * BOUNCE_DAMPING; + } + + if (newScrollY < 0) { + newScrollY = 0; + scrollVelocity.y = -scrollVelocity.y * BOUNCE_DAMPING; + } else if (newScrollY > maxScrollY) { + newScrollY = maxScrollY; + scrollVelocity.y = -scrollVelocity.y * BOUNCE_DAMPING; + } + + // Apply new scroll position + chart.scrollLeft(newScrollX); + chart.scrollTop(newScrollY); + + // Stop if velocity is too small + if (Math.abs(scrollVelocity.x) < MIN_VELOCITY && Math.abs(scrollVelocity.y) < MIN_VELOCITY) { + momentumActive = false; + scrollVelocity.x = 0; + scrollVelocity.y = 0; + } else { + scrollAnimationId = requestAnimationFrame(animateMomentumScroll); + } + } + + function handleScroll() { + var now = Date.now(); + var scrollX = chart.scrollLeft(); + var scrollY = chart.scrollTop(); + + if (lastScrollTime) { + var dt = now - lastScrollTime; + if (dt > 0 && dt < 100) { // Only calculate velocity for recent scrolls + scrollVelocity.x = (scrollX - lastScrollPos.x) / dt * 16; // Normalize to 60fps + scrollVelocity.y = (scrollY - lastScrollPos.y) / dt * 16; + } + } + + lastScrollTime = now; + lastScrollPos.x = scrollX; + lastScrollPos.y = scrollY; + + // Cancel any ongoing momentum animation + if (scrollAnimationId) { + cancelAnimationFrame(scrollAnimationId); + scrollAnimationId = null; + } + } + function selectNone() { if (mouse_mode === RED.state.MOVING || mouse_mode === RED.state.MOVING_ACTIVE) { return; From eaf68815fd6199da165c36f6b362eaa3f647f409 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 29 Sep 2025 17:29:23 +0200 Subject: [PATCH 012/160] Implement smooth zoom functionality with pinch-to-zoom support - Add smooth zoom animation with 125ms duration and easing curves - Implement space+scroll zoom mode alongside existing Alt+scroll - Fix pinch-to-zoom with proper ratio-based scaling and fixed focal point - Add gesture state management for consistent zoom behavior - Enhance spacebar handling to prevent scroll artifacts - Fix zoom button layout (correct zoom in/out direction) - Add zoom animation utilities (view-zoom-animator.js) - Add zoom configuration constants (view-zoom-constants.js) - Fix scale lock issues with improved tolerance handling - Update Gruntfile to include new zoom modules in build Features implemented: - Smooth animated zoom transitions (125ms with ease-out) - Space+scroll for zoom mode - Fixed focal point during pinch gestures - No scroll artifacts when pressing space - Proper state management when cursor leaves canvas - Natural acceleration/deceleration curves Known issue: Trackpad pinch-to-zoom needs additional work on macOS --- Gruntfile.js | 2 + .../src/js/ui/view-zoom-animator.js | 223 ++++++++++++++++++ .../src/js/ui/view-zoom-constants.js | 21 ++ .../@node-red/editor-client/src/js/ui/view.js | 190 +++++++++++++-- 4 files changed, 412 insertions(+), 24 deletions(-) create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js create mode 100644 packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js diff --git a/Gruntfile.js b/Gruntfile.js index 73b03f6ea3..701686c35c 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -173,6 +173,8 @@ module.exports = function(grunt) { "packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js", "packages/node_modules/@node-red/editor-client/src/js/ui/statusBar.js", "packages/node_modules/@node-red/editor-client/src/js/ui/view.js", + "packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js", + "packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js", "packages/node_modules/@node-red/editor-client/src/js/ui/view-annotations.js", "packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js", "packages/node_modules/@node-red/editor-client/src/js/ui/view-tools.js", diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js new file mode 100644 index 0000000000..1a3238a625 --- /dev/null +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js @@ -0,0 +1,223 @@ +/** + * Copyright JS Foundation and other contributors, http://js.foundation + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + **/ + +RED.view.zoomAnimator = (function() { + + /** + * Easing function for smooth deceleration + * Creates natural-feeling animation curves + * @param {number} t - Progress from 0 to 1 + * @returns {number} - Eased value from 0 to 1 + */ + function easeOut(t) { + // Cubic ease-out for smooth deceleration + return 1 - Math.pow(1 - t, 3); + } + + /** + * Animate values using requestAnimationFrame with easing + * Based on Excalidraw's implementation for smooth zoom transitions + * + * @param {Object} options - Animation options + * @param {Object} options.fromValues - Starting values object + * @param {Object} options.toValues - Target values object + * @param {Function} options.onStep - Callback for each animation frame + * @param {number} [options.duration=250] - Animation duration in ms + * @param {Function} [options.interpolateValue] - Custom interpolation function + * @param {Function} [options.onStart] - Animation start callback + * @param {Function} [options.onEnd] - Animation end callback + * @param {Function} [options.onCancel] - Animation cancel callback + * @returns {Function} - Cancel function to stop animation + */ + function easeToValuesRAF(options) { + const { + fromValues, + toValues, + onStep, + duration = 250, + interpolateValue, + onStart, + onEnd, + onCancel + } = options; + + let startTime = null; + let animationId = null; + let cancelled = false; + + function step(timestamp) { + if (cancelled) { + return; + } + + if (!startTime) { + startTime = timestamp; + if (onStart) { + onStart(); + } + } + + const elapsed = timestamp - startTime; + const progress = Math.min(elapsed / duration, 1); + const easedProgress = easeOut(progress); + + const interpolatedValues = {}; + + for (const key in fromValues) { + const from = fromValues[key]; + const to = toValues[key]; + + if (interpolateValue && key === 'zoom') { + // Special interpolation for zoom to feel more natural + // Exponential interpolation preserves relative zoom feel + interpolatedValues[key] = from * Math.pow(to / from, easedProgress); + } else { + // Linear interpolation for other values + interpolatedValues[key] = from + (to - from) * easedProgress; + } + } + + onStep(interpolatedValues); + + if (progress < 1) { + animationId = requestAnimationFrame(step); + } else { + if (onEnd) { + onEnd(); + } + } + } + + animationId = requestAnimationFrame(step); + + // Return cancel function + return function cancel() { + cancelled = true; + if (animationId) { + cancelAnimationFrame(animationId); + } + if (onCancel) { + onCancel(); + } + }; + } + + /** + * Calculate smooth zoom delta with acceleration + * Provides consistent zoom speed regardless of input device + * + * @param {number} currentScale - Current zoom scale + * @param {number} delta - Input delta (wheel, gesture, etc) + * @param {boolean} isTrackpad - Whether input is from trackpad + * @returns {number} - Calculated zoom delta + */ + function calculateZoomDelta(currentScale, delta, isTrackpad) { + // Normalize delta across different input devices + let normalizedDelta = delta; + + if (isTrackpad) { + // Trackpad deltas are typically smaller and more frequent + normalizedDelta = delta * 0.01; + } else { + // Mouse wheel deltas are larger and less frequent + normalizedDelta = delta > 0 ? 0.1 : -0.1; + } + + // Apply acceleration based on current zoom level + // Zoom faster when zoomed out, slower when zoomed in + const acceleration = Math.max(0.5, Math.min(2, 1 / currentScale)); + + return normalizedDelta * acceleration; + } + + /** + * Gesture state management for consistent focal points + */ + const gestureState = { + active: false, + initialFocalPoint: null, + initialScale: 1, + currentScale: 1, + lastDistance: 0 + }; + + /** + * Start a zoom gesture with fixed focal point + * @param {Array} focalPoint - [x, y] coordinates of focal point + * @param {number} scale - Initial scale value + */ + function startGesture(focalPoint, scale) { + gestureState.active = true; + gestureState.initialFocalPoint = focalPoint ? [...focalPoint] : null; + gestureState.initialScale = scale; + gestureState.currentScale = scale; + return gestureState; + } + + /** + * Update gesture maintaining fixed focal point + * @param {number} newScale - New scale value + * @returns {Object} - Gesture state with fixed focal point + */ + function updateGesture(newScale) { + if (!gestureState.active) { + return null; + } + + gestureState.currentScale = newScale; + + return { + scale: newScale, + focalPoint: gestureState.initialFocalPoint, + active: gestureState.active + }; + } + + /** + * End the current gesture + */ + function endGesture() { + gestureState.active = false; + gestureState.initialFocalPoint = null; + gestureState.lastDistance = 0; + } + + /** + * Check if a gesture is currently active + */ + function isGestureActive() { + return gestureState.active; + } + + /** + * Get the fixed focal point for the current gesture + */ + function getGestureFocalPoint() { + return gestureState.initialFocalPoint; + } + + return { + easeOut: easeOut, + easeToValuesRAF: easeToValuesRAF, + calculateZoomDelta: calculateZoomDelta, + gestureState: gestureState, + startGesture: startGesture, + updateGesture: updateGesture, + endGesture: endGesture, + isGestureActive: isGestureActive, + getGestureFocalPoint: getGestureFocalPoint + }; +})(); \ No newline at end of file diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js new file mode 100644 index 0000000000..e983b473e7 --- /dev/null +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js @@ -0,0 +1,21 @@ +/** + * Zoom configuration constants + */ +RED.view.zoomConstants = { + // Zoom limits + MIN_ZOOM: 0.3, + MAX_ZOOM: 2.0, + + // Zoom step for keyboard/button controls + ZOOM_STEP: 0.1, + + // Animation settings + DEFAULT_ZOOM_DURATION: 125, // ms, faster animation + + // Gesture thresholds + PINCH_THRESHOLD: 10, // minimum pixel movement to trigger zoom + + // Momentum and friction for smooth scrolling + FRICTION: 0.92, + BOUNCE_DAMPING: 0.6 +}; \ No newline at end of file diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index cd2df75d74..b22a871eb2 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -38,11 +38,14 @@ RED.view = (function() { node_height = 30, dblClickInterval = 650; + var cancelInProgressAnimation = null; // For smooth zoom animation + var touchLongPressTimeout = 1000, startTouchDistance = 0, startTouchCenter = [], moveTouchCenter = [], - touchStartTime = 0; + touchStartTime = 0, + gesture = {}; var spacebarPressed = false; @@ -395,11 +398,15 @@ RED.view = (function() { if (RED.touch.radialMenu.active()) { return; } + // End gesture when touches end + RED.view.zoomAnimator.endGesture(); canvasMouseUp.call(this); }) .on("touchcancel", function() { if (RED.view.DEBUG) { console.warn("eventLayer.touchcancel", mouse_mode); } d3.event.preventDefault(); + // End gesture when touches are cancelled + RED.view.zoomAnimator.endGesture(); canvasMouseUp.call(this); }) .on("touchstart", function() { @@ -425,6 +432,19 @@ RED.view = (function() { touch1["pageY"]+(a/2) ] startTouchDistance = Math.sqrt((a*a)+(b*b)); + + // Store initial scale for ratio-based zoom calculation + gesture = { + initialScale: scaleFactor, + initialDistance: startTouchDistance + }; + + // Start gesture with fixed focal point (screen coordinates) + var focalPoint = [ + (touch0["pageX"] + touch1["pageX"]) / 2 - offset.left, + (touch0["pageY"] + touch1["pageY"]) / 2 - offset.top + ]; + RED.view.zoomAnimator.startGesture(focalPoint, scaleFactor); } else { var obj = d3.select(document.body); touch0 = d3.event.touches.item(0); @@ -474,26 +494,33 @@ RED.view = (function() { var offset = chart.offset(); var scrollPos = [chart.scrollLeft(),chart.scrollTop()]; var moveTouchDistance = Math.sqrt((a*a)+(b*b)); - var touchCenter = [ - touch1["pageX"]+(b/2), - touch1["pageY"]+(a/2) - ]; if (!isNaN(moveTouchDistance)) { oldScaleFactor = scaleFactor; - var newScaleFactor = Math.min(2,Math.max(0.3, scaleFactor + (Math.floor(((moveTouchDistance*100)-(startTouchDistance*100)))/10000))); - - // Calculate pinch center relative to chart - var pinchCenter = [ - touchCenter[0] - offset.left, - touchCenter[1] - offset.top - ]; - - // Use zoomView with pinch center as focal point - zoomView(newScaleFactor, pinchCenter); + // Use smooth ratio-based scaling for natural pinch-to-zoom + var zoomRatio = moveTouchDistance / startTouchDistance; + var newScaleFactor = Math.min(2, Math.max(0.3, gesture.initialScale * zoomRatio)); + + // Use gesture state management to maintain fixed focal point + var gestureState = RED.view.zoomAnimator.updateGesture(newScaleFactor); + + if (gestureState && gestureState.focalPoint) { + // Use the fixed focal point from gesture start + zoomView(newScaleFactor, gestureState.focalPoint); + } else { + // Fallback to current behavior if gesture not active + var touchCenter = [ + touch1["pageX"]+(b/2), + touch1["pageY"]+(a/2) + ]; + var pinchCenter = [ + touchCenter[0] - offset.left, + touchCenter[1] - offset.top + ]; + zoomView(newScaleFactor, pinchCenter); + } - startTouchDistance = moveTouchDistance; - moveTouchCenter = touchCenter; + // Don't update startTouchDistance - keep initial distance for ratio calculation } } d3.event.preventDefault(); @@ -531,14 +558,35 @@ RED.view = (function() { spacebarPressed = true; // Prevent default space scrolling behavior e.preventDefault(); + e.stopPropagation(); } else if (e.type === "keyup" && spacebarPressed) { spacebarPressed = false; e.preventDefault(); + e.stopPropagation(); } } } + + // Window-level keyup listener to catch spacebar release when cursor is outside canvas + function handleWindowSpacebarUp(e) { + if ((e.keyCode === 32 || e.key === ' ') && spacebarPressed) { + spacebarPressed = false; + e.preventDefault(); + e.stopPropagation(); + } + } document.addEventListener("keyup", handleSpacebarToggle) document.addEventListener("keydown", handleSpacebarToggle) + // Additional window-level keyup listener to ensure spacebar state is cleared + // when cursor leaves canvas area while spacebar is held + window.addEventListener("keyup", handleWindowSpacebarUp) + + // Reset spacebar state when window loses focus to prevent stuck state + window.addEventListener("blur", function() { + if (spacebarPressed) { + spacebarPressed = false; + } + }) // Workspace Background eventLayer.append("svg:rect") @@ -633,11 +681,11 @@ RED.view = (function() { '') }) - $("#red-ui-view-zoom-out").on("click", zoomOut); + $("#red-ui-view-zoom-out").on("click", zoomIn); RED.popover.tooltip($("#red-ui-view-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out'); $("#red-ui-view-zoom-zero").on("click", zoomZero); RED.popover.tooltip($("#red-ui-view-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset'); - $("#red-ui-view-zoom-in").on("click", zoomIn); + $("#red-ui-view-zoom-in").on("click", zoomOut); RED.popover.tooltip($("#red-ui-view-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in'); chart.on("DOMMouseScroll mousewheel", function (evt) { if ( evt.altKey || spacebarPressed ) { @@ -856,6 +904,10 @@ RED.view = (function() { }); chart.on("blur", function() { $("#red-ui-workspace-tabs").removeClass("red-ui-workspace-focussed"); + // Reset spacebar state when chart loses focus to prevent stuck state + if (spacebarPressed) { + spacebarPressed = false; + } }); RED.actions.add("core:copy-selection-to-internal-clipboard",copySelection); @@ -2208,6 +2260,11 @@ RED.view = (function() { canvasMouseUp.call(this) }) } + // Reset spacebar state when mouse leaves canvas to prevent interaction artifacts + if (spacebarPressed) { + // Note: We don't reset spacebarPressed here as user may still be holding spacebar + // The window-level keyup listener will handle the actual release + } } function canvasMouseUp() { lastClickPosition = [d3.event.offsetX/scaleFactor,d3.event.offsetY/scaleFactor]; @@ -2553,16 +2610,16 @@ RED.view = (function() { } function zoomIn(focalPoint) { - if (scaleFactor < 2) { - zoomView(scaleFactor+0.1, focalPoint); + if (scaleFactor < RED.view.zoomConstants.MAX_ZOOM) { + animatedZoomView(scaleFactor + RED.view.zoomConstants.ZOOM_STEP, focalPoint); } } function zoomOut(focalPoint) { - if (scaleFactor > 0.3) { - zoomView(scaleFactor-0.1, focalPoint); + if (scaleFactor > RED.view.zoomConstants.MIN_ZOOM) { + animatedZoomView(scaleFactor - RED.view.zoomConstants.ZOOM_STEP, focalPoint); } } - function zoomZero() { zoomView(1); } + function zoomZero() { animatedZoomView(1); } function searchFlows() { RED.actions.invoke("core:search", $(this).data("term")); } function searchPrev() { RED.actions.invoke("core:search-previous"); } function searchNext() { RED.actions.invoke("core:search-next"); } @@ -2605,6 +2662,91 @@ RED.view = (function() { } } + function animatedZoomView(targetFactor, focalPoint) { + // Cancel any in-progress animation + if (cancelInProgressAnimation) { + cancelInProgressAnimation(); + cancelInProgressAnimation = null; + } + + // Clamp target factor to valid range + targetFactor = Math.max(RED.view.zoomConstants.MIN_ZOOM, + Math.min(RED.view.zoomConstants.MAX_ZOOM, targetFactor)); + + // If we're already at the target, no need to animate + // Use a more tolerant threshold to account for floating-point precision + if (Math.abs(scaleFactor - targetFactor) < 0.01) { + return; + } + + var startFactor = scaleFactor; + var screenSize = [chart.width(), chart.height()]; + var scrollPos = [chart.scrollLeft(), chart.scrollTop()]; + + // Calculate the focal point in workspace coordinates (will remain constant) + var center; + if (focalPoint) { + // focalPoint is in screen coordinates, convert to workspace coordinates + center = [(scrollPos[0] + focalPoint[0])/scaleFactor, (scrollPos[1] + focalPoint[1])/scaleFactor]; + } else { + // Default to viewport center + center = [(scrollPos[0] + screenSize[0]/2)/scaleFactor, (scrollPos[1] + screenSize[1]/2)/scaleFactor]; + } + + // Start the animation + cancelInProgressAnimation = RED.view.zoomAnimator.easeToValuesRAF({ + fromValues: { + zoom: startFactor + }, + toValues: { + zoom: targetFactor + }, + duration: RED.view.zoomConstants.DEFAULT_ZOOM_DURATION, + interpolateValue: true, // Use exponential interpolation for zoom + onStep: function(values) { + var currentFactor = values.zoom; + scaleFactor = currentFactor; + + // Calculate new scroll position to maintain focal point + var currentScreenSize = [chart.width(), chart.height()]; + var newScrollPos; + + if (focalPoint) { + // Keep the focal point at the same screen position + newScrollPos = [ + center[0] * scaleFactor - focalPoint[0], + center[1] * scaleFactor - focalPoint[1] + ]; + } else { + // Keep viewport center steady + newScrollPos = [ + center[0] * scaleFactor - currentScreenSize[0]/2, + center[1] * scaleFactor - currentScreenSize[1]/2 + ]; + } + + chart.scrollLeft(newScrollPos[0]); + chart.scrollTop(newScrollPos[1]); + + RED.view.navigator.resize(); + redraw(); + }, + onEnd: function() { + cancelInProgressAnimation = null; + // Ensure scaleFactor is exactly the target to prevent precision issues + scaleFactor = targetFactor; + if (RED.settings.get("editor.view.view-store-zoom")) { + RED.settings.setLocal('zoom-level', targetFactor.toFixed(1)); + } + }, + onCancel: function() { + cancelInProgressAnimation = null; + // Ensure scaleFactor is set to current target on cancel + scaleFactor = targetFactor; + } + }); + } + // Momentum scrolling functions function startMomentumScroll() { if (scrollAnimationId) { From 49222c573715539263d1e76b834053472068b232 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 29 Sep 2025 17:41:05 +0200 Subject: [PATCH 013/160] Fix trackpad zoom direction - spreading fingers now zooms in - Inverted deltaY value for trackpad pinch gestures - Matches standard macOS trackpad behavior - Spreading fingers (negative deltaY) zooms in - Pinching fingers (positive deltaY) zooms out --- .../@node-red/editor-client/src/js/ui/view.js | 38 ++++++++++++++++++- 1 file changed, 36 insertions(+), 2 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index b22a871eb2..e3336caeef 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -705,6 +705,7 @@ RED.view = (function() { // Modern wheel event handler for better trackpad support (pinch-to-zoom) and momentum var momentumTimer = null; + var trackpadGestureTimer = null; chart.on("wheel", function(evt) { // ctrlKey is set during pinch gestures on trackpads if (evt.ctrlKey || evt.altKey || spacebarPressed) { @@ -717,8 +718,41 @@ RED.view = (function() { evt.originalEvent.pageY - offset.top ]; var delta = evt.originalEvent.deltaY; - if (delta > 0) { zoomOut(cursorPos); } - else if (delta < 0) { zoomIn(cursorPos); } + + // For trackpad pinch (Ctrl+wheel), use smooth proportional zoom + if (evt.ctrlKey && !evt.altKey && !spacebarPressed) { + // Use the zoom animator's delta calculation for trackpad + // Invert delta: spreading fingers (negative deltaY) should zoom in + var scaleDelta = RED.view.zoomAnimator.calculateZoomDelta(scaleFactor, -delta, true); + var newScale = Math.min(RED.view.zoomConstants.MAX_ZOOM, + Math.max(RED.view.zoomConstants.MIN_ZOOM, scaleFactor + scaleDelta)); + + // Start gesture tracking if not already active + if (!RED.view.zoomAnimator.isGestureActive()) { + RED.view.zoomAnimator.startGesture(cursorPos, scaleFactor); + } + + // Update gesture with new scale, maintaining focal point + RED.view.zoomAnimator.updateGesture(newScale); + zoomView(newScale, RED.view.zoomAnimator.getGestureFocalPoint()); // Direct call, no animation + + // Reset gesture timeout - end gesture when no more events come in + if (trackpadGestureTimer) { + clearTimeout(trackpadGestureTimer); + } + trackpadGestureTimer = setTimeout(function() { + RED.view.zoomAnimator.endGesture(); + trackpadGestureTimer = null; + // Store zoom level when gesture completes + if (RED.settings.get("editor.view.view-store-zoom")) { + RED.settings.setLocal('zoom-level', scaleFactor.toFixed(1)); + } + }, 100); // 100ms timeout to detect gesture end + } else { + // Regular Alt+scroll or Space+scroll - use animated zoom + if (delta > 0) { zoomOut(cursorPos); } + else if (delta < 0) { zoomIn(cursorPos); } + } } else { // Regular scroll - track velocity and apply momentum handleScroll(); From 782821b5906bfe95182dc54c099739b8fe7dd6ee Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 29 Sep 2025 18:03:52 +0200 Subject: [PATCH 014/160] Fix zoom focal point stability at canvas edges - Store focal point in workspace coordinates instead of screen coordinates - Prevents focal point drift when scroll changes due to canvas boundaries - Maintains consistent zoom focus even when view shifts at edges - Add early return in zoomView() to prevent unnecessary updates at zoom limits - Improve gesture state management for both trackpad and touch gestures --- .../src/js/ui/view-zoom-animator.js | 43 +++++++-- .../@node-red/editor-client/src/js/ui/view.js | 88 ++++++++++++++----- 2 files changed, 101 insertions(+), 30 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js index 1a3238a625..bfb3d76864 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js @@ -148,20 +148,35 @@ RED.view.zoomAnimator = (function() { */ const gestureState = { active: false, - initialFocalPoint: null, + initialFocalPoint: null, // Will store workspace coordinates initialScale: 1, currentScale: 1, - lastDistance: 0 + lastDistance: 0, + scrollPosAtStart: null, // Store initial scroll position + scaleFatorAtStart: 1 // Store initial scale factor }; /** * Start a zoom gesture with fixed focal point - * @param {Array} focalPoint - [x, y] coordinates of focal point + * @param {Array} focalPoint - [x, y] coordinates of focal point in workspace * @param {number} scale - Initial scale value + * @param {Array} scrollPos - Current scroll position [x, y] + * @param {number} currentScaleFactor - Current scale factor for coordinate conversion */ - function startGesture(focalPoint, scale) { + function startGesture(focalPoint, scale, scrollPos, currentScaleFactor) { gestureState.active = true; - gestureState.initialFocalPoint = focalPoint ? [...focalPoint] : null; + // Store the focal point in workspace coordinates for stability + // This ensures the point remains fixed even if scroll changes due to canvas edge constraints + if (focalPoint && scrollPos && currentScaleFactor) { + gestureState.initialFocalPoint = [ + (scrollPos[0] + focalPoint[0]) / currentScaleFactor, + (scrollPos[1] + focalPoint[1]) / currentScaleFactor + ]; + gestureState.scrollPosAtStart = [...scrollPos]; + gestureState.scaleFatorAtStart = currentScaleFactor; + } else { + gestureState.initialFocalPoint = focalPoint ? [...focalPoint] : null; + } gestureState.initialScale = scale; gestureState.currentScale = scale; return gestureState; @@ -204,8 +219,24 @@ RED.view.zoomAnimator = (function() { /** * Get the fixed focal point for the current gesture + * @param {Array} currentScrollPos - Current scroll position [x, y] + * @param {number} currentScaleFactor - Current scale factor + * @returns {Array} - Focal point in screen coordinates or null */ - function getGestureFocalPoint() { + function getGestureFocalPoint(currentScrollPos, currentScaleFactor) { + if (!gestureState.initialFocalPoint) { + return null; + } + + // If we stored workspace coordinates, convert back to screen coordinates + if (gestureState.scrollPosAtStart && currentScrollPos && currentScaleFactor) { + // Convert workspace coordinates back to current screen coordinates + return [ + gestureState.initialFocalPoint[0] * currentScaleFactor - currentScrollPos[0], + gestureState.initialFocalPoint[1] * currentScaleFactor - currentScrollPos[1] + ]; + } + return gestureState.initialFocalPoint; } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index e3336caeef..1c9a97506e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -439,12 +439,12 @@ RED.view = (function() { initialDistance: startTouchDistance }; - // Start gesture with fixed focal point (screen coordinates) + // Start gesture with fixed focal point (store in workspace coordinates) var focalPoint = [ (touch0["pageX"] + touch1["pageX"]) / 2 - offset.left, (touch0["pageY"] + touch1["pageY"]) / 2 - offset.top ]; - RED.view.zoomAnimator.startGesture(focalPoint, scaleFactor); + RED.view.zoomAnimator.startGesture(focalPoint, scaleFactor, scrollPos, scaleFactor); } else { var obj = d3.select(document.body); touch0 = d3.event.touches.item(0); @@ -504,20 +504,27 @@ RED.view = (function() { // Use gesture state management to maintain fixed focal point var gestureState = RED.view.zoomAnimator.updateGesture(newScaleFactor); - if (gestureState && gestureState.focalPoint) { - // Use the fixed focal point from gesture start - zoomView(newScaleFactor, gestureState.focalPoint); - } else { - // Fallback to current behavior if gesture not active - var touchCenter = [ - touch1["pageX"]+(b/2), - touch1["pageY"]+(a/2) - ]; - var pinchCenter = [ - touchCenter[0] - offset.left, - touchCenter[1] - offset.top - ]; - zoomView(newScaleFactor, pinchCenter); + // Only call zoomView if scale is actually changing (not at limits) + if (Math.abs(scaleFactor - newScaleFactor) >= 0.001) { + // Get focal point converted back to current screen coordinates + var currentScrollPos = [chart.scrollLeft(), chart.scrollTop()]; + var focalPoint = RED.view.zoomAnimator.getGestureFocalPoint(currentScrollPos, scaleFactor); + + if (focalPoint) { + // Use the fixed focal point from gesture start (converted from workspace coords) + zoomView(newScaleFactor, focalPoint); + } else { + // Fallback to current behavior if gesture not active + var touchCenter = [ + touch1["pageX"]+(b/2), + touch1["pageY"]+(a/2) + ]; + var pinchCenter = [ + touchCenter[0] - offset.left, + touchCenter[1] - offset.top + ]; + zoomView(newScaleFactor, pinchCenter); + } } // Don't update startTouchDistance - keep initial distance for ratio calculation @@ -706,11 +713,19 @@ RED.view = (function() { // Modern wheel event handler for better trackpad support (pinch-to-zoom) and momentum var momentumTimer = null; var trackpadGestureTimer = null; + var lastWheelEventTime = 0; + var wheelEventContinuityThreshold = 100; // Events within 100ms are same gesture + var gestureEndThreshold = 500; // 500ms+ gap means gesture ended + chart.on("wheel", function(evt) { // ctrlKey is set during pinch gestures on trackpads if (evt.ctrlKey || evt.altKey || spacebarPressed) { evt.preventDefault(); evt.stopPropagation(); + + var currentTime = Date.now(); + var timeSinceLastEvent = currentTime - lastWheelEventTime; + // Get cursor position relative to the chart var offset = chart.offset(); var cursorPos = [ @@ -727,16 +742,35 @@ RED.view = (function() { var newScale = Math.min(RED.view.zoomConstants.MAX_ZOOM, Math.max(RED.view.zoomConstants.MIN_ZOOM, scaleFactor + scaleDelta)); - // Start gesture tracking if not already active - if (!RED.view.zoomAnimator.isGestureActive()) { - RED.view.zoomAnimator.startGesture(cursorPos, scaleFactor); - } + // Session-based gesture tracking: + // - If no active gesture OR gap > gestureEndThreshold, start new gesture + // - If gap < wheelEventContinuityThreshold, continue current gesture + // - If gap between continuity and end threshold, keep current gesture but don't update focal point - // Update gesture with new scale, maintaining focal point + if (!RED.view.zoomAnimator.isGestureActive() || timeSinceLastEvent > gestureEndThreshold) { + // Start new gesture session - store focal point in workspace coordinates + var scrollPos = [chart.scrollLeft(), chart.scrollTop()]; + RED.view.zoomAnimator.startGesture(cursorPos, scaleFactor, scrollPos, scaleFactor); + } else if (timeSinceLastEvent <= wheelEventContinuityThreshold) { + // Events are continuous - this is the same gesture, focal point remains locked + // No need to update focal point + } + // For gaps between continuity and end threshold, keep existing gesture state + + // Update gesture with new scale, maintaining locked focal point RED.view.zoomAnimator.updateGesture(newScale); - zoomView(newScale, RED.view.zoomAnimator.getGestureFocalPoint()); // Direct call, no animation + // Only call zoomView if scale is actually changing (not at limits) + if (Math.abs(scaleFactor - newScale) >= 0.001) { + // Get focal point converted back to current screen coordinates + var currentScrollPos = [chart.scrollLeft(), chart.scrollTop()]; + var focalPoint = RED.view.zoomAnimator.getGestureFocalPoint(currentScrollPos, scaleFactor); + zoomView(newScale, focalPoint); // Direct call, no animation + } + + // Update last event time for continuity tracking + lastWheelEventTime = currentTime; - // Reset gesture timeout - end gesture when no more events come in + // Reset gesture timeout - end gesture when no more events come in for gestureEndThreshold if (trackpadGestureTimer) { clearTimeout(trackpadGestureTimer); } @@ -747,7 +781,7 @@ RED.view = (function() { if (RED.settings.get("editor.view.view-store-zoom")) { RED.settings.setLocal('zoom-level', scaleFactor.toFixed(1)); } - }, 100); // 100ms timeout to detect gesture end + }, gestureEndThreshold); // Use 500ms timeout for gesture end detection } else { // Regular Alt+scroll or Space+scroll - use animated zoom if (delta > 0) { zoomOut(cursorPos); } @@ -2660,6 +2694,12 @@ RED.view = (function() { function zoomView(factor, focalPoint) { + // Early return if scale factor isn't actually changing + // This prevents focal point shifts when at zoom limits + if (Math.abs(scaleFactor - factor) < 0.001) { + return; + } + var screenSize = [chart.width(),chart.height()]; var scrollPos = [chart.scrollLeft(),chart.scrollTop()]; From 541977312e3ed27141f3097b07b217532ad26e8e Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 29 Sep 2025 18:15:09 +0200 Subject: [PATCH 015/160] Improve zoom smoothness and control - Make mouse wheel zoom smooth without jarring animations - Reduce zoom acceleration from 2x to 1.2x max - Slow down zoom velocity by 40-50% for better control - Add asymmetric zoom speeds (zoom out slower than zoom in) - Reduce acceleration range to 0.7-1.1 for gentler transitions - Disable legacy mousewheel handler in favor of modern wheel event --- .../src/js/ui/view-zoom-animator.js | 11 ++--- .../@node-red/editor-client/src/js/ui/view.js | 44 +++++++++++-------- 2 files changed, 32 insertions(+), 23 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js index bfb3d76864..7938ca0de1 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js @@ -130,15 +130,16 @@ RED.view.zoomAnimator = (function() { if (isTrackpad) { // Trackpad deltas are typically smaller and more frequent - normalizedDelta = delta * 0.01; + normalizedDelta = delta * 0.005; // Reduced from 0.01 for gentler zoom } else { // Mouse wheel deltas are larger and less frequent - normalizedDelta = delta > 0 ? 0.1 : -0.1; + // Reduce zoom out speed more than zoom in + normalizedDelta = delta > 0 ? 0.06 : -0.08; // Reduced from 0.1, asymmetric for gentler zoom out } - // Apply acceleration based on current zoom level - // Zoom faster when zoomed out, slower when zoomed in - const acceleration = Math.max(0.5, Math.min(2, 1 / currentScale)); + // Apply gentler acceleration based on current zoom level + // Less aggressive acceleration to prevent rapid zoom out + const acceleration = Math.max(0.7, Math.min(1.1, 1 / currentScale)); // Reduced from 0.5-1.2 to 0.7-1.1 return normalizedDelta * acceleration; } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 1c9a97506e..4776d7ade1 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -694,21 +694,22 @@ RED.view = (function() { RED.popover.tooltip($("#red-ui-view-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset'); $("#red-ui-view-zoom-in").on("click", zoomOut); RED.popover.tooltip($("#red-ui-view-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in'); - chart.on("DOMMouseScroll mousewheel", function (evt) { - if ( evt.altKey || spacebarPressed ) { - evt.preventDefault(); - evt.stopPropagation(); - // Get cursor position relative to the chart - var offset = chart.offset(); - var cursorPos = [ - evt.originalEvent.pageX - offset.left, - evt.originalEvent.pageY - offset.top - ]; - var move = -(evt.originalEvent.detail) || evt.originalEvent.wheelDelta; - if (move <= 0) { zoomOut(cursorPos); } - else { zoomIn(cursorPos); } - } - }); + // Legacy mouse wheel handler - disabled in favor of modern wheel event + // chart.on("DOMMouseScroll mousewheel", function (evt) { + // if ( evt.altKey || spacebarPressed ) { + // evt.preventDefault(); + // evt.stopPropagation(); + // // Get cursor position relative to the chart + // var offset = chart.offset(); + // var cursorPos = [ + // evt.originalEvent.pageX - offset.left, + // evt.originalEvent.pageY - offset.top + // ]; + // var move = -(evt.originalEvent.detail) || evt.originalEvent.wheelDelta; + // if (move <= 0) { zoomOut(cursorPos); } + // else { zoomIn(cursorPos); } + // } + // }); // Modern wheel event handler for better trackpad support (pinch-to-zoom) and momentum var momentumTimer = null; @@ -783,9 +784,16 @@ RED.view = (function() { } }, gestureEndThreshold); // Use 500ms timeout for gesture end detection } else { - // Regular Alt+scroll or Space+scroll - use animated zoom - if (delta > 0) { zoomOut(cursorPos); } - else if (delta < 0) { zoomIn(cursorPos); } + // Regular Alt+scroll or Space+scroll - use smooth zoom without animation + // Use the zoom animator's delta calculation for mouse wheel + var scaleDelta = RED.view.zoomAnimator.calculateZoomDelta(scaleFactor, -delta, false); + var newScale = Math.min(RED.view.zoomConstants.MAX_ZOOM, + Math.max(RED.view.zoomConstants.MIN_ZOOM, scaleFactor + scaleDelta)); + + // Only zoom if scale is actually changing + if (Math.abs(scaleFactor - newScale) >= 0.001) { + zoomView(newScale, cursorPos); // Direct call, no animation for smoother feel + } } } else { // Regular scroll - track velocity and apply momentum From 3e2fb858216c439c21075920103a1e9bbd27b5ee Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 29 Sep 2025 18:39:55 +0200 Subject: [PATCH 016/160] Add two-finger panning and spacebar+click panning - Implement spacebar+left-click panning for desktop - Add two-finger pan gesture for touch devices - Use mode locking to prevent laggy gesture switching - Lock into pan or zoom mode based on initial movement - Fix focal point regression caused by pan/zoom interaction - Improve gesture detection with better thresholds (10px for zoom, 5px for pan) --- .../@node-red/editor-client/src/js/ui/view.js | 103 +++++++++++++----- 1 file changed, 76 insertions(+), 27 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 4776d7ade1..eee88a20df 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -436,7 +436,8 @@ RED.view = (function() { // Store initial scale for ratio-based zoom calculation gesture = { initialScale: scaleFactor, - initialDistance: startTouchDistance + initialDistance: startTouchDistance, + mode: null // Will be determined on first significant move }; // Start gesture with fixed focal point (store in workspace coordinates) @@ -494,37 +495,75 @@ RED.view = (function() { var offset = chart.offset(); var scrollPos = [chart.scrollLeft(),chart.scrollTop()]; var moveTouchDistance = Math.sqrt((a*a)+(b*b)); + + // Calculate center point of two fingers + var currentTouchCenter = [ + (touch0["pageX"] + touch1["pageX"]) / 2, + (touch0["pageY"] + touch1["pageY"]) / 2 + ]; if (!isNaN(moveTouchDistance)) { - oldScaleFactor = scaleFactor; - // Use smooth ratio-based scaling for natural pinch-to-zoom - var zoomRatio = moveTouchDistance / startTouchDistance; - var newScaleFactor = Math.min(2, Math.max(0.3, gesture.initialScale * zoomRatio)); - - // Use gesture state management to maintain fixed focal point - var gestureState = RED.view.zoomAnimator.updateGesture(newScaleFactor); + // Determine gesture mode on first significant movement + if (!gesture.mode) { + var distanceChange = Math.abs(moveTouchDistance - startTouchDistance); + var centerChange = moveTouchCenter ? + Math.sqrt(Math.pow(currentTouchCenter[0] - moveTouchCenter[0], 2) + + Math.pow(currentTouchCenter[1] - moveTouchCenter[1], 2)) : 0; + + // Lock into zoom mode if distance changes significantly (>10px) + // Lock into pan mode if center moves significantly (>5px) without distance change + if (distanceChange > 10) { + gesture.mode = 'zoom'; + } else if (centerChange > 5) { + gesture.mode = 'pan'; + } + } - // Only call zoomView if scale is actually changing (not at limits) - if (Math.abs(scaleFactor - newScaleFactor) >= 0.001) { - // Get focal point converted back to current screen coordinates - var currentScrollPos = [chart.scrollLeft(), chart.scrollTop()]; - var focalPoint = RED.view.zoomAnimator.getGestureFocalPoint(currentScrollPos, scaleFactor); + // Once mode is determined, stay in that mode for the entire gesture + if (gesture.mode === 'zoom') { + oldScaleFactor = scaleFactor; + // Use smooth ratio-based scaling for natural pinch-to-zoom + var zoomRatio = moveTouchDistance / startTouchDistance; + var newScaleFactor = Math.min(2, Math.max(0.3, gesture.initialScale * zoomRatio)); + + // Use gesture state management to maintain fixed focal point + var gestureState = RED.view.zoomAnimator.updateGesture(newScaleFactor); - if (focalPoint) { - // Use the fixed focal point from gesture start (converted from workspace coords) - zoomView(newScaleFactor, focalPoint); - } else { - // Fallback to current behavior if gesture not active - var touchCenter = [ - touch1["pageX"]+(b/2), - touch1["pageY"]+(a/2) - ]; - var pinchCenter = [ - touchCenter[0] - offset.left, - touchCenter[1] - offset.top - ]; - zoomView(newScaleFactor, pinchCenter); + // Only call zoomView if scale is actually changing (not at limits) + if (Math.abs(scaleFactor - newScaleFactor) >= 0.001) { + // Get focal point converted back to current screen coordinates + var currentScrollPos = [chart.scrollLeft(), chart.scrollTop()]; + var focalPoint = RED.view.zoomAnimator.getGestureFocalPoint(currentScrollPos, scaleFactor); + + if (focalPoint) { + // Use the fixed focal point from gesture start (converted from workspace coords) + zoomView(newScaleFactor, focalPoint); + } else { + // Fallback to current behavior if gesture not active + var touchCenter = [ + touch1["pageX"]+(b/2), + touch1["pageY"]+(a/2) + ]; + var pinchCenter = [ + touchCenter[0] - offset.left, + touchCenter[1] - offset.top + ]; + zoomView(newScaleFactor, pinchCenter); + } + } + } else if (gesture.mode === 'pan' || !gesture.mode) { + // Two-finger pan: allow immediate panning even if mode not determined + if (moveTouchCenter) { + var dx = currentTouchCenter[0] - moveTouchCenter[0]; + var dy = currentTouchCenter[1] - moveTouchCenter[1]; + + // Pan the canvas + var currentScroll = [chart.scrollLeft(), chart.scrollTop()]; + chart.scrollLeft(currentScroll[0] - dx); + chart.scrollTop(currentScroll[1] - dy); } + // Update the center for next move + moveTouchCenter = currentTouchCenter; } // Don't update startTouchDistance - keep initial distance for ratio calculation @@ -1443,6 +1482,16 @@ RED.view = (function() { return; } + // Spacebar + left click for panning + if (spacebarPressed && d3.event.button === 0) { + d3.event.preventDefault(); + d3.event.stopPropagation(); + mouse_mode = RED.state.PANNING; + mouse_position = [d3.event.pageX,d3.event.pageY] + scroll_position = [chart.scrollLeft(),chart.scrollTop()]; + return; + } + if (d3.event.button === 1) { // Middle Click pan d3.event.preventDefault(); From bf73261ecb52d88858bc2aef3bf4096d5748295d Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 29 Sep 2025 18:49:07 +0200 Subject: [PATCH 017/160] Prevent UI pinch-to-zoom while keeping canvas zoomable - Add touch-action CSS to prevent pinch-zoom on UI elements - Apply touch-action: pan-x pan-y to html, body, and editor - Apply touch-action: none to canvas for custom gestures - Add JavaScript prevention for touchpad pinch on non-canvas areas - Block Ctrl+wheel events outside the workspace chart --- .../node_modules/@node-red/editor-client/src/js/ui/view.js | 7 +++++++ .../@node-red/editor-client/src/sass/base.scss | 4 +++- .../@node-red/editor-client/src/sass/workspace.scss | 1 + 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index eee88a20df..a18292f514 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -757,6 +757,13 @@ RED.view = (function() { var wheelEventContinuityThreshold = 100; // Events within 100ms are same gesture var gestureEndThreshold = 500; // 500ms+ gap means gesture ended + // Prevent browser zoom on non-canvas areas + document.addEventListener("wheel", function(e) { + if (e.ctrlKey && !e.target.closest('#red-ui-workspace-chart')) { + e.preventDefault(); + } + }, { passive: false }); + chart.on("wheel", function(evt) { // ctrlKey is set during pinch gestures on trackpads if (evt.ctrlKey || evt.altKey || spacebarPressed) { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss index afbafe049b..fecedf8839 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss @@ -17,8 +17,9 @@ **/ -body { +html, body { overflow: hidden; + touch-action: pan-x pan-y; } .red-ui-editor { @@ -29,6 +30,7 @@ body { background: var(--red-ui-primary-background); color: var(--red-ui-primary-text-color); line-height: 20px; + touch-action: pan-x pan-y; } #red-ui-editor { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss index 95b8b4b458..7e03b063f5 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss @@ -37,6 +37,7 @@ right:0px; box-sizing:border-box; transition: right 0.2s ease; + touch-action: none; &:focus { outline: none; } From 4938833227a3640af17e3aa8ed7bfa5364cd54be Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 29 Sep 2025 18:57:39 +0200 Subject: [PATCH 018/160] Fix zoom gesture detection after two-finger panning Clear touchStartTime timeout when entering two-finger pan mode to prevent interference with subsequent zoom gestures. The timeout was being used for long-press detection but wasn't cleared during pan, causing the next gesture to incorrectly maintain the old touch state. --- .../node_modules/@node-red/editor-client/src/js/ui/view.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index a18292f514..dad9cdb214 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -553,6 +553,11 @@ RED.view = (function() { } } else if (gesture.mode === 'pan' || !gesture.mode) { // Two-finger pan: allow immediate panning even if mode not determined + // Clear touchStartTime to prevent issues with next gesture + if (touchStartTime) { + clearTimeout(touchStartTime); + touchStartTime = null; + } if (moveTouchCenter) { var dx = currentTouchCenter[0] - moveTouchCenter[0]; var dy = currentTouchCenter[1] - moveTouchCenter[1]; From b4c3faf03490731f7c49b9c19444528c5954cea0 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 29 Sep 2025 19:36:13 +0200 Subject: [PATCH 019/160] Implement dynamic zoom limits to match canvas boundaries - Add calculateMinZoom() function to dynamically compute minimum zoom based on viewport size - Ensure canvas always covers the entire viewport (no empty space visible) - Use 'cover' behavior: zoom limited so canvas fills viewport completely - Update all zoom methods (buttons, wheel, trackpad, touch) to use calculated minimum - Prevent zooming out beyond what's needed to fill the viewport with canvas content --- .../src/js/ui/view-zoom-constants.js | 2 +- .../@node-red/editor-client/src/js/ui/view.js | 34 ++++++++++++++++--- 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js index e983b473e7..ff32bb92d1 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js @@ -3,7 +3,7 @@ */ RED.view.zoomConstants = { // Zoom limits - MIN_ZOOM: 0.3, + MIN_ZOOM: 0.15, // Default minimum, will be dynamically calculated to fit canvas MAX_ZOOM: 2.0, // Zoom step for keyboard/button controls diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index dad9cdb214..e613758478 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -524,7 +524,9 @@ RED.view = (function() { oldScaleFactor = scaleFactor; // Use smooth ratio-based scaling for natural pinch-to-zoom var zoomRatio = moveTouchDistance / startTouchDistance; - var newScaleFactor = Math.min(2, Math.max(0.3, gesture.initialScale * zoomRatio)); + var minZoom = calculateMinZoom(); + var newScaleFactor = Math.min(RED.view.zoomConstants.MAX_ZOOM, + Math.max(minZoom, gesture.initialScale * zoomRatio)); // Use gesture state management to maintain fixed focal point var gestureState = RED.view.zoomAnimator.updateGesture(newScaleFactor); @@ -791,8 +793,9 @@ RED.view = (function() { // Use the zoom animator's delta calculation for trackpad // Invert delta: spreading fingers (negative deltaY) should zoom in var scaleDelta = RED.view.zoomAnimator.calculateZoomDelta(scaleFactor, -delta, true); + var minZoom = calculateMinZoom(); var newScale = Math.min(RED.view.zoomConstants.MAX_ZOOM, - Math.max(RED.view.zoomConstants.MIN_ZOOM, scaleFactor + scaleDelta)); + Math.max(minZoom, scaleFactor + scaleDelta)); // Session-based gesture tracking: // - If no active gesture OR gap > gestureEndThreshold, start new gesture @@ -2746,14 +2749,32 @@ RED.view = (function() { } + function calculateMinZoom() { + // Calculate the minimum zoom to ensure canvas always fills the viewport (no empty space) + var viewportWidth = chart.width(); + var viewportHeight = chart.height(); + + // Canvas is 8000x8000, calculate zoom to cover viewport + var zoomToFitWidth = viewportWidth / space_width; + var zoomToFitHeight = viewportHeight / space_height; + + // Use the LARGER zoom to ensure canvas covers entire viewport (no empty space visible) + var calculatedMinZoom = Math.max(zoomToFitWidth, zoomToFitHeight); + + // Return the larger of the calculated min or the configured min + // This ensures canvas always fills the viewport + return Math.max(calculatedMinZoom, RED.view.zoomConstants.MIN_ZOOM); + } + function zoomIn(focalPoint) { if (scaleFactor < RED.view.zoomConstants.MAX_ZOOM) { animatedZoomView(scaleFactor + RED.view.zoomConstants.ZOOM_STEP, focalPoint); } } function zoomOut(focalPoint) { - if (scaleFactor > RED.view.zoomConstants.MIN_ZOOM) { - animatedZoomView(scaleFactor - RED.view.zoomConstants.ZOOM_STEP, focalPoint); + var minZoom = calculateMinZoom(); + if (scaleFactor > minZoom) { + animatedZoomView(Math.max(scaleFactor - RED.view.zoomConstants.ZOOM_STEP, minZoom), focalPoint); } } function zoomZero() { animatedZoomView(1); } @@ -2812,8 +2833,11 @@ RED.view = (function() { cancelInProgressAnimation = null; } + // Calculate the actual minimum zoom to fit canvas + var minZoom = calculateMinZoom(); + // Clamp target factor to valid range - targetFactor = Math.max(RED.view.zoomConstants.MIN_ZOOM, + targetFactor = Math.max(minZoom, Math.min(RED.view.zoomConstants.MAX_ZOOM, targetFactor)); // If we're already at the target, no need to animate From 7dca55fdb8187ea10e70168ab774e0b7a6e6beae Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 29 Sep 2025 20:04:26 +0200 Subject: [PATCH 020/160] Add dynamic minimum zoom recalculation on viewport resize - Recalculate minimum zoom when window resizes to ensure canvas fits properly - Automatically adjust zoom if current level falls below new minimum after resize - Ensures canvas boundaries remain appropriate for different viewport sizes --- .../editor-client/src/js/ui/view-zoom-constants.js | 2 +- .../@node-red/editor-client/src/js/ui/view.js | 10 ++++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js index ff32bb92d1..92e0f526cd 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js @@ -3,7 +3,7 @@ */ RED.view.zoomConstants = { // Zoom limits - MIN_ZOOM: 0.15, // Default minimum, will be dynamically calculated to fit canvas + MIN_ZOOM: 0.05, // Default minimum, will be dynamically calculated to fit canvas MAX_ZOOM: 2.0, // Zoom step for keyboard/button controls diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index e613758478..bbe0438c79 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -640,6 +640,16 @@ RED.view = (function() { spacebarPressed = false; } }) + + // Recalculate minimum zoom when window resizes + $(window).on("resize.red-ui-view", function() { + // Recalculate minimum zoom to ensure canvas fits in viewport + var newMinZoom = calculateMinZoom(); + // If current zoom is below new minimum, adjust it + if (scaleFactor < newMinZoom) { + zoomView(newMinZoom); + } + }) // Workspace Background eventLayer.append("svg:rect") From 6725fd64267a4b3d5b4380d13ff87dd2e60ca2a8 Mon Sep 17 00:00:00 2001 From: Dimitrie Hoekstra Date: Mon, 29 Sep 2025 20:15:30 +0200 Subject: [PATCH 021/160] Hide scrollbars and add auto-show/hide minimap on navigation - Hide scrollbars on canvas while keeping it scrollable - Add minimap auto-show functionality that triggers on zoom and pan - Minimap appears for 2 seconds during navigation then fades out - Add smooth fade in/out animations for minimap visibility - Emit view:navigate events for all zoom and pan operations - Minimap stays visible if manually toggled with button --- .../editor-client/src/js/ui/view-navigator.js | 59 +++++++++++++++++-- .../@node-red/editor-client/src/js/ui/view.js | 6 ++ .../editor-client/src/sass/workspace.scss | 18 ++++++ 3 files changed, 79 insertions(+), 4 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js index 6450d45bd9..9042657289 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js @@ -31,6 +31,8 @@ var dimensions; var isDragging; var isShowing = false; + var autoHideTimeout; + var isManuallyToggled = false; function refreshNodes() { if (!isShowing) { @@ -68,19 +70,59 @@ function toggle() { if (!isShowing) { isShowing = true; + isManuallyToggled = true; + clearTimeout(autoHideTimeout); $("#red-ui-view-navigate").addClass("selected"); resizeNavBorder(); refreshNodes(); $("#red-ui-workspace-chart").on("scroll",onScroll); - navContainer.fadeIn(200); + navContainer.addClass('red-ui-navigator-container'); + navContainer.show(); + setTimeout(function() { + navContainer.addClass('red-ui-navigator-visible'); + }, 10); } else { isShowing = false; - navContainer.fadeOut(100); + isManuallyToggled = false; + clearTimeout(autoHideTimeout); + navContainer.removeClass('red-ui-navigator-visible'); + setTimeout(function() { + navContainer.hide(); + }, 300); $("#red-ui-workspace-chart").off("scroll",onScroll); $("#red-ui-view-navigate").removeClass("selected"); } } + function showTemporary() { + if (!isManuallyToggled) { + clearTimeout(autoHideTimeout); + + if (!isShowing) { + isShowing = true; + resizeNavBorder(); + refreshNodes(); + $("#red-ui-workspace-chart").on("scroll",onScroll); + navContainer.addClass('red-ui-navigator-container'); + navContainer.show(); + setTimeout(function() { + navContainer.addClass('red-ui-navigator-visible'); + }, 10); + } + + autoHideTimeout = setTimeout(function() { + if (!isManuallyToggled && isShowing) { + isShowing = false; + navContainer.removeClass('red-ui-navigator-visible'); + setTimeout(function() { + navContainer.hide(); + }, 300); + $("#red-ui-workspace-chart").off("scroll",onScroll); + } + }, 2000); + } + } + return { init: function() { @@ -94,7 +136,7 @@ "bottom":$("#red-ui-workspace-footer").height(), "right":0, zIndex: 1 - }).appendTo("#red-ui-workspace").hide(); + }).addClass('red-ui-navigator-container').appendTo("#red-ui-workspace").hide(); navBox = d3.select(navContainer[0]) .append("svg:svg") @@ -148,10 +190,19 @@ toggle(); }) RED.popover.tooltip($("#red-ui-view-navigate"),RED._('actions.toggle-navigator'),'core:toggle-navigator'); + + // Listen for canvas interactions to show minimap temporarily + RED.events.on("view:selection-changed", function() { + showTemporary(); + }); + RED.events.on("view:navigate", function() { + showTemporary(); + }); }, refresh: refreshNodes, resize: resizeNavBorder, - toggle: toggle + toggle: toggle, + showTemporary: showTemporary } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index bbe0438c79..3f322cf0d4 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -480,6 +480,7 @@ RED.view = (function() { mouse_mode = RED.state.PANNING; mouse_position = [touch0.pageX,touch0.pageY] scroll_position = [chart.scrollLeft(),chart.scrollTop()]; + RED.events.emit("view:navigate"); } } @@ -568,6 +569,7 @@ RED.view = (function() { var currentScroll = [chart.scrollLeft(), chart.scrollTop()]; chart.scrollLeft(currentScroll[0] - dx); chart.scrollTop(currentScroll[1] - dy); + RED.events.emit("view:navigate"); } // Update the center for next move moveTouchCenter = currentTouchCenter; @@ -1514,6 +1516,7 @@ RED.view = (function() { mouse_mode = RED.state.PANNING; mouse_position = [d3.event.pageX,d3.event.pageY] scroll_position = [chart.scrollLeft(),chart.scrollTop()]; + RED.events.emit("view:navigate"); return; } @@ -1523,6 +1526,7 @@ RED.view = (function() { mouse_mode = RED.state.PANNING; mouse_position = [d3.event.pageX,d3.event.pageY] scroll_position = [chart.scrollLeft(),chart.scrollTop()]; + RED.events.emit("view:navigate"); return; } if (d3.event.button === 2) { @@ -2080,6 +2084,7 @@ RED.view = (function() { chart.scrollLeft(scroll_position[0]+deltaPos[0]) chart.scrollTop(scroll_position[1]+deltaPos[1]) + RED.events.emit("view:navigate"); return } @@ -2831,6 +2836,7 @@ RED.view = (function() { RED.view.navigator.resize(); redraw(); + RED.events.emit("view:navigate"); if (RED.settings.get("editor.view.view-store-zoom")) { RED.settings.setLocal('zoom-level', factor.toFixed(1)) } diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss index 7e03b063f5..46be67158f 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss @@ -38,6 +38,15 @@ box-sizing:border-box; transition: right 0.2s ease; touch-action: none; + + // Hide scrollbars + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* Internet Explorer 10+ */ + &::-webkit-scrollbar { /* WebKit */ + width: 0; + height: 0; + } + &:focus { outline: none; } @@ -151,6 +160,15 @@ background: var(--red-ui-view-navigator-background); box-shadow: -1px 0 3px var(--red-ui-shadow); } + +.red-ui-navigator-container { + transition: opacity 0.3s ease; + opacity: 0; + + &.red-ui-navigator-visible { + opacity: 1; + } +} .red-ui-navigator-border { stroke-dasharray: 5,5; pointer-events: none; From 08a5d04df62b96f52c150752b771a6271493cb29 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 12:17:54 +0200 Subject: [PATCH 022/160] Enable diagonal trackpad panning - Prevent browser's native axis-locked scroll behavior - Manually handle both deltaX and deltaY in wheel event handler - Update touch-action CSS from pan-x pan-y to manipulation - Add documentation of fix to CANVAS_INTERACTION.md Fixes issue where trackpad scrolling was restricted to horizontal or vertical movement only, not both simultaneously. --- CANVAS_INTERACTION.md | 221 ++++++++++++++++++ .../@node-red/editor-client/src/js/ui/view.js | 13 +- .../editor-client/src/sass/base.scss | 4 +- 3 files changed, 235 insertions(+), 3 deletions(-) create mode 100644 CANVAS_INTERACTION.md diff --git a/CANVAS_INTERACTION.md b/CANVAS_INTERACTION.md new file mode 100644 index 0000000000..dc9ed398c7 --- /dev/null +++ b/CANVAS_INTERACTION.md @@ -0,0 +1,221 @@ +# Canvas Interaction Improvements + +This document tracks the ongoing improvements to Node-RED's canvas interaction across different devices, input methods, and browser zoom settings. + +## Objectives + +Improve canvas interaction to work consistently and intuitively across: +- **Browser zoom levels**: 100%, 125%, 150%, 200%, etc. +- **Input devices**: Mouse, trackpad, and touchscreen +- **Platforms**: Desktop (Windows, macOS, Linux) and mobile/tablet devices + +## What Has Been Implemented + +### Zoom Functionality + +#### Smooth Zoom Animation (commits: bdfa06b, a12b65b) +- ✅ 125ms smooth zoom transitions with ease-out curves +- ✅ Natural acceleration/deceleration for zoom operations +- ✅ Reduced acceleration from 2x to 1.2x max for better control +- ✅ Asymmetric zoom speeds (zoom out 40-50% slower than zoom in) +- ✅ Gentler acceleration range (0.7-1.1) for smoother transitions +- ✅ No jarring animations during mouse wheel zoom + +#### Zoom Input Methods (commits: e7a028b, bdfa06b) +- ✅ Mouse wheel zoom +- ✅ Space+scroll zoom mode (alternative to Alt+scroll) +- ✅ Trackpad pinch-to-zoom (Ctrl+wheel) +- ✅ Touch screen pinch-to-zoom with proper center tracking +- ✅ UI zoom buttons (corrected zoom in/out direction) + +#### Zoom Focal Point (commits: e42b09de, feec7ec, e7a028b) +- ✅ Cursor-centered zoom (focuses on cursor position) +- ✅ Store focal point in workspace coordinates instead of screen coordinates +- ✅ Prevents focal point drift when scroll changes due to canvas boundaries +- ✅ Maintains consistent zoom focus even when view shifts at edges +- ✅ Fixed focal point during pinch gestures + +#### Zoom Direction & Behavior (commits: 37f9786, bdfa06b) +- ✅ Fixed trackpad zoom direction (spreading fingers zooms in, pinching zooms out) +- ✅ Matches standard macOS trackpad behavior +- ✅ Proper ratio-based scaling for pinch gestures +- ✅ Scale lock issues fixed with improved tolerance handling + +#### Dynamic Zoom Limits (commits: 7918693, f13ed66) +- ✅ Calculate minimum zoom dynamically based on viewport size +- ✅ Ensure canvas always covers entire viewport (no empty space visible) +- ✅ Use 'cover' behavior: canvas fills viewport completely +- ✅ Recalculate minimum zoom on window resize +- ✅ Automatically adjust zoom if current level falls below new minimum after resize +- ✅ Prevent zooming out beyond what's needed to fill viewport + +### Panning Functionality + +#### Pan Input Methods (commit: feec7ec) +- ✅ Two-finger pan gesture for touch devices +- ✅ Spacebar+left-click panning for desktop +- ✅ Mode locking to prevent laggy gesture switching +- ✅ Lock into pan or zoom mode based on initial movement +- ✅ Better gesture detection thresholds (10px for zoom, 5px for pan) + +#### Scroll Behavior (commit: e7a028b) +- ✅ Momentum scrolling with edge bounce animation +- ✅ Enhanced spacebar handling to prevent scroll artifacts + +### UI/UX Enhancements + +#### Gesture State Management (commits: e42b09de, bdfa06b, 121982e) +- ✅ Improved gesture state management for trackpad and touch gestures +- ✅ Proper state cleanup when cursor leaves canvas +- ✅ Clear touchStartTime timeout when entering two-finger pan mode +- ✅ Prevent interference between long-press detection and pan gestures + +#### UI Pinch-Zoom Prevention (commit: e0c5b84) +- ✅ Prevent UI pinch-to-zoom while keeping canvas zoomable +- ✅ Apply `touch-action: pan-x pan-y` to html, body, and editor elements +- ✅ Apply `touch-action: none` to canvas for custom gestures +- ✅ JavaScript prevention for trackpad pinch on non-canvas areas +- ✅ Block Ctrl+wheel events outside the workspace chart + +#### Minimap Navigation (commit: 53dce6a) +- ✅ Auto-show minimap on zoom and pan operations +- ✅ Minimap appears for 2 seconds during navigation then fades out +- ✅ Smooth fade in/out animations for minimap visibility +- ✅ Minimap stays visible if manually toggled with button +- ✅ Emit `view:navigate` events for all zoom and pan operations + +#### Visual Polish (commit: 53dce6a) +- ✅ Hide scrollbars on canvas while keeping it scrollable +- ✅ Clean visual appearance without visible scrollbars + +### Code Architecture + +#### New Modules (commit: bdfa06b) +- ✅ `view-zoom-animator.js` - Zoom animation utilities (223 lines) +- ✅ `view-zoom-constants.js` - Zoom configuration constants (21 lines) +- ✅ Updated Gruntfile to include new zoom modules in build + +## Current Expectations + +### Cross-Device Consistency +- Zoom and pan should feel natural on mouse, trackpad, and touchscreen +- Gestures should be responsive without lag or mode switching artifacts +- Zoom focal point should remain stable regardless of input method + +### Browser Zoom Compatibility +- Canvas interaction should work correctly at all browser zoom levels +- UI elements should remain accessible and functional +- No layout breaking or interaction dead zones + +### Visual Feedback +- Minimap should provide contextual navigation feedback +- Smooth animations should make interactions feel polished +- No visual glitches or artifacts during zoom/pan operations + +### Performance +- All interactions should be smooth (60fps target) +- No janky animations or delayed responses +- Efficient gesture detection without excessive computation + +## Recent Fixes + +### Diagonal Trackpad Panning (Latest) +**Issue**: Trackpad scrolling was restricted to horizontal OR vertical movement, not both simultaneously. + +**Root Cause**: Browser's native scroll behavior on `overflow: auto` containers locks into one axis at a time, even before JavaScript wheel events fire. + +**Solution**: +- Added `evt.preventDefault()` and `evt.stopPropagation()` to regular scroll handling +- Manually apply both `deltaX` and `deltaY` to scrollLeft/scrollTop simultaneously +- Prevents browser's axis-locked scroll behavior from taking over +- Also updated CSS `touch-action` from `pan-x pan-y` to `manipulation` (though this primarily affects touch events, not trackpad) + +**Files Changed**: +- `view.js:864-890` - Added manual diagonal scroll handling +- `base.scss:22, 33` - Changed touch-action to manipulation + +**Result**: Trackpad can now pan diagonally without axis-locking. + +## Known Issues & Future Work + +### To Be Tested +- [ ] Comprehensive testing across different browser zoom levels (100%, 125%, 150%, 200%) +- [ ] Cross-browser testing (Chrome, Firefox, Safari, Edge) +- [ ] Testing on different touchscreen devices (tablets, touch-enabled laptops) +- [ ] Testing with different trackpad sensitivities and gesture settings +- [x] Diagonal trackpad panning (fixed) + +### Potential Improvements +- [ ] Additional fine-tuning of zoom speeds and acceleration curves based on user feedback +- [ ] Consider adding keyboard shortcuts for zoom reset (Ctrl+0 / Cmd+0) +- [ ] Evaluate need for custom zoom level indicator in UI +- [ ] Consider adding preferences for zoom/pan sensitivity + +### Edge Cases to Monitor +- [ ] Behavior when canvas content is very small or very large +- [ ] Interaction with browser accessibility features +- [ ] Performance with extremely large flows (100+ nodes) +- [ ] Multi-monitor scenarios with different DPI settings + +## Testing Checklist + +When verifying canvas interaction improvements: + +1. **Zoom Testing** + - [ ] Mouse wheel zoom in/out + - [ ] Space+scroll zoom + - [ ] Trackpad pinch gesture (spread = zoom in, pinch = zoom out) + - [ ] Touch screen pinch gesture + - [ ] UI zoom buttons + - [ ] Zoom focal point stays on cursor position + - [ ] Dynamic zoom limits prevent empty space + +2. **Pan Testing** + - [x] Two-finger pan on trackpad/touch + - [x] Diagonal panning works (not axis-locked) + - [x] Spacebar+click pan on desktop + - [x] Momentum scrolling with edge bounce + - [x] No lag when switching between pan and zoom + +3. **UI/UX Testing** + - [ ] Minimap auto-shows on navigation + - [ ] Minimap fades after 2 seconds + - [ ] No scrollbars visible on canvas + - [ ] No pinch-zoom on UI elements + - [ ] Gesture state cleanup on cursor exit + +4. **Browser Zoom Testing** + - [ ] Test at 100% browser zoom + - [ ] Test at 125% browser zoom + - [ ] Test at 150% browser zoom + - [ ] Test at 200% browser zoom + - [ ] Verify all interactions work at each zoom level + +## Files Modified + +Key files involved in canvas interaction improvements: + +- `packages/node_modules/@node-red/editor-client/src/js/ui/view.js` - Main view controller +- `packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js` - Zoom animations +- `packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js` - Zoom configuration +- `packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js` - Minimap controller +- `packages/node_modules/@node-red/editor-client/src/sass/workspace.scss` - Canvas styling +- `packages/node_modules/@node-red/editor-client/src/sass/base.scss` - Base UI styling +- `Gruntfile.js` - Build configuration + +## Commit History + +Interaction improvements span commits from e7a028b to present (12 commits total): + +1. `e7a028b` - feat: Add enhanced zoom and scroll features +2. `bdfa06b` - Implement smooth zoom functionality with pinch-to-zoom support +3. `37f9786` - Fix trackpad zoom direction - spreading fingers now zooms in +4. `e42b09d` - Fix zoom focal point stability at canvas edges +5. `a12b65b` - Improve zoom smoothness and control +6. `feec7ec` - Add two-finger panning and spacebar+click panning +7. `e0c5b84` - Prevent UI pinch-to-zoom while keeping canvas zoomable +8. `121982e` - Fix zoom gesture detection after two-finger panning +9. `7918693` - Implement dynamic zoom limits to match canvas boundaries +10. `f13ed66` - Add dynamic minimum zoom recalculation on viewport resize +11. `53dce6a` - Hide scrollbars and add auto-show/hide minimap on navigation +12. (current) - Enable diagonal trackpad panning by preventing axis-locked scroll \ No newline at end of file diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 3f322cf0d4..4c07335ac4 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -862,7 +862,18 @@ RED.view = (function() { } } } else { - // Regular scroll - track velocity and apply momentum + // Regular scroll - prevent default and manually handle both axes + evt.preventDefault(); + evt.stopPropagation(); + + // Apply scroll deltas directly to both axes + var deltaX = evt.originalEvent.deltaX; + var deltaY = evt.originalEvent.deltaY; + + chart.scrollLeft(chart.scrollLeft() + deltaX); + chart.scrollTop(chart.scrollTop() + deltaY); + + // Track velocity and apply momentum handleScroll(); // Cancel previous momentum timer diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss index fecedf8839..23aba42054 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss @@ -19,7 +19,7 @@ html, body { overflow: hidden; - touch-action: pan-x pan-y; + touch-action: manipulation; } .red-ui-editor { @@ -30,7 +30,7 @@ html, body { background: var(--red-ui-primary-background); color: var(--red-ui-primary-text-color); line-height: 20px; - touch-action: pan-x pan-y; + touch-action: manipulation; } #red-ui-editor { From 3bef2d6481d42d1c84ac01ed63089badb41745f7 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 12:39:11 +0200 Subject: [PATCH 023/160] Improve minimap auto-show behavior - Remove view:selection-changed listener to prevent minimap showing on node selection - Remove view:navigate emissions from pan mode entry points (no longer shows when starting pan) - Add view:navigate emission to touchpad scroll handler for consistent behavior - Minimap now only appears during actual panning and zooming actions The minimap previously showed when selecting nodes or just starting a pan gesture, causing unnecessary flashing. Now it only appears during actual navigation (pan/zoom) and fades after 2 seconds of inactivity. --- CANVAS_INTERACTION.md | 34 ++++++++++++++----- .../editor-client/src/js/ui/view-navigator.js | 4 +-- .../@node-red/editor-client/src/js/ui/view.js | 6 ++-- 3 files changed, 30 insertions(+), 14 deletions(-) diff --git a/CANVAS_INTERACTION.md b/CANVAS_INTERACTION.md index dc9ed398c7..918c15d0dd 100644 --- a/CANVAS_INTERACTION.md +++ b/CANVAS_INTERACTION.md @@ -119,7 +119,23 @@ Improve canvas interaction to work consistently and intuitively across: ## Recent Fixes -### Diagonal Trackpad Panning (Latest) +### Minimap Auto-Show Behavior (Latest) +**Issue**: Minimap was showing on selection changes and when entering pan mode (before actual panning), causing unnecessary flashing. + +**Solution**: +- Removed `view:selection-changed` event listener - minimap no longer shows when selecting nodes +- Removed `view:navigate` emissions from pan mode entry points (touch long-press, spacebar+click, middle-click) +- Added `view:navigate` emission to regular touchpad scroll handler for consistent behavior +- Kept emissions only during actual panning movement and zooming + +**Files Changed**: +- `view-navigator.js:195-198` - Removed selection-changed listener +- `view.js:483, 1529, 1539` - Removed navigate events from pan mode entry +- `view.js:876` - Added navigate event to touchpad scroll handler + +**Result**: Minimap now appears only during actual panning (touchpad or mouse) and zooming, not on selection or pan mode entry. + +### Diagonal Trackpad Panning **Issue**: Trackpad scrolling was restricted to horizontal OR vertical movement, not both simultaneously. **Root Cause**: Browser's native scroll behavior on `overflow: auto` containers locks into one axis at a time, even before JavaScript wheel events fire. @@ -178,11 +194,12 @@ When verifying canvas interaction improvements: - [x] No lag when switching between pan and zoom 3. **UI/UX Testing** - - [ ] Minimap auto-shows on navigation - - [ ] Minimap fades after 2 seconds - - [ ] No scrollbars visible on canvas - - [ ] No pinch-zoom on UI elements - - [ ] Gesture state cleanup on cursor exit + - [x] Minimap auto-shows during panning and zooming + - [x] Minimap does not show on selection changes + - [x] Minimap fades after 2 seconds + - [x] No scrollbars visible on canvas + - [x] No pinch-zoom on UI elements + - [x] Gesture state cleanup on cursor exit 4. **Browser Zoom Testing** - [ ] Test at 100% browser zoom @@ -205,7 +222,7 @@ Key files involved in canvas interaction improvements: ## Commit History -Interaction improvements span commits from e7a028b to present (12 commits total): +Interaction improvements span commits from e7a028b to present (13 commits total): 1. `e7a028b` - feat: Add enhanced zoom and scroll features 2. `bdfa06b` - Implement smooth zoom functionality with pinch-to-zoom support @@ -218,4 +235,5 @@ Interaction improvements span commits from e7a028b to present (12 commits total) 9. `7918693` - Implement dynamic zoom limits to match canvas boundaries 10. `f13ed66` - Add dynamic minimum zoom recalculation on viewport resize 11. `53dce6a` - Hide scrollbars and add auto-show/hide minimap on navigation -12. (current) - Enable diagonal trackpad panning by preventing axis-locked scroll \ No newline at end of file +12. `875db2c` - Enable diagonal trackpad panning by preventing axis-locked scroll +13. (current) - Improve minimap auto-show behavior to only trigger during actual navigation \ No newline at end of file diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js index 9042657289..c69c8337f7 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js @@ -192,9 +192,7 @@ RED.popover.tooltip($("#red-ui-view-navigate"),RED._('actions.toggle-navigator'),'core:toggle-navigator'); // Listen for canvas interactions to show minimap temporarily - RED.events.on("view:selection-changed", function() { - showTemporary(); - }); + // Only show on actual pan/zoom navigation, not selection changes RED.events.on("view:navigate", function() { showTemporary(); }); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 4c07335ac4..af555da74d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -480,7 +480,6 @@ RED.view = (function() { mouse_mode = RED.state.PANNING; mouse_position = [touch0.pageX,touch0.pageY] scroll_position = [chart.scrollLeft(),chart.scrollTop()]; - RED.events.emit("view:navigate"); } } @@ -873,6 +872,9 @@ RED.view = (function() { chart.scrollLeft(chart.scrollLeft() + deltaX); chart.scrollTop(chart.scrollTop() + deltaY); + // Emit navigate event for minimap + RED.events.emit("view:navigate"); + // Track velocity and apply momentum handleScroll(); @@ -1527,7 +1529,6 @@ RED.view = (function() { mouse_mode = RED.state.PANNING; mouse_position = [d3.event.pageX,d3.event.pageY] scroll_position = [chart.scrollLeft(),chart.scrollTop()]; - RED.events.emit("view:navigate"); return; } @@ -1537,7 +1538,6 @@ RED.view = (function() { mouse_mode = RED.state.PANNING; mouse_position = [d3.event.pageX,d3.event.pageY] scroll_position = [chart.scrollLeft(),chart.scrollTop()]; - RED.events.emit("view:navigate"); return; } if (d3.event.button === 2) { From 45f3b01125ff56de9442d53435db944d0c820b94 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 12:43:44 +0200 Subject: [PATCH 024/160] Fix spacebar hold causing unwanted canvas scrolling When holding spacebar, browsers fire repeated keydown events. The previous implementation only prevented default on the first keydown, allowing subsequent events to trigger browser's space-scroll behavior. Moved preventDefault() outside conditional to block all spacebar events. --- .../@node-red/editor-client/src/js/ui/view.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index af555da74d..a0dcfcd1ff 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -608,15 +608,14 @@ RED.view = (function() { // Handle spacebar for zoom mode function handleSpacebarToggle(e) { if (e.keyCode === 32 || e.key === ' ') { + // Always prevent default space scrolling behavior + e.preventDefault(); + e.stopPropagation(); + if (e.type === "keydown" && !spacebarPressed) { spacebarPressed = true; - // Prevent default space scrolling behavior - e.preventDefault(); - e.stopPropagation(); } else if (e.type === "keyup" && spacebarPressed) { spacebarPressed = false; - e.preventDefault(); - e.stopPropagation(); } } } From c07cce4fb0e619f82f649d9ab1725e0c02fbbfc9 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 12:47:10 +0200 Subject: [PATCH 025/160] Make Alt/Space scroll zoom speed match trackpad pinch zoom Alt+scroll and Space+scroll were using fixed zoom steps (0.06/0.08), making them zoom much faster than trackpad pinch zoom which uses proportional scaling (0.005 * delta). Changed to use trackpad-style proportional zoom for consistent feel across all zoom input methods. --- .../@node-red/editor-client/src/js/ui/view.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index a0dcfcd1ff..2b7c48965a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -849,11 +849,12 @@ RED.view = (function() { }, gestureEndThreshold); // Use 500ms timeout for gesture end detection } else { // Regular Alt+scroll or Space+scroll - use smooth zoom without animation - // Use the zoom animator's delta calculation for mouse wheel - var scaleDelta = RED.view.zoomAnimator.calculateZoomDelta(scaleFactor, -delta, false); - var newScale = Math.min(RED.view.zoomConstants.MAX_ZOOM, - Math.max(RED.view.zoomConstants.MIN_ZOOM, scaleFactor + scaleDelta)); - + // Use same proportional zoom as trackpad for consistent feel + var scaleDelta = RED.view.zoomAnimator.calculateZoomDelta(scaleFactor, -delta, true); + var minZoom = calculateMinZoom(); + var newScale = Math.min(RED.view.zoomConstants.MAX_ZOOM, + Math.max(minZoom, scaleFactor + scaleDelta)); + // Only zoom if scale is actually changing if (Math.abs(scaleFactor - newScale) >= 0.001) { zoomView(newScale, cursorPos); // Direct call, no animation for smoother feel From f132867a3130402ad5d70a799293526985562fe0 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 12:48:58 +0200 Subject: [PATCH 026/160] Add stable focal point tracking to Alt/Space scroll zoom Alt+scroll and Space+scroll zoom now maintain a fixed focal point like trackpad pinch zoom. Previously, the zoom point would drift during continuous scrolling. Implemented gesture session tracking that: - Stores focal point in workspace coordinates for stability - Locks focal point during continuous scroll events (< 100ms apart) - Ends gesture after 500ms of inactivity - Converts focal point back to screen coordinates for each zoom step This makes all zoom methods (pinch, Alt+scroll, Space+scroll) behave consistently with stable, cursor-centered zooming. --- .../@node-red/editor-client/src/js/ui/view.js | 33 ++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 2b7c48965a..3e5a8e0409 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -855,10 +855,41 @@ RED.view = (function() { var newScale = Math.min(RED.view.zoomConstants.MAX_ZOOM, Math.max(minZoom, scaleFactor + scaleDelta)); + // Use gesture tracking for stable focal point like trackpad pinch + if (!RED.view.zoomAnimator.isGestureActive() || timeSinceLastEvent > gestureEndThreshold) { + // Start new gesture session - store focal point in workspace coordinates + var scrollPos = [chart.scrollLeft(), chart.scrollTop()]; + RED.view.zoomAnimator.startGesture(cursorPos, scaleFactor, scrollPos, scaleFactor); + } else if (timeSinceLastEvent <= wheelEventContinuityThreshold) { + // Events are continuous - same gesture, focal point remains locked + } + + // Update gesture with new scale, maintaining locked focal point + RED.view.zoomAnimator.updateGesture(newScale); + // Only zoom if scale is actually changing if (Math.abs(scaleFactor - newScale) >= 0.001) { - zoomView(newScale, cursorPos); // Direct call, no animation for smoother feel + // Get focal point converted back to current screen coordinates + var currentScrollPos = [chart.scrollLeft(), chart.scrollTop()]; + var focalPoint = RED.view.zoomAnimator.getGestureFocalPoint(currentScrollPos, scaleFactor); + zoomView(newScale, focalPoint); } + + // Update last event time for continuity tracking + lastWheelEventTime = currentTime; + + // Reset gesture timeout + if (trackpadGestureTimer) { + clearTimeout(trackpadGestureTimer); + } + trackpadGestureTimer = setTimeout(function() { + RED.view.zoomAnimator.endGesture(); + trackpadGestureTimer = null; + // Store zoom level when gesture completes + if (RED.settings.get("editor.view.view-store-zoom")) { + RED.settings.setLocal('zoom-level', scaleFactor.toFixed(1)); + } + }, gestureEndThreshold); } } else { // Regular scroll - prevent default and manually handle both axes From cdde99b9ab6de892f7e077669a78d30c62273244 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 13:11:02 +0200 Subject: [PATCH 027/160] Add scroll spacer to fix scrollable area at minimum zoom When at minimum zoom with "cover" behavior, the SVG canvas may be smaller than the viewport in one dimension. This causes the browser's scrollWidth/scrollHeight to be limited by the SVG size rather than the full canvas extent. Added an invisible spacer div that matches the scaled canvas dimensions, ensuring the scrollable area always reflects the actual canvas size. This allows proper scrolling to reach all canvas edges without going beyond canvas boundaries. --- .../@node-red/editor-client/src/js/ui/view.js | 33 +++++++++++++++++-- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 3e5a8e0409..5b9843ae19 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -336,6 +336,24 @@ RED.view = (function() { function init() { chart = $("#red-ui-workspace-chart"); + + // Add invisible spacer div to ensure scrollable area matches canvas dimensions + // At minimum zoom with "cover" behavior, SVG may be smaller than viewport in one dimension + // This spacer forces the browser to calculate scrollWidth/Height based on full canvas size + // Browser's maxScroll = scrollWidth - viewport will then correctly show canvas edges + var scrollSpacer = $('
') + .css({ + position: 'absolute', + top: 0, + left: 0, + width: space_width + 'px', + height: space_height + 'px', + pointerEvents: 'none', + visibility: 'hidden' + }) + .attr('id', 'red-ui-workspace-scroll-spacer') + .appendTo(chart); + chart.on('contextmenu', function(evt) { if (RED.view.DEBUG) { console.warn("contextmenu", { mouse_mode, event: d3.event }); @@ -2810,14 +2828,14 @@ RED.view = (function() { // Calculate the minimum zoom to ensure canvas always fills the viewport (no empty space) var viewportWidth = chart.width(); var viewportHeight = chart.height(); - + // Canvas is 8000x8000, calculate zoom to cover viewport var zoomToFitWidth = viewportWidth / space_width; var zoomToFitHeight = viewportHeight / space_height; - + // Use the LARGER zoom to ensure canvas covers entire viewport (no empty space visible) var calculatedMinZoom = Math.max(zoomToFitWidth, zoomToFitHeight); - + // Return the larger of the calculated min or the configured min // This ensures canvas always fills the viewport return Math.max(calculatedMinZoom, RED.view.zoomConstants.MIN_ZOOM); @@ -4969,6 +4987,15 @@ RED.view = (function() { eventLayer.attr("transform","scale("+scaleFactor+")"); outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor); + // Update scroll spacer to match scaled canvas size + // This ensures scrollable area = canvas area + // Browser calculates maxScroll = scrollWidth - viewport, which correctly + // allows scrolling to see the far edges of canvas without going beyond + $('#red-ui-workspace-scroll-spacer').css({ + width: (space_width * scaleFactor) + 'px', + height: (space_height * scaleFactor) + 'px' + }); + // Don't bother redrawing nodes if we're drawing links if (showAllLinkPorts !== -1 || mouse_mode != RED.state.JOINING) { From f718069b46f0aabd9f80f6a2f0a866c834c908a2 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 13:15:05 +0200 Subject: [PATCH 028/160] Fix minimap viewport position at non-1.0 zoom levels The minimap was treating scroll position as workspace coordinates, but scrollLeft/scrollTop are actually in scaled canvas pixels. At zoom levels other than 1.0, this caused the viewport rectangle to appear in the wrong position. For example, at 2x zoom viewing workspace position (500, 500), the scroll position would be 1000px, and the minimap would incorrectly show it at workspace position 1000. Fixed by converting scroll position to workspace coordinates first: position = scrollPos / scaleFactor / nav_scale The viewport rectangle now accurately reflects the actual visible area at all zoom levels. --- .../@node-red/editor-client/src/js/ui/view-navigator.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js index c69c8337f7..5b1eb89255 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js @@ -61,8 +61,11 @@ scaleFactor = RED.view.scale(); chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()]; scrollPos = [$("#red-ui-workspace-chart").scrollLeft(),$("#red-ui-workspace-chart").scrollTop()]; - navBorder.attr('x',scrollPos[0]/nav_scale) - .attr('y',scrollPos[1]/nav_scale) + + // Convert scroll position (in scaled pixels) to workspace coordinates, then to minimap coordinates + // scrollPos is in scaled canvas pixels, divide by scaleFactor to get workspace coords + navBorder.attr('x',scrollPos[0]/scaleFactor/nav_scale) + .attr('y',scrollPos[1]/scaleFactor/nav_scale) .attr('width',chartSize[0]/nav_scale/scaleFactor) .attr('height',chartSize[1]/nav_scale/scaleFactor) } From 48b6fb353dc5203b7ad883d9092f4de9519f2478 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 13:21:58 +0200 Subject: [PATCH 029/160] Fix grey padding at canvas bottom by resetting SVG margins Remove 5px grey space that appeared at bottom of canvas when scrolled to maximum position. The viewport scrollHeight was 8005px instead of 8000px due to default browser SVG margins. - Add explicit padding and margin resets to workspace chart container - Set SVG to display:block with zero margin/padding to prevent spacing - Ensures scrollable area exactly matches 8000px canvas dimensions --- CANVAS_INTERACTION.md | 16 +++++++++++++++- .../editor-client/src/sass/workspace.scss | 13 +++++++++++-- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/CANVAS_INTERACTION.md b/CANVAS_INTERACTION.md index 918c15d0dd..b9d6619da4 100644 --- a/CANVAS_INTERACTION.md +++ b/CANVAS_INTERACTION.md @@ -119,7 +119,21 @@ Improve canvas interaction to work consistently and intuitively across: ## Recent Fixes -### Minimap Auto-Show Behavior (Latest) +### Spacebar Hold Scrolling Bug (Latest) +**Issue**: When holding spacebar down, the canvas would move down unexpectedly, making the space+scroll interaction buggy. + +**Root Cause**: The `preventDefault()` was only called on the first spacebar keydown event. When spacebar is held, browsers fire repeated keydown events. After the first keydown set `spacebarPressed = true`, subsequent keydown events weren't prevented because the condition `e.type === "keydown" && !spacebarPressed` failed, allowing browser's default space-scroll behavior. + +**Solution**: +- Moved `preventDefault()` and `stopPropagation()` outside the conditional checks +- Now blocks ALL spacebar events (both keydown repeats and keyup), not just the first keydown + +**Files Changed**: +- `view.js:611-619` - Restructured spacebar event handler to always prevent default + +**Result**: Holding spacebar no longer causes unwanted canvas scrolling. + +### Minimap Auto-Show Behavior **Issue**: Minimap was showing on selection changes and when entering pan mode (before actual panning), causing unnecessary flashing. **Solution**: diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss index 46be67158f..a29932e9df 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss @@ -38,7 +38,9 @@ box-sizing:border-box; transition: right 0.2s ease; touch-action: none; - + padding: 0; + margin: 0; + // Hide scrollbars scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer 10+ */ @@ -46,7 +48,14 @@ width: 0; height: 0; } - + + // Reset SVG default margins + > svg { + display: block; + margin: 0; + padding: 0; + } + &:focus { outline: none; } From c5209d8ea297b94688626552cbd310b08b39d2d7 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 13:32:18 +0200 Subject: [PATCH 030/160] Add zoom-to-fit button to show all nodes at once Add fourth zoom button that calculates bounding box of all active nodes and zooms out to fit them all in viewport with padding. - Add compress icon button to zoom controls in footer - Implement zoomToFitAll() function with bounding box calculation - Add 80px padding around nodes for visual breathing room - Respect dynamic minimum zoom limit - Center viewport on bounding box after zoom animation - Register core:zoom-fit action for keyboard shortcut support - Update documentation with new zoom-to-fit feature --- CANVAS_INTERACTION.md | 37 +++++++--- .../@node-red/editor-client/src/js/ui/view.js | 72 +++++++++++++++++++ 2 files changed, 101 insertions(+), 8 deletions(-) diff --git a/CANVAS_INTERACTION.md b/CANVAS_INTERACTION.md index b9d6619da4..16261b2c60 100644 --- a/CANVAS_INTERACTION.md +++ b/CANVAS_INTERACTION.md @@ -23,10 +23,14 @@ Improve canvas interaction to work consistently and intuitively across: #### Zoom Input Methods (commits: e7a028b, bdfa06b) - ✅ Mouse wheel zoom -- ✅ Space+scroll zoom mode (alternative to Alt+scroll) -- ✅ Trackpad pinch-to-zoom (Ctrl+wheel) -- ✅ Touch screen pinch-to-zoom with proper center tracking +- ✅ Alt+scroll zoom mode (keyboard modifier alternative) +- ✅ Space+scroll zoom mode (keyboard modifier alternative) +- ✅ Trackpad pinch-to-zoom (browsers translate to Ctrl+wheel events) +- ✅ Touch screen pinch-to-zoom with proper center tracking (direct touch events) - ✅ UI zoom buttons (corrected zoom in/out direction) +- ✅ Zoom-to-fit button (zooms out to show all nodes with padding, respects minimum zoom) + +**Note**: Ctrl+wheel is used for trackpad pinch gestures on desktop. Browsers automatically translate two-finger pinch gestures on trackpads into Ctrl+wheel events. This is separate from touchscreen pinch-to-zoom, which uses direct touch events (touchstart/touchmove/touchend). #### Zoom Focal Point (commits: e42b09de, feec7ec, e7a028b) - ✅ Cursor-centered zoom (focuses on cursor position) @@ -119,7 +123,22 @@ Improve canvas interaction to work consistently and intuitively across: ## Recent Fixes -### Spacebar Hold Scrolling Bug (Latest) +### Grey Padding at Canvas Bottom (Latest) +**Issue**: When scrolled to the bottom of the canvas, 5 pixels of grey space appeared below the grid, allowing users to scroll slightly beyond the canvas boundary. + +**Root Cause**: Default browser margins on SVG elements caused the viewport's `scrollHeight` to be 8005px instead of 8000px, creating extra scrollable area beyond the canvas. + +**Solution**: +- Added explicit `padding: 0` and `margin: 0` to `#red-ui-workspace-chart` container +- Added `display: block`, `margin: 0`, and `padding: 0` to SVG element via `#red-ui-workspace-chart > svg` selector +- The `display: block` prevents inline element spacing issues + +**Files Changed**: +- `workspace.scss:41-42, 52-57` - Added margin/padding resets for container and SVG + +**Result**: Canvas now has exact 8000px scrollable area with no grey padding visible at bottom. + +### Spacebar Hold Scrolling Bug **Issue**: When holding spacebar down, the canvas would move down unexpectedly, making the space+scroll interaction buggy. **Root Cause**: The `preventDefault()` was only called on the first spacebar keydown event. When spacebar is held, browsers fire repeated keydown events. After the first keydown set `spacebarPressed = true`, subsequent keydown events weren't prevented because the condition `e.type === "keydown" && !spacebarPressed` failed, allowing browser's default space-scroll behavior. @@ -193,10 +212,12 @@ When verifying canvas interaction improvements: 1. **Zoom Testing** - [ ] Mouse wheel zoom in/out - - [ ] Space+scroll zoom - - [ ] Trackpad pinch gesture (spread = zoom in, pinch = zoom out) - - [ ] Touch screen pinch gesture - - [ ] UI zoom buttons + - [ ] Alt+scroll zoom (keyboard modifier) + - [ ] Space+scroll zoom (keyboard modifier) + - [ ] Trackpad pinch gesture (spread = zoom in, pinch = zoom out, generates Ctrl+wheel) + - [ ] Touch screen pinch gesture (direct touch events) + - [ ] UI zoom buttons (zoom in, zoom out, reset) + - [ ] Zoom-to-fit button (shows all nodes with padding, respects min zoom) - [ ] Zoom focal point stays on cursor position - [ ] Dynamic zoom limits prevent empty space diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 5b9843ae19..312193a1e8 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -759,6 +759,7 @@ RED.view = (function() { ''+ ''+ ''+ + ''+ '') }) @@ -768,6 +769,8 @@ RED.view = (function() { RED.popover.tooltip($("#red-ui-view-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset'); $("#red-ui-view-zoom-in").on("click", zoomOut); RED.popover.tooltip($("#red-ui-view-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in'); + $("#red-ui-view-zoom-fit").on("click", zoomToFitAll); + RED.popover.tooltip($("#red-ui-view-zoom-fit"),RED._('actions.zoom-fit'),'core:zoom-fit'); // Legacy mouse wheel handler - disabled in favor of modern wheel event // chart.on("DOMMouseScroll mousewheel", function (evt) { // if ( evt.altKey || spacebarPressed ) { @@ -1176,6 +1179,7 @@ RED.view = (function() { RED.actions.add("core:zoom-in",zoomIn); RED.actions.add("core:zoom-out",zoomOut); RED.actions.add("core:zoom-reset",zoomZero); + RED.actions.add("core:zoom-fit",zoomToFitAll); RED.actions.add("core:enable-selected-nodes", function() { setSelectedNodeState(false)}); RED.actions.add("core:disable-selected-nodes", function() { setSelectedNodeState(true)}); @@ -2853,6 +2857,74 @@ RED.view = (function() { } } function zoomZero() { animatedZoomView(1); } + + function zoomToFitAll() { + // Get all nodes in active workspace + if (!activeNodes || activeNodes.length === 0) { + return; // No nodes to fit + } + + // Calculate bounding box of all nodes + var minX = Infinity, minY = Infinity; + var maxX = -Infinity, maxY = -Infinity; + + activeNodes.forEach(function(node) { + var nodeLeft = node.x - node.w / 2; + var nodeRight = node.x + node.w / 2; + var nodeTop = node.y - node.h / 2; + var nodeBottom = node.y + node.h / 2; + + minX = Math.min(minX, nodeLeft); + maxX = Math.max(maxX, nodeRight); + minY = Math.min(minY, nodeTop); + maxY = Math.max(maxY, nodeBottom); + }); + + // Add padding around nodes for visual breathing room + var padding = 80; + minX -= padding; + minY -= padding; + maxX += padding; + maxY += padding; + + // Calculate dimensions of bounding box + var boundingWidth = maxX - minX; + var boundingHeight = maxY - minY; + + // Get viewport dimensions + var viewportWidth = chart.width(); + var viewportHeight = chart.height(); + + // Calculate zoom level that fits bounding box in viewport + var zoomX = viewportWidth / boundingWidth; + var zoomY = viewportHeight / boundingHeight; + var targetZoom = Math.min(zoomX, zoomY); + + // Respect minimum and maximum zoom limits + var minZoom = calculateMinZoom(); + targetZoom = Math.max(minZoom, Math.min(RED.view.zoomConstants.MAX_ZOOM, targetZoom)); + + // Calculate center point of bounding box as focal point + var centerX = (minX + maxX) / 2; + var centerY = (minY + maxY) / 2; + + // Convert to screen coordinates for focal point + // We want to center the bounding box in the viewport + var focalPoint = [viewportWidth / 2, viewportHeight / 2]; + + // First zoom to target level + animatedZoomView(targetZoom, focalPoint); + + // Then scroll to center the bounding box + // Wait for zoom animation to complete before scrolling + setTimeout(function() { + var scrollLeft = centerX * targetZoom - viewportWidth / 2; + var scrollTop = centerY * targetZoom - viewportHeight / 2; + chart.scrollLeft(scrollLeft); + chart.scrollTop(scrollTop); + }, RED.view.zoomConstants.DEFAULT_ZOOM_DURATION + 50); + } + function searchFlows() { RED.actions.invoke("core:search", $(this).data("term")); } function searchPrev() { RED.actions.invoke("core:search-previous"); } function searchNext() { RED.actions.invoke("core:search-next"); } From e2a6a1b52d553201d04ab38f4730c69a9c6f69ec Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 13:33:37 +0200 Subject: [PATCH 031/160] Fix zoom button handlers - zoom in/out were reversed --- .../node_modules/@node-red/editor-client/src/js/ui/view.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 312193a1e8..607a676819 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -763,11 +763,11 @@ RED.view = (function() { '') }) - $("#red-ui-view-zoom-out").on("click", zoomIn); + $("#red-ui-view-zoom-out").on("click", zoomOut); RED.popover.tooltip($("#red-ui-view-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out'); $("#red-ui-view-zoom-zero").on("click", zoomZero); RED.popover.tooltip($("#red-ui-view-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset'); - $("#red-ui-view-zoom-in").on("click", zoomOut); + $("#red-ui-view-zoom-in").on("click", zoomIn); RED.popover.tooltip($("#red-ui-view-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in'); $("#red-ui-view-zoom-fit").on("click", zoomToFitAll); RED.popover.tooltip($("#red-ui-view-zoom-fit"),RED._('actions.zoom-fit'),'core:zoom-fit'); From 269cab2e9c16c4e0b12dbbf6cfd5fe4b947bb2f4 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 13:35:09 +0200 Subject: [PATCH 032/160] Move zoom-to-fit button between reset and zoom-in --- packages/node_modules/@node-red/editor-client/src/js/ui/view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 607a676819..8161f5f9a7 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -758,8 +758,8 @@ RED.view = (function() { element: $(''+ ''+ ''+ - ''+ ''+ + ''+ '') }) From f6decfd58991645885efe12b72e399ee6e07fa7c Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 13:36:34 +0200 Subject: [PATCH 033/160] Revert "Move zoom-to-fit button between reset and zoom-in" This reverts commit e46cfc9479b2db429d4f73c981e1886b6c0cbbca. --- packages/node_modules/@node-red/editor-client/src/js/ui/view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 8161f5f9a7..607a676819 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -758,8 +758,8 @@ RED.view = (function() { element: $(''+ ''+ ''+ - ''+ ''+ + ''+ '') }) From f74beb6a924f39d01f7b1b497bdfaf42429b5c98 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 13:39:52 +0200 Subject: [PATCH 034/160] Add Ctrl+1/Cmd+1 keyboard shortcut for zoom-to-fit --- .../node_modules/@node-red/editor-client/src/js/keymap.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/keymap.json b/packages/node_modules/@node-red/editor-client/src/js/keymap.json index 4cf28d2279..697205f3aa 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/keymap.json +++ b/packages/node_modules/@node-red/editor-client/src/js/keymap.json @@ -91,7 +91,8 @@ "alt-shift-w": "core:show-last-hidden-flow", "ctrl-+": "core:zoom-in", "ctrl--": "core:zoom-out", - "ctrl-0": "core:zoom-reset" + "ctrl-0": "core:zoom-reset", + "ctrl-1": "core:zoom-fit" }, "red-ui-editor-stack": { "ctrl-enter": "core:confirm-edit-tray", From 8286ec81316894e81613e549ff561a21ebcff2f5 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 13:43:36 +0200 Subject: [PATCH 035/160] Remove animation from zoom buttons for instant, smooth zooming Replace animatedZoomView() with direct zoomView() calls for zoom buttons and keyboard shortcuts to eliminate jagged animation caused by redraw() being called on every frame. - Change zoomIn/zoomOut/zoomZero to use instant zoom like trackpad - Single redraw per zoom step instead of 8-10 redraws during animation - Makes all zoom methods (buttons, keyboard, trackpad) feel consistent - Keep animatedZoomView() only for zoomToFitAll() where animation helps Fixes stuttering when zooming with buttons or Ctrl+/-/0 shortcuts. --- .../node_modules/@node-red/editor-client/src/js/ui/view.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 607a676819..e71993663d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -2847,16 +2847,16 @@ RED.view = (function() { function zoomIn(focalPoint) { if (scaleFactor < RED.view.zoomConstants.MAX_ZOOM) { - animatedZoomView(scaleFactor + RED.view.zoomConstants.ZOOM_STEP, focalPoint); + zoomView(scaleFactor + RED.view.zoomConstants.ZOOM_STEP, focalPoint); } } function zoomOut(focalPoint) { var minZoom = calculateMinZoom(); if (scaleFactor > minZoom) { - animatedZoomView(Math.max(scaleFactor - RED.view.zoomConstants.ZOOM_STEP, minZoom), focalPoint); + zoomView(Math.max(scaleFactor - RED.view.zoomConstants.ZOOM_STEP, minZoom), focalPoint); } } - function zoomZero() { animatedZoomView(1); } + function zoomZero() { zoomView(1); } function zoomToFitAll() { // Get all nodes in active workspace From a1854806afd728f7103844994b774828bae7dac5 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 13:45:40 +0200 Subject: [PATCH 036/160] Fix viewport drift when using zoom buttons without focal point --- .../@node-red/editor-client/src/js/ui/view.js | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index e71993663d..ac7992f0ab 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -2940,32 +2940,30 @@ RED.view = (function() { var screenSize = [chart.width(),chart.height()]; var scrollPos = [chart.scrollLeft(),chart.scrollTop()]; - // Use focal point if provided (e.g., cursor position), otherwise use viewport center + // Calculate workspace coordinates of the point that should remain fixed var center; if (focalPoint) { // focalPoint is in screen coordinates, convert to workspace coordinates center = [(scrollPos[0] + focalPoint[0])/scaleFactor, (scrollPos[1] + focalPoint[1])/scaleFactor]; } else { - // Default to viewport center - center = [(scrollPos[0] + screenSize[0]/2)/scaleFactor,(scrollPos[1] + screenSize[1]/2)/scaleFactor]; + // Default to viewport center in workspace coordinates + center = [(scrollPos[0] + screenSize[0]/2)/scaleFactor, (scrollPos[1] + screenSize[1]/2)/scaleFactor]; } var oldScaleFactor = scaleFactor; scaleFactor = factor; - // Calculate where the focal point will be after zoom - var newCenter; + // Calculate new scroll position to keep the center point at the same screen position if (focalPoint) { // Keep the focal point at the same screen position - newCenter = [(scrollPos[0] + focalPoint[0])/scaleFactor, (scrollPos[1] + focalPoint[1])/scaleFactor]; + chart.scrollLeft(center[0] * scaleFactor - focalPoint[0]); + chart.scrollTop(center[1] * scaleFactor - focalPoint[1]); } else { - newCenter = [(scrollPos[0] + screenSize[0]/2)/scaleFactor,(scrollPos[1] + screenSize[1]/2)/scaleFactor]; + // Keep viewport center on the same workspace coordinates + chart.scrollLeft(center[0] * scaleFactor - screenSize[0]/2); + chart.scrollTop(center[1] * scaleFactor - screenSize[1]/2); } - var delta = [(newCenter[0]-center[0])*scaleFactor,(newCenter[1]-center[1])*scaleFactor] - chart.scrollLeft(scrollPos[0]-delta[0]); - chart.scrollTop(scrollPos[1]-delta[1]); - RED.view.navigator.resize(); redraw(); RED.events.emit("view:navigate"); From 324ca525160f81660c6892803d5f5a04a4f7e1a1 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 13:46:44 +0200 Subject: [PATCH 037/160] Fix zoom center calculation to use oldScaleFactor consistently --- .../node_modules/@node-red/editor-client/src/js/ui/view.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index ac7992f0ab..6589522a04 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -2939,18 +2939,18 @@ RED.view = (function() { var screenSize = [chart.width(),chart.height()]; var scrollPos = [chart.scrollLeft(),chart.scrollTop()]; + var oldScaleFactor = scaleFactor; // Calculate workspace coordinates of the point that should remain fixed var center; if (focalPoint) { // focalPoint is in screen coordinates, convert to workspace coordinates - center = [(scrollPos[0] + focalPoint[0])/scaleFactor, (scrollPos[1] + focalPoint[1])/scaleFactor]; + center = [(scrollPos[0] + focalPoint[0])/oldScaleFactor, (scrollPos[1] + focalPoint[1])/oldScaleFactor]; } else { // Default to viewport center in workspace coordinates - center = [(scrollPos[0] + screenSize[0]/2)/scaleFactor, (scrollPos[1] + screenSize[1]/2)/scaleFactor]; + center = [(scrollPos[0] + screenSize[0]/2)/oldScaleFactor, (scrollPos[1] + screenSize[1]/2)/oldScaleFactor]; } - var oldScaleFactor = scaleFactor; scaleFactor = factor; // Calculate new scroll position to keep the center point at the same screen position From 95b750060f03c970a41da4b03e3627647a3742d4 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 14:12:51 +0200 Subject: [PATCH 038/160] Fix zoom button animation and improve performance - Fixed viewport jump to 0,0 by preventing click event from being passed as focal point - Added smooth animation to zoom buttons and keyboard shortcuts (animatedZoomView) - Doubled zoom step from 0.1 to 0.2 for faster zooming - Optimized animation performance by only updating transforms during animation frames - Fixed undefined variable issue (vis/gridScale -> eventLayer/outer) - Full redraw only happens once at end of animation, eliminating jarring experience --- .../src/js/ui/view-zoom-constants.js | 2 +- .../@node-red/editor-client/src/js/ui/view.js | 27 ++++++++++++------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js index 92e0f526cd..9b10afd82e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js @@ -7,7 +7,7 @@ RED.view.zoomConstants = { MAX_ZOOM: 2.0, // Zoom step for keyboard/button controls - ZOOM_STEP: 0.1, + ZOOM_STEP: 0.2, // Animation settings DEFAULT_ZOOM_DURATION: 125, // ms, faster animation diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 6589522a04..89ed5a35c1 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -763,11 +763,11 @@ RED.view = (function() { '') }) - $("#red-ui-view-zoom-out").on("click", zoomOut); + $("#red-ui-view-zoom-out").on("click", function() { zoomOut(); }); RED.popover.tooltip($("#red-ui-view-zoom-out"),RED._('actions.zoom-out'),'core:zoom-out'); $("#red-ui-view-zoom-zero").on("click", zoomZero); RED.popover.tooltip($("#red-ui-view-zoom-zero"),RED._('actions.zoom-reset'),'core:zoom-reset'); - $("#red-ui-view-zoom-in").on("click", zoomIn); + $("#red-ui-view-zoom-in").on("click", function() { zoomIn(); }); RED.popover.tooltip($("#red-ui-view-zoom-in"),RED._('actions.zoom-in'),'core:zoom-in'); $("#red-ui-view-zoom-fit").on("click", zoomToFitAll); RED.popover.tooltip($("#red-ui-view-zoom-fit"),RED._('actions.zoom-fit'),'core:zoom-fit'); @@ -2847,16 +2847,16 @@ RED.view = (function() { function zoomIn(focalPoint) { if (scaleFactor < RED.view.zoomConstants.MAX_ZOOM) { - zoomView(scaleFactor + RED.view.zoomConstants.ZOOM_STEP, focalPoint); + animatedZoomView(scaleFactor + RED.view.zoomConstants.ZOOM_STEP, focalPoint); } } function zoomOut(focalPoint) { var minZoom = calculateMinZoom(); if (scaleFactor > minZoom) { - zoomView(Math.max(scaleFactor - RED.view.zoomConstants.ZOOM_STEP, minZoom), focalPoint); + animatedZoomView(Math.max(scaleFactor - RED.view.zoomConstants.ZOOM_STEP, minZoom), focalPoint); } } - function zoomZero() { zoomView(1); } + function zoomZero() { animatedZoomView(1); } function zoomToFitAll() { // Get all nodes in active workspace @@ -2931,12 +2931,14 @@ RED.view = (function() { function zoomView(factor, focalPoint) { + console.log('=== ZOOM VIEW CALLED ===', 'factor:', factor, 'focalPoint:', focalPoint); // Early return if scale factor isn't actually changing // This prevents focal point shifts when at zoom limits if (Math.abs(scaleFactor - factor) < 0.001) { + console.log('Zoom view SKIPPED - already at target zoom'); return; } - + var screenSize = [chart.width(),chart.height()]; var scrollPos = [chart.scrollLeft(),chart.scrollTop()]; var oldScaleFactor = scaleFactor; @@ -2960,8 +2962,10 @@ RED.view = (function() { chart.scrollTop(center[1] * scaleFactor - focalPoint[1]); } else { // Keep viewport center on the same workspace coordinates - chart.scrollLeft(center[0] * scaleFactor - screenSize[0]/2); - chart.scrollTop(center[1] * scaleFactor - screenSize[1]/2); + var newScrollLeft = center[0] * scaleFactor - screenSize[0]/2; + var newScrollTop = center[1] * scaleFactor - screenSize[1]/2; + chart.scrollLeft(newScrollLeft); + chart.scrollTop(newScrollTop); } RED.view.navigator.resize(); @@ -3041,13 +3045,18 @@ RED.view = (function() { chart.scrollLeft(newScrollPos[0]); chart.scrollTop(newScrollPos[1]); + // During animation, only update the scale transform, not the full redraw + // This is much more performant with many nodes + eventLayer.attr("transform", "scale(" + scaleFactor + ")"); + outer.attr("width", space_width * scaleFactor).attr("height", space_height * scaleFactor); RED.view.navigator.resize(); - redraw(); }, onEnd: function() { cancelInProgressAnimation = null; // Ensure scaleFactor is exactly the target to prevent precision issues scaleFactor = targetFactor; + // Full redraw at the end to ensure everything is correct + redraw(); if (RED.settings.get("editor.view.view-store-zoom")) { RED.settings.setLocal('zoom-level', targetFactor.toFixed(1)); } From 79918f0187646868841ad37b3582f00e5ac4ec2b Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 14:19:31 +0200 Subject: [PATCH 039/160] Add focal point locking for sequential button/hotkey zooms - Store workspace center on first button/hotkey zoom operation - Maintain same focal point for sequential zooms within 1 second timeout - Pass workspace center directly to animatedZoomView to prevent recalculation - Focal point always at viewport center with consistent workspace point - Works correctly at canvas edges where viewport may shift - Does not interfere with wheel/pinch zoom which provide explicit focal points --- .../@node-red/editor-client/src/js/ui/view.js | 78 +++++++++++++++++-- 1 file changed, 73 insertions(+), 5 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 89ed5a35c1..d120a094bb 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -2845,18 +2845,83 @@ RED.view = (function() { return Math.max(calculatedMinZoom, RED.view.zoomConstants.MIN_ZOOM); } + // Track focal point for sequential button/hotkey zoom operations + // Store in workspace coordinates so it remains valid after viewport shifts + var buttonZoomWorkspaceCenter = null; + var buttonZoomTimeout = null; + var BUTTON_ZOOM_FOCAL_TIMEOUT = 1000; // ms - time to keep same focal point + function zoomIn(focalPoint) { if (scaleFactor < RED.view.zoomConstants.MAX_ZOOM) { - animatedZoomView(scaleFactor + RED.view.zoomConstants.ZOOM_STEP, focalPoint); + var useFocalPoint = null; + + // If focalPoint is explicitly provided (e.g., from wheel/pinch), use it directly + if (focalPoint) { + useFocalPoint = focalPoint; + } else { + // For button/hotkey zoom, maintain the same workspace center across sequential zooms + if (!buttonZoomWorkspaceCenter) { + // First button zoom - calculate and store workspace center + var screenSize = [chart.width(), chart.height()]; + var scrollPos = [chart.scrollLeft(), chart.scrollTop()]; + // Convert viewport center to workspace coordinates + buttonZoomWorkspaceCenter = [ + (scrollPos[0] + screenSize[0]/2) / scaleFactor, + (scrollPos[1] + screenSize[1]/2) / scaleFactor + ]; + } + + // ALWAYS use viewport center as focal point (fixed screen position) + // The stored workspace center will be kept at this screen position + var screenSize = [chart.width(), chart.height()]; + useFocalPoint = [screenSize[0]/2, screenSize[1]/2]; + + // Reset timeout + clearTimeout(buttonZoomTimeout); + buttonZoomTimeout = setTimeout(function() { + buttonZoomWorkspaceCenter = null; + }, BUTTON_ZOOM_FOCAL_TIMEOUT); + } + + animatedZoomView(scaleFactor + RED.view.zoomConstants.ZOOM_STEP, useFocalPoint, buttonZoomWorkspaceCenter); } } function zoomOut(focalPoint) { var minZoom = calculateMinZoom(); if (scaleFactor > minZoom) { - animatedZoomView(Math.max(scaleFactor - RED.view.zoomConstants.ZOOM_STEP, minZoom), focalPoint); + var useFocalPoint = null; + + if (focalPoint) { + useFocalPoint = focalPoint; + } else { + if (!buttonZoomWorkspaceCenter) { + var screenSize = [chart.width(), chart.height()]; + var scrollPos = [chart.scrollLeft(), chart.scrollTop()]; + buttonZoomWorkspaceCenter = [ + (scrollPos[0] + screenSize[0]/2) / scaleFactor, + (scrollPos[1] + screenSize[1]/2) / scaleFactor + ]; + } + + // ALWAYS use viewport center as focal point (fixed screen position) + var screenSize = [chart.width(), chart.height()]; + useFocalPoint = [screenSize[0]/2, screenSize[1]/2]; + + clearTimeout(buttonZoomTimeout); + buttonZoomTimeout = setTimeout(function() { + buttonZoomWorkspaceCenter = null; + }, BUTTON_ZOOM_FOCAL_TIMEOUT); + } + + animatedZoomView(Math.max(scaleFactor - RED.view.zoomConstants.ZOOM_STEP, minZoom), useFocalPoint, buttonZoomWorkspaceCenter); } } - function zoomZero() { animatedZoomView(1); } + function zoomZero() { + // Reset button zoom focal point for zoom reset + clearTimeout(buttonZoomTimeout); + buttonZoomWorkspaceCenter = null; + animatedZoomView(1); + } function zoomToFitAll() { // Get all nodes in active workspace @@ -2976,7 +3041,7 @@ RED.view = (function() { } } - function animatedZoomView(targetFactor, focalPoint) { + function animatedZoomView(targetFactor, focalPoint, workspaceCenter) { // Cancel any in-progress animation if (cancelInProgressAnimation) { cancelInProgressAnimation(); @@ -3002,7 +3067,10 @@ RED.view = (function() { // Calculate the focal point in workspace coordinates (will remain constant) var center; - if (focalPoint) { + if (workspaceCenter) { + // Use the provided workspace center directly (for button zoom focal point locking) + center = workspaceCenter; + } else if (focalPoint) { // focalPoint is in screen coordinates, convert to workspace coordinates center = [(scrollPos[0] + focalPoint[0])/scaleFactor, (scrollPos[1] + focalPoint[1])/scaleFactor]; } else { From 47026ec744c1fb1cf8f79f59f3d4d4a80654d64c Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 14:21:52 +0200 Subject: [PATCH 040/160] Add minimap auto-show for zoom button/hotkey interactions - Emit view:navigate event in animatedZoomView onStart callback - Minimap now appears when using zoom buttons (in/out/reset/fit) - Minimap now appears when using zoom hotkeys (Ctrl+/-/0/1) - Auto-hides after 2 seconds as expected - Applies to all animated zoom operations consistently --- .../node_modules/@node-red/editor-client/src/js/ui/view.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index d120a094bb..51ad868284 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -3119,6 +3119,10 @@ RED.view = (function() { outer.attr("width", space_width * scaleFactor).attr("height", space_height * scaleFactor); RED.view.navigator.resize(); }, + onStart: function() { + // Show minimap when zoom animation starts + RED.events.emit("view:navigate"); + }, onEnd: function() { cancelInProgressAnimation = null; // Ensure scaleFactor is exactly the target to prevent precision issues From 775d6181c91f85aa18fe568e0ed03bafdec1e3ea Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 14:26:53 +0200 Subject: [PATCH 041/160] Add grab/grabbing cursor for spacebar pan mode - Show grab cursor (open hand) when spacebar is pressed - Show grabbing cursor (closed hand) when actively panning with spacebar+drag - Revert to grab cursor on mouse release if spacebar still held - Clear cursor when spacebar is released - Apply cursor to SVG element (outer) where mouse events occur - Handle edge cases: window blur, canvas blur, spacebar release outside canvas --- .../@node-red/editor-client/src/js/ui/view.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 51ad868284..3a2d7baca6 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -632,8 +632,12 @@ RED.view = (function() { if (e.type === "keydown" && !spacebarPressed) { spacebarPressed = true; + // Change cursor to grab hand when spacebar is pressed + outer.style('cursor', 'grab'); } else if (e.type === "keyup" && spacebarPressed) { spacebarPressed = false; + // Revert cursor when spacebar is released + outer.style('cursor', ''); } } } @@ -642,6 +646,8 @@ RED.view = (function() { function handleWindowSpacebarUp(e) { if ((e.keyCode === 32 || e.key === ' ') && spacebarPressed) { spacebarPressed = false; + // Revert cursor when spacebar is released outside canvas + outer.style('cursor', ''); e.preventDefault(); e.stopPropagation(); } @@ -656,6 +662,8 @@ RED.view = (function() { window.addEventListener("blur", function() { if (spacebarPressed) { spacebarPressed = false; + // Revert cursor when window loses focus + outer.style('cursor', ''); } }) @@ -1114,6 +1122,8 @@ RED.view = (function() { // Reset spacebar state when chart loses focus to prevent stuck state if (spacebarPressed) { spacebarPressed = false; + // Revert cursor when chart loses focus + outer.style('cursor', ''); } }); @@ -1582,6 +1592,8 @@ RED.view = (function() { mouse_mode = RED.state.PANNING; mouse_position = [d3.event.pageX,d3.event.pageY] scroll_position = [chart.scrollLeft(),chart.scrollTop()]; + // Change cursor to grabbing while actively panning + outer.style('cursor', 'grabbing'); return; } @@ -2497,6 +2509,12 @@ RED.view = (function() { } if (mouse_mode === RED.state.PANNING) { resetMouseVars(); + // Revert to grab cursor if spacebar still held, otherwise clear cursor + if (spacebarPressed) { + outer.style('cursor', 'grab'); + } else { + outer.style('cursor', ''); + } return } if (mouse_mode === RED.state.SELECTING_NODE) { From f22915e1b978b68d7096673f1c948081edca104d Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 14:29:16 +0200 Subject: [PATCH 042/160] Add grabbing cursor for middle-click pan mode --- packages/node_modules/@node-red/editor-client/src/js/ui/view.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 3a2d7baca6..464e0f9236 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -1603,6 +1603,8 @@ RED.view = (function() { mouse_mode = RED.state.PANNING; mouse_position = [d3.event.pageX,d3.event.pageY] scroll_position = [chart.scrollLeft(),chart.scrollTop()]; + // Change cursor to grabbing while actively panning + outer.style('cursor', 'grabbing'); return; } if (d3.event.button === 2) { From 37a4440a5a9893440b8c7d5a680f958c4406fab7 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 14:31:24 +0200 Subject: [PATCH 043/160] Make zoom animation duration relative to maintain consistent velocity --- .../@node-red/editor-client/src/js/ui/view.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 464e0f9236..0957ae749a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -3098,6 +3098,14 @@ RED.view = (function() { center = [(scrollPos[0] + screenSize[0]/2)/scaleFactor, (scrollPos[1] + screenSize[1]/2)/scaleFactor]; } + // Calculate duration based on relative zoom change to maintain consistent velocity + // Use logarithmic scaling since zoom feels exponential to the user + var zoomRatio = targetFactor / startFactor; + var logChange = Math.abs(Math.log(zoomRatio)); + // Scale duration more aggressively: multiply by 2 for stronger effect + // At extreme zoom levels, animation will be noticeably longer + var duration = Math.max(100, Math.min(350, logChange / 0.693 * RED.view.zoomConstants.DEFAULT_ZOOM_DURATION * 2)); + // Start the animation cancelInProgressAnimation = RED.view.zoomAnimator.easeToValuesRAF({ fromValues: { @@ -3106,7 +3114,7 @@ RED.view = (function() { toValues: { zoom: targetFactor }, - duration: RED.view.zoomConstants.DEFAULT_ZOOM_DURATION, + duration: duration, interpolateValue: true, // Use exponential interpolation for zoom onStep: function(values) { var currentFactor = values.zoom; From 34d356230b9a8a5f61a652c140012303949c7cd7 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 14:42:07 +0200 Subject: [PATCH 044/160] Set maximum zoom level to 1.0 --- .../@node-red/editor-client/src/js/ui/view-zoom-constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js index 9b10afd82e..3f789ced2d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js @@ -4,7 +4,7 @@ RED.view.zoomConstants = { // Zoom limits MIN_ZOOM: 0.05, // Default minimum, will be dynamically calculated to fit canvas - MAX_ZOOM: 2.0, + MAX_ZOOM: 1.0, // Zoom step for keyboard/button controls ZOOM_STEP: 0.2, From f831df70cefb02a78d489d2a8f87848818f75ead Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 14:43:54 +0200 Subject: [PATCH 045/160] Fix zoom-to-fit to properly center nodes in viewport --- .../@node-red/editor-client/src/js/ui/view.js | 23 +++++++------------ 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 0957ae749a..09ca0a98d0 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -2989,25 +2989,18 @@ RED.view = (function() { var minZoom = calculateMinZoom(); targetZoom = Math.max(minZoom, Math.min(RED.view.zoomConstants.MAX_ZOOM, targetZoom)); - // Calculate center point of bounding box as focal point + // Calculate center point of bounding box in workspace coordinates var centerX = (minX + maxX) / 2; var centerY = (minY + maxY) / 2; - // Convert to screen coordinates for focal point - // We want to center the bounding box in the viewport - var focalPoint = [viewportWidth / 2, viewportHeight / 2]; + // Reset button zoom focal point for zoom-to-fit + clearTimeout(buttonZoomTimeout); + buttonZoomWorkspaceCenter = null; - // First zoom to target level - animatedZoomView(targetZoom, focalPoint); - - // Then scroll to center the bounding box - // Wait for zoom animation to complete before scrolling - setTimeout(function() { - var scrollLeft = centerX * targetZoom - viewportWidth / 2; - var scrollTop = centerY * targetZoom - viewportHeight / 2; - chart.scrollLeft(scrollLeft); - chart.scrollTop(scrollTop); - }, RED.view.zoomConstants.DEFAULT_ZOOM_DURATION + 50); + // Pass the bounding box center as workspace center + // This ensures the nodes are centered in viewport after zoom + var focalPoint = [viewportWidth / 2, viewportHeight / 2]; + animatedZoomView(targetZoom, focalPoint, [centerX, centerY]); } function searchFlows() { RED.actions.invoke("core:search", $(this).data("term")); } From 79581bf51f772285f0df557b5e942cbaf1cf288a Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 14:45:45 +0200 Subject: [PATCH 046/160] Refresh active nodes before zoom-to-fit to work immediately --- .../@node-red/editor-client/src/js/ui/view.js | 58 ++++++++++++++++++- 1 file changed, 56 insertions(+), 2 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 09ca0a98d0..0a63b7dfe0 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -2944,11 +2944,17 @@ RED.view = (function() { } function zoomToFitAll() { + // Refresh active nodes to ensure we have the latest + updateActiveNodes(); + // Get all nodes in active workspace if (!activeNodes || activeNodes.length === 0) { + console.log("zoomToFitAll: No active nodes found. activeNodes:", activeNodes); return; // No nodes to fit } + console.log("zoomToFitAll: Found", activeNodes.length, "nodes"); + // Calculate bounding box of all nodes var minX = Infinity, minY = Infinity; var maxX = -Infinity, maxY = -Infinity; @@ -2985,14 +2991,20 @@ RED.view = (function() { var zoomY = viewportHeight / boundingHeight; var targetZoom = Math.min(zoomX, zoomY); + console.log("zoomToFitAll: targetZoom calculated:", targetZoom, "bounds:", {minX, minY, maxX, maxY}, "viewport:", {viewportWidth, viewportHeight}); + // Respect minimum and maximum zoom limits var minZoom = calculateMinZoom(); targetZoom = Math.max(minZoom, Math.min(RED.view.zoomConstants.MAX_ZOOM, targetZoom)); + console.log("zoomToFitAll: clamped targetZoom:", targetZoom, "current scaleFactor:", scaleFactor); + // Calculate center point of bounding box in workspace coordinates var centerX = (minX + maxX) / 2; var centerY = (minY + maxY) / 2; + console.log("zoomToFitAll: center point:", centerX, centerY); + // Reset button zoom focal point for zoom-to-fit clearTimeout(buttonZoomTimeout); buttonZoomWorkspaceCenter = null; @@ -3000,7 +3012,49 @@ RED.view = (function() { // Pass the bounding box center as workspace center // This ensures the nodes are centered in viewport after zoom var focalPoint = [viewportWidth / 2, viewportHeight / 2]; - animatedZoomView(targetZoom, focalPoint, [centerX, centerY]); + + // If zoom level won't change significantly, animate just the pan + if (Math.abs(scaleFactor - targetZoom) < 0.01) { + console.log("zoomToFitAll: zoom unchanged, animating pan to center"); + var targetScrollLeft = centerX * scaleFactor - viewportWidth / 2; + var targetScrollTop = centerY * scaleFactor - viewportHeight / 2; + + // Calculate pan distance to determine duration (match zoom animation logic) + var startScrollLeft = chart.scrollLeft(); + var startScrollTop = chart.scrollTop(); + var panDistance = Math.sqrt( + Math.pow(targetScrollLeft - startScrollLeft, 2) + + Math.pow(targetScrollTop - startScrollTop, 2) + ); + + // Use similar duration calculation as zoom: scale with distance + // Normalize by viewport diagonal for consistent feel + var viewportDiagonal = Math.sqrt(viewportWidth * viewportWidth + viewportHeight * viewportHeight); + var relativeDistance = panDistance / viewportDiagonal; + // Duration scales with distance, matching zoom animation feel + var duration = Math.max(200, Math.min(350, relativeDistance * RED.view.zoomConstants.DEFAULT_ZOOM_DURATION * 4)); + + RED.view.zoomAnimator.easeToValuesRAF({ + fromValues: { + scrollLeft: startScrollLeft, + scrollTop: startScrollTop + }, + toValues: { + scrollLeft: targetScrollLeft, + scrollTop: targetScrollTop + }, + duration: duration, + onStep: function(values) { + chart.scrollLeft(values.scrollLeft); + chart.scrollTop(values.scrollTop); + }, + onStart: function() { + RED.events.emit("view:navigate"); + } + }); + } else { + animatedZoomView(targetZoom, focalPoint, [centerX, centerY]); + } } function searchFlows() { RED.actions.invoke("core:search", $(this).data("term")); } @@ -3097,7 +3151,7 @@ RED.view = (function() { var logChange = Math.abs(Math.log(zoomRatio)); // Scale duration more aggressively: multiply by 2 for stronger effect // At extreme zoom levels, animation will be noticeably longer - var duration = Math.max(100, Math.min(350, logChange / 0.693 * RED.view.zoomConstants.DEFAULT_ZOOM_DURATION * 2)); + var duration = Math.max(200, Math.min(350, logChange / 0.693 * RED.view.zoomConstants.DEFAULT_ZOOM_DURATION * 2)); // Start the animation cancelInProgressAnimation = RED.view.zoomAnimator.easeToValuesRAF({ From d308bc77638a822013d3291bce5de8369e169fd2 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 15:02:32 +0200 Subject: [PATCH 047/160] Remove debug console logs and update documentation --- CANVAS_INTERACTION.md | 90 +++++++++++++++++-- .../@node-red/editor-client/src/js/ui/view.js | 10 --- 2 files changed, 84 insertions(+), 16 deletions(-) diff --git a/CANVAS_INTERACTION.md b/CANVAS_INTERACTION.md index 16261b2c60..831d96856d 100644 --- a/CANVAS_INTERACTION.md +++ b/CANVAS_INTERACTION.md @@ -11,6 +11,49 @@ Improve canvas interaction to work consistently and intuitively across: ## What Has Been Implemented +### Zoom Button & Hotkey Enhancements (Session 2) + +#### Zoom-to-Fit Feature (commits: 6f164a8, 788d0a3, ed71cf9, 732c828) +- ✅ New zoom-to-fit button in footer toolbar +- ✅ Shows all nodes with padding, properly centered in viewport +- ✅ Keyboard shortcut: Ctrl+1 / Cmd+1 for zoom-to-fit +- ✅ Respects maximum zoom level (won't zoom in beyond 1.0) +- ✅ Works immediately on page load (refreshes active nodes first) +- ✅ Smooth animated pan when zoom doesn't need to change +- ✅ Pan animation duration matches zoom animation (200-350ms) + +#### Smooth Zoom Button Animation (commits: 935ff62, f07907e) +- ✅ Smooth 200-350ms zoom transitions for button/hotkey zoom +- ✅ Performance optimized: only updates transforms during animation +- ✅ No viewport jumping or drift +- ✅ Focal point locking for sequential zooms (1 second timeout) +- ✅ Maintains viewport center across multiple rapid button presses + +#### Dynamic Zoom Animation Duration (commit: 594c0d6) +- ✅ Animation duration scales with zoom distance (logarithmic) +- ✅ Consistent perceived velocity across all zoom levels +- ✅ Range: 200-350ms (faster for small changes, slower for large) +- ✅ Pan-only animations also scale with distance traveled +- ✅ Reference: doubling/halving zoom takes ~250ms + +#### Visual Feedback Enhancements (commits: 6261213, ce5a031, 0247a91) +- ✅ Grab cursor (open hand) when spacebar pressed +- ✅ Grabbing cursor (closed hand) during active pan +- ✅ Works for spacebar+click and middle-click pan modes +- ✅ Minimap auto-shows during zoom button/hotkey operations +- ✅ Minimap auto-shows during zoom-to-fit and zoom reset + +#### Zoom Limits (commit: 45c2a79) +- ✅ Maximum zoom level set to 1.0 (100%, no zooming in beyond 1:1) +- ✅ All zoom methods respect this limit +- ✅ Zoom-to-fit properly clamps to max zoom + +#### Bug Fixes (commits: be1da36, 7fdff0c, 6e49e96, e3de29d) +- ✅ Fixed grey padding at canvas bottom (SVG margin reset) +- ✅ Fixed zoom button direction (were reversed) +- ✅ Fixed viewport drift without focal point +- ✅ Fixed zoom center calculation consistency + ### Zoom Functionality #### Smooth Zoom Animation (commits: bdfa06b, a12b65b) @@ -216,25 +259,37 @@ When verifying canvas interaction improvements: - [ ] Space+scroll zoom (keyboard modifier) - [ ] Trackpad pinch gesture (spread = zoom in, pinch = zoom out, generates Ctrl+wheel) - [ ] Touch screen pinch gesture (direct touch events) - - [ ] UI zoom buttons (zoom in, zoom out, reset) - - [ ] Zoom-to-fit button (shows all nodes with padding, respects min zoom) - - [ ] Zoom focal point stays on cursor position - - [ ] Dynamic zoom limits prevent empty space + - [x] UI zoom buttons (zoom in, zoom out, reset) - smooth animated, focal point locking + - [x] Zoom-to-fit button (shows all nodes with padding, respects max zoom of 1.0) + - [x] Zoom-to-fit hotkey (Ctrl+1 / Cmd+1) + - [x] Zoom hotkeys (Ctrl+Plus, Ctrl+Minus, Ctrl+0) + - [x] Zoom focal point stays on viewport center for button/hotkey zooms + - [x] Dynamic zoom limits prevent empty space + - [x] Maximum zoom capped at 1.0 (100%) + - [x] Animation duration scales with zoom distance (200-350ms) + - [x] Sequential zooms maintain same focal point (1 second timeout) + - [x] Zoom-to-fit works immediately after page load + - [x] Pan animation when zoom-to-fit doesn't need zoom change 2. **Pan Testing** - [x] Two-finger pan on trackpad/touch - [x] Diagonal panning works (not axis-locked) - [x] Spacebar+click pan on desktop + - [x] Middle-click pan on desktop - [x] Momentum scrolling with edge bounce - [x] No lag when switching between pan and zoom 3. **UI/UX Testing** - [x] Minimap auto-shows during panning and zooming + - [x] Minimap auto-shows during zoom button/hotkey/zoom-to-fit - [x] Minimap does not show on selection changes - [x] Minimap fades after 2 seconds - [x] No scrollbars visible on canvas - [x] No pinch-zoom on UI elements - [x] Gesture state cleanup on cursor exit + - [x] Grab cursor (open hand) shows when spacebar held + - [x] Grabbing cursor (closed hand) shows during active pan (spacebar or middle-click) + - [x] No grey padding visible at canvas bottom 4. **Browser Zoom Testing** - [ ] Test at 100% browser zoom @@ -257,8 +312,9 @@ Key files involved in canvas interaction improvements: ## Commit History -Interaction improvements span commits from e7a028b to present (13 commits total): +Interaction improvements (20 commits total on claude/issue-44-20250925-0754): +### Session 1: Previous commits (commits 1-13) 1. `e7a028b` - feat: Add enhanced zoom and scroll features 2. `bdfa06b` - Implement smooth zoom functionality with pinch-to-zoom support 3. `37f9786` - Fix trackpad zoom direction - spreading fingers now zooms in @@ -271,4 +327,26 @@ Interaction improvements span commits from e7a028b to present (13 commits total) 10. `f13ed66` - Add dynamic minimum zoom recalculation on viewport resize 11. `53dce6a` - Hide scrollbars and add auto-show/hide minimap on navigation 12. `875db2c` - Enable diagonal trackpad panning by preventing axis-locked scroll -13. (current) - Improve minimap auto-show behavior to only trigger during actual navigation \ No newline at end of file +13. (previous) - Improve minimap auto-show behavior to only trigger during actual navigation + +### Session 2: Zoom button/hotkey improvements (commits 14-20) +14. `ad00ca23e` - Add scroll spacer to fix scrollable area at minimum zoom +15. `48f0f3be` - Fix minimap viewport position at non-1.0 zoom levels +16. `be1da360` - Fix grey padding at canvas bottom by resetting SVG margins +17. `6f164a8a` - Add zoom-to-fit button to show all nodes at once +18. `7fdff0ca` - Fix zoom button handlers - zoom in/out were reversed +19. `e46cfc94` - Move zoom-to-fit button between reset and zoom-in +20. `95304e26` - Revert "Move zoom-to-fit button between reset and zoom-in" +21. `788d0a38` - Add Ctrl+1/Cmd+1 keyboard shortcut for zoom-to-fit +22. `5c090786` - Remove animation from zoom buttons for instant, smooth zooming +23. `6e49e962` - Fix viewport drift when using zoom buttons without focal point +24. `e3de29d8` - Fix zoom center calculation to use oldScaleFactor consistently +25. `935ff622` - Fix zoom button animation and improve performance +26. `f07907e1` - Add focal point locking for sequential button/hotkey zooms +27. `0247a910` - Add minimap auto-show for zoom button/hotkey interactions +28. `62612139` - Add grab/grabbing cursor for spacebar pan mode +29. `ce5a0313` - Add grabbing cursor for middle-click pan mode +30. `594c0d66` - Make zoom animation duration relative to maintain consistent velocity +31. `45c2a798` - Set maximum zoom level to 1.0 +32. `ed71cf91` - Fix zoom-to-fit to properly center nodes in viewport +33. `732c8283` - Refresh active nodes before zoom-to-fit to work immediately (includes pan animation matching zoom duration, 200-350ms range) \ No newline at end of file diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 0a63b7dfe0..7e4836a414 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -2949,12 +2949,9 @@ RED.view = (function() { // Get all nodes in active workspace if (!activeNodes || activeNodes.length === 0) { - console.log("zoomToFitAll: No active nodes found. activeNodes:", activeNodes); return; // No nodes to fit } - console.log("zoomToFitAll: Found", activeNodes.length, "nodes"); - // Calculate bounding box of all nodes var minX = Infinity, minY = Infinity; var maxX = -Infinity, maxY = -Infinity; @@ -2991,20 +2988,14 @@ RED.view = (function() { var zoomY = viewportHeight / boundingHeight; var targetZoom = Math.min(zoomX, zoomY); - console.log("zoomToFitAll: targetZoom calculated:", targetZoom, "bounds:", {minX, minY, maxX, maxY}, "viewport:", {viewportWidth, viewportHeight}); - // Respect minimum and maximum zoom limits var minZoom = calculateMinZoom(); targetZoom = Math.max(minZoom, Math.min(RED.view.zoomConstants.MAX_ZOOM, targetZoom)); - console.log("zoomToFitAll: clamped targetZoom:", targetZoom, "current scaleFactor:", scaleFactor); - // Calculate center point of bounding box in workspace coordinates var centerX = (minX + maxX) / 2; var centerY = (minY + maxY) / 2; - console.log("zoomToFitAll: center point:", centerX, centerY); - // Reset button zoom focal point for zoom-to-fit clearTimeout(buttonZoomTimeout); buttonZoomWorkspaceCenter = null; @@ -3015,7 +3006,6 @@ RED.view = (function() { // If zoom level won't change significantly, animate just the pan if (Math.abs(scaleFactor - targetZoom) < 0.01) { - console.log("zoomToFitAll: zoom unchanged, animating pan to center"); var targetScrollLeft = centerX * scaleFactor - viewportWidth / 2; var targetScrollTop = centerY * scaleFactor - viewportHeight / 2; From 250f7ab89772adf707a25e85497d6c029935d363 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 15:24:34 +0200 Subject: [PATCH 048/160] Add minimap auto-show on flow startup and workspace changes Shows minimap briefly when: - Flow initially loads (if nodes exist) - Switching between workspace tabs - Continuing to show during zoom/pan navigation Implementation: - Listen to workspace:change events - Check for active workspace with nodes before showing - Use 100ms delay to ensure nodes are rendered - Reuse existing showTemporary() for consistent behavior --- .../editor-client/src/js/ui/view-navigator.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js index 5b1eb89255..61af52e500 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js @@ -199,6 +199,20 @@ RED.events.on("view:navigate", function() { showTemporary(); }); + + // Show minimap briefly when workspace changes (includes initial load) + RED.events.on("workspace:change", function(event) { + // Only show if there's an active workspace with nodes + if (event.workspace && RED.nodes.getWorkspaceOrder().length > 0) { + // Small delay to ensure nodes are rendered + setTimeout(function() { + var activeNodes = RED.nodes.filterNodes({z: event.workspace}); + if (activeNodes.length > 0) { + showTemporary(); + } + }, 100); + } + }); }, refresh: refreshNodes, resize: resizeNavBorder, From be3430c032af8099a57dfd47dc6a06ba26c6c2ed Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 15:26:33 +0200 Subject: [PATCH 049/160] Update documentation with minimap startup feature --- CANVAS_INTERACTION.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/CANVAS_INTERACTION.md b/CANVAS_INTERACTION.md index 831d96856d..63da03e5d4 100644 --- a/CANVAS_INTERACTION.md +++ b/CANVAS_INTERACTION.md @@ -124,12 +124,14 @@ Improve canvas interaction to work consistently and intuitively across: - ✅ JavaScript prevention for trackpad pinch on non-canvas areas - ✅ Block Ctrl+wheel events outside the workspace chart -#### Minimap Navigation (commit: 53dce6a) +#### Minimap Navigation (commits: 53dce6a, 5e056a4) - ✅ Auto-show minimap on zoom and pan operations +- ✅ Auto-show minimap on flow startup and workspace changes - ✅ Minimap appears for 2 seconds during navigation then fades out - ✅ Smooth fade in/out animations for minimap visibility - ✅ Minimap stays visible if manually toggled with button - ✅ Emit `view:navigate` events for all zoom and pan operations +- ✅ Check for active nodes before showing on workspace change #### Visual Polish (commit: 53dce6a) - ✅ Hide scrollbars on canvas while keeping it scrollable @@ -280,6 +282,7 @@ When verifying canvas interaction improvements: - [x] No lag when switching between pan and zoom 3. **UI/UX Testing** + - [x] Minimap auto-shows on flow startup and workspace changes - [x] Minimap auto-shows during panning and zooming - [x] Minimap auto-shows during zoom button/hotkey/zoom-to-fit - [x] Minimap does not show on selection changes @@ -349,4 +352,5 @@ Interaction improvements (20 commits total on claude/issue-44-20250925-0754): 30. `594c0d66` - Make zoom animation duration relative to maintain consistent velocity 31. `45c2a798` - Set maximum zoom level to 1.0 32. `ed71cf91` - Fix zoom-to-fit to properly center nodes in viewport -33. `732c8283` - Refresh active nodes before zoom-to-fit to work immediately (includes pan animation matching zoom duration, 200-350ms range) \ No newline at end of file +33. `732c8283` - Refresh active nodes before zoom-to-fit to work immediately (includes pan animation matching zoom duration, 200-350ms range) +34. `5e056a4d` - Add minimap auto-show on flow startup and workspace changes \ No newline at end of file From 1ff980d190c2fdb1eb3d1b4d52b64addc53f000e Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 30 Sep 2025 22:30:26 +0200 Subject: [PATCH 050/160] Increase maximum zoom level to 2.0 --- .../@node-red/editor-client/src/js/ui/view-zoom-constants.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js index 3f789ced2d..9b10afd82e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js @@ -4,7 +4,7 @@ RED.view.zoomConstants = { // Zoom limits MIN_ZOOM: 0.05, // Default minimum, will be dynamically calculated to fit canvas - MAX_ZOOM: 1.0, + MAX_ZOOM: 2.0, // Zoom step for keyboard/button controls ZOOM_STEP: 0.2, From 1638fa927bbed10fadb61748ceab7b5ee92c21ad Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Wed, 1 Oct 2025 13:55:58 +0200 Subject: [PATCH 051/160] Fix mouse wheel zoom sensitivity by detecting input device type Mouse wheel events were being treated as trackpad input, causing excessive zoom jumps. Added delta magnitude detection (threshold: 50) to distinguish between mouse wheel (large deltas) and trackpad (small deltas), applying appropriate zoom calculation for each device. --- .../@node-red/editor-client/src/js/ui/view.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 7e4836a414..5ac2bdb76c 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -829,9 +829,10 @@ RED.view = (function() { // For trackpad pinch (Ctrl+wheel), use smooth proportional zoom if (evt.ctrlKey && !evt.altKey && !spacebarPressed) { - // Use the zoom animator's delta calculation for trackpad + // Detect input device: trackpad has small deltas, mouse wheel has large deltas + var isTrackpadInput = Math.abs(delta) < 50; // Invert delta: spreading fingers (negative deltaY) should zoom in - var scaleDelta = RED.view.zoomAnimator.calculateZoomDelta(scaleFactor, -delta, true); + var scaleDelta = RED.view.zoomAnimator.calculateZoomDelta(scaleFactor, -delta, isTrackpadInput); var minZoom = calculateMinZoom(); var newScale = Math.min(RED.view.zoomConstants.MAX_ZOOM, Math.max(minZoom, scaleFactor + scaleDelta)); @@ -878,8 +879,9 @@ RED.view = (function() { }, gestureEndThreshold); // Use 500ms timeout for gesture end detection } else { // Regular Alt+scroll or Space+scroll - use smooth zoom without animation - // Use same proportional zoom as trackpad for consistent feel - var scaleDelta = RED.view.zoomAnimator.calculateZoomDelta(scaleFactor, -delta, true); + // Detect input device: trackpad has small deltas, mouse wheel has large deltas + var isTrackpadInput = Math.abs(delta) < 50; + var scaleDelta = RED.view.zoomAnimator.calculateZoomDelta(scaleFactor, -delta, isTrackpadInput); var minZoom = calculateMinZoom(); var newScale = Math.min(RED.view.zoomConstants.MAX_ZOOM, Math.max(minZoom, scaleFactor + scaleDelta)); From a01c920c74ed0a5e3973d77ee5cb1b21d1b74d42 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Wed, 1 Oct 2025 13:56:47 +0200 Subject: [PATCH 052/160] Remove CANVAS_INTERACTION.md documentation file --- CANVAS_INTERACTION.md | 356 ------------------------------------------ 1 file changed, 356 deletions(-) delete mode 100644 CANVAS_INTERACTION.md diff --git a/CANVAS_INTERACTION.md b/CANVAS_INTERACTION.md deleted file mode 100644 index 63da03e5d4..0000000000 --- a/CANVAS_INTERACTION.md +++ /dev/null @@ -1,356 +0,0 @@ -# Canvas Interaction Improvements - -This document tracks the ongoing improvements to Node-RED's canvas interaction across different devices, input methods, and browser zoom settings. - -## Objectives - -Improve canvas interaction to work consistently and intuitively across: -- **Browser zoom levels**: 100%, 125%, 150%, 200%, etc. -- **Input devices**: Mouse, trackpad, and touchscreen -- **Platforms**: Desktop (Windows, macOS, Linux) and mobile/tablet devices - -## What Has Been Implemented - -### Zoom Button & Hotkey Enhancements (Session 2) - -#### Zoom-to-Fit Feature (commits: 6f164a8, 788d0a3, ed71cf9, 732c828) -- ✅ New zoom-to-fit button in footer toolbar -- ✅ Shows all nodes with padding, properly centered in viewport -- ✅ Keyboard shortcut: Ctrl+1 / Cmd+1 for zoom-to-fit -- ✅ Respects maximum zoom level (won't zoom in beyond 1.0) -- ✅ Works immediately on page load (refreshes active nodes first) -- ✅ Smooth animated pan when zoom doesn't need to change -- ✅ Pan animation duration matches zoom animation (200-350ms) - -#### Smooth Zoom Button Animation (commits: 935ff62, f07907e) -- ✅ Smooth 200-350ms zoom transitions for button/hotkey zoom -- ✅ Performance optimized: only updates transforms during animation -- ✅ No viewport jumping or drift -- ✅ Focal point locking for sequential zooms (1 second timeout) -- ✅ Maintains viewport center across multiple rapid button presses - -#### Dynamic Zoom Animation Duration (commit: 594c0d6) -- ✅ Animation duration scales with zoom distance (logarithmic) -- ✅ Consistent perceived velocity across all zoom levels -- ✅ Range: 200-350ms (faster for small changes, slower for large) -- ✅ Pan-only animations also scale with distance traveled -- ✅ Reference: doubling/halving zoom takes ~250ms - -#### Visual Feedback Enhancements (commits: 6261213, ce5a031, 0247a91) -- ✅ Grab cursor (open hand) when spacebar pressed -- ✅ Grabbing cursor (closed hand) during active pan -- ✅ Works for spacebar+click and middle-click pan modes -- ✅ Minimap auto-shows during zoom button/hotkey operations -- ✅ Minimap auto-shows during zoom-to-fit and zoom reset - -#### Zoom Limits (commit: 45c2a79) -- ✅ Maximum zoom level set to 1.0 (100%, no zooming in beyond 1:1) -- ✅ All zoom methods respect this limit -- ✅ Zoom-to-fit properly clamps to max zoom - -#### Bug Fixes (commits: be1da36, 7fdff0c, 6e49e96, e3de29d) -- ✅ Fixed grey padding at canvas bottom (SVG margin reset) -- ✅ Fixed zoom button direction (were reversed) -- ✅ Fixed viewport drift without focal point -- ✅ Fixed zoom center calculation consistency - -### Zoom Functionality - -#### Smooth Zoom Animation (commits: bdfa06b, a12b65b) -- ✅ 125ms smooth zoom transitions with ease-out curves -- ✅ Natural acceleration/deceleration for zoom operations -- ✅ Reduced acceleration from 2x to 1.2x max for better control -- ✅ Asymmetric zoom speeds (zoom out 40-50% slower than zoom in) -- ✅ Gentler acceleration range (0.7-1.1) for smoother transitions -- ✅ No jarring animations during mouse wheel zoom - -#### Zoom Input Methods (commits: e7a028b, bdfa06b) -- ✅ Mouse wheel zoom -- ✅ Alt+scroll zoom mode (keyboard modifier alternative) -- ✅ Space+scroll zoom mode (keyboard modifier alternative) -- ✅ Trackpad pinch-to-zoom (browsers translate to Ctrl+wheel events) -- ✅ Touch screen pinch-to-zoom with proper center tracking (direct touch events) -- ✅ UI zoom buttons (corrected zoom in/out direction) -- ✅ Zoom-to-fit button (zooms out to show all nodes with padding, respects minimum zoom) - -**Note**: Ctrl+wheel is used for trackpad pinch gestures on desktop. Browsers automatically translate two-finger pinch gestures on trackpads into Ctrl+wheel events. This is separate from touchscreen pinch-to-zoom, which uses direct touch events (touchstart/touchmove/touchend). - -#### Zoom Focal Point (commits: e42b09de, feec7ec, e7a028b) -- ✅ Cursor-centered zoom (focuses on cursor position) -- ✅ Store focal point in workspace coordinates instead of screen coordinates -- ✅ Prevents focal point drift when scroll changes due to canvas boundaries -- ✅ Maintains consistent zoom focus even when view shifts at edges -- ✅ Fixed focal point during pinch gestures - -#### Zoom Direction & Behavior (commits: 37f9786, bdfa06b) -- ✅ Fixed trackpad zoom direction (spreading fingers zooms in, pinching zooms out) -- ✅ Matches standard macOS trackpad behavior -- ✅ Proper ratio-based scaling for pinch gestures -- ✅ Scale lock issues fixed with improved tolerance handling - -#### Dynamic Zoom Limits (commits: 7918693, f13ed66) -- ✅ Calculate minimum zoom dynamically based on viewport size -- ✅ Ensure canvas always covers entire viewport (no empty space visible) -- ✅ Use 'cover' behavior: canvas fills viewport completely -- ✅ Recalculate minimum zoom on window resize -- ✅ Automatically adjust zoom if current level falls below new minimum after resize -- ✅ Prevent zooming out beyond what's needed to fill viewport - -### Panning Functionality - -#### Pan Input Methods (commit: feec7ec) -- ✅ Two-finger pan gesture for touch devices -- ✅ Spacebar+left-click panning for desktop -- ✅ Mode locking to prevent laggy gesture switching -- ✅ Lock into pan or zoom mode based on initial movement -- ✅ Better gesture detection thresholds (10px for zoom, 5px for pan) - -#### Scroll Behavior (commit: e7a028b) -- ✅ Momentum scrolling with edge bounce animation -- ✅ Enhanced spacebar handling to prevent scroll artifacts - -### UI/UX Enhancements - -#### Gesture State Management (commits: e42b09de, bdfa06b, 121982e) -- ✅ Improved gesture state management for trackpad and touch gestures -- ✅ Proper state cleanup when cursor leaves canvas -- ✅ Clear touchStartTime timeout when entering two-finger pan mode -- ✅ Prevent interference between long-press detection and pan gestures - -#### UI Pinch-Zoom Prevention (commit: e0c5b84) -- ✅ Prevent UI pinch-to-zoom while keeping canvas zoomable -- ✅ Apply `touch-action: pan-x pan-y` to html, body, and editor elements -- ✅ Apply `touch-action: none` to canvas for custom gestures -- ✅ JavaScript prevention for trackpad pinch on non-canvas areas -- ✅ Block Ctrl+wheel events outside the workspace chart - -#### Minimap Navigation (commits: 53dce6a, 5e056a4) -- ✅ Auto-show minimap on zoom and pan operations -- ✅ Auto-show minimap on flow startup and workspace changes -- ✅ Minimap appears for 2 seconds during navigation then fades out -- ✅ Smooth fade in/out animations for minimap visibility -- ✅ Minimap stays visible if manually toggled with button -- ✅ Emit `view:navigate` events for all zoom and pan operations -- ✅ Check for active nodes before showing on workspace change - -#### Visual Polish (commit: 53dce6a) -- ✅ Hide scrollbars on canvas while keeping it scrollable -- ✅ Clean visual appearance without visible scrollbars - -### Code Architecture - -#### New Modules (commit: bdfa06b) -- ✅ `view-zoom-animator.js` - Zoom animation utilities (223 lines) -- ✅ `view-zoom-constants.js` - Zoom configuration constants (21 lines) -- ✅ Updated Gruntfile to include new zoom modules in build - -## Current Expectations - -### Cross-Device Consistency -- Zoom and pan should feel natural on mouse, trackpad, and touchscreen -- Gestures should be responsive without lag or mode switching artifacts -- Zoom focal point should remain stable regardless of input method - -### Browser Zoom Compatibility -- Canvas interaction should work correctly at all browser zoom levels -- UI elements should remain accessible and functional -- No layout breaking or interaction dead zones - -### Visual Feedback -- Minimap should provide contextual navigation feedback -- Smooth animations should make interactions feel polished -- No visual glitches or artifacts during zoom/pan operations - -### Performance -- All interactions should be smooth (60fps target) -- No janky animations or delayed responses -- Efficient gesture detection without excessive computation - -## Recent Fixes - -### Grey Padding at Canvas Bottom (Latest) -**Issue**: When scrolled to the bottom of the canvas, 5 pixels of grey space appeared below the grid, allowing users to scroll slightly beyond the canvas boundary. - -**Root Cause**: Default browser margins on SVG elements caused the viewport's `scrollHeight` to be 8005px instead of 8000px, creating extra scrollable area beyond the canvas. - -**Solution**: -- Added explicit `padding: 0` and `margin: 0` to `#red-ui-workspace-chart` container -- Added `display: block`, `margin: 0`, and `padding: 0` to SVG element via `#red-ui-workspace-chart > svg` selector -- The `display: block` prevents inline element spacing issues - -**Files Changed**: -- `workspace.scss:41-42, 52-57` - Added margin/padding resets for container and SVG - -**Result**: Canvas now has exact 8000px scrollable area with no grey padding visible at bottom. - -### Spacebar Hold Scrolling Bug -**Issue**: When holding spacebar down, the canvas would move down unexpectedly, making the space+scroll interaction buggy. - -**Root Cause**: The `preventDefault()` was only called on the first spacebar keydown event. When spacebar is held, browsers fire repeated keydown events. After the first keydown set `spacebarPressed = true`, subsequent keydown events weren't prevented because the condition `e.type === "keydown" && !spacebarPressed` failed, allowing browser's default space-scroll behavior. - -**Solution**: -- Moved `preventDefault()` and `stopPropagation()` outside the conditional checks -- Now blocks ALL spacebar events (both keydown repeats and keyup), not just the first keydown - -**Files Changed**: -- `view.js:611-619` - Restructured spacebar event handler to always prevent default - -**Result**: Holding spacebar no longer causes unwanted canvas scrolling. - -### Minimap Auto-Show Behavior -**Issue**: Minimap was showing on selection changes and when entering pan mode (before actual panning), causing unnecessary flashing. - -**Solution**: -- Removed `view:selection-changed` event listener - minimap no longer shows when selecting nodes -- Removed `view:navigate` emissions from pan mode entry points (touch long-press, spacebar+click, middle-click) -- Added `view:navigate` emission to regular touchpad scroll handler for consistent behavior -- Kept emissions only during actual panning movement and zooming - -**Files Changed**: -- `view-navigator.js:195-198` - Removed selection-changed listener -- `view.js:483, 1529, 1539` - Removed navigate events from pan mode entry -- `view.js:876` - Added navigate event to touchpad scroll handler - -**Result**: Minimap now appears only during actual panning (touchpad or mouse) and zooming, not on selection or pan mode entry. - -### Diagonal Trackpad Panning -**Issue**: Trackpad scrolling was restricted to horizontal OR vertical movement, not both simultaneously. - -**Root Cause**: Browser's native scroll behavior on `overflow: auto` containers locks into one axis at a time, even before JavaScript wheel events fire. - -**Solution**: -- Added `evt.preventDefault()` and `evt.stopPropagation()` to regular scroll handling -- Manually apply both `deltaX` and `deltaY` to scrollLeft/scrollTop simultaneously -- Prevents browser's axis-locked scroll behavior from taking over -- Also updated CSS `touch-action` from `pan-x pan-y` to `manipulation` (though this primarily affects touch events, not trackpad) - -**Files Changed**: -- `view.js:864-890` - Added manual diagonal scroll handling -- `base.scss:22, 33` - Changed touch-action to manipulation - -**Result**: Trackpad can now pan diagonally without axis-locking. - -## Known Issues & Future Work - -### To Be Tested -- [ ] Comprehensive testing across different browser zoom levels (100%, 125%, 150%, 200%) -- [ ] Cross-browser testing (Chrome, Firefox, Safari, Edge) -- [ ] Testing on different touchscreen devices (tablets, touch-enabled laptops) -- [ ] Testing with different trackpad sensitivities and gesture settings -- [x] Diagonal trackpad panning (fixed) - -### Potential Improvements -- [ ] Additional fine-tuning of zoom speeds and acceleration curves based on user feedback -- [ ] Consider adding keyboard shortcuts for zoom reset (Ctrl+0 / Cmd+0) -- [ ] Evaluate need for custom zoom level indicator in UI -- [ ] Consider adding preferences for zoom/pan sensitivity - -### Edge Cases to Monitor -- [ ] Behavior when canvas content is very small or very large -- [ ] Interaction with browser accessibility features -- [ ] Performance with extremely large flows (100+ nodes) -- [ ] Multi-monitor scenarios with different DPI settings - -## Testing Checklist - -When verifying canvas interaction improvements: - -1. **Zoom Testing** - - [ ] Mouse wheel zoom in/out - - [ ] Alt+scroll zoom (keyboard modifier) - - [ ] Space+scroll zoom (keyboard modifier) - - [ ] Trackpad pinch gesture (spread = zoom in, pinch = zoom out, generates Ctrl+wheel) - - [ ] Touch screen pinch gesture (direct touch events) - - [x] UI zoom buttons (zoom in, zoom out, reset) - smooth animated, focal point locking - - [x] Zoom-to-fit button (shows all nodes with padding, respects max zoom of 1.0) - - [x] Zoom-to-fit hotkey (Ctrl+1 / Cmd+1) - - [x] Zoom hotkeys (Ctrl+Plus, Ctrl+Minus, Ctrl+0) - - [x] Zoom focal point stays on viewport center for button/hotkey zooms - - [x] Dynamic zoom limits prevent empty space - - [x] Maximum zoom capped at 1.0 (100%) - - [x] Animation duration scales with zoom distance (200-350ms) - - [x] Sequential zooms maintain same focal point (1 second timeout) - - [x] Zoom-to-fit works immediately after page load - - [x] Pan animation when zoom-to-fit doesn't need zoom change - -2. **Pan Testing** - - [x] Two-finger pan on trackpad/touch - - [x] Diagonal panning works (not axis-locked) - - [x] Spacebar+click pan on desktop - - [x] Middle-click pan on desktop - - [x] Momentum scrolling with edge bounce - - [x] No lag when switching between pan and zoom - -3. **UI/UX Testing** - - [x] Minimap auto-shows on flow startup and workspace changes - - [x] Minimap auto-shows during panning and zooming - - [x] Minimap auto-shows during zoom button/hotkey/zoom-to-fit - - [x] Minimap does not show on selection changes - - [x] Minimap fades after 2 seconds - - [x] No scrollbars visible on canvas - - [x] No pinch-zoom on UI elements - - [x] Gesture state cleanup on cursor exit - - [x] Grab cursor (open hand) shows when spacebar held - - [x] Grabbing cursor (closed hand) shows during active pan (spacebar or middle-click) - - [x] No grey padding visible at canvas bottom - -4. **Browser Zoom Testing** - - [ ] Test at 100% browser zoom - - [ ] Test at 125% browser zoom - - [ ] Test at 150% browser zoom - - [ ] Test at 200% browser zoom - - [ ] Verify all interactions work at each zoom level - -## Files Modified - -Key files involved in canvas interaction improvements: - -- `packages/node_modules/@node-red/editor-client/src/js/ui/view.js` - Main view controller -- `packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js` - Zoom animations -- `packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-constants.js` - Zoom configuration -- `packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js` - Minimap controller -- `packages/node_modules/@node-red/editor-client/src/sass/workspace.scss` - Canvas styling -- `packages/node_modules/@node-red/editor-client/src/sass/base.scss` - Base UI styling -- `Gruntfile.js` - Build configuration - -## Commit History - -Interaction improvements (20 commits total on claude/issue-44-20250925-0754): - -### Session 1: Previous commits (commits 1-13) -1. `e7a028b` - feat: Add enhanced zoom and scroll features -2. `bdfa06b` - Implement smooth zoom functionality with pinch-to-zoom support -3. `37f9786` - Fix trackpad zoom direction - spreading fingers now zooms in -4. `e42b09d` - Fix zoom focal point stability at canvas edges -5. `a12b65b` - Improve zoom smoothness and control -6. `feec7ec` - Add two-finger panning and spacebar+click panning -7. `e0c5b84` - Prevent UI pinch-to-zoom while keeping canvas zoomable -8. `121982e` - Fix zoom gesture detection after two-finger panning -9. `7918693` - Implement dynamic zoom limits to match canvas boundaries -10. `f13ed66` - Add dynamic minimum zoom recalculation on viewport resize -11. `53dce6a` - Hide scrollbars and add auto-show/hide minimap on navigation -12. `875db2c` - Enable diagonal trackpad panning by preventing axis-locked scroll -13. (previous) - Improve minimap auto-show behavior to only trigger during actual navigation - -### Session 2: Zoom button/hotkey improvements (commits 14-20) -14. `ad00ca23e` - Add scroll spacer to fix scrollable area at minimum zoom -15. `48f0f3be` - Fix minimap viewport position at non-1.0 zoom levels -16. `be1da360` - Fix grey padding at canvas bottom by resetting SVG margins -17. `6f164a8a` - Add zoom-to-fit button to show all nodes at once -18. `7fdff0ca` - Fix zoom button handlers - zoom in/out were reversed -19. `e46cfc94` - Move zoom-to-fit button between reset and zoom-in -20. `95304e26` - Revert "Move zoom-to-fit button between reset and zoom-in" -21. `788d0a38` - Add Ctrl+1/Cmd+1 keyboard shortcut for zoom-to-fit -22. `5c090786` - Remove animation from zoom buttons for instant, smooth zooming -23. `6e49e962` - Fix viewport drift when using zoom buttons without focal point -24. `e3de29d8` - Fix zoom center calculation to use oldScaleFactor consistently -25. `935ff622` - Fix zoom button animation and improve performance -26. `f07907e1` - Add focal point locking for sequential button/hotkey zooms -27. `0247a910` - Add minimap auto-show for zoom button/hotkey interactions -28. `62612139` - Add grab/grabbing cursor for spacebar pan mode -29. `ce5a0313` - Add grabbing cursor for middle-click pan mode -30. `594c0d66` - Make zoom animation duration relative to maintain consistent velocity -31. `45c2a798` - Set maximum zoom level to 1.0 -32. `ed71cf91` - Fix zoom-to-fit to properly center nodes in viewport -33. `732c8283` - Refresh active nodes before zoom-to-fit to work immediately (includes pan animation matching zoom duration, 200-350ms range) -34. `5e056a4d` - Add minimap auto-show on flow startup and workspace changes \ No newline at end of file From 9cedcd0a78d4808e1bce602b9d568675cffec15a Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 20 Oct 2025 13:15:09 +0100 Subject: [PATCH 053/160] Add nls message for zoom to fit --- .../@node-red/editor-client/locales/en-US/editor.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json index c1c9316d81..905b8ea5a0 100644 --- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json +++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json @@ -169,6 +169,7 @@ "zoom-out": "Zoom out", "zoom-reset": "Reset zoom", "zoom-in": "Zoom in", + "fit-to-screen": "Zoom to fit", "search-flows": "Search flows", "search-prev": "Previous", "search-next": "Next", From 3bbdc7730054de2ff5b1c6ab02ec01dd061b2f05 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 20 Oct 2025 13:15:37 +0100 Subject: [PATCH 054/160] Fix up space-to-pan event handling --- .../@node-red/editor-client/src/js/ui/view.js | 168 ++++++++++-------- 1 file changed, 97 insertions(+), 71 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 5ac2bdb76c..baf605e0d3 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -398,8 +398,9 @@ RED.view = (function() { lasso.remove(); lasso = null; } - } else if (mouse_mode === RED.state.PANNING && d3.event.buttons !== 4) { - resetMouseVars(); + } else if (mouse_mode === RED.state.PANNING) { + // ensure the cursor is set to grab when re-entering the canvas while panning + outer.style('cursor', 'grabbing'); } else if (slicePath) { if (d3.event.buttons !== 2) { slicePath.remove(); @@ -597,9 +598,9 @@ RED.view = (function() { } d3.event.preventDefault(); }); - - - const handleAltToggle = (event) => { + + const handleChartKeyboardEvents = (event) => { + // Handle Alt toggle for pulling nodes out of groups if (mouse_mode === RED.state.MOVING_ACTIVE && event.key === 'Alt' && groupAddParentGroup) { RED.nodes.group(groupAddParentGroup).dirty = true for (let n = 0; n Date: Mon, 20 Oct 2025 13:15:52 +0100 Subject: [PATCH 055/160] Fix issues with navigator show/hide lifecycle --- .../editor-client/src/js/ui/view-navigator.js | 345 +++++++++--------- 1 file changed, 171 insertions(+), 174 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js index 61af52e500..438820227a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js @@ -15,178 +15,176 @@ **/ - RED.view.navigator = (function() { - - var nav_scale = 50; - var nav_width = 8000/nav_scale; - var nav_height = 8000/nav_scale; - - var navContainer; - var navBox; - var navBorder; - var navVis; - var scrollPos; - var scaleFactor; - var chartSize; - var dimensions; - var isDragging; - var isShowing = false; - var autoHideTimeout; - var isManuallyToggled = false; - - function refreshNodes() { - if (!isShowing) { - return; - } - var navNode = navVis.selectAll(".red-ui-navigator-node").data(RED.view.getActiveNodes(),function(d){return d.id}); - navNode.exit().remove(); - navNode.enter().insert("rect") - .attr('class','red-ui-navigator-node') - .attr("pointer-events", "none"); - navNode.each(function(d) { - d3.select(this).attr("x",function(d) { return (d.x-d.w/2)/nav_scale }) - .attr("y",function(d) { return (d.y-d.h/2)/nav_scale }) - .attr("width",function(d) { return Math.max(9,d.w/nav_scale) }) - .attr("height",function(d) { return Math.max(3,d.h/nav_scale) }) - .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def);}) - }); - } - function onScroll() { - if (!isDragging) { - resizeNavBorder(); - } - } - function resizeNavBorder() { - if (navBorder) { - scaleFactor = RED.view.scale(); - chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()]; - scrollPos = [$("#red-ui-workspace-chart").scrollLeft(),$("#red-ui-workspace-chart").scrollTop()]; - - // Convert scroll position (in scaled pixels) to workspace coordinates, then to minimap coordinates - // scrollPos is in scaled canvas pixels, divide by scaleFactor to get workspace coords - navBorder.attr('x',scrollPos[0]/scaleFactor/nav_scale) - .attr('y',scrollPos[1]/scaleFactor/nav_scale) - .attr('width',chartSize[0]/nav_scale/scaleFactor) - .attr('height',chartSize[1]/nav_scale/scaleFactor) - } - } - function toggle() { - if (!isShowing) { - isShowing = true; - isManuallyToggled = true; - clearTimeout(autoHideTimeout); - $("#red-ui-view-navigate").addClass("selected"); - resizeNavBorder(); - refreshNodes(); - $("#red-ui-workspace-chart").on("scroll",onScroll); - navContainer.addClass('red-ui-navigator-container'); - navContainer.show(); - setTimeout(function() { - navContainer.addClass('red-ui-navigator-visible'); - }, 10); - } else { - isShowing = false; - isManuallyToggled = false; - clearTimeout(autoHideTimeout); - navContainer.removeClass('red-ui-navigator-visible'); - setTimeout(function() { - navContainer.hide(); - }, 300); - $("#red-ui-workspace-chart").off("scroll",onScroll); - $("#red-ui-view-navigate").removeClass("selected"); - } - } - - function showTemporary() { - if (!isManuallyToggled) { - clearTimeout(autoHideTimeout); - - if (!isShowing) { - isShowing = true; - resizeNavBorder(); - refreshNodes(); - $("#red-ui-workspace-chart").on("scroll",onScroll); - navContainer.addClass('red-ui-navigator-container'); - navContainer.show(); - setTimeout(function() { - navContainer.addClass('red-ui-navigator-visible'); - }, 10); - } - - autoHideTimeout = setTimeout(function() { - if (!isManuallyToggled && isShowing) { - isShowing = false; - navContainer.removeClass('red-ui-navigator-visible'); - setTimeout(function() { - navContainer.hide(); - }, 300); - $("#red-ui-workspace-chart").off("scroll",onScroll); - } - }, 2000); - } - } - - return { - init: function() { - - $(window).on("resize", resizeNavBorder); - RED.events.on("sidebar:resize",resizeNavBorder); - RED.actions.add("core:toggle-navigator",toggle); - var hideTimeout; - - navContainer = $('
').css({ - "position":"absolute", - "bottom":$("#red-ui-workspace-footer").height(), - "right":0, - zIndex: 1 - }).addClass('red-ui-navigator-container').appendTo("#red-ui-workspace").hide(); - - navBox = d3.select(navContainer[0]) - .append("svg:svg") - .attr("width", nav_width) - .attr("height", nav_height) - .attr("pointer-events", "all") - .attr("id","red-ui-navigator-canvas") - - navBox.append("rect").attr("x",0).attr("y",0).attr("width",nav_width).attr("height",nav_height).style({ - fill:"none", - stroke:"none", - pointerEvents:"all" - }).on("mousedown", function() { - // Update these in case they have changed - scaleFactor = RED.view.scale(); - chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()]; - dimensions = [chartSize[0]/nav_scale/scaleFactor, chartSize[1]/nav_scale/scaleFactor]; - var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]); - var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]); - navBorder.attr('x',newX).attr('y',newY); - isDragging = true; - $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor); - $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor); - }).on("mousemove", function() { - if (!isDragging) { return } - if (d3.event.buttons === 0) { - isDragging = false; - return; - } - var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]); - var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]); - navBorder.attr('x',newX).attr('y',newY); - $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor); - $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor); - }).on("mouseup", function() { - isDragging = false; - }) - - navBorder = navBox.append("rect").attr("class","red-ui-navigator-border") - - navVis = navBox.append("svg:g") - - RED.statusBar.add({ - id: "view-navigator", - align: "right", - element: $('') - }) +RED.view.navigator = (function() { + var nav_scale = 50; + var nav_width = 8000/nav_scale; + var nav_height = 8000/nav_scale; + var navContainer; + var navBox; + var navBorder; + var navVis; + var scrollPos; + var scaleFactor; + var chartSize; + var dimensions; + var isDragging; + var isShowing = false; + var toggleTimeout; + var autoHideTimeout; + var isManuallyToggled = false; + var isTemporaryShow = false; + function refreshNodes() { + if (!isShowing) { + return; + } + var navNode = navVis.selectAll(".red-ui-navigator-node").data(RED.view.getActiveNodes(),function(d){return d.id}); + navNode.exit().remove(); + navNode.enter().insert("rect") + .attr('class','red-ui-navigator-node') + .attr("pointer-events", "none"); + navNode.each(function(d) { + d3.select(this).attr("x",function(d) { return (d.x-d.w/2)/nav_scale }) + .attr("y",function(d) { return (d.y-d.h/2)/nav_scale }) + .attr("width",function(d) { return Math.max(9,d.w/nav_scale) }) + .attr("height",function(d) { return Math.max(3,d.h/nav_scale) }) + .attr("fill",function(d) { return RED.utils.getNodeColor(d.type,d._def);}) + }); + } + function onScroll() { + if (!isDragging) { + resizeNavBorder(); + } + } + function resizeNavBorder() { + if (navBorder) { + scaleFactor = RED.view.scale(); + chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()]; + scrollPos = [$("#red-ui-workspace-chart").scrollLeft(),$("#red-ui-workspace-chart").scrollTop()]; + // Convert scroll position (in scaled pixels) to workspace coordinates, then to minimap coordinates + // scrollPos is in scaled canvas pixels, divide by scaleFactor to get workspace coords + navBorder.attr('x',scrollPos[0]/scaleFactor/nav_scale) + .attr('y',scrollPos[1]/scaleFactor/nav_scale) + .attr('width',chartSize[0]/nav_scale/scaleFactor) + .attr('height',chartSize[1]/nav_scale/scaleFactor) + } + } + function show () { + if (!isShowing) { + isShowing = true; + clearTimeout(autoHideTimeout); + $("#red-ui-view-navigate").addClass("selected"); + resizeNavBorder(); + refreshNodes(); + $("#red-ui-workspace-chart").on("scroll",onScroll); + navContainer.addClass('red-ui-navigator-container'); + navContainer.show(); + clearTimeout(toggleTimeout) + toggleTimeout = setTimeout(function() { + navContainer.addClass('red-ui-navigator-visible'); + }, 10); + } + } + function hide () { + if (isShowing) { + isShowing = false; + isTemporaryShow = false; + isManuallyToggled = false; + clearTimeout(autoHideTimeout); + navContainer.removeClass('red-ui-navigator-visible'); + clearTimeout(toggleTimeout) + toggleTimeout = setTimeout(function() { + navContainer.hide(); + }, 300); + $("#red-ui-workspace-chart").off("scroll",onScroll); + $("#red-ui-view-navigate").removeClass("selected"); + } + } + function toggle() { + if (!isShowing) { + isManuallyToggled = true; + show() + } else { + isManuallyToggled = false; + hide() + } + } + function setupAutoHide () { + clearTimeout(autoHideTimeout); + autoHideTimeout = setTimeout(function() { + hide() + }, 2000) + } + function showTemporary() { + if (!isManuallyToggled) { + isTemporaryShow = true + clearTimeout(autoHideTimeout); + show() + setupAutoHide() + } + } + return { + init: function() { + $(window).on("resize", resizeNavBorder); + RED.events.on("sidebar:resize",resizeNavBorder); + RED.actions.add("core:toggle-navigator",toggle); + navContainer = $('
').css({ + "position":"absolute", + "bottom":$("#red-ui-workspace-footer").height(), + "right":0, + zIndex: 1 + }).addClass('red-ui-navigator-container').appendTo("#red-ui-workspace").hide(); + navBox = d3.select(navContainer[0]) + .append("svg:svg") + .attr("width", nav_width) + .attr("height", nav_height) + .attr("pointer-events", "all") + .attr("id","red-ui-navigator-canvas") + navBox.append("rect").attr("x",0).attr("y",0).attr("width",nav_width).attr("height",nav_height).style({ + fill:"none", + stroke:"none", + pointerEvents:"all" + }).on("mousedown", function() { + // Update these in case they have changed + scaleFactor = RED.view.scale(); + chartSize = [ $("#red-ui-workspace-chart").width(), $("#red-ui-workspace-chart").height()]; + dimensions = [chartSize[0]/nav_scale/scaleFactor, chartSize[1]/nav_scale/scaleFactor]; + var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]); + var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]); + navBorder.attr('x',newX).attr('y',newY); + isDragging = true; + $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor); + $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor); + }).on("mousemove", function() { + if (!isDragging) { return } + if (d3.event.buttons === 0) { + isDragging = false; + return; + } + var newX = Math.max(0,Math.min(d3.event.offsetX+dimensions[0]/2,nav_width)-dimensions[0]); + var newY = Math.max(0,Math.min(d3.event.offsetY+dimensions[1]/2,nav_height)-dimensions[1]); + navBorder.attr('x',newX).attr('y',newY); + $("#red-ui-workspace-chart").scrollLeft(newX*nav_scale*scaleFactor); + $("#red-ui-workspace-chart").scrollTop(newY*nav_scale*scaleFactor); + }).on("mouseup", function() { + isDragging = false; + }).on("mouseenter", function () { + if (isTemporaryShow) { + // If user hovers over the minimap while it's temporarily shown, keep it shown + clearTimeout(autoHideTimeout); + } + }).on("mouseleave", function () { + if (isTemporaryShow) { + // Restart the auto-hide timer after mouse leaves the minimap + setupAutoHide() + } + }) + navBorder = navBox.append("rect").attr("class","red-ui-navigator-border") + navVis = navBox.append("svg:g") + RED.statusBar.add({ + id: "view-navigator", + align: "right", + element: $('') + }) $("#red-ui-view-navigate").on("click", function(evt) { evt.preventDefault(); @@ -216,8 +214,7 @@ }, refresh: refreshNodes, resize: resizeNavBorder, - toggle: toggle, - showTemporary: showTemporary + toggle: toggle } From fa05811b08206024cafa885a443e225c5508d5ae Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 20 Oct 2025 13:20:30 +0100 Subject: [PATCH 056/160] Fix linting --- .../src/js/ui/view-zoom-animator.js | 22 ++++++++++--------- .../@node-red/editor-client/src/js/ui/view.js | 4 +++- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js index 7938ca0de1..cda28591cb 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-zoom-animator.js @@ -77,16 +77,18 @@ RED.view.zoomAnimator = (function() { const interpolatedValues = {}; for (const key in fromValues) { - const from = fromValues[key]; - const to = toValues[key]; - - if (interpolateValue && key === 'zoom') { - // Special interpolation for zoom to feel more natural - // Exponential interpolation preserves relative zoom feel - interpolatedValues[key] = from * Math.pow(to / from, easedProgress); - } else { - // Linear interpolation for other values - interpolatedValues[key] = from + (to - from) * easedProgress; + if (fromValues.hasOwnProperty(key)) { + const from = fromValues[key]; + const to = toValues[key]; + + if (interpolateValue && key === 'zoom') { + // Special interpolation for zoom to feel more natural + // Exponential interpolation preserves relative zoom feel + interpolatedValues[key] = from * Math.pow(to / from, easedProgress); + } else { + // Linear interpolation for other values + interpolatedValues[key] = from + (to - from) * easedProgress; + } } } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index baf605e0d3..07ba14e2be 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -3229,7 +3229,9 @@ RED.view = (function() { } function animateMomentumScroll() { - if (!momentumActive) return; + if (!momentumActive) { + return; + } var scrollX = chart.scrollLeft(); var scrollY = chart.scrollTop(); From c9e0aaf34ebf93ba9ce9af53a064eb804cfb72c1 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 21 Oct 2025 09:24:58 +0100 Subject: [PATCH 057/160] Make zoom scale 1 sticky to make it easier to get to --- .../@node-red/editor-client/src/js/ui/view.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 07ba14e2be..453a545ada 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -3073,7 +3073,12 @@ RED.view = (function() { if (Math.abs(scaleFactor - factor) < 0.001) { return; } + // Make scale 1 'sticky' + if (Math.abs(1.0 - factor) < 0.02) { + factor = 1 + } + console.log(factor) var screenSize = [chart.width(),chart.height()]; var scrollPos = [chart.scrollLeft(),chart.scrollTop()]; var oldScaleFactor = scaleFactor; @@ -3130,6 +3135,11 @@ RED.view = (function() { if (Math.abs(scaleFactor - targetFactor) < 0.01) { return; } + // Make scale 1 'sticky' + if (Math.abs(1.0 - targetFactor) < 0.02) { + targetFactor = 1 + } + var startFactor = scaleFactor; var screenSize = [chart.width(), chart.height()]; From b0cafda4964daf846f1b42d905143acb0a29c557 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 21 Oct 2025 17:46:59 +0100 Subject: [PATCH 058/160] Reimplement Palette as Sidebar component --- .../@node-red/editor-client/src/js/red.js | 4 +- .../editor-client/src/js/ui/palette.js | 37 ++++++------ .../editor-client/src/js/ui/sidebar.js | 1 + .../editor-client/src/sass/palette.scss | 58 ++++++++++--------- 4 files changed, 51 insertions(+), 49 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js index 99cb8375b9..64cb2483ae 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/red.js +++ b/packages/node_modules/@node-red/editor-client/src/js/red.js @@ -843,6 +843,7 @@ var RED = (function() { RED.user.init(); RED.notifications.init(); RED.library.init(); + RED.sidebar.init(); RED.palette.init(); RED.eventLog.init(); @@ -852,7 +853,6 @@ var RED = (function() { console.log("Palette editor disabled"); } - RED.sidebar.init(); if (RED.settings.theme("projects.enabled",false)) { RED.projects.init(); @@ -897,7 +897,7 @@ var RED = (function() { $('
'+ '
'+ '
'+ - '
'+ + // '
'+ '
'+ '
'+ '
').appendTo(options.target); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js index 89337e7c9e..63bba053cf 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js @@ -33,7 +33,6 @@ RED.palette = (function() { ]; var categoryContainers = {}; - var sidebarControls; let paletteState = { filter: "", collapsed: [] }; @@ -310,6 +309,7 @@ RED.palette = (function() { width: "300px", content: "hi", delay: { show: 750, hide: 50 } + // direction: "left" }); d.data('popover',popover); @@ -332,7 +332,7 @@ RED.palette = (function() { revert: 'invalid', revertDuration: 200, containment:'#red-ui-main-container', - start: function() { + start: function(e, ui) { dropEnabled = !(RED.nodes.workspace(RED.workspaces.active())?.locked); paletteWidth = $("#red-ui-palette").width(); paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top; @@ -358,7 +358,9 @@ RED.palette = (function() { }, drag: function(e,ui) { var paletteNode = getPaletteNode(nt); - ui.originalPosition.left = paletteNode.offset().left; + console.log(ui.originalPosition.left, paletteNode.offset().left) + // ui.originalPosition.left = paletteNode.offset().left; + // console.log(paletteNode.offset()) if (dropEnabled) { mouseX = ui.position.left - paletteWidth + (ui.helper.width()/2) + chart.scrollLeft(); mouseY = ui.position.top - paletteTop + (ui.helper.height()/2) + chart.scrollTop() + 10; @@ -607,11 +609,22 @@ RED.palette = (function() { function init() { + const content = $('
') + RED.sidebar.addTab({ + id: "palette", + label: "Palette", + name: "Palette", + iconClass: "fa fa-tags", + content: content, + pinned: true, + enableOnEdit: true + }); + $('').appendTo("#red-ui-palette"); $('').appendTo("#red-ui-palette"); $('
').appendTo("#red-ui-palette"); $('
').appendTo("#red-ui-palette"); - $('
').appendTo("#red-ui-palette"); + // $('
').appendTo("#red-ui-palette"); $("#red-ui-palette > .red-ui-palette-spinner").show(); @@ -670,19 +683,6 @@ RED.palette = (function() { } }); - sidebarControls = $('
').appendTo($("#red-ui-palette")); - RED.popover.tooltip(sidebarControls,RED._("keyboard.togglePalette"),"core:toggle-palette"); - - sidebarControls.on("click", function() { - RED.menu.toggleSelected("menu-item-palette"); - }) - $("#red-ui-palette").on("mouseenter", function() { - sidebarControls.toggle("slide", { direction: "left" }, 200); - }) - $("#red-ui-palette").on("mouseleave", function() { - sidebarControls.stop(false,true); - sidebarControls.hide(); - }) var userCategories = []; if (RED.settings.paletteCategories) { userCategories = RED.settings.paletteCategories; @@ -754,11 +754,8 @@ RED.palette = (function() { function togglePalette(state) { if (!state) { $("#red-ui-main-container").addClass("red-ui-palette-closed"); - sidebarControls.hide(); - sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left"); } else { $("#red-ui-main-container").removeClass("red-ui-palette-closed"); - sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left"); } setTimeout(function() { $(window).trigger("resize"); } ,200); } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index eb10fe043d..fa817f564a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -223,6 +223,7 @@ RED.sidebar = (function() { } function init () { + console.log('sidebar init') setupSidebarSeparator(); sidebar_tabs = RED.tabs.create({ element: $('
    ').appendTo("#red-ui-sidebar"), diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss index 507869690b..3277826749 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss @@ -18,36 +18,35 @@ #red-ui-palette{ - position: absolute; - top: 0px; - bottom: 0px; - left:0px; + // position: absolute; + // top: 0px; + // bottom: 0px; + // left:0px; background: var(--red-ui-primary-background); - width: 180px; + // width: 180px; text-align: center; @include mixins.disable-selection; - @include mixins.component-border; transition: width 0.2s ease-in-out; - &:before { - content: ''; - top: 0px; - bottom: 0px; - right: 0px; - width: 7px; - height: 100%; - z-index: 4; - position: absolute; - -webkit-mask-image: url(images/grip.svg); - mask-image: url(images/grip.svg); - -webkit-mask-size: auto; - mask-size: auto; - -webkit-mask-position: 50% 50%; - mask-position: 50% 50%; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - background-color: var(--red-ui-grip-color); - } + // &:before { + // content: ''; + // top: 0px; + // bottom: 0px; + // right: 0px; + // width: 7px; + // height: 100%; + // z-index: 4; + // position: absolute; + // -webkit-mask-image: url(images/grip.svg); + // mask-image: url(images/grip.svg); + // -webkit-mask-size: auto; + // mask-size: auto; + // -webkit-mask-position: 50% 50%; + // mask-position: 50% 50%; + // -webkit-mask-repeat: no-repeat; + // mask-repeat: no-repeat; + // background-color: var(--red-ui-grip-color); + // } } .red-ui-palette-closed { @@ -91,6 +90,11 @@ .red-ui-palette-content { background: var(--red-ui-palette-content-background); padding: 3px; + > div { + display: flex; + flex-direction: column; + align-items: center; + } } .red-ui-palette-header { @@ -144,7 +148,7 @@ // display: inline-block; cursor: move; background: var(--red-ui-secondary-background); - margin: 10px auto; + margin: 5px 0; height: 25px; border-radius: 5px; border: 1px solid var(--red-ui-node-border); @@ -153,7 +157,7 @@ width: 120px; background-size: contain; position: relative; - z-index: 4; + z-index: 20; &:not(.red-ui-palette-node-config):not(.red-ui-palette-node-small):first-child { margin-top: 15px; } From 4bcec3741dfc5b5b618644a407d186444124fea0 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 21 Oct 2025 18:54:33 +0100 Subject: [PATCH 059/160] Move palette footer to sidebar toolbar --- .../@node-red/editor-client/src/js/ui/palette.js | 7 ++++--- .../@node-red/editor-client/src/sass/palette.scss | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js index 63bba053cf..de66eb224a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js @@ -610,12 +610,14 @@ RED.palette = (function() { function init() { const content = $('
    ') + const toolbar = $('
    '); RED.sidebar.addTab({ id: "palette", label: "Palette", name: "Palette", iconClass: "fa fa-tags", - content: content, + content, + toolbar, pinned: true, enableOnEdit: true }); @@ -623,7 +625,6 @@ RED.palette = (function() { $('').appendTo("#red-ui-palette"); $('').appendTo("#red-ui-palette"); $('
    ').appendTo("#red-ui-palette"); - $('
    ').appendTo("#red-ui-palette"); // $('
    ').appendTo("#red-ui-palette"); $("#red-ui-palette > .red-ui-palette-spinner").show(); @@ -704,7 +705,7 @@ RED.palette = (function() { } }); - var paletteFooterButtons = $('').appendTo("#red-ui-palette .red-ui-component-footer"); + var paletteFooterButtons = $('').appendTo(toolbar); var paletteCollapseAll = $('').appendTo(paletteFooterButtons); paletteCollapseAll.on("click", function(e) { e.preventDefault(); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss index 3277826749..236bdf5706 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss @@ -64,7 +64,7 @@ position: absolute; top: 35px; right: 0; - bottom: 25px; + bottom: 0; left:0; padding: 0; overflow-y: auto; From 6e264084e747fb8c3df1b308c917e55c6009e5b0 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 22 Oct 2025 11:39:13 +0100 Subject: [PATCH 060/160] Fix z ordering of palette nodes --- .../node_modules/@node-red/editor-client/src/js/ui/palette.js | 1 + .../node_modules/@node-red/editor-client/src/sass/palette.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js index de66eb224a..df42149009 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js @@ -333,6 +333,7 @@ RED.palette = (function() { revertDuration: 200, containment:'#red-ui-main-container', start: function(e, ui) { + ui.helper.css('z-index', 1000); dropEnabled = !(RED.nodes.workspace(RED.workspaces.active())?.locked); paletteWidth = $("#red-ui-palette").width(); paletteTop = $("#red-ui-palette").parent().position().top + $("#red-ui-palette-container").position().top; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss index 236bdf5706..d451d44a81 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss @@ -157,7 +157,7 @@ width: 120px; background-size: contain; position: relative; - z-index: 20; + z-index: 5; &:not(.red-ui-palette-node-config):not(.red-ui-palette-node-small):first-child { margin-top: 15px; } From c90f93ec5618c53f6baa44b589db4a110ea84fec Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 23 Oct 2025 17:24:15 +0100 Subject: [PATCH 061/160] Fix sidebar apis for dual sidebars --- .../@node-red/editor-client/src/js/red.js | 7 +- .../editor-client/src/js/ui/common/tabs.js | 4 +- .../editor-client/src/js/ui/palette.js | 18 +- .../editor-client/src/js/ui/sidebar.js | 244 +++++++++++------- .../editor-client/src/js/ui/tab-info.js | 1 + .../editor-client/src/sass/base.scss | 2 + .../editor-client/src/sass/palette.scss | 11 - .../editor-client/src/sass/sidebar.scss | 50 ++-- .../editor-client/src/sass/workspace.scss | 23 +- 9 files changed, 189 insertions(+), 171 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js index 64cb2483ae..1c073b137d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/red.js +++ b/packages/node_modules/@node-red/editor-client/src/js/red.js @@ -894,13 +894,14 @@ var RED = (function() { var logo = $('').appendTo(header); $('
      ').appendTo(header); $('
      ').appendTo(header); - $('
      '+ + $('
      '+ + '
      '+ '
      '+ + '
      '+ '
      '+ // '
      '+ - '
      '+ - '
      '+ '
      ').appendTo(options.target); + $('
      ').appendTo(options.target); $('
      ').appendTo(options.target); $('
      ').appendTo(options.target); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js index d9dc4b2893..a9fef7cee5 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js @@ -545,7 +545,6 @@ RED.tabs = (function() { ul.find("li.red-ui-tab.active .red-ui-tab-label").css({paddingLeft:""}) } } - } ul.find("li.red-ui-tab a") @@ -1045,7 +1044,8 @@ RED.tabs = (function() { pinnedButtons["__menu__"].appendTo(collapsedButtonsRow); updateTabWidths(); } - } + }, + container: wrapper } return tabAPI; } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js index df42149009..1cd2d0b41e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js @@ -613,6 +613,7 @@ RED.palette = (function() { const content = $('
      ') const toolbar = $('
      '); RED.sidebar.addTab({ + target: 'secondary', id: "palette", label: "Palette", name: "Palette", @@ -729,13 +730,7 @@ RED.palette = (function() { }); RED.popover.tooltip(paletteExpandAll,RED._('palette.actions.expand-all')); - RED.actions.add("core:toggle-palette", function(state) { - if (state === undefined) { - RED.menu.toggleSelected("menu-item-palette"); - } else { - togglePalette(state); - } - }); + try { paletteState = JSON.parse(RED.settings.getLocal("palette-state") || '{"filter":"", "collapsed": []}'); @@ -753,15 +748,6 @@ RED.palette = (function() { }, 10000) } - function togglePalette(state) { - if (!state) { - $("#red-ui-main-container").addClass("red-ui-palette-closed"); - } else { - $("#red-ui-main-container").removeClass("red-ui-palette-closed"); - } - setTimeout(function() { $(window).trigger("resize"); } ,200); - } - function getCategories() { var categories = []; $("#red-ui-palette-container .red-ui-palette-category").each(function(i,d) { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index fa817f564a..f4ec5be40e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -15,13 +15,29 @@ **/ RED.sidebar = (function() { - //$('#sidebar').tabs(); - var sidebar_tabs; + const primarySidebar = { + id: 'primary', + direction: 'right', + menuToggle: 'menu-item-sidebar', + minimumWidth: 180, + defaultWidth: 300 + } + + // Palette Sidebar + const secondarySidebar = { + id: 'secondary', + direction: 'left', + menuToggle: 'menu-item-palette', + minimumWidth: 180, + defaultWidth: 180 + } + + var knownTabs = {}; // We store the current sidebar tab id in localStorage as 'last-sidebar-tab' // This is restored when the editor is reloaded. - // We use sidebar_tabs.onchange to update localStorage. However that will + // We use primarySidebar.tabs.onchange to update localStorage. However that will // also get triggered when the first tab gets added to the tabs - typically // the 'info' tab. So we use the following variable to store the retrieved // value from localStorage before we start adding the actual tabs @@ -44,9 +60,10 @@ RED.sidebar = (function() { options = title; } + const targetSidebar = options.target === 'secondary' ? secondarySidebar : primarySidebar; delete options.closeable; - options.wrapper = $('
      ',{style:"height:100%"}).appendTo("#red-ui-sidebar-content") + options.wrapper = $('
      ',{style:"height:100%"}).appendTo(targetSidebar.content) options.wrapper.append(options.content); options.wrapper.hide(); @@ -55,7 +72,7 @@ RED.sidebar = (function() { } if (options.toolbar) { - $("#red-ui-sidebar-footer").append(options.toolbar); + targetSidebar.footer.append(options.toolbar); $(options.toolbar).hide(); } var id = options.id; @@ -74,131 +91,151 @@ RED.sidebar = (function() { knownTabs[options.id] = options; if (options.visible !== false) { - sidebar_tabs.addTab(knownTabs[options.id]); + targetSidebar.tabs.addTab(knownTabs[options.id]); + } + if (targetSidebar.tabs.count() > 1) { + targetSidebar.tabs.container.show() } } function removeTab(id) { - sidebar_tabs.removeTab(id); - $(knownTabs[id].wrapper).remove(); - if (knownTabs[id].footer) { - knownTabs[id].footer.remove(); + if (knownTabs[id]) { + const targetSidebar = knownTabs[id].target === 'secondary' ? secondarySidebar : primarySidebar; + targetSidebar.tabs.removeTab(id); + $(knownTabs[id].wrapper).remove(); + if (knownTabs[id].footer) { + knownTabs[id].footer.remove(); + } + delete knownTabs[id]; + RED.menu.removeItem("menu-item-view-menu-"+id); + if (targetSidebar.tabs.count() <= 1) { + targetSidebar.tabs.container.hide() + } } - delete knownTabs[id]; - RED.menu.removeItem("menu-item-view-menu-"+id); } var sidebarSeparator = {}; sidebarSeparator.dragging = false; - function setupSidebarSeparator() { - $("#red-ui-sidebar-separator").draggable({ + function setupSidebarSeparator(sidebar) { + const separator = $('
      '); + let scaleFactor = 1; + let controlClass = 'red-ui-sidebar-control-right'; + let controlSlideDirection = 'right'; + if (sidebar.direction === 'right') { + separator.insertBefore(sidebar.container); + } else if (sidebar.direction === 'left') { + scaleFactor = -1; + controlClass = 'red-ui-sidebar-control-left'; + controlSlideDirection = 'left'; + separator.insertAfter(sidebar.container); + } + separator.draggable({ axis: "x", start:function(event,ui) { sidebarSeparator.closing = false; sidebarSeparator.opening = false; - var winWidth = $("#red-ui-editor").width(); + // var winWidth = $("#red-ui-editor").width(); sidebarSeparator.start = ui.position.left; + sidebarSeparator.width = sidebar.container.width(); sidebarSeparator.chartWidth = $("#red-ui-workspace").width(); - sidebarSeparator.chartRight = winWidth-$("#red-ui-workspace").width()-$("#red-ui-workspace").offset().left-2; sidebarSeparator.dragging = true; - if (!RED.menu.isSelected("menu-item-sidebar")) { + if (!RED.menu.isSelected(sidebar.menuToggle)) { sidebarSeparator.opening = true; - var newChartRight = 7; - $("#red-ui-sidebar").addClass("closing"); - $("#red-ui-workspace").css("right",newChartRight); - $("#red-ui-editor-stack").css("right",newChartRight+1); - $("#red-ui-sidebar").width(0); - RED.menu.setSelected("menu-item-sidebar",true); + sidebar.container.width(0); + RED.menu.setSelected(sidebar.menuToggle,true); RED.events.emit("sidebar:resize"); } - sidebarSeparator.width = $("#red-ui-sidebar").width(); + sidebarSeparator.width = sidebar.container.width(); }, drag: function(event,ui) { - var d = ui.position.left-sidebarSeparator.start; - var newSidebarWidth = sidebarSeparator.width-d; + var d = scaleFactor * (ui.position.left-sidebarSeparator.start); + + var newSidebarWidth = sidebarSeparator.width - d; if (sidebarSeparator.opening) { - newSidebarWidth -= 3; + newSidebarWidth -= 3 * scaleFactor; } if (newSidebarWidth > 150) { - if (sidebarSeparator.chartWidth+d < 200) { + if (sidebarSeparator.chartWidth + d < 200) { ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth; d = ui.position.left-sidebarSeparator.start; newSidebarWidth = sidebarSeparator.width-d; } } - if (newSidebarWidth < 150) { - if (!sidebarSeparator.closing) { - $("#red-ui-sidebar").addClass("closing"); - sidebarSeparator.closing = true; - } - if (!sidebarSeparator.opening) { - newSidebarWidth = 150; - ui.position.left = sidebarSeparator.width-(150 - sidebarSeparator.start); - d = ui.position.left-sidebarSeparator.start; + if (newSidebarWidth < sidebar.minimumWidth) { + if (newSidebarWidth > 100) { + newSidebarWidth = sidebar.minimumWidth + sidebarSeparator.closing = false + } else { + newSidebarWidth = 0 + sidebarSeparator.closing = true } - } else if (newSidebarWidth > 150 && (sidebarSeparator.closing || sidebarSeparator.opening)) { - sidebarSeparator.closing = false; - $("#red-ui-sidebar").removeClass("closing"); + } else { + sidebarSeparator.closing = false } + sidebar.container.width(newSidebarWidth); + ui.position.left -= scaleFactor * d - var newChartRight = sidebarSeparator.chartRight-d; - $("#red-ui-workspace").css("right",newChartRight); - $("#red-ui-editor-stack").css("right",newChartRight+1); - $("#red-ui-sidebar").width(newSidebarWidth); - - sidebar_tabs.resize(); + sidebar.tabs.resize(); RED.events.emit("sidebar:resize"); }, stop:function(event,ui) { sidebarSeparator.dragging = false; if (sidebarSeparator.closing) { - $("#red-ui-sidebar").removeClass("closing"); - RED.menu.setSelected("menu-item-sidebar",false); - if ($("#red-ui-sidebar").width() < 180) { - $("#red-ui-sidebar").width(180); - $("#red-ui-workspace").css("right",187); - $("#red-ui-editor-stack").css("right",188); + sidebar.container.removeClass("closing"); + if (sidebar.menuToggle) { + RED.menu.setSelected(sidebar.menuToggle,false); + } + sidebar.container.hide() + if (sidebar.container.width() < sidebar.minimumWidth) { + sidebar.container.width(sidebar.defaultWidth); } } - $("#red-ui-sidebar-separator").css("left","auto"); - $("#red-ui-sidebar-separator").css("right",($("#red-ui-sidebar").width()+2)+"px"); + // $(".red-ui-sidebar-separator").css("left","auto"); + // $(".red-ui-sidebar-separator").css("right",(sidebar.container.width()+2)+"px"); RED.events.emit("sidebar:resize"); } }); - var sidebarControls = $('
      ').appendTo($("#red-ui-sidebar-separator")); + var sidebarControls = $('
      ').appendTo(separator); + sidebarControls.addClass(controlClass) sidebarControls.on("click", function() { sidebarControls.hide(); - RED.menu.toggleSelected("menu-item-sidebar"); + RED.menu.toggleSelected(sidebar.menuToggle); }) - $("#red-ui-sidebar-separator").on("mouseenter", function() { + separator.on("mouseenter", function() { if (!sidebarSeparator.dragging) { - if (RED.menu.isSelected("menu-item-sidebar")) { + if ( (RED.menu.isSelected(sidebar.menuToggle) && sidebar.direction === 'right') || + (!RED.menu.isSelected(sidebar.menuToggle) && sidebar.direction === 'left') ) { sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left"); } else { sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left"); } - sidebarControls.toggle("slide", { direction: "right" }, 200); + sidebarControls.toggle("slide", { direction: controlSlideDirection }, 200); } }) - $("#red-ui-sidebar-separator").on("mouseleave", function() { + separator.on("mouseleave", function() { if (!sidebarSeparator.dragging) { sidebarControls.stop(false,true); sidebarControls.hide(); } }); + return separator } - function toggleSidebar(state) { + function toggleSidebar(sidebar, state) { if (!state) { - $("#red-ui-main-container").addClass("red-ui-sidebar-closed"); + sidebar.container.hide() } else { - $("#red-ui-main-container").removeClass("red-ui-sidebar-closed"); - sidebar_tabs.resize(); + // console.log(sidebar.container.width(),sidebar.tabs.container.width()) + sidebar.container.show() + sidebar.tabs.container.width() + setTimeout(function () { + sidebar.tabs.resize() + }, 100) } RED.events.emit("sidebar:resize"); } @@ -208,36 +245,43 @@ RED.sidebar = (function() { id = lastSessionSelectedTab || RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"])[0] } if (id) { - if (!containsTab(id) && knownTabs[id]) { - sidebar_tabs.addTab(knownTabs[id]); - } - sidebar_tabs.activateTab(id); - if (!skipShowSidebar && !RED.menu.isSelected("menu-item-sidebar")) { - RED.menu.setSelected("menu-item-sidebar",true); + const tabOptions = knownTabs[id]; + if (tabOptions) { + const targetSidebar = tabOptions.target === 'secondary' ? secondarySidebar : primarySidebar; + if (!targetSidebar.tabs.contains(id)) { + targetSidebar.tabs.addTab(knownTabs[id]); + } + targetSidebar.tabs.activateTab(id); + if (!skipShowSidebar && !RED.menu.isSelected(targetSidebar.menuToggle)) { + RED.menu.setSelected(targetSidebar.menuToggle,true); + } } } } function containsTab(id) { - return sidebar_tabs.contains(id); + return primarySidebar.tabs.contains(id); } - function init () { - console.log('sidebar init') - setupSidebarSeparator(); - sidebar_tabs = RED.tabs.create({ - element: $('
        ').appendTo("#red-ui-sidebar"), + function setupSidebar(sidebar) { + sidebar.container.addClass("red-ui-sidebar"); + sidebar.container.width(sidebar.defaultWidth); + sidebar.separator = setupSidebarSeparator(sidebar); + sidebar.tabs = RED.tabs.create({ + element: $('
          ').appendTo(sidebar.container), onchange:function(tab) { - $("#red-ui-sidebar-content").children().hide(); - $("#red-ui-sidebar-footer").children().hide(); - if (tab.onchange) { - tab.onchange.call(tab); - } - $(tab.wrapper).show(); - if (tab.toolbar) { - $(tab.toolbar).show(); + sidebar.content.children().hide(); + sidebar.footer.children().hide(); + if (tab) { + if (tab.onchange) { + tab.onchange.call(tab); + } + $(tab.wrapper).show(); + if (tab.toolbar) { + $(tab.toolbar).show(); + } + RED.settings.setLocal("last-sidebar-tab", tab.id) } - RED.settings.setLocal("last-sidebar-tab", tab.id) }, onremove: function(tab) { $(tab.wrapper).hide(); @@ -253,19 +297,35 @@ RED.sidebar = (function() { order: RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"]) // scrollable: true }); + sidebar.tabs.container.hide() + sidebar.content = $('
          ').appendTo(sidebar.container); + sidebar.footer = $('
          ').appendTo(sidebar.container); + sidebar.shade = $('
          ').appendTo(sidebar.container); - $('
          ').appendTo("#red-ui-sidebar"); - $('').appendTo("#red-ui-sidebar"); - $('
          ').appendTo("#red-ui-sidebar"); + } + function init () { + primarySidebar.container = $("#red-ui-sidebar"); + setupSidebar(primarySidebar) + secondarySidebar.container = $("#red-ui-sidebar-left"); + setupSidebar(secondarySidebar) RED.actions.add("core:toggle-sidebar",function(state){ if (state === undefined) { - RED.menu.toggleSelected("menu-item-sidebar"); + RED.menu.toggleSelected(primarySidebar.menuToggle); } else { - toggleSidebar(state); + toggleSidebar(primarySidebar, state); } }); - RED.popover.tooltip($("#red-ui-sidebar-separator").find(".red-ui-sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar"); + RED.actions.add("core:toggle-palette", function(state) { + if (state === undefined) { + RED.menu.toggleSelected(secondarySidebar.menuToggle); + } else { + toggleSidebar(secondarySidebar, state); + } + }); + + + RED.popover.tooltip(primarySidebar.separator.find(".red-ui-sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar"); lastSessionSelectedTab = RED.settings.getLocal("last-sidebar-tab") @@ -273,7 +333,7 @@ RED.sidebar = (function() { RED.sidebar.help.init(); RED.sidebar.config.init(); RED.sidebar.context.init(); - // hide info bar at start if screen rather narrow... + // hide sidebar at start if screen rather narrow... if ($("#red-ui-editor").width() < 600) { RED.menu.setSelected("menu-item-sidebar",false); } } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js index fa9b98322b..b6fdb8f33c 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js @@ -119,6 +119,7 @@ RED.sidebar.info = (function() { RED.sidebar.addTab({ id: "info", + // target: "secondary", label: RED._("sidebar.info.label"), name: RED._("sidebar.info.name"), iconClass: "fa fa-info", diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss index afbafe049b..b6bded65d6 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss @@ -42,6 +42,8 @@ body { position: absolute; top: var(--red-ui-header-height); left:0; bottom: 0; right:0; overflow:hidden; + display: flex; + flex-direction: row; } #red-ui-palette-shade, #red-ui-editor-shade, #red-ui-header-shade, #red-ui-sidebar-shade { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss index d451d44a81..39b17eab2c 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/palette.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/palette.scss @@ -49,17 +49,6 @@ // } } -.red-ui-palette-closed { - #red-ui-palette { - width: 8px; - .red-ui-component-footer { - display: none; - } - } - #red-ui-palette-search { display: none; } - #red-ui-palette-container { display: none; } -} - .red-ui-palette-scroll { position: absolute; top: 35px; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index 47c8dbc131..acd983aad3 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -16,38 +16,42 @@ * limitations under the License. **/ -#red-ui-sidebar { - position: absolute; - top: 0px; - right: 0px; - bottom: 0px; +.red-ui-sidebar { + position: relative; + flex-grow: 0; + flex-shrink: 0; width: 315px; background: var(--red-ui-primary-background); box-sizing: border-box; z-index: 10; @include mixins.component-border; + display: flex; + flex-direction: column; } #red-ui-sidebar.closing { border-style: dashed; } - -#red-ui-sidebar-content { - position: absolute; +.red-ui-sidebar > .red-ui-tabs { + flex-grow: 0; + flex-shrink: 0; +} +.red-ui-sidebar-footer { + @include mixins.component-footer; + position: relative; + flex-grow: 0; + flex-shrink: 0; +} +.red-ui-sidebar-content { + position: relative; background: var(--red-ui-secondary-background); - top: 35px; - right: 0; - bottom: 25px; - left: 0px; + flex-grow: 1; overflow-y: auto; } -#red-ui-sidebar-separator { - position: absolute; - top: 5px; - right: 315px; - bottom:10px; - width: 7px; +.red-ui-sidebar-separator { + width: 10px; + flex: 0 0 auto; // z-index: 11; background-color: var(--red-ui-primary-background); cursor: col-resize; @@ -69,12 +73,7 @@ } } -.red-ui-sidebar-closed > #red-ui-sidebar { display: none; } -.red-ui-sidebar-closed > #red-ui-sidebar-separator { right: 0px !important; } -.red-ui-sidebar-closed > #red-ui-workspace { right: 7px !important; } -.red-ui-sidebar-closed > #red-ui-editor-stack { right: 8px !important; } - -#red-ui-sidebar .button { +.red-ui-sidebar .button { @include mixins.workspace-button; line-height: 18px; font-size: 12px; @@ -138,7 +137,7 @@ button.red-ui-sidebar-header-button-toggle { display: none; position: absolute; top: calc(50% - 26px); - + z-index: 13; padding:15px 8px; border:1px solid var(--red-ui-primary-border-color); background:var(--red-ui-primary-background); @@ -152,7 +151,6 @@ button.red-ui-sidebar-header-button-toggle { right: calc(100%); border-top-left-radius: 5px; border-bottom-left-radius: 5px; - z-index: 13; } .red-ui-sidebar-control-left { @include red-ui-sidebar-control; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss index 95b8b4b458..d95cbf295a 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss @@ -17,15 +17,12 @@ **/ #red-ui-workspace { - position: absolute; margin: 0; - top:0px; - left:179px; - bottom: 0px; - right: 322px; overflow: hidden; @include mixins.component-border; transition: left 0.1s ease-in-out; + position: relative; + flex-grow: 1; } #red-ui-workspace-chart { @@ -66,22 +63,6 @@ } } -.red-ui-palette-closed #red-ui-workspace { - left: 7px; -} - -// .workspace-footer-button { -// @include component-footer-button; -// margin-left: 2px; -// margin-right: 2px; -// } -// -// .workspace-footer-button-toggle { -// @include component-footer-button-toggle; -// margin-left: 2px; -// margin-right: 2px; -// } - #red-ui-workspace-tabs:not(.red-ui-workspace-focussed) { opacity:0.8; } From 2e777db80c87fbb48e83ab49568116c2cb5a551b Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Fri, 24 Oct 2025 11:40:56 +0100 Subject: [PATCH 062/160] Handle resizing and shade on separators --- .../editor-client/src/js/ui/actionList.js | 8 +- .../editor-client/src/js/ui/deploy.js | 4 +- .../@node-red/editor-client/src/js/ui/diff.js | 4 +- .../src/js/ui/projects/projectSettings.js | 4 +- .../editor-client/src/js/ui/search.js | 8 +- .../editor-client/src/js/ui/sidebar.js | 132 +++++++++--------- .../@node-red/editor-client/src/js/ui/tray.js | 2 + .../editor-client/src/js/ui/userSettings.js | 4 +- .../@node-red/editor-client/src/js/ui/view.js | 4 +- .../editor-client/src/sass/base.scss | 7 +- .../editor-client/src/sass/sidebar.scss | 6 +- 11 files changed, 91 insertions(+), 92 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/actionList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/actionList.js index d47a20f5d2..4ec773d395 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/actionList.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/actionList.js @@ -154,8 +154,7 @@ RED.actionList = (function() { $("#red-ui-header-shade").show(); $("#red-ui-editor-shade").show(); $("#red-ui-palette-shade").show(); - $("#red-ui-sidebar-shade").show(); - $("#red-ui-sidebar-separator").hide(); + $(".red-ui-sidebar-shade").show(); if (dialog === null) { createDialog(); } @@ -189,8 +188,7 @@ RED.actionList = (function() { $("#red-ui-header-shade").hide(); $("#red-ui-editor-shade").hide(); $("#red-ui-palette-shade").hide(); - $("#red-ui-sidebar-shade").hide(); - $("#red-ui-sidebar-separator").show(); + $(".red-ui-sidebar-shade").hide(); if (dialog !== null) { dialog.slideUp(200,function() { searchInput.searchBox('value',''); @@ -222,7 +220,7 @@ RED.actionList = (function() { $("#red-ui-header-shade").on('mousedown',hide); $("#red-ui-editor-shade").on('mousedown',hide); $("#red-ui-palette-shade").on('mousedown',hide); - $("#red-ui-sidebar-shade").on('mousedown',hide); + $(".red-ui-sidebar-shade").on('mousedown',hide); } return { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js b/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js index d318f476cb..456c0f249f 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js @@ -313,13 +313,13 @@ RED.deploy = (function() { $("#red-ui-header-shade").show(); $("#red-ui-editor-shade").show(); $("#red-ui-palette-shade").show(); - $("#red-ui-sidebar-shade").show(); + $(".red-ui-sidebar-shade").show(); } function shadeHide() { $("#red-ui-header-shade").hide(); $("#red-ui-editor-shade").hide(); $("#red-ui-palette-shade").hide(); - $("#red-ui-sidebar-shade").hide(); + $(".red-ui-sidebar-shade").hide(); } function deployButtonSetBusy(){ $(".red-ui-deploy-button-content").css('opacity',0); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js index 26cdceb7e5..186a56fcca 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/diff.js @@ -1363,11 +1363,11 @@ RED.diff = (function() { diffTable.finish(); diffTable.list.show(); },300); - $("#red-ui-sidebar-shade").show(); + $(".red-ui-sidebar-shade").show(); }, close: function() { diffVisible = false; - $("#red-ui-sidebar-shade").hide(); + $(".red-ui-sidebar-shade").hide(); }, show: function() { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js index b682a5f60e..0c47c45108 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/projects/projectSettings.js @@ -95,7 +95,7 @@ RED.projects.settings = (function() { }); settingsContent.i18n(); settingsTabs.activateTab("red-ui-project-settings-tab-"+(initialTab||'main')) - $("#red-ui-sidebar-shade").show(); + $(".red-ui-sidebar-shade").show(); }, close: function() { settingsVisible = false; @@ -104,7 +104,7 @@ RED.projects.settings = (function() { pane.close(); } }); - $("#red-ui-sidebar-shade").hide(); + $(".red-ui-sidebar-shade").hide(); }, show: function() {} diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js index 3903a4a0a9..d07023484b 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/search.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/search.js @@ -518,8 +518,7 @@ RED.search = (function() { $("#red-ui-header-shade").show(); $("#red-ui-editor-shade").show(); $("#red-ui-palette-shade").show(); - $("#red-ui-sidebar-shade").show(); - $("#red-ui-sidebar-separator").hide(); + $(".red-ui-sidebar-shade").show(); if (dialog === null) { createDialog(); @@ -543,8 +542,7 @@ RED.search = (function() { $("#red-ui-header-shade").hide(); $("#red-ui-editor-shade").hide(); $("#red-ui-palette-shade").hide(); - $("#red-ui-sidebar-shade").hide(); - $("#red-ui-sidebar-separator").show(); + $(".red-ui-sidebar-shade").hide(); if (dialog !== null) { dialog.slideUp(200,function() { searchInput.searchBox('value',''); @@ -644,7 +642,7 @@ RED.search = (function() { $("#red-ui-header-shade").on('mousedown',hide); $("#red-ui-editor-shade").on('mousedown',hide); $("#red-ui-palette-shade").on('mousedown',hide); - $("#red-ui-sidebar-shade").on('mousedown',hide); + $(".red-ui-sidebar-shade").on('mousedown',hide); $("#red-ui-view-searchtools-close").on("click", function close() { clearActiveSearch(); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index f4ec5be40e..be6f8863a0 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -20,6 +20,7 @@ RED.sidebar = (function() { direction: 'right', menuToggle: 'menu-item-sidebar', minimumWidth: 180, + maximumWidth: 800, defaultWidth: 300 } @@ -29,10 +30,10 @@ RED.sidebar = (function() { direction: 'left', menuToggle: 'menu-item-palette', minimumWidth: 180, + maximumWidth: 180, defaultWidth: 180 } - var knownTabs = {}; // We store the current sidebar tab id in localStorage as 'last-sidebar-tab' @@ -119,6 +120,7 @@ RED.sidebar = (function() { function setupSidebarSeparator(sidebar) { const separator = $('
          '); + const shade = $('
          ').appendTo(separator); let scaleFactor = 1; let controlClass = 'red-ui-sidebar-control-right'; let controlSlideDirection = 'right'; @@ -131,73 +133,75 @@ RED.sidebar = (function() { separator.insertAfter(sidebar.container); } separator.draggable({ - axis: "x", - start:function(event,ui) { - sidebarSeparator.closing = false; - sidebarSeparator.opening = false; - // var winWidth = $("#red-ui-editor").width(); - sidebarSeparator.start = ui.position.left; - sidebarSeparator.width = sidebar.container.width(); - sidebarSeparator.chartWidth = $("#red-ui-workspace").width(); - sidebarSeparator.dragging = true; - - if (!RED.menu.isSelected(sidebar.menuToggle)) { - sidebarSeparator.opening = true; - sidebar.container.width(0); - RED.menu.setSelected(sidebar.menuToggle,true); - RED.events.emit("sidebar:resize"); - } - sidebarSeparator.width = sidebar.container.width(); - }, - drag: function(event,ui) { - var d = scaleFactor * (ui.position.left-sidebarSeparator.start); - - var newSidebarWidth = sidebarSeparator.width - d; - if (sidebarSeparator.opening) { - newSidebarWidth -= 3 * scaleFactor; - } - - if (newSidebarWidth > 150) { - if (sidebarSeparator.chartWidth + d < 200) { - ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth; - d = ui.position.left-sidebarSeparator.start; - newSidebarWidth = sidebarSeparator.width-d; - } + axis: "x", + start:function(event,ui) { + if (shade.is(":visible")) { + return false + } + sidebarSeparator.closing = false; + sidebarSeparator.opening = false; + // var winWidth = $("#red-ui-editor").width(); + sidebarSeparator.start = ui.position.left; + sidebarSeparator.width = sidebar.container.width(); + sidebarSeparator.chartWidth = $("#red-ui-workspace").width(); + sidebarSeparator.dragging = true; + + if (!RED.menu.isSelected(sidebar.menuToggle)) { + sidebarSeparator.opening = true; + sidebar.container.width(0); + RED.menu.setSelected(sidebar.menuToggle,true); + RED.events.emit("sidebar:resize"); + } + sidebarSeparator.width = sidebar.container.width(); + }, + drag: function(event,ui) { + var d = scaleFactor * (ui.position.left-sidebarSeparator.start); + + var newSidebarWidth = sidebarSeparator.width - d; + if (newSidebarWidth > sidebar.maximumWidth) { + newSidebarWidth = sidebar.maximumWidth; + d = sidebarSeparator.width - sidebar.maximumWidth; + ui.position.left = sidebarSeparator.start + scaleFactor * d; + } + + if (newSidebarWidth > sidebar.minimumWidth) { + if (sidebarSeparator.chartWidth + d < 200) { + // Chart is now too small, but we have room to resize the sidebar + d += (200 - (sidebarSeparator.chartWidth + d)); + newSidebarWidth = sidebarSeparator.width - d; + ui.position.left = sidebarSeparator.start + scaleFactor * d; } - - if (newSidebarWidth < sidebar.minimumWidth) { - if (newSidebarWidth > 100) { - newSidebarWidth = sidebar.minimumWidth - sidebarSeparator.closing = false - } else { - newSidebarWidth = 0 - sidebarSeparator.closing = true - } - } else { + } else if (newSidebarWidth < sidebar.minimumWidth) { + if (newSidebarWidth > 100) { + newSidebarWidth = sidebar.minimumWidth sidebarSeparator.closing = false + } else { + newSidebarWidth = 0 + sidebarSeparator.closing = true } - sidebar.container.width(newSidebarWidth); - ui.position.left -= scaleFactor * d + } else { + sidebarSeparator.closing = false + } + sidebar.container.width(newSidebarWidth); + ui.position.left -= scaleFactor * d - sidebar.tabs.resize(); - RED.events.emit("sidebar:resize"); - }, - stop:function(event,ui) { - sidebarSeparator.dragging = false; - if (sidebarSeparator.closing) { - sidebar.container.removeClass("closing"); - if (sidebar.menuToggle) { - RED.menu.setSelected(sidebar.menuToggle,false); - } - sidebar.container.hide() - if (sidebar.container.width() < sidebar.minimumWidth) { - sidebar.container.width(sidebar.defaultWidth); - } + sidebar.tabs.resize(); + RED.events.emit("sidebar:resize"); + }, + stop:function(event,ui) { + sidebarSeparator.dragging = false; + if (sidebarSeparator.closing) { + sidebar.container.removeClass("closing"); + if (sidebar.menuToggle) { + RED.menu.setSelected(sidebar.menuToggle,false); + } + sidebar.container.hide() + if (sidebar.container.width() < sidebar.minimumWidth) { + sidebar.container.width(sidebar.defaultWidth); } - // $(".red-ui-sidebar-separator").css("left","auto"); - // $(".red-ui-sidebar-separator").css("right",(sidebar.container.width()+2)+"px"); - RED.events.emit("sidebar:resize"); } + RED.events.emit("sidebar:resize"); + } }); var sidebarControls = $('
          ').appendTo(separator); @@ -207,7 +211,7 @@ RED.sidebar = (function() { RED.menu.toggleSelected(sidebar.menuToggle); }) separator.on("mouseenter", function() { - if (!sidebarSeparator.dragging) { + if (!sidebarSeparator.dragging && !shade.is(":visible")) { if ( (RED.menu.isSelected(sidebar.menuToggle) && sidebar.direction === 'right') || (!RED.menu.isSelected(sidebar.menuToggle) && sidebar.direction === 'left') ) { sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left"); @@ -218,7 +222,7 @@ RED.sidebar = (function() { } }) separator.on("mouseleave", function() { - if (!sidebarSeparator.dragging) { + if (!sidebarSeparator.dragging && !shade.is(":visible")) { sidebarControls.stop(false,true); sidebarControls.hide(); } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js index b0f188457d..faeac3a22e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js @@ -194,6 +194,8 @@ } function handleWindowResize() { + // TODO: red-ui-sidebar has a width when hidden - so we need to handle that case and set the right pos to its separator + $("#red-ui-editor-stack").css('right', $("#red-ui-sidebar").outerWidth() + 11); if (stack.length > 0) { var tray = stack[stack.length-1]; if (tray.options.maximized || tray.width > $("#red-ui-editor-stack").position().left-8) { diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js b/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js index 3bc99e6026..a1a1a56615 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js @@ -81,7 +81,7 @@ RED.userSettings = (function() { }); settingsContent.i18n(); settingsTabs.activateTab("red-ui-settings-tab-"+(initialTab||'view')) - $("#red-ui-sidebar-shade").show(); + $(".red-ui-sidebar-shade").show(); }, close: function() { settingsVisible = false; @@ -90,7 +90,7 @@ RED.userSettings = (function() { pane.close(); } }); - $("#red-ui-sidebar-shade").hide(); + $(".red-ui-sidebar-shade").hide(); }, show: function() {} diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 89019005fe..b28c473ae1 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -6973,7 +6973,7 @@ RED.view = (function() { selectNodes: function(options) { $("#red-ui-workspace-tabs-shade").show(); $("#red-ui-palette-shade").show(); - $("#red-ui-sidebar-shade").show(); + $(".red-ui-sidebar-shade").show(); $("#red-ui-header-shade").show(); $("#red-ui-workspace").addClass("red-ui-workspace-select-mode"); @@ -6995,7 +6995,7 @@ RED.view = (function() { clearSelection(); $("#red-ui-workspace-tabs-shade").hide(); $("#red-ui-palette-shade").hide(); - $("#red-ui-sidebar-shade").hide(); + $(".red-ui-sidebar-shade").hide(); $("#red-ui-header-shade").hide(); $("#red-ui-workspace").removeClass("red-ui-workspace-select-mode"); resetMouseVars(); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/base.scss b/packages/node_modules/@node-red/editor-client/src/sass/base.scss index b6bded65d6..298dab4167 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/base.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/base.scss @@ -46,15 +46,10 @@ body { flex-direction: row; } -#red-ui-palette-shade, #red-ui-editor-shade, #red-ui-header-shade, #red-ui-sidebar-shade { +#red-ui-palette-shade, #red-ui-editor-shade, #red-ui-header-shade, .red-ui-sidebar-shade { @include mixins.shade; z-index: 5; } -#red-ui-sidebar-shade { - left: -8px; - top: -1px; - bottom: -1px; -} #red-ui-full-shade { @include mixins.shade; z-index: 15; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index acd983aad3..e098b39a7d 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -128,8 +128,10 @@ button.red-ui-sidebar-header-button-toggle { border-left: none; } -.red-ui-sidebar-shade { - @include mixins.shade; +.red-ui-sidebar-separator .red-ui-sidebar-shade { + // Other shades overlay their element so consume pointer events + // Sidebar separator shade is a child element so needs to explicitly block + pointer-events: none; } From 0ead2d815c5a707a7dbb7a2d7b0874a4107f905d Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Fri, 24 Oct 2025 17:35:00 +0100 Subject: [PATCH 063/160] Update sidebar tab ux --- .../editor-client/src/js/ui/sidebar.js | 270 +++++++++++------- .../editor-client/src/sass/sidebar.scss | 57 ++-- 2 files changed, 192 insertions(+), 135 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index be6f8863a0..67f2bb5beb 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -15,30 +15,30 @@ **/ RED.sidebar = (function() { - const primarySidebar = { - id: 'primary', - direction: 'right', - menuToggle: 'menu-item-sidebar', - minimumWidth: 180, - maximumWidth: 800, - defaultWidth: 300 - } - - // Palette Sidebar - const secondarySidebar = { - id: 'secondary', - direction: 'left', - menuToggle: 'menu-item-palette', - minimumWidth: 180, - maximumWidth: 180, - defaultWidth: 180 + const sidebars = { + primary: { + id: 'primary', + direction: 'right', + menuToggle: 'menu-item-sidebar', + minimumWidth: 180, + maximumWidth: 800, + defaultWidth: 300 + }, + secondary: { + id: 'secondary', + direction: 'left', + menuToggle: 'menu-item-palette', + minimumWidth: 180, + maximumWidth: 800, + defaultWidth: 180 + } } var knownTabs = {}; // We store the current sidebar tab id in localStorage as 'last-sidebar-tab' // This is restored when the editor is reloaded. - // We use primarySidebar.tabs.onchange to update localStorage. However that will + // We use sidebars.primary.tabs.onchange to update localStorage. However that will // also get triggered when the first tab gets added to the tabs - typically // the 'info' tab. So we use the following variable to store the retrieved // value from localStorage before we start adding the actual tabs @@ -61,7 +61,7 @@ RED.sidebar = (function() { options = title; } - const targetSidebar = options.target === 'secondary' ? secondarySidebar : primarySidebar; + const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary; delete options.closeable; options.wrapper = $('
          ',{style:"height:100%"}).appendTo(targetSidebar.content) @@ -91,45 +91,115 @@ RED.sidebar = (function() { knownTabs[options.id] = options; - if (options.visible !== false) { - targetSidebar.tabs.addTab(knownTabs[options.id]); + options.tabButton = $('').appendTo(targetSidebar.tabBar); + options.tabButton.attr('data-tab-id', options.id) + + options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action); + if (options.icon) { + $('',{style:"mask-image: url("+options.icon+"); -webkit-mask-image: url("+options.icon+");"}).appendTo(options.tabButton); + } else if (options.iconClass) { + $('',{class:options.iconClass}).appendTo(options.tabButton); } - if (targetSidebar.tabs.count() > 1) { - targetSidebar.tabs.container.show() + options.tabButton.on('click', function() { + const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary; + if (targetSidebar.activeTab === options.id && RED.menu.isSelected(targetSidebar.menuToggle)) { + RED.menu.setSelected(targetSidebar.menuToggle, false); + } else { + RED.sidebar.show(options.id) + } + }) + if (targetSidebar.content.children().length === 1) { + RED.sidebar.show(options.id) } } function removeTab(id) { if (knownTabs[id]) { - const targetSidebar = knownTabs[id].target === 'secondary' ? secondarySidebar : primarySidebar; - targetSidebar.tabs.removeTab(id); + const targetSidebar = knownTabs[id].target === 'secondary' ? sidebars.secondary : sidebars.primary; $(knownTabs[id].wrapper).remove(); if (knownTabs[id].footer) { knownTabs[id].footer.remove(); } - delete knownTabs[id]; + targetSidebar.tabBar.find('button[data-tab-id="'+id+'"]').remove() RED.menu.removeItem("menu-item-view-menu-"+id); - if (targetSidebar.tabs.count() <= 1) { - targetSidebar.tabs.container.hide() + if (knownTabs[id].onremove) { + knownTabs[id].onremove.call(knownTabs[id]); + } + delete knownTabs[id]; + const firstTab = targetSidebar.tabBar.find('button').first().attr('data-tab-id'); + if (firstTab) { + RED.sidebar.show(firstTab); } } } + function moveTab(id, targetSidebar) { + const options = knownTabs[id]; + options.target = targetSidebar.id; + $(options.wrapper).appendTo(targetSidebar.content); + if (options.toolbar) { + targetSidebar.footer.append(options.toolbar); + } + // Reset the tooltip so its left/right direction is recalculated + options.tabButtonTooltip.delete() + options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action); + + } + var sidebarSeparator = {}; sidebarSeparator.dragging = false; + function setupSidebarTabs(sidebar) { + const tabBar = $('
          ') + tabBar.data('sidebar', sidebar.id) + if (sidebar.direction === 'right') { + tabBar.insertAfter(sidebar.container); + } else if (sidebar.direction === 'left') { + tabBar.insertBefore(sidebar.container); + } + tabBar.sortable({ + cancel: false, + placeholder: "red-ui-sidebar-tab-bar-button-placeholder", + connectWith: ".red-ui-sidebar-tab-bar", + start: function(event, ui) { + // Remove the tooltip so it doesn't display unexpectedly whilst dragging + const tabId = ui.item.attr('data-tab-id'); + const options = knownTabs[tabId]; + options.tabButtonTooltip.delete() + }, + stop: function(event, ui) { + // Restore the tooltip + const tabId = ui.item.attr('data-tab-id'); + const options = knownTabs[tabId]; + options.tabButtonTooltip.delete() + options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action); + }, + receive: function(event, ui) { + // Tab has been moved from one sidebar to another + const src = sidebars[ui.sender.data('sidebar')] + const dest = sidebars[$(this).data('sidebar')] + const tabId = ui.item.attr('data-tab-id'); + const tabOptions = knownTabs[tabId]; + moveTab(tabId, dest) + if (ui.item.hasClass('selected')) { + const firstTab = src.tabBar.find('button').first().attr('data-tab-id'); + if (firstTab) { + RED.sidebar.show(firstTab); + } + } + RED.sidebar.show(tabId) + } + }) + return tabBar + } function setupSidebarSeparator(sidebar) { const separator = $('
          '); const shade = $('
          ').appendTo(separator); let scaleFactor = 1; - let controlClass = 'red-ui-sidebar-control-right'; - let controlSlideDirection = 'right'; if (sidebar.direction === 'right') { separator.insertBefore(sidebar.container); } else if (sidebar.direction === 'left') { scaleFactor = -1; - controlClass = 'red-ui-sidebar-control-left'; - controlSlideDirection = 'left'; separator.insertAfter(sidebar.container); } separator.draggable({ @@ -185,7 +255,7 @@ RED.sidebar = (function() { sidebar.container.width(newSidebarWidth); ui.position.left -= scaleFactor * d - sidebar.tabs.resize(); + // sidebar.tabs.resize(); RED.events.emit("sidebar:resize"); }, stop:function(event,ui) { @@ -196,6 +266,7 @@ RED.sidebar = (function() { RED.menu.setSelected(sidebar.menuToggle,false); } sidebar.container.hide() + sidebar.separator.hide() if (sidebar.container.width() < sidebar.minimumWidth) { sidebar.container.width(sidebar.defaultWidth); } @@ -203,43 +274,16 @@ RED.sidebar = (function() { RED.events.emit("sidebar:resize"); } }); - - var sidebarControls = $('
          ').appendTo(separator); - sidebarControls.addClass(controlClass) - sidebarControls.on("click", function() { - sidebarControls.hide(); - RED.menu.toggleSelected(sidebar.menuToggle); - }) - separator.on("mouseenter", function() { - if (!sidebarSeparator.dragging && !shade.is(":visible")) { - if ( (RED.menu.isSelected(sidebar.menuToggle) && sidebar.direction === 'right') || - (!RED.menu.isSelected(sidebar.menuToggle) && sidebar.direction === 'left') ) { - sidebarControls.find("i").addClass("fa-chevron-right").removeClass("fa-chevron-left"); - } else { - sidebarControls.find("i").removeClass("fa-chevron-right").addClass("fa-chevron-left"); - } - sidebarControls.toggle("slide", { direction: controlSlideDirection }, 200); - } - }) - separator.on("mouseleave", function() { - if (!sidebarSeparator.dragging && !shade.is(":visible")) { - sidebarControls.stop(false,true); - sidebarControls.hide(); - } - }); return separator } function toggleSidebar(sidebar, state) { if (!state) { sidebar.container.hide() + sidebar.separator.hide() } else { - // console.log(sidebar.container.width(),sidebar.tabs.container.width()) sidebar.container.show() - sidebar.tabs.container.width() - setTimeout(function () { - sidebar.tabs.resize() - }, 100) + sidebar.separator.show() } RED.events.emit("sidebar:resize"); } @@ -251,11 +295,21 @@ RED.sidebar = (function() { if (id) { const tabOptions = knownTabs[id]; if (tabOptions) { - const targetSidebar = tabOptions.target === 'secondary' ? secondarySidebar : primarySidebar; - if (!targetSidebar.tabs.contains(id)) { - targetSidebar.tabs.addTab(knownTabs[id]); + const targetSidebar = tabOptions.target === 'secondary' ? sidebars.secondary : sidebars.primary; + targetSidebar.content.children().hide(); + targetSidebar.footer.children().hide(); + if (tabOptions.onchange) { + tabOptions.onchange.call(tabOptions); + } + $(tabOptions.wrapper).show(); + if (tabOptions.toolbar) { + $(tabOptions.toolbar).show(); } - targetSidebar.tabs.activateTab(id); + RED.settings.setLocal("last-sidebar-tab", tabOptions.id) + targetSidebar.tabBar.find('button').removeClass('selected') + targetSidebar.tabBar.find('button[data-tab-id="'+id+'"]').addClass('selected') + targetSidebar.activeTab = id + if (!skipShowSidebar && !RED.menu.isSelected(targetSidebar.menuToggle)) { RED.menu.setSelected(targetSidebar.menuToggle,true); } @@ -264,73 +318,71 @@ RED.sidebar = (function() { } function containsTab(id) { - return primarySidebar.tabs.contains(id); + return sidebars.primary.tabs.contains(id); } function setupSidebar(sidebar) { sidebar.container.addClass("red-ui-sidebar"); sidebar.container.width(sidebar.defaultWidth); sidebar.separator = setupSidebarSeparator(sidebar); - sidebar.tabs = RED.tabs.create({ - element: $('
            ').appendTo(sidebar.container), - onchange:function(tab) { - sidebar.content.children().hide(); - sidebar.footer.children().hide(); - if (tab) { - if (tab.onchange) { - tab.onchange.call(tab); - } - $(tab.wrapper).show(); - if (tab.toolbar) { - $(tab.toolbar).show(); - } - RED.settings.setLocal("last-sidebar-tab", tab.id) - } - }, - onremove: function(tab) { - $(tab.wrapper).hide(); - if (tab.onremove) { - tab.onremove.call(tab); - } - }, - // minimumActiveTabWidth: 70, - collapsible: true, - onreorder: function(order) { - RED.settings.set("editor.sidebar.order",order); - }, - order: RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"]) - // scrollable: true - }); - sidebar.tabs.container.hide() + sidebar.tabBar = setupSidebarTabs(sidebar) + // sidebar.tabs = RED.tabs.create({ + // element: $('
              ').appendTo(sidebar.container), + // onchange:function(tab) { + // sidebar.content.children().hide(); + // sidebar.footer.children().hide(); + // if (tab) { + // if (tab.onchange) { + // tab.onchange.call(tab); + // } + // $(tab.wrapper).show(); + // if (tab.toolbar) { + // $(tab.toolbar).show(); + // } + // RED.settings.setLocal("last-sidebar-tab", tab.id) + // } + // }, + // onremove: function(tab) { + // $(tab.wrapper).hide(); + // if (tab.onremove) { + // tab.onremove.call(tab); + // } + // }, + // // minimumActiveTabWidth: 70, + // collapsible: true, + // onreorder: function(order) { + // RED.settings.set("editor.sidebar.order",order); + // }, + // order: RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"]) + // // scrollable: true + // }); + // sidebar.tabs.container.hide() sidebar.content = $('
              ').appendTo(sidebar.container); sidebar.footer = $('
              ').appendTo(sidebar.container); sidebar.shade = $('
              ').appendTo(sidebar.container); } function init () { - primarySidebar.container = $("#red-ui-sidebar"); - setupSidebar(primarySidebar) - secondarySidebar.container = $("#red-ui-sidebar-left"); - setupSidebar(secondarySidebar) + sidebars.primary.container = $("#red-ui-sidebar"); + setupSidebar(sidebars.primary) + sidebars.secondary.container = $("#red-ui-sidebar-left"); + setupSidebar(sidebars.secondary) RED.actions.add("core:toggle-sidebar",function(state){ if (state === undefined) { - RED.menu.toggleSelected(primarySidebar.menuToggle); + RED.menu.toggleSelected(sidebars.primary.menuToggle); } else { - toggleSidebar(primarySidebar, state); + toggleSidebar(sidebars.primary, state); } }); RED.actions.add("core:toggle-palette", function(state) { if (state === undefined) { - RED.menu.toggleSelected(secondarySidebar.menuToggle); + RED.menu.toggleSelected(sidebars.secondary.menuToggle); } else { - toggleSidebar(secondarySidebar, state); + toggleSidebar(sidebars.secondary, state); } }); - - RED.popover.tooltip(primarySidebar.separator.find(".red-ui-sidebar-control-right"),RED._("keyboard.toggleSidebar"),"core:toggle-sidebar"); - lastSessionSelectedTab = RED.settings.getLocal("last-sidebar-tab") RED.sidebar.info.init(); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index e098b39a7d..6a03841915 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -27,6 +27,7 @@ @include mixins.component-border; display: flex; flex-direction: column; + overflow: hidden; } #red-ui-sidebar.closing { @@ -73,6 +74,36 @@ } } +.red-ui-sidebar-tab-bar { + // width: 40px; + padding: 5px; + background-color: var(--red-ui-primary-background); + flex: 0 0 auto; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + + button { + @include mixins.workspace-button; + display: flex; + align-items: center; + justify-content: center; + padding: 0; + height: 28px; + width: 28px; + &:not(.selected):not(:hover) i { + opacity: 0.6; + } + &.selected { + box-shadow: 0 2px 0 0 var(--red-ui-form-input-border-selected-color); + } + } + .red-ui-sidebar-tab-bar-button-placeholder { + border: 1px dashed var(--red-ui-form-input-border-color); + } +} + .red-ui-sidebar .button { @include mixins.workspace-button; line-height: 18px; @@ -134,29 +165,3 @@ button.red-ui-sidebar-header-button-toggle { pointer-events: none; } - -@mixin red-ui-sidebar-control { - display: none; - position: absolute; - top: calc(50% - 26px); - z-index: 13; - padding:15px 8px; - border:1px solid var(--red-ui-primary-border-color); - background:var(--red-ui-primary-background); - color: var(--red-ui-secondary-text-color); - text-align: center; - cursor: pointer; -} - -.red-ui-sidebar-control-right { - @include red-ui-sidebar-control; - right: calc(100%); - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; -} -.red-ui-sidebar-control-left { - @include red-ui-sidebar-control; - left: calc(100%); - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; -} From b23d455ad549c2ed7db8884ddc22310e7d367567 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 27 Oct 2025 10:06:44 +0000 Subject: [PATCH 064/160] Fix tray positioning --- .../editor-client/src/js/ui/sidebar.js | 52 +++++-------------- .../@node-red/editor-client/src/js/ui/tray.js | 4 +- .../editor-client/src/sass/sidebar.scss | 7 +-- 3 files changed, 17 insertions(+), 46 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index 67f2bb5beb..27f6105c17 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -60,6 +60,7 @@ RED.sidebar = (function() { } else if (typeof title === "object") { options = title; } + options.target = options.target || 'primary'; const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary; delete options.closeable; @@ -133,7 +134,7 @@ RED.sidebar = (function() { } } - function moveTab(id, targetSidebar) { + function moveTab(id, srcSidebar, targetSidebar) { const options = knownTabs[id]; options.target = targetSidebar.id; $(options.wrapper).appendTo(targetSidebar.content); @@ -144,6 +145,14 @@ RED.sidebar = (function() { options.tabButtonTooltip.delete() options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action); + if (targetSidebar.content.children().length === 1) { + RED.sidebar.show(options.id) + } + if (srcSidebar.content.children().length === 0) { + RED.menu.setSelected(srcSidebar.menuToggle, false); + } + + } var sidebarSeparator = {}; @@ -151,6 +160,7 @@ RED.sidebar = (function() { function setupSidebarTabs(sidebar) { const tabBar = $('
              ') + tabBar.attr('id', sidebar.container.attr('id') + '-tab-bar') tabBar.data('sidebar', sidebar.id) if (sidebar.direction === 'right') { tabBar.insertAfter(sidebar.container); @@ -179,8 +189,7 @@ RED.sidebar = (function() { const src = sidebars[ui.sender.data('sidebar')] const dest = sidebars[$(this).data('sidebar')] const tabId = ui.item.attr('data-tab-id'); - const tabOptions = knownTabs[tabId]; - moveTab(tabId, dest) + moveTab(tabId, src, dest) if (ui.item.hasClass('selected')) { const firstTab = src.tabBar.find('button').first().attr('data-tab-id'); if (firstTab) { @@ -194,7 +203,8 @@ RED.sidebar = (function() { } function setupSidebarSeparator(sidebar) { const separator = $('
              '); - const shade = $('
              ').appendTo(separator); + separator.attr('id', sidebar.container.attr('id') + '-separator') + $('
              ').appendTo(separator); let scaleFactor = 1; if (sidebar.direction === 'right') { separator.insertBefore(sidebar.container); @@ -205,9 +215,6 @@ RED.sidebar = (function() { separator.draggable({ axis: "x", start:function(event,ui) { - if (shade.is(":visible")) { - return false - } sidebarSeparator.closing = false; sidebarSeparator.opening = false; // var winWidth = $("#red-ui-editor").width(); @@ -326,37 +333,6 @@ RED.sidebar = (function() { sidebar.container.width(sidebar.defaultWidth); sidebar.separator = setupSidebarSeparator(sidebar); sidebar.tabBar = setupSidebarTabs(sidebar) - // sidebar.tabs = RED.tabs.create({ - // element: $('
                ').appendTo(sidebar.container), - // onchange:function(tab) { - // sidebar.content.children().hide(); - // sidebar.footer.children().hide(); - // if (tab) { - // if (tab.onchange) { - // tab.onchange.call(tab); - // } - // $(tab.wrapper).show(); - // if (tab.toolbar) { - // $(tab.toolbar).show(); - // } - // RED.settings.setLocal("last-sidebar-tab", tab.id) - // } - // }, - // onremove: function(tab) { - // $(tab.wrapper).hide(); - // if (tab.onremove) { - // tab.onremove.call(tab); - // } - // }, - // // minimumActiveTabWidth: 70, - // collapsible: true, - // onreorder: function(order) { - // RED.settings.set("editor.sidebar.order",order); - // }, - // order: RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"]) - // // scrollable: true - // }); - // sidebar.tabs.container.hide() sidebar.content = $('
                ').appendTo(sidebar.container); sidebar.footer = $('
                ').appendTo(sidebar.container); sidebar.shade = $('
                ').appendTo(sidebar.container); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js index faeac3a22e..a275a1173d 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tray.js @@ -194,8 +194,8 @@ } function handleWindowResize() { - // TODO: red-ui-sidebar has a width when hidden - so we need to handle that case and set the right pos to its separator - $("#red-ui-editor-stack").css('right', $("#red-ui-sidebar").outerWidth() + 11); + let sidebarWidth = $("#red-ui-sidebar").is(":visible") ? $("#red-ui-sidebar").outerWidth() + $("#red-ui-sidebar-separator").outerWidth() : 0; + $("#red-ui-editor-stack").css('right', sidebarWidth + $("#red-ui-sidebar-tab-bar").outerWidth() + 1); if (stack.length > 0) { var tray = stack[stack.length-1]; if (tray.options.maximized || tray.width > $("#red-ui-editor-stack").position().left-8) { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index 6a03841915..d5b6b454e3 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -83,6 +83,7 @@ flex-direction: column; align-items: center; gap: 10px; + z-index: 10; button { @include mixins.workspace-button; @@ -159,9 +160,3 @@ button.red-ui-sidebar-header-button-toggle { border-left: none; } -.red-ui-sidebar-separator .red-ui-sidebar-shade { - // Other shades overlay their element so consume pointer events - // Sidebar separator shade is a child element so needs to explicitly block - pointer-events: none; -} - From 6ffa23a44e5a8f42038a4d541d6775678fbae7e1 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 27 Oct 2025 16:28:40 +0000 Subject: [PATCH 065/160] Fix sidebar sortable for touch events --- .../node_modules/@node-red/editor-client/src/js/ui/sidebar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index 27f6105c17..ba2cb632ce 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -14,7 +14,6 @@ * limitations under the License. **/ RED.sidebar = (function() { - const sidebars = { primary: { id: 'primary', @@ -101,7 +100,7 @@ RED.sidebar = (function() { } else if (options.iconClass) { $('',{class:options.iconClass}).appendTo(options.tabButton); } - options.tabButton.on('click', function() { + options.tabButton.on('mouseup', function(evt) { const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary; if (targetSidebar.activeTab === options.id && RED.menu.isSelected(targetSidebar.menuToggle)) { RED.menu.setSelected(targetSidebar.menuToggle, false); @@ -168,6 +167,7 @@ RED.sidebar = (function() { tabBar.insertBefore(sidebar.container); } tabBar.sortable({ + distance: 10, cancel: false, placeholder: "red-ui-sidebar-tab-bar-button-placeholder", connectWith: ".red-ui-sidebar-tab-bar", From 6c36f789bde66569a8c02ad5e52a049e365f1e76 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 28 Oct 2025 14:41:19 +0000 Subject: [PATCH 066/160] Fix login display --- packages/node_modules/@node-red/editor-client/src/js/red.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js index 1c073b137d..7645482eb6 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/red.js +++ b/packages/node_modules/@node-red/editor-client/src/js/red.js @@ -894,13 +894,17 @@ var RED = (function() { var logo = $('').appendTo(header); $('
                  ').appendTo(header); $('
                  ').appendTo(header); - $('
                  '+ + $('
                  '+ '
                  '+ '
                  '+ '
                  '+ '
                  '+ // '
                  '+ '
                  ').appendTo(options.target); + + // Don't use the `hide` class on this container, as the show reverts it to block rather + // than the expected flex. So hide via jQuery as it'll track the show state internally. + options.target.find('#red-ui-main-container').hide() $('
                  ').appendTo(options.target); $('
                  ').appendTo(options.target); From b6367bbb44be5aa01732476a638bb757b5ed0075 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 29 Oct 2025 10:40:02 +0000 Subject: [PATCH 067/160] Track sidebar state --- .../editor-client/src/js/ui/sidebar.js | 100 ++++++++++++++---- 1 file changed, 79 insertions(+), 21 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index ba2cb632ce..30a58d897e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -33,7 +33,24 @@ RED.sidebar = (function() { } } - var knownTabs = {}; + const knownTabs = {}; + + function exportSidebarState () { + const state = { + primary: [], + secondary: [] + } + sidebars.primary.tabBar.children('button').each(function() { + const tabId = $(this).attr('data-tab-id'); + state.primary.push(tabId); + }) + sidebars.secondary.tabBar.children('button').each(function() { + const tabId = $(this).attr('data-tab-id'); + state.secondary.push(tabId); + }) + RED.settings.set('editor.sidebar.state', state) + } + // We store the current sidebar tab id in localStorage as 'last-sidebar-tab' // This is restored when the editor is reloaded. @@ -41,8 +58,7 @@ RED.sidebar = (function() { // also get triggered when the first tab gets added to the tabs - typically // the 'info' tab. So we use the following variable to store the retrieved // value from localStorage before we start adding the actual tabs - var lastSessionSelectedTab = null; - + let lastSessionSelectedTabs = {} function addTab(title,content,closeable,visible) { var options; @@ -60,6 +76,28 @@ RED.sidebar = (function() { options = title; } options.target = options.target || 'primary'; + let targetTabButtonIndex = -1 // Append to end by default + + // Check the saved sidebar state to see if this tab should be added to the primary or secondary sidebar + const savedState = RED.settings.get('editor.sidebar.state', null) + if (savedState) { + let targetSidebar = null + let sidebarState + if (savedState.secondary.includes(options.id)) { + options.target = 'secondary' + sidebarState = savedState.secondary + targetSidebar = sidebars.secondary + } else if (savedState.primary.includes(options.id)) { + options.target = 'primary' + sidebarState = savedState.primary + targetSidebar = sidebars.primary + } + if (targetSidebar) { + // This tab was found in the saved sidebar state. Now find the target position for the tab button + targetTabButtonIndex = sidebarState.indexOf(options.id) + } + } + const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary; delete options.closeable; @@ -78,6 +116,7 @@ RED.sidebar = (function() { } var id = options.id; + // console.log('menu', options.id, options.name) RED.menu.addItem("menu-item-view-menu",{ id:"menu-item-view-menu-"+options.id, label:options.name, @@ -90,17 +129,28 @@ RED.sidebar = (function() { options.iconClass = options.iconClass || "fa fa-square-o" knownTabs[options.id] = options; - - options.tabButton = $('').appendTo(targetSidebar.tabBar); + options.tabButton = $('') + // Insert the tab button at the correct index + if (targetTabButtonIndex === -1 || targetTabButtonIndex >= targetSidebar.tabBar.children().length) { + // Append to end + options.tabButton = $('').appendTo(targetSidebar.tabBar); + } else { + // Insert before the item at targetTabButtonIndex + options.tabButton = $('').insertBefore(targetSidebar.tabBar.children().eq(targetTabButtonIndex)); + } options.tabButton.attr('data-tab-id', options.id) options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action); if (options.icon) { - $('',{style:"mask-image: url("+options.icon+"); -webkit-mask-image: url("+options.icon+");"}).appendTo(options.tabButton); + $('',{class: 'red-ui-sidebar-tab-icon', style:"mask-image: url("+options.icon+"); -webkit-mask-image: url("+options.icon+");"}).appendTo(options.tabButton); } else if (options.iconClass) { $('',{class:options.iconClass}).appendTo(options.tabButton); } options.tabButton.on('mouseup', function(evt) { + if (draggingTabButton) { + draggingTabButton = false + return + } const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary; if (targetSidebar.activeTab === options.id && RED.menu.isSelected(targetSidebar.menuToggle)) { RED.menu.setSelected(targetSidebar.menuToggle, false); @@ -150,13 +200,9 @@ RED.sidebar = (function() { if (srcSidebar.content.children().length === 0) { RED.menu.setSelected(srcSidebar.menuToggle, false); } - - } - var sidebarSeparator = {}; - sidebarSeparator.dragging = false; - + let draggingTabButton = false function setupSidebarTabs(sidebar) { const tabBar = $('
                  ') tabBar.attr('id', sidebar.container.attr('id') + '-tab-bar') @@ -176,6 +222,7 @@ RED.sidebar = (function() { const tabId = ui.item.attr('data-tab-id'); const options = knownTabs[tabId]; options.tabButtonTooltip.delete() + draggingTabButton = true }, stop: function(event, ui) { // Restore the tooltip @@ -183,6 +230,8 @@ RED.sidebar = (function() { const options = knownTabs[tabId]; options.tabButtonTooltip.delete() options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action); + // Save the sidebar state + exportSidebarState() }, receive: function(event, ui) { // Tab has been moved from one sidebar to another @@ -212,6 +261,8 @@ RED.sidebar = (function() { scaleFactor = -1; separator.insertAfter(sidebar.container); } + // Track sidebar state whilst dragging + const sidebarSeparator = {} separator.draggable({ axis: "x", start:function(event,ui) { @@ -288,6 +339,7 @@ RED.sidebar = (function() { if (!state) { sidebar.container.hide() sidebar.separator.hide() + sidebar.tabBar.find('button').removeClass('selected') } else { sidebar.container.show() sidebar.separator.show() @@ -297,7 +349,16 @@ RED.sidebar = (function() { function showSidebar(id, skipShowSidebar) { if (id === ":first") { - id = lastSessionSelectedTab || RED.settings.get("editor.sidebar.order",["info", "help", "version-control", "debug"])[0] + // Show the last selected tab for each sidebar + Object.keys(sidebars).forEach(function(sidebarKey) { + const sidebar = sidebars[sidebarKey]; + let lastTabId = lastSessionSelectedTabs[sidebarKey]; + if (!lastTabId) { + lastTabId = sidebar.tabBar.children('button').first().attr('data-tab-id'); + } + showSidebar(lastTabId, true) + }) + return } if (id) { const tabOptions = knownTabs[id]; @@ -312,7 +373,7 @@ RED.sidebar = (function() { if (tabOptions.toolbar) { $(tabOptions.toolbar).show(); } - RED.settings.setLocal("last-sidebar-tab", tabOptions.id) + RED.settings.setLocal("last-sidebar-tab-" + targetSidebar.id, tabOptions.id) targetSidebar.tabBar.find('button').removeClass('selected') targetSidebar.tabBar.find('button[data-tab-id="'+id+'"]').addClass('selected') targetSidebar.activeTab = id @@ -359,14 +420,11 @@ RED.sidebar = (function() { } }); - lastSessionSelectedTab = RED.settings.getLocal("last-sidebar-tab") - - RED.sidebar.info.init(); - RED.sidebar.help.init(); - RED.sidebar.config.init(); - RED.sidebar.context.init(); - // hide sidebar at start if screen rather narrow... - if ($("#red-ui-editor").width() < 600) { RED.menu.setSelected("menu-item-sidebar",false); } + // Remember the last selected tab for each sidebar before + // the tabs are readded causing the state to get updated + Object.keys(sidebars).forEach(function(sidebarKey) { + lastSessionSelectedTabs[sidebarKey] = RED.settings.getLocal("last-sidebar-tab-" + sidebarKey) + }) } return { From d5a28ce5e795f5372a1ffb05d81794f3a98e95a0 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 29 Oct 2025 10:40:21 +0000 Subject: [PATCH 068/160] Fix sidebar menu to include all options Needed to reorder initialisation as sidebars were adding before the menu component was initialised, meaning their menu entries didn't get added --- .../@node-red/editor-client/src/js/red.js | 34 ++++++++++++------- .../editor-client/src/js/ui/common/menu.js | 2 +- .../editor-client/src/js/ui/tab-info.js | 2 ++ 3 files changed, 25 insertions(+), 13 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/red.js b/packages/node_modules/@node-red/editor-client/src/js/red.js index 7645482eb6..7a49b114f7 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/red.js +++ b/packages/node_modules/@node-red/editor-client/src/js/red.js @@ -844,7 +844,6 @@ var RED = (function() { RED.notifications.init(); RED.library.init(); RED.sidebar.init(); - RED.palette.init(); RED.eventLog.init(); if (RED.settings.get('externalModules.palette.allowInstall', true) !== false) { @@ -869,23 +868,34 @@ var RED = (function() { RED.diagnostics.init(); RED.diff.init(); - RED.deploy.init(RED.settings.theme("deployButton",null)); + RED.keyboard.init(() => { + buildMainMenu(); - RED.keyboard.init(buildMainMenu); - RED.envVar.init(); + // Register the core set of sidebar panels now the menu is ready to receive items + RED.palette.init(); + RED.sidebar.info.init(); + RED.sidebar.help.init(); + RED.sidebar.config.init(); + RED.sidebar.context.init(); + // hide sidebar at start if screen rather narrow... + if ($("#red-ui-editor").width() < 600) { RED.menu.setSelected("menu-item-sidebar", false); } - RED.nodes.init(); - RED.runtime.init() + RED.envVar.init(); - if (RED.settings.theme("multiplayer.enabled",false)) { - RED.multiplayer.init() - } - RED.comms.connect(); + RED.nodes.init(); + RED.runtime.init() - $("#red-ui-main-container").show(); + if (RED.settings.theme("multiplayer.enabled",false)) { + RED.multiplayer.init() + } + RED.comms.connect(); - loadPluginList(); + $("#red-ui-main-container").show(); + RED.events.emit("sidebar:resize") + + loadPluginList(); + }); } diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js index 8d0f1dbd33..091c69c34e 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/menu.js @@ -323,7 +323,7 @@ RED.menu = (function() { } else { for (var i=0;i Date: Wed, 29 Oct 2025 10:41:15 +0000 Subject: [PATCH 069/160] Update palette sidebar icon to custom svg --- .../editor-client/src/js/ui/palette.js | 2 +- .../editor-client/src/sass/sidebar.scss | 17 +++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js index 1cd2d0b41e..5fece2198a 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette.js @@ -617,7 +617,7 @@ RED.palette = (function() { id: "palette", label: "Palette", name: "Palette", - iconClass: "fa fa-tags", + icon: "red/images/subflow_tab.svg", content, toolbar, pinned: true, diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index d5b6b454e3..46a023bb5d 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -160,3 +160,20 @@ button.red-ui-sidebar-header-button-toggle { border-left: none; } +i.red-ui-sidebar-tab-icon { + display: inline-block; + // margin-left: -8px; + // margin-right: 3px; + // margin-top: -2px; + opacity: 1; + width: 18px; + height: 18px; + vertical-align: middle; + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + background-color: var(--red-ui-workspace-button-color); +} \ No newline at end of file From 41ed5c94b6df45e21ebd264c5cd1a83417cfaae0 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 29 Oct 2025 10:51:31 +0000 Subject: [PATCH 070/160] Don't squash buttons when resizing window --- .../@node-red/editor-client/src/js/ui/sidebar.js | 10 ++++++++++ .../@node-red/editor-client/src/sass/sidebar.scss | 2 ++ 2 files changed, 12 insertions(+) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index 30a58d897e..4ddfcd8ee8 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -248,6 +248,16 @@ RED.sidebar = (function() { RED.sidebar.show(tabId) } }) + // $(window).on("resize", function () { + // const lastChild = tabBar.children().last(); + // if (lastChild.length > 0) { + // const tabBarHeight = tabBar.height(); + // const lastChildBottom = lastChild.position().top + lastChild.outerHeight(); + // if (lastChildBottom > tabBarHeight) { + // console.log('overflow') + // } + // } + // }) return tabBar } function setupSidebarSeparator(sidebar) { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index 46a023bb5d..af20097dcd 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -88,6 +88,8 @@ button { @include mixins.workspace-button; display: flex; + flex-grow: 0; + flex-shrink: 0; align-items: center; justify-content: center; padding: 0; From f690fcb295331237f816f61837d98e00353e06eb Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 29 Oct 2025 11:01:13 +0000 Subject: [PATCH 071/160] Apply default layout --- .../@node-red/editor-client/src/js/ui/sidebar.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index 4ddfcd8ee8..f438df2830 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -29,9 +29,14 @@ RED.sidebar = (function() { menuToggle: 'menu-item-palette', minimumWidth: 180, maximumWidth: 800, + // Make LH side slightly narrower by default as its the palette that doesn't require a lot of width defaultWidth: 180 } } + const defaultSidebarConfiguration = { + primary: ['info','debug','help','config','context'], + secondary: ['palette'] + } const knownTabs = {}; @@ -79,7 +84,7 @@ RED.sidebar = (function() { let targetTabButtonIndex = -1 // Append to end by default // Check the saved sidebar state to see if this tab should be added to the primary or secondary sidebar - const savedState = RED.settings.get('editor.sidebar.state', null) + const savedState = RED.settings.get('editor.sidebar.state', defaultSidebarConfiguration) if (savedState) { let targetSidebar = null let sidebarState From bd8a1eda90426920dfd11ea49d7fca6d5e19352b Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 29 Oct 2025 16:14:55 +0000 Subject: [PATCH 072/160] Make sidebar separators a bit narrower --- .../node_modules/@node-red/editor-client/src/sass/sidebar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index af20097dcd..7437e1b30c 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -51,7 +51,7 @@ } .red-ui-sidebar-separator { - width: 10px; + width: 7px; flex: 0 0 auto; // z-index: 11; background-color: var(--red-ui-primary-background); From 8b0f926856a413fe173f79448fee75591e456862 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 29 Oct 2025 16:48:10 +0000 Subject: [PATCH 073/160] Improve styling for info sidebar on LH side --- .../@node-red/editor-client/src/sass/tab-info.scss | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss index 732d4dfe88..a8fc624460 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/tab-info.scss @@ -442,18 +442,6 @@ div.red-ui-info-table { right: 1px; padding: 1px 2px 0 1px; text-align: right; - background: var(--red-ui-list-item-background); - - .red-ui-treeList-label:hover & { - background: var(--red-ui-list-item-background-hover); - } - .red-ui-treeList-label.focus & { - background: var(--red-ui-list-item-background-hover); - } - .red-ui-treeList-label.selected & { - background: var(--red-ui-list-item-background-selected); - } - &.red-ui-info-outline-item-hover-controls button { min-width: 23px; @@ -580,6 +568,7 @@ div.red-ui-info-table { top: 6px; right: 8px; width: calc(100% - 130px); + min-width: 150px; max-width: 250px; background: var(--red-ui-palette-header-background); } From 56b243951134a8a39f6da2c62022a2f9a512c26a Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 29 Oct 2025 17:07:55 +0000 Subject: [PATCH 074/160] Ensure tab button is visible when sorting --- .../node_modules/@node-red/editor-client/src/js/ui/sidebar.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index f438df2830..6813e76266 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -228,6 +228,7 @@ RED.sidebar = (function() { const options = knownTabs[tabId]; options.tabButtonTooltip.delete() draggingTabButton = true + tabBar.css('z-index','inherit') }, stop: function(event, ui) { // Restore the tooltip @@ -237,6 +238,7 @@ RED.sidebar = (function() { options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action); // Save the sidebar state exportSidebarState() + tabBar.css('z-index','') }, receive: function(event, ui) { // Tab has been moved from one sidebar to another From 096bafb75c7b68f767542e9f3271fe3e2c14d2da Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 30 Oct 2025 14:15:59 +0000 Subject: [PATCH 075/160] Update info tab sidebar --- .../@node-red/editor-client/src/images/explorer.svg | 1 + .../node_modules/@node-red/editor-client/src/js/ui/tab-info.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 packages/node_modules/@node-red/editor-client/src/images/explorer.svg diff --git a/packages/node_modules/@node-red/editor-client/src/images/explorer.svg b/packages/node_modules/@node-red/editor-client/src/images/explorer.svg new file mode 100644 index 0000000000..555efcc92b --- /dev/null +++ b/packages/node_modules/@node-red/editor-client/src/images/explorer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js index 557fd970bf..49b171ec5f 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tab-info.js @@ -122,7 +122,7 @@ RED.sidebar.info = (function() { // target: "secondary", label: RED._("sidebar.info.label"), name: RED._("sidebar.info.name"), - iconClass: "fa fa-info", + icon: "red/images/explorer.svg", action:"core:show-info-tab", content: content, pinned: true, From 351d25a7d62c4803c15bf4823502fe0b56bb4f0e Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Fri, 31 Oct 2025 11:28:53 +0000 Subject: [PATCH 076/160] Fix nls message name --- .../@node-red/editor-client/locales/en-US/editor.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json index 905b8ea5a0..8018b745f8 100644 --- a/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json +++ b/packages/node_modules/@node-red/editor-client/locales/en-US/editor.json @@ -169,7 +169,7 @@ "zoom-out": "Zoom out", "zoom-reset": "Reset zoom", "zoom-in": "Zoom in", - "fit-to-screen": "Zoom to fit", + "zoom-fit": "Zoom to fit", "search-flows": "Search flows", "search-prev": "Previous", "search-next": "Next", From 7b6c838e7eef227de8af127c10553a8237f96ce8 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Fri, 31 Oct 2025 11:29:07 +0000 Subject: [PATCH 077/160] Reshow scrollbars and disable navigator temporary show --- .../editor-client/src/js/ui/view-navigator.js | 30 +++++++++---------- .../editor-client/src/sass/workspace.scss | 14 ++++----- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js index 438820227a..d2275608c6 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view-navigator.js @@ -194,23 +194,23 @@ RED.view.navigator = (function() { // Listen for canvas interactions to show minimap temporarily // Only show on actual pan/zoom navigation, not selection changes - RED.events.on("view:navigate", function() { - showTemporary(); - }); + // RED.events.on("view:navigate", function() { + // showTemporary(); + // }); // Show minimap briefly when workspace changes (includes initial load) - RED.events.on("workspace:change", function(event) { - // Only show if there's an active workspace with nodes - if (event.workspace && RED.nodes.getWorkspaceOrder().length > 0) { - // Small delay to ensure nodes are rendered - setTimeout(function() { - var activeNodes = RED.nodes.filterNodes({z: event.workspace}); - if (activeNodes.length > 0) { - showTemporary(); - } - }, 100); - } - }); + // RED.events.on("workspace:change", function(event) { + // // Only show if there's an active workspace with nodes + // if (event.workspace && RED.nodes.getWorkspaceOrder().length > 0) { + // // Small delay to ensure nodes are rendered + // setTimeout(function() { + // var activeNodes = RED.nodes.filterNodes({z: event.workspace}); + // if (activeNodes.length > 0) { + // showTemporary(); + // } + // }, 100); + // } + // }); }, refresh: refreshNodes, resize: resizeNavBorder, diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss index a29932e9df..30a5c245f0 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss @@ -41,13 +41,13 @@ padding: 0; margin: 0; - // Hide scrollbars - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* Internet Explorer 10+ */ - &::-webkit-scrollbar { /* WebKit */ - width: 0; - height: 0; - } + // Hide scrollbars - to be done in a future iteration + // scrollbar-width: none; /* Firefox */ + // -ms-overflow-style: none; /* Internet Explorer 10+ */ + // &::-webkit-scrollbar { /* WebKit */ + // width: 0; + // height: 0; + // } // Reset SVG default margins > svg { From cab7ce247b743f8424ad5d70d2ccb39004914dd6 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 3 Dec 2025 16:51:19 +0000 Subject: [PATCH 078/160] Prep dev branch for beta releases --- package.json | 2 +- .../node_modules/@node-red/editor-api/package.json | 6 +++--- .../node_modules/@node-red/editor-client/package.json | 2 +- packages/node_modules/@node-red/nodes/package.json | 2 +- packages/node_modules/@node-red/registry/package.json | 4 ++-- packages/node_modules/@node-red/runtime/package.json | 6 +++--- packages/node_modules/@node-red/util/package.json | 2 +- packages/node_modules/node-red/package.json | 10 +++++----- scripts/generate-publish-script.js | 2 +- 9 files changed, 18 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 666d5b0db2..4bd0dd589a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "node-red", - "version": "4.1.2", + "version": "5.0.0-beta.0", "description": "Low-code programming for event-driven applications", "homepage": "https://nodered.org", "license": "Apache-2.0", diff --git a/packages/node_modules/@node-red/editor-api/package.json b/packages/node_modules/@node-red/editor-api/package.json index d15b85f3e0..a24dd40b2c 100644 --- a/packages/node_modules/@node-red/editor-api/package.json +++ b/packages/node_modules/@node-red/editor-api/package.json @@ -1,6 +1,6 @@ { "name": "@node-red/editor-api", - "version": "4.1.2", + "version": "5.0.0-beta.0", "license": "Apache-2.0", "main": "./lib/index.js", "repository": { @@ -16,8 +16,8 @@ } ], "dependencies": { - "@node-red/util": "4.1.2", - "@node-red/editor-client": "4.1.2", + "@node-red/util": "5.0.0-beta.0", + "@node-red/editor-client": "5.0.0-beta.0", "bcryptjs": "3.0.2", "body-parser": "1.20.3", "clone": "2.1.2", diff --git a/packages/node_modules/@node-red/editor-client/package.json b/packages/node_modules/@node-red/editor-client/package.json index d673eb66a9..1d4c9d70e1 100644 --- a/packages/node_modules/@node-red/editor-client/package.json +++ b/packages/node_modules/@node-red/editor-client/package.json @@ -1,6 +1,6 @@ { "name": "@node-red/editor-client", - "version": "4.1.2", + "version": "5.0.0-beta.0", "license": "Apache-2.0", "repository": { "type": "git", diff --git a/packages/node_modules/@node-red/nodes/package.json b/packages/node_modules/@node-red/nodes/package.json index dd83cb3936..5dcbd66402 100644 --- a/packages/node_modules/@node-red/nodes/package.json +++ b/packages/node_modules/@node-red/nodes/package.json @@ -1,6 +1,6 @@ { "name": "@node-red/nodes", - "version": "4.1.2", + "version": "5.0.0-beta.0", "license": "Apache-2.0", "repository": { "type": "git", diff --git a/packages/node_modules/@node-red/registry/package.json b/packages/node_modules/@node-red/registry/package.json index 1e23e343f3..0134b6ecbd 100644 --- a/packages/node_modules/@node-red/registry/package.json +++ b/packages/node_modules/@node-red/registry/package.json @@ -1,6 +1,6 @@ { "name": "@node-red/registry", - "version": "4.1.2", + "version": "5.0.0-beta.0", "license": "Apache-2.0", "main": "./lib/index.js", "repository": { @@ -16,7 +16,7 @@ } ], "dependencies": { - "@node-red/util": "4.1.2", + "@node-red/util": "5.0.0-beta.0", "clone": "2.1.2", "fs-extra": "11.3.0", "semver": "7.7.1", diff --git a/packages/node_modules/@node-red/runtime/package.json b/packages/node_modules/@node-red/runtime/package.json index be53e7012b..5e22788a3e 100644 --- a/packages/node_modules/@node-red/runtime/package.json +++ b/packages/node_modules/@node-red/runtime/package.json @@ -1,6 +1,6 @@ { "name": "@node-red/runtime", - "version": "4.1.2", + "version": "5.0.0-beta.0", "license": "Apache-2.0", "main": "./lib/index.js", "repository": { @@ -16,8 +16,8 @@ } ], "dependencies": { - "@node-red/registry": "4.1.2", - "@node-red/util": "4.1.2", + "@node-red/registry": "5.0.0-beta.0", + "@node-red/util": "5.0.0-beta.0", "async-mutex": "0.5.0", "clone": "2.1.2", "cronosjs": "1.7.1", diff --git a/packages/node_modules/@node-red/util/package.json b/packages/node_modules/@node-red/util/package.json index a647daee6c..c633229757 100644 --- a/packages/node_modules/@node-red/util/package.json +++ b/packages/node_modules/@node-red/util/package.json @@ -1,6 +1,6 @@ { "name": "@node-red/util", - "version": "4.1.2", + "version": "5.0.0-beta.0", "license": "Apache-2.0", "repository": { "type": "git", diff --git a/packages/node_modules/node-red/package.json b/packages/node_modules/node-red/package.json index 133a81f0c8..f758b3bc03 100644 --- a/packages/node_modules/node-red/package.json +++ b/packages/node_modules/node-red/package.json @@ -1,6 +1,6 @@ { "name": "node-red", - "version": "4.1.2", + "version": "5.0.0-beta.0", "description": "Low-code programming for event-driven applications", "homepage": "https://nodered.org", "license": "Apache-2.0", @@ -31,10 +31,10 @@ "flow" ], "dependencies": { - "@node-red/editor-api": "4.1.2", - "@node-red/runtime": "4.1.2", - "@node-red/util": "4.1.2", - "@node-red/nodes": "4.1.2", + "@node-red/editor-api": "5.0.0-beta.0", + "@node-red/runtime": "5.0.0-beta.0", + "@node-red/util": "5.0.0-beta.0", + "@node-red/nodes": "5.0.0-beta.0", "basic-auth": "2.0.1", "bcryptjs": "3.0.2", "cors": "2.8.5", diff --git a/scripts/generate-publish-script.js b/scripts/generate-publish-script.js index c31b2dd9e0..7e91c08f98 100644 --- a/scripts/generate-publish-script.js +++ b/scripts/generate-publish-script.js @@ -4,7 +4,7 @@ const path = require("path"); const fs = require("fs-extra"); const should = require("should"); -const LATEST = "4"; +const LATEST = "5"; function generateScript() { return new Promise((resolve, reject) => { From 9e9fa2b92da12a7a083747d974584f6fc051f17a Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 4 Dec 2025 13:33:44 +0000 Subject: [PATCH 079/160] Improve styling --- .../editor-client/src/js/ui/sidebar.js | 7 +- .../editor-client/src/sass/mixins.scss | 1 + .../editor-client/src/sass/sidebar.scss | 70 +++++++++++++------ .../editor-client/src/sass/workspace.scss | 2 + 4 files changed, 55 insertions(+), 25 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index 6813e76266..dc1b97f478 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -30,7 +30,7 @@ RED.sidebar = (function() { minimumWidth: 180, maximumWidth: 800, // Make LH side slightly narrower by default as its the palette that doesn't require a lot of width - defaultWidth: 180 + defaultWidth: 210 } } const defaultSidebarConfiguration = { @@ -209,7 +209,7 @@ RED.sidebar = (function() { let draggingTabButton = false function setupSidebarTabs(sidebar) { - const tabBar = $('
                  ') + const tabBar = $('
                  ').addClass('red-ui-sidebar-' + sidebar.direction); tabBar.attr('id', sidebar.container.attr('id') + '-tab-bar') tabBar.data('sidebar', sidebar.id) if (sidebar.direction === 'right') { @@ -271,6 +271,7 @@ RED.sidebar = (function() { const separator = $('
                  '); separator.attr('id', sidebar.container.attr('id') + '-separator') $('
                  ').appendTo(separator); + $('
                  ').appendTo(separator); let scaleFactor = 1; if (sidebar.direction === 'right') { separator.insertBefore(sidebar.container); @@ -407,7 +408,7 @@ RED.sidebar = (function() { } function setupSidebar(sidebar) { - sidebar.container.addClass("red-ui-sidebar"); + sidebar.container.addClass("red-ui-sidebar").addClass('red-ui-sidebar-' + sidebar.direction);; sidebar.container.width(sidebar.defaultWidth); sidebar.separator = setupSidebarSeparator(sidebar); sidebar.tabBar = setupSidebarTabs(sidebar) diff --git a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss index 486396c595..28eeba3c27 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss @@ -70,6 +70,7 @@ text-align: center; margin:0; cursor:pointer; + border-radius: 3px; &.selected:not(.disabled):not(:disabled) { color: var(--red-ui-workspace-button-color-selected) !important; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index 7437e1b30c..02a4bec8db 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -29,7 +29,12 @@ flex-direction: column; overflow: hidden; } - +.red-ui-sidebar-left { + border-left: none; +} +.red-ui-sidebar-right { + border-right: none; +} #red-ui-sidebar.closing { border-style: dashed; } @@ -51,39 +56,57 @@ } .red-ui-sidebar-separator { - width: 7px; + width: 0; flex: 0 0 auto; // z-index: 11; - background-color: var(--red-ui-primary-background); + background-color: var(--red-ui-view-background); + overflow: visible; cursor: col-resize; - &:before { - content: ''; - display: block; - width: 100%; + .red-ui-sidebar-separator-handle { + position: absolute; + // background: rgba(255,140,0,0.2); + top: 0; + left: -6px; + width: 12px; height: 100%; - -webkit-mask-image: url(images/grip.svg); - mask-image: url(images/grip.svg); - -webkit-mask-size: auto; - mask-size: auto; - -webkit-mask-position: 50% 50%; - mask-position: 50% 50%; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - background-color: var(--red-ui-grip-color); + z-index: 20; } + // &:before { + // content: ''; + // display: block; + // width: 100%; + // height: 100%; + // -webkit-mask-image: url(images/grip.svg); + // mask-image: url(images/grip.svg); + // -webkit-mask-size: auto; + // mask-size: auto; + // -webkit-mask-position: 50% 50%; + // mask-position: 50% 50%; + // -webkit-mask-repeat: no-repeat; + // mask-repeat: no-repeat; + // background-color: var(--red-ui-grip-color); + // } } .red-ui-sidebar-tab-bar { // width: 40px; - padding: 5px; - background-color: var(--red-ui-primary-background); + padding: 8px; + background-color: var(--red-ui-secondary-background); flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; - gap: 10px; + gap: 12px; z-index: 10; + border: 1px solid var(--red-ui-primary-border-color); + + &.red-ui-sidebar-left { + border-left: none; + } + &.red-ui-sidebar-right { + border-right: none; + } button { @include mixins.workspace-button; @@ -95,11 +118,14 @@ padding: 0; height: 28px; width: 28px; - &:not(.selected):not(:hover) i { - opacity: 0.6; + &:not(.selected):not(:hover) { + border: none; + i { + opacity: 0.7; + } } &.selected { - box-shadow: 0 2px 0 0 var(--red-ui-form-input-border-selected-color); + // box-shadow: 0 2px 0 0 var(--red-ui-form-input-border-selected-color); } } .red-ui-sidebar-tab-bar-button-placeholder { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss index d95cbf295a..7e48434021 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/workspace.scss @@ -20,6 +20,8 @@ margin: 0; overflow: hidden; @include mixins.component-border; + border-left: none; + border-right: none; transition: left 0.1s ease-in-out; position: relative; flex-grow: 1; From 503fe7377bedc72d3db8b1bdb8ed0d9e76a97104 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 4 Dec 2025 13:37:23 +0000 Subject: [PATCH 080/160] Fix linting --- .../node_modules/@node-red/editor-client/src/js/ui/sidebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index dc1b97f478..8bbc516bd3 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -408,7 +408,7 @@ RED.sidebar = (function() { } function setupSidebar(sidebar) { - sidebar.container.addClass("red-ui-sidebar").addClass('red-ui-sidebar-' + sidebar.direction);; + sidebar.container.addClass("red-ui-sidebar").addClass('red-ui-sidebar-' + sidebar.direction); sidebar.container.width(sidebar.defaultWidth); sidebar.separator = setupSidebarSeparator(sidebar); sidebar.tabBar = setupSidebarTabs(sidebar) From 39dc8073d3191f6f8255790809bddfa5cfe13b7c Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 4 Dec 2025 13:37:44 +0000 Subject: [PATCH 081/160] Update tour for 5-beta --- .../editor-client/src/js/ui/tour/tourGuide.js | 7 +- .../src/tours/4.1/images/missing-modules.png | Bin 0 -> 47386 bytes .../src/tours/4.1/images/node-docs.png | Bin 0 -> 7524 bytes .../tours/4.1/images/update-notification.png | Bin 0 -> 24604 bytes .../editor-client/src/tours/4.1/welcome.js | 126 ++++++++++++++++++ .../editor-client/src/tours/welcome.js | 124 ++--------------- 6 files changed, 141 insertions(+), 116 deletions(-) create mode 100644 packages/node_modules/@node-red/editor-client/src/tours/4.1/images/missing-modules.png create mode 100644 packages/node_modules/@node-red/editor-client/src/tours/4.1/images/node-docs.png create mode 100644 packages/node_modules/@node-red/editor-client/src/tours/4.1/images/update-notification.png create mode 100644 packages/node_modules/@node-red/editor-client/src/tours/4.1/welcome.js diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js b/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js index 30130d2d1b..808624dd07 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/tour/tourGuide.js @@ -435,10 +435,15 @@ RED.tourGuide = (function() { function listTour() { return [ + { + id: "5_0", + label: "5.0", + path: "./tours/welcome.js" + }, { id: "4_1", label: "4.1", - path: "./tours/welcome.js" + path: "./tours/4.1/welcome.js" }, { id: "4_0", diff --git a/packages/node_modules/@node-red/editor-client/src/tours/4.1/images/missing-modules.png b/packages/node_modules/@node-red/editor-client/src/tours/4.1/images/missing-modules.png new file mode 100644 index 0000000000000000000000000000000000000000..f96144395b9e8c9dea38bafccd07164521be4f4f GIT binary patch literal 47386 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 literal 0 HcmV?d00001 diff --git a/packages/node_modules/@node-red/editor-client/src/tours/4.1/images/update-notification.png b/packages/node_modules/@node-red/editor-client/src/tours/4.1/images/update-notification.png new file mode 100644 index 0000000000000000000000000000000000000000..4e4b610e787e6e24af4f02870d95825780ee229f GIT binary patch literal 24604 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

                  )SC(KkOSHwVyfwaZzU-Bcwh;n`ZR}ad97O0zrZ8V?M<^`bPJ;Uu%nbnvXh* zWuSTP-9Nu0r3|2S#}TO(sm?T;@EDU&@~(5r15wz)FBA36xpwyiS7~1CDZnA(Scn_| zI9&fH*`x&{$32C=R;`}4R4^D7C4z6|n35wb45Z42>b-=vFQ^Bd>@OO#_K=?GYg6;r zlzL#9LQ=q5nrqnlE=so1GL*&{zxGZe4lW^jq5 z)E?KauetL$&*1%9^Bb+wmE;wI$8%Q;L=yK?Ge1lzDGee~*DB{-+?%zG@>IE%MHTH+ z?|0JVsMKTMT9sHc+nm2lbm-n?uWR%gmfk&)%)RYB+gG_vYw}{NEobPw+?~ZR-iV8y@?>d?}95wEmw!_Dh-l$CiLVGLn%)~$Vk{|ch! zP7R8qf#VUbSt8%kf|g^&DulPfs(I!R+>gGPUQD`70c)|H_XCQyL?%?@-ib;;ePjq1 zn%Jt$YF!0Bue#lK@}kH1A}xj^g1iq)3<6ZGYXzb$>!-s~t%bxADVC6$e6Hs(g6sGS$FtLZhs= zXda7tpO4R4-|Z9ZGPa$Mhs$ZCY}9;Xwo5*aeO&wXmVy4S_1@ZO6s|n&g9A{f#nkS0 z!5?cQ{7B;a8v~#HcXf^h=4;K3j6a0VXU2!@8pf`C=K8C|zwrcEQ7hB)`G<$~L(Uys ze1}cs(n+j|On;!m_D7RknV(cp;!Uh^35fKkPu#OOZ}ICJ(N^@yx=Gh0m{0`?-=A#{Jz}Jji(tX?W`0NJqTOM>O;;Lu zg^_|%R4HszS3X_uK?S=HiD+CFvl8j~S-jJqfAsWd4tne@HgYZT533|LDUd0rH%%Ij zCfu0$q4lsjyU0!X!8#xqwAjSMF^{!~q;PeC+F@z zqq&udQk=rhjSW9_9~qJ}u)t8#>PN1I-Uk>?6%7+^t3A4LEiZkh#Gq=Y2r2{~ zdmfDks*B1pGVj*&Q4#K8Y;&OJ3?tzQ_?6S)uvGt#Fu)eykw@AOi>Utkpx4JJ#k#pS zLm|m^SX?V4TA|$Cv%xNB)!q11Qk>dNsskbTy<+{FO3|tZmhQ8<0(odRJ~h>xx46)} zo`lz8KTbtCwWqcCi~)f*aKyqE_W2sTzdE0ALv z)s$xA7RQ#s)m%|KmeH*IL(4#L29d|9M;pAgt@Let's take a moment to discover the new features in this release.

                  ", + "ja": "

                  本リリースの新機能を見つけてみましょう。

                  ", + "fr": "

                  Prenons un moment pour découvrir les nouvelles fonctionnalités de cette version.

                  " + } + }, + { + title: { + "en-US": "Update notifications", + "ja": "更新の通知", + "fr": "Notifications de mise à jour" + }, + image: 'images/update-notification.png', + description: { + "en-US": `

                  Stay up to date with notifications when there is a new Node-RED version available, or updates to the nodes you have installed

                  `, + "ja": `

                  新バージョンのNode-REDの提供や、インストールしたノードの更新があった時に、通知を受け取ることができます。

                  `, + "fr": `

                  Désormais vous recevrez une notification lorsqu'une nouvelle version de Node-RED ou une nouvelle version relative à un des noeuds que vous avez installés est disponible

                  ` + } + }, + { + title: { + "en-US": "Flow documentation", + "ja": "フローのドキュメント", + "fr": "Documentation des flux" + }, + image: 'images/node-docs.png', + description: { + "en-US": `

                  Quickly see which nodes have additional documentation with the new documentation icon.

                  +

                  Clicking on the icon opens up the Description tab of the node edit dialog.

                  `, + "ja": `

                  ドキュメントアイコンによって、どのノードにドキュメントが追加されているかをすぐに確認できます。

                  +

                  アイコンをクリックすると、ノード編集ダイアログの説明タブが開きます。

                  `, + "fr": `

                  Voyez rapidement quels noeuds ont une documentation supplémentaire avec la nouvelle icône de documentation.

                  +

                  Cliquer sur l'icône ouvre l'onglet Description de la boîte de dialogue d'édition du noeud.

                  ` + } + }, + { + title: { + "en-US": "Palette Manager Improvements", + "ja": "パレットの管理の改善", + "fr": "Améliorations du Gestionnaire de Palettes" + }, + description: { + "en-US": `

                  There are lots of improvements to the palette manager:

                  +
                    +
                  • Search results are sorted by downloads to help you find the most popular nodes
                    • +
                  • See which nodes have been deprecated by their author and are no longer recommended for use
                    • +
                  • Links to node documentation for the nodes you already have installed
                    • +
                  `, + "ja": `

                  パレットの管理に多くの改善が加えられました:

                  +
                    +
                  • 検索結果はダウンロード数順で並べられ、最も人気のあるノードを見つけやすくなりました。
                    • +
                  • 作者によって非推奨とされ、利用が推奨されなくなったノードかを確認できるようになりました。
                    • +
                  • 既にインストールされているノードに、ノードのドキュメントへのリンクが追加されました。
                    • +
                  `, + "fr": `

                  Le Gestionnaire de Palettes a bénéficié de nombreuses améliorations :

                  +
                    +
                  • Les résultats de recherche sont triés par téléchargement pour vous aider à trouver les noeuds les plus populaires.
                    • +
                  • Indique les noeuds obsolètes par leur auteur et dont l'utilisation n'est plus recommandée.
                    • +
                  • Liens vers la documentation des noeuds déjà installés.
                    • +
                  ` + } + }, + { + title: { + "en-US": "Installing missing modules", + "ja": "不足モジュールのインストール", + "fr": "Installation des modules manquants" + }, + image: 'images/missing-modules.png', + description: { + "en-US": `

                  Flows exported from Node-RED 4.1 now include information on what additional modules need to be installed.

                  +

                  When importing a flow with this information, the editor will let you know what is missing and help to get them installed.

                  + `, + "ja": `

                  Node-RED 4.1から書き出したフローには、インストールが必要な追加モジュールの情報が含まれる様になりました。

                  +

                  この情報を含むフローを読み込むと、エディタは不足しているモジュールを通知し、インストールを支援します。

                  + `, + "fr": `

                  Les flux exportés depuis Node-RED 4.1 incluent désormais des informations sur les modules supplémentaires à installer.

                  +

                  Lors de l'importation d'un flux contenant ces informations, l'éditeur vous indiquera les modules manquants et vous aidera à les installer.

                  + ` + } + }, + { + title: { + "en-US": "Node Updates", + "ja": "ノードの更新", + "fr": "Mises à jour des noeuds" + }, + // image: "images/", + description: { + "en-US": `

                  The core nodes have received lots of minor fixes, documentation updates and + small enhancements. Check the full changelog in the Help sidebar for a full list.

                  +
                    +
                  • Support for node: prefixed modules in the Function node
                    • +
                  • The ability to set a global timeout for Function nodes via the runtime settings
                    • +
                  • Better display of error objects in the Debug sidebar
                    • +
                  • and lots more...
                    • +
                  `, + "ja": `

                  コアノードには沢山の軽微な修正、ドキュメント更新、小さな機能拡張が入っています。全リストはヘルプサイドバーにある変更履歴を参照してください。

                  +
                    +
                  • Functionノードでnode:のプレフィックスモジュールをサポート
                    • +
                  • ランタイム設定からFunctionノードのグローバルタイムアウトを設定可能
                    • +
                  • デバッグサイドバーでのエラーオブジェクトの表示を改善
                    • +
                  • その他、多数...
                    • +
                  `, + "fr": `

                  Les noeuds principaux ont bénéficié de nombreux correctifs mineurs, de mises à jour de documentation et d'améliorations mineures. + Consultez le journal complet des modifications dans la barre latérale d'aide pour une liste complète.

                  +
                    +
                  • Prise en charge des modules préfixés node: dans le noeud Fonction.
                    • +
                  • Possibilité de définir un délai d'expiration global pour les noeuds Fonction via les paramètres d'exécution.
                    • +
                  • Meilleur affichage des objets d'erreur dans la barre latérale de débogage.
                    • +
                  • Et bien plus encore...
                    • +
                  ` + } + } + ] +} diff --git a/packages/node_modules/@node-red/editor-client/src/tours/welcome.js b/packages/node_modules/@node-red/editor-client/src/tours/welcome.js index 8041db4697..fcc2519b1e 100644 --- a/packages/node_modules/@node-red/editor-client/src/tours/welcome.js +++ b/packages/node_modules/@node-red/editor-client/src/tours/welcome.js @@ -1,125 +1,19 @@ export default { - version: "4.1.0", + version: "5.0.0-beta.0", steps: [ { titleIcon: "fa fa-map-o", title: { - "en-US": "Welcome to Node-RED 4.1!", - "ja": "Node-RED 4.1 へようこそ!", - "fr": "Bienvenue dans Node-RED 4.1!" + "en-US": "Welcome to Node-RED 5.0 Beta 0!", + "ja": "Node-RED 5.0 へようこそ!", + "fr": "Bienvenue dans Node-RED 5.0 Beta 0!" }, description: { - "en-US": "

                  Let's take a moment to discover the new features in this release.

                  ", - "ja": "

                  本リリースの新機能を見つけてみましょう。

                  ", - "fr": "

                  Prenons un moment pour découvrir les nouvelles fonctionnalités de cette version.

                  " - } - }, - { - title: { - "en-US": "Update notifications", - "ja": "更新の通知", - "fr": "Notifications de mise à jour" - }, - image: 'images/update-notification.png', - description: { - "en-US": `

                  Stay up to date with notifications when there is a new Node-RED version available, or updates to the nodes you have installed

                  `, - "ja": `

                  新バージョンのNode-REDの提供や、インストールしたノードの更新があった時に、通知を受け取ることができます。

                  `, - "fr": `

                  Désormais vous recevrez une notification lorsqu'une nouvelle version de Node-RED ou une nouvelle version relative à un des noeuds que vous avez installés est disponible

                  ` - } - }, - { - title: { - "en-US": "Flow documentation", - "ja": "フローのドキュメント", - "fr": "Documentation des flux" - }, - image: 'images/node-docs.png', - description: { - "en-US": `

                  Quickly see which nodes have additional documentation with the new documentation icon.

                  -

                  Clicking on the icon opens up the Description tab of the node edit dialog.

                  `, - "ja": `

                  ドキュメントアイコンによって、どのノードにドキュメントが追加されているかをすぐに確認できます。

                  -

                  アイコンをクリックすると、ノード編集ダイアログの説明タブが開きます。

                  `, - "fr": `

                  Voyez rapidement quels noeuds ont une documentation supplémentaire avec la nouvelle icône de documentation.

                  -

                  Cliquer sur l'icône ouvre l'onglet Description de la boîte de dialogue d'édition du noeud.

                  ` - } - }, - { - title: { - "en-US": "Palette Manager Improvements", - "ja": "パレットの管理の改善", - "fr": "Améliorations du Gestionnaire de Palettes" - }, - description: { - "en-US": `

                  There are lots of improvements to the palette manager:

                  -
                    -
                  • Search results are sorted by downloads to help you find the most popular nodes
                    • -
                  • See which nodes have been deprecated by their author and are no longer recommended for use
                    • -
                  • Links to node documentation for the nodes you already have installed
                    • -
                  `, - "ja": `

                  パレットの管理に多くの改善が加えられました:

                  -
                    -
                  • 検索結果はダウンロード数順で並べられ、最も人気のあるノードを見つけやすくなりました。
                    • -
                  • 作者によって非推奨とされ、利用が推奨されなくなったノードかを確認できるようになりました。
                    • -
                  • 既にインストールされているノードに、ノードのドキュメントへのリンクが追加されました。
                    • -
                  `, - "fr": `

                  Le Gestionnaire de Palettes a bénéficié de nombreuses améliorations :

                  -
                    -
                  • Les résultats de recherche sont triés par téléchargement pour vous aider à trouver les noeuds les plus populaires.
                    • -
                  • Indique les noeuds obsolètes par leur auteur et dont l'utilisation n'est plus recommandée.
                    • -
                  • Liens vers la documentation des noeuds déjà installés.
                    • -
                  ` - } - }, - { - title: { - "en-US": "Installing missing modules", - "ja": "不足モジュールのインストール", - "fr": "Installation des modules manquants" - }, - image: 'images/missing-modules.png', - description: { - "en-US": `

                  Flows exported from Node-RED 4.1 now include information on what additional modules need to be installed.

                  -

                  When importing a flow with this information, the editor will let you know what is missing and help to get them installed.

                  - `, - "ja": `

                  Node-RED 4.1から書き出したフローには、インストールが必要な追加モジュールの情報が含まれる様になりました。

                  -

                  この情報を含むフローを読み込むと、エディタは不足しているモジュールを通知し、インストールを支援します。

                  - `, - "fr": `

                  Les flux exportés depuis Node-RED 4.1 incluent désormais des informations sur les modules supplémentaires à installer.

                  -

                  Lors de l'importation d'un flux contenant ces informations, l'éditeur vous indiquera les modules manquants et vous aidera à les installer.

                  - ` - } - }, - { - title: { - "en-US": "Node Updates", - "ja": "ノードの更新", - "fr": "Mises à jour des noeuds" - }, - // image: "images/", - description: { - "en-US": `

                  The core nodes have received lots of minor fixes, documentation updates and - small enhancements. Check the full changelog in the Help sidebar for a full list.

                  -
                    -
                  • Support for node: prefixed modules in the Function node
                    • -
                  • The ability to set a global timeout for Function nodes via the runtime settings
                    • -
                  • Better display of error objects in the Debug sidebar
                    • -
                  • and lots more...
                    • -
                  `, - "ja": `

                  コアノードには沢山の軽微な修正、ドキュメント更新、小さな機能拡張が入っています。全リストはヘルプサイドバーにある変更履歴を参照してください。

                  -
                    -
                  • Functionノードでnode:のプレフィックスモジュールをサポート
                    • -
                  • ランタイム設定からFunctionノードのグローバルタイムアウトを設定可能
                    • -
                  • デバッグサイドバーでのエラーオブジェクトの表示を改善
                    • -
                  • その他、多数...
                    • -
                  `, - "fr": `

                  Les noeuds principaux ont bénéficié de nombreux correctifs mineurs, de mises à jour de documentation et d'améliorations mineures. - Consultez le journal complet des modifications dans la barre latérale d'aide pour une liste complète.

                  -
                    -
                  • Prise en charge des modules préfixés node: dans le noeud Fonction.
                    • -
                  • Possibilité de définir un délai d'expiration global pour les noeuds Fonction via les paramètres d'exécution.
                    • -
                  • Meilleur affichage des objets d'erreur dans la barre latérale de débogage.
                    • -
                  • Et bien plus encore...
                    • -
                  ` + "en-US": ` +

                  As a beta release, this is a step towards the final version of Node-RED 5.0.

                  +

                  With a number of UX improvements planned, this release focuses on laying the groundwork for those changes.

                  +

                  We will be making incremental changes betwen each beta release, so please try it out and let us know your feedback!

                  +` } } ] From 81ab7d7e0a992185d28a001eb530da3652640ff1 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 4 Dec 2025 14:09:06 +0000 Subject: [PATCH 082/160] Update tour with sidebar details --- .../editor-client/src/tours/welcome.js | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/node_modules/@node-red/editor-client/src/tours/welcome.js b/packages/node_modules/@node-red/editor-client/src/tours/welcome.js index fcc2519b1e..4dd3866835 100644 --- a/packages/node_modules/@node-red/editor-client/src/tours/welcome.js +++ b/packages/node_modules/@node-red/editor-client/src/tours/welcome.js @@ -15,6 +15,33 @@ export default {

                  We will be making incremental changes betwen each beta release, so please try it out and let us know your feedback!

                  ` } + }, + { + title: { + "en-US": "New Sidebar Design", + }, + description: { + "en-US": ` +

                  The sidebars have been redesigned to provide a cleaner and more consistent user experience.

                  +

                  Rather than hide them in a dropdown menu, the available sidebars are now listed down each side of the editor.

                  +

                  You can also move the sidebars between the two sides by dragging their buttons around.

                  +

                  We have moved the Information sidebar to the left-hand side to provide a more natural way to navigate around your flows.

                  +

                  This is the first iteration of changes. In a future beta we will add the ability to split the sidebar vertically, so you can have multiple +panels showing at once.

                  +`, + } + }, + { + title: { + "en-US": "Better Flow Navigation", + }, + description: { + "en-US": ` +

                  Some of the ways you can pan and zoom around the editor workspace have been improved to provide a more standard way of working.

                  +

                  You can use your middle-mouse button to pan around the workspace, but if you don't have such a button, you can press the spacebar and drag with the left mouse button.

                  +

                  There is also a new 'zoom to fit' button in the status bar; this will set your zoom level to ensure all of your nodes are currently visible.

                  +`, + } } ] } From ea5cc1f53cb15ae10fe4f63d60152b7fd674197c Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 4 Dec 2025 14:35:22 +0000 Subject: [PATCH 083/160] Fix touchmove event handling for panning workspace --- .../@node-red/editor-client/src/js/ui/view.js | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js index 4aa9bc128b..09c1779efb 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/view.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/view.js @@ -2150,24 +2150,27 @@ RED.view = (function() { function startPanning () { } - window.addEventListener('mousemove', function (event) { + window.addEventListener('mousemove', windowMouseMove) + window.addEventListener('touchmove', windowMouseMove) + + function windowMouseMove (event) { if (mouse_mode === RED.state.PANNING) { - var pos = [event.pageX, event.pageY]; - // if (d3.event.touches) { - // var touch0 = d3.event.touches.item(0); - // pos = [touch0.pageX, touch0.pageY]; - // } - var deltaPos = [ + let pos = [event.pageX, event.pageY] + if (event.touches) { + let touch0 = event.touches.item(0) + pos = [touch0.pageX, touch0.pageY] + } + const deltaPos = [ mouse_position[0]-pos[0], mouse_position[1]-pos[1] - ]; - + ] chart.scrollLeft(scroll_position[0]+deltaPos[0]) chart.scrollTop(scroll_position[1]+deltaPos[1]) RED.events.emit("view:navigate"); return } - }) + } + function canvasMouseMove() { var i; var node; From c2cfdacc84adb4973404b0af8e63ae03dbb91d7c Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Fri, 5 Dec 2025 11:00:48 +0000 Subject: [PATCH 084/160] Update changelog --- CHANGELOG.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 33751efd76..35546c4bbc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,21 @@ +#### 5.0.0-beta.0: Beta Release + +Editor + + - Update Sidebar UX (#5318) @knolleary + - Workspace pan/zoom updates (#5312) @knolleary + - Fix panning workspace on touchscreens (#5371) @knolleary + - Update tour for 5-beta (#5370) @knolleary + +Runtime + + - Prep dev branch for beta releases (#5367) @knolleary + +Nodes + + - Add ability to use pfx or p12 file for TLS connection settings option (#4907) @dceejay + + #### 4.1.2: Maintenance Release From c17b6bfde81b06b2b37187c65a68520f02d9615e Mon Sep 17 00:00:00 2001 From: Ben Hardill Date: Sun, 7 Dec 2025 12:48:33 +0000 Subject: [PATCH 085/160] Add TLS certs/keys from Env Vars --- .../@node-red/nodes/core/network/05-tls.html | 47 ++++++++++++++++++- .../@node-red/nodes/core/network/05-tls.js | 27 ++++++++++- .../nodes/locales/en-US/messages.json | 3 +- 3 files changed, 73 insertions(+), 4 deletions(-) diff --git a/packages/node_modules/@node-red/nodes/core/network/05-tls.html b/packages/node_modules/@node-red/nodes/core/network/05-tls.html index 1dda38842c..f889154b76 100644 --- a/packages/node_modules/@node-red/nodes/core/network/05-tls.html +++ b/packages/node_modules/@node-red/nodes/core/network/05-tls.html @@ -24,6 +24,7 @@
                  @@ -38,6 +39,10 @@
                  +
                  + + +
                  @@ -50,6 +55,10 @@
                  +
                  + + +
                  @@ -78,6 +87,10 @@
                  +
                  + + +
                  @@ -131,7 +144,10 @@ caname: {value:""}, servername: {value:""}, verifyservercert: {value: true}, - alpnprotocol: {value: ""} + alpnprotocol: {value: ""}, + certEnv: {value: ""}, + keyEnv: {value: ""}, + caEnv: {value: ""} }, credentials: { certdata: {type:"text"}, @@ -152,15 +168,42 @@ $("#node-tls-conf-cer").hide(); $("#node-tls-conf-key").hide(); $("#node-tls-conf-ca").hide(); + $("#node-tls-conf-cer-env").hide(); + $("#node-tls-conf-key-env").hide(); + $("#node-tls-conf-ca-env").hide(); $("#node-tls-conf-p12").show(); } - else { + else if ($("#node-config-input-certType").val() === "env") { + $("#node-tls-conf-cer").hide(); + $("#node-tls-conf-key").hide(); + $("#node-tls-conf-ca").hide(); + $("#node-tls-conf-cer-env").show(); + $("#node-tls-conf-key-env").show(); + $("#node-tls-conf-ca-env").show(); + $("#node-tls-conf-p12").hide(); + } else { $("#node-tls-conf-cer").show(); $("#node-tls-conf-key").show(); $("#node-tls-conf-ca").show(); + $("#node-tls-conf-cer-env").hide(); + $("#node-tls-conf-key-env").hide(); + $("#node-tls-conf-ca-env").hide(); $("#node-tls-conf-p12").hide(); } }); + + $("#node-config-input-certEnv").typedInput({ + type:"env", + types:["env"] + }); + $("#node-config-input-keyEnv").typedInput({ + type:"env", + types:["env"] + }); + $("#node-config-input-caEnv").typedInput({ + type:"env", + types:["env"] + }); function updateFileUpload() { if ($("#node-config-input-uselocalfiles").is(':checked')) { diff --git a/packages/node_modules/@node-red/nodes/core/network/05-tls.js b/packages/node_modules/@node-red/nodes/core/network/05-tls.js index 5e83f07a43..50cab6fb31 100644 --- a/packages/node_modules/@node-red/nodes/core/network/05-tls.js +++ b/packages/node_modules/@node-red/nodes/core/network/05-tls.js @@ -23,10 +23,14 @@ module.exports = function(RED) { this.valid = true; this.verifyservercert = n.verifyservercert; var certPath, keyPath, caPath, p12Path; + var certEnv, keyEnv, caEnv; if (n.cert) { certPath = n.cert.trim(); } if (n.key) { keyPath = n.key.trim(); } if (n.ca) { caPath = n.ca.trim(); } if (n.p12) { p12Path = n.p12.trim(); } + if (n.certEnv) { certEnv = n.certEnv } + if (n.keyEnv) { keyEnv = n.keyEnv } + if (n.caEnv) { caEnv = n.caEnv } this.certType = n.certType || "files"; this.servername = (n.servername||"").trim(); this.alpnprotocol = (n.alpnprotocol||"").trim(); @@ -41,13 +45,23 @@ module.exports = function(RED) { return; } } + else if (this.certType === "env") { + if (certEnv) { + this.certEnv = Buffer.from(RED.util.evaluateNodeProperty(certEnv, 'env', this)) + } + if (keyEnv) { + this.keyEnv = Buffer.from(RED.util.evaluateNodeProperty(keyEnv, 'env', this)) + } + if (caEnv) { + this.caEnv = Buffer.from(RED.util.evaluateNodeProperty(caEnv, 'env', this)) + } + } else if ((certPath && certPath.length > 0) || (keyPath && keyPath.length > 0) || (caPath && caPath.length > 0)) { if ( (certPath && certPath.length > 0) !== (keyPath && keyPath.length > 0)) { this.valid = false; this.error(RED._("tls.error.missing-file")); return; } - try { if (certPath) { this.cert = fs.readFileSync(certPath); @@ -122,6 +136,17 @@ module.exports = function(RED) { opts.ca = this.ca; } } + else if (this.certType === "env") { + if (this.keyEnv) { + opts.key = this.keyEnv + } + if (this.certEnv) { + opts.cert= this.certEnv + } + if (this.caEnv) { + opts.ca = this.caEnv + } + } else { if (this.pfx) { opts.pfx = this.pfx; diff --git a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json index 34462a4aa9..0e5f4ae623 100644 --- a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json +++ b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json @@ -208,7 +208,8 @@ "certtype": "Cert Type", "files": "Individual files", "p12": "pfx or p12", - "pfx": "pfx or p12 file" + "pfx": "pfx or p12 file", + "env": "Environment Variable" }, "placeholder": { "cert": "path to certificate (PEM format)", From 48b8659ddb965e090442ea17f1ccb92928e17125 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 8 Dec 2025 11:10:46 +0000 Subject: [PATCH 086/160] Show overflow button when not enough space in tab bar --- .../editor-client/src/js/ui/sidebar.js | 123 +++++++++++++++--- .../editor-client/src/sass/sidebar.scss | 50 ++++--- 2 files changed, 130 insertions(+), 43 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index 8bbc516bd3..4373506129 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -138,7 +138,7 @@ RED.sidebar = (function() { // Insert the tab button at the correct index if (targetTabButtonIndex === -1 || targetTabButtonIndex >= targetSidebar.tabBar.children().length) { // Append to end - options.tabButton = $('').appendTo(targetSidebar.tabBar); + options.tabButton = $('').insertBefore(targetSidebar.tabOverflowButton); } else { // Insert before the item at targetTabButtonIndex options.tabButton = $('').insertBefore(targetSidebar.tabBar.children().eq(targetTabButtonIndex)); @@ -166,6 +166,7 @@ RED.sidebar = (function() { if (targetSidebar.content.children().length === 1) { RED.sidebar.show(options.id) } + targetSidebar.resizeSidebarTabBar() } function removeTab(id) { @@ -210,18 +211,67 @@ RED.sidebar = (function() { let draggingTabButton = false function setupSidebarTabs(sidebar) { const tabBar = $('
                  ').addClass('red-ui-sidebar-' + sidebar.direction); - tabBar.attr('id', sidebar.container.attr('id') + '-tab-bar') - tabBar.data('sidebar', sidebar.id) + const tabBarButtonsContainer = $('
                  ').appendTo(tabBar); + const tabOverflowButton = $('').appendTo(tabBarButtonsContainer); + sidebar.tabOverflowButton = tabOverflowButton + tabOverflowButton.hide() + tabOverflowButton.on('click', function(evt) { + try { + const menuOptions = [] + tabBarButtonsContainer.find('button:not(.red-ui-sidebar-tab-bar-overflow-button)').each(function () { + if ($(this).is(':visible')) { + return + } + const tabId = $(this).attr('data-tab-id') + const tabOptions = knownTabs[tabId] + menuOptions.push({ + label: tabOptions.name, + onselect: function() { + RED.sidebar.show(tabId) + } + }) + }) + if (menuOptions.length === 0) { + return + } + const menu = RED.menu.init({ options: menuOptions }); + menu.attr("id",sidebar.container.attr('id')+"-menu"); + menu.css({ + position: "absolute" + }) + menu.appendTo("body"); + var elementPos = tabOverflowButton.offset(); + menu.css({ + top: (elementPos.top+tabOverflowButton.height()- menu.height() - 10)+"px", + left: (elementPos.left - menu.width() - 3)+"px" + }) + $(".red-ui-menu.red-ui-menu-dropdown").hide(); + setTimeout(() => { + $(document).on("click.red-ui-sidebar-tabmenu", function(evt) { + $(document).off("click.red-ui-sidebar-tabmenu"); + console.log('done the remov') + menu.remove(); + }); + }, 0) + menu.show(); + console.log(menu) + } catch (err) { + console.log(err) + } + }) + tabBarButtonsContainer.attr('id', sidebar.container.attr('id') + '-tab-bar') + tabBarButtonsContainer.data('sidebar', sidebar.id) if (sidebar.direction === 'right') { tabBar.insertAfter(sidebar.container); } else if (sidebar.direction === 'left') { tabBar.insertBefore(sidebar.container); } - tabBar.sortable({ + tabBarButtonsContainer.sortable({ distance: 10, cancel: false, + items: "button:not(.red-ui-sidebar-tab-bar-overflow-button)", placeholder: "red-ui-sidebar-tab-bar-button-placeholder", - connectWith: ".red-ui-sidebar-tab-bar", + connectWith: ".red-ui-sidebar-tab-bar-buttons", start: function(event, ui) { // Remove the tooltip so it doesn't display unexpectedly whilst dragging const tabId = ui.item.attr('data-tab-id'); @@ -252,20 +302,61 @@ RED.sidebar = (function() { RED.sidebar.show(firstTab); } } + src.resizeSidebarTabBar(); + dest.resizeSidebarTabBar(); + RED.sidebar.show(tabId) } }) - // $(window).on("resize", function () { - // const lastChild = tabBar.children().last(); - // if (lastChild.length > 0) { - // const tabBarHeight = tabBar.height(); - // const lastChildBottom = lastChild.position().top + lastChild.outerHeight(); - // if (lastChildBottom > tabBarHeight) { - // console.log('overflow') - // } - // } - // }) - return tabBar + + let hasHidden = false + sidebar.resizeSidebarTabBar = function () { + let tabBarButtonsBottom = tabBarButtonsContainer.position().top + tabBarButtonsContainer.outerHeight(); + const buttonHeight = tabOverflowButton.outerHeight() + // Find the last visible button + let bottomButton = tabBarButtonsContainer.children(":visible").last() + if (bottomButton.length === 0) { + // Nothing visible - bail out + return + } + if (tabBarButtonsBottom < bottomButton.position().top + buttonHeight * 1.5) { + tabOverflowButton.show() + let tabOverflowButtonBottom = tabOverflowButton.position().top + buttonHeight * 1.5; + while (tabBarButtonsBottom < tabOverflowButtonBottom) { + const lastVisible = tabBarButtonsContainer.children(':not(".red-ui-sidebar-tab-bar-overflow-button"):visible').last() + if (lastVisible.length === 0) { + // Nothing left to hide + break + } + lastVisible.hide() + tabOverflowButtonBottom = tabOverflowButton.position().top + buttonHeight * 1.5; + } + } else { + const hiddenChildren = tabBarButtonsContainer.children(':not(".red-ui-sidebar-tab-bar-overflow-button"):hidden') + if (hiddenChildren.length > 0) { + // We may be able to show some more buttons + let tabOverflowButtonBottom = tabOverflowButton.position().top + buttonHeight * 2; + let shownCount = 0 + while (tabBarButtonsBottom > tabOverflowButtonBottom + buttonHeight) { + const firstHidden = tabBarButtonsContainer.children(':not(".red-ui-sidebar-tab-bar-overflow-button"):hidden').first() + if (firstHidden.length === 0) { + // Nothing left to show + break + } + firstHidden.show() + shownCount++ + tabOverflowButtonBottom = tabOverflowButton.position().top + buttonHeight * 2; + } + if (hiddenChildren.length - shownCount <= 1) { + // We were able to show all of the hidden buttons + // so hide the overflow button again + tabOverflowButton.hide() + } + } + } + } + $(window).on("resize", sidebar.resizeSidebarTabBar) + return tabBarButtonsContainer } function setupSidebarSeparator(sidebar) { const separator = $('
                  '); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index 02a4bec8db..04c8ade13e 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -35,13 +35,7 @@ .red-ui-sidebar-right { border-right: none; } -#red-ui-sidebar.closing { - border-style: dashed; -} -.red-ui-sidebar > .red-ui-tabs { - flex-grow: 0; - flex-shrink: 0; -} + .red-ui-sidebar-footer { @include mixins.component-footer; position: relative; @@ -72,34 +66,17 @@ height: 100%; z-index: 20; } - // &:before { - // content: ''; - // display: block; - // width: 100%; - // height: 100%; - // -webkit-mask-image: url(images/grip.svg); - // mask-image: url(images/grip.svg); - // -webkit-mask-size: auto; - // mask-size: auto; - // -webkit-mask-position: 50% 50%; - // mask-position: 50% 50%; - // -webkit-mask-repeat: no-repeat; - // mask-repeat: no-repeat; - // background-color: var(--red-ui-grip-color); - // } } .red-ui-sidebar-tab-bar { - // width: 40px; - padding: 8px; background-color: var(--red-ui-secondary-background); flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; - gap: 12px; z-index: 10; border: 1px solid var(--red-ui-primary-border-color); + // height: 100%; &.red-ui-sidebar-left { border-left: none; @@ -116,8 +93,8 @@ align-items: center; justify-content: center; padding: 0; - height: 28px; - width: 28px; + height: 24px; + width: 24px; &:not(.selected):not(:hover) { border: none; i { @@ -131,6 +108,25 @@ .red-ui-sidebar-tab-bar-button-placeholder { border: 1px dashed var(--red-ui-form-input-border-color); } + + .red-ui-sidebar-tab-bar-buttons { + display: flex; + background: rgba(255, 0, 0, 0.1); + padding: 6px 6px 10px; + flex-direction: column; + align-items: center; + gap: 10px; + height: 100%; + } + .red-ui-sidebar-tab-bar-bottom-buttons { + display: flex; + flex-grow: 1; + background: rgba(0, 255, 0, 0.1); + padding: 8px 8px 12px; + flex-direction: column; + align-items: center; + gap: 12px; + } } .red-ui-sidebar .button { From 04f7c8dc9fe3cd17f03ec7faf62eb374e0778cbb Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Mon, 8 Dec 2025 16:27:33 +0000 Subject: [PATCH 087/160] Checkpoint --- .../editor-client/src/js/ui/sidebar.js | 9 +++++++++ .../editor-client/src/sass/sidebar.scss | 17 ++++++----------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js index 4373506129..95288378cb 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/sidebar.js @@ -209,9 +209,18 @@ RED.sidebar = (function() { } let draggingTabButton = false + + function setupSidebarTabButtonContainer(sidebar, position) { + + } function setupSidebarTabs(sidebar) { const tabBar = $('
                  ').addClass('red-ui-sidebar-' + sidebar.direction); const tabBarButtonsContainer = $('
                  ').appendTo(tabBar); + const tabBarButtonsContainerBottom = $('
                  ').appendTo(tabBar); + const dummyButton = $('').appendTo(tabBarButtonsContainerBottom); + const dummyButton2 = $('').appendTo(tabBarButtonsContainerBottom); + + const tabOverflowButton = $('').appendTo(tabBarButtonsContainer); sidebar.tabOverflowButton = tabOverflowButton tabOverflowButton.hide() diff --git a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss index 04c8ade13e..d8acb980be 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/sidebar.scss @@ -101,9 +101,6 @@ opacity: 0.7; } } - &.selected { - // box-shadow: 0 2px 0 0 var(--red-ui-form-input-border-selected-color); - } } .red-ui-sidebar-tab-bar-button-placeholder { border: 1px dashed var(--red-ui-form-input-border-color); @@ -111,21 +108,19 @@ .red-ui-sidebar-tab-bar-buttons { display: flex; + width: 100%; background: rgba(255, 0, 0, 0.1); - padding: 6px 6px 10px; + padding: 6px; + box-sizing: border-box; flex-direction: column; align-items: center; gap: 10px; - height: 100%; + flex-grow: 1; } .red-ui-sidebar-tab-bar-bottom-buttons { - display: flex; - flex-grow: 1; background: rgba(0, 255, 0, 0.1); - padding: 8px 8px 12px; - flex-direction: column; - align-items: center; - gap: 12px; + min-height: 50px; + flex-grow: 0; } } From 55d08ba79ee0e3482d046a863ee5e72fa10118a3 Mon Sep 17 00:00:00 2001 From: Ben Hardill Date: Mon, 8 Dec 2025 17:39:25 +0000 Subject: [PATCH 088/160] Move localfiles checkbox --- .../@node-red/nodes/core/network/05-tls.html | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/node_modules/@node-red/nodes/core/network/05-tls.html b/packages/node_modules/@node-red/nodes/core/network/05-tls.html index f889154b76..f4dc50f624 100644 --- a/packages/node_modules/@node-red/nodes/core/network/05-tls.html +++ b/packages/node_modules/@node-red/nodes/core/network/05-tls.html @@ -15,10 +15,6 @@ --> diff --git a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json index 34462a4aa9..5c00081a07 100644 --- a/packages/node_modules/@node-red/nodes/locales/en-US/messages.json +++ b/packages/node_modules/@node-red/nodes/locales/en-US/messages.json @@ -308,7 +308,8 @@ "delayvarmsg": "Override delay with msg.delay", "randomdelay": "Random delay", "limitrate": "Rate Limit", - "limitall": "All messages", + "limitall": "All messages - even spacing", + "limitburst": "All messages - burst mode", "limittopic": "For each msg.topic", "fairqueue": "Send each topic in turn", "timedqueue": "Send all topics", @@ -332,6 +333,7 @@ "label": { "delay": "delay", "variable": "variable", + "burst": "burst", "limit": "limit", "limitTopic": "limit topic", "random": "random", diff --git a/test/nodes/core/function/89-delay_spec.js b/test/nodes/core/function/89-delay_spec.js index 4fbf3df545..15dbe340d2 100644 --- a/test/nodes/core/function/89-delay_spec.js +++ b/test/nodes/core/function/89-delay_spec.js @@ -1009,6 +1009,67 @@ describe('delay Node', function() { }); }); + it('can handle a burst in burst mode', function(done) { + this.timeout(2000); + var flow = [{"id":"delayNode1","type":"delay","name":"delayNode","pauseType":"burst","timeout":1,"timeoutUnits":"seconds","rate":3,"nbRateUnits":1,"rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"wires":[["helperNode1"]]}, + {id:"helperNode1", type:"helper", wires:[]}]; + helper.load(delayNode, flow, function() { + var delayNode1 = helper.getNode("delayNode1"); + var helperNode1 = helper.getNode("helperNode1"); + var t = Date.now(); + var c = 0; + helperNode1.on("input", function(msg) { + msg.should.have.a.property('payload'); + c += 1; + if (c > 3) { done(err)} + done(); + }); + + setTimeout( function() { + if (c === 3) { done(); } + }, 700); + + // send test messages + delayNode1.receive({payload:1}); + setImmediate( function() { delayNode1.receive({payload:2}); } ); + setImmediate( function() { delayNode1.receive({payload:3}); } ); + setImmediate( function() { delayNode1.receive({payload:4}); } ); + setImmediate( function() { delayNode1.receive({payload:5}); } ); + }); + }); + + it('can reset a burst in burst mode', function(done) { + this.timeout(2000); + var flow = [{"id":"delayNode1","type":"delay","name":"delayNode","pauseType":"burst","timeout":1,"timeoutUnits":"seconds","rate":3,"nbRateUnits":1,"rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"wires":[["helperNode1"]]}, + {id:"helperNode1", type:"helper", wires:[]}]; + helper.load(delayNode, flow, function() { + var delayNode1 = helper.getNode("delayNode1"); + var helperNode1 = helper.getNode("helperNode1"); + var t = Date.now(); + var c = 0; + helperNode1.on("input", function(msg) { + msg.should.have.a.property('payload'); + c += 1; + if (c > 4) { done(err)} + done(); + }); + + setTimeout( function() { + if (c === 4) { done(); } + }, 700); + + // send test messages + delayNode1.receive({payload:1}); + setImmediate( function() { delayNode1.receive({payload:2}); } ); + setImmediate( function() { delayNode1.receive({payload:3}); } ); + setImmediate( function() { delayNode1.receive({payload:4}); } ); + setImmediate( function() { delayNode1.receive({payload:5}); } ); + setImmediate( function() { delayNode1.receive({reset:true}); } ); + setImmediate( function() { delayNode1.receive({payload:6}); } ); + }); + }); + + it('sending a msg with reset to empty queue doesnt send anything', function(done) { this.timeout(2000); var flow = [{"id":"delayNode1","type":"delay","name":"delayNode","pauseType":"rate","timeout":1,"timeoutUnits":"seconds","rate":2,"rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"wires":[["helperNode1"]]}, From 471c5eecda0f80ebf6828f1cd60a8e0ecad0d7a8 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 7 Jan 2026 16:33:04 +0000 Subject: [PATCH 098/160] WIP --- .../src/js/ui/common/treeList.js | 30 +++++---- .../editor-client/src/js/ui/sidebar.js | 58 +++++++++++----- .../src/js/ui/tab-info-outliner.js | 25 ++++--- .../editor-client/src/sass/colors.scss | 40 ++++++----- .../editor-client/src/sass/dropdownMenu.scss | 8 +-- .../editor-client/src/sass/header.scss | 67 ++++++++++--------- .../editor-client/src/sass/sizes.scss | 2 +- .../editor-client/src/sass/tab-info.scss | 13 +++- .../editor-client/src/sass/variables.scss | 2 + 9 files changed, 150 insertions(+), 95 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js index 85c6f0992a..3769474fcd 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js @@ -28,6 +28,7 @@ * - autoSelect: boolean - default true - triggers item selection when navigating * list by keyboard. If the list has checkboxed items * you probably want to set this to false + * - expandOnLabel: boolean - default true - items expand when their label is clicked * * methods: * - data(items) - clears existing items and replaces with new data @@ -91,6 +92,7 @@ * * */ + const paddingPerDepth = 5; $.widget( "nodered.treeList", { _create: function() { @@ -342,11 +344,11 @@ if (child.depth !== parent.depth+1) { child.depth = parent.depth+1; // var labelPaddingWidth = ((child.gutter ? child.gutter[0].offsetWidth + 2 : 0) + (child.depth * 20)); - var labelPaddingWidth = (((child.gutter&&!child.gutter.hasClass("red-ui-treeList-gutter-float"))?child.gutter.width()+2:0)+(child.depth*20)); + var labelPaddingWidth = (((child.gutter&&!child.gutter.hasClass("red-ui-treeList-gutter-float"))?child.gutter.width()+2:0)+(child.depth*paddingPerDepth)); child.treeList.labelPadding.width(labelPaddingWidth+'px'); if (child.element) { $(child.element).css({ - width: "calc(100% - "+(labelPaddingWidth+20+(child.icon?20:0))+"px)" + width: "calc(100% - "+(labelPaddingWidth+paddingPerDepth+(child.icon?paddingPerDepth:0))+"px)" }) } // This corrects all child item depths @@ -475,7 +477,7 @@ if (!childrenAdded) { startTime = Date.now(); spinner = $('