Archify Story Follow Camera为高瘦型技术图谱打造受控的语义跟随视口【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archifyArchify 的 Story Follow Camera故事跟随相机是一套纯视图层的语义取景策略当读者主动播放或点选某个 Story Beat 时它通过既有的公共相机 APIArchify.view.reveal(ids, options)把当前节拍及相邻的上一、下一节拍框进一个有边界、有缩放上限的取景窗口同时保证完整 SVG、作者路径、章节与阅读控件原封不动。本文基于 docs/research-visual-evolution-round-37.md 的研究结论结合 archify/assets/template.html 的落地实现与 archify/test/story-follow-camera.test.mjs 的验收测试说明该功能的动机、窗口推导规则、相机参数、调度与取消策略以及它为什么被选中为“下一高杠杆切片”。背景现有阅读基座与可见的缺口Archify 已经具备现代图工具用于让大图可读的核心原语Semantic Radar从稳定的语义节点推导简化全图表示当前视口支持节点激活与平移位于规范 SVG 之外MAP / READ / FULL 阅读深度渐进披露作者细节不改变几何Semantic Camera以填充与缩放上限适配显式语义子集返回事务回执focus、Finder、Relationship Lens、Direct Relationship Pin、Semantic Lens、Route Probe在不改动拓扑的前提下回答问题Guided Views、Story Trail、Story Beats、章节交接、精确时刻链接、Route Journey提供有边界的叙事序列Motion Governor把读者意图收敛为单一 motion ownerPresentation Stage移除页面周边装饰而不替换实时工件。在 1280×720 的 Presentation Stage 中缺口是“可见而非理论”的一个高瘦的 workflow 呈现为居中的窄列八节章节仍横跨大部分高瘦拓扑激活章节并不能让单个步骤明显变大。问题出在centerStoryStop()上——源码中的实现archify/assets/template.html只是把HTML 轨道里的节拍按钮居中trail.scrollLeft target从未请求 Semantic Camera 去框住当前 SVG 节点或关系。function centerStoryStop(stop) { if (!stop || !trail) return false; var target Math.max(0, stop.offsetLeft - (trail.clientWidth - stop.offsetWidth) / 2); trail.scrollLeft target; return true; }因此研究给出的决策是连接两个已有的 owner——Story Beat 提供语义真值Semantic Camera 提供有界取景。产品句为播放或选择某个 Story Beat 时Archify 以平静、有界的相机跟随该确切作者时刻而完整图表始终只需一次重置即可回到全景。为什么不做“另一个 minimap”候选决策矩阵研究对八类候选方案逐一评估结论清晰候选读者价值成本 / 风险决策另一个 minimap / 常驻总览重复 Semantic Radar 与完整 SVG 总览更多装饰与另一个导航 ownerSkip更强的整章适配让部分章节更大高瘦八节点路径依旧高瘦而小仍无当前步取景Skip冷启动首章或自动相机巡览精心编排的第一印象数组顺序并非显式开篇意图意外方向变化隐藏最安全的全景Skip运行时折叠 / 展开减少可见元素改变感知拓扑、路由真值、链接与导出预期Skip基于密度的标签剔除减少文字Reading Depth 已提供确定性语义层级Skip活跃子图前景克隆可将路径抬升到交叉之上复制可视 DOM、marker/filter 保真、z 序、导出清理与命中目标风险Adapt later仅在节拍取景遗留可测量的遮挡问题时开篇视图 schema 标记让作者提名首个子集跨 schema 创作成本不解决高瘦章节内的小节拍HoldStory Follow Camera让当前作者节拍及局部过渡在每个高瘦/密集故事中可读复用既有语义 ID、相机、调度器、控件、取消与导出清理Borrow Adapt now基准确认不重建已解决的层研究明确三项既有资产无需重做总览与定向已存在默认 SVGviewBox加width: 100%已提供完整冷启动总览相机重置状态显式为{ scale: 1, x: 0, y: 0, mode: overview }。再做 fit-all 子系统只会重复该契约。渐进披露已存在Reading Depth 在 MAP 保留结构与主标签READ 恢复关系标签与节点上下文FULL 恢复标签与精细注释是确定性的作者感知披露。叙事结构已存在当前 11 个 Proof Lab 源全部拥有三个作者视图共 33 章首章含 112 个语义节点中的 52 个平均章节级占比 47%。这证明作者已提供有用子集但数组位置不等于“默认开篇意图”因此不应从首项推断冷启动意图。Story Trail 已派生有序稳定 ID 并区分精确前进、精确后退与分组/无直接边步骤Shareable Story Moment 已能恢复view beat的精确语义态——缺失的只是把该精确态框进 SVG 视口。关键结论是新切片需要的是一个新的“请求策略”request policy而不是新相机。主源调研向六个权威来源借什么、改什么、跳过什么研究以 2026-07-20 可获取的官方文档为依据逐项给出 Borrow / Adapt / Skip 结论1. React Flow——适配语义子集带显式 padding 与缩放边界。顶层fitView拟合全部初始节点FitViewOptions支持指定子集、padding、最小/最大缩放、时长、缓动与插值MiniMap 是独立 SVG 总览平移/缩放可选而非固有。借框显式语义 ID、预留 padding、封顶缩放、fit-all 与子集拟合分离。改Story Follow 应向 Archify 既有相机发送两或三节点语义窗口不存储 React Flow 视口、不让 minimap 成为相机 owner。跳过另一个 minimap、React state、可拖节点、受控视口序列化与 React Flow 依赖。2. Cytoscape.js——视口动画是有限、可中止的事务。可对选中元素动画拟合/居中含 padding、时长、缓动队列显式stop()停止活动视口动画并清空排队工作。借同一时刻仅一个有限相机事务最新读者意图替换旧工作手动导航停止当前事务并清除待处理推进。改不为读者预排相机移动队列Story Beat 调度器只请求当前帧从稳定状态再调度下一节拍。跳过通用动画队列、canvas 渲染器、图变更 API 与 Cytoscape 运行时。3. D3——中断是正常控制流而非错误。selection.interrupt()中断活动过渡并取消同名待处理过渡过渡 promise 在中断/取消时拒绝d3-zoom 单独暴露有界的 scale 与 translate 契约。借最后意图获胜取消必须结算清理相机边界让读者始终停留在同一稳定图中。改Archify 已有相机事务 ID 与结算回执用于防止陈旧的 Story Beat 回调在新节拍/路由/focus/缩放/手动平移之后移动相机。跳过链式预计算过渡、URL 中的变换状态与额外 D3 依赖。4. Structurizr——叙事揭示是作者编排、读者控制的。动画为逐步揭示元素的作者步骤带前进/后退与键盘导航viewer 另有 fit-width/fit-height/fit-content、动画启停、上一步/下一步、全屏与显式“返回上一视图”。借作者顺序、显式 Play/Pause 与 Previous/Next、独立的整图返回路径。改Archify 的作者顺序即meta.views[].focusStory Beat 轨道与 Show all 控件已具备所需导航只需补上逐节拍视口取景。跳过隐藏未揭示拓扑、独立演示文件与页面加载自动动画。5. LikeC4 与 D2——总览与渐进场景是作者决策。LikeC4 把视图视为不同 scope/细节层级的模型投影特殊命名index视图为默认D2 Steps 表示事件序列并继承上一步Layers/scenarios/steps 为独立画板。借总览保持为具名可达上下文叙事顺序由作者而非推断决定上一步状态在下一步到来时仍可理解。改Archify 只保留一张 SVG用查看器强调表达 past/current/pending取景窗口可含上一、下一作者停靠点以保持局部连续性。跳过多画板布局、推断默认章节、自动下钻、隐藏后代与故事停靠点之间的重排。6. W3C——减少过载但方向变化须由读者控制。认知无障碍补充指南要求重要信息突出、避免同时内容过多导致过载关键内容无需滚动/悬停即可见路线与方向变化应由用户发起或可关闭并返回原上下文WAI-ARIA carousel 模式给出控件先例自动轮播有显式控件、焦点进入即停止、直到读者显式请求才恢复。借一次只突出一个当前节拍仅从刻意的故事播放或节拍激活启动跟随读者交互时暂停始终保留明显的 Overview/Show all 路径。改精确#viewbeat恢复可因读者已请求该时刻而立即应用语义帧但不得启动播放、脉冲或移动 DOM 焦点。跳过冷启动飞入、悬停意外移动相机、焦点/页面可见性变化后的静默恢复、reduced motion 下的强制自动跟随。设计落地九个要点及其在 template.html 中的实现1. 保留整系统开篇未限定的工件仍以完整viewBox总览打开不自动播放、不选首章、不在加载时飞相机。Semantic Radar 仍是可选全局地图新行为只作为显式故事意图的后果出现。2. 从既有故事真值推导一个小取景窗口对节拍索引i只框storySteps中已有的稳定作者 ID首拍current next中拍previous current next末拍previous current。实现即storyFrameIds(step)archify/assets/template.htmlfunction storyFrameIds(step) { if (!step) return []; var ids []; if (step.index 0 storySteps[step.index - 1]) ids.push(storySteps[step.index - 1].nodeId); ids.push(step.nodeId); if (step.index 1 storySteps.length) ids.push(storySteps[step.index 1].nodeId); return ids; }当前节点为视觉中心。若 prev→current 存在一条或多条精确作者边由既有 Story Beat 状态保持高亮相机边界仍由节点框推导而非 SVG 路径几何。若某步为分组或无直接边则框住真实邻接节点但不发明连线或方向。窗口只是既有语义之上的呈现策略不改变storySteps、focus 成员、章节、布局或规范拓扑。3. 复用既有有界相机通过一个小型 story-owned 请求助手调用公共方法Archify.view.reveal(ids, options)公开导出见 archify/assets/template.html不复制frameDesktop()也不新增第二相机。reveal在桌面window.innerWidth 720走frameDesktop否则走移动端受控横向滚动archify/assets/template.html。推荐初始边界全部落到followStorySteparchify/assets/template.htmlvar receipt Archify.view.reveal(ids, { reason: options.manual true ? story-beat : story-follow, padding: 64, maxScale: 1.65, duration: STORY_FOLLOW_DURATION_MS, instant: options.instant true || reducedMotion() || document.documentElement.getAttribute(data-motion) ! live });对应常量archify/assets/template.htmlvar VIEW_INTERVAL_MS 3200; // 章节基础时间窗 var STORY_FOLLOW_MIN_DWELL_MS 1100; // 每拍最小驻留对齐 Route Journey var STORY_FOLLOW_DURATION_MS 320; // 单次相机移动时长值得对照的是frameDesktoparchify/assets/template.html的通用默认值padding默认 48、maxScale默认 2.15含邻居 1.9、duration被钳制在 180–520 ms默认 420、targetScale 1.08时直接归 1。Story Follow 故意选择更保守的padding: 64、maxScale: 1.65、duration: 320与 Route Journey 的保守取景纪律一致。不序列化 scale、translate、padding 或 duration。4. 给每个节拍足够的稳定阅读时间当前故事把 3.2 秒章节间隔按节拍数均分八节章节约每拍 400 ms接近一次相机移动时长跟随会变成快速飞掠。实现用storyBeatDwell(total)引入下限archify/assets/template.htmlfunction storyBeatDwell(total) { return Math.max(STORY_FOLLOW_MIN_DWELL_MS, VIEW_INTERVAL_MS / Math.max(1, total)); }即每拍驻留至少 1100 ms相机移动最多消耗其中 360 ms余下为稳定可读间隔。只从一个 generation-owned 的 timeout 调度绝不预载相机移动队列最大章节为八停单遍约九秒有限且有界。测试断言不出现storyFollowTimer setInterval见 archify/test/story-follow-camera.test.mjs。5. 只跟随显式故事意图相机跟随仅在以下情况运行读者按下 Play 或 Resume读者激活 Story Beat 按钮恢复有效#viewidbeatstable-node-id。精确链接恢复时立即应用帧并保持暂停仅聚焦或悬停章节/节拍控件不得移动图表激活无节拍的章节保留章节级 Semantic Camera 拟合。实现中setStoryBeat仅在options.follow true时调用followStorySteparchify/assets/template.html精确链接恢复走selectStoryBeatById(requestedBeat, { linked: true, follow: true, followInstant: true })且 embed 未显式授权播放时直接返回if (embed !explicitEmbedPlayback options.linked ! true) return false。6. 手动导航永远获胜指针平移、滚轮/捏合缩放、缩放控件、Radar 导航、Finder、focus、Route Probe/Journey、Semantic Lens、关系固定、章节替换、resize 替换与页面可见性变化都会取消当前故事相机事务若故事播放中则暂停并保留当前节拍与已流逝驻留。Resume 从当前节拍重算语义窗口而非继续走向陈旧的像素目标。实现用 generation 计数做防陈旧followStoryStep每次调用storyFollowGenerationarchify/assets/template.html结算回调必须同时校验generation ! storyFollowGeneration || storyBeatIndex ! step.index才推进状态archify/assets/template.htmlstopStoryBeatTimer同样递增storyPlaybackGeneration。若Archify.view尚未就绪则用requestAnimationFrame延后并再次校验 generation 与节拍索引archify/assets/template.html。clearStoryFollow()清理 SVG 与面板上的data-story-follow属性archify/assets/template.html。7. 保持 motion ownership 单一Story owner 覆盖三件事相机事务、当前精确边脉冲存在唯一无歧义边时、有限驻留调度器。Motion Governor 的deriveOwner()已把data-story-playing || contenteditable="false">【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考