reference-line
v1.2.3
Published
js 拖动时生成各组件之间对齐线,同时按住ctrl+ 方向键可以进行1px 移动,按下shift +方向键,可以进行10px 移动。支持四条边及中心线对齐。提供画布生成勾子支持自定义画布, 提供移动回调。 支持自动吸附对齐,目前只支持拖动完成后自动吸附(mouseup事件),默认为 正负15px范围 自动吸附对齐的规则为: 1 当前元素与所有可对齐元素进行吸附无论在不在视窗内, 2 当前元素吸附与移动方向坐标点最近的元素,也就是说吸附和移动的方向+吸附范围有关,如果元素A在远离元
Downloads
18
Maintainers
Readme
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 使用方式参见本例,http://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 在移动结束后会调用此方法,在使用框架时可以在使用结束时对数据进行修改