Adding fixed position elements to scrollable container

[dtturcotte]

Hello, thank you for your last feature addition of strikethrough.

I need to add a bunch of circles (this.scene.add.circle(xPos, yPos, radius, 0x000000)) to a scrollablePanel and be able to scroll vertically from top to bottom. The circles will be arranged in sort of a zig-zag wave from top to bottom. As of now, it seems to add elements to a "scrollable" container, I need to add a sizer, which seems to arrange elements itself even if I set their x, y. To get around this, I added the elements to a container first, then set the size of the container, then added the container to the sizer. This worked, but the scrollable panel shows the elements starting from the bottom.

Code snippet:

                let circleContainer = this.scene.add.container(0, 0)
        let rightScrollablePanel = this.addScrollablePanel((this.width / 2) + 80, 290, 250, 250)

                 // Right container
        let radius = 15
        let circles = 20 // Number of circles
        let swayRange = 50 // Range of the sway from center
        let yPos = 0 // Start from the top
        let xPos = 0 // Start from the left
        let phase = 0 // Initial phase for sine wave
        let phaseStep = Math.PI / 10 // Change in phase for each step, adjust for more/less winding

        for (let i = 0; i < 20; i++) {
            // Calculate xPos using a sine wave
            xPos = swayRange * Math.sin(phase)

            // Create a circle at xPos, yPos
            let circle = this.scene.add.circle(xPos, yPos, radius, 0x000000)

            // Add the circle to the container
            circleContainer.add(circle)

            // Move yPos down for next circle
            yPos += radius * 2.5

            // Update phase
            phase += phaseStep
        }

        circleContainer.setSize(swayRange * 2, circles * radius * 2.5)

        var sizer = rightScrollablePanel.getElement('panel')
        sizer.clear(true)

        sizer.add(circleContainer)

        rightScrollablePanel.layout()

Adding of the scrollablePanel:

    addScrollablePanel(x: number, y: number, width: number, height: number) {
        let that = this

        // @ts-ignore
        return this.scene.rexUI.add
            .scrollablePanel({
                x,
                y,
                width: width,
                height: height,

                scrollMode: 0,
                // @ts-ignore
                // background: that.scene.rexUI.add.roundRectangle(0, 0, 2, 2, 10, COLOR_LIGHT),

                anchor: 'top',
                panel: {
                    // @ts-ignore
                    child: that.scene.rexUI.add.sizer({
                        x: 0,
                        y: 0,
                        orientation: 'y',
                        space: {
                            left: 3,
                            right: 3,
                            top: 3,
                            bottom: 3,
                            item: 8,
                            line: 8,
                        },
                    }),

                    mask: {
                        padding: 1,
                    },
                },

                slider: {
                    track: that.scene.rexUI.add.roundRectangle(0, 0, 10, 7, 7, COLOR_DARK),
                    thumb: that.scene.rexUI.add.roundRectangle(0, 0, 0, 0, 10, COLOR_LIGHT),
                },

                mouseWheelScroller: {
                    focus: false,
                    speed: 0.1,
                },

                space: {
                    left: 10,
                    right: 10,
                    top: 10,
                    bottom: 55,
                    panel: 10,
                },
            })
            .layout()
    }

Top of box:

After scrolling down:

[rexrainbow]

From code of 1st part -- put circles into container. After drawing bounds of container, you can see that circles are starting at center of container (Origin of container is fixed to 0.5x0.5) Might set xPos, yPos to -circleContainer.width/2, -circleContainer.height/2. However, size of container still can't overlap all circles.

[dtturcotte]

"(Origin of container is fixed to 0.5x0.5)", but Phaser.GameObject.Container's xOrigin and yOrigin are readonly, and there's no setOrigin() on this object.

And for "Might set xPos, yPos to -circleContainer.width/2, -circleContainer.height/2.", are you setting this on the rightScrollablePanel (e.g., rightScrollablePanel.setPosition(-circleContainer.width / 2, -circleContainer.height / 2))?

If it's too difficult to add the circles to a container first, is it possible to just add the circles to the rightScrollablePanel's sizer at a x,y determined by me?

[rexrainbow]

sizer is extended from containerLite, which has pin method, for pinning child without layout it (not add method). However, the pinning position is not the same as built-in container. For example, a containerLite at (400, 300), adds a child which at (400, 400), then position of child won't change, the related position is (0, 100). You can change origin of sizer/containerLite to (0,0), before adding child.

[rexrainbow]

BTW, you can still use sizer's add method, assign the padding.left to zig-zag wave

[dtturcotte]

BTW, you can still use sizer's add method, assign the padding.left to zig-zag wave

So this would be instead of adding the circles to a circleContainer? I would add the circles directly to the sizer, then use sizer's padding left to change direction?

---

EDIT: this seemed to work! I had completely forgot about using padding for this.

---

EDIT2: The sizer (red border) seems out of alignment with its containing scrollablePanel (black border). sizer's x,y is set at 0,0. Do you know why this might be?

[rexrainbow]

Can't get the point of EDIT2, could you describe more detail? Might add more texts on image, like where is scrollablePanel (black border)?

[dtturcotte]

Actually, all set! Thank you.