拓冰网站定制 
前端UI组件【免费下载链接】jointA proven SVG-based JavaScript diagramming library powering exceptional UIs项目地址https://gitcode.com/gh_mirrors/jo/joint点击查看免费下载导读本文围绕 JointJS 官方示例 hover-element-connect-tool-js 展开讲解如何在元素上以拖拽即连线的方式创建链接且连接工具仅在用户悬停到元素路径时出现、并跟随鼠标移动。读者读完本文后将掌握elementTools.HoverConnect工具的配置方法、Paper的连接策略与校验配置以及该工具在joint/core源码中的底层实现原理可直接复制到自己的 JointJS 项目中实现同类交互。功能概览什么是 HoverConnect在常规 JointJS 应用中连接工具通常常驻于元素上随时可以拖拽出连线。而本示例解决的是一个更精细的交互需求需要以拖拽drag drop方式从元素创建链接但希望连接工具只在用户悬停到元素路径时才出现并且工具按钮会出现在鼠标当前所处的位置。其核心机制是在每个元素上铺设一条隐形轨道路径invisible track path当鼠标进入该路径区域时连接工具一个圆形按钮才显示出来鼠标在轨道上移动时按钮沿轨道跟随移动点击按钮并拖拽即可拉出一条新的连线。全部行为由joint/core提供的elementTools.HoverConnect工具实现无需任何额外插件。快速开始安装、开发、构建与预览示例位于 monorepo 的examples/hover-element-connect-tool-js目录依赖joint/coreworkspace 引用与 Vite。从仓库根目录安装并构建全部依赖yarn install yarn run build进入示例目录启动开发服务器cd examples/hover-element-connect-tool-js yarn dev终端会打印出本地地址通常为http://localhost:5173用浏览器打开即可交互体验。生成生产构建与本地预览yarn build # 产物输出到 dist/ 目录 yarn preview # 本地预览生产构建对应的脚本定义在 package.json 中dev为vitebuild为tsc vite buildpreview为vite preview。示例结构examples/hover-element-connect-tool-js/ ├── assets/jointjs-logo-black.svg # 页面角落的 JointJS Logo ├── src/ │ ├── main.js # 全部示例逻辑 │ └── styles.css # 画布全屏布局样式 ├── index.html # 页面入口挂载 #paper-container ├── README.md └── package.jsonindex.html 中只包含一个全屏的#paper-container容器与页面 Logo示例逻辑全部集中在 src/main.js。核心实现剖析从 Paper 配置到工具挂载1. 创建 Graph 与 Paperconst graph new dia.Graph({}, { cellNamespace: shapes }); const paper new dia.Paper({ model: graph, cellViewNamespace: shapes, width: 100%, height: 100%, gridSize: 20, async: true, sorting: dia.Paper.sorting.APPROX, background: { color: #F3F7F6 }, defaultLink: () new shapes.standard.Link(), ... });画布开启了异步渲染async: true、近似排序sorting: APPROX、20px 网格并使用defaultLink指定拖拽连线时默认创建的链接类型为shapes.standard.Link。2. 连接校验与连接策略validateConnection: (srcView, _, tgtView) { const src srcView.model; const tgt tgtView.model; if (src.isLink() || tgt.isLink()) return false; if (src tgt) return false; return true; }, defaultConnectionPoint: { name: anchor }, connectionStrategy: (end, view, magnet, coords) { const bbox view.getNodeUnrotatedBBox(magnet); const p bbox.pointNearestToPoint(coords); return connectionStrategies.pinRelative(end, view, magnet, p); }, snapLinks: { radius: 10 }, linkPinning: false这几项配置共同决定了拖拽连线的体验validateConnection禁止从链接连到链接、也禁止元素自连保证连线只发生在两个不同元素之间defaultConnectionPoint默认连接点使用anchor让连线端点锚定在元素几何上connectionStrategy拖拽过程中端点位置取鼠标坐标在磁铁magnet包围盒上的最近点再通过connectionStrategies.pinRelative以相对比例固定pin到目标元素上snapLinks: { radius: 10 }当鼠标靠近可连接目标 10px 范围内时自动吸附linkPinning: false链接两端必须连接到元素不能悬空。此外paper.setGrid(mesh)将网格模式切换为 mesh使拖拽出的连线端点随网格对齐。3. 为元素挂载 HoverConnect 工具const tools new dia.ToolsView({ tools: [new elementTools.HoverConnect()] }); rectangle.findView(paper).addTools(tools);对每个矩形元素示例中有两个shapes.standard.Rectangle创建一个dia.ToolsView放入一个elementTools.HoverConnect实例再通过findView(paper).addTools(tools)挂到对应元素的视图上。这就是悬停才显示连接按钮的全部挂载逻辑——工具本身自带了轨道路径与鼠标跟随行为。源码级原理HoverConnect 是如何悬停跟随的1. 两层结构透明轨道 隐藏按钮HoverConnect定义在 packages/joint-core/src/cellTools/HoverConnect.mjs基类适用于元素与链接其children()渲染出两层结构track一条stroke: transparent、stroke-width默认 15由options.trackWidth控制的隐形路径cursor: pointer负责接收鼠标事件button一个display: none的组内含默认的圆形按钮与连线图标 markup深色圆 白色十字箭头初始隐藏。也就是说只有悬停才显示工具是通过button的显隐切换实现的轨道本身始终存在以捕获悬停。2. 事件流进入、移动、离开events: Object.assign({ mousemove: onMousemove, mouseenter: onMouseenter, mouseleave: onMouseleave }, Connect.prototype.events)onMouseenter若canShowButton()Paper 事件仍处于委托状态为真则showButton()显示按钮onMousemove调用getTrackRatioFromEvent(evt)把鼠标坐标投影到轨道路径上得到长度比例存入options.distance再调用position()让按钮沿路径移动onMouseleavehideButton()隐藏按钮。getTrackRatioFromEvent的实现要点先把clientX/clientY通过paper.clientToLocalPoint转为本地坐标再经轨道矩阵逆变换最后用trackPath.closestPointLength(trackPoint)得到鼠标在路径上的最近投影长度——这正是按钮跟随鼠标的数学基础。3. 按钮定位沿路径切线的矩阵计算position()通过getButtonMatrix()计算按钮变换矩阵在轨道路径上取options.distance默认 0支持百分比如50%处对应的切线以切线起点为位置、切线方向为旋转角再叠加offset平移与可选scale缩放当rotate为 false 时取消路径方向的旋转。轨道自身的矩阵由getTrackMatrix()提供。绘制时机在update()中getTrackPath()得到路径数据后通过childNodes.track.setAttribute(d, ...)写入轨道。4. 元素场景的轨道路径calc 表达式元素版的elementTools.HoverConnectpackages/joint-core/src/elementTools/HoverConnect.mjs覆写了getTrackPath()默认轨道路径为M 0 0 H calc(w) V calc(h) H 0 Z即绕元素包围盒一周的矩形轮廓。calc(w)、calc(h)会被代入元素的实际宽高求值trackPath也支持传入函数接收元素视图返回任意 SVG path 数据从而可把轨道定制为任意形状——例如只沿元素某条边或某个子路径悬停。元素版还新增了若干选项useModelGeometry决定使用模型几何还是视图几何计算包围盒relativecalc 表达式中宽高是否相对于视图包围盒rotate轨道矩阵是否随元素旋转角旋转getTrackMatrixAbsolute()会以包围盒中心为原点构造矩阵。测试代码 packages/joint-core/test/ts/toolsView.test.ts#L60-L64 给出了这些选项的合法用法new elementTools.HoverConnect({ useModelGeometry: true, trackWidth: 10, trackPath: (view) view.model.attr([body, d]), });其中trackPath返回元素body子元素的d属性即沿着元素实际形状的轮廓悬停是定制化路径的一个典型范式。5. 拖拽连线继承自 Connect 的文档级事件HoverConnect继承自Connectpackages/joint-core/src/cellTools/Connect.mjs拖拽行为全部复用自后者documentEvents: { mousemove: drag, touchmove: drag, mouseup: dragend, touchend: dragend, touchcancel: dragend }按下按钮触发dragstartrelatedView.dragLinkStart(...)随后在 document 级监听mousemove/mouseup完成dragLink与dragLinkEnd支持鼠标与触摸两种输入。options.magnet可指定拖拽连线的磁铁节点默认取元素视图根节点也支持选择器字符串或 SVGElementoptions.action可自定义按下时的行为。得益于validateConnection、snapLinks与connectionStrategy的组合拖拽出的链接会自动吸附并固定到目标元素上。常用配置选项速查选项类型默认值说明trackWidthnumber15隐形轨道的描边宽度即悬停热区宽度distancenumber | string0按钮在轨道上的初始位置支持50%等百分比offsetnumber0按钮相对路径切线的偏移量rotateboolean—按钮是否随路径切线方向旋转scalenumber—按钮缩放系数markuparray默认圆形箭头自定义按钮的 SVG markupmagnetfunction | string | SVGElement元素视图根节点拖拽连线的磁铁节点actionfunction触发dragstart按下按钮时的动作trackPathstring | functionM 0 0 H calc(w) V calc(h) H 0 Z元素版轨道路径数据或返回路径的函数useModelGeometryboolean—元素版使用模型几何计算包围盒relativeboolean—元素版calc 表达式是否相对视图包围盒样式说明src/styles.css 将#paper-container设为绝对定位并撑满四边overflow: scroll使画布铺满整个视口页面角落的 Logo 添加了白底、边框与投影的浮层样式。示例本身不依赖任何外部 UI 库。小结通过本示例可以总结出在 JointJS 中实现悬停式连接工具的完整套路用dia.ToolsViewelementTools.HoverConnect为元素挂载工具通过trackPathcalc 表达式或函数定制悬停轨道形状用trackWidth控制热区宽度配合 Paper 的validateConnection、connectionStrategy、snapLinks、linkPinning等配置获得完整、可校验的拖拽连线体验拖拽交互复用Connect的文档级事件天然支持触摸输入。需要更深入的实现细节可继续阅读 cellTools/HoverConnect.mjs、elementTools/HoverConnect.mjs 与 Connect.mjs 三份源码它们共同构成了 HoverConnect 的完整行为闭环。赞分享前端UI组件【免费下载链接】jointA proven SVG-based JavaScript diagramming library powering exceptional UIs项目地址https://gitcode.com/gh_mirrors/jo/joint点击查看免费下载相关推荐JointJS 悬停链路连接工具Hover Connect Tool实战指南从链路拖拽创建新连接JointJS 悬停链路连接工具Hover Connect Tool实战指南从链路拖拽创建新连接 本篇技术指南以 JointJS 官方示例 hover l前端UI组件JointJS 曲线连接器Curve Connector实战用动态曲线连接元素JointJS 曲线连接器Curve Connector实战用动态曲线连接元素 JointJS 的 curve 连接器connector能够生成一条随前端UI组件NonSteamLaunchers SD卡支持完全指南释放你的Steam Deck存储空间NonSteamLaunchers SD卡支持完全指南释放你的Steam Deck存储空间 NonSteamLaunchers是一款专为Steam Deck设上一篇OpenShell 社区 Issue 分流实战指南triage-issue 技能的状态机、七步工作流与人工决策边界下一篇暗黑2存档编辑器 d2s-editor 实战指南从旧档复活到一键成型本地浏览器全流程操作创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 JointJS 悬停连接工具 HoverConnect 实战：基于元素路径的拖拽连线交互指南
前端UI组件【免费下载链接】jointA proven SVG-based JavaScript diagramming library powering exceptional UIs项目地址https://gitcode.com/gh_mirrors/jo/joint点击查看免费下载导读本文围绕 JointJS 官方示例 hover-element-connect-tool-js 展开讲解如何在元素上以拖拽即连线的方式创建链接且连接工具仅在用户悬停到元素路径时出现、并跟随鼠标移动。读者读完本文后将掌握elementTools.HoverConnect工具的配置方法、Paper的连接策略与校验配置以及该工具在joint/core源码中的底层实现原理可直接复制到自己的 JointJS 项目中实现同类交互。功能概览什么是 HoverConnect在常规 JointJS 应用中连接工具通常常驻于元素上随时可以拖拽出连线。而本示例解决的是一个更精细的交互需求需要以拖拽drag drop方式从元素创建链接但希望连接工具只在用户悬停到元素路径时才出现并且工具按钮会出现在鼠标当前所处的位置。其核心机制是在每个元素上铺设一条隐形轨道路径invisible track path当鼠标进入该路径区域时连接工具一个圆形按钮才显示出来鼠标在轨道上移动时按钮沿轨道跟随移动点击按钮并拖拽即可拉出一条新的连线。全部行为由joint/core提供的elementTools.HoverConnect工具实现无需任何额外插件。快速开始安装、开发、构建与预览示例位于 monorepo 的examples/hover-element-connect-tool-js目录依赖joint/coreworkspace 引用与 Vite。从仓库根目录安装并构建全部依赖yarn install yarn run build进入示例目录启动开发服务器cd examples/hover-element-connect-tool-js yarn dev终端会打印出本地地址通常为http://localhost:5173用浏览器打开即可交互体验。生成生产构建与本地预览yarn build # 产物输出到 dist/ 目录 yarn preview # 本地预览生产构建对应的脚本定义在 package.json 中dev为vitebuild为tsc vite buildpreview为vite preview。示例结构examples/hover-element-connect-tool-js/ ├── assets/jointjs-logo-black.svg # 页面角落的 JointJS Logo ├── src/ │ ├── main.js # 全部示例逻辑 │ └── styles.css # 画布全屏布局样式 ├── index.html # 页面入口挂载 #paper-container ├── README.md └── package.jsonindex.html 中只包含一个全屏的#paper-container容器与页面 Logo示例逻辑全部集中在 src/main.js。核心实现剖析从 Paper 配置到工具挂载1. 创建 Graph 与 Paperconst graph new dia.Graph({}, { cellNamespace: shapes }); const paper new dia.Paper({ model: graph, cellViewNamespace: shapes, width: 100%, height: 100%, gridSize: 20, async: true, sorting: dia.Paper.sorting.APPROX, background: { color: #F3F7F6 }, defaultLink: () new shapes.standard.Link(), ... });画布开启了异步渲染async: true、近似排序sorting: APPROX、20px 网格并使用defaultLink指定拖拽连线时默认创建的链接类型为shapes.standard.Link。2. 连接校验与连接策略validateConnection: (srcView, _, tgtView) { const src srcView.model; const tgt tgtView.model; if (src.isLink() || tgt.isLink()) return false; if (src tgt) return false; return true; }, defaultConnectionPoint: { name: anchor }, connectionStrategy: (end, view, magnet, coords) { const bbox view.getNodeUnrotatedBBox(magnet); const p bbox.pointNearestToPoint(coords); return connectionStrategies.pinRelative(end, view, magnet, p); }, snapLinks: { radius: 10 }, linkPinning: false这几项配置共同决定了拖拽连线的体验validateConnection禁止从链接连到链接、也禁止元素自连保证连线只发生在两个不同元素之间defaultConnectionPoint默认连接点使用anchor让连线端点锚定在元素几何上connectionStrategy拖拽过程中端点位置取鼠标坐标在磁铁magnet包围盒上的最近点再通过connectionStrategies.pinRelative以相对比例固定pin到目标元素上snapLinks: { radius: 10 }当鼠标靠近可连接目标 10px 范围内时自动吸附linkPinning: false链接两端必须连接到元素不能悬空。此外paper.setGrid(mesh)将网格模式切换为 mesh使拖拽出的连线端点随网格对齐。3. 为元素挂载 HoverConnect 工具const tools new dia.ToolsView({ tools: [new elementTools.HoverConnect()] }); rectangle.findView(paper).addTools(tools);对每个矩形元素示例中有两个shapes.standard.Rectangle创建一个dia.ToolsView放入一个elementTools.HoverConnect实例再通过findView(paper).addTools(tools)挂到对应元素的视图上。这就是悬停才显示连接按钮的全部挂载逻辑——工具本身自带了轨道路径与鼠标跟随行为。源码级原理HoverConnect 是如何悬停跟随的1. 两层结构透明轨道 隐藏按钮HoverConnect定义在 packages/joint-core/src/cellTools/HoverConnect.mjs基类适用于元素与链接其children()渲染出两层结构track一条stroke: transparent、stroke-width默认 15由options.trackWidth控制的隐形路径cursor: pointer负责接收鼠标事件button一个display: none的组内含默认的圆形按钮与连线图标 markup深色圆 白色十字箭头初始隐藏。也就是说只有悬停才显示工具是通过button的显隐切换实现的轨道本身始终存在以捕获悬停。2. 事件流进入、移动、离开events: Object.assign({ mousemove: onMousemove, mouseenter: onMouseenter, mouseleave: onMouseleave }, Connect.prototype.events)onMouseenter若canShowButton()Paper 事件仍处于委托状态为真则showButton()显示按钮onMousemove调用getTrackRatioFromEvent(evt)把鼠标坐标投影到轨道路径上得到长度比例存入options.distance再调用position()让按钮沿路径移动onMouseleavehideButton()隐藏按钮。getTrackRatioFromEvent的实现要点先把clientX/clientY通过paper.clientToLocalPoint转为本地坐标再经轨道矩阵逆变换最后用trackPath.closestPointLength(trackPoint)得到鼠标在路径上的最近投影长度——这正是按钮跟随鼠标的数学基础。3. 按钮定位沿路径切线的矩阵计算position()通过getButtonMatrix()计算按钮变换矩阵在轨道路径上取options.distance默认 0支持百分比如50%处对应的切线以切线起点为位置、切线方向为旋转角再叠加offset平移与可选scale缩放当rotate为 false 时取消路径方向的旋转。轨道自身的矩阵由getTrackMatrix()提供。绘制时机在update()中getTrackPath()得到路径数据后通过childNodes.track.setAttribute(d, ...)写入轨道。4. 元素场景的轨道路径calc 表达式元素版的elementTools.HoverConnectpackages/joint-core/src/elementTools/HoverConnect.mjs覆写了getTrackPath()默认轨道路径为M 0 0 H calc(w) V calc(h) H 0 Z即绕元素包围盒一周的矩形轮廓。calc(w)、calc(h)会被代入元素的实际宽高求值trackPath也支持传入函数接收元素视图返回任意 SVG path 数据从而可把轨道定制为任意形状——例如只沿元素某条边或某个子路径悬停。元素版还新增了若干选项useModelGeometry决定使用模型几何还是视图几何计算包围盒relativecalc 表达式中宽高是否相对于视图包围盒rotate轨道矩阵是否随元素旋转角旋转getTrackMatrixAbsolute()会以包围盒中心为原点构造矩阵。测试代码 packages/joint-core/test/ts/toolsView.test.ts#L60-L64 给出了这些选项的合法用法new elementTools.HoverConnect({ useModelGeometry: true, trackWidth: 10, trackPath: (view) view.model.attr([body, d]), });其中trackPath返回元素body子元素的d属性即沿着元素实际形状的轮廓悬停是定制化路径的一个典型范式。5. 拖拽连线继承自 Connect 的文档级事件HoverConnect继承自Connectpackages/joint-core/src/cellTools/Connect.mjs拖拽行为全部复用自后者documentEvents: { mousemove: drag, touchmove: drag, mouseup: dragend, touchend: dragend, touchcancel: dragend }按下按钮触发dragstartrelatedView.dragLinkStart(...)随后在 document 级监听mousemove/mouseup完成dragLink与dragLinkEnd支持鼠标与触摸两种输入。options.magnet可指定拖拽连线的磁铁节点默认取元素视图根节点也支持选择器字符串或 SVGElementoptions.action可自定义按下时的行为。得益于validateConnection、snapLinks与connectionStrategy的组合拖拽出的链接会自动吸附并固定到目标元素上。常用配置选项速查选项类型默认值说明trackWidthnumber15隐形轨道的描边宽度即悬停热区宽度distancenumber | string0按钮在轨道上的初始位置支持50%等百分比offsetnumber0按钮相对路径切线的偏移量rotateboolean—按钮是否随路径切线方向旋转scalenumber—按钮缩放系数markuparray默认圆形箭头自定义按钮的 SVG markupmagnetfunction | string | SVGElement元素视图根节点拖拽连线的磁铁节点actionfunction触发dragstart按下按钮时的动作trackPathstring | functionM 0 0 H calc(w) V calc(h) H 0 Z元素版轨道路径数据或返回路径的函数useModelGeometryboolean—元素版使用模型几何计算包围盒relativeboolean—元素版calc 表达式是否相对视图包围盒样式说明src/styles.css 将#paper-container设为绝对定位并撑满四边overflow: scroll使画布铺满整个视口页面角落的 Logo 添加了白底、边框与投影的浮层样式。示例本身不依赖任何外部 UI 库。小结通过本示例可以总结出在 JointJS 中实现悬停式连接工具的完整套路用dia.ToolsViewelementTools.HoverConnect为元素挂载工具通过trackPathcalc 表达式或函数定制悬停轨道形状用trackWidth控制热区宽度配合 Paper 的validateConnection、connectionStrategy、snapLinks、linkPinning等配置获得完整、可校验的拖拽连线体验拖拽交互复用Connect的文档级事件天然支持触摸输入。需要更深入的实现细节可继续阅读 cellTools/HoverConnect.mjs、elementTools/HoverConnect.mjs 与 Connect.mjs 三份源码它们共同构成了 HoverConnect 的完整行为闭环。赞分享前端UI组件【免费下载链接】jointA proven SVG-based JavaScript diagramming library powering exceptional UIs项目地址https://gitcode.com/gh_mirrors/jo/joint点击查看免费下载相关推荐JointJS 悬停链路连接工具Hover Connect Tool实战指南从链路拖拽创建新连接JointJS 悬停链路连接工具Hover Connect Tool实战指南从链路拖拽创建新连接 本篇技术指南以 JointJS 官方示例 hover l前端UI组件JointJS 曲线连接器Curve Connector实战用动态曲线连接元素JointJS 曲线连接器Curve Connector实战用动态曲线连接元素 JointJS 的 curve 连接器connector能够生成一条随前端UI组件NonSteamLaunchers SD卡支持完全指南释放你的Steam Deck存储空间NonSteamLaunchers SD卡支持完全指南释放你的Steam Deck存储空间 NonSteamLaunchers是一款专为Steam Deck设上一篇OpenShell 社区 Issue 分流实战指南triage-issue 技能的状态机、七步工作流与人工决策边界下一篇暗黑2存档编辑器 d2s-editor 实战指南从旧档复活到一键成型本地浏览器全流程操作创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考