Need help with creating a custom widget

[MohammadAboulEla]

hi @rgthree I hope you see my message and help me, I was reading your code for hours to learn how to create custom widgets for comfyUI, I made this custom widget that can draw two widget on same row

export class RgthreeDoubleTextWidget {
    constructor(name1, value1, name2, value2) {
        this.name1 = name1;
        this.value1 = value1;
        this.name2 = name2;
        this.value2 = value2;
    }

    draw(ctx, node, width, y, height) {
        const halfWidth = width / 2;
         const margin = 15;
        // Draw the first text widget
        const widgetData1 = drawNodeWidget(ctx, { width: halfWidth, height, posY: y, posX:0 });
        if (!widgetData1.lowQuality) {
            drawLabelAndValue(ctx, this.name1, this.value1, halfWidth, y, 0, height);
        }

        // Draw the second text widget (on the same row, second half)
        const widgetData2 = drawNodeWidget(ctx, { width: halfWidth + margin, height, posY: y, posX: halfWidth - margin});
        if (!widgetData2.lowQuality) {
            drawLabelAndValue(ctx, this.name2, this.value2, halfWidth + margin, y, halfWidth - margin , height);
        }
    }

    mouse(event, pos, node) {
        const canvas = app.canvas;
        const halfWidth = node.size[0] / 2;

        // Handle pointerdown for the first text widget
        if (event.type === "pointerdown" && pos[0] < halfWidth) {
            canvas.prompt("Label 1", this.value1, (v) => (this.value1 = v), event);
            return true;
        }

        // Handle pointerdown for the second text widget
        if (event.type === "pointerdown" && pos[0] >= halfWidth) {
            canvas.prompt("Label 2", this.value2, (v) => (this.value2 = v), event);
            return true;
        }

        return false;
    }
}

also I edited this to add posX

export function drawNodeWidget(ctx, options) {
    const lowQuality = isLowQuality();
    const data = {
        width: options.width,
        height: options.height,
        posY: options.posY,
        posX: options.posX,
        lowQuality,
        margin: 15,
        colorOutline: LiteGraph.WIDGET_OUTLINE_COLOR,
        colorBackground: LiteGraph.WIDGET_BGCOLOR,
        colorText: LiteGraph.WIDGET_TEXT_COLOR,
        colorTextSecondary: LiteGraph.WIDGET_SECONDARY_TEXT_COLOR,
    };
    ctx.strokeStyle = options.colorStroke || data.colorOutline;
    ctx.fillStyle = options.colorBackground || data.colorBackground;
    ctx.beginPath();
    ctx.roundRect(data.margin + data.posX, data.posY, data.width - data.margin * 2, data.height, lowQuality ? [0] : options.borderRadius ? [options.borderRadius] : [options.height * 0.5]);
    ctx.fill();
    if (!lowQuality) {
        ctx.stroke();
    }
    return data;
}

finally I got it worked

now I need help to send their values back to the python class of that node, and I as I can see your sending them through
the optional parameters with FlexibleOptionalInputType(any_type) but I do not know where exactly and how you pass them, any help?
I miss this step