Svelte是基于JavaScript构建的最流行的框架之一。虽然它早在2016年就被推出，但在前端领域，它仍被认为是一个相对较新的框架（与React、Vue.js和其他框架相比）。
尽管姗姗来迟，但Svelte的友好语法和出色的性能使其无法被忽视。但是，即使有了良好的声誉，Svelte生态系统发现自己在努力跟上当代工具的步伐，并需要更多的时间来匹配其同行的工具箱规模。
幸运的是，Svelte社区努力通过不断引入新的、有用的工具来保持框架的相关性，希望能够弥补其他框架之间的差距。其中一个例子是Svelvet，这是一个最近推出的组件库，可以在Svelte中轻松创建华丽的、可定制的流程图。
在这篇文章中，我们将介绍Svelvet的核心概念，并演示如何使用Svelvet在Svelte中构建流程图。
目录
- 先决条件
- 什么是Svelvet？
- 开始使用
- 节点
[id](#id)[data](#data)[position](#position)[bgColor](#bgcolor)[width](#width-and-height)和[height](#width-and-height)
- 边缘
[id](#id-2)[source](#source)[target](#target)[label](#label)[animate](#animate)[type](#type)[arrow](#arrow)[noHandle](#nohandle)
- 用Svelvet构建流程图
前提条件
要继续学习本教程，你需要对Svelte及其概念有一个基本的了解。
什么是Svelvet？
Svelvet是一个轻量级组件库，用于在Svelte中渲染基于节点的交互式流程图。该库使用一个基于图形的编辑器来转换、分析和可视化数据。它还利用了D3.js的缩放和选择组件来提供图形上的平滑缩放和平移行为。
据Svelvet的创造者称，该库的建立是为了满足Svelte对类似React flow的图表工具的需求，Reactflow是一个基于节点的图形渲染器。因此，Svelvet具有与React flow类似的功能和特点，例如：
- 易用性
- 易于定制
- 互动性
- 快速渲染
现在我们对Svelvet有了基本的了解，让我们看看如何将其添加到我们的项目中，并开始渲染流程图。
开始使用
你可以通过npm或Yarn在你的项目中安装Svelvet，使用以下命令之一：
npm install svelvet
yarn add svelvet
如果你还没有建立一个项目，你可以启动一个Svelte项目，就像这样：
npx degit sveltejs/template
然后，安装依赖项：
npm install
接下来，你可以将Svelvet集成到你的Svelte项目中，方法是在你项目文件夹中的任何组件的脚本部分中导入一个Svelvet 组件。
import Svelvet from 'svelvet';
Svelvet 组件接受几个道具，但nodes 和edges 属性是该组件的实际构建块。该组件的nodes 和edges 根据其指定的值来渲染图形。
下面是Svelvet 组件的一个基本用法。
<script>
import Svelvet from 'svelvet';
const initialNodes = [
{
id: 1,
position: { x: 350, y: 50 },
data: { label: 'input Node' },
width: 175,
height: 40,
bgColor: 'white'
},
{
id: 2,
position: { x: 350, y: 150 },
data: { label: 'Default Node' },
width: 175,
height: 40,
bgColor: 'white'
}
];
const initialEdges = [
{ id: 'e1-2', source: 1, target: 2, type: 'default', label: 'label'},
];
</script>
<Svelvet nodes={initialNodes} edges={initialEdges} background />
正如你所看到的，initialNodes 和initialEdges 数组的对象被分别传递给节点和边的道具。Svelvet将根据每个数组中的对象属性值来渲染图形。
上面的代码将把下面的图形渲染到浏览器上：
这个例子应该能让你了解nodes 和edges 道具是如何工作的。接下来，我们将看看对象属性如何定义和连接nodes 和edges 道具。
节点
nodes 道具用于在图中呈现盒状元素，被称为节点。每个节点可能包含一些文字或信息，描述节点代表的内容。
nodes 道具需要一个对象数组，对象的属性用于定义每个节点的width 、height 、position 、和背景颜色（bgColor ）。每个对象代表一个节点，所以如果在一个特定的节点数组中存在五个对象，该组件将向图中呈现五个节点。
下面是一个典型的节点对象。
{
id: 1,
position: { x: 350, y: 50 },
data: { label: 'input Node' },
width: 175,
height: 40,
bgColor: 'white'
}
现在，让我们来看看每个对象的属性，以便更好地了解它们的用途。
id
id 属性是用来给每个节点分配ID的。该属性接收一个整数，作为节点的标识符。在定义边缘属性时，这些整数被用来引用每个节点。
data
data 属性用于标记节点，它接收一个带有'label' 属性的对象，该对象接受一个要在节点上显示的文本或信息的字符串值。
position
position 属性用于在图形上定位一个节点；它接收一个具有x和y属性的对象。这些属性接受整数值，用于在x轴和y轴上对齐节点。
bgColor
bgColor 属性正如其名称所暗示的那样；它被用来改变节点的背景颜色。
width 和height
width 和height 属性用于控制节点的尺寸；它们接受整数值。
边缘
edges 属性用于构建图上节点之间的线。这些线被称为边，它们充当两个节点之间的连接器。
edges 道具接受一个对象数组，对象的属性被用来引用和连接节点。
const initialEdges = [
{
id: 'e1-2',
source: 1,
target: 2,
type: 'straight',
label: 'edge'
},
];
...
<Svelvet ... edges={initialEdges} .../>
让我们看一下对象的属性，以更好地理解它们的工作原理。
id
id 属性也作为边的标识符，但与前者不同，它接受字符串值而不是整数。该值描述了被该对象连接的节点。例如，id 值为'e1-2' 的边缘对象将把id 为1 的节点连接到id 为2 的另一个节点。
//edge for connecting node 1 and 2
{ id: 'e1-2', ...}
source
source 属性用于设置一个边缘的原点。该属性采用一个整数，引用一个节点的id 值，并将其标记为边缘的源头。
//referencing the node with an id of 1
{
...,
source: 1,
...
}
当目标节点被设置后，组件将从源节点开始绘制边缘线。
target
target 属性用于从源头设置边缘的目标。该属性还接收一个整数，该整数引用与源节点不同的id 值。
例如，如果源属性引用的节点的id 是1 ，那么target 属性将引用另一个节点的id 是2 或3 。
//node 1 targeting node 2
{
...,
source: 1,
target: 2,
...
}
label
label 属性的作用与节点data 属性类似；它被用来向边缘添加文本或信息。label 被放置在两个连接节点的交叉点上。
{
...,
label: 'label'
}
animate
animate 属性用于对边缘进行动画处理。它需要一个布尔值，当设置为true 时，它将使边缘动画化，而当设置为false时，它将保持静态。
{
... ,
animate: true
}
type
type 属性用于设置边缘的外观，它接受一个default 或straight 的字符串值。default 边缘类型是贝塞尔曲线，而straight 边缘类型是直线。
{
... ,
type: ‘default’
}
//or
{
... ,
type: ‘straight’
}
arrow
arrow 属性用于配置边缘线的端点；它将边缘转变为指向目标节点的箭头。arrow 属性接受一个布尔值，即true 或false 。
{
... ,
arrow: true
}
noHandle
这个noHandle 属性与arrow 属性类似；它被用来移除指向目标节点的边缘线的手柄。该属性接受一个布尔值，即true 或false 。
{
... ,
noHandle: true
}
用Svelvet构建流程图
我们已经回顾了Svelvet的核心概念；这些信息足以帮助你开始在Svelvet中绘制图表的旅程。
最后，让我们从头开始建立一个流程图。
第一步，在你的Svelte项目中创建一个新的组件，或者使用App.svelte 主组件。接下来，在脚本部分导入Svelte组件，创建两个对象数组，并根据你的喜好调整属性。
在这个例子中，我们将使用以下内容。
<script>
Import Svelvet from ‘svelvet’
//nodes array
const nodeArr = [
{
id: 1,
position: { x: 300, y: 20 },
data: { label: "Input Node" },
width: 175,
height: 40,
bgColor: "#127369"
},
{
id: 2,
position: { x: 80, y: 150 },
data: { label: "bezier" },
width: 70,
height: 40,
bgColor: "#8AA6A3"
},
{
id: 3,
position: { x: 282, y: 190 },
data: { label: "straight" },
width: 70,
height: 40,
bgColor: "#F2BE22"
},
{
id: 4,
position: { x: 494, y: 150 },
data: { label: "animated" },
width: 140,
height: 40,
bgColor: "#BFBFBF"
},
{
id: 5,
position: { x: 120, y: 225 },
data: { label: "no handle" },
width: 80,
height: 40,
bgColor: "#03A678"
},
{
id: 6,
position: { x: 390, y: 225 },
data: { label: "arrow handle" },
width: 100,
height: 40,
bgColor: "#F27405"
}
];
//edges array
const edgeArr = [
{
id: "e1-2",
source: 1,
target: 2,
type: "bezier",
label: "default edge"
},
{
id: "e1-3",
source: 1,
target: 3,
type: "straight",
label: "straight edge"
},
{
id: "e1-4",
source: 1,
target: 4,
type: "bezier",
animate: true,
label: "animated edge"
},
{
id: "e1-5",
source: 1,
target: 5,
type: "bezier",
noHandle: true,
label: "noHandle edge"
},
{
id: "e1-6",
source: 1,
target: 6,
type: "bezier",
arrow: true,
label: "arrow edge"
}
];
</script>
接下来，将Svelvet 组件添加到模板部分，将nodeArr 数组传递给nodes道具，将edgesArr 数组传递给edges 道具，像这样：
<Svelvet nodes={nodeArr} edges={edgeArr} />
现在，保存代码并通过运行以下命令启动开发服务器：
npm run dev
你会注意到，很难察觉到Svelvet渲染器的边界，节点经常会重叠在边界之外。这是由于渲染器默认的白色背景造成的。
为了解决这个问题，使渲染器不那么模糊，你可以给组件添加一个background ，就像这样：
<Svelvet nodes={nodeArr} edges={edgeArr} background />
background 这个道具会给渲染器添加一个点状的背景，这将使我们更容易感知渲染器的大小。
我们还可以通过给组件添加width 和height 道具来增加渲染器的大小。
<Svelvet nodes={nodeArr} edges={edgeArr} background width={900} height={800} />
就这样，我们很快就创建了一个流程图!
Svelvet开箱即是互动的。你和那些观看你的流程图的人，可以在图中选择和移动节点，以及缩放和平移。
结论
在这篇文章中，我们研究了Svelvet的核心概念，研究了节点和边缘对象的属性，并演示了如何使用Svelvet建立一个基本流程图。
Svelvet仍处于起步阶段，缺乏其对应的React flow所提供的一些功能。Svelvet团队承诺在未来将通过整合额外的定制、测试和错误处理功能，使该库更加广泛。
不管怎么说，该库的基本功能已经建立起来了，可以用于生产；你可以在你的项目中使用它。即使没有额外的功能，Svelvet也是在Svelte中构建漂亮流程图的一个直观的解决方案。
