@leafer-ui/interaction 1.1.0 → 1.1.1
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/package.json +6 -6
- package/src/Dragger.ts +17 -60
- package/src/Interaction.ts +22 -32
- package/src/InteractionHelper.ts +5 -38
- package/src/config.ts +3 -3
- package/src/index.ts +1 -1
- package/types/index.d.ts +23 -46
- package/src/MultiTouchHelper.ts +0 -22
- package/src/Transformer.ts +0 -114
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leafer-ui/interaction",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "@leafer-ui/interaction",
|
|
5
5
|
"author": "Chao (Leafer) Wan",
|
|
6
6
|
"license": "MIT",
|
|
@@ -22,12 +22,12 @@
|
|
|
22
22
|
"leaferjs"
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@leafer/core": "1.1.
|
|
26
|
-
"@leafer-ui/draw": "1.1.
|
|
27
|
-
"@leafer-ui/event": "1.1.
|
|
25
|
+
"@leafer/core": "1.1.1",
|
|
26
|
+
"@leafer-ui/draw": "1.1.1",
|
|
27
|
+
"@leafer-ui/event": "1.1.1"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@leafer/interface": "1.1.
|
|
31
|
-
"@leafer-ui/interface": "1.1.
|
|
30
|
+
"@leafer/interface": "1.1.1",
|
|
31
|
+
"@leafer-ui/interface": "1.1.1"
|
|
32
32
|
}
|
|
33
33
|
}
|
package/src/Dragger.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { IPointerEvent, IDragEvent, ILeaf, ILeafList, ITimer, IFunction, IPointDataMap, IMoveEvent } from '@leafer/interface'
|
|
2
|
-
import {
|
|
2
|
+
import { PointHelper, LeafList } from '@leafer/core'
|
|
3
3
|
|
|
4
4
|
import { MoveEvent, DragEvent, DropEvent, PointerButton } from '@leafer-ui/event'
|
|
5
5
|
|
|
@@ -12,25 +12,25 @@ const { getDragEventData, getDropEventData, getSwipeEventData } = InteractionHel
|
|
|
12
12
|
|
|
13
13
|
export class Dragger {
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
public interaction: InteractionBase
|
|
16
16
|
|
|
17
17
|
public moving: boolean
|
|
18
18
|
public dragging: boolean
|
|
19
19
|
|
|
20
20
|
public dragData: IDragEvent
|
|
21
|
-
|
|
21
|
+
public downData: IPointerEvent
|
|
22
22
|
|
|
23
23
|
public draggableList: ILeafList
|
|
24
24
|
public realDraggableList: ILeafList
|
|
25
25
|
protected dragOverPath: ILeafList
|
|
26
26
|
protected dragEnterPath: ILeafList
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
public dragStartPoints: IPointDataMap
|
|
29
|
+
public autoMoveTimer: ITimer
|
|
30
30
|
|
|
31
31
|
public canAnimate: boolean
|
|
32
32
|
public canDragOut: boolean
|
|
33
|
-
|
|
33
|
+
public animateWait: IFunction
|
|
34
34
|
|
|
35
35
|
constructor(interaction: InteractionBase) {
|
|
36
36
|
this.interaction = interaction
|
|
@@ -65,9 +65,7 @@ export class Dragger {
|
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
if (!this.moving)
|
|
69
|
-
this.dragStart(data, canDrag)
|
|
70
|
-
}
|
|
68
|
+
if (!this.moving) this.dragStart(data, canDrag)
|
|
71
69
|
|
|
72
70
|
this.drag(data)
|
|
73
71
|
}
|
|
@@ -99,7 +97,7 @@ export class Dragger {
|
|
|
99
97
|
}
|
|
100
98
|
}
|
|
101
99
|
|
|
102
|
-
|
|
100
|
+
public drag(data: IPointerEvent): void {
|
|
103
101
|
const { interaction, dragData, downData } = this
|
|
104
102
|
const { path, throughPath } = downData
|
|
105
103
|
this.dragData = getDragEventData(downData, dragData, data)
|
|
@@ -152,17 +150,8 @@ export class Dragger {
|
|
|
152
150
|
|
|
153
151
|
public dragEnd(data: IPointerEvent, speed?: number): void {
|
|
154
152
|
if (!this.dragging && !this.moving) return
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
if (this.interaction.config.move.dragAnimate && this.canAnimate && this.moving && (Math.abs(moveX) > 1 || Math.abs(moveY) > 1)) {
|
|
158
|
-
data = { ...data }
|
|
159
|
-
speed = (speed || (data.pointerType === 'touch' ? 2 : 1)) * 0.9
|
|
160
|
-
PointHelper.move(data, moveX * speed, moveY * speed)
|
|
161
|
-
|
|
162
|
-
this.drag(data)
|
|
163
|
-
this.animate(() => { this.dragEnd(data, 1) })
|
|
164
|
-
|
|
165
|
-
} else this.dragEndReal(data)
|
|
153
|
+
if (this.checkDragEndAnimate(data, speed)) return
|
|
154
|
+
this.dragEndReal(data)
|
|
166
155
|
}
|
|
167
156
|
|
|
168
157
|
protected dragEndReal(data?: IPointerEvent): void {
|
|
@@ -194,12 +183,6 @@ export class Dragger {
|
|
|
194
183
|
this.animate(null, 'off')
|
|
195
184
|
}
|
|
196
185
|
|
|
197
|
-
protected animate(func?: IFunction, off?: 'off'): void { // dragEnd animation
|
|
198
|
-
const animateWait = func || this.animateWait
|
|
199
|
-
if (animateWait) this.interaction.target.nextRender(animateWait, null, off)
|
|
200
|
-
this.animateWait = func
|
|
201
|
-
}
|
|
202
|
-
|
|
203
186
|
|
|
204
187
|
protected swipe(data: IPointerEvent, downData: IPointerEvent, dragData: IDragEvent, endDragData: IDragEvent): void {
|
|
205
188
|
const { interaction } = this
|
|
@@ -221,45 +204,19 @@ export class Dragger {
|
|
|
221
204
|
}
|
|
222
205
|
|
|
223
206
|
|
|
224
|
-
|
|
225
|
-
const { interaction } = this
|
|
226
|
-
this.autoMoveCancel()
|
|
227
|
-
if (this.dragging && !interaction.shrinkCanvasBounds.hitPoint(data)) this.autoMoveOnDragOut(data)
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
protected autoMoveOnDragOut(data: IPointerEvent): void {
|
|
232
|
-
const { interaction, downData, canDragOut } = this
|
|
233
|
-
const { autoDistance, dragOut } = interaction.config.move
|
|
234
|
-
if (!dragOut || !canDragOut || !autoDistance) return
|
|
207
|
+
// @leafer-in/viewport will rewrite
|
|
235
208
|
|
|
236
|
-
|
|
237
|
-
const { x, y } = bounds
|
|
238
|
-
const right = BoundsHelper.maxX(bounds)
|
|
239
|
-
const bottom = BoundsHelper.maxY(bounds)
|
|
209
|
+
public checkDragEndAnimate(_data: IPointerEvent, _speed?: number): boolean { return false }
|
|
240
210
|
|
|
241
|
-
|
|
242
|
-
const moveY = data.y < y ? autoDistance : (bottom < data.y ? -autoDistance : 0)
|
|
243
|
-
let totalX = 0, totalY = 0
|
|
211
|
+
public animate(_func?: IFunction, _off?: 'off'): void { } // dragEnd animation
|
|
244
212
|
|
|
245
|
-
|
|
246
|
-
totalX += moveX
|
|
247
|
-
totalY += moveY
|
|
213
|
+
public checkDragOut(_data: IPointerEvent): void { }
|
|
248
214
|
|
|
249
|
-
|
|
250
|
-
PointHelper.move(this.dragData, moveX, moveY)
|
|
215
|
+
public autoMoveOnDragOut(_data: IPointerEvent): void { }
|
|
251
216
|
|
|
252
|
-
|
|
253
|
-
interaction.pointerMoveReal(data)
|
|
254
|
-
}, 10)
|
|
255
|
-
}
|
|
217
|
+
public autoMoveCancel(): void { }
|
|
256
218
|
|
|
257
|
-
|
|
258
|
-
if (this.autoMoveTimer) {
|
|
259
|
-
clearInterval(this.autoMoveTimer)
|
|
260
|
-
this.autoMoveTimer = 0
|
|
261
|
-
}
|
|
262
|
-
}
|
|
219
|
+
// ---
|
|
263
220
|
|
|
264
221
|
public destroy(): void {
|
|
265
222
|
this.dragReset()
|
package/src/Interaction.ts
CHANGED
|
@@ -1,18 +1,16 @@
|
|
|
1
|
-
import { IUIEvent, IPointerEvent, ILeaf, IInteraction, IInteractionConfig, ILeafList, IMoveEvent, IZoomEvent, IRotateEvent, ISelector, IBounds, IEventListenerId, IInteractionCanvas, ITimer, IKeepTouchData, IKeyEvent, IPickOptions, ICursorType, IBooleanMap, IPickBottom, IClientPointData, IPointData, ILeaferConfig, IMoveConfig, IPointerConfig } from '@leafer/interface'
|
|
1
|
+
import { IUIEvent, IPointerEvent, ILeaf, IInteraction, IInteractionConfig, ITransformer, ILeafList, IMoveEvent, IZoomEvent, IRotateEvent, IWheelEvent, ISelector, IBounds, IEventListenerId, IInteractionCanvas, ITimer, IKeepTouchData, IKeyEvent, IPickOptions, ICursorType, IBooleanMap, IPickBottom, IClientPointData, IPointData, ILeaferConfig, IMoveConfig, IPointerConfig } from '@leafer/interface'
|
|
2
2
|
import { LeaferEvent, ResizeEvent, LeafList, Bounds, PointHelper, DataHelper } from '@leafer/core'
|
|
3
3
|
|
|
4
4
|
import { IApp } from '@leafer-ui/interface'
|
|
5
5
|
import { PointerEvent, DropEvent, KeyEvent, PointerButton, Keyboard } from '@leafer-ui/event'
|
|
6
6
|
|
|
7
|
-
import { Transformer } from './Transformer'
|
|
8
7
|
import { Dragger } from './Dragger'
|
|
9
8
|
import { emit } from './emit'
|
|
10
9
|
import { InteractionHelper } from './InteractionHelper'
|
|
11
|
-
import { MultiTouchHelper } from './MultiTouchHelper'
|
|
12
10
|
import { config } from './config'
|
|
13
11
|
|
|
14
12
|
|
|
15
|
-
const { pathHasEventType,
|
|
13
|
+
const { pathHasEventType, pathCanDrag, pathHasOutside } = InteractionHelper
|
|
16
14
|
export class InteractionBase implements IInteraction {
|
|
17
15
|
|
|
18
16
|
public target: ILeaf
|
|
@@ -34,8 +32,8 @@ export class InteractionBase implements IInteraction {
|
|
|
34
32
|
public get isHoldSpaceKey(): boolean { return this.m.holdSpaceKey && Keyboard.isHoldSpaceKey() }
|
|
35
33
|
|
|
36
34
|
public config: IInteractionConfig = DataHelper.clone(config)
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
public get m(): IMoveConfig { return this.config.move }
|
|
36
|
+
public get p(): IPointerConfig { return this.config.pointer }
|
|
39
37
|
|
|
40
38
|
public cursor: ICursorType | ICursorType[]
|
|
41
39
|
public get hitRadius(): number { return this.p.hitRadius }
|
|
@@ -61,8 +59,8 @@ export class InteractionBase implements IInteraction {
|
|
|
61
59
|
protected tapCount = 0
|
|
62
60
|
protected tapTimer: ITimer
|
|
63
61
|
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
public dragger: Dragger
|
|
63
|
+
public transformer: ITransformer
|
|
66
64
|
|
|
67
65
|
protected __eventIds: IEventListenerId[]
|
|
68
66
|
protected defaultPath: ILeafList
|
|
@@ -75,7 +73,7 @@ export class InteractionBase implements IInteraction {
|
|
|
75
73
|
this.selector = selector
|
|
76
74
|
this.defaultPath = new LeafList(target)
|
|
77
75
|
|
|
78
|
-
this.
|
|
76
|
+
this.createTransformer()
|
|
79
77
|
this.dragger = new Dragger(this)
|
|
80
78
|
|
|
81
79
|
if (userConfig) this.config = DataHelper.default(userConfig, this.config)
|
|
@@ -202,14 +200,6 @@ export class InteractionBase implements IInteraction {
|
|
|
202
200
|
}
|
|
203
201
|
|
|
204
202
|
|
|
205
|
-
public multiTouch(data: IUIEvent, list: IKeepTouchData[]): void {
|
|
206
|
-
if (this.config.multiTouch.disabled) return
|
|
207
|
-
const { move, angle, scale, center } = MultiTouchHelper.getData(list)
|
|
208
|
-
this.rotate(getRotateEventData(center, angle, data))
|
|
209
|
-
this.zoom(getZoomEventData(center, scale, data))
|
|
210
|
-
this.move(getMoveEventData(center, move, data))
|
|
211
|
-
}
|
|
212
|
-
|
|
213
203
|
// context menu
|
|
214
204
|
public menu(data: IPointerEvent): void {
|
|
215
205
|
this.findPath(data)
|
|
@@ -225,24 +215,23 @@ export class InteractionBase implements IInteraction {
|
|
|
225
215
|
}
|
|
226
216
|
}
|
|
227
217
|
|
|
228
|
-
//
|
|
218
|
+
// @leafer-in/viewport will rewrite: transform viewport
|
|
229
219
|
|
|
230
|
-
public
|
|
231
|
-
this.transformer.move(data)
|
|
232
|
-
}
|
|
220
|
+
public createTransformer(): void { }
|
|
233
221
|
|
|
234
|
-
public
|
|
235
|
-
this.transformer.zoom(data)
|
|
236
|
-
}
|
|
222
|
+
public move(_data: IMoveEvent): void { }
|
|
237
223
|
|
|
238
|
-
public
|
|
239
|
-
this.transformer.rotate(data)
|
|
240
|
-
}
|
|
224
|
+
public zoom(_data: IZoomEvent): void { }
|
|
241
225
|
|
|
242
|
-
public
|
|
243
|
-
|
|
244
|
-
}
|
|
226
|
+
public rotate(_data: IRotateEvent): void { }
|
|
227
|
+
|
|
228
|
+
public transformEnd(): void { }
|
|
229
|
+
|
|
230
|
+
public wheel(_data: IWheelEvent): void { }
|
|
231
|
+
|
|
232
|
+
public multiTouch(_data: IUIEvent, _list: IKeepTouchData[]): void { }
|
|
245
233
|
|
|
234
|
+
// ---
|
|
246
235
|
|
|
247
236
|
// key
|
|
248
237
|
|
|
@@ -518,8 +507,9 @@ export class InteractionBase implements IInteraction {
|
|
|
518
507
|
}
|
|
519
508
|
|
|
520
509
|
protected __onResize(): void {
|
|
510
|
+
const { dragOut } = this.m
|
|
521
511
|
this.shrinkCanvasBounds = new Bounds(this.canvas.bounds)
|
|
522
|
-
this.shrinkCanvasBounds.spread(-2)
|
|
512
|
+
this.shrinkCanvasBounds.spread(-(typeof dragOut === 'number' ? dragOut : 2))
|
|
523
513
|
}
|
|
524
514
|
|
|
525
515
|
protected __listenEvents(): void {
|
|
@@ -544,7 +534,7 @@ export class InteractionBase implements IInteraction {
|
|
|
544
534
|
this.stop()
|
|
545
535
|
this.__removeListenEvents()
|
|
546
536
|
this.dragger.destroy()
|
|
547
|
-
this.transformer.destroy()
|
|
537
|
+
if (this.transformer) this.transformer.destroy()
|
|
548
538
|
this.downData = this.overPath = this.enterPath = null
|
|
549
539
|
}
|
|
550
540
|
}
|
package/src/InteractionHelper.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IPointerEvent, IDragEvent, ISwipeEvent, IUIEvent, IPointData, ILeafList, IDropEvent, IObject } from '@leafer/interface'
|
|
2
2
|
import { PointHelper, LeafList } from '@leafer/core'
|
|
3
3
|
|
|
4
4
|
import { SwipeEvent, DragEvent } from '@leafer-ui/event'
|
|
@@ -6,34 +6,6 @@ import { SwipeEvent, DragEvent } from '@leafer-ui/event'
|
|
|
6
6
|
|
|
7
7
|
export const InteractionHelper = {
|
|
8
8
|
|
|
9
|
-
getMoveEventData(center: IPointData, move: IPointData, event: IEvent): IMoveEvent {
|
|
10
|
-
return {
|
|
11
|
-
...event,
|
|
12
|
-
x: center.x,
|
|
13
|
-
y: center.y,
|
|
14
|
-
moveX: move.x,
|
|
15
|
-
moveY: move.y
|
|
16
|
-
} as IMoveEvent
|
|
17
|
-
},
|
|
18
|
-
|
|
19
|
-
getRotateEventData(center: IPointData, angle: number, event: IEvent): IRotateEvent {
|
|
20
|
-
return {
|
|
21
|
-
...event,
|
|
22
|
-
x: center.x,
|
|
23
|
-
y: center.y,
|
|
24
|
-
rotation: angle
|
|
25
|
-
} as IRotateEvent
|
|
26
|
-
},
|
|
27
|
-
|
|
28
|
-
getZoomEventData(center: IPointData, scale: number, event: IEvent): IZoomEvent {
|
|
29
|
-
return {
|
|
30
|
-
...event,
|
|
31
|
-
x: center.x,
|
|
32
|
-
y: center.y,
|
|
33
|
-
scale,
|
|
34
|
-
} as IZoomEvent
|
|
35
|
-
},
|
|
36
|
-
|
|
37
9
|
getDragEventData(startPoint: IPointData, lastPoint: IPointData, event: IPointerEvent): IDragEvent {
|
|
38
10
|
return {
|
|
39
11
|
...event,
|
|
@@ -55,15 +27,10 @@ export const InteractionHelper = {
|
|
|
55
27
|
},
|
|
56
28
|
|
|
57
29
|
getSwipeDirection(angle: number): string {
|
|
58
|
-
if (angle < -45 && angle > -135)
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
} else if (angle <= 45 && angle >= -45) {
|
|
63
|
-
return SwipeEvent.RIGHT
|
|
64
|
-
} else {
|
|
65
|
-
return SwipeEvent.LEFT
|
|
66
|
-
}
|
|
30
|
+
if (angle < -45 && angle > -135) return SwipeEvent.UP
|
|
31
|
+
else if (angle > 45 && angle < 135) return SwipeEvent.DOWN
|
|
32
|
+
else if (angle <= 45 && angle >= -45) return SwipeEvent.RIGHT
|
|
33
|
+
else return SwipeEvent.LEFT
|
|
67
34
|
},
|
|
68
35
|
|
|
69
36
|
getSwipeEventData(startPoint: IPointData, lastDragData: IDragEvent, event: IPointerEvent): ISwipeEvent {
|
package/src/config.ts
CHANGED
|
@@ -6,7 +6,6 @@ export const config: IInteractionConfig = {
|
|
|
6
6
|
moveSpeed: 0.5,
|
|
7
7
|
rotateSpeed: 0.5,
|
|
8
8
|
delta: { x: 80 / 4, y: 8.0 }, // 基准速度(会影响zoomSpeed),可根据不同系统、浏览器细化定制
|
|
9
|
-
preventDefault: true
|
|
10
9
|
},
|
|
11
10
|
pointer: {
|
|
12
11
|
hitRadius: 5,
|
|
@@ -17,12 +16,13 @@ export const config: IInteractionConfig = {
|
|
|
17
16
|
dragHover: true,
|
|
18
17
|
dragDistance: 2,
|
|
19
18
|
swipeDistance: 20,
|
|
20
|
-
preventDefaultMenu: true
|
|
21
19
|
},
|
|
22
20
|
touch: {
|
|
23
|
-
preventDefault:
|
|
21
|
+
preventDefault: 'auto'
|
|
24
22
|
},
|
|
25
23
|
multiTouch: {},
|
|
24
|
+
move: { autoDistance: 2 },
|
|
25
|
+
zoom: {},
|
|
26
26
|
cursor: true,
|
|
27
27
|
keyEvent: true
|
|
28
28
|
}
|
package/src/index.ts
CHANGED
package/types/index.d.ts
CHANGED
|
@@ -1,40 +1,21 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IDragEvent, IPointerEvent, ILeafList, IPointDataMap, ITimer, IFunction, ILeaf, IInteraction, IInteractionCanvas, ISelector, IInteractionConfig, IMoveConfig, IPointerConfig, ICursorType, IPickBottom, IBounds, ITransformer, IEventListenerId, IBooleanMap, IMoveEvent, IZoomEvent, IRotateEvent, IWheelEvent, IUIEvent, IKeepTouchData, IKeyEvent, IPickOptions, IClientPointData, IPointData, IObject, IDropEvent, ISwipeEvent, ICursorTypeMap } from '@leafer/interface';
|
|
2
2
|
import { LeafList } from '@leafer/core';
|
|
3
3
|
|
|
4
|
-
declare class Transformer {
|
|
5
|
-
get transforming(): boolean;
|
|
6
|
-
protected interaction: InteractionBase;
|
|
7
|
-
protected moveData: IMoveEvent;
|
|
8
|
-
protected zoomData: IZoomEvent;
|
|
9
|
-
protected rotateData: IRotateEvent;
|
|
10
|
-
protected transformTimer: ITimer;
|
|
11
|
-
constructor(interaction: InteractionBase);
|
|
12
|
-
move(data: IMoveEvent): void;
|
|
13
|
-
zoom(data: IZoomEvent): void;
|
|
14
|
-
rotate(data: IRotateEvent): void;
|
|
15
|
-
protected transformEndWait(): void;
|
|
16
|
-
transformEnd(): void;
|
|
17
|
-
protected moveEnd(): void;
|
|
18
|
-
protected zoomEnd(): void;
|
|
19
|
-
protected rotateEnd(): void;
|
|
20
|
-
destroy(): void;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
4
|
declare class Dragger {
|
|
24
|
-
|
|
5
|
+
interaction: InteractionBase;
|
|
25
6
|
moving: boolean;
|
|
26
7
|
dragging: boolean;
|
|
27
8
|
dragData: IDragEvent;
|
|
28
|
-
|
|
9
|
+
downData: IPointerEvent;
|
|
29
10
|
draggableList: ILeafList;
|
|
30
11
|
realDraggableList: ILeafList;
|
|
31
12
|
protected dragOverPath: ILeafList;
|
|
32
13
|
protected dragEnterPath: ILeafList;
|
|
33
|
-
|
|
34
|
-
|
|
14
|
+
dragStartPoints: IPointDataMap;
|
|
15
|
+
autoMoveTimer: ITimer;
|
|
35
16
|
canAnimate: boolean;
|
|
36
17
|
canDragOut: boolean;
|
|
37
|
-
|
|
18
|
+
animateWait: IFunction;
|
|
38
19
|
constructor(interaction: InteractionBase);
|
|
39
20
|
setDragData(data: IPointerEvent): void;
|
|
40
21
|
getList(realDraggable?: boolean, hover?: boolean): ILeafList;
|
|
@@ -42,19 +23,20 @@ declare class Dragger {
|
|
|
42
23
|
dragStart(data: IPointerEvent, canDrag: boolean): void;
|
|
43
24
|
protected setDragStartPoints(list: ILeafList | ILeaf[]): void;
|
|
44
25
|
protected getDraggableList(path: ILeafList): void;
|
|
45
|
-
|
|
26
|
+
drag(data: IPointerEvent): void;
|
|
46
27
|
protected dragReal(): void;
|
|
47
28
|
dragOverOrOut(data: IPointerEvent): void;
|
|
48
29
|
dragEnterOrLeave(data: IPointerEvent): void;
|
|
49
30
|
dragEnd(data: IPointerEvent, speed?: number): void;
|
|
50
31
|
protected dragEndReal(data?: IPointerEvent): void;
|
|
51
|
-
protected animate(func?: IFunction, off?: 'off'): void;
|
|
52
32
|
protected swipe(data: IPointerEvent, downData: IPointerEvent, dragData: IDragEvent, endDragData: IDragEvent): void;
|
|
53
33
|
protected drop(data: IPointerEvent, dropList: ILeafList, dragEnterPath: ILeafList): void;
|
|
54
34
|
protected dragReset(): void;
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
35
|
+
checkDragEndAnimate(_data: IPointerEvent, _speed?: number): boolean;
|
|
36
|
+
animate(_func?: IFunction, _off?: 'off'): void;
|
|
37
|
+
checkDragOut(_data: IPointerEvent): void;
|
|
38
|
+
autoMoveOnDragOut(_data: IPointerEvent): void;
|
|
39
|
+
autoMoveCancel(): void;
|
|
58
40
|
destroy(): void;
|
|
59
41
|
}
|
|
60
42
|
|
|
@@ -73,8 +55,8 @@ declare class InteractionBase implements IInteraction {
|
|
|
73
55
|
get isHoldRightKey(): boolean;
|
|
74
56
|
get isHoldSpaceKey(): boolean;
|
|
75
57
|
config: IInteractionConfig;
|
|
76
|
-
|
|
77
|
-
|
|
58
|
+
get m(): IMoveConfig;
|
|
59
|
+
get p(): IPointerConfig;
|
|
78
60
|
cursor: ICursorType | ICursorType[];
|
|
79
61
|
get hitRadius(): number;
|
|
80
62
|
bottomList?: IPickBottom[];
|
|
@@ -92,8 +74,8 @@ declare class InteractionBase implements IInteraction {
|
|
|
92
74
|
protected longPressed: boolean;
|
|
93
75
|
protected tapCount: number;
|
|
94
76
|
protected tapTimer: ITimer;
|
|
95
|
-
|
|
96
|
-
|
|
77
|
+
dragger: Dragger;
|
|
78
|
+
transformer: ITransformer;
|
|
97
79
|
protected __eventIds: IEventListenerId[];
|
|
98
80
|
protected defaultPath: ILeafList;
|
|
99
81
|
protected downKeyMap: IBooleanMap;
|
|
@@ -106,13 +88,15 @@ declare class InteractionBase implements IInteraction {
|
|
|
106
88
|
pointerMoveReal(data: IPointerEvent): void;
|
|
107
89
|
pointerUp(data?: IPointerEvent): void;
|
|
108
90
|
pointerCancel(): void;
|
|
109
|
-
multiTouch(data: IUIEvent, list: IKeepTouchData[]): void;
|
|
110
91
|
menu(data: IPointerEvent): void;
|
|
111
92
|
menuTap(data: IPointerEvent): void;
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
93
|
+
createTransformer(): void;
|
|
94
|
+
move(_data: IMoveEvent): void;
|
|
95
|
+
zoom(_data: IZoomEvent): void;
|
|
96
|
+
rotate(_data: IRotateEvent): void;
|
|
115
97
|
transformEnd(): void;
|
|
98
|
+
wheel(_data: IWheelEvent): void;
|
|
99
|
+
multiTouch(_data: IUIEvent, _list: IKeepTouchData[]): void;
|
|
116
100
|
keyDown(data: IKeyEvent): void;
|
|
117
101
|
keyUp(data: IKeyEvent): void;
|
|
118
102
|
protected pointerHover(data: IPointerEvent): void;
|
|
@@ -151,9 +135,6 @@ declare class InteractionBase implements IInteraction {
|
|
|
151
135
|
}
|
|
152
136
|
|
|
153
137
|
declare const InteractionHelper: {
|
|
154
|
-
getMoveEventData(center: IPointData, move: IPointData, event: IEvent): IMoveEvent;
|
|
155
|
-
getRotateEventData(center: IPointData, angle: number, event: IEvent): IRotateEvent;
|
|
156
|
-
getZoomEventData(center: IPointData, scale: number, event: IEvent): IZoomEvent;
|
|
157
138
|
getDragEventData(startPoint: IPointData, lastPoint: IPointData, event: IPointerEvent): IDragEvent;
|
|
158
139
|
getDropEventData(event: IPointerEvent, list: ILeafList, data: IObject): IDropEvent;
|
|
159
140
|
getSwipeDirection(angle: number): string;
|
|
@@ -165,14 +146,10 @@ declare const InteractionHelper: {
|
|
|
165
146
|
pathHasOutside(path: ILeafList): boolean;
|
|
166
147
|
};
|
|
167
148
|
|
|
168
|
-
declare const MultiTouchHelper: {
|
|
169
|
-
getData(list: IKeepTouchData[]): IMultiTouchData;
|
|
170
|
-
};
|
|
171
|
-
|
|
172
149
|
declare class Cursor {
|
|
173
150
|
static custom: ICursorTypeMap;
|
|
174
151
|
static set(name: string, value: ICursorType | ICursorType[]): void;
|
|
175
152
|
static get(name: string): ICursorType | ICursorType[];
|
|
176
153
|
}
|
|
177
154
|
|
|
178
|
-
export { Cursor, InteractionBase, InteractionHelper
|
|
155
|
+
export { Cursor, Dragger, InteractionBase, InteractionHelper };
|
package/src/MultiTouchHelper.ts
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { IMultiTouchData, IKeepTouchData } from '@leafer/interface'
|
|
2
|
-
import { PointHelper } from '@leafer/core'
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
export const MultiTouchHelper = {
|
|
6
|
-
|
|
7
|
-
getData(list: IKeepTouchData[]): IMultiTouchData {
|
|
8
|
-
const a = list[0]
|
|
9
|
-
const b = list[1]
|
|
10
|
-
const lastCenter = PointHelper.getCenter(a.from, b.from)
|
|
11
|
-
const center = PointHelper.getCenter(a.to, b.to)
|
|
12
|
-
const move = { x: center.x - lastCenter.x, y: center.y - lastCenter.y }
|
|
13
|
-
|
|
14
|
-
const lastDistance = PointHelper.getDistance(a.from, b.from)
|
|
15
|
-
const distance = PointHelper.getDistance(a.to, b.to)
|
|
16
|
-
const scale = distance / lastDistance
|
|
17
|
-
|
|
18
|
-
const angle = PointHelper.getRotation(a.from, b.from, a.to, b.to)
|
|
19
|
-
|
|
20
|
-
return { move, scale, angle, center }
|
|
21
|
-
}
|
|
22
|
-
}
|
package/src/Transformer.ts
DELETED
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
import { IMoveEvent, IZoomEvent, IRotateEvent, ITimer } from '@leafer/interface'
|
|
2
|
-
import { MoveEvent, ZoomEvent, RotateEvent } from '@leafer-ui/event'
|
|
3
|
-
|
|
4
|
-
import { InteractionBase } from './Interaction'
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
export class Transformer {
|
|
8
|
-
|
|
9
|
-
public get transforming(): boolean { return !!(this.moveData || this.zoomData || this.rotateData) }
|
|
10
|
-
|
|
11
|
-
protected interaction: InteractionBase
|
|
12
|
-
protected moveData: IMoveEvent
|
|
13
|
-
protected zoomData: IZoomEvent
|
|
14
|
-
protected rotateData: IRotateEvent
|
|
15
|
-
protected transformTimer: ITimer
|
|
16
|
-
|
|
17
|
-
constructor(interaction: InteractionBase) {
|
|
18
|
-
this.interaction = interaction
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
public move(data: IMoveEvent): void {
|
|
22
|
-
const { interaction } = this
|
|
23
|
-
if (!data.moveType) data.moveType = 'move'
|
|
24
|
-
|
|
25
|
-
if (!this.moveData) {
|
|
26
|
-
const { path } = interaction.selector.getByPoint(data, interaction.hitRadius)
|
|
27
|
-
data.path = path
|
|
28
|
-
this.moveData = { ...data, moveX: 0, moveY: 0 }
|
|
29
|
-
interaction.cancelHover()
|
|
30
|
-
interaction.emit(MoveEvent.START, this.moveData)
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
data.path = this.moveData.path
|
|
34
|
-
interaction.emit(MoveEvent.BEFORE_MOVE, data)
|
|
35
|
-
interaction.emit(MoveEvent.MOVE, data)
|
|
36
|
-
|
|
37
|
-
this.transformEndWait()
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
public zoom(data: IZoomEvent): void {
|
|
41
|
-
const { interaction } = this
|
|
42
|
-
|
|
43
|
-
if (!this.zoomData) {
|
|
44
|
-
const { path } = interaction.selector.getByPoint(data, interaction.hitRadius)
|
|
45
|
-
data.path = path
|
|
46
|
-
this.zoomData = { ...data, scale: 1 }
|
|
47
|
-
interaction.cancelHover()
|
|
48
|
-
interaction.emit(ZoomEvent.START, this.zoomData)
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
data.path = this.zoomData.path
|
|
52
|
-
interaction.emit(ZoomEvent.BEFORE_ZOOM, data)
|
|
53
|
-
interaction.emit(ZoomEvent.ZOOM, data)
|
|
54
|
-
|
|
55
|
-
this.transformEndWait()
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
public rotate(data: IRotateEvent): void {
|
|
59
|
-
const { interaction } = this
|
|
60
|
-
|
|
61
|
-
if (!this.rotateData) {
|
|
62
|
-
const { path } = interaction.selector.getByPoint(data, interaction.hitRadius)
|
|
63
|
-
data.path = path
|
|
64
|
-
this.rotateData = { ...data, rotation: 0 }
|
|
65
|
-
interaction.cancelHover()
|
|
66
|
-
interaction.emit(RotateEvent.START, this.rotateData)
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
data.path = this.rotateData.path
|
|
70
|
-
interaction.emit(RotateEvent.BEFORE_ROTATE, data)
|
|
71
|
-
interaction.emit(RotateEvent.ROTATE, data)
|
|
72
|
-
|
|
73
|
-
this.transformEndWait()
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
protected transformEndWait(): void {
|
|
78
|
-
clearTimeout(this.transformTimer)
|
|
79
|
-
this.transformTimer = setTimeout(() => {
|
|
80
|
-
this.transformEnd()
|
|
81
|
-
}, this.interaction.config.pointer.transformTime)
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
public transformEnd(): void {
|
|
85
|
-
this.moveEnd()
|
|
86
|
-
this.zoomEnd()
|
|
87
|
-
this.rotateEnd()
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
protected moveEnd(): void {
|
|
91
|
-
if (this.moveData) {
|
|
92
|
-
this.interaction.emit(MoveEvent.END, this.moveData)
|
|
93
|
-
this.moveData = null
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
protected zoomEnd(): void {
|
|
98
|
-
if (this.zoomData) {
|
|
99
|
-
this.interaction.emit(ZoomEvent.END, this.zoomData)
|
|
100
|
-
this.zoomData = null
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
protected rotateEnd(): void {
|
|
105
|
-
if (this.rotateData) {
|
|
106
|
-
this.interaction.emit(RotateEvent.END, this.rotateData)
|
|
107
|
-
this.rotateData = null
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
public destroy(): void {
|
|
112
|
-
this.zoomData = this.moveData = this.rotateData = null
|
|
113
|
-
}
|
|
114
|
-
}
|