npm install refline.js

import { RefLine } from 'refline.js'

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

// Сопоставление линий привязки
const lines = refLine.getAllRefLines()

// Прикрепление линий привязки путём перетаскивания
// mousedown
const updater = refLine.adsorbCreator({
  pageX: 100,
  pageY: 100,
})
// mousemove
const {delta} = updater({
  pageX: 108,
  pageY: 110,
})

interface RefLineOpts<T extends Rect> {
  // Список всех прямоугольников
  rects?: T[];
  // Устанавливает отдельный пункт прикрепления
  points?: Point;
  // Текущий проверяемый прямоугольник, можно изменить с помощью setCurrent
  current?: T | string;
  // Фильтр линий привязки, по умолчанию предоставляет 6 линий привязки (горизонтальные и вертикальные), можно использовать для фильтрации ненужных линий привязки
  lineFilter?: (line: RefLineMeta) => boolean;
  // Пользовательские вертикальные линии привязки
  adsorbVLines?: Array<{key: string; offset: number}>;
  // Пользовательские горизонтальные линии привязки
  adsorbHLines?: Array<{key: string; offset: number}>;
  /**
   * Фильтр в процессе прикрепления, включает все сегменты линии
   */
  adsorbLineFilter?: (line: LineGroup) => boolean;
}

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

// Получает совпадающие вертикальные линии привязки
refLine.getVRefLines()

interface MatchedLine{
  // Тип совпадающей линии привязки после сопоставления
  type: "horizontal" | "vertical";
  // Координата x линии привязки относительно контейнера прямоугольника
  left: number;
  // Координата y линии привязки относительно контейнера прямоугольника
  top: number;
  // Высота линии привязки (относительно горизонтальной линии привязки — ширина)
  size: number;
  // Информация о прямоугольнике, к которому привязана линия
  refLineMetaList: RefLineMeta[];
}

interface IOpts{
  pageX: number;
  pageY: number;
  current?: Rect;
   /**
    * Имеет более высокий приоритет, чем current
    */
  point?: Point;
  distance?: number;
  // Отключает вычисление прикрепления
  disableAdsorb?: boolean;
  // Масштаб текущего представления, по умолчанию равен 1
  scale?: number;
}

**Примечание:** scale используется только для вычисления масштабированного расстояния перетаскивания.

type Updater = (data: {
    pageX?: number;
    pageY?: number;
    current?: Rect;
     /**
      * Имеет более высокий приоритет, чем current
      */
    point?: Point;
    distance?: number;
    // Отключает вычисление прикрепления
    disableAdsorb?: boolean;
    // Обновляет масштаб текущего представления, по умолчанию равен 1
    scale?: number;
    // Устанавливает смещение начала координат, при этом pageX или pageY и scale становятся недействительными
    offsetX?: number;
    offsetY?: number;
}) => {
    // Смещение перетаскивания без прикрепления, delta и raw равны, если нет прикрепления
    delta: {
      left: number;
      top: number;
    };
    // Относительное смещение от начальных pageX/pageY
    offset: {
      left: number;
      top: number;
    };
    rect: Rect;
}

const refLine = new RefLine({...})

const updater = refLine.adsorbCreator({
  current: rect,
  pageX: 100,
  pageY: 100,
  distance: 5,
  scale: 1
})

const ret = updater({
  pageX: 105,
  pageY: 200
})

rect.left += ret.delta.left
rect.top += ret.delta.top

