百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT技术 > 正文

还在找流程图控件?不如试试最新版本的GoJS

wptr33 2025-01-07 16:17 44 浏览

GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canvas 程序。

GoJS 2.1

新的动画功能

GoJS 2.1包含许多新功能,可为图表的不同组件制作动画。

  • 新的默认GoJS动画“逐渐消失”,而不是对Node位置进行动画处理。添加了AnimationManager.initialAnimationStyle以控制此行为。这是一个例子:

(顶部)新的初始动画,“图”位置向上动画,“图不透明度”从0到1动画。
(中部)一个自定义的“放大”动画,动画化了图比例,在新的状态图示例中进行了演示,
(底部)将AnimationManager.initialAnimationStyle设置为AnimationManager.AnimateLocations以执行GoJS 2.0和以前的动画样式。该数据可视化示例使用此选项。

  • 添加了"InitialAnimationStarting" DiagramEvent以更轻松地自定义初始动画。有关详细信息,请参见
  • AnimationManager.initialAnimationStyle。
  • 新类:AnimationTrigger。这些内容描述了如何在GraphObject更改值时自动为其设置动画。
  • 新课程:动画。此类允许您以声明方式设置自定义动画,并提供不确定动画的选项。
  • 新的AnimationManager选项,包括定义自定义动画效果以与AnimationManager.defineAnimationEffect
  • 新的动画示例和经修改以使用新的动画功能的示例:
    • 自定义动画 - 新示例:演示许多Node创建/删除动画,链接动画等。
    • 树负载动画 - 新示例:模型加载时的递归动画。
    • 流程图 -仅在组件面板中,禁用初始动画,而使用自定义淡入动画。
    • 状态图 -禁用初始动画,而使用自定义缩放淡入动画。
    • 数据可视化 -节点现在使用AnimationTrigger移动。
    • 小猫监视器 -小猫现在使用AnimationTrigger移动。
    • 处理流程 -链接的strokeDashArray的不确定动画。
    • 车间监视器 -链接颜色更改现在使用AnimationTrigger。

改进了对数据同步的支持

GoJS 2.1包含一些新方法,可简化GoJS图表在维护自己数据的应用程序(尤其是React应用程序)中的集成。

  • 新方法:Model.toIncrementalData。与现有方法Model.toIncrementalJson相似,此方法输出一个IncrementalData对象,该对象包含在Transaction中发生的更改。它可用于使外部数据与GoJS模型保持同步。
  • 新方法:Model.mergeNodeDataArray和GraphLinksModel.mergeLinkDataArray。这些方法用于将外部数据更改合并到GoJS模型中。
  • 新方法:Model.cloneDeep。此方法可用于制作对象的深层副本,这对于确保GoJS不会与外部状态共享引用很有用。还可以在Model.toIncrementalData中使用它,以确保IncrementalData的修改对象列表不包含对模型数据对象的引用。

2.1.1的更改

  • 修复了更新装饰品当有小号绑定从s Model.modelData 和该共享对象已经通过调用改性Model.set的问题。
  • 清理旧模时替换Diagram.model时提高了性能,这种情况很少会在调试模式下导致有关Node.isTreeLeaf的模糊警告。
  • 修复了使用序列化EnumValues加载模型的问题。
  • 并发动画的性能改进。
  • 修复了动画状态的一致性。这包括修改何时AnimationStarting和InitialAnimationStarting被调用,以及修复何时停止默认动画并立即启动另一个动画(例如在动画中间加载新模型时)的问题。
  • 修复了带有序列化EnumValues的Model.fromJson加载模型的问题。
  • 改进了在图之间拖动时显示非默认光标的功能。
  • 修复了在拖动Group元素时对Diagram.handlesDragDropForTopLevelParts的操作的问题。
  • 修复了在某些浏览器中Diagram.scrollHorizontalLineChange和Diagram.scrollVerticalLineChange不会影响滚动大小的错误的问题。
  • 修复了一个错误,该错误使某些避免节点链接无法在嵌套组中正确路由。

