uiik 1.0.0

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "uiik",
+  "version": "1.0.0",
+  "description": "A UI interaction kit includes draggable, splittable, rotatable, selectable, etc.",
+  "main": "index.js",
+  "module": "index.esm.js",
+  "types": "types/index.d.ts",
+  "author": "holyhigh2",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/holyhigh2/uii"
+  },
+  "bugs": "https://github.com/holyhigh2/uii/issues/new",
+  "keywords": [
+    "js",
+    "dom",
+    "javascript",
+    "ui",
+    "interactions",
+    "draggable",
+    "splittable",
+    "rotatable",
+    "selectable",
+    "resizable",
+    "detector"
+  ],
+  "scripts": {
+    "build": "rollup --config",
+    "test": "rollup --config rollup.config.test.js --watch",
+    "doc": "npx typedoc"
+  },
+  "peerDependencies": {
+    "@holyhigh/func.js": ">=2.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/eslint-parser": "^7.13",
+    "@rollup/plugin-babel": "^5.2.1",
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-eslint": "^8.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
+    "@rollup/plugin-terser": "^0.3.0",
+    "eslint": "^7.23.0",
+    "eslint-config-google": "^0.14.0",
+    "rollup": "^2.33",
+    "rollup-plugin-banner2": "^1.0.0",
+    "rollup-plugin-clear": "2.0.7",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-serve": "^1.1",
+    "rollup-plugin-typescript2": "0.34.1",
+    "rollup-pluginutils": "^2.8.2",
+    "tslib": "^2.4.0",
+    "typescript": "^4.8.2",
+    "typedoc": "^0.23.28",
+    "typedoc-plugin-markdown": "^3.14.0"
+  }
+}

package/types/detector.d.ts

@@ -0,0 +1,34 @@
+import { CollisionData, CollisionDetectorOptions } from "./types";
+export declare class CollisionDetector {
+    #private;
+    targetsData: Array<CollisionData>;
+    el: Element;
+    elData: CollisionData;
+    opts: Record<string, any>;
+    constructor(el: string | HTMLElement, targets: (() => Array<HTMLElement>) | string | HTMLElement | Array<HTMLElement> | NodeList | HTMLCollection, opts?: CollisionDetectorOptions);
+    /**
+     * update targets data if them changed
+     */
+    update(): void;
+    /**
+     * detect targets and return overlaps
+     * @returns
+     */
+    getOverlaps(): Array<HTMLElement>;
+    getOverlaps(x1: number, y1: number, x2: number, y2: number): Array<HTMLElement>;
+    /**
+     * detect targets and return inclusions
+     * @returns
+     */
+    getInclusions(): Array<HTMLElement>;
+    getInclusions(x1: number, y1: number, x2: number, y2: number): Array<HTMLElement>;
+}
+/**
+ * create a detector for the el and return
+ * @param el element to be detected
+ * @param targets
+ * @param opts CollisionDetectorOptions
+ * @param opts.container a root element of targets
+ * @returns
+ */
+export declare function newCollisionDetector(el: string | HTMLElement, targets: (() => Array<HTMLElement>) | string | HTMLElement | Array<HTMLElement> | NodeList | HTMLCollection, opts?: CollisionDetectorOptions): CollisionDetector;

package/types/draggable.d.ts

@@ -0,0 +1,25 @@
+import { DraggableOptions, Uii } from "./types";
+/**
+ * 用于表示一个或多个可拖动元素的定义
+ * > 可用CSS接口
+ * - .uii-draggable
+ * - .uii-draggable-handle
+ * - .uii-draggable-active
+ * - .uii-draggable-ghost
+ * @public
+ */
+export declare class Draggable extends Uii {
+    #private;
+    constructor(els: string | HTMLElement | Array<string | HTMLElement>, opts?: DraggableOptions);
+    /**
+     * @internal
+     */
+    onOptionChanged(opts: Record<string, any>): void;
+}
+/**
+ * create a draggable pattern for one or more elements with opts
+ * @param els selector string / html element
+ * @param opts
+ * @returns Draggable instance
+ */
+export declare function newDraggable(els: string | HTMLElement | Array<string | HTMLElement>, opts?: DraggableOptions): Draggable;

