尧图网站建设 
X6 高亮器Highlighter完全指南内置高亮器、Graph 配置与自定义注册【免费下载链接】X6 JavaScript diagramming library that uses SVG and HTML for rendering.项目地址: https://gitcode.com/GitHub_Trending/x6/X6X6 是一款使用 SVG 与 HTML 进行渲染的 JavaScript 图编辑引擎其高亮器Highlighter机制用于在特定交互发生时高亮指定的元素节点、边或连接桩 magnet例如连线过程中提示哪些节点/连接桩可被连接。本文以官方文档 site/docs/api/registry/highlighter.zh.md 为核心骨架结合源码 src/registry/highlighter 与 src/graph/highlight.ts 的实现细节系统讲解内置高亮器、highlighting配置、高亮触发机制以及如何定义并注册自定义高亮器。读完本文你将能熟练使用与扩展 X6 的整套高亮体系。一、高亮器概述X6 内置的两种高亮器节点/边的高亮器用于高亮指定的元素。X6 内置了以下两种高亮器名称说明stroke边框高亮器沿元素的包围盒渲染一个高亮的边框。className样式名高亮器通过添加额外的样式名来高亮元素。需要说明的是在 X6 源码中这两种内置高亮器分别位于 src/registry/highlighter/stroke.ts 与 src/registry/highlighter/class.ts并由 src/registry/highlighter/index.ts 通过Registry.create({ type: highlighter })统一注册进高亮器注册表。此外源码目录中还提供了opacity透明度高亮器作为自定义示例注册表文件 src/registry/highlighter/main.ts 同时导出了class、opacity、stroke三个实现。二、通过 Graph 的 highlighting 选项配置高亮创建 Graph 时可以通过highlighting选项来指定触发某种交互时的高亮样式。例如当连接桩可以被链接时在连接桩外围渲染一个 2px 宽的红色矩形框import { Graph } from antv/x6 new Graph({ container: document.getElementById(container), highlighting: { // 当连接桩可以被链接时在连接桩外围渲染一个 2px 宽的红色矩形框 magnetAvailable: { name: stroke, args: { padding: 4, attrs: { stroke-width: 2, stroke: red, }, }, }, }, })2.1 支持的 highlighting 配置项highlighting支持以下几种配置项每种配置项对应一种交互场景取值是一个{ name, args }对象name为高亮器名称args为传给该高亮器的参数default默认高亮选项当以下几种高亮配置缺省时被使用。embedding拖动节点进行嵌入操作过程中节点可以被嵌入时被使用。nodeAvailable连线过程中节点可以被链接时被使用。magnetAvailable连线过程中连接桩可以被链接时被使用。magnetAdsorbed连线过程中自动吸附到连接桩时被使用。上述配置项在源码 src/graph/options.ts 中被定义为Highlighting接口default为必填项其余均为可选项可设置为null关闭该场景的高亮。2.2 默认配置一览X6 在 src/graph/options.ts 中为highlighting提供了如下默认值这也是开箱即用的交互提示效果highlighting: { default: { name: stroke, args: { padding: 3, }, }, nodeAvailable: { name: className, args: { className: Config.prefix(available-node), }, }, magnetAvailable: { name: className, args: { className: Config.prefix(available-magnet), }, }, },可见默认情况下未指定场景的高亮使用stroke边框高亮padding 为 3节点可被连接与连接桩可被连接时使用className高亮器分别添加x6-available-node、x6-available-magnet样式名Config.prefix负责加x6-前缀。2.3 高亮的解析与触发链路从源码看highlighting配置由 src/graph/highlight.ts 中的HighlightManager消费其核心解析逻辑为resolveHighlightersrc/graph/highlight.ts若事件选项中显式传入了highlighter则优先使用它否则根据事件的type如embedding、nodeAvailable、magnetAvailable、magnetAdsorbed去graphOptions.highlighting[type]查找若仍未命中则回退到graphOptions.highlighting.default最终通过highlighterRegistry.get(name)从注册表取出高亮器实例。触发链路的入口是视图层的CellView.highlight()/unhighlight()方法src/view/cell/index.ts它们会向 graph 派发cell:highlight/cell:unhighlight事件事件类型定义见 src/view/cell/type.tsHighlightManager监听这两个事件后执行对应高亮器的highlight/unhighlight方法并通过高亮器名称 magnet id args 序列化生成缓存 key确保同一元素不会重复高亮src/graph/highlight.ts。三、内置高亮器详解3.1 stroke边框高亮器边框高亮器沿元素的包围盒渲染一个高亮的边框。其参数如下参数名类型默认值说明rxnumber0边框倒角圆角半径 x。rynumber0边框倒角圆角半径 y。paddingnumber3边距向外扩张的像素值。attrsobject{ stroke-width: 3, stroke: #FEB663 }边框元素属性。以上参数类型与默认值均可在源码 src/registry/highlighter/stroke.ts 中确认。底层实现原理从 src/registry/highlighter/stroke.ts 的highlight实现可以了解其工作方式先为 magnet 元素生成唯一 id并判断该元素是否已缓存高亮结果hasCache避免重复渲染通过Vector.create(magnet).toPathData()尝试将 magnet 元素转换为 SVG 路径数据如果失败例如某些 HTML 元素无法转为 path则退化为用Dom.rectToPathData沿整个 cellView 的包围盒绘制一个矩形边框创建一个path元素设置d、pointer-events: none不拦截鼠标事件、vector-effect: non-scaling-stroke缩放画布时描边宽度不随缩放变化、fill: none并将args.attrs通过Dom.kebablizeAttrs转为 SVG 属性后合并上去若被高亮元素属于边cellView.isEdgeElement(magnet)则直接用边的连接路径数据getConnectionPathData()作为d否则计算 magnet 到 cellView 容器的变换矩阵并依据padding构造一个以元素中心为基准的缩放矩阵sx (width padding) / width、sy (height padding) / height让边框向外扩张padding像素最后将路径追加到cellView.container并监听 cell 的removed与 model 的reseted事件在元素被移除时自动清除高亮缓存。unhighlight则根据相同的 id 直接移除缓存中的高亮元素src/registry/highlighter/stroke.ts。对应的单元测试tests/registry/highlighter/stroke.spec.ts 验证了为普通元素创建高亮路径缺少 attrs 选项缺少 padding 选项等场景下的属性设置行为。3.2 className样式名高亮器样式名高亮器通过添加额外的样式名来高亮元素。其参数如下参数名类型默认值说明classNamestringx6-highlighted样式名。源码 src/registry/highlighter/class.ts 的实现非常简洁highlight时调用Dom.addClass(magnet, cls)为目标元素添加样式名unhighlight时调用Dom.removeClass(magnet, cls)移除样式名。默认样式名由Config.prefix(highlighted)生成即x6-highlighted。实际使用时你需要自己在全局样式表CSS/LESS中定义该样式名对应的视觉样式例如.x6-highlighted { stroke: #1890ff; stroke-width: 2px; outline: 2px solid #1890ff; }这样className高亮器才会产生可见的高亮效果。四、自定义高亮器4.1 高亮器的接口签名高亮器是一个具有如下签名的对象该对象中包含highlight和unhighlight两个方法分别用于高亮和取消高亮元素export interface DefinitionT { highlight: (cellView: CellView, magnet: Element, options: T) void unhighlight: (cellView: CellView, magnet: Element, options: T) void }参数名类型默认值说明cellViewCellView视图节点/边的视图实例。magnetElement被高亮的元素DOM 元素。optionsT高亮选项泛型由具体实现定义。该接口在 src/registry/highlighter/index.ts 中被定义为HighlighterDefinitionT。注册表在注册时会通过highlighterCheck校验highlight与unhighlight均为函数否则抛出Highlighter name is missing required highlight()/unhighlight() method错误src/registry/highlighter/index.ts。4.2 完整示例定义一个 opacity 高亮器下面定义一个名为opacity的高亮器该高亮器为元素添加一个highlight-opacity样式名import { Dom } from antv/x6 import type { Highlighter } from antv/x6 export interface OpacityHighlighterOptions {} const className highlight-opacity export const opacity: Highlighter.DefinitionOpacityHighlighterOptions { highlight(cellView, magnet) { Dom.addClass(magnet, className) }, unhighlight(cellView, magnetEl) { Dom.removeClass(magnetEl, className) }, }这个示例正是仓库中 src/registry/highlighter/opacity.ts 的实现实际代码中样式名通过Config.prefix(highlight-opacity)生成x6-highlight-opacity对应的测试tests/registry/highlighter/opacity.spec.ts 验证了它会对元素添加/移除x6-highlight-opacity类名。完成定义后就可以注册我们的高亮器Graph.registerHighlighter(opacity, opacity, true)第三个参数force为true表示强制覆盖同名注册项。Graph.registerHighlighter在 src/graph/graph.ts 中被静态绑定到注册表的register方法同时还有对应的Graph.unregisterHighlighter其底层实现支持两种调用形式批量注册register({ opacity }, force)或单例注册register(opacity, opacity, force)src/registry/registry.ts。然后我们就可以通过opacity字符串来使用该高亮器了new Graph({ highlighting: { magnetAvailable: { name: opacity, }, }, })4.3 自定义高亮器实战建议高亮与取消必须成对highlight中做的任何 DOM 变更加类、插入元素、改属性都应在unhighlight中对称还原避免高亮残留。善用args参数若高亮器需要可配置项请在highlighting配置中通过args传入如padding、attrs、className等并在highlight(cellView, magnet, options)中读取。渲染开销控制可参考stroke高亮器的缓存机制对同一元素避免重复创建高亮 DOM元素被删除或模型被重置时记得清理。五、总结X6 的高亮器体系由三部分构成内置高亮器stroke沿包围盒绘制边框支持rx/ry/padding/attrs与className为元素添加样式名支持自定义className配置入口Graph 的highlighting选项覆盖default、embedding、nodeAvailable、magnetAvailable、magnetAdsorbed五种交互场景底层由HighlightManagersrc/graph/highlight.ts解析并执行扩展机制实现{ highlight, unhighlight }接口并通过Graph.registerHighlighter(name, definition, force)注册即可全局复用。如需深入源码推荐按以下顺序阅读高亮器注册表、内置实现、Graph 配置定义、HighlightManager、视图层触发入口并结合 stroke 与 opacity 的测试用例验证行为。【免费下载链接】X6 JavaScript diagramming library that uses SVG and HTML for rendering.项目地址: https://gitcode.com/GitHub_Trending/x6/X6创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 X6 高亮器（Highlighter）完全指南：内置高亮器、Graph 配置与自定义注册
X6 高亮器Highlighter完全指南内置高亮器、Graph 配置与自定义注册【免费下载链接】X6 JavaScript diagramming library that uses SVG and HTML for rendering.项目地址: https://gitcode.com/GitHub_Trending/x6/X6X6 是一款使用 SVG 与 HTML 进行渲染的 JavaScript 图编辑引擎其高亮器Highlighter机制用于在特定交互发生时高亮指定的元素节点、边或连接桩 magnet例如连线过程中提示哪些节点/连接桩可被连接。本文以官方文档 site/docs/api/registry/highlighter.zh.md 为核心骨架结合源码 src/registry/highlighter 与 src/graph/highlight.ts 的实现细节系统讲解内置高亮器、highlighting配置、高亮触发机制以及如何定义并注册自定义高亮器。读完本文你将能熟练使用与扩展 X6 的整套高亮体系。一、高亮器概述X6 内置的两种高亮器节点/边的高亮器用于高亮指定的元素。X6 内置了以下两种高亮器名称说明stroke边框高亮器沿元素的包围盒渲染一个高亮的边框。className样式名高亮器通过添加额外的样式名来高亮元素。需要说明的是在 X6 源码中这两种内置高亮器分别位于 src/registry/highlighter/stroke.ts 与 src/registry/highlighter/class.ts并由 src/registry/highlighter/index.ts 通过Registry.create({ type: highlighter })统一注册进高亮器注册表。此外源码目录中还提供了opacity透明度高亮器作为自定义示例注册表文件 src/registry/highlighter/main.ts 同时导出了class、opacity、stroke三个实现。二、通过 Graph 的 highlighting 选项配置高亮创建 Graph 时可以通过highlighting选项来指定触发某种交互时的高亮样式。例如当连接桩可以被链接时在连接桩外围渲染一个 2px 宽的红色矩形框import { Graph } from antv/x6 new Graph({ container: document.getElementById(container), highlighting: { // 当连接桩可以被链接时在连接桩外围渲染一个 2px 宽的红色矩形框 magnetAvailable: { name: stroke, args: { padding: 4, attrs: { stroke-width: 2, stroke: red, }, }, }, }, })2.1 支持的 highlighting 配置项highlighting支持以下几种配置项每种配置项对应一种交互场景取值是一个{ name, args }对象name为高亮器名称args为传给该高亮器的参数default默认高亮选项当以下几种高亮配置缺省时被使用。embedding拖动节点进行嵌入操作过程中节点可以被嵌入时被使用。nodeAvailable连线过程中节点可以被链接时被使用。magnetAvailable连线过程中连接桩可以被链接时被使用。magnetAdsorbed连线过程中自动吸附到连接桩时被使用。上述配置项在源码 src/graph/options.ts 中被定义为Highlighting接口default为必填项其余均为可选项可设置为null关闭该场景的高亮。2.2 默认配置一览X6 在 src/graph/options.ts 中为highlighting提供了如下默认值这也是开箱即用的交互提示效果highlighting: { default: { name: stroke, args: { padding: 3, }, }, nodeAvailable: { name: className, args: { className: Config.prefix(available-node), }, }, magnetAvailable: { name: className, args: { className: Config.prefix(available-magnet), }, }, },可见默认情况下未指定场景的高亮使用stroke边框高亮padding 为 3节点可被连接与连接桩可被连接时使用className高亮器分别添加x6-available-node、x6-available-magnet样式名Config.prefix负责加x6-前缀。2.3 高亮的解析与触发链路从源码看highlighting配置由 src/graph/highlight.ts 中的HighlightManager消费其核心解析逻辑为resolveHighlightersrc/graph/highlight.ts若事件选项中显式传入了highlighter则优先使用它否则根据事件的type如embedding、nodeAvailable、magnetAvailable、magnetAdsorbed去graphOptions.highlighting[type]查找若仍未命中则回退到graphOptions.highlighting.default最终通过highlighterRegistry.get(name)从注册表取出高亮器实例。触发链路的入口是视图层的CellView.highlight()/unhighlight()方法src/view/cell/index.ts它们会向 graph 派发cell:highlight/cell:unhighlight事件事件类型定义见 src/view/cell/type.tsHighlightManager监听这两个事件后执行对应高亮器的highlight/unhighlight方法并通过高亮器名称 magnet id args 序列化生成缓存 key确保同一元素不会重复高亮src/graph/highlight.ts。三、内置高亮器详解3.1 stroke边框高亮器边框高亮器沿元素的包围盒渲染一个高亮的边框。其参数如下参数名类型默认值说明rxnumber0边框倒角圆角半径 x。rynumber0边框倒角圆角半径 y。paddingnumber3边距向外扩张的像素值。attrsobject{ stroke-width: 3, stroke: #FEB663 }边框元素属性。以上参数类型与默认值均可在源码 src/registry/highlighter/stroke.ts 中确认。底层实现原理从 src/registry/highlighter/stroke.ts 的highlight实现可以了解其工作方式先为 magnet 元素生成唯一 id并判断该元素是否已缓存高亮结果hasCache避免重复渲染通过Vector.create(magnet).toPathData()尝试将 magnet 元素转换为 SVG 路径数据如果失败例如某些 HTML 元素无法转为 path则退化为用Dom.rectToPathData沿整个 cellView 的包围盒绘制一个矩形边框创建一个path元素设置d、pointer-events: none不拦截鼠标事件、vector-effect: non-scaling-stroke缩放画布时描边宽度不随缩放变化、fill: none并将args.attrs通过Dom.kebablizeAttrs转为 SVG 属性后合并上去若被高亮元素属于边cellView.isEdgeElement(magnet)则直接用边的连接路径数据getConnectionPathData()作为d否则计算 magnet 到 cellView 容器的变换矩阵并依据padding构造一个以元素中心为基准的缩放矩阵sx (width padding) / width、sy (height padding) / height让边框向外扩张padding像素最后将路径追加到cellView.container并监听 cell 的removed与 model 的reseted事件在元素被移除时自动清除高亮缓存。unhighlight则根据相同的 id 直接移除缓存中的高亮元素src/registry/highlighter/stroke.ts。对应的单元测试tests/registry/highlighter/stroke.spec.ts 验证了为普通元素创建高亮路径缺少 attrs 选项缺少 padding 选项等场景下的属性设置行为。3.2 className样式名高亮器样式名高亮器通过添加额外的样式名来高亮元素。其参数如下参数名类型默认值说明classNamestringx6-highlighted样式名。源码 src/registry/highlighter/class.ts 的实现非常简洁highlight时调用Dom.addClass(magnet, cls)为目标元素添加样式名unhighlight时调用Dom.removeClass(magnet, cls)移除样式名。默认样式名由Config.prefix(highlighted)生成即x6-highlighted。实际使用时你需要自己在全局样式表CSS/LESS中定义该样式名对应的视觉样式例如.x6-highlighted { stroke: #1890ff; stroke-width: 2px; outline: 2px solid #1890ff; }这样className高亮器才会产生可见的高亮效果。四、自定义高亮器4.1 高亮器的接口签名高亮器是一个具有如下签名的对象该对象中包含highlight和unhighlight两个方法分别用于高亮和取消高亮元素export interface DefinitionT { highlight: (cellView: CellView, magnet: Element, options: T) void unhighlight: (cellView: CellView, magnet: Element, options: T) void }参数名类型默认值说明cellViewCellView视图节点/边的视图实例。magnetElement被高亮的元素DOM 元素。optionsT高亮选项泛型由具体实现定义。该接口在 src/registry/highlighter/index.ts 中被定义为HighlighterDefinitionT。注册表在注册时会通过highlighterCheck校验highlight与unhighlight均为函数否则抛出Highlighter name is missing required highlight()/unhighlight() method错误src/registry/highlighter/index.ts。4.2 完整示例定义一个 opacity 高亮器下面定义一个名为opacity的高亮器该高亮器为元素添加一个highlight-opacity样式名import { Dom } from antv/x6 import type { Highlighter } from antv/x6 export interface OpacityHighlighterOptions {} const className highlight-opacity export const opacity: Highlighter.DefinitionOpacityHighlighterOptions { highlight(cellView, magnet) { Dom.addClass(magnet, className) }, unhighlight(cellView, magnetEl) { Dom.removeClass(magnetEl, className) }, }这个示例正是仓库中 src/registry/highlighter/opacity.ts 的实现实际代码中样式名通过Config.prefix(highlight-opacity)生成x6-highlight-opacity对应的测试tests/registry/highlighter/opacity.spec.ts 验证了它会对元素添加/移除x6-highlight-opacity类名。完成定义后就可以注册我们的高亮器Graph.registerHighlighter(opacity, opacity, true)第三个参数force为true表示强制覆盖同名注册项。Graph.registerHighlighter在 src/graph/graph.ts 中被静态绑定到注册表的register方法同时还有对应的Graph.unregisterHighlighter其底层实现支持两种调用形式批量注册register({ opacity }, force)或单例注册register(opacity, opacity, force)src/registry/registry.ts。然后我们就可以通过opacity字符串来使用该高亮器了new Graph({ highlighting: { magnetAvailable: { name: opacity, }, }, })4.3 自定义高亮器实战建议高亮与取消必须成对highlight中做的任何 DOM 变更加类、插入元素、改属性都应在unhighlight中对称还原避免高亮残留。善用args参数若高亮器需要可配置项请在highlighting配置中通过args传入如padding、attrs、className等并在highlight(cellView, magnet, options)中读取。渲染开销控制可参考stroke高亮器的缓存机制对同一元素避免重复创建高亮 DOM元素被删除或模型被重置时记得清理。五、总结X6 的高亮器体系由三部分构成内置高亮器stroke沿包围盒绘制边框支持rx/ry/padding/attrs与className为元素添加样式名支持自定义className配置入口Graph 的highlighting选项覆盖default、embedding、nodeAvailable、magnetAvailable、magnetAdsorbed五种交互场景底层由HighlightManagersrc/graph/highlight.ts解析并执行扩展机制实现{ highlight, unhighlight }接口并通过Graph.registerHighlighter(name, definition, force)注册即可全局复用。如需深入源码推荐按以下顺序阅读高亮器注册表、内置实现、Graph 配置定义、HighlightManager、视图层触发入口并结合 stroke 与 opacity 的测试用例验证行为。【免费下载链接】X6 JavaScript diagramming library that uses SVG and HTML for rendering.项目地址: https://gitcode.com/GitHub_Trending/x6/X6创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考