使用Svelvet打造无限可定制的基于节点的用户界面！

Svelvet是一个轻量级的Svelte组件库，用于构建交互式的基于节点的用户界面和图表。

⚡ 官网 | 📚 文档 | ⌨️ 博客 | 💬 Twitter | 💼 LinkedIn

</div> <br>

版本更新

感谢我们的贡献者！以下是新增内容：

更新日志

新特性：
- 无障碍性增强：用户现在可以使用键盘导航画布。
  - 按 'l' 键切换明/暗模式。
  - 按 'd' 键显示抽屉组件，按 'D' 键打开/关闭抽屉组件。
  - 按 Option + Tab 或 Ctrl + Tab 进行节点选择。
  - 按 'm' 键切换小地图组件。
  - 按 'c' 键切换控制组件。
  - 按 'e' 键调出编辑器组件。
- 画布状态持久化：新增将状态持久保存到本地存储的功能。
- 高对比度模式：引入专为视障人士设计的高对比度无障碍组件。
重构：
- 改进键盘无障碍性：通过重构增强了抽屉组件的键盘无障碍性。
文档：
- 更新指南：文档现已包含使用键盘无障碍功能的说明。
其他：
- 测试增强：为抽屉组件添加了全面的测试。
- 维护：更新了Playwright测试和配置，以提高稳定性。

