refline.js
refline.js — это компонент линии привязки, который не зависит от среды конструктора и позволяет легко интегрировать его в различные конструкторы. Он поддерживает функции сопоставления и прикрепления линий привязки.
Пример
Установка
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,
})
Создаёт экземпляр RefLine.
Конструктор.
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()
Обновляет lineFilter.
Получает совпадающие вертикальные линии привязки, возвращает список линий привязки, пустой массив, если совпадений нет.
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: число;
}
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )