uiik 1.0.9 → 1.3.0-alpha

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "uiik",
-  "version": "1.0.9",
+  "version": "1.3.0-alpha",
   "description": "A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.",
   "main": "index.js",
   "module": "index.esm.js",
-  "types": "types/index.d.ts",
+  "types": "index.d.ts",
   "author": "holyhigh2",
   "license": "MIT",
   "repository": {
@@ -30,8 +30,8 @@
     "test": "rollup --config rollup.config.test.js --watch",
     "doc": "npx typedoc"
   },
-  "peerDependencies": {
-    "@holyhigh/func.js": ">=2.4"
+  "dependencies": {
+    "myfx":"1.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.3",
@@ -54,7 +54,7 @@
     "rollup-pluginutils": "^2.8.2",
     "tslib": "^2.4.0",
     "typescript": "^4.8.2",
-    "typedoc": "^0.23.28",
+    "typedoc": "^0.24.8",
     "typedoc-plugin-markdown": "^3.14.0"
   }
 }

package/resizable.d.ts

@@ -0,0 +1,7 @@
+import { ResizableOptions, Uii } from "./types";
+export declare class Resizable extends Uii {
+    constructor(els: string | HTMLElement, opts?: ResizableOptions);
+    bindHandle(handle: HTMLElement | SVGElement, dir: string, panel: HTMLElement, opts: ResizableOptions): void;
+    initHandle(panel: HTMLElement): void;
+}
+export declare function newResizable(els: string | HTMLElement, opts?: ResizableOptions): Resizable;

package/rotatable.d.ts

@@ -0,0 +1,6 @@
+import { RotatableOptions, Uii } from "./types";
+import 'myfx';
+export declare class Rotatable extends Uii {
+    constructor(els: string | Element, opts?: RotatableOptions);
+}
+export declare function newRotatable(els: string | HTMLElement, opts?: RotatableOptions): Rotatable;

package/selectable.d.ts

@@ -0,0 +1,8 @@
+import { SelectableOptions, Uii } from "./types";
+export declare class Selectable extends Uii {
+    #private;
+    constructor(container: string | HTMLElement, opts?: SelectableOptions);
+    updateTargets(): void;
+    onOptionChanged(): void;
+}
+export declare function newSelectable(container: string | HTMLElement, opts?: SelectableOptions): Selectable;

package/sortable.d.ts

@@ -0,0 +1,9 @@
+import { SortableOptions, Uii } from "./types";
+export declare class Sortable extends Uii {
+    #private;
+    constructor(container: string | HTMLElement | Array<HTMLElement>, opts?: SortableOptions);
+    active(draggingItem: HTMLElement, fromContainer: HTMLElement, toContainers: HTMLElement[], toOpts: SortableOptions): void;
+    deactive(draggingItem: HTMLElement, fromContainer: HTMLElement, toContainers: HTMLElement[], opts: SortableOptions): void;
+    onOptionChanged(): void;
+}
+export declare function newSortable(container: string | HTMLElement | Array<HTMLElement>, opts?: SortableOptions): Sortable;

package/splittable.d.ts

@@ -0,0 +1,6 @@
+import { SplittableOptions, Uii } from './types';
+export declare class Splittable extends Uii {
+    #private;
+    constructor(container: string | HTMLElement, opts?: SplittableOptions);
+}
+export declare function newSplittable(container: string | HTMLElement, opts?: SplittableOptions): Splittable;

package/transform.d.ts

@@ -0,0 +1,19 @@
+export declare class UiiTransformer {
+    x: number;
+    y: number;
+    angle: number;
+    el: HTMLElement | SVGGraphicsElement;
+    constructor(el: HTMLElement | SVGGraphicsElement);
+    normalize(el: HTMLElement | SVGGraphicsElement): this;
+    moveTo(x: number, y: number): void;
+    moveToX(x: number): void;
+    moveToY(y: number): void;
+}
+export declare function wrapper(el: HTMLElement | SVGGraphicsElement): UiiTransformer;
+export declare function getTranslate(el: HTMLElement | SVGGraphicsElement): {
+    x: number;
+    y: number;
+};
+export declare function moveTo(el: HTMLElement | SVGGraphicsElement, x: number, y: number): void;
+export declare function moveBy(el: HTMLElement | SVGGraphicsElement, x: number, y: number): void;
+export declare function rotateTo(el: HTMLElement | SVGGraphicsElement, deg: number, cx?: number, cy?: number): void;