export interface RefLineOpts<T extends Rect = Rect> {
    rects?: T[];
    points?: Point[];
    current?: T | string;
    /**
     * Фильтр прямоугольников, создающих линии привязки, не включая пользовательские линии привязки
     */
    lineFilter?: (line: RefLineMeta<T>) => boolean;
    adsorbVLines?: Omit<AdsorbLine, "type">[];
    adsorbHLines?: Omit<AdsorbLine, "type">[];
    /**
     * Фильтр в процессе прикрепления, включающий все сегменты линий
     */
    adsorbLineFilter?: (line: LineGroup<T>) => boolean;
}
export declare class RefLine<T extends Rect = Rect> {
    get rects(): T[];
    get

В тексте запроса присутствуют фрагменты кода на языке TypeScript. В переводе они сохранены без изменений. ```
vLines (): LineGroup<T> [];
hLines (): LineGroup<T> [];
vLineMap (): Map<string, RefLineMeta<T> []>;
hLineMap (): Map<string, RefLineMeta<T> []>;
adsorbVLines (): AdsorbVLine [];
set adsorbVLines(lines: AdsorbVLine[]): void;
adsorbHLines (): AdsorbHLine [];
set adsorbHLines(lines: AdsorbHLine[]): void;
adsorbLineFilter (): ((line: LineGroup<T>) => boolean) | undefined;
constructor (opts?: RefLineOpts<T>);
getRectByKey (key: string | number): T | null;
getOffsetRefLineMetaList (type: LineType, offset: number): RefLineMeta<T>[];
addPoint (point: Point): Rect;
addRect (rect: T): T;
removeRect (key: string | number): void;
removePoint (key: string | number): void;
setCurrent (current: T | string | null): void;
getCurrent (): T | null;
setLineFilter (filter: ((line: RefLineMeta) => boolean) | null): void;
getLineFilter (): ((line: RefLineMeta<Rect>) => boolean) | null;
matchRefLines (type: LineType, adsorbOnly?: boolean): MatchedLine<T>[];
getNearestOffsetFromOffset (type: LineType, offset: number): [[number, number] | null, [number, number] | null];
hasMatchedRefLine (position: RefLinePosition): boolean;
matchVRefLines (): MatchedLine<T>[];
getVRefLines (): MatchedLine<T>[];
matchHRefLines (): MatchedLine<T>[];
getHRefLines (): MatchedLine<T>[];
getAllRefLines (): MatchedLine<T>[];
getAdsorbHRefLines (): MatchedLine<T>[];
getAdsorbVRefLines (): MatchedLine<T>[];
getAllAdsorbRefLines (): MatchedLine<T>[];
getOffsetAdsorbDelta (type: LineType, offset: number, delta: number, adsorbDistance?: number): number;
getAdsorbDelta (delta: Delta, adsorbDistance: number, dir: { x: "left" | "right" | "none"; y: "up" | "down" | "none" }): Delta;
adsorbCreator ({ pageX, pageY, current, point, distance, disableAdsorb, scale }: { pageX: number; pageY: number; current?: T | null; point?: Point; distance?: number; disableAdsorb?: boolean; scale?: number }): (data: { pageX?: number; pageY?: number; current?: T; point?: Point; distance?: number; disableAdsorb?: boolean; scale?: number; offsetX?: number; offsetY?: number }) => { raw: { left: number; top: number }; delta: { left: number; top: number }; offset: { left: number; top: number }; rect: T };
``` ```
Слева: число;
  Сверху: число; 
  Ширина: число;  
  Высота: число;   
  Поворот?: число;    
  [x: строка]: любое;
}

экспорт интерфейса BoundingRect {
  Слева: число;
  Сверху: число;
  Право: число;
  Низ: число;
  Ширина: число;
  Высота: число;
}

тип экспорта LineType = «горизонтальный» | «вертикальный»;

// горизонтальный/вертикальный верх/центр/низ слева/центр/справа
тип экспорта VRefLinePosition = «vl» | «vc» | «vr»;
тип экспорта HRefLinePosition = «ht» | «hc» | «hb»;
тип экспорта RefLinePosition = VRefLinePosition | HRefLinePosition;

интерфейс экспорта AdsorbLine {
  ключ: строка;
  тип: LineType;
  смещение: число;
}

Тип экспорта AdsorbVLine = Omit<AdsorbLine, «тип»>;
Тип экспорта AdsorbHLine = Omit<AdsorbLine, «тип»>;

интерфейс экспорта RefLineMeta<T расширяет Rect = Rect> {
  тип: LineType;
  позиция: RefLinePosition;
  смещение: число;
  начало: число;
  конец: число;
  прямоугольник: T;
  adsorbOnly?: логическое значение;
  /**
   * Когда совпадение с пользовательской линией поглощения
   */
  линия?: AdsorbVLine | AdsorbVLine;
}

интерфейс экспорта MatchedLine<T расширяет Rect = Rect> {
  тип: LineType;
  слева: число;
  верх: число;
  размер: число;
  refLineMetaList: RefLineMeta<T>[];
}

интерфейс экспорта LineGroup<T расширяет Rect = Rect> {
  мин: число;
  макс: число;
  смещение: число;
  refLineMetaList: RefLineMeta<T>[];
}

интерфейс экспорта Delta {
  слева: число;
  вверху: число;
}

перечислимый экспорт MOVE_DIR {
  MOVE_TOP,
  MOVE_RIGHT,
  MOVE_BOTTOM,
  MOVE_LEFT,
  NONE,
}

интерфейс экспорта Point {
  Ключ?: строка | число;
  x: число;
  y: число;
}