<!-- src/components/TopoCanvas.vue -->
<script setup lang="ts">
/**
 * 拓扑画布组件：第 7 周编辑器内核的展示态骨架（Day 68 迁移版）的 Vue 化
 * 本周职责边界（Day 85 文档）：
 *   本组件 = 画布世界的宿主 + 桥的实现方
 *   renderer 实例自治（视口/命中/动画）——绝不进响应式
 */
import { onMounted, onUnmounted, ref } from "vue";
import { TopoRenderer } from "../core/topo-renderer";   // Day 68 展示态渲染器原样迁入
import { TOPO_CONFIG } from "../core/topo-config";      // 声明式拓扑配置

// 模板引用：三个 canvas 的 DOM 句柄（挂在 .value 上，非响应式追踪）
const bgCanvas = ref<HTMLCanvasElement>();
const edgeCanvas = ref<HTMLCanvasElement>();
const nodeCanvas = ref<HTMLCanvasElement>();
const rootEl = ref<HTMLDivElement>();

// 渲染器实例：普通变量（今天先这样，明天上 markRaw 论证）
let renderer: TopoRenderer | null = null;
let ro: ResizeObserver | null = null;

onMounted(() => {
  // 挂载时序：此时三个 canvas 已在 DOM，getContext 可用
  renderer = new TopoRenderer({
    bg: bgCanvas.value!,
    edges: edgeCanvas.value!,
    nodes: nodeCanvas.value!,
    config: TOPO_CONFIG,
  });
  renderer.renderStatic();   // 静态渲染验证（第五节）

  // resize 协议（第三节）
  ro = new ResizeObserver(() => renderer?.resize());
  ro.observe(rootEl.value!);
});

onUnmounted(() => {
  ro?.disconnect();
  renderer?.destroy();       // 渲染器内部清理（事件监听、rAF）
  renderer = null;
});
</script>

<template>
  <!-- 三层叠放：bg 最底，nodes 最顶（接收交互事件） -->
  <div ref="rootEl" class="topo-canvas">
    <canvas ref="bgCanvas"   class="topo-canvas__layer" />
    <canvas ref="edgeCanvas" class="topo-canvas__layer" />
    <canvas ref="nodeCanvas" class="topo-canvas__layer topo-canvas__hit" />
  </div>
</template>

<style scoped>
.topo-canvas { position: relative; width: 100%; height: 100%; }
.topo-canvas__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.topo-canvas__hit { pointer-events: auto; }   /* 只有节点层收事件（第 7 周设计） */
</style>

// core/topo-renderer.ts 内部（迁移时的检查清单）
/**
 * DPR 适配：canvas 尺寸 = CSS 尺寸 × devicePixelRatio
 * 关键三件套缺一不可：
 * 1. canvas.width/height = 物理像素（乘 DPR）
 * 2. ctx.scale(dpr, dpr)——绘制坐标系按 CSS 像素算
 * 3. CSS 宽高 100%（样式层控制显示尺寸）
 */
resize(): void {
  const dpr = window.devicePixelRatio || 1;
  const rect = this.root.getBoundingClientRect();   // CSS 尺寸
  for (const canvas of [this.bg, this.edges, this.nodes]) {
    canvas.width = Math.round(rect.width * dpr);
    canvas.height = Math.round(rect.height * dpr);
  }
  // 每层 ctx 重设 scale（注意：canvas.width 赋值会重置变换矩阵！）
  for (const ctx of [this.ctxBg, this.ctxEdges, this.ctxNodes]) {
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  }
  this.renderStatic();   // 尺寸变了必须重绘
}

□ core/topo-config.ts      声明式配置（nodes/edges）——纯数据，原样拷
□ core/topo-renderer.ts    展示态渲染器——Day 68 版本（含 update(states) 入口）
  □ 三层 ctx 初始化 + DPR 三件套（第二节）
  □ ellipsize 文本截断（Day 43 遗产）
  □ roundRectPath（Day 42 遗产）
  □ resize()：setTransform 修正
  □ destroy()：事件解绑 + rAF 取消（第 7 周若有遗漏今天补齐）
□ 坐标/命中的纯函数（hit-test、世界↔屏幕变换）——不依赖 DOM，原样拷
✗ 编辑器内核的其余部分（拖拽编辑、撤销栈、选区）——不迁（Day 68 已裁剪）

// renderer.renderStatic() 的验证内容（Day 68 逻辑的骨架版）
renderStatic(): void {
  // 背景层：网格（第 7 周的 grid 绘制）
  this.drawGrid();
  // 连线层：TOPO_CONFIG.edges 的连线
  this.drawEdges(new Map());     // 空状态集：默认色
  // 节点层：TOPO_CONFIG.nodes 的节点框 + 标签
  this.drawNodes(new Map(), new Map());
}

let pending = false;
ro = new ResizeObserver(() => {
  if (pending) return;
  pending = true;
  requestAnimationFrame(() => { pending = false; renderer?.resize(); });
});