Update Link node UI to use TreeList

packages/node_modules/@node-red/nodes/core/core/60-link.html

@@ -14,164 +14,81 @@
     <div class="form-row node-input-link-row"></div>
 </script>
 
-<style>
-#node-input-link-container {
-    position: relative;
-}
-#node-input-link-container li {
-    padding: 2px 5px;
-    background: none;
-    font-size: 0.8em;
-    margin:0;
-    white-space: nowrap;
-}
-#node-input-link-container li label {
-    margin-bottom: 0;
-    width: 100%;
-}
-#node-input-link-container li label input {
-    vertical-align: top;
-    width:15px;
-    margin-right: 10px;
-}
-#node-input-link-container li:hover,
-#node-input-link-container li:hover .node-input-target-node-sublabel {
-    background: #f0f0f0;
-}
-.node-input-link-node-sublabel {
-    position:absolute;
-    right: 0px;
-    padding-right: 10px;
-    padding-left: 10px;
-    font-size: 0.8em;
-}
-</style>
-
 <script type="text/javascript">
 (function() {
 
-    function sortNodeList(nodeList,sortOn,sortOnSecond) {
+    var treeList;
-        var currentSort = nodeList.data('currentSort');
-        var currentSortOrder = nodeList.data('currentSortOrder');
 
-        if (!currentSort) {
-            currentSort = sortOn;
-            currentSortOrder = 'a';
-        } else {
-            if (currentSort === sortOn) {
-                currentSortOrder = (currentSortOrder === 'a'?'d':'a');
-            } else {
-                currentSortOrder = 'a';
-            }
-            currentSort = sortOn;
-        }
-        nodeList.data('currentSort',currentSort);
-        nodeList.data('currentSortOrder',currentSortOrder);
-
-        $("#node-input-link-container-div .fa").hide();
-        $(".node-input-link-sort-"+currentSort+"-"+currentSortOrder).show();
-
-
-        var items = nodeList.find("li").get();
-        items.sort(function(a,b) {
-            var labelA = $(a).find(".node-input-link-node-"+currentSort).text().toLowerCase();
-            var labelB = $(b).find(".node-input-link-node-"+currentSort).text().toLowerCase();
-            if (labelA < labelB) { return currentSortOrder==='a'?-1:1; }
-            if (labelA > labelB) { return currentSortOrder==='a'?1:-1; }
-
-            if (sortOnSecond) {
-                labelA = $(a).find(".node-input-link-node-"+sortOnSecond).text().toLowerCase();
-                labelB = $(b).find(".node-input-link-node-"+sortOnSecond).text().toLowerCase();
-                if (labelA < labelB) { return currentSortOrder==='a'?-1:1; }
-                if (labelA > labelB) { return currentSortOrder==='a'?1:-1; }
-            }
-            return 0;
-        });
-        $.each(items, function(i, li) {
-            nodeList.append(li);
-        });
-    }
     function onEditPrepare(node,targetType) {
         if (!node.links) {
             node.links = [];
         }
         node.oldLinks = [];
 
-        $('<div id="node-input-link-container-div" style="min-height: 100px;position: relative;   box-sizing: border-box; border-radius: 2px; height: 180px;  border: 1px solid #ccc;overflow:hidden; ">'+
+        var activeSubflow = RED.nodes.subflow(node.z);
-            '    <div style="box-sizing: border-box; line-height: 20px; font-size: 0.8em; border-bottom: 1px solid #ddd; height: 20px;">'+
-            '        <div style="display: inline-block;margin-left: 5px;"><a id="node-input-link-sort-label" href="#" data-i18n="[title]node-red:link.label.sortByLabel"><span data-i18n="node-red:link.label.node">name</span> <i class="node-input-link-sort-label-a fa fa-caret-down"></i><i class="node-input-link-sort-label-d fa fa-caret-up"></i></a></div>'+
-            '        <div style="position: absolute; right: 10px; width: 50px; display: inline-block; text-align: right;"><a id="node-input-link-sort-type" href="#" data-i18n="[title]node-red:link.label.sortByFlow"><i class="node-input-link-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-link-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="node-red:link.label.type">flow</span></a></div>'+
-            '    </div>'+
-            '    <div style="background: #fbfbfb; box-sizing: border-box; position:absolute; top:20px;bottom:0;left:0px;right:0px; overflow-y: scroll; overflow-x: hidden;">'+
-            '        <ul id="node-input-link-container" style=" list-style-type:none; margin: 0;"></ul>'+
-            '    </div>'+
-            '</div>').appendTo('.node-input-link-row');
 
-        var nodeList = $("#node-input-link-container");
+        treeList = $("<div>")
+            .css({width: "100%", height: "100%"})
+            .appendTo(".node-input-link-row")
+            .treeList({})
+            .on('treelistitemmouseover',function(e,item) {
+                if (item.node) {
+                    item.node.highlighted = true;
+                    item.node.dirty = true;
+                    RED.view.redraw();
+                }
+            })
+            .on('treelistitemmouseout',function(e,item) {
+                if (item.node) {
+                    item.node.highlighted = false;
+                    item.node.dirty = true;
+                    RED.view.redraw();
+                }
+            });
         var candidateNodes = RED.nodes.filterNodes({type:targetType});
-        var inSubflow = !!RED.nodes.subflow(node.z);
+
-        candidateNodes.forEach(function(n) {
+        var flows = [];
-            if (inSubflow) {
+        var flowMap = {};
-                if (n.z !== node.z) {
+
-                    return;
+        if (activeSubflow) {
-                }
+            flowMap[activeSubflow.id] = {
+                id: activeSubflow.id,
+                class: 'palette-header',
+                label:  "Subflow : "+(activeSubflow.name || activeSubflow.id),
+                expanded: true,
+                children: []
+            };
+            flows.push(flowMap[activeSubflow.id])
         } else {
-                if (!!RED.nodes.subflow(n.z)) {
+            RED.nodes.eachWorkspace(function(ws) {
-                    return;
+                flowMap[ws.id] = {
+                    id: ws.id,
+                    class: 'palette-header',
+                    label: (ws.label || ws.id),
+                    expanded: ws.id === node.z,
+                    children: []
                 }
+                flows.push(flowMap[ws.id])
+            })
         }
+
+        candidateNodes.forEach(function(n) {
+            if (flowMap[n.z]) {
                 var isChecked = false;
-
                 isChecked = (node.links.indexOf(n.id) !== -1) || (n.links||[]).indexOf(node.id) !== -1;
-
                 if (isChecked) {
                     node.oldLinks.push(n.id);
                 }
-
+                flowMap[n.z].children.push({
-            var container = $('<li/>',{class:"node-input-link-node"});
+                    id: n.id,
-            var row = $('<label/>',{for:"node-input-link-node-"+n.id}).appendTo(container);
+                    node: n,
-            $('<input>',{type:"checkbox",class:"node-input-link-node-checkbox",id:"node-input-link-node-"+n.id})
+                    label: n.name||n.id,
-                .data('node-id',n.id)
+                    selected: isChecked
-                .prop('checked', isChecked)
+                })
-                .appendTo(row);
-            container.on('mouseover',function(e) {
-                n.highlighted = true;
-                n.dirty = true;
-                RED.view.redraw();
-            });
-            container.on('mouseout',function(e) {
-                n.highlighted = false;
-                n.dirty = true;
-                RED.view.redraw();
-            });
-            var labelSpan = $('<span>');
-            var label = n.name||n.id;
-            var sublabel;
-            var tab = RED.nodes.workspace(n.z);
-            if (tab) {
-                sublabel = tab.label||tab.id;
-            } else {
-                tab = RED.nodes.subflow(n.z);
-                sublabel = "subflow : "+tab.name;
             }
-            $('<span>',{class:"node-input-link-node-label",style:"white-space:nowrap"}).text(label).appendTo(row);
-            if (sublabel) {
-                $('<span>',{class:"node-input-link-node-sublabel"}).text(sublabel).appendTo(row);
-            }
-            container.appendTo(nodeList);
-        });
-
-        sortNodeList(nodeList,'sublabel','label');
-
-        $("#node-input-link-sort-label").click(function(e) {
-            e.preventDefault();
-            sortNodeList(nodeList,'label');
-        });
-
-        $("#node-input-link-sort-type").click(function(e) {
-            e.preventDefault();
-            sortNodeList(nodeList,'sublabel');
         });
+        flows = flows.filter(function(f) { return f.children.length > 0 })
+        treeList.treeList('data',flows)
     }
 
     function resizeNodeList() {
@@ -182,16 +99,19 @@
         }
         var editorRow = $("#dialog-form>div.node-input-link-row");
         height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
-        $("#node-input-link-container-div").css("height",height+"px");
+        $(".node-input-link-row").css("height",height+"px");
     }
 
     function onEditSave(node) {
+        var flows = treeList.treeList('data');
         node.links = [];
-        $(".node-input-link-node-checkbox").each(function(n) {
+        flows.forEach(function(f) {
-            if ($(this).prop("checked")) {
+            f.children.forEach(function(n) {
-                node.links.push($(this).data('node-id'));
+                if (n.selected) {
+                    node.links.push(n.id);
                 }
-        });
+            })
+        })
         node.oldLinks.sort();
         node.links.sort();
         var nodeMap = {};

packages/node_modules/@node-red/nodes/locales/en-US/messages.json

@@ -138,14 +138,7 @@
     },
     "link": {
         "linkIn": "link in",
-        "linkOut": "link out",
+        "linkOut": "link out"
-        "label": {
-            "event": "Event name",
-            "node": "name",
-            "type": "flow",
-            "sortByFlow":"Sort by flow",
-            "sortByLabel": "Sort by name"
-        }
     },
     "tls": {
         "tls": "TLS configuration",

packages/node_modules/@node-red/nodes/locales/ja/messages.json

@@ -138,14 +138,7 @@
     },
     "link": {
         "linkIn": "link in",
-        "linkOut": "link out",
+        "linkOut": "link out"
-        "label": {
-            "event": "イベント名",
-            "node": "名前",
-            "type": "フロー",
-            "sortByFlow": "フロー名で並べ替え",
-            "sortByLabel": "名前で並べ替え"
-        }
     },
     "tls": {
         "tls": "TLS設定",

packages/node_modules/@node-red/nodes/locales/zh-CN/messages.json

@@ -135,14 +135,7 @@
     },
     "link": {
         "linkIn": "输入",
-        "linkOut": "输出",
+        "linkOut": "输出"
-        "label": {
-            "event": "事件名称",
-            "node": "节点名称",
-            "type": "流程",
-            "sortByFlow":"根据流程排序",
-            "sortByLabel": "根据名称排序"
-        }
     },
     "tls": {
         "tls": "TLS设置",