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 进行开发

webpack 使用方式参见本例，https://localhost:8080

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 中可以看到调用方式

更新

2021.6.4 v1.2.3
采用 lodash-es 替换lodash，升级ts rxjs 依赖版本 

2020.4.29 v1.2.2
修复前头方向控制，及元素 单击end回调异常，现在点击可移动元素，如果没有移动距离不会触发，需要注意的是使用触摸板点击可能会有1像素移动距离，

2020.3.4 v1.2.1
修复首次点击空白元素报错，点击空白元素不再执行end回调

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 在移动结束后会调用此方法，在使用框架时可以在使用结束时对数据进行修改