1 | import { Widget } from '@lumino/widgets';
|
2 | const RESIZE_HANDLE_CLASS = 'jp-CellResizeHandle';
|
3 | const CELL_RESIZED_CLASS = 'jp-mod-resizedCell';
|
4 |
|
5 |
|
6 |
|
7 | export class ResizeHandle extends Widget {
|
8 | constructor(targetNode) {
|
9 | super();
|
10 | this.targetNode = targetNode;
|
11 | this._isActive = false;
|
12 | this._isDragging = false;
|
13 | this._protectedWidth = 10;
|
14 | this.addClass(RESIZE_HANDLE_CLASS);
|
15 | }
|
16 | onAfterAttach(msg) {
|
17 | super.onAfterAttach(msg);
|
18 | this.node.addEventListener('dblclick', this);
|
19 | this.node.addEventListener('mousedown', this);
|
20 | }
|
21 | onAfterDetach(msg) {
|
22 | super.onAfterAttach(msg);
|
23 | this.node.removeEventListener('dblclick', this);
|
24 | this.node.removeEventListener('mousedown', this);
|
25 | }
|
26 | |
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 | handleEvent(event) {
|
33 | var _a, _b;
|
34 | switch (event.type) {
|
35 | case 'dblclick':
|
36 | (_a = this.targetNode.parentNode) === null || _a === void 0 ? void 0 : _a.childNodes.forEach(node => {
|
37 | node.classList.remove(CELL_RESIZED_CLASS);
|
38 | });
|
39 | document.documentElement.style.setProperty('--jp-side-by-side-resized-cell', '');
|
40 | this._isActive = false;
|
41 | break;
|
42 | case 'mousedown':
|
43 | this._mouseOffset =
|
44 | event.clientX - this.node.getBoundingClientRect().x;
|
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 | return;
|
58 | }
|
59 | const targetRect = this.targetNode.getBoundingClientRect();
|
60 | const inputWidth = event.clientX - targetRect.x - this._mouseOffset;
|
61 | const resized_ratio = 1 -
|
62 | Math.min(Math.max(inputWidth, this._protectedWidth), targetRect.width - this._protectedWidth) /
|
63 | (targetRect.width - this._protectedWidth);
|
64 |
|
65 | if (Math.round(resized_ratio * 100) % 10 == 0) {
|
66 | document.documentElement.style.setProperty('--jp-side-by-side-resized-cell', resized_ratio + 'fr');
|
67 | }
|
68 | break;
|
69 | }
|
70 | case 'mouseup':
|
71 | this._isDragging = false;
|
72 | window.removeEventListener('mousemove', this);
|
73 | window.removeEventListener('mouseup', this);
|
74 | break;
|
75 | default:
|
76 | break;
|
77 | }
|
78 | }
|
79 | }
|
80 |
|
\ | No newline at end of file |