1 |
|
2 |
|
3 |
|
4 |
|
5 | import { Throttler } from '@lumino/polling';
|
6 | import { Widget } from '@lumino/widgets';
|
7 | const RESIZE_HANDLE_CLASS = 'jp-CellResizeHandle';
|
8 | const CELL_RESIZED_CLASS = 'jp-mod-resizedCell';
|
9 |
|
10 |
|
11 |
|
12 | export class ResizeHandle extends Widget {
|
13 | constructor(targetNode) {
|
14 | super();
|
15 | this.targetNode = targetNode;
|
16 | this._isActive = false;
|
17 | this._isDragging = false;
|
18 | this.addClass(RESIZE_HANDLE_CLASS);
|
19 | this._resizer = new Throttler(event => this._resize(event), 50);
|
20 | }
|
21 | |
22 |
|
23 |
|
24 | dispose() {
|
25 | this._resizer.dispose();
|
26 | super.dispose();
|
27 | }
|
28 | |
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 | handleEvent(event) {
|
35 | var _a, _b;
|
36 | switch (event.type) {
|
37 | case 'dblclick':
|
38 | (_a = this.targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.childNodes.forEach(node => {
|
39 | node.classList.remove(CELL_RESIZED_CLASS);
|
40 | });
|
41 | document.documentElement.style.setProperty('--jp-side-by-side-output-size', `1fr`);
|
42 | this._isActive = false;
|
43 | break;
|
44 | case 'mousedown':
|
45 | this._isDragging = true;
|
46 | if (!this._isActive) {
|
47 | (_b = this.targetNode.parentNode) === null || _b === void 0 ? void 0 : _b.childNodes.forEach(node => {
|
48 | node.classList.add(CELL_RESIZED_CLASS);
|
49 | });
|
50 | this._isActive = true;
|
51 | }
|
52 | window.addEventListener('mousemove', this);
|
53 | window.addEventListener('mouseup', this);
|
54 | break;
|
55 | case 'mousemove': {
|
56 | if (this._isActive && this._isDragging) {
|
57 | void this._resizer.invoke(event);
|
58 | }
|
59 | break;
|
60 | }
|
61 | case 'mouseup':
|
62 | this._isDragging = false;
|
63 | window.removeEventListener('mousemove', this);
|
64 | window.removeEventListener('mouseup', this);
|
65 | break;
|
66 | default:
|
67 | break;
|
68 | }
|
69 | }
|
70 | |
71 |
|
72 |
|
73 | onAfterAttach(msg) {
|
74 | this.node.addEventListener('dblclick', this);
|
75 | this.node.addEventListener('mousedown', this);
|
76 | super.onAfterAttach(msg);
|
77 | }
|
78 | |
79 |
|
80 |
|
81 | onBeforeDetach(msg) {
|
82 | this.node.removeEventListener('dblclick', this);
|
83 | this.node.removeEventListener('mousedown', this);
|
84 | super.onBeforeDetach(msg);
|
85 | }
|
86 | _resize(event) {
|
87 |
|
88 | const { width, x } = this.targetNode.getBoundingClientRect();
|
89 | const position = event.clientX - x;
|
90 | const ratio = width / position - 1;
|
91 | if (0 < ratio) {
|
92 | const normalized = Math.max(Math.min(Math.abs(ratio), 50), 0.05);
|
93 | document.documentElement.style.setProperty('--jp-side-by-side-output-size', `${normalized}fr`);
|
94 | }
|
95 | }
|
96 | }
|
97 |
|
\ | No newline at end of file |