</details> <details><summary>🚀 v9.0.0 🚀</summary> <ul> <li>功能：将Svelvet库从Svelte 3迁移到Svelte 4</li> <li>功能：构建并添加了流程图功能，可以从格式化字符串生成动态流程图</li> <li>功能：在现有边缘样式集合中添加了新的箭头边缘样式，允许单向和双向数据流可视化</li> <li>功能：在现有数据流组件库中添加了一个名为toggle的新组件</li> <li>重构：彻底改造了Editor组件，允许动态删除和调整现有节点大小</li> <li>文档：更新文档，包括添加一个示例，说明用户如何创建可自定义的节点形状</li> <li>文档：更新文档，包括添加一个示例，说明如何使用新的流程图功能</li> <li>文档：更新网站上的文档页面，包括最新版本发布信息</li> <li>测试：使用Playwright扩展了端到端测试套件，测试覆盖率几乎翻倍</li> </ul> </details> <details><summary>v8.0.0</summary> <ul> <li>功能：添加了新的拖放式Drawer组件，可以接受自定义节点、锚点和边缘作为属性，并通过用户界面将它们添加到画布上</li> <li>功能：在已有的数据流系统组件集合中添加了一个新的输入组件Knob，可以在自定义节点中组合使用，并由用户自定义</li> <li>文档：更新文档，包括添加一个示例部分，展示了Svelvet作为数据库可视化工具的用例</li> <li>文档：更新网站上的文档页面，包括最新版本发布信息</li> <li>测试：使用Vitest和Svelte Testing Library添加了单元和组件测试</li> <li>重构：更新了网站样式：整合了冗余的CSS类，修复了断开的链接和样式问题</li> <li>杂项：更新主页，包括最新的合作者信息</li> <li>杂项：更新了测试套件的包版本</li> </ul> </details> <details><summary>v7.0.0</summary> <ul> <li>更改了主要API。开发者现在直接将Node和其他暴露的组件作为子元素传递给Svelvet</li> <li>增加了将锚点指定为输入、输出或任意类型的功能，实现连接逻辑和边缘曲率的"方向性"</li> <li>增加了动态连接/重新连接边缘的能力</li> <li>全新的Anchor组件，开发者可以在自定义节点中任意位置添加。可以包裹自定义锚点元素或通过属性自定义</li> <li>全新的Edge组件供开发者自定义</li> <li>全新的Node组件供开发者自定义</li> <li>增加了通过左上角旋转节点的功能</li> <li>全新的Resizer组件，用于组合自定义节点</li> <li>改进了边缘点击事件的可靠性和开发者体验</li> <li>节点连接可以在Node或Anchor级别指定。改进了输入选项的灵活性</li> <li>改进了移动设备上触摸事件的一致性。为controls组件添加了触摸支持</li> <li>节点和边缘不再需要指定ID。默认为递增值</li> <li>添加了Controls组件，具有缩放、重置、锁定和取消隐藏功能，并能够将自定义控制按钮作为子元素传递</li> <li>增加了在默认节点上指定任意数量锚点的能力</li> <li>添加了与节点交互时的z-index堆叠逻辑</li> <li>改进了步进路径算法，现在可以连接任意位置的锚点。将圆角半径作为属性暴露</li> <li>添加了聚焦时的画布键盘导航</li> <li>通过Shift + 点击添加了选择框功能。可以通过Svelvet组件的selectionColor属性控制颜色</li> <li>通过Shift + CMD + 点击添加了节点分组功能</li> <li>增加了在Graph、Node和Anchor级别传递自定义边缘的能力</li> <li>不再需要向Svelvet组件传递width/height。默认将填充包裹容器</li> <li>增加了指定画布/节点方向为自上而下（TD）或从左到右（LR）的能力。控制默认节点上输入/输出锚点的位置</li> <li>全新的Minimap组件，接受位置、尺寸和背景及节点样式的属性（节点默认为节点颜色），具有显著改进的跟踪/可视化功能，以及隐藏节点的能力</li> <li>全新的Theme Toggle组件，可以在主题和备用主题之间切换</li> <li>创建默认节点时，为某些参数启用了双向数据绑定</li> <li>全新的Background组件，允许自定义网格大小和颜色</li> <li>在Node组件上暴露了自定义事件on:nodeClicked、on:connection和on:disconnection，开发者在实现自定义节点时可以监听这些事件</li> <li>为Svelvet组件添加了theme属性。默认为light。接受"dark"、"purple"、"parchment"等参数</li> <li>从库仓库中移除了前端网站代码</li> <li>使用Playwright添加了端到端测试</li> <li>简化了贝塞尔曲线逻辑，并添加了指定锚点"方向"的能力</li> <li>添加了将Mermaid字符串解析为节点图和边缘的功能</li> <li>添加了一系列可访问的输入组件（Slider、RadioGroup、TextField、ColorWheel），可以在自定义节点中组合使用，并与我们的数据流系统链接</li> <li>库现在具有100%的TypeScript覆盖率和完全导出的类型</li> <li>移除了D3-zoom依赖</li> <li>移除了冗余的窗口和事件监听器</li> <li>添加了动态数据流/状态管理系统，用于跟踪锚点连接</li> <li>更新主页，包括最新的合作者信息</li> <li>由于库重写，暂时移除了动态锚点逻辑。可能会重新添加</li> <li>在从本地存储恢复图形状态方面取得进展。即将推出！</li> </ul> </details> <details><summary>v6.0.0</summary> <ul> <li>添加了自适应锚点。锚点现在可以在无需用户输入的情况下自动以美观的方式排列。自适应锚点现在是默认的锚点模式</li> <li>添加了动态锚点。当节点移动时，锚点现在会自动调整位置以保持美观</li> <li>添加了锚点的自定义定位。用户可以使用回调函数指定锚点的自定义位置</li> <li>为边缘添加了可访问性功能。边缘现在在悬停时会高亮显示，使边缘交互更容易</li> <li>添加了通过拖动节点右下角调整节点大小的功能</li> <li>为边缘添加了自定义类，以允许统一的样式设置</li> <li>为边缘添加了点击事件，执行用户定义的回调函数</li> <li>添加了通过右键点击节点来编辑边缘的功能，会弹出一个模态框</li> <li>添加了展开和折叠树节点的功能</li> <li>更新了网站上的文档页面，包括新功能</li> <li>更新了主页，包括最新的合作者信息</li> <li>解决了GitHub问题 #s：</li> </ul> </details> <details><summary>v5.0.0</summary> <ul> <li>现已兼容Safari浏览器（5.0.7更新）</li> <li>新增交互式节点连接和创建功能</li> <li>新增加载自定义Svelte组件作为节点的功能</li> <li>新增可选的小地图，用于可视化较大的图表</li> <li>新增程序化设置初始缩放和位置的功能</li> <li>新增节点自定义类，用于统一样式设置</li> <li>新增导出和导入图表的功能</li> <li>新增可选的图表边界</li> <li>新增通过右键点击节点打开模态框来编辑节点的功能</li> <li>新增可选的用户删除节点功能</li> <li>注意：请确保为节点和边缘分配唯一的ID，以防止forEach键重复错误！</li> <li>解决了GitHub问题#：65、78、80、81、85、86、104、105、146、147、148、151、153、158</li> <li>更新了网站上的文档页面，包含新功能</li> <li>更新了主页，包含最新的合作者</li> </ul> </details> <details><summary>v4.0.0</summary> <ul> <li>新增在节点内包含HTML的功能（如视频、音频等）</li> <li>在GitHub仓库根目录添加了NPM包文件夹</li> <li>该文件夹用于添加库的更改并推送更新到NPM；包含在此处以通过GitHub进行版本控制</li> <li>新增运行时在画布中使用的对齐网格功能（GitHub问题107）</li> <li>修正了节点在移出可见画布边界时变得磁化的问题（GitHub问题120和125）</li> <li>从NPM包的package.json中移除了未使用的dotenv和node.env依赖（GitHub问题118）</li> <li>将devDependencies中的所有依赖移至常规dependencies对象，除了客户端运行时使用的d3-zoom</li> <li>新增分组节点功能</li> <li>更新了主网站页面，包含最新的合作者列表</li> <li>新增画布背景的CSS选项</li> <li>在网站文档中添加了关于节点内HTML、对齐网格、画布背景着色和节点分组的文档</li> <li>对整个应用进行了全面重构，以提高响应性并减小体积</li> <li>创建了文档，以帮助未来的开发者理解Svelvet中的数据流，并提供潜在更新/升级的列表</li> </ul> </details> <details><summary>v3.0.0</summary> <ul> <li>在REPL游乐场页面添加了右键上下文菜单功能</li> <li>新增通过上下文菜单添加自定义节点和边的功能</li> <li>新增自定义节点/边快捷方式，优化用户体验</li> <li>整合了通过预测算法动态添加自定义节点/边的功能</li> <li>新增从代码编辑器复制文本的功能</li> <li>节点图现在可以选择固定位置</li> <li>为REPL游乐场页面添加了教程覆盖层</li> <li>新增通过弹出模态框快速查看文档的功能</li> <li>更新了文档，使贡献者更容易访问（'.env'文件设置）</li> <li>更新了网站上的社区链接，重定向到Stackoverflow上的Svelvet主题</li> <li>实现了社区论坛的骨架代码库，具有完整的数据库/路由可访问性（供未来贡献者使用）</li> </ul> </details> <details><summary>v2.0.2</summary> <ul> <li>新增左右锚点</li> <li>新增step和smoothstep边类型</li> <li>整合了混合边功能</li> <li>重构了每种边的边文本和标签渲染方式</li> <li>修复了D3Zoom偏差bug</li> <li>扩展了样式选项，包括标签颜色、标签背景和边颜色</li> <li>节点现在可以包含图片，并根据标签文本的存在与否呈现不同效果</li> <li>节点现在可在触摸屏上拖动，并会重新定位以居中于你的触摸点</li> <li>实现了数据响应性</li> <li>扩展了TypeScript支持</li> <li>使用Cypress添加了端到端测试</li> <li>扩展了单元测试</li> <li>在我们的文档网站中添加了REPL</li> <li>在REPL中添加了SQL数据库</li> <li>添加了GitHub OAuth，使用户能够保存在新REPL中创建的自定义图表</li> <li>扩展了新功能的文档</li> <li>添加了完整的CI/CD流程</li> </ul> </details> <details><summary>v1.0.3</summary> <ul> <li>修复了运行测试的bug</li> <li>新增渲染多个唯一Svelvet组件的功能</li> <li>为节点添加了'clickCallback'自定义选项</li> </ul> </details> <details><summary>v1.0.2</summary> <ul> <li>修复了TypeScript应用导入类型的bug</li> <li>为节点添加了'borderRadius'自定义选项</li> <li>修复了SVG缩放/平移bug（缩放/平移现在仅限于Svelvet组件）</li> </ul> </details>

主要特性

易于使用： 要开始使用Svelvet，你只需要节点和边的数据。访问我们的文档网站，获取简化、用户友好的教程和示例，了解如何充分利用你的Svelvet界面！
交互性： 选择节点并在图表中拖动时，界面优雅流畅。
可定制： 边缘、节点、背景和组件都可完全定制。
可靠： Svelvet使用TypeScript编写，并通过Vitest、Playwright和Svelte Testing Library进行测试。Svelvet由积极寻求为更广泛的Svelte开发者社区和库生态系统做出贡献的工程师维护。
成长空间： 我们还有很多可以改进、添加功能并使Svelvet成为最佳版本的地方 - 我们欢迎反馈和贡献！请查看下面的建议，了解如何贡献。

安装

Svelvet可以通过npm和yarn包获得。你可以运行以下两个命令之一来安装它：

npm install svelvet

yarn add svelvet

快速开始

首先将Svelvet和Node组件导入到你的应用程序中：

import { Svelvet, Node, Anchor, Edge, Controls } from 'svelvet';

Svelvet画布主要由节点组成。你可以将任意数量的节点作为子元素传递给Svelvet包装器。你可以使用所有标准的条件渲染语法来填充Svelvet组件内的节点。可以指定基本参数，如颜色、输入和输出数量、标签等，并支持与传递的props进行双向数据绑定。要进行更大程度的自定义，可以将你自己的自定义组件包装在我们的Node组件中，并将整个内容传递给Svelvet。节点、边和锚点都具有点击事件、属性和函数，使开发者能够完全自定义其图形的状态。

在创建自定义节点时，您可以放置任意数量的锚点组件，以实现动态连接。您还可以将节点包裹在组组件中，以限制它们的边界并将它们作为一个整体移动。这些组可以通过Shift + 点击并拖动来动态创建。

