refline.js 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
refline.js 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
refline.js 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
refline.js 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
refline.js 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发
开源组织
地区 国产
投 递 者 随心_
适用人群 未知
收录时间 2021-06-07

软件简介

refline.js是一款通用的参考线组件,不同的编辑器可快速接入,支持参考线对齐及吸附功能。

Install

npm install refline.js

Usage

import { RefLine } from 'refline.js'

const refLine = new RefLine({
  rects: [{
    key: 'a',
    left: 100,
    top: 100,
    width: 400,
    height: 800
  }],
  current: {
    key: 'b',
    left: 100,
    top: 100,
    width: 100,
    height: 100
  }
})

RefLine

constructor(opts: RefLineOpts)

构造函数

interface RefLineOpts<T extends Rect> {
    // 所有矩形列表
    rects: T[];
    // 当前检查的矩形,可通过setCurrent改变
    current?: T | string;
}

setCurrent(current)

设置当前需要检查的矩形

const refLine = new RefLine({...});
refLine.setCurrent({
  key: 'b',
  left: 100,
  top: 100,
  width: 100,
  height: 100
})

// 获取匹配到的垂直辅助线
refLine.getVRefLines()

getVRefLines(): MatchedLine[]

获取匹配到的垂直参考线,返回一个参考线列表,为匹配到时返回一个空数组

interface MatchedLine{
  // 匹配后辅助线的类型
  type: "horizontal" | "vertical";
  // 辅助线相对矩形所在容器的坐标 x
  left: number;
  // 辅助线相对矩形所在容器的坐标 y
  top: number;
  // 辅助线高度(相对水平辅助线就是宽度)
  size: number;
  // 匹配到的矩形列表元信息
  refLineMetaList: RefLineMeta[];
}

getHRefLines(): MatchedLine[]

获取匹配到的水平参考线,返回一个参考线列表,为匹配到时返回一个空数组

getAllRefLines(): MatchedLine[]

获取匹配到的水平参考线及垂直参考线

getAdsorbDelta()

给定当前的偏移量进行吸附偏移量计算,如果有吸附返回一个新的偏移量,如果无吸附则返回当前偏移量。

adsorbCreator()

根据给定坐标,创建吸附偏移量生成器,将新坐标传进生成器后可获得计算后的偏移量

Demo

示例:codesandbox

Types

interface RefLineOpts<T extends Rect> {
    rects: T[];
    current?: T | string;
}
declare class RefLine<T extends Rect> {
    protected __rects: T[];
    protected _rects: T[];
    protected current: null | T;
    protected _dirty: boolean;
    protected _vLines: LineGroup<T>[];
    protected _hLines: LineGroup<T>[];
    protected _vLineMap: Map<string, RefLineMeta<T>[]>;
    protected _hLineMap: Map<string, RefLineMeta<T>[]>;
    get rects(): T[];
    get vLines(): LineGroup<T>[];
    get hLines(): LineGroup<T>[];
    get vLineMap(): Map<string, RefLineMeta<T>[]>;
    get hLineMap(): Map<string, RefLineMeta<T>[]>;
    constructor(opts?: RefLineOpts<T>);
    getRectByKey(key: string | number): T | null;
    getOffsetRefLineMetaList(type: LineType, offset: number): RefLineMeta<T>[];
    setRects(rects: T[]): void;
    protected getRect(rect: T | string): T | null;
    setCurrent(current: T | string | null): void;
    getCurrent(): T | null;
    protected toLineMapKey<S>(v: S): string;
    protected getLineMapKey(line: RefLineMeta<T>): string;
    protected initRefLines(): void;
    /**
     * 匹配参考线
     * @param type
     * @param rect
     * @returns
     */
    matchRefLines(type: LineType): MatchedLine<T>[];
    /**
     * 给定offset(坐标x或y)的值,返回距离该offset的最近的两个offset(上下或左右)及距离
     * @param type
     * @param offset
     * @returns
     */
    getNearestOffsetFromOffset(type: LineType, offset: number): [[number, number] | null, [number, number] | null];
    hasMatchedRefLine(position: RefLinePosition): boolean;
    getVRefLines(): MatchedLine<T>[];
    getHRefLines(): MatchedLine<T>[];
    getAllRefLines(): MatchedLine<T>[];
    /**
     * 适配偏移量,达到吸附效果
     * @param type
     * @param offset
     * @param delta
     * @param adsorbDistance
     * @returns
     */
    getOffsetAdsorbDelta(type: LineType, offset: number, delta: number, adsorbDistance?: number): number;
    /**
     * 适配偏移量,达到吸附效果
     * @param delta
     * @param adsorbDistance
     * @returns
     */
    getAdsorbDelta(delta: Delta, adsorbDistance?: number): Delta;
}

interface Rect {
    key: string | number;
    left: number;
    top: number;
    width: number;
    height: number;
    rotate?: number;
    [x: string]: any;
}
interface BoundingRect {
    left: number;
    top: number;
    right: number;
    bottom: number;
    width: number;
    height: number;
}
declare type LineType = "horizontal" | "vertical";
declare type VRefLinePosition = "vl" | "vc" | "vr";
declare type HRefLinePosition = "ht" | "hc" | "hb";
declare type RefLinePosition = VRefLinePosition | HRefLinePosition;
interface RefLineMeta<T extends Rect = Rect> {
    type: LineType;
    position: RefLinePosition;
    offset: number;
    start: number;
    end: number;
    rect: T;
}
interface MatchedLine<T extends Rect = Rect> {
    type: LineType;
    left: number;
    top: number;
    size: number;
    refLineMetaList: RefLineMeta<T>[];
}
interface LineGroup<T extends Rect = Rect> {
    min: number;
    max: number;
    offset: number;
    refLineMetaList: RefLineMeta<T>[];
}
interface Delta {
    left: number;
    top: number;
}
declare enum MOVE_DIR {
    MOVE_TOP = 0,
    MOVE_RIGHT = 1,
    MOVE_BOTTOM = 2,
    MOVE_LEFT = 3,
    NONE = 4
}
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
发表了资讯
06/12 12:16

refline.js 0.6.0 发布,通用的设计器参考线组件

refline.js是完全不依赖设计器环境的参考线组件,方便各种设计器快速接入,支持参考线及吸附功能。 项目地址: https://github.com/refline/refline.js 更新内容: 新增参考线过滤参数:lineFilter 新增api:adsorbCreator,极大简化参考线吸附逻辑编写 体验地址:codesandbox 示例:

0
17
发表了资讯
06/07 20:10

refline.js 0.5.0 发布,通用的设计器参考线组件

refline.js是完全不依赖设计器环境的参考线组件,方便各种设计器快速接入,支持参考线及吸附功能。 项目地址: https://github.com/refline/refline.js 更新内容: 支持参考线对齐匹配 支持参考线吸附 操作优化:小于1px的吸附逻辑 体验地址:codesandbox 示例:

1
10
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
暂无内容
0 评论
16 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部