processcube.apptemplate/apps/lowcode/src/studio-plugin.html

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

<script type="text/javascript" src="resources/@5minds/node-red-contrib-processcube-studio-plugin/addExternalTask.js"></script>
<script type="text/javascript" src="resources/@5minds/node-red-contrib-processcube-studio-plugin/focusExternalTask.js"></script>
<script type="text/javascript" src="resources/@5minds/node-red-contrib-processcube-studio-plugin/addCustomForm.js"></script>


<script type="text/javascript">
(function() {
    // Speichere Query-Parameter SOFORT beim Laden, bevor Node-RED sie entfernt
    var params = null;
    var action = null;

    
    // Parse Query-Parameter aus URL (vor dem Hash)
    (function captureQueryParams() {
        var search = window.location.search;
        if (search) {
            const searchParams = new URLSearchParams(search);
            params = Object.fromEntries(searchParams.entries());
            action = searchParams.get('action');
        }
    })();

    RED.events.on("editor:open", function() {
        console.log("Editor geöffnet - Query-Parameter:", params ? Object.fromEntries(params) : null);
    });
    
    // Plugin-Definition für Node-RED Editor
    RED.plugins.registerPlugin("studio-plugin", {
        type: "studio-plugin",
        
        onadd: function() {
            console.log("Studio Plugin initialisiert");
            
            var hasExecutedAction = false;

            RED.studio = {
                actions: {
                    focusExternalTask: focusExternalTask,
                    addExternalTask: addExternalTask,
                    addCustomForm: addCustomForm
                }
            };

            const actionFunction = RED.studio.actions[action];

            RED.comms.subscribe("studio-plugin.actions", function(topic, msg) {
                console.log(`Message ${JSON.stringify(msg)} received from backend`);
                const actionFunction = RED.studio.actions[msg.action];
                if (actionFunction) {
                    actionFunction(msg.params);
                } else {
                    console.warn("Unbekannte Aktion:", msg.action);
                }
            });

            //Event-Listener für Workspace-Änderungen
            RED.events.on("workspace:change", function() {
                console.log("Workspace geändert");
                if (!hasExecutedAction) {
                    setTimeout(() => {
                        if (actionFunction) {
                            actionFunction(params);
                        }
                    }, 500); // Verzögerung, um sicherzustellen, dass der Editor bereit ist
                    hasExecutedAction = true;
                }
            });
            
        }
    });
})();
</script>

<style>
.node-highlight {
    animation: pulse 0.5s ease-in-out 4;
}

@keyframes pulse {
    0%, 100% {
        filter: drop-shadow(0 0 0 rgba(255, 165, 0, 0));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(255, 165, 0, 1)) drop-shadow(0 0 25px rgba(255, 165, 0, 0.5));
    }
}
</style>