世俱杯 2025

JointJS+ v4.1.1 重磅更新:Visio 兼容性与交互体验双升级

翻译|产品更新|编辑:张蓉|2025-05-20 14:49:35.310|阅读 45 次

概述:JointJS+ 是一款强大的 JavaScript 图形开发工具包,基于 HTML5 技术构建,专为开发者提供可视化建模与流程图解决方案。它支持创建复杂的交互式图表,如业务流程图(BPMN)、组织结构图、网络拓扑图等,内置丰富的 UI 组件和布局引擎,并提供灵活的数据绑定与动态渲染能力。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

JointJS+ 是一款强大的 JavaScript 图形开发工具包,基于 HTML5 技术构建,专为开发者提供可视化建模与流程图解决方案。它支持创建复杂的交互式图表,如业务流程图(BPMN)、组织结构图、网络拓扑图等,内置丰富的 UI 组件和布局引擎,并提供灵活的数据绑定与动态渲染能力。

接下来为大家介绍一下它的4.1.1版本的主要更新内容:

JointJS+ 正版试用下载

应用程序

apps.BPMNPools
新增了对 phases 的导入/导出支持,现在从该应用程序导出的图表在重新导入时,phases 的显示效果能与导出前保持完全一致。
jointjs + changelog
格式
format.Visio
修复了文本注释的 colorTrans 选项使用问题,现在会正确地将其用于设置文本片段的不透明度(1 - colorTrans)。

解决了遇到无内容的 fld 元素时的错误,现在会将其内容默认设置为空字符串('')。

在导入过程中,若文件类型不在支持的列表(如 jpeg、jpg、png、bmp、gif、tiff、svg、webp、ico)中,JointJS 将不会将其作为图像使用,从而避免了错误。

针对空的 ref XML 文件,现在不会抛出异常,而是在浏览器控制台中记录一条调试信息,提示文件存在问题,但导入过程会继续正常进行。

JointJS 中的端口导出为 Visio 的 Connection XML,以便在连接时,这些 Connection 能作为链接的源和目标。默认情况下,端口边界框的中心会被设置为连接的终点,但可通过 portConnectionPoint 回调函数指定更精确的连接点。
默认情况下,端口边界框的中心被设置为端点,但可以通过端口连接点回调为创建的 Visio 连接指定精确点:
portConnectionPoint: (port, elementView) => {
const portNode = elementView.findPortNode(port.id);
const portBBox = elementView.getNodeBBox(portNode);

let y: number;
switch (port.group) {
case 'bottom':
y = portBBox.height;
break;
case 'top':
default:
y = 0;
break;
}
return {
x: portBBox.width / 2,
y: y
}
},

用户界面(ui)

ui.Halo
修复了在纸张的异步模式下,Halo 的更新可能会先于相关单元格视图更新的问题,避免了 Halo 定位不准确的情况。
ui.PaperScroller
修正了计算纸张内边距时的四舍五入错误,防止了不必要的滚动条出现。
ui.Selection
修复了 removeHandle() 方法,使其可以正常应用于隐藏的句柄。
ui.TextEditor
修正了占位符显示时背景位置不正确的问题,同时解决了当 textAnchor 设置为 'end' 时,光标位置与占位符末尾不匹配的问题。

布局(layout)

layout.DirectedGraph
修复了 nodesep、edgesep、ranksep 选项的值为 0 时的处理问题,现在会正确检查提供的值是否为数字。

模型 - 视图 - 控制器(mvc)

mvc.Dom
更新了 position() 方法,使用 window.getComputedStyle() 来准确获取当前被检查父元素的 position 属性值。
慧都科技是⼀家⾏业数字化解决⽅案公司,专注于软件、⽯油与⼯业领域,以深⼊的业务理解和⾏业经验,帮助企业实现智能化转型与持续竞争优势。
慧都科技作为 JointJS 的中国区合作伙伴,JointJS 是一款功能强大的 JavaScript 图形库,通过其丰富的 API 和组件,JointJS 支持创建复杂的图形界面和数据流程,适用于多种行业和应用场景。它提供了数据绑定、动态加载和交互式组件等功能,使开发者能够以简洁高效的代码实现灵活的布局设计和丰富的可视化效果。无论是构建流程图、网络拓扑图还是其他复杂的数据可视化应用,JointJS 都能显著提升开发效率,帮助企业快速交付高质量的项目,并缩短开发周期。

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@dpuzeg.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP