@vitormnm/node-red-simple-opcua 1.3.2 → 1.4.1

package/client/opcua-client.html

@@ -1,1094 +1,6 @@
-<style>
-    body.opcua-tree-modal-open {
-        overflow: hidden;
-    }
+<link rel="stylesheet" type="text/css" href="opcua-client-resource/style.css">
 
-    .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/javascript" src="opcua-client-resource/script.js"></script>
 
 <script type="text/html" data-template-name="opcua-client">
     <div class="form-row">
@@ -1111,14 +23,11 @@
              <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">
@@ -1142,6 +51,14 @@
             <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-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 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">
@@ -1150,6 +67,7 @@
         <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>
@@ -1158,8 +76,6 @@
         <div id="node-input-selected-tags" class="opcua-client-tag-box"></div>
     </div>
 
-
-    
 </script>
 
 <script type="text/html" data-help-name="opcua-client">
@@ -1198,7 +114,7 @@
     <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><code>nodeID</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>[
     {
@@ -1222,4 +138,4 @@
 ]</code></pre>
     <h3>Subscription</h3>
     <p>In subscription mode the node emits one message per value change.</p>
-</script>
+</script>