uiik 1.3.0-beta.1 → 1.3.0-beta.2

package/types.d.ts

@@ -1,106 +1,40 @@
-/**
- * A Base class for all Uii classes
- */
+import { UiiTransform } from './transform';
 export declare abstract class Uii {
     #private;
-    /**
-     * 处理过的dom元素数组
-     */
     protected ele: Array<HTMLElement>;
-    /**
-     * 当前uii对象的选项
-     */
     opts: Record<string, any>;
     protected enabled: boolean;
     protected eleString: string;
     constructor(ele: string | Element | NodeList | HTMLCollection | Array<string | Element>, opts?: Record<string, any>);
-    /**
-     * 销毁uii对象，包括卸载事件、清空元素等
-     */
     destroy(): void;
     addPointerDown(el: Element, pointerDown: (args: Record<string, any>) => void | boolean, opts: {
         threshold?: number;
         lockPage?: boolean;
     }): void;
-    /**
-     * 注册事件，以便在{@link destroy}方法中卸载
-     * @param el dom元素
-     * @param event 事件名
-     * @param hook 回调函数
-     * @param useCapture 默认false
-     */
     registerEvent(el: Element, event: string, hook: Function, useCapture?: boolean): void;
-    /**
-     * 禁用uii实例，禁用后的dom不会响应事件
-     */
     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 = {
-    /**
-     * 控制器元素选择器(1-n个元素)，如果为空表示点击任意元素即可触发
-     */
     handle?: ((target: HTMLElement | SVGGraphicsElement) => NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement) | string | NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement;
-    /**
-     * 拖动元素的最小size，如果是数组，表示 [width,height]
-     */
     minSize?: number | Array<number>;
-    /**
-     * 拖动元素的最大size，如果是数组，表示 [width,height]
-     */
     maxSize?: number | Array<number>;
-    /**
-     * resizable方向，默认[n,s,e,w,ne,nw,se,sw]
-     */
     dir?: string[];
-    /**
-     * 宽高比，小数
-     */
     aspectRatio?: number;
-    /**
-     * 开启ghost模式后，拖动元素时会自动创建元素副本并拖动副本，当拖动结束后，副本销毁并且元素移动到最后位置。默认false
-     */
     ghost?: boolean | Function;
     ghostClass?: string;
     ox?: number | string;
     oy?: number | string;
-    /**
-     * 指针点击时触发，可用于阻止后续逻辑
-     * @param event
-     * @returns 返回false则停止后续逻辑
-     */
     onPointerDown?: (event: MouseEvent) => boolean;
     onStart?: (data: {
         w: number;
         h: number;
+        transform: UiiTransform;
     }, event: MouseEvent) => void;
     onResize?: (data: {
         w: number;
@@ -112,44 +46,25 @@ export type ResizableOptions = {
             x: number;
             y: number;
         }>;
+        transform: UiiTransform;
     }, event: MouseEvent) => void;
     onEnd?: (data: {
         w: number;
         h: number;
+        transform: UiiTransform;
     }, event: MouseEvent) => void;
     onClone?: (data: {
         clone: HTMLElement;
     }, 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;
@@ -173,95 +88,31 @@ export type SplittableOptions = {
     }, event: MouseEvent) => void;
 };
 export type DraggableOptions = {
-    /**
-     * 限制活动范围，默认false
-     * boolean 值会获取第一个可拖动元素的parent元素
-     * string 选择器选中的第一个元素
-     * HTMLElement 包裹所有可拖动元素的容器
-     */
     containment?: boolean | HTMLElement | string;
-    /**
-     * 如果可拖动目标为选择器，会自动检测watch容器内选择器元素变动并附加拖动能力。默认true
-     * boolean 时容器取元素第一个的parent
-     * string 时获取选择器元素第一个
-     */
     watch?: boolean | string;
-    /**
-     * 拖动起始阈值，默认0
-     */
     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;
     };
-    /**
-     * 可定义拖动时不同状态下的指针，默认move
-     */
     cursor?: {
         default?: string;
         active?: string;
         over?: string;
     };
-    /**
-     * 网格拖动模式，每次移动指定的网格大小。数字或数字数组
-     */
     grid?: number | number[];
-    /**
-     * 拖动类型标识，用于droppable识别交互类型
-     */
     type?: string;
-    /**
-     * 指针点击时触发，可用于阻止后续逻辑
-     * @param event
-     * @returns 返回false则停止后续逻辑
-     */
     onPointerDown?: (data: {
         draggable: HTMLElement | SVGGraphicsElement;
     }, event: MouseEvent) => boolean;
@@ -269,32 +120,21 @@ export type DraggableOptions = {
         draggable: HTMLElement | SVGGraphicsElement;
         x: number;
         y: number;
+        transform: UiiTransform;
     }, event: MouseEvent) => void;
