Make overriding VirtualizedScrollpane's layoutChildren() more developer-friendly

[fxmisc]

Make overriding VirtualizedScrollpane's layoutChildren() more developer-friendly

[JordanMartinez]

As discussed in Pull Request 15, implementing the idea above does not adhere to composition over inheritance (See this article for more info).

So, to change the way that content is laid out, the content should be wrapped in some intermediate class that is then the content within VirtualizedScrollPane. For example...

Virtualized actualContent = // creation code
ScaledVirtualized wrapper = new ScaledVirtualized(actualContent);
VirtualizedScrollPane<ScaledVirtualized> vsPane = new VirtualizedScrollPane(wrapper);

where ScaledVirtualized scales actualContent when user scrolls up/down and the control key is presssed (written in Groovy):

class ScaledVirtualized<V extends Node & Virtualized> extends Region implements Virtualized {
    final V content
    Scale scale = new Scale(1, 1, 0, 0)

    ScaledVirtualized(V content) {
        super()
        this.content = content
        getChildren().add(content)
        getTransforms().add(scale)
        addEventFilter(ScrollEvent.SCROLL, { ScrollEvent event ->
            if (event.controlDown) {
                scale.with {
                    if (event.deltaY > 0) {
                        y *= 0.8
                        x *= 0.8
                    } else {
                        y /= 0.8
                        x /= 0.8
                    }
                }
                layoutChildren()
                event.consume()
            }
        })
    }

    @Override
    protected void layoutChildren() {
        double width = layoutBounds.width
        double height = layoutBounds.height
        content.resize(width / scale.x, height/ scale.y)
    }
    @Override
    Var<Double> estimatedScrollXProperty() {
        content.estimatedScrollXProperty()
    }
    @Override
    Var<Double> estimatedScrollYProperty() {
        content.estimatedScrollYProperty()
    }
    @Override
    Val<Double> totalHeightEstimateProperty() {
        content.totalHeightEstimateProperty()
    }
    @Override
    Val<Double> totalWidthEstimateProperty() {
        content.totalWidthEstimateProperty()
    }
}

[JordanMartinez]

After doing the above, I came across a small issue. When one "zooms the area out," so that the content's letters are very small and it fits inside the entire viewport, the scroll bars no longer need to be visible, but still are.

[JordanMartinez]

It's clear that I need to override the totalWidth/HeightEstimateProperties somehow. I'm still figuring out how to do it correctly.

Edit: Figured out how to fix scroll bar issue. For others who might want something similar, the following code will display scroll bars when needed regardless of scale value (written in Groovy):

class ScaledVirtualized<V extends Node & Virtualized> extends Region implements Virtualized {
    final V content
    Scale scale = new Scale(1, 1, 0, 0)
    Val<Double> estHeight
    Val<Double> estWidth
    Var<Double> estScrollY
    Var<Double> estScrollX

    ScaledVirtualized(V content) {
        super()
        this.content = content
        getChildren().add(content)
        getTransforms().add(scale)
        estHeight = Val.combine(
                content.totalHeightEstimateProperty(),
                scale.yProperty(),
                { estHeight, scaleFactor -> estHeight * scaleFactor }
        )
        estWidth = Val.combine(
                content.totalWidthEstimateProperty(),
                scale.xProperty(),
                { estWidth, scaleFactor -> estWidth * scaleFactor }
        )
        estScrollX = Var.mapBidirectional(
                content.estimatedScrollXProperty(),
                (Function) { double scrollX -> scrollX * scale.x },
                (Function) { double scrollX -> scrollX / scale.x }
        )
        estScrollY = Var.mapBidirectional(
                content.estimatedScrollYProperty(),
                (Function) { double scrollY -> scrollY * scale.y },
                (Function) { double scrollY -> scrollY / scale.y }
        )
        addEventFilter(ScrollEvent.SCROLL, { ScrollEvent event ->
            if (event.controlDown) {
                scale.with {
                    double factor = 0.9
                    if (event.deltaY > 0) {
                        y *= factor
                        x *= factor
                    } else {
                        y /= factor
                        x /= factor
                    }
                }
                layoutChildren()
                event.consume()
            }
        })
    }

    @Override
    protected void layoutChildren() {
        double width = layoutBounds.width
        double height = layoutBounds.height
        content.resize(width / scale.x, height/ scale.y)
    }
    @Override
    Var<Double> estimatedScrollXProperty() {
        estScrollX
    }
    @Override
    Var<Double> estimatedScrollYProperty() {
        estScrollY
    }
    @Override
    Val<Double> totalHeightEstimateProperty() {
        estHeight
    }
    @Override
    Val<Double> totalWidthEstimateProperty() {
        estWidth
    }
}

[TomasMikula]

Nice, I'm glad that it works!

[TomasMikula]

If you feel like it, you can contribute this ScaledVirtualized to Flowless. Maybe without the zooming by scroll functionality and with public scaleProperty(), so that anyone can control the scaling however they want.

[JordanMartinez]

Good point. That would actually be better since others would already have a base from which to extend or to implement other functionality specific to their needs.

I've created a PR for that in Flowless.