Adding Components to Canvas

Anvil Q&A
5

Yes I did think about popovers. I’m sure it can be done. But it’s not exactly how they were designed to be used, so it would need some hacking with the code to get it to do what you wanted.

I also had another idea which you might want to experiment with.

Use an XYPanel.
Then put a canvas panel inside it. But do that in code and not in the designer.
You’ll see why.

class Form1(Form1Template):

  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    # Any code you write here will run when the form opens.
    
    self.canvas = Canvas(height=400, spacing_above='none', spacing_below='none') #choose a height (the same as your XY Panel)
    self.canvas.set_event_handler('mouse_down', self.canvas_mouse_down)
    self.xypanel.add_component(self.canvas, width='100%')

  def canvas_mouse_down(self, x, y, button, **event_args):
      l = Link(text='foo')
      self.xypanel.add_component(l, x=x, y=y)
      l.set_event_handler('click', lambda **e: l.remove_from_parent())

You have to add the canvas in code because anvil only supports numbers for the width property in the design view. (we might look at this).

You also might need to play with the padding or adjust the x, y values on click…

T0vkHLstbe

3 Likes