2.1.0的更改:

  • 将DoubleTreeLayout添加到了extensions和extensionsTS目录。Double Tree和Double Tree JSON示例现在都使用此 方法。将“ ChangingSelection”和“ ChangedSelection” DiagramEvent的顺序更新为命令和工具的事务之外。例外包括在拖动复制或插入链接时在“拖动”和“链接”操作期间调用“ ChangingSelection”。在事务完成之后发生“ ChangedSelection”时,所有更改都将完成并且可以在侦听器中使用。
  • 现在,默认情况下,CommandHandler.zoomToFit会设置动画。
  • 改进了ContextMenuTool.defaultTouchContextMenu的“粘贴”命令,以使用ContextMenuTool.mouseDownPoint 而不是Diagram.lastInput的InputEvent.documentPoint。
  • 添加了新属性Diagram.opacity。这对于淡入/淡出动画或禁用图表的视觉指示可能很有用。
  • 添加了新方法Diagram.findLinkForKey,它将查找与模型的链接数据对象的唯一键对应的链接。仅当在GraphLinksModel.linkKeyProperty设置为非空字符串的情况下使用GraphLinksModel时,才返回链接。
  • 如果JSON中包含的模型属性(例如,nodeKeyProperty)与现有模型不匹配,则Model.applyIncrementalJson现在会引发错误。此检查仅包括Model.toIncrementalJson输出中包含的属性。
  • 添加了新方法,Picture.reload(在服务器上的文件已更改的情况下重新加载Picture源)和Picture.redraw(在重新绘制图片时),如果源由HTML Canvas或HTML视频元素。
  • 添加了新样本:SVG数据URL-使用Base64 hrefs而不是Picture.source URL导出SVG

点击下文“了解更多”,获取GoJS最新试用版~

相关推荐

redis的八种使用场景

前言:redis是我们工作开发中,经常要打交道的,下面对redis的使用场景做总结介绍也是对redis举报的功能做梳理。缓存Redis最常见的用途是作为缓存,用于加速应用程序的响应速度。...

基于Redis的3种分布式ID生成策略

在分布式系统设计中,全局唯一ID是一个基础而关键的组件。随着业务规模扩大和系统架构向微服务演进,传统的单机自增ID已无法满足需求。高并发、高可用的分布式ID生成方案成为构建可靠分布式系统的必要条件。R...

基于OpenWrt系统路由器的模式切换与网页设计

摘要:目前商用WiFi路由器已应用到多个领域,商家通过给用户提供一个稳定免费WiFi热点达到吸引客户、提升服务的目标。传统路由器自带的Luci界面提供了工厂模式的Web界面,用户可通过该界面配置路...

这篇文章教你看明白 nginx-ingress 控制器

主机nginx一般nginx做主机反向代理(网关)有以下配置...

如何用redis实现注册中心

一句话总结使用Redis实现注册中心:服务注册...

爱可可老师24小时热门分享(2020.5.10)

No1.看自己以前写的代码是种什么体验?No2.DooM-chip!国外网友SylvainLefebvre自制的无CPU、无操作码、无指令计数器...No3.我认为CS学位可以更好,如...

Apportable:拯救程序员,IOS一秒变安卓

摘要:还在为了跨平台使用cocos2d-x吗,拯救objc程序员的奇葩来了,ApportableSDK:FreeAndroidsupportforcocos2d-iPhone。App...

JAVA实现超买超卖方案汇总,那个最适合你,一篇文章彻底讲透

以下是几种Java实现超买超卖问题的核心解决方案及代码示例,针对高并发场景下的库存扣减问题:方案一:Redis原子操作+Lua脚本(推荐)//使用Redis+Lua保证原子性publicbo...

3月26日更新 快速施法自动施法可独立设置

2016年3月26日DOTA2有一个79.6MB的更新主要是针对自动施法和快速施法的调整本来内容不多不少朋友都有自动施法和快速施法的困扰英文更新日志一些视觉BUG修复就不翻译了主要翻译自动施...

Redis 是如何提供服务的

在刚刚接触Redis的时候,最想要知道的是一个’setnameJhon’命令到达Redis服务器的时候,它是如何返回’OK’的?里面命令处理的流程如何,具体细节怎么样?你一定有问过自己...

lua _G、_VERSION使用

到这里我们已经把lua基础库中的函数介绍完了,除了函数外基础库中还有两个常量,一个是_G,另一个是_VERSION。_G是基础库本身,指向自己,这个变量很有意思,可以无限引用自己,最后得到的还是自己,...

China's top diplomat to chair third China-Pacific Island countries foreign ministers' meeting

BEIJING,May21(Xinhua)--ChineseForeignMinisterWangYi,alsoamemberofthePoliticalBureau...

移动工作交流工具Lua推出Insights数据分析产品

Lua是一个适用于各种职业人士的移动交流平台,它在今天推出了一项叫做Insights的全新功能。Insights是一个数据平台,客户可以在上面实时看到员工之间的交流情况,并分析这些情况对公司发展的影响...

Redis 7新武器:用Redis Stack实现向量搜索的极限压测

当传统关系型数据库还在为向量相似度搜索的性能挣扎时,Redis7的RedisStack...

Nginx/OpenResty详解,Nginx Lua编程,重定向与内部子请求

重定向与内部子请求Nginx的rewrite指令不仅可以在Nginx内部的server、location之间进行跳转,还可以进行外部链接的重定向。通过ngx_lua模块的Lua函数除了能实现Nginx...