新增功能：从上到下渲染

解决issue #330

概述

• 新增垂直渲染能力：思维导图从“水平（左右）”可切换为“垂直（自上而下）”渲染
• 新增配置项 ttd（top-to-down）：用于控制渲染方向
• 增加演示页 example.md、example.html 以验证垂直渲染视觉与交互
• 更新构建与工具链配置，提升在 Windows 环境下的兼容性

效果展示

使用ttd: true时：

未使用时：（保留原本渲染方式未更改）

配置变更

• 新增 ttd 配置项
  • 含义：当 ttd: true 时使用垂直渲染（自上而下）；当缺省或为 false 时使用水平渲染（左右展开）
  • Markdown 前言示例（已存在示例文件）：

    ---
    title: markmap
    markmap:
      colorFreezeLevel: 2
      ttd: true
    ---

    文件：markmap\example.md:1–6
  • 代码接口建议（若通过 API 使用）：

    new Markmap(svg, { ttd: true }) // 垂直渲染

  • 影响范围：布局计算、连线锚点、初始缩放等几何逻辑随 ttd 改变
  • 兼容性：默认保持水平渲染，避免老项目无配置时行为突变

代码改动（核心文件）

• 文件：markmap\packages\markmap-view\src\view.ts
  • 连线生成
    • linkHorizontal → linkVertical
    • const linkShape = linkVertical()
    • 位置：3, 39
  • 布局与间距（_relayout）
    • nodeSize：横向间距略减（spacingHorizontal * 0.5），纵向间距显著增加（height + spacingVertical * 20）
    • spacing：同父节点 spacingVertical * 1.5，跨父节点 spacingVertical * 2，叠加 lineWidth
    • 位置：230–252
  • 节点矩形映射
    • 由水平语义改为垂直语义：
      • x = fnode.x - fnode.xSize / 2
      • y = fnode.y
      • width = fnode.xSize
      • height = fnode.ySize - spacingVertical * 1.5
    • 位置：259–264
  • 内容容器偏移
    • foreignObject 内层增加 transform: translate(30px, 90px) 改善初始视觉
    • 位置：466
  • 下划线与圆点位置
    • 下划线改为右侧竖线：x 固定在节点右缘（加半线宽），y 从 70 到节点底部附近
    • 圆点位于节点右缘（加半线宽）与底部
    • 位置：552–575
  • 连线路径锚点
    • 进入、退出与主路径统一为“父右下 → 子右上附近（纵向下移约 70）”，符合垂直阅读逻辑
    • 位置：502–508, 585–591, 599–615
  • 自适应缩放
    • 初始缩放：水平方向乘 0.8（更紧），垂直方向乘 1.2（更饱满）
    • 位置：639–643

新增演示页

• 文件：markmap\example.md、markmap\example.html
  • 目的：本地验证垂直渲染与交互
  • 用法：命令行输入：

    node packages/markmap-cli/bin/cli.js example.md --offline

    自动渲染example.md文档为html文件并且在本地打开。注意需要加--offline本地的代码更改才会生效

工具链与脚本

• 跨平台构建（Windows 兼容）
  • 增加依赖：cross-env
  • 变更：各包 build:js 脚本改为 cross-env TARGET=... vite build，确保 Windows 下环境变量生效
  • 文件：
    • markmap\package.json:9–12, 14–21
    • markmap\packages\markmap-lib\package.json:42–49
    • markmap\packages\markmap-toolbar\package.json:55–62
    • markmap\packages\markmap-view\package.json:68–83
• Lint 与格式化
  • prettier 匹配范围更精确并加引号，提升 PowerShell 下的可靠性
  • 文件：markmap\package.json:14–21
• CLI 本地资源（Windows 路径）
  • fetch-assets.ts 支持盘符路径（如 E:\...），本地文件用流读取而非 fetch
  • 文件：markmap\packages\markmap-cli\src\fetch-assets.ts:28–36

行为影响与注意事项

• 渲染方向
  • ttd: true → 垂直渲染；ttd: false 或缺省 → 水平渲染
• 视觉与交互
  • 垂直渲染下节点更疏朗、连线集中在右侧，圆点交互位于节点右下区域
• 参数敏感
  • 若干硬编码偏移（如 translate(30px, 90px)、y=70）在不同内容密度下可能需按主题与线宽调优
• 兼容性
  • 保持默认水平渲染，避免老数据未配置时行为突变
  • 主题或线宽变更需验证连线与圆点锚点对齐情况