-    /**
-     * 拖动中调用，返回false阻止dom移动
-     * @param dragDom
-     * @param ev
-     * @param offsetX
-     * @param offsetY
-     * @returns
-     */
     onDrag?: (data: {
         draggable: HTMLElement | SVGGraphicsElement;
         x: number;
         y: number;
         ox: number;
         oy: number;
+        transform: UiiTransform;
     }, event: MouseEvent) => boolean | void;
-    /**
-     * 拖动结束后调用，返回false阻止ghost模式下的dom移动
-     * @param dragDom
-     * @param ev
-     * @returns
-     */
     onEnd?: (data: {
         draggable: HTMLElement | SVGGraphicsElement;
         x: number;
         y: number;
+        transform: UiiTransform;
     }, event: MouseEvent) => boolean | void;
     onClone?: (data: {
         clone: HTMLElement | SVGGraphicsElement;
@@ -308,24 +148,9 @@ export type DraggableOptions = {
     }, 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>;
@@ -346,36 +171,19 @@ 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;
     };
     ox?: number | string;
     oy?: number | string;
-    /**
-     * 控制器元素选择器(1-n个元素)，如果为空表示点击任意元素即可触发
-     */
     handle?: ((target: HTMLElement | SVGGraphicsElement) => NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement) | string | NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement;
-    /**
-     * 指针点击时触发，可用于阻止后续逻辑
-     * @param event
-     * @returns 返回false则停止后续逻辑
-     */
     onPointerDown?: (event: MouseEvent) => boolean;
     onStart?: (data: {
         deg: number;
@@ -395,43 +203,14 @@ export type RotatableOptions = {
     }, event: MouseEvent) => {};
 };
 export type SelectableOptions = {
-    /**
-     * 选择器样式字符串，多个使用空格分隔
-     */
     class?: string;
-    /**
-     * 选择器拖动进行中，被选中元素应用的样式字符串，多个使用空格分隔
-     */
     selectingClass?: string;
-    /**
-     * 选择器拖动结束后，被选中元素应用的样式字符串，多个使用空格分隔
-     */
     selectedClass?: string;
-    /**
-     * 容器中可选择的元素。可以是选择器字符串或返回元素数组的函数
-     */
     targets?: (() => NodeList | HTMLCollection | HTMLElement[]) | string;
-    /**
-     * 选择模式，默认overlap
-     */
     mode?: "overlap" | "inclusion";
-    /**
-     * 是否在鼠标到达容器边缘时自动滚动，默认true
-     */
     scroll?: boolean;
-    /**
-     * 滚动速度，默认10
-     */
     scrollSpeed?: number;
-    /**
-     * 禁止触发元素的css选择器或校验函数，函数返回true表示需要过滤
-     */
     filter?: ((el: HTMLElement) => boolean) | string;
-    /**
-     * 指针点击时触发，可用于阻止后续逻辑
-     * @param event
-     * @returns 返回false则停止后续逻辑
-     */
     onPointerDown?: (event: MouseEvent) => boolean;
     onStart?: (data: {
         selection: Array<HTMLElement>;
@@ -447,67 +226,20 @@ export type SelectableOptions = {
     }, event: MouseEvent) => void;
 };
 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;
@@ -521,22 +253,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;
@@ -544,53 +265,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,40 +1,16 @@
-/**
- * 工具包
- * @author holyhigh2
- */
-/**
- * 一角度对应的弧度
- */
 export declare const ONE_ANG: number;
-/**
- * 一弧度对应的角度
- */
 export declare const ONE_RAD: number;
-/**
- * 获取child相对于parent的位置信息。含border宽度
- *
- * todo
- * @returns {x,y,w,h}
- */
 export declare function getBox(child: Element, parent?: Element): {
     x: number;
     y: number;
     w: number;
     h: number;
 };
-/**
- * 获取事件目标与点击点之间的偏移
- * @param e
- * @returns [offx,offy]
- */
 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;
@@ -42,41 +18,20 @@ export declare function unlockPage(): void;
 export declare function saveCursor(): void;
 export declare function setCursor(cursor: string): void;
 export declare function restoreCursor(): void;
-/**
- * 获取元素样式/属性中的x/y
- * @param el
- */
 export declare function getStyleXy(el: HTMLElement | SVGGraphicsElement): {
     x: number;
     y: number;
 };
-/**
- * 获取元素样式/属性中的w/h
- * @param el
- */
 export declare function getStyleSize(el: HTMLElement | SVGGraphicsElement, cStyle?: CSSStyleDeclaration): {
     w: number;
     h: number;
 };
-/**
- * 获取matrix中的scale/angle
- * @param elCStyle
- * @returns
- */
 export declare function getMatrixInfo(elCStyle: CSSStyleDeclaration | HTMLElement | SVGGraphicsElement): {
     scale: number;
     angle: number;
     x: number;
     y: number;
 };
-/**
- * 获取当前鼠标相对于指定元素el的坐标
- * @param event 点击事件
- * @param el 元素
- * @param elRect 元素的DOMRect
- * @param elCStyle 元素的计算样式
- * @returns
- */
 export declare function getPointInContainer(event: MouseEvent | PointerEvent, el: HTMLElement | SVGGraphicsElement, elRect?: DOMRect, elCStyle?: CSSStyleDeclaration, matrixInfo?: {
     scale: number;
     angle: number;
@@ -84,24 +39,12 @@ export declare function getPointInContainer(event: MouseEvent | PointerEvent, el
     x: number;
     y: number;
 };
-/**
- * 获取元素el在容器container中的相对boundingBox
- * @param el
- * @param container
- */
 export declare function getRectInContainer(el: HTMLElement | SVGGraphicsElement, container: HTMLElement | SVGGraphicsElement): {
     x: number;
     y: number;
     w: number;
     h: number;
 };
-/**
- * 获取指定元素的圆心坐标
- * @param el
- * @param left
- * @param top
- * @returns
- */
 export declare function getCenterXy(el: HTMLElement, ox?: number, oy?: number): {
     sx: number;
     sy: number;
@@ -118,39 +61,14 @@ export declare function getCenterXySVG(el: SVGGraphicsElement, ox: number, oy: n
     ox: number;
     oy: number;
 };
-/**
- * 获取元素当前顶点
- * @param el
- * @param ox 相对于图形左上角的圆心偏移，支持数字/百分比，仅对SVG元素有效，对于非SVG元素使用transform-origin属性
- * @param oy
- */
 export declare function getVertex(el: HTMLElement | SVGGraphicsElement, ox: number | string, oy: number | string): Array<{
     x: number;
     y: number;
 }>;
-/**
- * 计算指定矩形旋转后的顶点坐标
- * @param w 宽
- * @param h 高
- * @param cx 圆心
- * @param cy
- * @param sx
- * @param sy
- * @param radian 旋转角 弧度值
- * @returns
- */
 export declare function calcVertex(w: number, h: number, cx: number, cy: number, sx: number, sy: number, radian: number): Array<{
     x: number;
     y: number;
 }>;
-/**
- * 解析ox/y
- * @param ox 如果不是number或string，originX为0
- * @param oy 如果不是number或string，originY为0
- * @param w
- * @param h
- * @returns {originX,originY}
- */
 export declare function parseOxy(ox: any, oy: any, w: number, h: number): {
     originX: number;
     originY: number;