package/types/droppable.d.ts

@@ -0,0 +1,30 @@
+import { DroppableOptions, Uii } from "./types";
+/**
+ * 用于表示一个或多个可响应拖动元素的定义
+ * > 可用CSS接口
+ * - .uii-droppable
+ * @public
+ */
+export declare class Droppable extends Uii {
+    #private;
+    constructor(el: string | HTMLElement | Array<string | HTMLElement>, opts?: DroppableOptions);
+    /**
+     * @internal
+     */
+    bindEvent(el: HTMLElement, opts: Record<string, any>): void;
+    /**
+     * @internal
+     */
+    active(target: HTMLElement): void;
+    /**
+     * @internal
+     */
+    deactive(target: HTMLElement): void;
+}
+/**
+ * Enable els to response to draggable objects
+ * @param els selector string / html element
+ * @param opts
+ * @returns
+ */
+export declare function newDroppable(els: string | HTMLElement | Array<string | HTMLElement>, opts?: DroppableOptions): Droppable;

package/types/index.d.ts

@@ -0,0 +1,25 @@
+import { newSplittable } from './splittable';
+import { newResizable } from './resizable';
+import { newDraggable } from './draggable';
+import { newDroppable } from './droppable';
+import { newRotatable } from './rotatable';
+import { newSelectable } from './selectable';
+export * from './splittable';
+export * from './resizable';
+export * from './draggable';
+export * from './droppable';
+export * from './rotatable';
+export * from './selectable';
+export * from './detector';
+export * from './types';
+export declare const VERSION: string;
+declare const _default: {
+    VERSION: string;
+    newSplittable: typeof newSplittable;
+    newResizable: typeof newResizable;
+    newDraggable: typeof newDraggable;
+    newDroppable: typeof newDroppable;
+    newRotatable: typeof newRotatable;
+    newSelectable: typeof newSelectable;
+};
+export default _default;

package/types/resizable.d.ts

@@ -0,0 +1,19 @@
+import { ResizableOptions, Uii } from './types';
+/**
+ * 用于表示一个或多个可改变尺寸元素的定义
+ * > 可用CSS接口
+ * - .uii-resizable-handle
+ * - .uii-resizable-handle-[n/s/e/w/ne/nw/se/sw]
+ * - .uii-resizable-handle-active
+ * @public
+ */
+export declare class Resizable extends Uii {
+    constructor(els: string | HTMLElement, opts?: ResizableOptions);
+}
+/**
+ * Make els resizable
+ * @param els selector string / html element
+ * @param opts
+ * @returns
+ */
+export declare function newResizable(els: string | HTMLElement, opts?: ResizableOptions): Resizable;

package/types/rotatable.d.ts

@@ -0,0 +1,23 @@
+/**
+ * dom rotator
+ * @author holyhigh2
+ */
+import { RotatableOptions, Uii } from './types';
+/**
+ * 用于表示一个或多个可旋转元素的定义
+ * > 可用CSS接口
+ * - .uii-rotatable
+ * - .uii-rotatable-handle
+ * - .uii-rotatable-active
+ * @public
+ */
+export declare class Rotatable extends Uii {
+    constructor(els: string | HTMLElement, opts?: RotatableOptions);
+}
+/**
+ * Make els rotatable
+ * @param els selector string / html element
+ * @param opts
+ * @returns
+ */
+export declare function newRotatable(els: string | HTMLElement, opts?: RotatableOptions): Rotatable;

package/types/selectable.d.ts

