OHIF Viewers 3.13 迁移指南Mode 侧边栏面板列表成为标准定制项Customization Service 运行时定制【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/Viewers3.13 版本对 OHIF Viewers 的定制服务customization service做了一次重要收编每个模式的左右侧边栏面板列表leftPanels/rightPanels不再只是布局里的字面量数组而是被统一提升为标准定制项任何模式都无需显式开启即可在运行时被?customization数据文件或window.config覆盖。本文以迁移指南 mode-panels.md 为主体结合仓库中的模式定义源码与已内置的 segmentation 定制模块讲解新机制的解析顺序、定制写法与迁移注意事项读完你就能在自己的部署中按模式替换、追加或全局调整侧边栏面板。为什么面板列表会被标准化在 3.13 之前一个模式的侧边栏面板就是模式布局layout上两个普通的字面量数组leftPanels和rightPanels。它们只有在模式定义代码里写死部署者想改动必须修改模式源码。3.13 的变更核心在于模式依然用同样的字面量数组声明面板标准形式不变但这些数组在模式进入mode enter时会被种子化seed到定制服务里成为模式作用域Mode scope底层的标准定制项之后应用的mode阶段定制块app config / URL 中的定制模块就可以用 immutability-helper 命令对它们做$set、$push等组合操作。也就是说字面量数组形式没有被废弃反而变成了可定制的标准形式。迁移指南原文将其概括为一句话Modes declare their panels the standard way, as literal arrays in the layout例如props: { leftPanels: [ohif/extension-default.panelModule.seriesList], rightPanels: [ohif/extension-cornerstone.panelModule.panelMeasurement], }仓库中实际运行的例子就在 modes/basic/src/index.tsx 的basicLayout与 modes/longitudinal/src/index.ts 的longitudinalInstance里。basic 模式种子的左右列表为export const basicLayout { id: ohif.layout, props: { leftPanels: [ohif.thumbnailList], leftPanelResizable: true, rightPanels: [cornerstone.segmentation, cornerstone.measurements], rightPanelClosed: true, rightPanelResizable: true, ... }, };longitudinal 模式则在其上扩展追加测量跟踪相关面板export const longitudinalInstance { ...basicLayout, props: { ...basicLayout.props, leftPanels: [tracked.thumbnailList], rightPanels: [cornerstone.segmentation, tracked.measurements], ... }, };这些布局 props 中的注释已经明确说明the mode route seeds these into the standardleftPanels/rightPanelscustomizations at the bottom of the mode scope——它们正是本文主题的直接源码证据。进入模式时的面板解析顺序4 步迁移指南给出了模式进入时侧边栏的确定性解析流程。模式路由会自底向上bottom-up分层构建模式作用域只有作用域构建完成后才真正解析侧边栏模式作用域被重置reset布局的面板数组被种子化为标准的leftPanels/rightPanels定制项构成模式作用域的最底层app config / URL 的mode阶段块依次应用——先是通用的*块再是按当前进入模式的 id / route name 命名的块侧边栏从最终的leftPanels/rightPanels值解析。全局作用域global scope的定制项照例通过作用域优先级global mode default胜出。这 4 步顺序与同迁移指南中 mode-extensibility.md 描述的模式生命周期完全一致模式实例在modeFactory中创建后进入模式时模式作用域重置然后依次叠上布局面板列表即leftPanels/rightPanels、modeCustomizations块、mode阶段*块与模式专属块最后才由侧边栏、工具栏和onModeEnter消费这些值。用mode阶段块定制某个模式的侧边栏因为模式自身的面板列表在mode阶段块应用时已经在定制服务里所以一个?customization模块或window.config里的 customization 配置只需在mode阶段块中定位标准键leftPanels/rightPanels用 immutability-helper 命令与模式自身的列表组合即可。迁移指南给出的完整示例JSONC支持注释与尾逗号{ mode: { // Replace the right sidebar in the longitudinal mode (route name viewer) viewer: { rightPanels: { $set: [ ohif/extension-cornerstone.panelModule.panelSegmentationWithToolsLabelMap, ohif/extension-measurement-tracking.panelModule.trackedMeasurements ] } }, // Append a panel in the segmentation mode segmentation: { rightPanels: { $push: [ohif/extension-cornerstone.panelModule.panelMeasurement] } }, // Or change every mode at once with the general block *: { leftPanels: { $push: [ohif/extension-example.panelModule.myPanel] } } } }关键点解读mode阶段块定制模块可以按生命周期阶段划分载荷requires/bootstrap/global/mode详见 customization-url.md。mode阶段在每次模式进入时应用作用于 Mode 作用域*块先应用、按模式 id / routeName 命名的块后应用因此模式专属块可以覆盖通用块的值。块键用 route name 而非面板 id示例中 longitudinal 模式的 route name 是viewer见 modes/longitudinal/src/index.ts 中的routeName: viewer所以定制块写作viewersegmentation 模式则写作segmentation。immutability-helper 语义$set整体替换模式种子的列表$push在列表末尾追加仓库内置示例中还可见$unshift头部插入等命令。这些命令与模式自身的列表天然组合——先有模式种子的底层值再有命令式的修改层。面板 id 的格式值为ohif/extension-name.moduleType.exportName形式的完整引用串与模式布局 props 中使用的引用格式一致。该配置形态同样适用于window.configapp config 的customizationService接受相同的分阶段结构例如仓库中的 config/customization.js 就展示了mode: { *: ..., viewer: ... }的注释示例。仓库内置的完整实战案例segmentation 定制模块迁移指南推荐直接参考平台内置的两个定制模块。它们在仓库中的路径为platform/app/public/customizations/segmentation/segmentationEditing.jsoncplatform/app/public/customizations/segmentation/segmentationAnnotationTools.jsoncsegmentationEditing.jsonc替换右侧栏并启用分割编辑该模块为 basic 与 longitudinalviewer模式组合分割编辑能力全部修改都放在按 route name 命名的mode块中。其viewer块的核心内容{ mode: { viewer: { toolbarButtons: { $push: [{ $reference: cornerstone.segmentationToolbarButtons }] }, toolbarSections: { $push: [{ $reference: cornerstone.segmentationToolbarSections }] }, toolGroupAdditions: { default: { $push: [{ $reference: cornerstone.segmentationTools }] }, mpr: { $push: [{ $reference: cornerstone.segmentationTools }] } }, panelSegmentation.disableEditing: { $set: false }, rightPanels: { $set: [ ohif/extension-cornerstone.panelModule.panelSegmentationWithToolsLabelMap, ohif/extension-cornerstone.panelModule.panelSegmentationWithToolsContour, ohif/extension-measurement-tracking.panelModule.trackedMeasurements ] } } } }其中rightPanels: { $set: [...] }与本文示例完全同构——整体替换模式种子化的右侧栏。文件注释还解释了它与modeCustomizations的协作basic/longitudinal 模式会从自身modeCustomizations种子panelSegmentation.disableEditing: true而此处mode阶段的值在其后应用同在 Mode 作用域内、按应用顺序后者胜出从而把编辑功能重新打开。这正是迁移指南 mode-extensibility.md 中enableSegmentationEdit被modeCustomizations取代一节的运行时体现。segmentationAnnotationTools.jsonc追加测量面板该模块在 segmentation 模式的右侧栏追加测量面板是$push的典型用法{ mode: { segmentation: { cornerstone.segmentationModeToolbarSections: { primary: { $unshift: [MeasurementTools] }, MeasurementTools: { $set: [Length, Bidirectional, ArrowAnnotate, ...] } }, toolGroupAdditions: { default: { $push: [{ $reference: cornerstone.annotationTools }] }, mpr: { $push: [{ $reference: cornerstone.annotationTools }] } }, rightPanels: { $push: [ohif/extension-cornerstone.panelModule.panelMeasurement] } } } }两个模块的注释都强调了一个共同原则组合是逐模式进行的所有补丁都放在mode阶段、按目标模式的 route name 键控因为每个模式进入时都会把自身的toolbarButtons/toolbarSections/toolGroupAdditions/rightPanels种子到 Mode 作用域上这些块在其上$push/$set即可完全不需要 app 级的global键。迁移注意事项迁移指南原文列出了两条明确的迁移要求3.12 用户升级到 3.13 时务必核对现有模式无需任何改动。字面量面板数组本就是标准形式现在也自动成为可定制形式没有自定义化需求的部署可以直接升级。早期 3.13 beta 的逐模式列表名已被移除。如果你曾针对basic.leftPanels、longitudinal.rightPanels、segmentation.rightPanels或tmtv.leftPanels写过定制需要改为在mode阶段块中、以该模式的 route name 为键使用标准键leftPanels/rightPanels即上文示例的写法。此外若你的定制同时依赖?customizationURL 加载能力注意该能力在 3.13 中是默认关闭的需要在 app config 顶层配置customizationUrlPrefixes白名单例如{ default: ./customizations/ }才能通过?customizationsegmentation/segmentationEditing加载上述模块未配置前缀的值会直接抛错并中止启动。相关细节见 customization-url.md。小结OHIF Viewers 3.13 将模式侧边栏面板列表收编为标准定制项是模式生命周期正则化见 mode-extensibility.md思路的延续不再有硬编码的特殊面板开关一切由定制服务的作用域优先级global mode default加应用顺序统一裁决。对开发者而言升级 3.13 后获得的能力是——无需修改模式源码即可按模式route name、按全局、按命令式组合$set/$push/$unshift自由编排左右侧边栏内置的 segmentationEditing.jsonc 与 segmentationAnnotationTools.jsonc 就是可以直接复用的最佳范本。【免费下载链接】ViewersOHIF zero-footprint DICOM viewer and oncology specific Lesion Tracker, plus shared extension packages项目地址: https://gitcode.com/GitHub_Trending/vi/Viewers创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考