A prototype of TreeView is implemented using tables, and it runs very slowly

[iankona]

Machine Translation

　　I've been waiting for DPG to add treeview control for a long time. I'm glad DPG included treeview in the plan a few days ago. Like issue#1395, I use the treeview control as often as I do. Therefore, send out the treeview prototype code, which can be used for reference and temporary testing by those in need.

　　This is the second draft. It combines the tree with the display control. It's a little faster. Dpg.move_Item() is used, because the row hiding function cannot be found. Row items moves between the table and stage, and then cooperates with dpg.reorder_Items() rearranges the display lines. One of the reasons for the slowness of draft 2 is that every time move_Item() is called will call rendering, I guess. I want to find the function of rendering at the end ,when a large number of nodes are moved, but I can't find it. The second reason why draft 2 is slow is that it takes a long time to generate a list of tree nodes arranged in sequence. The first draft is a tree data structure, which is separated from the display control. The control is only used for display. The first draft is slower.

　　I'm waiting for the release of DPG's treeview widget. I hope it has the clipping function of dpg.table. I used to use Tkinter's treeview control to create a large number of tree nodes. Finally, it was so slow that it was difficult to drag the interface. I speculate that the displayed interface has a range, but it actually renders the interface of the complete tree. In fact, I can't verify this speculation.

代码

import dearpygui.dearpygui as dpg


class RowNode:
    def __init__(self, table, stage, parent_node, column_num=0):
        self.new = True
        self.parent = parent_node
        self.children = []
        # 界面用
        self.table, self.stage = table, stage
        self.tag = dpg.add_table_row(parent=table)
        self.cell_tag_list = [dpg.add_table_cell(parent=self.tag) for x in range(column_num)]
        self.fold_child = False
        self.direct_tag = ""
        # 解析用
        self.label = ""
        self.bp = None
        self.attrib = {}
        self.text = ""
        self.values = []

    @property
    def parent(self):
        return self._parent

    @parent.setter
    def parent(self, value):
        if self.new:
            self._parent = value
            if value is None:
                self.layer = 0  # root_node
            else:   
                self.layer = self._parent.layer + 1  # child_node
                self._parent.children.append(self)
            self.new = False
        else:
            self.move(value)

    def move(self, parent_node):
        pass

    @property
    def show(self):
        return self._show

    @show.setter
    def show(self, value:bool):
        self._show = value
        dpg.set_viewport_vsync = True
        if self._show:
            self.fold_child = False
            dpg.configure_item(self.direct_tag, direction=dpg.mvDir_Down)
            for node in self.children:
                node.fold_child = True
                dpg.configure_item(node.direct_tag, direction=dpg.mvDir_Right)
                dpg.move_item(node.tag, parent=self.table)
        else:
            self.fold_child = True
            dpg.configure_item(self.direct_tag, direction=dpg.mvDir_Right)
            for node in self.层级遍历()[::-1]:
                dpg.move_item(node.tag, parent=self.stage)
        dpg.set_viewport_vsync = False


    def next_item(self, node):
        index = node.parent.children.index(node)
        try:
            next_tag = node.parent.children[index+1].tag
        except:
            next_tag =None
        return next_tag
    

    def 先序遍历(self):
        node_list = []
        def 遍历(children):
            nonlocal node_list
            for child_node in children:
                node_list.append(child_node)
                遍历(child_node.children)
        遍历(self.children)
        return node_list


    def 层级遍历(self):
        node_list = []
        def 遍历(children):
            nonlocal node_list
            for child_node in children:
                node_list.append(child_node)
            for child_node in children:
                遍历(child_node.children)
        遍历(self.children)
        return node_list

    def 绑定事件(self, 事件集):
        pass

        

