Canvas does not render in ScrollContainer

[polarmutex]

Expected Behavior

I would expect canvas widgets to display in a scroll container

Current Behavior

Scroll Container is empty, and see no calls in the implementation draw functions

Steps to reproduce

Below is a code sample I am using to see the bug, I am currently trying to track it down, but could use some pointers on where to look

`
self.main_window = toga.MainWindow(title=self.name)

self.canvas = toga.Canvas(style=Pack(flex=1))
with self.canvas.stroke() as stroker:
with stroker.closed_path(50, 50) as closer:
closer.line_to(100, 100)
closer.line_to(100, 50)
self.right_content = toga.Box(
children=[self.canvas],
style=Pack(direction=COLUMN, padding_top=50)
)

self.right_container = toga.ScrollContainer()
self.right_container.content = self.right_content

self.main_window.content = self.right_container
self.main_window.show()
`

Your Environment

• Python Version (list the specific version number)
  3

• Operating System and Version (select from the following and list the specific version number; if your OS is not listed, list that as well)

  • macOS - version:
  • Linux - distro: - version:
  • Windows - version:
  • Other - name: - version:

• Toga Target (the type of app you are trying to generate)

  • android
  • cocoa
  • django
  • gtk
  • iOS
  • tvOS
  • watchOS
  • winforms
  • win32
  • Other (please specify)

[poke1024]

Canvas inside scrollcontainer works for me on macOS 10.14:

demo4.py.zip

[Bobw147]

Not working on mac os Cataline 10.15.3 with this code

import toga

from toga import App as TogaApp
from toga import Box
from toga import Canvas
from toga import MainWindow
from toga import ScrollContainer

from toga.style import Pack
from toga.style.pack import COLUMN

class ScrollContainerTest(TogaApp):

def startup(self):

    self.main_window = MainWindow(title=self.formal_name)

    canvas = toga.Canvas(style=Pack(flex=1))
    box = toga.Box(style=Pack(flex=1), children=[canvas])
    with canvas.context() as sketcher:
        with sketcher.fill() as fill:
            fill.arc(50, 50, 15)

    scroll_container = ScrollContainer(style=Pack(flex=1), content=box)
    self.main_window.content = scroll_container
    self.main_window.show()

def main():
return ScrollContainerTest('Scroll Container', 'org.beeware.helloworld')

if name == "main":
main().main_loop()

[Bobw147]

After further investigation I found that it is necessary to set the height and width of the Box container in order to reveal the canvas.

[freakboy3742]

Ok - this is starting to make sense.

The Canvas widget currently sets it's hint size to it's fitting size - which is the size of the view, which is, by default, 0x0. The box containing it then has a size of 0x0 (because it will shrink to be as small as possible, and the scrollbox then has no size.

If you manually set the size on the canvas, the problem goes away because the box will then wrap the canvas's specified size, and the scrollview has something to display.

Another fix is to modify the rehint() method of the canvas to return a minimum size (e.g., using at_least(100) for width and height). Better still would be to reflect the size of what is actually being drawn.

However, the other observation I can make is that this is a microcosm of some problems that have been reported recently with computing layouts on the overall window. The underlying problem is largely the same - even though the available space is large, "flexing" the outer box doesn't cause the top level box to "fill" the available area. The viewport of the scrollcontainer is behaving in much the same way in this instance. This suggests to me that there is something fundamental needing attention here.

[Bobw147]

In this particular case what I was expecting was that the canvas would resize to fit the space available which would be the width of the container and the height of the container minus the fixed height of a toolbar and that this relationship would be maintained through a window resize operation.

[Bobw147]

Looking into this a bit more using the debugger the scroll container shows layout parameters of 'layout: <Box (640x480 @ 0,0)>' which seems to be in order. It's layout width and height have been set to fill the main window to which it is attached.
The content of the scroll container is a box showing 'layout <Box (0x0 @ 0, 0)>
The content of the box is the canvas.

As you say, explicitly setting the height/width of the ScrollContainer works as expected but in this case shouldn't the style of flex=1 override the height/width when they are set to 0?

Addition: I have now compared this to the operation of a SplitContainer which works as expected (it always shows the canvas content). In this test the right panel also contains a box which has a canvas as its content in the same manner as the ScrollContainer. This box that contains the canvas shows 'layout: Box<315,458 @ 0,0> which is, of course, correct.