Supademo：把一次操作录成别人能跟着点的演示
Supademo 是制作交互演示和操作指南的工具。客服、培训和产品团队可以把一段操作整理成带说明的步骤，让读者按自己的节奏查看。
先尝试拆解问题、设计和实现，再展开思路，检查状态、边界与取舍，并设计验证用例。思路提供分析路径，不给出完整实现。
01
代码思考进阶
允许回看时，怎样找出无法结束的路径？
为教学用演示播放器设计发布前检查器。演示由步骤构成，每步有唯一 id 和若干 nextIds；入口为 startId，终点由 terminalIds 指定。边表示读者可以选择的下一步。此题不描述 Supademo 的内部实现。
- 输出不存在的目标、从入口不可达的步骤，以及从入口可达但没有任何路径通向终点的步骤。允许回看形成循环，只要仍有离开循环到达终点的路径。
- 手工推演：入口 A，A→B，B→A 和 C，C 为终点；另有孤立步骤 D。再删除 B→C，比较结果。
- 交付数据校验顺序、路径分析思路和测试表。覆盖空步骤、重复 id、缺失入口、空终点集合及自环；说明错误输入时哪些分析仍可进行。无需写完整实现。
查看思路
- 先验证标识和引用，把结构错误与路径问题分开；重复id不能靠后一个覆盖前一个悄悄处理。
- 从入口考虑哪些步骤会被读者看见，再从所有终点反向考虑哪些步骤有机会结束。两类集合回答不同问题。
- 原样例A、B虽有循环但能到C，因此不属于无法结束；D只是不从入口可达。移除B→C后，A与B失去通向终点的路径。
- 测试必须包含有出口与无出口的循环，不能仅以发现环就判错。为空终点和缺失入口明确输出，避免把无法分析误写成通过。
02
界面实现进阶
图片缩放后，热点怎样仍指向原位置？
设计教学演示的热点层。原图为1200×800，热点保存为相对原图的归一化坐标（0到1表示从左到右、从上到下的位置）。图片在一个600×500、无边框无内边距的容器内等比完整显示，水平垂直居中，剩余区域留白。
- 推演热点(0.25,0.5)在容器中的位置；容器变成360×360后重新推演。只在实际图片区域放热点，不能把留白算作图片。
- 提供状态和布局方案，处理图片未加载、尺寸为零、缩放和页面滚动。气泡可移动避免遮挡，但热点锚点必须仍指向原位置。
- 热点使用可聚焦按钮，Tab可依步骤顺序访问，Enter或空格可激活，焦点须可见。交付坐标推演、无效状态策略和窄屏键盘检查表，不要求完整组件。
查看思路
- 从原图比例求实际显示区域，再考虑居中的留白；不能直接用容器宽高乘归一化坐标。
- 600×500容器中的图片为600×400，上下各留50；示例热点为(150,250)。360×360中的图片为360×240，上下各留60，热点为(90,180)。
- 将图片是否就绪与测量结果分开。尺寸无效时不显示可点击锚点，重新测量后再恢复。若使用getBoundingClientRect，其位置相对视口，不能与文档坐标混用。
- 分别检查锚点与气泡，尤其靠边热点、页面滚动和放大字体。用键盘完成同一条路径，确认焦点与步骤顺序一致。