vectorse-优快云博客

原创如何参与到 X6 开源开发

前言在一些大型项目中，单兵作战方式已经成为过去式，团队合作开发成为主要方式。对于一个开源项目来说，这个团队就是开源社区，一群人为各自的原因聚在一起，做成一件事，在这个过程中，每个人都能收获自己的成长。开源社区就像一个发动机，驱动着开源项目的发展。 X6 在 2020 年 11.22 正式对外开源，在这一年多内有了很多用户，同时也有一些贡献者参与到项目中来，但是还远远达不到一个活跃的开源社区的水平，我们最近也一直在探索怎么将社区建设得更好。正好 X6 2.0 正在开发中，有很多小伙伴来问我怎么参与到 X

2022-03-30 11:43:16 236

原创可视化编排为什么越来越流行

随着新兴产业的蓬勃发展，许多专有领域概念层出不穷，怎么将系统中的任务流程化以及让使用者快速理解和上手操作是产品和技术人员面临的一个非常大的挑战，特别是在着云原生、机器学习等专业领域，这一问题尤为明显。在过去的几年中，发现很多的产品中开始使用可视化编排来组织产品逻辑，并取得了不错的效果。本文针对可视化编排流行的原因做一些分析。业务流程容易被扩展在将复杂业务流程抽象为软件流程的过程中，可视化编排是一种非常好的方式，它会促使产品和技术人员将业务拆解成一个一个原子化模块，每个模块通过一定关系组合起来就形成一个

2022-03-21 15:09:27 1906

原创从0到1实现流程图08-快捷键篇

开始在使用软件的过程中，我们经常会使用一些快捷键来提高效率，比如 Ctrl +C、Ctrl + V，同样，在流程图应用中，也需要一些快捷键来提高编辑效率。实现 X6 提供了 clipboard 来实现画布上节点的复制、剪切、粘贴功能，经常和快捷键搭使用。 const graph = new Graph({ clipboard: true, }) // copy graph.bindKey(['meta+c', 'ctrl+c'], () => { const cells = graph.

2021-06-17 20:09:49 732

原创从0到1实现流程图07-工具篇

开始一个开箱即用的技术框架，一定会有完备的配套工具。X6 提供了大量的图编辑功能，它们基本上都是基于配置式，而且配置参数是经过大量业务实践出来的，开发过程中充分考虑可扩展性以及兼容性，能覆盖到大部分的功能场景。实现节点缩放通过拖拽修改节点的尺寸和旋转角度是常见功能，在 X6 中只需要做简单的配置： const graph = new Graph({ resizing: true, rotating: true, }) 还可以通过 css 来修改操作元素的默认样式： .x6-widget-t

2021-06-17 20:06:48 219

原创从0到1实现流程图06-连接状态篇

开始在手动连线的过程中，还需要处理一些交互细节，比如到达连接桩附近自动吸附、可连接元素的高亮显示等，幸运的是这些都不需要我们自己去实现，X6 提供了便利的配置方式帮我们解决这些问题。实现连接配置当连线到达连接桩附近时，我们希望连线会自动吸附到连接桩上面，这样交互体验会更好： const graph = new Graph({ connecting: { snap: { radius: 20, // 离目标 20px 的时候自动吸附 }, } }) 现在拖动连线到空白

2021-06-04 16:32:05 241

原创从0到1实现流程图05-连接桩篇

开始很多图形都有连接桩的概念，连接桩是节点上固定的点，常用于连线。连接桩的使用方式非常灵活，本文只介绍最佳实践。实现连接桩定义首先来看一个节点四周中心各一个连接桩的节点配置： graph.addNode({ ports:{ groups: { group1: { position: 'top', attrs: { circle: { stroke: '#D06269', str

2021-06-04 16:28:57 809

原创从0到1实现流程图04-连线篇

开始连线是 X6 中非常重要的一部分，X6 内置了很多实用的连线功能，也提供了优雅的扩展机制，这是相比于其他流程图框架占据绝对优势的地方。本文通过实现流程图的连线功能来一步步介绍 X6 的连线机制。实现图形定义 X6 中连线分两种形式，代码生成的和用户手动拖拽而成，首先来看怎么通过代码建立连线： // source 或 target 是坐标点 graph.addEdge({ source: [0, 0], target: [100, 100] }) // source 或 target 是

2021-06-04 16:25:26 1617 1

原创从0到1实现流程图应用03-图形篇

开始在流程图中我们需要通过拖拽交互往画布中添加节点，X6 不仅内置了强大的拖拽功能，还内置了很多常用的图形，接下来我们一起实现基础的流程图图形以及图形拖拽功能。实现图形定义首先来看下一个简单的矩形节点的基础配置： graph.addNode({ shape: 'rect', x: 100, y: 100, width: 80, height: 40, attrs: { body: { stroke: 'red' } } }) shape：定义

2021-06-04 16:17:11 526

原创从0到1实现流程图02-画布篇

开始下面我们开始实现流程图的画布功能，从两个方面着手，第一个是画布的样式，包括网格和背景，第二个是画布的操作，包括平移和缩放。首先来看看两个经典的流程图应用 Drawio 和 BPMN editor。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yAV7com5-1622793369895)(https://intranetproxy.alipay.com/skylark/lark/0/2021/png/299233/1621050423111-90fb9062-60f0

2021-06-04 16:10:37 837

原创从0到1实现流程图应用01-开篇

开始一个图可以简单的解释一个复杂的思想，同样，一个流程图可以清晰的可视化展示组织、工作流等复杂层次结构。在后面的一系列文章中，将会从 0 到 1 完成一个流程图应用的开发。如果对你的工作有帮助或者你对图编辑引擎感兴趣，请静下心来读完这一系列文章，相信会有惊喜。技术选型提到绘图能力，web主要有两种实现方式：Canvas 和 SVG，我们看看这两种有什么差异：方案图形定制能力上手难度性能 Canvas 定制图形比较复杂较高大数据量场景性能突出 SVG 基于 DOM，图形定

2021-06-04 15:52:49 431

vectorse的博客