Function createWidget

comfyui/visualization.js:30–105

(node, app)

}

function createWidget(node, app) {
    const widget = {
        type: "StableFast3DViewer",
        name: "preview",
        callback: () => { },
        draw: function (ctx, node, widgetWidth, widgetY, widgetHeight) {
            const margin = 10;
            const top_offset = 5;
            const visible = app.canvas.ds.scale > 0.5;
            const w = widgetWidth - margin * 4;
            const clientRectBound = ctx.canvas.getBoundingClientRect();
            const transform = new DOMMatrix()
                .scaleSelf(
                    clientRectBound.width / ctx.canvas.width,
                    clientRectBound.height / ctx.canvas.height
                )
                .multiplySelf(ctx.getTransform())
                .translateSelf(margin, margin + widgetY);

            Object.assign(this.visualizer.style, {
                left: `${transform.a * margin + transform.e}px`,
                top: `${transform.d + transform.f + top_offset}px`,
                width: `${(w * transform.a)}px`,
                height: `${(w * transform.d - widgetHeight - (margin * 15) * transform.d)}px`,
                position: "absolute",
                overflow: "hidden",
                zIndex: app.graph._nodes.indexOf(node),
            });

            Object.assign(this.visualizer.children[0].style, {
                transformOrigin: "50% 50%",
                width: '100%',
                height: '100%',
                border: '0 none',
            });

            this.visualizer.hidden = !visible;
        },
    };

    const container = document.createElement('div');

    node.visualizer = new Visualizer(node, container);
    widget.visualizer = container;
    widget.parent = node;
    document.body.appendChild(widget.visualizer);
    node.addCustomWidget(widget);

    node.onDrawBackground = (ctx) => {
        node.visualizer.iframe.hidden = this.flags.collapsed;
    };

    node.onRemoved = () => {
        for (let w in node.widgets) {
            if (node.widgets[w].visualizer) {
                node.widgets[w].visualizer.remove();
            }
        }