Flashing pause button

[chris87423]

Would it be possible to make the pause button flash instead the node header? That way i would be able to see the button flash when it is a widget of a subgraph:

[chris87423]

In the meantime i have found a solution with help of chatgpt, it works but be aware of ai slop.

Replace enteringPauseLoopHandler() and leavingPauseLoopHandler() in async-pause.js

const AsyncPauseBlink = (() => {
    const DEFAULT_BLINK_COLOR = "#0b8ce9";
    const PADDING = 15;

    function normalizeHex(hex) {
        if (!hex) return DEFAULT_BLINK_COLOR;
        hex = hex.replace("#", "");
        if (hex.length === 3) {
            hex = hex.split("").map(c => c + c).join("");
        }
        return `#${hex}`;
    }

    function getLuminance(hex) {
        const n = parseInt(hex.slice(1), 16);
        const r = ((n >> 16) & 0xff) / 255;
        const g = ((n >> 8) & 0xff) / 255;
        const b = (n & 0xff) / 255;
        const toLinear = v =>
            v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
        return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
    }

    function getContrastTextColor(bgHex) {
        return getLuminance(bgHex) > 0.179 ? "#000000" : "#FFFFFF";
    }

    function findRootSubgraphNode(node) {
        let n = node;
        while (n.graph && n.graph.parentNode) {
            n = n.graph.parentNode;
        }
        return n;
    }

    function forceRedraw(node, subgraphNode) {
        node.setDirtyCanvas?.(true, true);
        node.graph?.setDirtyCanvas?.(true, true);
        subgraphNode?.setDirtyCanvas?.(true, true);
        app.canvas?.setDirty(true);
    }

    return {
        PADDING,
        normalizeHex,
        getContrastTextColor,
        findRootSubgraphNode,
        forceRedraw,
        DEFAULT_BLINK_COLOR
    };
})();

function enteringPauseLoopHandler(event) {
    const node = getEnodeFromPauseEvent(event);
    if (!node) return;
    if (!app.extensionManager.setting.get("AsyncPause.Blink")) return;

    const widget = node.widgets?.find(w => w.name === "continue");
    if (!widget) return;

    // Prevent duplicate intervals
    if (node._blinkInterval) return;

    const blinkColor = AsyncPauseBlink.normalizeHex(
        app.extensionManager.setting.get("AsyncPause.BlinkingColor")
    );

    const textColor = AsyncPauseBlink.getContrastTextColor(blinkColor);
    const subgraphNode = AsyncPauseBlink.findRootSubgraphNode(node);
    const intervalMs =
        app.extensionManager.setting.get("AsyncPause.BlinkingInterval");

    let on = true;

    // Store state
    node._blinkState = {
        subgraphNode,
        originalDraw: widget.draw,
        originalLabel: widget.label
    };

    // ---------- CUSTOM DRAW ----------
    widget.draw = function (ctx, node, widgetWidth, y, height) {
        ctx.save();

        const x = AsyncPauseBlink.PADDING;
        const w = widgetWidth - AsyncPauseBlink.PADDING * 2;

        ctx.fillStyle = on ? blinkColor : "#222222";
        ctx.strokeStyle = "#555555";
        ctx.lineWidth = 1.5;

        ctx.beginPath();
        ctx.rect(x, y, w, height);
        ctx.fill();
        ctx.stroke();

        ctx.fillStyle = on ? textColor : "#ffffff";
        ctx.font = "14px sans-serif";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(widget.label || "continue", x + w / 2, y + height / 2);

        ctx.restore();
    };

    // ---------- BLINK LOOP ----------
    node._blinkInterval = setInterval(() => {
        on = !on;
        AsyncPauseBlink.forceRedraw(node, subgraphNode);
    }, intervalMs);
}

function leavingPauseLoopHandler(event) {
    const node = getEnodeFromPauseEvent(event);
    if (!node) return;
    if (!app.extensionManager.setting.get("AsyncPause.Blink")) return;

    clearInterval(node._blinkInterval);
    node._blinkInterval = null;

    const widget = node.widgets?.find(w => w.name === "continue");
    if (widget && node._blinkState) {
        widget.draw = node._blinkState.originalDraw;
        widget.label = node._blinkState.originalLabel ?? "continue";
    }

    delete node._blinkState;

    node.setDirtyCanvas?.(true, true);
    node.graph?.setDirtyCanvas?.(true, true);
    app.canvas?.setDirty(true);
}

[vilanele]

Unlike nodes—which provide direct access to properties like color, bgcolor, and fgcolor—widgets do not expose their DOM elements or style properties through the API. ChatGPT’s approach, which overrides the widget’s draw method and renders directly on the canvas, works but feels hacky, harder to maintain, and is targeted at the legacy node canvas display.

I’ve implemented a solution that leverages the node.addDOMWidget API to create a button widget that faithfully mirrors the built-in button in every respect. It integrates seamlessly and, by using the appropriate CSS variables, automatically adapts to theme changes. It works smoothly on my side. Could you please test it in version 1.2.0 and let me know if it behaves correctly, particularly with theme switching?

Edit: I should also mention that my button mimics the Nodes 2.0 button. I noticed in your first post that you’re using the legacy node display. Please enable Nodes 2.0 when testing. While the solution works in both modes, the button will appear differently in the legacy display.

[chris87423]

Thank you, It works perfectly in nodes 2.0.

Without nodes 2.0 the only issue i found is that if i add widgets after the continue button they are all anchored to the bottom of the node.

A simple fix that i found is to replace:

node.addDOMWidget('continue', 'custom', dom_flashing_btn);

with:

const w = node.addDOMWidget('continue', 'custom', dom_flashing_btn);
w.computeSize = () => [node.size[0], 34];

Now the gap is gone and it looks the same in nodes 2.0 and legacy.