@vitormnm/node-red-simple-opcua 1.0.2 → 1.1.0

package/client/opcua-client.html

@@ -0,0 +1,1225 @@
+<style>
+    body.opcua-tree-modal-open {
+        overflow: hidden;
+    }
+
+    .opcua-tree-editor {
+        width: 100%;
+        min-height: 120px;
+        border: 1px solid var(--red-ui-form-input-border-color, #d9d9d9);
+        background: var(--red-ui-form-input-background, #fff);
+        border-radius: 4px;
+        overflow: auto;
+    }
+
+    .opcua-tree-row {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        min-height: 24px;
+        padding: 2px 6px;
+        font-size: 12px;
+        border-bottom: 1px solid transparent;
+    }
+
+    .opcua-tree-row:hover {
+        background: var(--red-ui-list-item-background-hover, #f3f7fd);
+    }
+
+    .opcua-tree-row.is-selected {
+        background: var(--red-ui-list-item-background-selected, #d9ecff);
+        color: var(--red-ui-list-item-color-selected, inherit);
+    }
+
+    .opcua-tree-indent { flex: 0 0 auto; width: 14px; }
+    .opcua-tree-twisty { width: 16px; text-align: center; color: #777; flex: 0 0 16px; cursor: pointer; }
+    .opcua-tree-icon { width: 14px; text-align: center; color: #777; flex: 0 0 14px; }
+    .opcua-tree-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .opcua-tree-type { color: #777; font-size: 11px; flex: 0 0 auto; }
+
+    .opcua-tree-title {
+        min-width: 100px;
+        font-weight: 600;
+        color: #444;
+    }
+
+    .opcua-client-nodeid-label {
+        margin-left: auto;
+        text-align: right;
+        word-break: break-all;
+        max-width: 320px;
+        color: #777;
+        font-size: 12px;
+    }
+
+    .opcua-tree-actions {
+        margin-left: auto;
+        display: flex;
+        gap: 6px;
+        align-items: center;
+    }
+
+    .opcua-tree-empty {
+        padding: 14px;
+        border: 1px dashed #d9d9d9;
+        border-radius: 4px;
+        background: #fafafa;
+        color: #777;
+        text-align: center;
+    }
+
+    .opcua-client-json {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .opcua-client-tag-box {
+        width: 100%;
+        min-height: 70px;
+    }
+
+    .opcua-client-tag-chip {
+        display: grid;
+        grid-template-columns: 18px 1fr auto;
+        grid-template-areas:
+            "icon name name"
+            "icon write right";
+        column-gap: 8px;
+        row-gap: 6px;
+        align-items: center;
+        border: 1px solid #d9d9d9;
+        border-radius: 4px;
+        background: #fafafa;
+        padding: 6px 8px;
+        margin-bottom: 6px;
+    }
+    .opcua-client-tag-chip .opcua-tree-icon { grid-area: icon; }
+    .opcua-client-tag-chip .opcua-tree-title { grid-area: name; min-width: 0; }
+    .opcua-client-tag-right {
+        grid-area: right;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+    .opcua-client-tag-right .opcua-client-nodeid-label {
+        margin: 0;
+        max-width: 320px;
+    }
+    .opcua-client-tag-right .opcua-tree-actions {
+        margin: 0;
+    }
+
+    .opcua-client-tag-chip-meta,
+    .opcua-client-description {
+        color: #777;
+        font-size: 12px;
+    }
+    .opcua-client-tag-write {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        width: 100%;
+        margin-top: 0;
+        margin-left: 0;
+        grid-area: write;
+    }
+    .opcua-client-tag-write input {
+        font-size: 12px;
+    }
+    .opcua-client-tag-write input {
+        flex: 1 1 auto;
+        min-width: 120px;
+    }
+    .opcua-client-tag-write .red-ui-typedInput-container {
+        flex: 1 1 auto;
+        min-width: 220px;
+        width: 100% !important;
+    }
+    .opcua-client-tag-write .red-ui-typedInput-container input.red-ui-typedInput-input {
+        width: calc(100% - 92px);
+        min-width: 120px;
+    }
+
+    .opcua-client-load-row {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+    }
+
+    .opcua-client-load-row input {
+        flex: 1 1 auto;
+    }
+
+    .opcua-tree-search {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        width: 100%;
+        padding: 6px 10px;
+        border: 1px solid #d9d9d9;
+        border-radius: 6px;
+        background: #fafafa;
+    }
+
+    .opcua-tree-search input {
+        flex: 1 1 auto;
+        min-width: 120px;
+        border: 0;
+        outline: 0;
+        background: transparent;
+        box-shadow: none;
+        margin: 0;
+    }
+
+    .opcua-tree-modal {
+        position: fixed;
+        inset: 0;
+        z-index: 2000;
+        background: rgba(0, 0, 0, 0.45);
+        padding: 24px;
+        box-sizing: border-box;
+    }
+
+    .opcua-tree-modal__dialog {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        background: #f3f3f3;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    }
+
+    .opcua-tree-modal__header,
+    .opcua-tree-modal__toolbar {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 10px;
+        padding: 14px 18px;
+        background: #fff;
+        border-bottom: 1px solid #d9d9d9;
+    }
+
+    .opcua-tree-modal__title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+    }
+
+    .opcua-tree-modal__header .editor-button-small {
+        margin-left: auto;
+    }
+
+    .opcua-tree-modal__body {
+        flex: 1 1 auto;
+        overflow: auto;
+        padding: 18px;
+    }
+
+    .opcua-tree-context-menu {
+        position: fixed;
+        z-index: 2200;
+        min-width: 170px;
+        background: #fff;
+        border: 1px solid #d9d9d9;
+        border-radius: 6px;
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
+        padding: 6px 0;
+    }
+
+    .opcua-tree-context-menu a {
+        display: block;
+        padding: 7px 12px;
+        color: #333;
+        text-decoration: none;
+        font-size: 12px;
+    }
+
+    .opcua-tree-context-menu a:hover {
+        background: #f3f7fd;
+    }
+</style>
+
+<script type="text/javascript">
+    (function () {
+        var selectedItemsState = [];
+        var browseState = null;
+        var expansionState = {};
+        var browseSearchValue = "";
+        var browseSearchTerm = "";
+        var contextMenuPath = "";
+        var browseSelectedPath = "";
+
+        function openBrowseModal() { $("#node-input-browse-modal").show(); $("body").addClass("opcua-tree-modal-open"); }
+        function closeBrowseModal() {
+            hideTreeContextMenu();
+            $("#node-input-browse-modal").hide();
+            $("body").removeClass("opcua-tree-modal-open");
+        }
+
+        function getBrowseCacheKey() {
+            var connectionId = $("#node-input-connection").val() || "";
+            if (!connectionId) return "";
+            return "opcua-client-browse-cache:" + connectionId;
+        }
+
+        function saveBrowseSession() {
+            var key = getBrowseCacheKey();
+            if (!key || !window.sessionStorage) return;
+            try {
+                sessionStorage.setItem(key, JSON.stringify({
+                    browseState: browseState,
+                    expansionState: expansionState
+                }));
+            } catch (error) {}
+        }
+
+        function loadBrowseSession() {
+            var key = getBrowseCacheKey();
+            if (!key || !window.sessionStorage) return false;
+            try {
+                var raw = sessionStorage.getItem(key);
+                if (!raw) return false;
+                var parsed = JSON.parse(raw);
+                if (!parsed || typeof parsed !== "object") return false;
+                browseState = parsed.browseState && typeof parsed.browseState === "object" ? parsed.browseState : null;
+                expansionState = parsed.expansionState && typeof parsed.expansionState === "object" ? parsed.expansionState : {};
+                return !!browseState;
+            } catch (error) {
+                return false;
+            }
+        }
+
+        function parseSelectedItems(rawValue) {
+            if (!rawValue) {
+                return [];
+            }
+
+            try {
+                var parsed = JSON.parse(rawValue);
+                if (!Array.isArray(parsed)) {
+                    return [];
+                }
+
+                return parsed
+                    .filter(function (item) {
+                        return item && typeof item === "object" && !Array.isArray(item);
+                    })
+                    .map(function (item) {
+                        return {
+                            name: typeof item.name === "string" ? item.name.trim() : "",
+                            nodeID: typeof (item.nodeID || item.nodeId) === "string" ? String(item.nodeID || item.nodeId).trim() : "",
+                            type: typeof (item.type || item.dataType) === "string" ? String(item.type || item.dataType).trim() : "",
+                            nodeClass: typeof item.nodeClass === "string" ? item.nodeClass.trim() : "",
+                            typeDefinition: typeof (item.typeDefinition || item.typeDefinitionName) === "string" ? String(item.typeDefinition || item.typeDefinitionName).trim() : "",
+                            hasTypeDefinition: item.hasTypeDefinition && typeof item.hasTypeDefinition === "object" ? item.hasTypeDefinition : null,
+                            valueProperty: typeof item.valueProperty === "string" && item.valueProperty.trim() ? item.valueProperty.trim() : "payload",
+                            valuePropertyType: (item.valuePropertyType === "msg" || item.valuePropertyType === "flow" || item.valuePropertyType === "global") ? item.valuePropertyType : "msg"
+                        };
+                    })
+                    .filter(function (item) {
+                        return !!item.nodeID;
+                    });
+            } catch (error) {
+                return [];
+            }
+        }
+
+        function serializeSelectedItems(items) {
+            return JSON.stringify(items.map(function (item) {
+                var result = {
+                    name: item.name || item.nodeID,
+                    nodeID: item.nodeID
+                };
+
+                if (item.type) {
+                    result.type = item.type;
+                }
+                if (item.nodeClass) {
+                    result.nodeClass = item.nodeClass;
+                }
+                if (item.typeDefinition) {
+                    result.typeDefinition = item.typeDefinition;
+                }
+                if (item.hasTypeDefinition) {
+                    result.hasTypeDefinition = item.hasTypeDefinition;
+                }
+                if (item.valueProperty) {
+                    result.valueProperty = item.valueProperty;
+                }
+                if (item.valuePropertyType) {
+                    result.valuePropertyType = item.valuePropertyType;
+                }
+
+                return result;
+            }), null, 2);
+        }
+
+        function escapeHtml(value) {
+            return String(value || "").replace(/[&<>"']/g, function (char) {
+                return {
+                    "&": "&amp;",
+                    "<": "&lt;",
+                    ">": "&gt;",
+                    '"': "&quot;",
+                    "'": "&#39;"
+                }[char];
+            });
+        }
+
+        function updateSelectedItemsField() {
+            $("#node-input-selectedItems").val(serializeSelectedItems(selectedItemsState));
+        }
+
+        function normalizeSearchTerm(value) {
+            return String(value || "").trim().toLowerCase();
+        }
+
+        function textForSearch(item) {
+            if (!item || typeof item !== "object") return "";
+            return [
+                item.name,
+                item.displayName,
+                item.browseName,
+                item.nodeID,
+                item.nodeClass,
+                item.dataType,
+                item.description
+            ].filter(Boolean).join(" ").toLowerCase();
+        }
+
+        function nodeMatchesSearch(item, term) {
+            if (!term) return true;
+            return textForSearch(item).indexOf(term) >= 0;
+        }
+
+        function branchHasSearchMatch(item, term) {
+            if (nodeMatchesSearch(item, term)) return true;
+            if (!item || !Array.isArray(item.browse)) return false;
+            for (var i = 0; i < item.browse.length; i += 1) {
+                if (branchHasSearchMatch(item.browse[i], term)) return true;
+            }
+            return false;
+        }
+
+        function renderSelectedTags() {
+            var container = $("#node-input-selected-tags");
+            container.empty();
+            var writeMode = $("#node-input-mode").val() === "write";
+
+            if (!selectedItemsState.length) {
+                container.append('<div class="opcua-tree-empty">No tags selected.</div>');
+                return;
+            }
+
+            selectedItemsState.forEach(function (item, index) {
+                var row = $('<div class="opcua-client-tag-chip"></div>');
+                var icon = browseIconFor(item);
+                row.append('<div class="opcua-tree-icon"><i class="fa ' + icon + '"></i></div>');
+                row.append('<div class="opcua-tree-title">' + escapeHtml(item.name || item.nodeID) + '</div>');
+                if (writeMode) {
+                    var type = (item.valuePropertyType === "flow" || item.valuePropertyType === "global") ? item.valuePropertyType : "msg";
+                    var prop = item.valueProperty || "payload";
+                    row.append('<div class="opcua-client-tag-write">'
+                        + '<input type="text" class="opcua-client-item-value-prop" id="opcua-client-item-value-prop-' + index + '" data-index="' + index + '" value="' + escapeHtml(prop) + '" placeholder="payload">'
+                        + '<input type="hidden" class="opcua-client-item-value-type" id="opcua-client-item-value-type-' + index + '" data-index="' + index + '" value="' + escapeHtml(type) + '">'
+                        + "</div>");
+                }
+                row.append('<div class="opcua-client-tag-right">'
+                    + '<div class="opcua-client-nodeid-label">' + escapeHtml(item.nodeID) + '</div>'
+                    + '<div class="opcua-tree-actions"><a href="#" class="editor-button editor-button-small opcua-client-remove-tag" data-index="' + index + '"><i class="fa fa-trash"></i></a></div>'
+                    + "</div>");
+                container.append(row);
+            });
+            initializeSelectedItemTypedInputs();
+        }
+
+        function initializeSelectedItemTypedInputs() {
+            $(".opcua-client-item-value-prop").each(function () {
+                var input = $(this);
+                var index = Number(input.attr("data-index"));
+                var typeField = "#opcua-client-item-value-type-" + index;
+                if (input.data("typedInputInitialized")) {
+                    input.typedInput("types", ["msg", "flow", "global"]);
+                    return;
+                }
+
+                input.typedInput({
+                    type: $(typeField).val() || "msg",
+                    types: ["msg", "flow", "global"],
+                    typeField: typeField
+                });
+                input.data("typedInputInitialized", true);
+            });
+        }
+
+        function syncSelectedItems() {
+            updateSelectedItemsField();
+            renderSelectedTags();
+            renderBrowseTree();
+        }
+
+        function isExpanded(path, defaultValue) {
+            if (expansionState[path] === undefined) {
+                expansionState[path] = !!defaultValue;
+            }
+
+            return expansionState[path];
+        }
+
+        function selectedIndexByNodeId(nodeId) {
+            return selectedItemsState.findIndex(function (item) {
+                return item.nodeID === nodeId;
+            });
+        }
+
+        function canExpand(item) {
+          //  return item && item.nodeClass !== "Variable" && item.nodeClass !== "Method";
+              return item && item.nodeClass !== "Variable"
+        }
+
+        function isVariable(item) {
+            return String(item && item.nodeClass || "").toLowerCase() === "variable";
+        }
+
+        function nodeIdOf(item) {
+            return item && (item.nodeID || item.nodeId) ? String(item.nodeID || item.nodeId) : "";
+        }
+
+        function loadBrowse(nodeId) {
+            var connectionId = $("#node-input-connection").val();
+            if (!connectionId) {
+                RED.notify("Select an OPC UA connection before browsing.", "warning");
+                return $.Deferred().reject().promise();
+            }
+
+            return $.getJSON("opcua-client-config/" + encodeURIComponent(connectionId) + "/browse", {
+                nodeId: nodeId || "i=84"
+            });
+        }
+
+        function renderBrowseTree() {
+            var container = $("#node-input-browse-tree");
+            container.empty();
+
+            if (!browseState) {
+                container.append('<div class="opcua-tree-empty">Click Browse to load the server tree.</div>');
+                return;
+            }
+
+            if (browseSearchTerm) {
+                if (!branchHasSearchMatch(browseState, browseSearchTerm)) {
+                    container.append('<div class="opcua-tree-empty">No items found in the already explored items.</div>');
+                    return;
+                }
+                renderBrowseRootFiltered(browseState, "root", 0, container, browseSearchTerm);
+                return;
+            }
+
+            renderBrowseRoot(browseState, "root", 0, container);
+        }
+
+        function isFolderNode(item) {
+            if (!item) return false;
+            var nodeClass = String(item.nodeClass || "");
+            var typeDefinition = String(item.typeDefinition || item.typeDefinitionName || "").toLowerCase();
+            var hasTypeDefinitionBrowseName = String(
+                item.hasTypeDefinition && item.hasTypeDefinition.browseName || ""
+            ).toLowerCase();
+            var explicitType = String(item.type || item.kind || "").toLowerCase();
+            if (nodeClass === "Folder") return true;
+            if (hasTypeDefinitionBrowseName === "foldertype") return true;
+            if (typeDefinition.indexOf("folder") >= 0) return true;
+            if (explicitType === "folder") return true;
+            return false;
+        }
+
+        function browseIconFor(item) {
+            var nodeClass = String((item && item.nodeClass) || "");
+            if (isFolderNode(item)) return "fa-folder";
+            if (nodeClass === "Object") return "fa-cube";
+            if (nodeClass === "Method") return "fa-cog";
+            if (nodeClass === "Variable") return "fa-tag";
+            if (nodeClass === "ObjectType") return "fa-cubes";
+            if (nodeClass === "View") return "fa-eye";
+            if (nodeClass === "DataType") return "fa-database";
+            if (nodeClass === "ReferenceType") return "fa-random";
+            return "fa-tag";
+        }
+
+        function renderBrowseRoot(root, path, depth, container) {
+            var expanded = isExpanded(path, true);
+            var row = $('<div class="opcua-tree-row"></div>').attr("data-path", path);
+            row.append('<span class="opcua-tree-indent"></span>');
+            row.append('<span class="opcua-tree-twisty opcua-client-toggle-tree" data-path="' + path + '">' + (expanded ? '<i class="fa fa-caret-down"></i>' : '<i class="fa fa-caret-right"></i>') + '</span>');
+            row.append('<span class="opcua-tree-icon"><i class="fa fa-sitemap"></i></span>');
+            row.append('<span class="opcua-tree-label">' + escapeHtml(root.name || root.nodeID || "RootFolder") + '</span>');
+            row.append('<span class="opcua-tree-type">' + escapeHtml(root.nodeID || "") + '</span>');
+            container.append(row);
+
+            if (!expanded) return;
+
+            if (!Array.isArray(root.browse) || !root.browse.length) {
+                container.append('<div class="opcua-tree-empty">No items found..</div>');
+            } else {
+                root.browse.forEach(function (item, index) {
+                    renderBrowseItem(item, path + ".browse." + index, depth + 1, container);
+                });
+            }
+        }
+
+        function renderBrowseItem(item, path, depth, container) {
+            var expanded = isExpanded(path, false);
+            var nodeId = nodeIdOf(item);
+            var selectedIndex = selectedIndexByNodeId(nodeId);
+            var hasChildren = canExpand(item);
+            var row = $('<div class="opcua-tree-row"></div>').attr("data-path", path);
+            if (selectedIndex >= 0) row.addClass("is-selected");
+
+            for (var i = 0; i < depth; i += 1) {
+                row.append('<span class="opcua-tree-indent"></span>');
+            }
+            row.append('<span class="opcua-tree-twisty' + (hasChildren ? ' opcua-client-toggle-tree' : '') + '" data-path="' + path + '">' + (hasChildren ? '<i class="fa ' + (expanded ? 'fa-caret-down' : 'fa-caret-right') + '"></i>' : '') + '</span>');
+            row.append('<span class="opcua-tree-icon"><i class="fa ' + browseIconFor(item) + '"></i></span>');
+            row.append('<span class="opcua-tree-label">' + escapeHtml(item.displayName || item.browseName || item.nodeID) + '</span>');
+            row.append('<span class="opcua-tree-type">' + escapeHtml(item.nodeClass || "") + (item.dataType ? " | " + escapeHtml(item.dataType) : "") + '</span>');
+            row.append('<span class="opcua-client-nodeid-label">' + escapeHtml(nodeId) + '</span>');
+
+            if (nodeId) {
+                var actionLabel = selectedIndex >= 0 ? "Remove" : "Add";
+                var actionIcon = selectedIndex >= 0 ? "fa-minus" : "fa-plus";
+                row.append('<div class="opcua-tree-actions"><a href="#" class="editor-button editor-button-small opcua-client-toggle-tag" data-nodeid="' + escapeHtml(nodeId) + '" data-path="' + path + '"><i class="fa ' + actionIcon + '"></i> ' + actionLabel + '</a></div>');
+            }
+            container.append(row);
+
+            if (item.description) {
+                container.append('<div class="opcua-client-description" style="padding: 0 10px 8px ' + String((depth + 2) * 14) + 'px;">' + escapeHtml(item.description) + '</div>');
+            }
+
+            if (expanded && hasChildren) {
+                if (Array.isArray(item.browse)) {
+                    if (!item.browse.length) {
+                        container.append('<div class="opcua-tree-empty">No children found..</div>');
+                    } else {
+                        item.browse.forEach(function (child, index) {
+                            renderBrowseItem(child, path + ".browse." + index, depth + 1, container);
+                        });
+                    }
+                } else {
+                    container.append('<div class="opcua-tree-empty">Searching for items...</div>');
+                }
+            }
+        }
+
+        function renderBrowseRootFiltered(root, path, depth, container, term) {
+            var row = $('<div class="opcua-tree-row"></div>').attr("data-path", path);
+            row.append('<span class="opcua-tree-indent"></span>');
+            row.append('<span class="opcua-tree-twisty"><i class="fa fa-caret-down"></i></span>');
+            row.append('<span class="opcua-tree-icon"><i class="fa fa-sitemap"></i></span>');
+            row.append('<span class="opcua-tree-label">' + escapeHtml(root.name || root.nodeID || "RootFolder") + '</span>');
+            row.append('<span class="opcua-tree-type">' + escapeHtml(root.nodeID || "") + '</span>');
+            container.append(row);
+
+            if (!Array.isArray(root.browse) || !root.browse.length) {
+                container.append('<div class="opcua-tree-empty">Nenhum item encontrado.</div>');
+                return;
+            }
+
+            root.browse.forEach(function (item, index) {
+                if (branchHasSearchMatch(item, term)) {
+                    renderBrowseItemFiltered(item, path + ".browse." + index, depth + 1, container, term, false);
+                }
+            });
+        }
+
+        function renderBrowseItemFiltered(item, path, depth, container, term, ancestorMatched) {
+            if (!branchHasSearchMatch(item, term)) return;
+
+            var nodeId = nodeIdOf(item);
+            var selectedIndex = selectedIndexByNodeId(nodeId);
+            var hasChildren = canExpand(item);
+            var subtreeVisible = !!ancestorMatched || nodeMatchesSearch(item, term);
+            var hasMatchingLoadedChild = hasChildren && Array.isArray(item.browse) && item.browse.some(function (child) {
+                return branchHasSearchMatch(child, term);
+            });
+            var hasExplicitExpansion = expansionState[path] !== undefined;
+            var expanded = hasChildren && (hasExplicitExpansion
+                ? !!expansionState[path]
+                : ((subtreeVisible && Array.isArray(item.browse)) || hasMatchingLoadedChild));
+            var row = $('<div class="opcua-tree-row"></div>').attr("data-path", path);
+            if (selectedIndex >= 0) row.addClass("is-selected");
+
+            for (var i = 0; i < depth; i += 1) row.append('<span class="opcua-tree-indent"></span>');
+            row.append('<span class="opcua-tree-twisty' + (hasChildren ? ' opcua-client-toggle-tree' : '') + '" data-path="' + path + '">' + (hasChildren ? '<i class="fa ' + (expanded ? 'fa-caret-down' : 'fa-caret-right') + '"></i>' : '') + '</span>');
+            row.append('<span class="opcua-tree-icon"><i class="fa ' + browseIconFor(item) + '"></i></span>');
+            row.append('<span class="opcua-tree-label">' + escapeHtml(item.displayName || item.browseName || item.nodeID) + '</span>');
+            row.append('<span class="opcua-tree-type">' + escapeHtml(item.nodeClass || "") + (item.dataType ? " | " + escapeHtml(item.dataType) : "") + '</span>');
+            row.append('<span class="opcua-client-nodeid-label">' + escapeHtml(nodeId) + '</span>');
+
+            if (nodeId) {
+                var actionLabel = selectedIndex >= 0 ? "Remove" : "Add";
+                var actionIcon = selectedIndex >= 0 ? "fa-minus" : "fa-plus";
+                row.append('<div class="opcua-tree-actions"><a href="#" class="editor-button editor-button-small opcua-client-toggle-tag" data-nodeid="' + escapeHtml(nodeId) + '" data-path="' + path + '"><i class="fa ' + actionIcon + '"></i> ' + actionLabel + '</a></div>');
+            }
+            container.append(row);
+
+            if (item.description) {
+                container.append('<div class="opcua-client-description" style="padding: 0 10px 8px ' + String((depth + 2) * 14) + 'px;">' + escapeHtml(item.description) + '</div>');
+            }
+
+            if (expanded && hasChildren) {
+                if (Array.isArray(item.browse)) {
+                    if (!item.browse.length) {
+                        container.append('<div class="opcua-tree-empty">Nenhum filho encontrado.</div>');
+                    } else {
+                        item.browse.forEach(function (child, index) {
+                            if (subtreeVisible || branchHasSearchMatch(child, term)) {
+                                renderBrowseItemFiltered(child, path + ".browse." + index, depth + 1, container, term, subtreeVisible);
+                            }
+                        });
+                    }
+                } else {
+                    container.append('<div class="opcua-tree-empty">Expandindo...</div>');
+                }
+            }
+        }
+
+        function getItemAtPath(path) {
+            var tokens = String(path || "").split(".");
+            var current = browseState;
+
+            for (var index = 0; index < tokens.length; index += 1) {
+                var token = tokens[index];
+                if (!token || token === "root") {
+                    continue;
+                }
+
+                if (!current) {
+                    return null;
+                }
+
+                if (/^\d+$/.test(token)) {
+                    current = current[Number(token)];
+                } else {
+                    current = current[token];
+                }
+            }
+
+            return current || null;
+        }
+
+        function addSelectedItem(item) {
+            var normalized = {
+                name: item.displayName || item.browseName || item.name || item.nodeID,
+                nodeID: item.nodeID || item.nodeId,
+                type: item.dataType || item.type || "",
+                nodeClass: item.nodeClass || "",
+                typeDefinition: item.typeDefinition || item.typeDefinitionName || "",
+                hasTypeDefinition: item.hasTypeDefinition || null,
+                valueProperty: item.valueProperty || "payload",
+                valuePropertyType: item.valuePropertyType || "msg"
+            };
+            var currentIndex = selectedIndexByNodeId(normalized.nodeID);
+
+            if (currentIndex >= 0) {
+                selectedItemsState[currentIndex] = normalized;
+            } else {
+                selectedItemsState.push(normalized);
+            }
+
+            syncSelectedItems();
+        }
+
+        function removeSelectedItemByIndex(index) {
+            selectedItemsState.splice(index, 1);
+            syncSelectedItems();
+        }
+
+        function toggleSelectedNode(path) {
+            var item = getItemAtPath(path);
+            var nodeId = nodeIdOf(item);
+            if (!item || !nodeId) {
+                return;
+            }
+
+            var currentIndex = selectedIndexByNodeId(nodeId);
+            if (currentIndex >= 0) {
+                selectedItemsState.splice(currentIndex, 1);
+            } else {
+                addSelectedItem(item);
+                return;
+            }
+
+            syncSelectedItems();
+        }
+
+        function refreshBrowseRoot() {
+            var rootNodeId = "i=84";
+            var container = $("#node-input-browse-tree");
+            container.html('<div class="opcua-tree-empty">Carregando...</div>');
+
+            loadBrowse(rootNodeId).done(function (payload) {
+                browseState = payload;
+                expansionState = { root: true };
+                saveBrowseSession();
+                renderBrowseTree();
+            }).fail(function (xhr) {
+                var message = xhr && xhr.responseJSON && xhr.responseJSON.error
+                    ? xhr.responseJSON.error
+                    : "Falha ao navegar no servidor OPC UA.";
+                browseState = null;
+                container.html('<div class="opcua-tree-empty">' + escapeHtml(message) + '</div>');
+                RED.notify(message, "error");
+            });
+        }
+
+        function hideTreeContextMenu() {
+            contextMenuPath = "";
+            $("#node-input-browse-context-menu").hide();
+        }
+
+        function showTreeContextMenu(x, y, path) {
+            var menu = $("#node-input-browse-context-menu");
+            var item = getItemAtPath(path);
+            contextMenuPath = path || "";
+            $("#node-input-browse-context-refresh").toggle(!!item && !isVariable(item));
+            $("#node-input-browse-context-copy-nodeid").toggle(!!nodeIdOf(item));
+            menu.css({ left: x + "px", top: y + "px" }).show();
+        }
+
+        function copyNodeIdFromPath(path) {
+            var item = getItemAtPath(path);
+            var nodeId = nodeIdOf(item);
+            if (!nodeId) {
+                RED.notify("NodeID nao encontrado para o item selecionado.", "warning");
+                return;
+            }
+
+            if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
+                navigator.clipboard.writeText(nodeId).then(function () {
+                    RED.notify("NodeID copiado.", "success");
+                }).catch(function () {
+                    RED.notify("Falha ao copiar NodeID.", "error");
+                });
+                return;
+            }
+
+            var input = $("<textarea readonly></textarea>").val(nodeId).css({
+                position: "fixed",
+                left: "-9999px",
+                top: "0"
+            });
+            $("body").append(input);
+            input[0].select();
+            try {
+                document.execCommand("copy");
+                RED.notify("NodeID copiado.", "success");
+            } catch (error) {
+                RED.notify("Falha ao copiar NodeID.", "error");
+            }
+            input.remove();
+        }
+
+        function setBrowseSelectedPath(path) {
+            browseSelectedPath = path || "";
+            $(".opcua-tree-row").removeClass("is-selected");
+            if (browseSelectedPath) {
+                $('.opcua-tree-row[data-path="' + browseSelectedPath + '"]').addClass("is-selected");
+            }
+        }
+
+        function refreshNode(path) {
+            if (!path) {
+                return;
+            }
+            if (path === "root") {
+                refreshBrowseRoot();
+                return;
+            }
+
+            var item = getItemAtPath(path);
+            if (!item || isVariable(item)) {
+                return;
+            }
+
+            // Force a new discovery using the same lazy-load flow from expand.
+            item.browse = undefined;
+            expansionState[path] = true;
+            saveBrowseSession();
+            renderBrowseTree();
+            expandNode(path);
+        }
+
+        function expandNode(path) {
+            var item = getItemAtPath(path);
+            if (!item || !canExpand(item)) {
+                return;
+            }
+
+            if (isExpanded(path, false) && !Array.isArray(item.browse)) {
+                renderBrowseTree();
+            } else {
+                expansionState[path] = !isExpanded(path, false);
+                saveBrowseSession();
+                if (!expansionState[path]) {
+                    renderBrowseTree();
+                    return;
+                }
+            }
+
+            if (Array.isArray(item.browse)) {
+                renderBrowseTree();
+                return;
+            }
+
+            renderBrowseTree();
+            var browseNodeId = item.nodeID || item.nodeId;
+            loadBrowse(browseNodeId).done(function (payload) {
+                item.browse = Array.isArray(payload.browse) ? payload.browse : [];
+                saveBrowseSession();
+                renderBrowseTree();
+            }).fail(function (xhr) {
+                expansionState[path] = false;
+                saveBrowseSession();
+                renderBrowseTree();
+                var message = xhr && xhr.responseJSON && xhr.responseJSON.error
+                    ? xhr.responseJSON.error
+                    : "Falha ao expandir o node.";
+                RED.notify(message, "error");
+            });
+        }
+
+        function toggleModeFields() {
+            var isSubscription = $("#node-input-mode").val() === "subscription" || $("#node-input-mode").val() === "events";
+            var supportsSelection = $("#node-input-mode").val() !== "method" && $("#node-input-mode").val() !== "getSubscriptionId" ;
+            $(".opcua-client-subscription-row").toggle(isSubscription);
+            $(".opcua-client-selection-row").toggle(supportsSelection);
+            renderSelectedTags();
+        }
+
+        RED.nodes.registerType("opcua-client", {
+            category: "network",
+            color: "#d9edf7",
+            defaults: {
+                name: { value: "" },
+                connection: { value: "", type: "opcua-client-config", required: true },
+                mode: { value: "read", required: true },
+                selectedItems: {
+                    value: "[]",
+                    validate: function (value) {
+                        try {
+                            return Array.isArray(JSON.parse(value || "[]"));
+                        } catch (error) {
+                            return false;
+                        }
+                    }
+                },
+                samplingInterval: {
+                    value: 250,
+                    validate: RED.validators.number()
+                },
+                publishingInterval: {
+                    value: 250,
+                    validate: RED.validators.number()
+                }
+            },
+            inputs: 1,
+            outputs: 1,
+            icon: "bridge.svg",
+            label: function () {
+                return this.name || "opcua-client";
+            },
+            oneditprepare: function () {
+                $("#node-input-selectedItems").typedInput({
+                    type: "json",
+                    types: ["json"]
+                });
+
+                selectedItemsState = parseSelectedItems(this.selectedItems);
+
+                browseState = null;
+                expansionState = {};
+                browseSelectedPath = "";
+                browseSearchValue = "";
+                browseSearchTerm = "";
+                $("#node-input-browse-search").val("");
+                $("#node-input-browse-search-clear").hide();
+                loadBrowseSession();
+                syncSelectedItems();
+                renderBrowseTree();
+
+                $("#node-input-mode").off("change").on("change", toggleModeFields);
+                $("#node-input-browse-root").off("click").on("click", function (event) {
+                    event.preventDefault();
+                    refreshBrowseRoot();
+                });
+                $("#node-input-open-browse-modal").off("click").on("click", function (event) {
+                    event.preventDefault();
+                    openBrowseModal();
+                });
+                $("#node-input-close-browse-modal").off("click").on("click", function (event) {
+                    event.preventDefault();
+                    closeBrowseModal();
+                });
+                $("#node-input-browse-modal").off("click").on("click", function (event) {
+                    hideTreeContextMenu();
+                    if (event.target === this) closeBrowseModal();
+                });
+                $("#node-input-browse-search").off("input").on("input", function () {
+                    browseSearchValue = $(this).val();
+                    browseSearchTerm = normalizeSearchTerm(browseSearchValue);
+                    $("#node-input-browse-search-clear").toggle(!!browseSearchTerm);
+                    renderBrowseTree();
+                });
+                $("#node-input-browse-search-clear").off("click").on("click", function (event) {
+                    event.preventDefault();
+                    browseSearchValue = "";
+                    browseSearchTerm = "";
+                    $("#node-input-browse-search").val("");
+                    $(this).hide();
+                    renderBrowseTree();
+                });
+                $("#node-input-connection").off("change.opcuaClientBrowse").on("change.opcuaClientBrowse", function () {
+                    browseState = null;
+                    expansionState = {};
+                    browseSelectedPath = "";
+                    loadBrowseSession();
+                    renderBrowseTree();
+                });
+                $(document).off("keydown.opcuaClientBrowseModal").on("keydown.opcuaClientBrowseModal", function (event) {
+                    hideTreeContextMenu();
+                    if (event.key === "Escape") closeBrowseModal();
+                });
+
+                toggleModeFields();
+            },
+            oneditsave: function () {
+                updateSelectedItemsField();
+                saveBrowseSession();
+                closeBrowseModal();
+                $(document).off("keydown.opcuaClientBrowseModal");
+            }
+            ,
+            oneditcancel: function () {
+                closeBrowseModal();
+                $(document).off("keydown.opcuaClientBrowseModal");
+            }
+        });
+
+        $(document).on("change", "#node-input-selectedItems", function () {
+            selectedItemsState = parseSelectedItems($(this).val());
+            renderSelectedTags();
+            renderBrowseTree();
+        });
+
+        $(document).on("click", ".opcua-client-remove-tag", function (event) {
+            event.preventDefault();
+            removeSelectedItemByIndex(Number($(this).attr("data-index")));
+        });
+
+        $(document).on("click", ".opcua-client-toggle-tag", function (event) {
+            event.preventDefault();
+            toggleSelectedNode($(this).attr("data-path"));
+        });
+
+        $(document).on("click", ".opcua-client-toggle-tree", function (event) {
+            event.preventDefault();
+            expandNode($(this).attr("data-path"));
+        });
+        $(document).on("change", ".opcua-client-item-value-type", function () {
+            var index = Number($(this).attr("data-index"));
+            if (!selectedItemsState[index]) return;
+            selectedItemsState[index].valuePropertyType = $(this).val();
+            updateSelectedItemsField();
+        });
+        $(document).on("change input", ".opcua-client-item-value-prop", function () {
+            var index = Number($(this).attr("data-index"));
+            if (!selectedItemsState[index]) return;
+            selectedItemsState[index].valueProperty = $(this).typedInput ? $(this).typedInput("value") : $(this).val();
+            var typeField = $("#opcua-client-item-value-type-" + index);
+            selectedItemsState[index].valuePropertyType = (typeField.val() || "msg");
+            updateSelectedItemsField();
+        });
+
+        $(document).on("click", ".opcua-tree-row", function (event) {
+            if ($(event.target).closest(".opcua-client-toggle-tree, .opcua-client-toggle-tag, .opcua-tree-actions, #node-input-browse-context-menu").length) {
+                return;
+            }
+            setBrowseSelectedPath($(this).attr("data-path"));
+        });
+
+        $(document).on("contextmenu", ".opcua-tree-row", function (event) {
+            var clickedPath = $(this).attr("data-path");
+            if (clickedPath) {
+                setBrowseSelectedPath(clickedPath);
+            }
+            var path = browseSelectedPath || clickedPath;
+            var item = getItemAtPath(path);
+            if (!item) {
+                hideTreeContextMenu();
+                return;
+            }
+
+            event.preventDefault();
+            showTreeContextMenu(event.clientX, event.clientY, path);
+        });
+
+        $(document).on("click", "#node-input-browse-context-refresh", function (event) {
+            event.preventDefault();
+            var highlightedPath = $(".opcua-tree-row.is-selected").first().attr("data-path") || "";
+            var path = contextMenuPath || browseSelectedPath || highlightedPath || "";
+            hideTreeContextMenu();
+            refreshNode(path);
+        });
+
+        $(document).on("click", "#node-input-browse-context-copy-nodeid", function (event) {
+            event.preventDefault();
+            var highlightedPath = $(".opcua-tree-row.is-selected").first().attr("data-path") || "";
+            var path = contextMenuPath || browseSelectedPath || highlightedPath || "";
+            hideTreeContextMenu();
+            copyNodeIdFromPath(path);
+        });
+
+        $(document).on("click", function (event) {
+            if (!$(event.target).closest("#node-input-browse-context-menu").length) {
+                hideTreeContextMenu();
+            }
+        });
+    })();
+</script>
+
+<script type="text/html" data-template-name="opcua-client">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-input-name" placeholder="opcua-client">
+    </div>
+    <div class="form-row">
+        <label for="node-input-connection"><i class="fa fa-server"></i> Connection</label>
+        <input type="text" id="node-input-connection">
+    </div>
+    <div class="form-row">
+        <label for="node-input-mode"><i class="fa fa-exchange"></i> Mode</label>
+        <select id="node-input-mode">
+            <option value="read">Read</option>
+            <option value="write">Write</option>
+            <option value="browse">Browse</option>
+            <option value="method">Method</option>
+              <option value="getSubscriptionId">getSubscriptionId</option>
+            <option value="subscription">Subscription</option>
+             <option value="events">Events</option>
+        </select>
+    </div>
+    <div class="form-row opcua-client-selection-row">
+        <label for="node-input-selectedItems"><i class="fa fa-code"></i> JSON</label>
+        <input type="text" id="node-input-selectedItems" class="opcua-client-json" style="width: 70%;">
+    </div>
+    <div class="form-row opcua-client-selection-row">
+        <label style="width:auto;"><i class="fa fa-sitemap"></i> Browse Tree</label>
+        <a href="#" id="node-input-open-browse-modal" class="editor-button"><i class="fa fa-expand"></i> Open browse tree</a>
+    </div>
+    <div id="node-input-browse-modal" class="opcua-tree-modal" style="display:none;">
+        <div class="opcua-tree-modal__dialog">
+            <div class="opcua-tree-modal__header">
+                <div class="opcua-tree-modal__title"><i class="fa fa-sitemap"></i> OPC UA Browse Tree</div>
+                <a href="#" id="node-input-close-browse-modal" class="editor-button editor-button-small"><i class="fa fa-times"></i> Close</a>
+            </div>
+            <div class="opcua-tree-modal__toolbar">
+                <a href="#" id="node-input-browse-root" class="editor-button editor-button-small"><i class="fa fa-search"></i> Browse Root</a>
+                <div class="opcua-tree-search">
+                    <i class="fa fa-search"></i>
+                    <input type="text" id="node-input-browse-search" placeholder="Search for items already explored">
+                    <a href="#" id="node-input-browse-search-clear" class="editor-button editor-button-small" style="display:none;"><i class="fa fa-times"></i></a>
+                </div>
+            </div>
+            <div class="opcua-tree-modal__body">
+                <div id="node-input-browse-tree" class="opcua-tree-editor"></div>
+            </div>
+        </div>
+        <div id="node-input-browse-context-menu" class="opcua-tree-context-menu" style="display:none;">
+            <a href="#" id="node-input-browse-context-refresh"><i class="fa fa-refresh"></i> Refresh node</a>
+            <a href="#" id="node-input-browse-context-copy-nodeid"><i class="fa fa-copy"></i> Copy NodeID</a>
+        </div>
+    </div>
+    <div class="form-row opcua-client-subscription-row">
+        <label for="node-input-samplingInterval"><i class="fa fa-clock-o"></i> Sampling</label>
+        <input type="text" id="node-input-samplingInterval" placeholder="250">
+    </div>
+    <div class="form-row opcua-client-subscription-row">
+        <label for="node-input-publishingInterval"><i class="fa fa-clock-o"></i> Publishing</label>
+        <input type="text" id="node-input-publishingInterval" placeholder="250">
+    </div>
+    <div class="form-row opcua-client-selection-row" style="margin-bottom:0;">
+        <label style="width:auto;"><i class="fa fa-tags"></i> Selected items</label>
+    </div>
+    <div class="form-row opcua-client-selection-row">
+        <label style="width:auto;"></label>
+        <div id="node-input-selected-tags" class="opcua-client-tag-box"></div>
+    </div>
+
+
+    
+</script>
+
+<script type="text/html" data-help-name="opcua-client">
+    <p>Unified OPC UA client node for read, write, browse and subscription using a shared client configuration node.</p>
+
+    <h3>Modes</h3>
+    <p><b>Read</b>: reads one or more variable values.</p>
+    <p><b>Write</b>: writes one or more variable values.</p>
+    <p><b>Browse</b>: browses one or more OPC UA nodes and returns their children.</p>
+    <p><b>Method</b>: calls one or more OPC UA methods.</p>
+    <p><b>Subscription</b>: subscribes to one or more variable values and emits one message per change.</p>
+
+    <h3>Read</h3>
+    <p><b>Input</b> <code>msg.payload</code>:</p>
+    <pre><code>[
+  {
+    "name": "status",
+    "nodeID": "ns=2;s=Factory.Line1.Motor1.status"
+  }
+]</code></pre>
+    <p>If <code>msg.payload</code> is not an array and <code>NodeId</code> is configured, the node reads that configured node.</p>
+
+    <h3>Write</h3>
+    <p><b>Input</b> <code>msg.payload</code>:</p>
+    <pre><code>[
+  {
+    "name": "speed",
+    "nodeID": "ns=2;s=Factory.Line1.Motor1.speed",
+    "value": 25.5,
+    "type": "Float"
+  }
+]</code></pre>
+
+    <h3>Browse</h3>
+    <p>If <code>msg.payload</code> is not an array and <code>NodeId</code> is configured, the node browses that configured node.</p>
+    <p>If <code>msg.payload = []</code>, the node browses the OPC UA <code>RootFolder</code>.</p>
+
+    <h3>Method</h3>
+    <p><code>methodId</code> and <code>objectId</code> are accepted explicitly. For backward compatibility, <code>nodeID</code> is also accepted as the method id.</p>
+    <p><b>Input</b> <code>msg.payload</code>:</p>
+    <pre><code>[
+    {
+        "name": "method1",
+        "nodeID": "ns=2;s=motor.method1",
+        "inputs": [
+            {
+                "name": "input1",
+                "type": "Int32",
+                "value": 1
+            },
+            {
+                "name": "input2",
+                "type": "Int32",
+                "value": 1
+            }
+        ]
+    },
+
+ 
+]</code></pre>
+    <h3>Subscription</h3>
+    <p>In subscription mode the node emits one message per value change.</p>
+</script>