Flowy 项目使用教程

Flowy 项目使用教程

flowyThe minimal javascript library to create flowcharts ✨项目地址:https://gitcode.com/gh_mirrors/fl/flowy

1、项目的目录结构及介绍

Flowy 项目的目录结构如下：

flowy/
├── demo/
├── engine/
├── .gitattributes
├── LICENSE
├── README.md
├── flowy.min.css
├── flowy.min.js

• demo/: 包含项目的演示文件。
• engine/: 包含项目的主要逻辑和功能实现。
• .gitattributes: Git 属性配置文件。
• LICENSE: 项目的许可证文件。
• README.md: 项目的主文档，包含项目介绍、使用方法等。
• flowy.min.css: 项目的样式文件。
• flowy.min.js: 项目的主要 JavaScript 文件。

2、项目的启动文件介绍

Flowy 项目的启动文件是 flowy.min.js 和 flowy.min.css。这两个文件包含了项目的主要功能和样式。

flowy.min.js

flowy.min.js 是项目的主要 JavaScript 文件，负责实现拖拽、自动对齐、块重排等功能。使用时，需要在 HTML 文件中引入：

<script src="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.js"></script>

flowy.min.css

flowy.min.css 是项目的样式文件，负责定义块的样式、布局等。使用时，需要在 HTML 文件中引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alyssaxuu/flowy/flowy.min.css">

3、项目的配置文件介绍

Flowy 项目没有明确的配置文件，但可以通过 JavaScript 函数进行初始化和配置。以下是一些常用的配置选项：

初始化 Flowy

flowy(canvas, ongrab, onrelease, onsnap, onrearrange, spacing_x, spacing_y);

• canvas: JavaScript DOM 元素，包含块的容器。
• ongrab: 可选函数，当块被拖动时触发。
• onrelease: 可选函数，当块被释放时触发。
• onsnap: 可选函数，当块与其他块对齐时触发。
• onrearrange: 可选函数，当块被重新排列时触发。
• spacing_x: 可选整数，水平间距。
• spacing_y: 可选整数，垂直间距。

示例

<div id="canvas"></div>
<div class="create-flowy">Grab me</div>

<script>
  flowy(document.getElementById("canvas"), function(block) {
    console.log("Block grabbed:", block);
  }, function(block) {
    console.log("Block released:", block);
  }, function(block, snap) {
    console.log("Block snapped:", block, snap);
  }, function(blocks) {
    console.log("Blocks rearranged:", blocks);
  }, 20, 20);
</script>

通过上述配置，可以实现 Flowy 项目的初始化和自定义功能。

flowyThe minimal javascript library to create flowcharts ✨项目地址:https://gitcode.com/gh_mirrors/fl/flowy