Skip to content

fix: outline tree width not engout when tree is very deep #1092

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
chilingling wants to merge 5 commits into from
Closed

fix: outline tree width not engout when tree is very deep #1092

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d6e75a7
fix: outline tree width not engout when tree is very deep
chilingling Feb 5, 2025
11dcd90
fix: add code comment
chilingling Feb 5, 2025
19cd805
fix: add min 280 width
chilingling Feb 5, 2025
a0c74da
fix: add missing params, reset maxDepth before recompute
chilingling Feb 5, 2025
87d776b
fix: optimize maxDepth algorithms
chilingling Feb 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions packages/plugins/tree/src/Main.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
:highlight-hover-row="false"
:auto-resize="true"
:row-class-name="getClassName"
:style="{ width: treeWidth }"
>
<tiny-grid-column field="componentName" tree-node>
<template #default="data">
Expand Down Expand Up @@ -80,9 +81,17 @@ export default {
const { PLUGIN_NAME } = useLayout()

const panelFixed = computed(() => props.fixedPanels?.includes(PLUGIN_NAME.OutlineTree))
const maxDepth = ref(1)
// 树宽度：最大深度 * 16 + 120，其中 16 为每层缩进的宽度(tiny-grid 默认的缩进宽度)，120 为树的最小宽度
const treeWidth = computed(() => `${Math.max(maxDepth.value * 16 + 120, 280)}px`)

const filterSchema = (data) => {
const translateChild = (data) => {
maxDepth.value = 0
Copy link
Collaborator

@rhlin rhlin Feb 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

代码互相耦合比较严重， 并且在中间过程中反复修改maxDepth。连锁可能造成一直修改treewiidth
建议用闭包的形式 计算后同时返回 ，内部的最大值和过滤后的数据结果， 计算完毕后再复制给外部的maxDepth。

const translateChild = (data, depth = 0) => {
if (depth > maxDepth.value) {
maxDepth.value = depth
}

data.forEach((item) => {
item.show = pageState.nodesStatus[item.id] !== false
item.showEye = !item.show
Expand All @@ -91,7 +100,7 @@ export default {
delete item.children
} else {
if (item.children.length) {
translateChild(item.children)
translateChild(item.children, depth + 1)
}
}
})
Expand Down Expand Up @@ -294,7 +303,8 @@ export default {
toggleTree,
getClassName,
PLUGIN_NAME,
renderIconFn
renderIconFn,
treeWidth
}
}
}
Expand Down