processcube.apptemplate/apps/lowcode/src/resources/focusExternalTask.js

A AppTemplate for a App build with and for the ProcessCube Plattform

var focusExternalTask = function(params) {
    'use strict';
    
    var hasTriedFocus = false;
    var externalTaskTopic = params.externalTaskTopic;
            
    
    if (!externalTaskTopic || hasTriedFocus) return;
        
    hasTriedFocus = true;
    console.log("Versuche ExternalTasks zu fokussieren:", externalTaskTopic);
    
    setTimeout(function() {
        var externalTaskInputNodes = RED.nodes.filterNodes({type: "externaltask-input"});
        var matchingNode = externalTaskInputNodes.find(node => node.topic === externalTaskTopic);
        focusNode(matchingNode.id);
    }, 500);
    
    
    // Funktion zum Fokussieren eines Nodes
    function focusNode(nodeId) {
        // Suche den Node
        var node = RED.nodes.node(nodeId);
        
        if (!node) {
            console.warn("Node nicht gefunden:", nodeId);
            RED.notify("Node '" + nodeId + "' nicht gefunden", "warning", false, 3000);
            return;
        }
        
        // Wechsle zum richtigen Tab/Flow
        if (node.z) {
            RED.workspaces.show(node.z);
        }
        
        // Warte kurz, damit der Workspace gewechselt werden kann
        setTimeout(function() {
            try {
                // Selektiere den Node zuerst
                RED.view.select({nodes: [node]});
                RED.view.reveal(node.id,false);
                
                // Hole Chart-Element
                var chart = $("#red-ui-workspace-chart");
                if (!chart.length) {
                    console.error("Chart-Element nicht gefunden");
                    return;
                }
                
                var chartWidth = chart.width();
                var chartHeight = chart.height();
                var scale = RED.view.scale();
                
                // Berechne neue Scroll-Position um Node zu zentrieren
                var newScrollLeft = (node.x * scale) - (chartWidth / 2);
                var newScrollTop = (node.y * scale) - (chartHeight / 2);
                
                // Scrolle zur berechneten Position
                chart.animate({
                    scrollLeft: newScrollLeft,
                    scrollTop: newScrollTop
                }, 400, function() {
                    // Nach dem Scrolling: Highlight
                    highlightNode(node);
                });

                RED.notify(`External task mit dem Topic '${node.topic}' fokussiert.`, "success", false, 2000);
                
            } catch(e) {
                console.error("Fehler beim Fokussieren:", e);
                RED.notify("Fehler beim Fokussieren des Nodes", "error", false, 3000);
            }
        }, 400);
    }
    
    // Visuelles Highlight für den fokussierten Node
    function highlightNode(node) {
        const nodeId = node.id;
        var nodeElement = document.getElementById(nodeId);
        if (nodeElement) {
            // Füge temporäre Highlight-Klasse hinzu
            nodeElement.classList.add('node-highlight');
            
            // Entferne Highlight nach 2 Sekunden
            setTimeout(function() {
                nodeElement.classList.remove('node-highlight');
                RED.view.select({nodes: [node]});
            }, 2000);
        }
    }
};