Skip to content

Groups' bounding boxes when .debug = true are incorrect when anchored #141

@anderoonies

Description

@anderoonies

Describe the bug
When a Group is anchored, the bounding box displayed with .debug = true isn't shifted.
This can be seen here: https://codehs.github.io/chs-js-lib/examples/groups/anchor/
image

Cause
This is a weird conflict between how Groups are Polygons are anchored. When Things have their bounding box drawn, the canvas translates to 0, 0 then draws the red box around the thing's bounds.
This is complicated by the fact that Groups' x,y is the top left corner of their bounds.

This bug was introduced in this commit: 68d2cca

Solution?
Making Groups' x, y position consider the Groups' anchors might fix this, but that would mean that the anchoring of the Group affects its position, which diverges from the rest of Things.
That could be changed by making a Group do:

    get x() {
        const bounds = this.getBounds();
        return bounds.left + (bounds.right - bounds.left) * this.anchor.horizontal;
    }

for example. Then the x, y is still independent of anchor, but bounds (which will be used for drawing the debug and maybe for other checks) will be properly calculated.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions