uiik 1.3.0-beta.4 → 1.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/index.esm.js +489 -325
- package/index.js +491 -323
- package/package.json +2 -2
- package/transform.d.ts +6 -2
- package/types.d.ts +3 -0
- package/utils.d.ts +18 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "uiik",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.2",
|
|
4
4
|
"description": "A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.esm.js",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"doc": "npx typedoc"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"myfx":"1.1.0"
|
|
35
|
+
"myfx":">=1.1.0"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@babel/core": "^7.12.3",
|
package/transform.d.ts
CHANGED
|
@@ -1,20 +1,24 @@
|
|
|
1
1
|
export declare class UiiTransform {
|
|
2
2
|
x: number;
|
|
3
3
|
y: number;
|
|
4
|
+
offx: number;
|
|
5
|
+
offy: number;
|
|
4
6
|
angle: number;
|
|
5
7
|
el: HTMLElement | SVGGraphicsElement;
|
|
6
|
-
|
|
8
|
+
useTransform: boolean;
|
|
9
|
+
constructor(el: HTMLElement | SVGGraphicsElement, useTransform?: boolean);
|
|
7
10
|
normalize(el?: HTMLElement | SVGGraphicsElement): this;
|
|
8
11
|
moveTo(x: number, y: number): void;
|
|
9
12
|
moveToX(x: number): void;
|
|
10
13
|
moveToY(y: number): void;
|
|
11
14
|
rotateTo(deg: number, cx?: number, cy?: number): void;
|
|
12
15
|
}
|
|
13
|
-
export declare function wrapper(el: HTMLElement | SVGGraphicsElement): UiiTransform;
|
|
16
|
+
export declare function wrapper(el: HTMLElement | SVGGraphicsElement, useTransform?: boolean): UiiTransform;
|
|
14
17
|
export declare function getTranslate(el: HTMLElement | SVGGraphicsElement): {
|
|
15
18
|
x: number;
|
|
16
19
|
y: number;
|
|
17
20
|
};
|
|
18
21
|
export declare function moveTo(el: HTMLElement | SVGGraphicsElement, x: number, y: number): void;
|
|
22
|
+
export declare function transformMoveTo(el: HTMLElement | SVGGraphicsElement, x: number, y: number): void;
|
|
19
23
|
export declare function moveBy(el: HTMLElement | SVGGraphicsElement, x: number, y: number): void;
|
|
20
24
|
export declare function rotateTo(el: HTMLElement | SVGGraphicsElement, deg: number, cx?: number, cy?: number): void;
|
package/types.d.ts
CHANGED
|
@@ -65,6 +65,7 @@ export type SplittableOptions = {
|
|
|
65
65
|
inside?: boolean;
|
|
66
66
|
ghost?: boolean;
|
|
67
67
|
ghostClass?: string;
|
|
68
|
+
ghostTo?: string | HTMLElement;
|
|
68
69
|
handle?: string;
|
|
69
70
|
onStart?: (data: {
|
|
70
71
|
size1: number;
|
|
@@ -88,6 +89,7 @@ export type SplittableOptions = {
|
|
|
88
89
|
}, event: MouseEvent) => void;
|
|
89
90
|
};
|
|
90
91
|
export type DraggableOptions = {
|
|
92
|
+
useTransform?: boolean;
|
|
91
93
|
self?: boolean;
|
|
92
94
|
mouseButton?: 'all' | "left" | "right";
|
|
93
95
|
containment?: boolean | HTMLElement | string;
|
|
@@ -98,6 +100,7 @@ export type DraggableOptions = {
|
|
|
98
100
|
droppable?: (() => NodeList | HTMLCollection | HTMLElement[]) | string | HTMLElement | HTMLElement[];
|
|
99
101
|
ghost?: ((el: HTMLElement) => HTMLElement) | boolean;
|
|
100
102
|
ghostClass?: string;
|
|
103
|
+
ghostTo?: string | HTMLElement;
|
|
101
104
|
direction?: "v" | "h";
|
|
102
105
|
scroll?: boolean;
|
|
103
106
|
scrollSpeed?: number;
|
package/utils.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export declare const ONE_ANG: number;
|
|
2
2
|
export declare const ONE_RAD: number;
|
|
3
|
+
export declare const THRESHOLD = 3;
|
|
3
4
|
export declare function getBox(child: Element, parent?: Element): {
|
|
4
5
|
x: number;
|
|
5
6
|
y: number;
|
|
@@ -38,13 +39,24 @@ export declare function getPointInContainer(event: MouseEvent | PointerEvent, el
|
|
|
38
39
|
}): {
|
|
39
40
|
x: number;
|
|
40
41
|
y: number;
|
|
42
|
+
scale: number;
|
|
41
43
|
};
|
|
42
|
-
export declare function getRectInContainer(el: HTMLElement | SVGGraphicsElement, container: HTMLElement | SVGGraphicsElement
|
|
44
|
+
export declare function getRectInContainer(el: HTMLElement | SVGGraphicsElement, container: HTMLElement | SVGGraphicsElement, matrixInfo?: {
|
|
45
|
+
scale: number;
|
|
46
|
+
angle: number;
|
|
47
|
+
}): {
|
|
43
48
|
x: number;
|
|
44
49
|
y: number;
|
|
45
50
|
w: number;
|
|
46
51
|
h: number;
|
|
47
52
|
};
|
|
53
|
+
export declare function getRectCenter(el: HTMLElement | SVGGraphicsElement, matrixInfo?: {
|
|
54
|
+
scale: number;
|
|
55
|
+
angle: number;
|
|
56
|
+
}): {
|
|
57
|
+
x: number;
|
|
58
|
+
y: number;
|
|
59
|
+
};
|
|
48
60
|
export declare function getCenterXy(el: HTMLElement, ox?: number, oy?: number): {
|
|
49
61
|
sx: number;
|
|
50
62
|
sy: number;
|
|
@@ -69,7 +81,11 @@ export declare function calcVertex(w: number, h: number, cx: number, cy: number,
|
|
|
69
81
|
x: number;
|
|
70
82
|
y: number;
|
|
71
83
|
}>;
|
|
72
|
-
export declare function parseOxy(ox: any, oy: any, w: number, h: number): {
|
|
84
|
+
export declare function parseOxy(ox: any, oy: any, w: number, h: number, el?: HTMLElement | SVGGraphicsElement): {
|
|
73
85
|
originX: number;
|
|
74
86
|
originY: number;
|
|
75
87
|
};
|
|
88
|
+
export declare function normalizeVector(x: number, y: number): {
|
|
89
|
+
x: number;
|
|
90
|
+
y: number;
|
|
91
|
+
};
|