js-reference-line

js 拖动时生成各组件之间对齐线，同时按住ctrl+ 方向键可以进行1px 移动，按下shift +方向键，可以进行10px 移动。支持四条边及中心线对齐。

提供画布生成勾子支持自定义画布，提供移动回调。

支持自动吸附对齐，目前只支持拖动完成后自动吸附（mouseup事件），默认为正负15px范围自动吸附对齐的规则为：

当前元素与所有可对齐元素进行吸附无论在不在视窗内，
当前元素吸附与移动方向坐标点最近的元素，也就是说吸附和移动的方向+吸附范围有关，如果元素A在远离元素B 即便在吸附范围也不会自动吸附，
tips: 如果需要精确控制建议使用方向键进行控制，按下方向键不会触发吸附

支持对齐到网格功能，需要开启自动吸附，移动完成后自动吸附到网格，默认关闭。

支持指定画布网格宽高

grid: {width:15,height:15}, //指定网格宽高

grid:15 // 相当于grid:{width:15,height:15}

开启吸附到网格默认大小为15px

grid:true  // 相当于grid:{width:15,height:15}

支持对齐吸附到指定点位,可以指定吸附到指定X坐位或Y坐标位

 new ReferenceLine({
            item: '[data-query="item"]',
            range: '.box',
            drag: true,
            zIndex: 1,//参考线层级
            lineColor: 'red',
            lineWidth: 1,
            offset: 40,//参考线头尾的延伸距离
            grid: [{x: 200, y: 250},{x:300},{y:700}], //吸附到指定点位
            move: function (evt: any, ele: any, l: number, t: number): void {
                //
            },
            end: function (ele: HTMLElement, x: number, y: number) {
                console.log('end:', x, y)
            }


        }).init();

兼容性

没有进行兼容性测试，因为自己的项目只关注最新chrome, 源代码中使用了canvas ES6 语法，如有需要兼容请自行处理。

使用

js 版本不再维护如果需要请根据ts文件自行生成，建议使用ts 进行开发

如果不使用模块化工具可以如下引用

<script src="extern/lodash.js"></script>

<script src="src/reference-line.js"></script>

<script>new ReferenceLine().init();</script>

如果用模块化工具请引入reference-line.umd.js

webpack 使用方式参见本例，http://localhost:8081

npm i  
npm run dev

参数配置

按照自己的需要进行参数配置，使用默认配置可不传

  new ReferenceLine({
          container: doc,//监听鼠标移动的元素
          range: doc, // 移动元素所在容器 主要用于限制移动范围
          auditTime:5, // ms moue 移动时抖动 数值截越小越平滑性能开销越高
          auto: 15, // 自动吸附功能 距离多少px范围内自行吸附
          item: '[data-query="item"]',//需要定位的成员选择器
          delay:6000, //参考线 生成后多少秒消失
          zIndex: 0,//参考线层级
          drag: true,//是否开启拖放,
          vLine: true,//是否开启垂直参考线
          hLine: true,//是否开启水平参考线
          lineColor: '#07f7f9',//参考线颜色
          offset: 20,//参考线头尾的延伸距离
          lineWidth: 1,//参考线宽度
          center: true,//是否开启中心对齐
          hypotenuse: true,//是否开启对角线对齐 //暂没开发
          directionKey: true,//是否开启方向键控制
          grid: [{x: 200, y: 250}],// 指定对齐到画布点位，可以传的类型 number|{width:number,height:number}|{x?:number,y?:number}[]
          createCanvas: function (ele) {
          //画布生成勾子，可以自定画布元素 提供对canvas 的操作能力
              doc.querySelector('body').appendChild(ele);
          },
          move: function (evt,ele,left,top) {
          //元素拖动时勾子，提供事件对象，当前移动的元素，及，移动的距离，left top
          },
          //移动完成回调 ele: 当前元素 left top 对应当前的元素 style 
          end:function(ele,left,top){
          //当前元素，x 对应style left ，y 对应style top 主要用于数据驱动框架数据更新
          }
    }).init()

typescript版 demo

npm run dev

react +redux demo

https://github.com/yyccmmkk/zt-editor/tree/react-zt-editor
在Main.tsx 中可以看到调用方式

更新

2019.9.29
新增对齐到网格功能，默认画布网格为15px,可以指定对齐网格大小，可以分别指定宽、高或是对齐到指定点位

2019.9.27
更新项目目录，拉下本项目后 按装依赖后即可看到demo
 
npm i 
npm run dev

2019.8.22
ts 版本新增吸附功能，在拖动完成后（mouseup）会自动吸附对齐周围元素，
   新增移动抖动参数 auditTime 默认为5sm 数值越少性能开销越大，移动采样越多

2019.8.21
ts 版本优化，建议使用ts 版本，js 版本不再维护
新增delay 配置项用于设置对齐线多少ms 消失
鼠标拖动对齐后不再立即消失 而是根据 delay时间


2019.7.19
临时修复TS高版本报错信息
2019.5.15        
添加移动结束勾子，end 在移动结束后会调用此方法，在使用框架时可以在使用结束时对数据进行修改

qinrr / js-reference-line Goto Github PK