uiik 1.1.0 → 1.3.0-alpha

package/types.d.ts

@@ -1,94 +1,33 @@
-/**
- * A Base class for all Uii classes
- */
 export declare abstract class Uii {
     #private;
-    /**
-     * 处理过的dom元素数组
-     */
     protected ele: Array<HTMLElement>;
-    /**
-     * 当前uii对象的选项
-     */
-    protected opts: Record<string, any>;
+    opts: Record<string, any>;
     protected enabled: boolean;
-    constructor(ele: string | HTMLElement | NodeList | HTMLCollection | Array<string | HTMLElement>, opts?: Record<string, any>);
-    /**
-     * 销毁uii对象，包括卸载事件、清空元素等
-     */
+    protected eleString: string;
+    constructor(ele: string | Element | NodeList | HTMLCollection | Array<string | Element>, opts?: Record<string, any>);
     destroy(): void;
-    /**
-     * 注册事件，以便在{@link destroy}方法中卸载
-     * @param el dom元素
-     * @param event 事件名
-     * @param hook 回调函数
-     * @param useCapture 默认false
-     */
-    protected registerEvent(el: HTMLElement, event: string, hook: Function, useCapture?: boolean): void;
-    /**
-     * 禁用uii实例，禁用后的dom不会响应事件
-     */
+    addPointerDown(el: Element, pointerDown: (args: Record<string, any>) => void, opts: {
+        threshold?: number;
+        lockPage?: boolean;
+    }): void;
+    registerEvent(el: Element, event: string, hook: Function, useCapture?: boolean): void;
     disable(): void;
-    /**
-     * 启用uii实例
-     */
     enable(): void;
-    /**
-     * 获取uii实例选项对象
-     */
     getOptions(): Record<string, any>;
-    /**
-     * 获取指定名称的选项值
-     * @param name
-     * @returns
-     */
     getOption(name: string): any;
-    /**
-     * 设置多个选项值。触发`onOptionChanged`
-     * @param options
-     */
     setOptions(options?: Record<string, any>): void;
-    /**
-     * 设置指定name的选项值。触发`onOptionChanged`
-     * @param name
-     * @param value
-     */
     setOption(name: string, value: any): void;
-    /**
-     * @internal
-     */
     protected onOptionChanged(opts?: Record<string, any>): void;
 }
 export type ResizableOptions = {
-    /**
-     * handle的宽高，默认8
-     */
-    handleSize?: number;
-    /**
-     * 拖动元素的最小size，如果是数组，表示 [width,height]
-     */
+    handle?: ((target: HTMLElement | SVGGraphicsElement) => NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement) | string | NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement;
     minSize?: number | Array<number>;
-    /**
-     * 拖动元素的最大size，如果是数组，表示 [width,height]
-     */
     maxSize?: number | Array<number>;
-    /**
-     * resizable方向，默认[n,s,e,w,ne,nw,se,sw]
-     */
     dir?: string[];
-    /**
-     * handle所在元素的位置偏移，负数向内，正数向外。默认0
-     */
-    offset?: number;
-    /**
-     * 宽高比，小数
-     */
     aspectRatio?: number;
-    /**
-     * 开启ghost模式后，拖动元素时会自动创建元素副本并拖动副本，当拖动结束后，副本销毁并且元素移动到最后位置。默认false
-     */
     ghost?: boolean | Function;
     ghostClass?: string;
+    onPointerDown?: (event: MouseEvent) => boolean;
     onStart?: (data: {
         w: number;
         h: number;
@@ -96,6 +35,8 @@ export type ResizableOptions = {
     onResize?: (data: {
         w: number;
         h: number;
+        ow: number;
+        oh: number;
     }, event: MouseEvent) => void;
     onEnd?: (data: {
         w: number;
@@ -106,34 +47,13 @@ export type ResizableOptions = {
     }, event: MouseEvent) => void;
 };
 export type SplittableOptions = {
-    /**
-     * handle宽/高，默认10
-     */
     handleSize?: number;
-    /**
-     * 最小区域，如果是数组可以按顺序定义分割区域，默认0
-     */
     minSize?: number | number[];
-    /**
-     * 单边模式，只修改单侧元素size，用于flex布局。可选值为 start/end
-     */
     oneSideMode?: "start" | "end";
-    /**
-     * 粘性吸附，如果是数组可以按顺序定义分割区域。设置minSize后生效
-     */
     sticky?: boolean | boolean[];
-    /**
-     * 自动创建的handle是否在元素内部插入，默认false
-     */
     inside?: boolean;
-    /**
-     * 开启ghost模式后，拖动元素时会自动创建元素副本并拖动副本，当拖动结束后，副本销毁且元素移动到最后位置。默认false
-     */
     ghost?: boolean;
     ghostClass?: string;
-    /**
-     * 自定义handle选择器，多个使用空格分隔。handle元素可以是与分割元素平级或在分割元素内
-     */
     handle?: string;
     onStart?: (data: {
         size1: number;
@@ -157,145 +77,66 @@ export type SplittableOptions = {
     }, event: MouseEvent) => void;
 };
 export type DraggableOptions = {
-    /**
-     * 限制活动范围，默认false
-     */
-    container?: boolean;
-    /**
-     * 拖动起始阈值，默认0
-     */
+    containment?: boolean | HTMLElement | string;
+    watch?: boolean | string;
     threshold?: number;
-    /**
-     * 实际响应拖动的元素选择器，字符串
-     */
     handle?: string;
-    /**
-     * 禁止触发元素的css选择器
-     */
     filter?: string;
-    /**
-     * 拖动目标，dom/selector数组，用于拖动交互事件
-     */
     droppable?: (() => NodeList | HTMLCollection | HTMLElement[]) | string | HTMLElement | HTMLElement[];
-    /**
-     * 开启ghost模式后，拖动元素时会自动创建元素副本并拖动副本，当拖动结束后，副本销毁并且元素移动到最后位置。默认false，支持函数返回副本元素
-     */
     ghost?: ((el: HTMLElement) => HTMLElement) | boolean;
     ghostClass?: string;
-    /**
-     * 传递v/h可实现单向拖动。默认''
-     */
     direction?: "v" | "h";
-    /**
-     * 是否在鼠标到达容器边缘时自动滚动，默认true
-     */
     scroll?: boolean;
-    /**
-     * 滚动速度，默认10
-     */
     scrollSpeed?: number;
-    /**
-     * 拖动时元素的zIndex
-     */
     zIndex?: number;
-    /**
-     * 可将不同的拖动元素编为一组，拖动时会自动管理zIndex
-     */
     group?: string;
-    /**
-     * 拖动时应用的class样式，多个使用空格分开
-     */
     classes?: string;
-    /**
-     * 拖动元素可自动吸附的目标元素选择器。字符串
-     */
     snap?: string;
     snapOptions?: {
-        /**
-         * 吸附元素的移动误差，默认10
-         */
         tolerance: number;
     };
-    /**
-     * 拖动时元素左上角距离指针的距离，支持百分比及负数
-     */
-    cursorAt?: {
-        left: number | string;
-        top: number | string;
-    };
-    /**
-     * 可定义拖动时不同状态下的指针，默认move
-     */
     cursor?: {
         default?: string;
         active?: string;
         over?: string;
     };
-    /**
-     * 网格拖动模式，每次移动指定的网格大小。数字或数字数组
-     */
     grid?: number | number[];
-    /**
-     * 拖动类型标识，用于droppable识别交互类型
-     */
     type?: string;
+    onPointerDown?: (data: {
+        draggable: HTMLElement | SVGGraphicsElement;
+    }, event: MouseEvent) => boolean;
     onStart?: (data: {
-        draggable: HTMLElement;
+        draggable: HTMLElement | SVGGraphicsElement;
+        x: number;
+        y: number;
     }, event: MouseEvent) => void;
-    /**
-     * 拖动中调用，返回false阻止dom移动
-     * @param dragDom
-     * @param ev
-     * @param offsetX
-     * @param offsetY
-     * @returns
-     */
     onDrag?: (data: {
-        draggable: HTMLElement;
+        draggable: HTMLElement | SVGGraphicsElement;
         x: number;
         y: number;
         ox: number;
         oy: number;
     }, event: MouseEvent) => boolean | void;
-    /**
-     * 拖动结束后调用，返回false阻止ghost模式下的dom移动
-     * @param dragDom
-     * @param ev
-     * @returns
-     */
     onEnd?: (data: {
-        draggable: HTMLElement;
+        draggable: HTMLElement | SVGGraphicsElement;
+        x: number;
+        y: number;
     }, event: MouseEvent) => boolean | void;
     onClone?: (data: {
-        clone: HTMLElement;
+        clone: HTMLElement | SVGGraphicsElement;
     }, event: MouseEvent) => void;
     onSnap?: (data: {
-        el: HTMLElement;
-        targetH: HTMLElement;
-        targetV: HTMLElement;
+        el: HTMLElement | SVGGraphicsElement;
+        targetH: HTMLElement | SVGGraphicsElement;
+        targetV: HTMLElement | SVGGraphicsElement;
         dirH: string;
         dirV: string;
     }, event: MouseEvent) => void;
 };
 export type DroppableOptions = {
-    /**
-     * 当accepts的draggable对象开始拖动时，自动设置该样式。多个样式使用空格分隔
-     */
     activeClass?: string;
-    /**
-     * 当accepts的draggable对象拖动到droppable元素上时，自动设置该样式。多个样式使用空格分隔
-     */
     hoverClass?: string;
-    /**
-     * 定义哪些draggable元素进行交互。如果是字符串，支持不同Draggable对象进行编组
-     */
     accepts?: ((ele: Array<HTMLElement>, draggable: HTMLElement) => boolean) | string;
-    /**
-     * 当accepts的draggable对象开始拖动时触发
-     * @param draggable
-     * @param ele
-     * @returns
-     */
     onActive?: (data: {
         draggable: HTMLElement;
         droppables: Array<HTMLElement>;
@@ -316,52 +157,42 @@ export type DroppableOptions = {
         draggable: HTMLElement;
         droppable: HTMLElement;
     }, event: MouseEvent) => void;
-    /**
-     * 当accepts的draggable对象结束拖动时触发
-     * @param draggable
-     * @param ele
-     * @returns
-     */
     onDeactive?: (data: {
         draggable: HTMLElement;
         droppables: Array<HTMLElement>;
     }) => void;
 };
 export type RotatableOptions = {
-    /**
-     * 可定义拖动时不同状态下的指针，默认crosshair
-     */
     cursor?: {
         default?: string;
         active?: string;
     };
+    handle?: ((target: HTMLElement | SVGGraphicsElement) => NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement) | string | NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement;
+    onPointerDown?: (event: MouseEvent) => boolean;
     onStart?: (data: {
         deg: number;
+        cx: number;
+        cy: number;
     }, event: MouseEvent) => {};
     onRotate?: (data: {
         deg: number;
+        cx: number;
+        cy: number;
     }, event: MouseEvent) => {};
     onEnd?: (data: {
         deg: number;
     }, event: MouseEvent) => {};
 };
 export type SelectableOptions = {
-    /**
-     * 选择器样式字符串，多个使用空格分隔
-     */
     class?: string;
-    /**
-     * 选择器拖动进行中，被选中元素应用的样式字符串，多个使用空格分隔
-     */
     selectingClass?: string;
-    /**
-     * 选择器拖动结束后，被选中元素应用的样式字符串，多个使用空格分隔
-     */
     selectedClass?: string;
-    /**
-     * 容器中可选择的元素。可以是选择器字符串或返回元素数组的函数
-     */
     targets?: (() => NodeList | HTMLCollection | HTMLElement[]) | string;
+    mode?: "overlap" | "inclusion";
+    scroll?: boolean;
+    scrollSpeed?: number;
+    filter?: ((el: HTMLElement) => boolean) | string;
+    onPointerDown?: (event: MouseEvent) => boolean;
     onStart?: (data: {
         selection: Array<HTMLElement>;
         selectable: HTMLElement;
@@ -374,85 +205,22 @@ export type SelectableOptions = {
         selection: Array<HTMLElement>;
         selectable: HTMLElement;
     }, event: MouseEvent) => void;
-    /**
-     * 选择模式，默认overlap
-     */
-    mode?: "overlap" | "inclusion";
-    /**
-     * 是否在鼠标到达容器边缘时自动滚动，默认true
-     */
-    scroll?: boolean;
-    /**
-     * 滚动速度，默认10
-     */
-    scrollSpeed?: number;
-    /**
-     * 禁止触发元素的css选择器或校验函数，函数返回true表示需要过滤
-     */
-    filter?: ((el: HTMLElement) => boolean) | string;
 };
 export type SortableOptions = {
-    /**
-     * 是否在鼠标到达容器边缘时自动滚动，默认true
-     */
     scroll?: boolean;
-    /**
-     * 滚动速度，默认10
-     */
     scrollSpeed?: number;
-    /**
-     * 禁止触发元素的css选择器
-     */
     filter?: string;
-    /**
-     * ghost元素插入的容器，默认document.body
-     */
     ghostContainer?: HTMLElement;
-    /**
-     * ghost元素样式
-     */
     ghostClass?: string;
-    /**
-     * 用于标识一组sortable容器。当newSortable容器是一组元素时即使该属性为空，也会自动创建匿名group
-     */
     group?: string;
-    /**
-     * 自定义handle选择器
-     */
     handle?: string;
-    /**
-     * 当相同group的sortable元素开始拖动时，自动为move.from为true的sortable容器设置该样式。多个样式使用空格分隔
-     */
     activeClass?: string;
-    /**
-     * 指定sortable元素的拖动策略
-     */
     move?: {
-        /**
-         * 表示元素从fromContainer的移出策略，默认true
-         */
         to?: ((item: HTMLElement, from: HTMLElement) => boolean) | boolean | 'copy';
-        /**
-         * 表示来自fromContainer的元素对toContainers的移入策略，默认true
-         */
         from?: ((item: HTMLElement, from: HTMLElement, to: HTMLElement) => boolean) | boolean;
     };
-    /**
-     * 当ghost元素移出容器后列表元素的处理方式
-     * remove 删除列表元素
-     * revert 复原拖动前位置
-     */
     spill?: 'remove' | 'revert';
-    /**
-     * 是否可排序，默认true
-     */
     sort?: boolean;
-    /**
-     * 当一组中的任意sortable容器中的元素被拖动时，其他容器会触发激活事件
-     * @param data
-     * @param event
-     * @returns
-     */
     onActive?: (data: {
         item: HTMLElement;
         from: HTMLElement;
@@ -466,22 +234,11 @@ export type SortableOptions = {
         from: HTMLElement;
         index: number;
     }, event: MouseEvent) => void;
-    /**
-     * 拖动结束后触发
-     * @param data
-     * @param event
-     * @returns
-     */
     onEnd?: (data: {
         item: HTMLElement;
         from: HTMLElement;
         to: HTMLElement;
     }, event: MouseEvent) => void;
-    /**
-     * 拖动中且排序发生变更时触发
-     * @param data
-     * @param event
-     */
     onChange?: (data: {
         item: HTMLElement;
         from: HTMLElement;
@@ -489,53 +246,28 @@ export type SortableOptions = {
         fromIndex: number;
         toIndex: number;
     }, event: MouseEvent) => void;
-    /**
-     * 拖动结束后，如果列表排序发生变更时触发，包括顺序变更或新增节点或移除节点
-     * @param data
-     * @param event
-     */
     onUpdate?: (data: {
         item: HTMLElement;
         from: HTMLElement;
         to: HTMLElement;
     }, event: MouseEvent) => void;
-    /**
-     * 拖动中指针进入sortable容器时触发
-     * @param data
-     * @param event
-     */
     onEnter?: (data: {
         item: HTMLElement;
         from: HTMLElement;
         to: HTMLElement;
         dir: string;
     }, event: MouseEvent) => void;
-    /**
-     * 拖动中指针离开sortable容器时触发
-     * @param data
-     * @param event
-     */
     onLeave?: (data: {
         item: HTMLElement;
         from: HTMLElement;
         to: HTMLElement;
     }, event: MouseEvent) => void;
-    /**
-     * 拖动元素插入到sortable容器中时触发
-     * @param data
-     * @param event
-     */
     onAdd?: (data: {
         item: HTMLElement;
         from: HTMLElement;
         to: HTMLElement;
         index: number;
     }, event: MouseEvent) => void;
-    /**
-     * 拖动元素从sortable容器中删除时触发
-     * @param data
-     * @param event
-     */
     onRemove?: (data: {
         item: HTMLElement;
         from: HTMLElement;

package/utils.d.ts

@@ -1,18 +1,16 @@
-/**
- * 工具包
- * @author holyhigh2
- */
-/**
- * 获取child相对于parent的offset信息。含border宽度
- * @returns
- */
-export declare function getOffset(child: HTMLElement, parent?: HTMLElement): {
+export declare const ONE_ANG: number;
+export declare const ONE_RAD: number;
+export declare function getBox(child: Element, parent?: Element): {
     x: number;
     y: number;
+    w: number;
+    h: number;
 };
-/**
- * 边缘检测最小内部边距
- */
+export declare function getPointOffset(e: MouseEvent, pos: {
+    x: number;
+    y: number;
+}): number[];
+export declare function isSVGEl(el: Element): el is SVGElement;
 export declare const EDGE_THRESHOLD = 5;
 export declare const DRAGGING_RULE = "body * { pointer-events: none; }";
 export declare function lockPage(): void;
@@ -20,3 +18,34 @@ export declare function unlockPage(): void;
 export declare function saveCursor(): void;
 export declare function setCursor(cursor: string): void;
 export declare function restoreCursor(): void;
+export declare function getStyleXy(el: HTMLElement | SVGGraphicsElement): {
+    x: number;
+    y: number;
+};
+export declare function getMatrixInfo(elCStyle: CSSStyleDeclaration | HTMLElement | SVGGraphicsElement): {
+    scale: number;
+    angle: number;
+    x: number;
+    y: number;
+};
+export declare function getPointInContainer(event: MouseEvent | PointerEvent, el: HTMLElement | SVGGraphicsElement, elRect?: DOMRect, elCStyle?: CSSStyleDeclaration, matrixInfo?: {
+    scale: number;
+    angle: number;
+}): {
+    x: number;
+    y: number;
+};
+export declare function getRectInContainer(el: HTMLElement | SVGGraphicsElement, container: HTMLElement | SVGGraphicsElement): {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+export declare function getCenterXy(el: HTMLElement | SVGGraphicsElement): {
+    sx: number;
+    sy: number;
+    x: number;
+    y: number;
+    ox: number;
+    oy: number;
+};