npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

reference-line

v1.2.3

Published

js 拖动时生成各组件之间对齐线,同时按住ctrl+ 方向键可以进行1px 移动,按下shift +方向键,可以进行10px 移动。支持四条边及中心线对齐。提供画布生成勾子支持自定义画布, 提供移动回调。 支持自动吸附对齐,目前只支持拖动完成后自动吸附(mouseup事件),默认为 正负15px范围 自动吸附对齐的规则为: 1 当前元素与所有可对齐元素进行吸附无论在不在视窗内, 2 当前元素吸附与移动方向坐标点最近的元素,也就是说吸附和移动的方向+吸附范围有关,如果元素A在远离元

Downloads

18

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