package/types.d.ts

@@ -0,0 +1,286 @@
+export declare abstract class Uii {
+    #private;
+    protected ele: Array<HTMLElement>;
+    opts: Record<string, any>;
+    protected enabled: boolean;
+    protected eleString: string;
+    constructor(ele: string | Element | NodeList | HTMLCollection | Array<string | Element>, opts?: Record<string, any>);
+    destroy(): void;
+    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;
+    enable(): void;
+    getOptions(): Record<string, any>;
+    getOption(name: string): any;
+    setOptions(options?: Record<string, any>): void;
+    setOption(name: string, value: any): void;
+    protected onOptionChanged(opts?: Record<string, any>): void;
+}
+export type ResizableOptions = {
+    handle?: ((target: HTMLElement | SVGGraphicsElement) => NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement) | string | NodeList | HTMLCollection | HTMLElement[] | HTMLElement | SVGGraphicsElement;
+    minSize?: number | Array<number>;
+    maxSize?: number | Array<number>;
+    dir?: string[];
+    aspectRatio?: number;
+    ghost?: boolean | Function;
+    ghostClass?: string;
+    onPointerDown?: (event: MouseEvent) => boolean;
+    onStart?: (data: {
+        w: number;
+        h: number;
+    }, event: MouseEvent) => void;
+    onResize?: (data: {
+        w: number;
+        h: number;
+        ow: number;
+        oh: number;
+    }, event: MouseEvent) => void;
+    onEnd?: (data: {
+        w: number;
+        h: number;
+    }, event: MouseEvent) => void;
+    onClone?: (data: {
+        clone: HTMLElement;
+    }, event: MouseEvent) => void;
+};
+export type SplittableOptions = {
+    handleSize?: number;
+    minSize?: number | number[];
+    oneSideMode?: "start" | "end";
+    sticky?: boolean | boolean[];
+    inside?: boolean;
+    ghost?: boolean;
+    ghostClass?: string;
+    handle?: string;
+    onStart?: (data: {
+        size1: number;
+        size2: number;
+    }, event: MouseEvent) => void;
+    onSplit?: (data: {
+        size1: number;
+        size2: number;
+    }, event: MouseEvent) => void;
+    onEnd?: (data: {
+        size1: number;
+        size2: number;
+    }, event: MouseEvent) => void;
+    onSticky?: (data: {
+        size1: number;
+        size2: number;
+        position: "start" | "end" | "none";
+    }, event: MouseEvent) => void;
+    onClone?: (data: {
+        clone: HTMLElement;
+    }, event: MouseEvent) => void;
+};
+export type DraggableOptions = {
+    containment?: boolean | HTMLElement | string;
+    watch?: boolean | string;
+    threshold?: number;
+    handle?: string;
+    filter?: string;
+    droppable?: (() => NodeList | HTMLCollection | HTMLElement[]) | string | HTMLElement | HTMLElement[];
+    ghost?: ((el: HTMLElement) => HTMLElement) | boolean;
+    ghostClass?: string;
+    direction?: "v" | "h";
+    scroll?: boolean;
+    scrollSpeed?: number;
+    zIndex?: number;
+    group?: string;
+    classes?: string;
+    snap?: string;
+    snapOptions?: {
+        tolerance: number;
+    };
+    cursor?: {
+        default?: string;
+        active?: string;
+        over?: string;
+    };
+    grid?: number | number[];
+    type?: string;
+    onPointerDown?: (data: {
+        draggable: HTMLElement | SVGGraphicsElement;
+    }, event: MouseEvent) => boolean;
+    onStart?: (data: {
+        draggable: HTMLElement | SVGGraphicsElement;
+        x: number;
+        y: number;
+    }, event: MouseEvent) => void;
+    onDrag?: (data: {
+        draggable: HTMLElement | SVGGraphicsElement;
+        x: number;
+        y: number;
+        ox: number;
+        oy: number;
+    }, event: MouseEvent) => boolean | void;
+    onEnd?: (data: {
+        draggable: HTMLElement | SVGGraphicsElement;
+        x: number;
+        y: number;
+    }, event: MouseEvent) => boolean | void;
+    onClone?: (data: {
+        clone: HTMLElement | SVGGraphicsElement;
+    }, event: MouseEvent) => void;
+    onSnap?: (data: {
+        el: HTMLElement | SVGGraphicsElement;
+        targetH: HTMLElement | SVGGraphicsElement;
+        targetV: HTMLElement | SVGGraphicsElement;
+        dirH: string;
+        dirV: string;
+    }, event: MouseEvent) => void;
+};
+export type DroppableOptions = {
+    activeClass?: string;
+    hoverClass?: string;
+    accepts?: ((ele: Array<HTMLElement>, draggable: HTMLElement) => boolean) | string;
+    onActive?: (data: {
+        draggable: HTMLElement;
+        droppables: Array<HTMLElement>;
+    }) => void;
+    onEnter?: (data: {
+        draggable: HTMLElement;
+        droppable: HTMLElement;
+    }, event: MouseEvent) => void;
+    onOver?: (data: {
+        draggable: HTMLElement;
+        droppable: HTMLElement;
+    }, event: MouseEvent) => void;
+    onLeave?: (data: {
+        draggable: HTMLElement;
+        droppable: HTMLElement;
+    }, event: MouseEvent) => void;
+    onDrop?: (data: {
+        draggable: HTMLElement;
+        droppable: HTMLElement;
+    }, event: MouseEvent) => void;
+    onDeactive?: (data: {
+        draggable: HTMLElement;
+        droppables: Array<HTMLElement>;
+    }) => void;
+};
+export type RotatableOptions = {
+    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;
+    }, event: MouseEvent) => void;
+    onSelect?: (data: {
+        selection: Array<HTMLElement>;
+        selectable: HTMLElement;
+    }, event: MouseEvent) => void;
+    onEnd?: (data: {
+        selection: Array<HTMLElement>;
+        selectable: HTMLElement;
+    }, event: MouseEvent) => void;
+};
+export type SortableOptions = {
+    scroll?: boolean;
+    scrollSpeed?: number;
+    filter?: string;
+    ghostContainer?: HTMLElement;
+    ghostClass?: string;
+    group?: string;
+    handle?: string;
+    activeClass?: string;
+    move?: {
+        to?: ((item: HTMLElement, from: HTMLElement) => boolean) | boolean | 'copy';
+        from?: ((item: HTMLElement, from: HTMLElement, to: HTMLElement) => boolean) | boolean;
+    };
+    spill?: 'remove' | 'revert';
+    sort?: boolean;
+    onActive?: (data: {
+        item: HTMLElement;
+        from: HTMLElement;
+    }) => void;
+    onDeactive?: (data: {
+        item: HTMLElement;
+        from: HTMLElement;
+    }) => void;
+    onStart?: (data: {
+        item: HTMLElement;
+        from: HTMLElement;
+        index: number;
+    }, event: MouseEvent) => void;
+    onEnd?: (data: {
+        item: HTMLElement;
+        from: HTMLElement;
+        to: HTMLElement;
+    }, event: MouseEvent) => void;
+    onChange?: (data: {
+        item: HTMLElement;
+        from: HTMLElement;
+        to: HTMLElement;
+        fromIndex: number;
+        toIndex: number;
+    }, event: MouseEvent) => void;
+    onUpdate?: (data: {
+        item: HTMLElement;
+        from: HTMLElement;
+        to: HTMLElement;
+    }, event: MouseEvent) => void;
+    onEnter?: (data: {
+        item: HTMLElement;
+        from: HTMLElement;
+        to: HTMLElement;
+        dir: string;
+    }, event: MouseEvent) => void;
+    onLeave?: (data: {
+        item: HTMLElement;
+        from: HTMLElement;
+        to: HTMLElement;
+    }, event: MouseEvent) => void;
+    onAdd?: (data: {
+        item: HTMLElement;
+        from: HTMLElement;
+        to: HTMLElement;
+        index: number;
+    }, event: MouseEvent) => void;
+    onRemove?: (data: {
+        item: HTMLElement;
+        from: HTMLElement;
+        to: HTMLElement;
+    }, event: MouseEvent) => void;
+};
+export type CollisionDetectorOptions = {
+    container?: Element;
+};
+export type CollisionData = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    el?: HTMLElement;
+};

package/utils.d.ts

@@ -0,0 +1,51 @@
+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;
+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;
+};

package/types/draggable.d.ts

@@ -1,25 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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/resizable.d.ts

@@ -1,19 +0,0 @@
-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

@@ -1,23 +0,0 @@
-/**
- * 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

@@ -1,32 +0,0 @@
-/**
- * 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

@@ -1,23 +0,0 @@
-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;