Question

Can I apply clipview to a vertical expanding Group? Time to time I’m appending text to a group and want to use scrollbar to navigate in that group. The scrollbar part is working when I assign it to the group itself but want to limit the size of the group by using clipview.

Anyone having experience in this?

Answer 1

The clipview basically just creates a view portal into its content. Here is a simple example. (You would need to handle the clipY properly when clip.maxY is < scene.height).

var group = VBox { };
var ndx:Integer = 0;
def cv : ClipView = ClipView {
    pannable: false
    node: group
    width: bind scene.width - sb.layoutBounds.width
    height: bind scene.height
};
var scene: Scene;
var sb: ScrollBar;
Stage {
    title: "ClipView Test"
    scene: scene = Scene {
        width: 250
        height: 80
        content: [
            cv,
            Rectangle {
                layoutX: bind scene.width - sb.layoutBounds.width - 50
                width: 50
                height: 50
                fill: Color.RED
                onMouseClicked: function(e) {
                    insert Text { content: "Text - {ndx++}" } into group.content;
                    if(cv.maxClipY > scene.height) {
                        cv.clipY = cv.maxClipY;
                    }
                }
            }
            sb = ScrollBar {
                vertical: true
                layoutX: bind scene.width - sb.layoutBounds.width
                height: bind scene.height
                min: 0
                max: bind cv.maxClipY
                value: bind cv.clipY with inverse
            }

        ]
    }
}