refline.js 一款开箱即用的参考线吸附插件

之前一直在社区分享零代码&低代码的技术实践，也陆陆续续设计并开发了多款可视化搭建产品，比如：

之前在研究低代码可视化时遇到了参考线吸附的需求, 比如元素直接拖拽时需要显示参考线和吸附, 方便对元素位置进行更精准的控制. 也思考了很多技术实现方案, 最近在 github 上开发一款非常不错的 js 插件, 它可以帮我们轻松实现元素之间的参考线吸附. 我在 flwomix/flow 中也用了它来实现流程节点的参考线吸附功能, 接下来就来和大家分享一下这个开源插件.

什么是 Refline.js

refline.js 是完全不依赖设计器环境的参考线组件，方便各种设计器快速接入，支持参考线匹配及吸附功能。也就是说我们可以在 React 或者 Vue 项目中轻松集成它.

GitHub 地址: github.com/refline/ref…

demo 演示

接下来给大家演示一下使用它可以实现什么样的效果:

从 demo 中可以看出, 我们可以使用它实现参考线和吸附能力, 同时也支持缩放画布之后的参考线适配, 并支持设置自定义的参考点和参考线.

接下来就和大家介绍一下如何使用这个插件.

如何使用 Refline.js

1.安装 refline.js

npm install refline.js

2.使用

import { RefLine } from "refline.js";

const refLine = new RefLine({
  rects: [
    {
      key: "a",
      left: 100,
      top: 100,
      width: 400,
      height: 800,
    },
  ],
  points: [
    {
      x: 300,
      y: 300,
    },
  ],
  current: {
    key: "b",
    left: 100,
    top: 100,
    width: 100,
    height: 100,
  },
});

// 匹配参考线
const lines = refLine.getAllRefLines();

// 拖拽下参考线吸附
// mousedown
const updater = refLine.adsorbCreator({
  pageX: 100,
  pageY: 100,
});
// mousemove
const { delta } = updater({
  pageX: 108,
  pageY: 110,
});

这样就可以实现元素的参考线吸附了, 当然还有很多可配置的 API, 大家可以查看文档学习实践. 官方也提供了一个完整的 demo 案例, 方便大家快速上手:

codesandbox.io/s/reflinejs…

使用案例

目前我在 flowmix/flow 中已经使用了它来实现流程图的参考线吸附能力:

大家可以线上体验一下: flowmix.turntip.cn/flow