class TreeView:
    def __init__(self, *, parent:int|str="", 隐藏行标题:bool=False, 隐藏列标题:bool=False, 隐藏树标签列:bool=False) -> None:
        self.parent = parent
        self.column_num = 0
        self.tag_node_dict = {}
        self.tree_num = 0
        self.字体大小 = 16
        self.新建窗口()
        self.测试节点()
        

    def 注册字体(self):
        with dpg.font_registry() as 字体注册:
            with dpg.font(r"C:\Windows\Fonts\simsun.ttc", self.字体大小) as self.宋体字体:
                字体_字符范围 = dpg.add_font_range_hint(dpg.mvFontRangeHint_Chinese_Full)
        
    
    def 绑定字体(self):
        dpg.bind_font(self.宋体字体) # 绑定所有


    def 节点右键菜单(self):
        with dpg.popup(self.guazai_item) as self.节点菜单窗口:
            dpg.add_text("按钮|Stable|check等部件合集")
            dpg.add_button(label="新建节点", callback=self.新建节点)
            dpg.add_button(label="新建子节点", callback=self.新建子节点)


    def 建立工具区(self):
        self.guazai_item = dpg.add_text("按钮|Stable|check等部件合集")
        self.注册字体()
        self.绑定字体()
        self.建立事件集()
        self.节点右键菜单()


    def 建立树区(self, 列标题列表:list):
        self.stage = dpg.add_stage()
        self.table  = dpg.add_table(parent=self.parent, header_row=True, 
                                    borders_outerH=True, borders_innerV=True, borders_innerH=True, borders_outerV=True,
                                    hideable=True, reorderable=False, resizable=True, sortable=False, policy=dpg.mvTable_SizingFixedFit) 
        self.column_num = len(列标题列表)
        for 标题 in 列标题列表:
            dpg.add_table_column(label=标题, parent=self.table)
        

    def 建立事件集(self):
        def 鼠标左键点击事件函数(sender, app_data, user_data):
            pass

        def 鼠标右键点击事件函数(sender, app_data, user_data):
            self.获取当前节点(sender, app_data, user_data)
            dpg.configure_item(self.节点菜单窗口, show=True)
            pass

        with dpg.item_handler_registry() as self.事件集:
            dpg.add_item_clicked_handler(0, callback=鼠标左键点击事件函数)
            dpg.add_item_clicked_handler(1, callback=鼠标右键点击事件函数)


    def 新建窗口(self, 列标题列表:list = []):
        if 列标题列表 == []:
            列标题列表 = ["TreeNode", "Start", " End ", "Size ", "Attrib", "Values"]
        self.建立工具区()
        self.建立树区(列标题列表)


    def 新建节点(self):
        self.now_row_node = None
        self.now_row_tag = ""
        self.建立节点()
        dpg.configure_item(self.节点菜单窗口, show=False)
        self.更新视图()
        

    def 新建子节点(self):
        # dpg.set_viewport_vsync = True
        self.建立节点()
        self.now_row_node.parent.show = True
        dpg.configure_item(self.节点菜单窗口, show=False)
        self.更新视图()
        # dpg.set_viewport_vsync = False

    def 建立节点(self):
        node = RowNode(self.table, self.stage, parent_node=self.now_row_node, column_num=self.column_num)
        self.tag_node_dict[node.tag] = node
        self.now_row_node = node
        self.now_row_tag = node.tag

        def 点击事件(sender, app_data, user_data):
            self.获取当前节点(sender, app_data, user_data)
            if self.now_row_node.fold_child:
                self.now_row_node.show = True
            else:
                self.now_row_node.show = False
            self.更新视图()

        with dpg.group(parent=node.cell_tag_list[0], horizontal=True) as group_tag:
            self.tree_num += 1
            node.direct_tag = dpg.add_button(arrow=True, direction=dpg.mvDir_Right, indent=node.layer*2*self.字体大小)
            dpg.add_button(label="树节点"+str(self.tree_num), callback=点击事件)

        dpg.bind_item_handler_registry(group_tag, self.事件集)


    def 测试节点(self):
        self.新建节点()
        self.新建节点()
        self.新建子节点()
        self.新建子节点()
        self.新建节点()
        self.新建节点()
        self.新建子节点()


    def 删除节点(self):
        pass


    def 获取当前节点(self, sender, app_data, user_data):
        if app_data == None:
            button_tag = sender
            group_tag = dpg.get_item_parent(button_tag)  
        else:
            group_tag = app_data[1]
        cell_tag  = dpg.get_item_parent(group_tag)  
        self.now_row_tag = dpg.get_item_parent(cell_tag)
        self.now_row_node = self.tag_node_dict[self.now_row_tag]
        

    def 更新视图(self):
        tag_list = []
        for row_tag, node in self.tag_node_dict.items():
            if node.layer == 0:
                tag_list.append(row_tag)
                for child_node in node.先序遍历():
                    tag_list.append(child_node.tag)
        dpg.reorder_items(self.table, 1, tag_list)


    def 打印(self):
        # print(self.tag_node_dict)
        pass

if __name__ == '__main__':
    dpg.create_context()
    with dpg.window(label="表格", width=600, height=300) as win:
        treeview = TreeView(parent=win)
    dpg.create_viewport(title='CeShi', width=800, height=600)
    dpg.setup_dearpygui()
    dpg.show_viewport()
    dpg.start_dearpygui()
    dpg.destroy_context()

[iankona]

Screenshot/截图

[iankona]

In different Python versions

　　Miraculously, I tested the script using the installed version of python, and it became very fast and usable
　　But starting this script with an embedded Python version is very slow. Using the embedded Python startup script, you can see that the rows are moved to the end of the table , then row reordered to the appropriate position

[iankona]

Reasons for actual slowing down

　　After testing, it is not associated with the python version. When the code on this page is run directly as a script, it is very fast. But when I call the TreeView class from other py files (for example，treeview = 功能.界面.扩展.treeview.TreeView(parent=win)), it becomes very slow, at least an order of magnitude slower. It's hard to understand how it slows down.