Skip to content

fix(knowledge-graph): 修复 Cytoscape / Force Graph 右栏展开后布局溢出 - #537

Merged
ThreeFish-AI merged 1 commit into
feature/1.x.xfrom
ThreeFish-AI/fix-kg-right-panel-resize
May 13, 2026
Merged

fix(knowledge-graph): 修复 Cytoscape / Force Graph 右栏展开后布局溢出#537
ThreeFish-AI merged 1 commit into
feature/1.x.xfrom
ThreeFish-AI/fix-kg-right-panel-resize

Conversation

@ThreeFish-AI

Copy link
Copy Markdown
Owner

Summary

  • Cytoscape 和 Force Graph 引擎的容器 div 使用 h-full w-full,内部 Canvas 被引擎库赋予显式像素 CSS 宽高
  • 右栏折叠后再展开时,Canvas 固有尺寸阻止 flex-[2.2] 容器收缩,导致右栏被挤出视窗外
  • 将两个引擎的容器 div 改为 position: absolute; inset: 0,对齐 3D 引擎的已验证策略,使 Canvas 脱离文档流

变更文件

  • GraphCanvas.tsx (Cytoscape):容器 div 从 h-full w-fullabsolute inset: 0
  • ForceGraphCanvas.tsx:同上

Test plan

  • 切换到 Cytoscape 引擎 → 折叠右栏 → 展开右栏 → 右栏完整可见,Canvas 自动缩小
  • 切换到 Force Graph 引擎 → 同上操作 → 同上预期
  • 验证 d3 / Sigma / 3D 引擎不受影响
  • 验证双击节点展开子图仍正常
  • 验证全屏切换仍正常

🤖 Generated with Claude Code, CodeX, Gemini

Cytoscape 和 Force Graph 的容器 div 使用 h-full w-full 定位,
内部 Canvas 被引擎库赋予显式像素 CSS 宽高,导致右栏折叠后再展开时
Canvas 固有尺寸阻止 flex 容器收缩,右栏被挤出视窗外。

将容器改为 position: absolute; inset: 0,对齐 3D 引擎的已验证策略,
使 Canvas 完全脱离文档流,不再参与祖先 flex 布局计算。

🤖 Generated with [Claude Code](https://github.com/claude), [CodeX](https://openai.com), [Gemini](https://github.com/apps/gemini-code-assist)
Co-Authored-By: Aurelius Huang<threefish.ai@gmail.com>
@ThreeFish-AI
ThreeFish-AI merged commit 650dd3a into feature/1.x.x May 13, 2026
11 checks passed
@ThreeFish-AI
ThreeFish-AI deleted the ThreeFish-AI/fix-kg-right-panel-resize branch May 13, 2026 13:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant