版本更新

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

更新日志

主要特性

• 易于使用： 要开始使用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

如何贡献

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

• **示例展示：**我们在文档中添加了一个新的部分，其中将包含功能示例和Svelvet潜在用例的沙盒。如果您想通过展示如何使用Svelvet的示例来为展示做出贡献，请通过Github讨论与团队分享您的项目。

• **将画布导入/导出为JSON：**我们计划研究这种方法，以便在页面刷新时保持状态。

• **额外的数据输入组件：**我们计划创建额外的输入/参数组件，这些组件与我们的数据流系统集成，并可在组合自定义节点时使用。

• **广泛的测试覆盖：**我们预计不久就能实现全面的端到端和单元测试覆盖。特别是对比主题中新增的功能。

• **无障碍性检查工具：**我们的目标是确保我们的组件具有无障碍性，并符合无障碍标准。实施无障碍性检查工具将简化识别和纠正组件中无障碍问题的过程。

• **持久化画布状态：**saveStore.ts和reloadStore.ts为保存功能奠定了基础。它们协同工作，通过将画布状态对象转换为JSON字符串进行存储，然后将其解析为JSON对象以进行重建。但它们还需要进一步开发，因为目前只保存了摄像机位置和主题。具体来说，saveStore.ts中的traverse函数需要正确检测和展开画布（图形）状态对象中的每个元素。一个好的起点是处理图形状态对象的锚点和边缘属性。可以参考此对象的"nodes"属性，了解如何展开和存储这些数据。此外，reloadStore.ts中使用createGraph函数在Svelvet组件挂载时根据用户浏览器本地存储中最后保存的状态对象渲染图形。然而，这个实现是简化的，只能从部分保存的数据重建图形。

发挥创意！Svelvet是一个令人惊叹的项目，有很大的成长空间。

致谢

受React Flow启发，Svelvet扩展了Svelte开发者可用的工具，使Svelte对新手和经验丰富的软件工程师都更具吸引力。

许可证

Svelvet在MIT许可证下开发。