最后，您可以通过props或命名插槽来渲染我们的控制器、小地图、背景和主题切换组件。在后一种使用情况下，您可以传递props来进一步自定义它们。控制器组件可以包装您自己的一组按钮，因为我们使用let指令暴露了缩放/重置/锁定操作。

Svelvet专注于动态边连接，但如果您想提前指定边，可以将连接数组传递给任何锚点组件。您还可以传递自定义的边组件！

有关更详细的用例和示例，请访问我们的网站。

<Svelvet width={500} height={500} theme="dark" initialZoom={0.6} minimap>
	<Node />
	<Node label="演示节点" TD />
	<Node id="node-id" inputs={2} />
	<Node bgColor="red" inputs={10} outputs={5} height={200} position={{ x: 100, y: 100 }} />
	<Controls slot="controls" horizontal />
</Svelvet>

测试

测试使用Playwright、Vitest和Svelte测试库进行。您可以在/tests文件夹中找到测试。我们大幅扩展了测试覆盖范围，但仍有改进的机会。要运行测试，请使用以下命令：

对于端到端测试

npx playwright test

对于单元测试

npm run test:unit [文件名]

Svelvet团队

Mason Lee • LinkedIn • Github
Isaac Bocage • LinkedIn • Github
Julian Bos • LinkedIn • Github
Solomon Moon • LinkedIn • Github
Henry Sweat • LinkedIn • Github
Jeremy David • LinkedIn • Github
John Costello • LinkedIn • Github
Spencer Huey • LinkedIn • Github
Rathna Chinthalapalli • LinkedIn • Github
Ruxin Zheng • LinkedIn • Github
Samuel Alvarez • LinkedIn • Github
Wesley Waters • LinkedIn • Github
Brian Holmes • LinkedIn • Github
Britta Ager • LinkedIn • Github
Thomas Kady • LinkedIn • Github
Jen Lee • LinkedIn • Github
Ernesto Gonzalez • LinkedIn • Github
Michael Chiang • LinkedIn • Github
Rachel He • LinkedIn • Github
Horacio Vallejo • LinkedIn • Github
Aaron Willett • LinkedIn • Github
Alexander Zambrano • LinkedIn • Github
Andrew Widjaja • LinkedIn • Github
Anu Sharma • LinkedIn • Github
Justin Wouters • LinkedIn • Github
Walter DeVault • LinkedIn • Github
Ali Adams • LinkedIn • Github
Von Garcia • LinkedIn • Github
Damian Lim • LinkedIn • Github
Christopher Mander • LinkedIn • Github
David Jakubiec • LinkedIn • Github
Jeffrey Wentworth • LinkedIn • Github
Johnny Tran • LinkedIn • Github
Samee Vohra • LinkedIn • Github
Abhi Gullapalli • LinkedIn • Github
Ian Hnizdo • LinkedIn • Github
Mauricio Castro • LinkedIn • Github
Ryan Potter • LinkedIn • Github
Emma Ferguson • LinkedIn • Github
Dillon McKenna • LinkedIn • Github
Taylor Alan • LinkedIn • Github
Timmy Lem • LinkedIn • Github
Tony Lim • LinkedIn • Github

如何贡献

请参考路线图获取完整的迭代想法列表。<br> 一些受v10.0.0启发的想法包括：

**示例展示：**我们在文档中添加了一个新的部分，其中将包含功能示例和Svelvet潜在用例的沙盒。如果您想通过展示如何使用Svelvet的示例来为展示做出贡献，请通过Github讨论与团队分享您的项目。
**将画布导入/导出为JSON：**我们计划研究这种方法，以便在页面刷新时保持状态。
**额外的数据输入组件：**我们计划创建额外的输入/参数组件，这些组件与我们的数据流系统集成，并可在组合自定义节点时使用。
**广泛的测试覆盖：**我们预计不久就能实现全面的端到端和单元测试覆盖。特别是对比主题中新增的功能。
**无障碍性检查工具：**我们的目标是确保我们的组件具有无障碍性，并符合无障碍标准。实施无障碍性检查工具将简化识别和纠正组件中无障碍问题的过程。
**持久化画布状态：**saveStore.ts和reloadStore.ts为保存功能奠定了基础。它们协同工作，通过将画布状态对象转换为JSON字符串进行存储，然后将其解析为JSON对象以进行重建。但它们还需要进一步开发，因为目前只保存了摄像机位置和主题。具体来说，saveStore.ts中的traverse函数需要正确检测和展开画布（图形）状态对象中的每个元素。一个好的起点是处理图形状态对象的锚点和边缘属性。可以参考此对象的"nodes"属性，了解如何展开和存储这些数据。此外，reloadStore.ts中使用createGraph函数在Svelvet组件挂载时根据用户浏览器本地存储中最后保存的状态对象渲染图形。然而，这个实现是简化的，只能从部分保存的数据重建图形。