@@ -0,0 +1,32 @@
+/**
+ * selector
+ * @author holyhigh2
+ */
+import { SelectableOptions, Uii } from "./types";
+/**
+ * 用于表示一个元素选择器的定义
+ * > 可用CSS接口
+ * - .uii-selector
+ * - .uii-selecting
+ * - .uii-selected
+ * @public
+ */
+export declare class Selectable extends Uii {
+    #private;
+    constructor(container: string | HTMLElement, opts?: SelectableOptions);
+    /**
+     *  更新targets
+     */
+    updateTargets(): void;
+    /**
+     * @internal
+     */
+    onOptionChanged(): void;
+}
+/**
+ * Add a selector into the container
+ * @param container css selector or html element
+ * @param opts
+ * @returns
+ */
+export declare function newSelectable(container: string | HTMLElement, opts?: SelectableOptions): Selectable;

package/types/splittable.d.ts

@@ -0,0 +1,23 @@
+import { SplittableOptions, Uii } from './types';
+/**
+ * 用于表示一个或多个分割器的定义
+ * > 可用CSS接口
+ * - .uii-splittable
+ * - .uii-splittable-handle
+ * - .uii-splittable-handle-ghost
+ * - .uii-splittable-handle-active
+ * - .uii-splittable-v
+ * - .uii-splittable-h
+ * @public
+ */
+export declare class Splittable extends Uii {
+    #private;
+    constructor(container: string | HTMLElement, opts?: SplittableOptions);
+}
+/**
+ * Add one or more splittors into the container
+ * @param container css selector or html element
+ * @param opts SplittableOptions
+ * @returns
+ */
+export declare function newSplittable(container: string | HTMLElement, opts?: SplittableOptions): Splittable;

package/types/types.d.ts

