-
Notifications
You must be signed in to change notification settings - Fork 3.6k
/
minimappositiontrackerview.ts
122 lines (104 loc) · 2.81 KB
/
minimappositiontrackerview.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
/**
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module minimap/minimappositiontrackerview
*/
import { View } from 'ckeditor5/src/ui.js';
import { toUnit, global, type Locale } from 'ckeditor5/src/utils.js';
import type { MinimapDragEvent } from './minimapview.js';
const toPx = toUnit( 'px' );
/**
* The position tracker visualizing the visible subset of the content. Displayed over the minimap.
*
* @internal
*/
export default class MinimapPositionTrackerView extends View {
/**
* The CSS `height` of the tracker visualizing the subset of the content visible to the user.
*
* @readonly
*/
declare public height: number;
/**
* The CSS `top` of the tracker, used to move it vertically over the minimap.
*
* @readonly
*/
declare public top: number;
/**
* The scroll progress (in %) displayed over the tracker when being dragged by the user.
*
* @readonly
*/
declare public scrollProgress: number;
/**
* Indicates whether the tracker is being dragged by the user (e.g. using the mouse).
*
* @internal
* @readonly
*/
declare public _isDragging: boolean;
constructor( locale: Locale ) {
super( locale );
const bind = this.bindTemplate;
this.set( 'height', 0 );
this.set( 'top', 0 );
this.set( 'scrollProgress', 0 );
this.set( '_isDragging', false );
this.setTemplate( {
tag: 'div',
attributes: {
class: [
'ck',
'ck-minimap__position-tracker',
bind.if( '_isDragging', 'ck-minimap__position-tracker_dragging' )
],
style: {
top: bind.to( 'top', top => toPx( top ) ),
height: bind.to( 'height', height => toPx( height ) )
},
'data-progress': bind.to( 'scrollProgress' )
},
on: {
mousedown: bind.to( () => {
this._isDragging = true;
} )
}
} );
}
/**
* @inheritDoc
*/
public override render(): void {
super.render();
this.listenTo( global.document, 'mousemove', ( evt, data ) => {
if ( !this._isDragging ) {
return;
}
this.fire<MinimapDragEvent>( 'drag', data.movementY );
}, { useCapture: true } );
this.listenTo( global.document, 'mouseup', () => {
this._isDragging = false;
}, { useCapture: true } );
}
/**
* Sets the new height of the tracker to visualize the subset of the content visible to the user.
*/
public setHeight( newHeight: number ): void {
this.height = newHeight;
}
/**
* Sets the top offset of the tracker to move it around vertically.
*/
public setTopOffset( newOffset: number ): void {
this.top = newOffset;
}
/**
* Sets the scroll progress (in %) to inform the user using a label when the tracker is being dragged.
*/
public setScrollProgress( newProgress: number ): void {
this.scrollProgress = newProgress;
}
}