How to change variable in main function in Flet?

Question

At the beginning of the program I'm creating a random list of nodes and lines between them to represent a graph:

import flet as ft
import flet.canvas as cv
import random
import numpy as np

def generateNodes(n):
    a = []
    for _ in range(n):
        a.append(ft.Offset(random.randint(100, 400), random.randint(100, 400)))
    return a

def generateEdges(nodes):
    e = []
    sum = 0
    for i in range(len(nodes)):
        for j in range(i + 1, len(nodes)):
            e.extend([nodes[i], nodes[j]])
            d = np.sqrt((nodes[i].x - nodes[j].x) ** 2 + (nodes[i].y - nodes[j].y) ** 2)
            sum += d
    return (e, d)

In my main function I have a Canvas and a Button. On button click I want to swap two random nodes and display the graph again.

def swap(a, i, j):
    a[i], a[j] = a[j], a[i]


def main(page: ft.Page):
    a = generateNodes(4)
    edges, totalDistance = generateEdges(a)

    page.title = "Example App"
    page.window.width = 500
    page.window.height = 500
    page.window.resizable = False

    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    node_paint = ft.Paint(
        stroke_width=8, style=ft.PaintingStyle.STROKE, color=ft.colors.LIGHT_BLUE
    )
    edge_paint = ft.Paint(stroke_width=4, style=ft.PaintingStyle.STROKE)

    cvs = cv.Canvas(
        [
            cv.Points(edges, point_mode=cv.PointMode.LINES, paint=edge_paint),
            cv.Points(a, point_mode=cv.PointMode.POINTS, paint=node_paint),
        ],
        width=500,
        height=500,
        expand=True,
    )

    title_text = ft.Text(
        value=totalDistance, size=20, weight=ft.FontWeight.BOLD, text_align="CENTER"
    )
    
    def swap_clicked(e):
        swap(a, random.randint(0, 3), random.randint(0, 3))
        edges2, totalDistance2 = generateEdges(a)
        title_text.value = totalDistance2    
        page.update()

    
    page.add(cvs)
    page.add(title_text)
    page.add(ft.ElevatedButton(text="Swap", on_click=swap_clicked))


ft.app(main)

I was able to change the totalDistance after I swap nodes but I cannot figure out how I can redraw the graph again.

Could somebody please help? Thanks in advance.

Answer 1

Problem is in swap_clicked(e) function. Fisrt You need to delete old points and line by cvs.shapes.clear(), then append to cms new shapes cvs.shapes.append(cv.Points(edges2, point_mode=cv.PointMode.LINES, paint=edge_paint)) and cvs.shapes.append(cv.Points(b, point_mode=cv.PointMode.POINTS, paint=node_paint)). Now It's update, but i don't think you see change becouse swaping point will not make edges look diffrent, they will be in diffrent order, but still is will look same. I wrote swap_clicked(e) function that make new shape on new points to see diffrence and modify swap function to save result of swap.

def swap_clicked(e):

        #swap(a, random.randint(0, 3), random.randint(0, 3))
        b = generateNodes(4)

        edges2, totalDistance2 = generateEdges(b)
        title_text.value = totalDistance2

        cvs.shapes.clear()
        cvs.shapes.append(cv.Points(edges2, point_mode=cv.PointMode.LINES, paint=edge_paint))
        cvs.shapes.append(cv.Points(b, point_mode=cv.PointMode.POINTS, paint=node_paint))

        page.update()