cables-gl / cables_docs

cables documentation docs.cables.gl
https://cables.gl/docs/docs
45 stars 16 forks source link

InteractiveRectangle pivotX and pivotY don't work properly #819

Open TobyKLight opened 3 months ago

TobyKLight commented 3 months ago

Link to simple, reproducible example patch https://cables.gl/p/fviatk

Describe the bug On the op InteractiveRectangle the pivotX and pivotY properties only work properly on center. They affect the geometry output but not the CSS output.

It looks like the divAlign property is used to transfer this data between functions Rebuild() and updateDivSize() In Rebuild() divAlign is only set for the center values and not for the top/bottom/left/right values

How To Reproduce

  1. Open https://cables.gl/p/fviatk
  2. Change the pivotX and pivotY properties. Notice the grey geometry rectangle moves but the actual css rectangle with red outline does not.

Platform Chrome 127 Win 11 on regular and dev cables

Proposed fix

There is a proposed bugfix version of the op in that demo patch

It replaces the code at line 87 with

if (pivotX.get() == "center")
    {
        x = 0;
        divAlign[0] = -w / 2;
    }
    if (pivotX.get() == "right")
    {
        x = -w / 2;
        divAlign[0] = -w;
    }
    if (pivotX.get() == "left")
    {
        x = w / 2;
        divAlign[0] = 0;
    }

    if (pivotY.get() == "center")
    {
        y = 0;
        divAlign[1] = -h / 2;
    }
    if (pivotY.get() == "top") 
    {
        y = -h / 2;
        divAlign[1] = -h;
    }
    if (pivotY.get() == "bottom")
    {
        y = +h / 2;
        divAlign[1] = 0;
    }