es-drager
Version:
A draggable, resizable, rotatable component based on vue3
139 lines (138 loc) • 3.24 kB
TypeScript
import { Component, PropType } from 'vue';
export type IDotSide = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
export type EventType = 'change' | 'drag' | 'drag-start' | 'drag-end' | 'resize' | 'resize-start' | 'resize-end' | 'rotate' | 'rotate-start' | 'rotate-end' | 'skew' | 'skew-start' | 'skew-end';
export type IDot = {
side: IDotSide;
cursor?: string;
};
export interface MarklineData {
top?: null | number;
left?: null | number;
diffX?: number;
diffY?: number;
}
export declare const DragerProps: {
type: {
type: PropType<"rect" | "text" | "image">;
default: string;
};
tag: {
type: PropType<string | Component>;
default: string;
};
resizable: {
type: BooleanConstructor;
default: boolean;
};
rotatable: {
type: BooleanConstructor;
default: boolean;
};
skewable: {
type: BooleanConstructor;
default: boolean;
};
boundary: {
type: BooleanConstructor;
};
disabled: BooleanConstructor;
width: {
type: NumberConstructor;
default: number;
};
height: {
type: NumberConstructor;
default: number;
};
left: {
type: NumberConstructor;
default: number;
};
top: {
type: NumberConstructor;
default: number;
};
zIndex: {
type: NumberConstructor;
default: number;
};
angle: {
type: NumberConstructor;
default: number;
};
skew: {
type: PropType<number[]>;
default: () => number[];
};
color: {
type: StringConstructor;
default: string;
};
minWidth: {
type: NumberConstructor;
default: number;
};
minHeight: {
type: NumberConstructor;
default: number;
};
maxWidth: {
type: NumberConstructor;
default: number;
};
maxHeight: {
type: NumberConstructor;
default: number;
};
aspectRatio: {
type: NumberConstructor;
};
selected: BooleanConstructor;
snapToGrid: BooleanConstructor;
gridX: {
type: NumberConstructor;
default: number;
};
gridY: {
type: NumberConstructor;
default: number;
};
scaleRatio: {
type: NumberConstructor;
default: number;
};
disabledKeyEvent: BooleanConstructor;
border: {
type: BooleanConstructor;
default: boolean;
};
resizeList: {
type: PropType<IDotSide[]>;
};
equalProportion: {
type: BooleanConstructor;
};
checkCollision: {
type: BooleanConstructor;
};
snap: BooleanConstructor;
snapThreshold: {
type: NumberConstructor;
default: number;
};
markline: PropType<boolean | ((e: MarklineData) => void)>;
extraLines: PropType<(target: DOMRect) => Element[] | Array<{
showTop?: number;
top?: number;
showLeft?: number;
left?: number;
}>>;
};
export interface DragData {
width: number;
height: number;
left: number;
top: number;
angle: number;
skew?: number[];
}