Skip to content

Commit a01c9fb

Browse files
hkleungaihkleungai
authored
feat(draggabilly): upgrade to v3, solve attw, rewrite tests (DefinitelyTyped#73440)
1 parent de5b8d6 commit a01c9fb

File tree

4 files changed

+184
-88
lines changed

4 files changed

+184
-88
lines changed

‎attw.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,6 @@
8181
"dom-to-image",
8282
"dotenv-flow",
8383
"dplayer",
84-
"draggabilly",
8584
"drawflow",
8685
"durandal",
8786
"dygraphs",

‎types/draggabilly/draggabilly-tests.ts‎

Lines changed: 126 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,126 @@
1-
import Draggabilly from "draggabilly";
2-
3-
const elem = document.querySelector(".draggable") as Element;
4-
5-
const draggieA = new Draggabilly(".test");
6-
const draggieB = new Draggabilly(elem);
7-
8-
const draggie = new Draggabilly(elem, {
9-
axis: "x",
10-
containment: true,
11-
grid: [20, 20],
12-
handle: ".handle",
13-
});
14-
15-
const draggiePosX: number = draggie.position.x;
16-
const draggiePosY: number = draggie.position.y;
17-
18-
draggie.on("dragMove", (event, pointer, moveVector) => {
19-
const pointerPageX: number = pointer.pageX;
20-
const pointePageY: number = pointer.pageY;
21-
22-
const moveVectorX: number = moveVector.x;
23-
const moveVectorY: number = moveVector.y;
24-
});
25-
26-
draggie.on("dragStart", (event, pointer) => {});
27-
28-
draggie.on("dragEnd", (event, pointer) => {});
29-
30-
draggie.on("pointerDown", (event, pointer) => {});
31-
32-
draggie.on("pointerMove", (event, pointer, moveVector) => {});
33-
34-
draggie.on("pointerUp", (event, pointer) => {});
35-
36-
draggie.on("staticClick", (event, pointer) => {});
37-
38-
draggie.off("dragMove", (event, pointer, moveVector) => {});
39-
40-
draggie.once("dragMove", (event, pointer, moveVector) => {});
41-
42-
draggie.enable();
43-
44-
draggie.disable();
45-
46-
draggie.destroy();
1+
import Draggabilly, {
2+
DraggabillyClickEventName,
3+
DraggabillyEventCallback,
4+
DraggabillyMoveEventName,
5+
DraggabillyOptions,
6+
Position,
7+
} from "draggabilly";
8+
9+
declare let bool: boolean;
10+
declare let drag: Draggabilly;
11+
declare let element: Element;
12+
declare let htmlElement: HTMLElement;
13+
declare let nodelist: NodeList;
14+
15+
// constructor
16+
{
17+
new Draggabilly(bool ? ".test" : element);
18+
19+
new Draggabilly(bool ? ".test" : element, {});
20+
21+
new Draggabilly(bool ? ".test" : element, {
22+
axis: bool ? "x" : "y",
23+
containment: bool ? true : bool ? element : ".test",
24+
grid: [30, 40],
25+
handle: bool ? ".handle" : bool ? htmlElement : bool ? [htmlElement] : nodelist,
26+
});
27+
}
28+
29+
// events
30+
{
31+
drag = drag.on(
32+
bool ? "dragStart" : bool ? "dragEnd" : bool ? "pointerDown" : bool ? "pointerUp" : "staticClick",
33+
(event, pointer) => {
34+
// $ExpectType Event
35+
event;
36+
// $ExpectType MouseEvent | Touch
37+
pointer;
38+
},
39+
);
40+
41+
drag = drag.off(
42+
bool ? "dragStart" : bool ? "dragEnd" : bool ? "pointerDown" : bool ? "pointerUp" : "staticClick",
43+
(event, pointer) => {
44+
// $ExpectType Event
45+
event;
46+
// $ExpectType MouseEvent | Touch
47+
pointer;
48+
},
49+
);
50+
51+
drag = drag.once(
52+
bool ? "dragStart" : bool ? "dragEnd" : bool ? "pointerDown" : bool ? "pointerUp" : "staticClick",
53+
(event, pointer) => {
54+
// $ExpectType Event
55+
event;
56+
// $ExpectType MouseEvent | Touch
57+
pointer;
58+
},
59+
);
60+
61+
drag = drag.on(
62+
bool ? "dragMove" : "pointerMove",
63+
(event, pointer, moveVector) => {
64+
// $ExpectType Event
65+
event;
66+
// $ExpectType MouseEvent | Touch
67+
pointer;
68+
// $ExpectType Position
69+
moveVector;
70+
// $ExpectType number
71+
moveVector.x;
72+
// $ExpectType number
73+
moveVector.y;
74+
},
75+
);
76+
77+
drag = drag.off(
78+
bool ? "dragMove" : "pointerMove",
79+
(event, pointer, moveVector) => {
80+
// $ExpectType Event
81+
event;
82+
// $ExpectType MouseEvent | Touch
83+
pointer;
84+
// $ExpectType Position
85+
moveVector;
86+
// $ExpectType number
87+
moveVector.x;
88+
// $ExpectType number
89+
moveVector.y;
90+
},
91+
);
92+
93+
drag = drag.once(
94+
bool ? "dragMove" : "pointerMove",
95+
(event, pointer, moveVector) => {
96+
// $ExpectType Event
97+
event;
98+
// $ExpectType MouseEvent | Touch
99+
pointer;
100+
// $ExpectType Position
101+
moveVector;
102+
// $ExpectType number
103+
moveVector.x;
104+
// $ExpectType number
105+
moveVector.y;
106+
},
107+
);
108+
}
109+
110+
// methods
111+
{
112+
// $ExpectType void
113+
drag.disable();
114+
115+
// $ExpectType void
116+
drag.enable();
117+
118+
// $ExpectType void
119+
drag.setPosition(3, 4);
120+
121+
// $ExpectType void
122+
drag.dragEnd();
123+
124+
// $ExpectType void
125+
drag.destroy();
126+
}

‎types/draggabilly/index.d.ts‎

Lines changed: 57 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,74 @@
1-
export interface Position {
2-
x: number;
3-
y: number;
4-
}
1+
declare namespace Draggabilly {
2+
interface Position {
3+
x: number;
4+
y: number;
5+
}
56

6-
export interface DraggabillyOptions {
7-
axis?: "x" | "y" | undefined;
8-
containment?: Element | string | boolean | undefined;
9-
grid?: [number, number] | undefined;
10-
handle?: string | undefined;
11-
}
7+
interface DraggabillyOptions {
8+
/** Constrains movement to horizontal or vertical axis. */
9+
axis?: "x" | "y" | undefined;
10+
/** Contains movement to the bounds of the element. If true, the container will be the parent element. */
11+
containment?: Element | string | boolean | undefined;
12+
/** Snaps the element to a grid, every `x` and `y` pixels. */
13+
grid?: [number, number] | undefined;
14+
/**
15+
* Specifies on what element the drag interaction starts.
16+
*
17+
* `handle` is useful for when you do not want all inner elements to be used for dragging, like inputs and forms.
18+
* See [back handle example on CodePen](https://codepen.io/desandro/pen/znAuH).
19+
*/
20+
handle?: string | HTMLElement | ReadonlyArray<HTMLElement> | NodeList | undefined;
21+
}
1222

13-
export type DraggabillyClickEventName = "dragStart" | "dragEnd" | "pointerDown" | "pointerUp" | "staticClick";
23+
type DraggabillyClickEventName = "dragStart" | "dragEnd" | "pointerDown" | "pointerUp" | "staticClick";
1424

15-
export type DraggabillyMoveEventName = "dragMove" | "pointerMove";
25+
type DraggabillyMoveEventName = "dragMove" | "pointerMove";
1626

17-
export default class Draggabilly {
18-
position: Position;
27+
interface DraggabillyEventCallback {
28+
(
29+
eventName: Draggabilly.DraggabillyClickEventName,
30+
listener: (
31+
/** The original event */
32+
event: Event,
33+
/** The event object that has `.pageX` and `.pageY` */
34+
pointer: MouseEvent | Touch,
35+
) => void,
36+
): Draggabilly;
1937

20-
constructor(element: Element | string, options?: DraggabillyOptions);
38+
(
39+
eventName: Draggabilly.DraggabillyMoveEventName,
40+
listener: (
41+
/** The original event */
42+
event: Event,
43+
/** The event object that has `.pageX` and `.pageY` */
44+
pointer: MouseEvent | Touch,
45+
/** How far the pointer has moved from its start position */
46+
moveVector: Draggabilly.Position,
47+
) => void,
48+
): Draggabilly;
49+
}
50+
}
2151

22-
on(
23-
eventName: DraggabillyClickEventName,
24-
listener: (event: Event, pointer: MouseEvent | Touch) => void,
25-
): Draggabilly;
52+
declare class Draggabilly {
53+
position: Draggabilly.Position;
2654

27-
on(
28-
eventName: DraggabillyMoveEventName,
29-
listener: (event: Event, pointer: MouseEvent | Touch, moveVector: Position) => void,
30-
): Draggabilly;
55+
constructor(element: Element | string, options?: Draggabilly.DraggabillyOptions);
3156

32-
off(
33-
eventName: DraggabillyClickEventName,
34-
listener: (event: Event, pointer: MouseEvent | Touch) => void,
35-
): Draggabilly;
57+
on: Draggabilly.DraggabillyEventCallback;
3658

37-
off(
38-
eventName: DraggabillyMoveEventName,
39-
listener: (event: Event, pointer: MouseEvent | Touch, moveVector: Position) => void,
40-
): Draggabilly;
59+
off: Draggabilly.DraggabillyEventCallback;
4160

42-
once(
43-
eventName: DraggabillyClickEventName,
44-
listener: (event: Event, pointer: MouseEvent | Touch) => void,
45-
): Draggabilly;
61+
once: Draggabilly.DraggabillyEventCallback;
4662

47-
once(
48-
eventName: DraggabillyMoveEventName,
49-
listener: (event: Event, pointer: MouseEvent | Touch, moveVector: Position) => void,
50-
): Draggabilly;
63+
disable(): void;
5164

5265
enable(): void;
5366

54-
disable(): void;
67+
setPosition(x: number, y: number): void;
68+
69+
dragEnd(): void;
5570

5671
destroy(): void;
5772
}
73+
74+
export = Draggabilly;

‎types/draggabilly/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"private": true,
33
"name": "@types/draggabilly",
4-
"version": "2.1.9999",
4+
"version": "3.0.9999",
55
"projects": [
66
"https://draggabilly.desandro.com"
77
],

0 commit comments

Comments
 (0)