@@ -0,0 +1,320 @@
+/**
+ * A Base class for all Uii classes
+ */
+export declare abstract class Uii {
+    #private;
+    /**
+     * 处理过的dom元素数组
+     */
+    protected ele: Array<HTMLElement>;
+    /**
+     * 当前uii对象的选项
+     */
+    protected opts: Record<string, any>;
+    protected enabled: boolean;
+    constructor(ele: string | HTMLElement | NodeList | HTMLCollection | Array<string | HTMLElement>, opts?: Record<string, any>);
+    /**
+     * 销毁uii对象，包括卸载事件、清空元素等
+     */
+    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不会响应事件
+     */
+    disable(): void;
+    /**
+     * 启用uii实例
+     */
+    enable(): void;
+    /**
+     * 获取uii实例选项对象
+     */
+    getOption(): Record<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]
+     */
+    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;
+    onStart?: (w: number, h: number) => void;
+    onResize?: (w: number, h: number) => void;
+    onEnd?: (w: number, h: number) => void;
+    onClone?: (cloneDom: HTMLElement, ev: 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?: (size1: number, size2: number) => void;
+    onSplit?: (size1: number, size2: number) => void;
+    onEnd?: (size1: number, size2: number) => void;
+    onSticky?: (size1: number, size2: number, position: 'start' | 'end' | 'none') => void;
+    onClone?: (cloneDom: HTMLElement, ev: MouseEvent) => void;
+};
+export type DraggableOptions = {
+    /**
+     * 限制活动范围，默认false
+     */
+    container?: boolean;
+    /**
+     * 拖动起始阈值，默认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;
+    };
+    /**
+     * 拖动时元素左上角距离指针的距离，支持百分比及负数
+     */
+    cursorAt?: {
+        left: number | string;
+        top: number | string;
+    };
+    /**
+     * 可定义拖动时不同状态下的指针，默认move
+     */
+    cursor?: {
+        default?: string;
+        active?: string;
+        over?: string;
+    };
+    /**
+     * 网格拖动模式，每次移动指定的网格大小。数字或数字数组
+     */
+    grid?: number | number[];
+    /**
+     * 拖动类型标识，用于droppable识别交互类型
+     */
+    type?: string;
+    onStart?: (dragDom: HTMLElement, ev: MouseEvent) => void;
+    /**
+     * 拖动中调用，返回false阻止dom移动
+     * @param dragDom
+     * @param ev
+     * @param offsetX
+     * @param offsetY
+     * @returns
+     */
+    onDrag?: (dragDom: HTMLElement, ev: MouseEvent, offsetX: number, offsetY: number, x: number, y: number) => (boolean | void);
+    /**
+     * 拖动结束后调用，返回false阻止ghost模式下的dom移动
+     * @param dragDom
+     * @param ev
+     * @returns
+     */
+    onEnd?: (dragDom: HTMLElement, ev: MouseEvent) => (boolean | void);
+    onClone?: (cloneDom: HTMLElement, ev: MouseEvent) => void;
+    onSnap?: (el: HTMLElement, targetH: HTMLElement, targetV: HTMLElement, hDir: string, vDir: string) => 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?: (draggable: HTMLElement, ele: Array<HTMLElement>) => void;
+    onEnter?: (el: HTMLElement, ev: MouseEvent) => void;
+    onOver?: (el: HTMLElement, ev: MouseEvent) => void;
+    onLeave?: (el: HTMLElement, ev: MouseEvent) => void;
+    onDrop?: (el: HTMLElement, ev: MouseEvent) => void;
+    /**
+     * 当accepts的draggable对象结束拖动时触发
+     * @param draggable
+     * @param ele
+     * @returns
+     */
+    onDeactive?: (draggable: HTMLElement, ele: Array<HTMLElement>) => void;
+};
+export type RotatableOptions = {
+    /**
+     * 可定义拖动时不同状态下的指针，默认crosshair
+     */
+    cursor?: {
+        default?: string;
+        active?: string;
+    };
+    onStart?: (deg: number) => {};
+    onRotate?: (deg: number) => {};
+    onEnd?: (deg: number) => {};
+};
+export type SelectableOptions = {
+    /**
+     * 选择器样式字符串，多个使用空格分隔
+     */
+    class?: string;
+    /**
+     * 选择器拖动进行中，被选中元素应用的样式字符串，多个使用空格分隔
+     */
+    selectingClass?: string;
+    /**
+     * 选择器拖动结束后，被选中元素应用的样式字符串，多个使用空格分隔
+     */
+    selectedClass?: string;
+    /**
+     * 容器中可选择的元素。可以是选择器字符串或返回元素数组的函数
+     */
+    targets?: (() => NodeList | HTMLCollection | HTMLElement[]) | string;
+    onStart?: (target: HTMLElement) => void;
+    onSelect?: (selection: HTMLElement[]) => void;
+    onEnd?: (selection: HTMLElement[]) => void;
+    /**
+     * 选择模式，默认overlap
+     */
+    mode?: 'overlap' | 'inclusion';
+    /**
+     * 是否在鼠标到达容器边缘时自动滚动，默认true
+     */
+    scroll?: boolean;
+    /**
+     * 滚动速度，默认10
+     */
+    scrollSpeed?: number;
+    /**
+     * 禁止触发元素的css选择器或校验函数，函数返回true表示需要过滤
+     */
+    filter?: ((el: HTMLElement) => boolean) | string;
+};
+export type CollisionDetectorOptions = {
+    container?: Element;
+};
+export type CollisionData = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    el?: HTMLElement;
+};

package/types/utils.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 工具包
+ * @author holyhigh2
+ */
+/**
+ * 获取child相对于parent的offset信息。含border宽度
+ * @returns
+ */
+export declare function getOffset(child: HTMLElement, parent?: HTMLElement): {
+    x: number;
+    y: number;
+};
+/**
+ * 边缘检测最小内部边距
+ */
+export declare const EDGE_THRESHOLD = 5;
+export declare const DRAGGING_RULE = "body * { pointer-events: none; }";
+export declare function lockPage(): void;
+export declare function unlockPage(): void;