[Bug]: Widget padding when panel is enabled ([Beta] Use new menu and workflow management)

[AlekPet]

Frontend Version

v1.2.13

Expected Behavior

The widget fits into the node area

Actual Behavior

Left and top offset depending on option value

Steps to Reproduce

When the option is enabled with the value "Top", a left margin of 64px and a top margin of 35px is added, if the value is "Bottom", then only a left margin of 64px is added, if "DIsabled" all nice.

Debug Logs

Not required

Browser Logs

Not required

What browsers do you use to access the UI ?

Mozilla Firefox, Google Chrome

Other

Of course, i can attach something like this to the draw method widget, but maybe there is an easier way:

draw: function (ctx, _, widgetWidth, y, widgetHeight) {
    const margin = 10,
        left_offset = 8,
        top_offset = 50,
        visible = app.canvas.ds.scale > 0.6 && this.type === "painter_widget",
        w = widgetWidth - margin * 2 - 80,
        clientRectBound = ctx.canvas.getBoundingClientRect(),
        transform = new DOMMatrix()
          .scaleSelf(
            clientRectBound.width / ctx.canvas.width,
            clientRectBound.height / ctx.canvas.height
          )
          .multiplySelf(ctx.getTransform())
          .translateSelf(margin, margin + y);

    const menuNew = JSON.parse(localStorage.getItem("Comfy.Settings.Comfy.UseNewMenu")) ?? "Disabled";

    Object.assign(this.painter_wrap.style, {
        left: `${transform.a * margin * left_offset + transform.e + (menuNew && menuNew !== "Disabled" ? 64 : 0)}px`,
        top: `${transform.d + transform.f + top_offset + (menuNew === "Top" ? 35 : 0)}px`,
    });
// other code

[huchenlei]

You can call clientPosToCanvasPos to convert abs window position to canvas position.

https://github.com/Comfy-Org/ComfyUI_frontend/blob/02d7f91e9ebcee9c363836b8c7d2cbfc678ad032/src/scripts/app.ts#L2881-L2888

[huchenlei]

BTW, it is not recommended to do this offset calculation manually within the custom widget code. Using AddDOMWidget should automatically handle the sync with canvas position.

[huchenlei]

You can see how DOMWidget is used here: https://github.com/Comfy-Org/ComfyUI_frontend/blob/02d7f91e9ebcee9c363836b8c7d2cbfc678ad032/src/scripts/widgets.ts#L315-L334

[AlekPet]

Thank you. It's just that the code was created before the addDOMWidget function appeared. I'll see how I can fix it.

Fixed by adding to left and top draw method, ctx.canvas.getBoundingClientRect().left and ctx.canvas.getBoundingClientRect().top

Object.assign(this.openpose.style, {
left: `${transform.a * margin + transform.e + clientRectBound.left}px`,
top: `${transform.d + transform.f + clientRectBound.top}px`,
width: w + "px",
height: w / aspect_ratio + "px",
position: "absolute",
zIndex: app.graph._nodes.indexOf(node),
});