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-output-size', '1fr');
|
40 | this._isActive = false;
|
41 | break;
|
42 | case 'mousedown':
|
43 | this._isDragging = true;
|
44 | if (!this._isActive) {
|
45 | (_b = this.targetNode.parentNode) === null || _b === void 0 ? void 0 : _b.childNodes.forEach(node => {
|
46 | node.classList.add(CELL_RESIZED_CLASS);
|
47 | });
|
48 | this._isActive = true;
|
49 | }
|
50 | window.addEventListener('mousemove', this);
|
51 | window.addEventListener('mouseup', this);
|
52 | break;
|
53 | case 'mousemove': {
|
54 | if (!this._isActive || !this._isDragging) {
|
55 | return;
|
56 | }
|
57 | const targetRect = this.targetNode.getBoundingClientRect();
|
58 | const width = targetRect.width - this._protectedWidth * 2;
|
59 | const position = event.clientX - targetRect.x - this._protectedWidth;
|
60 | const outputRatio = width / position - 1;
|
61 | document.documentElement.style.setProperty('--jp-side-by-side-output-size', `${outputRatio}fr`);
|
62 | break;
|
63 | }
|
64 | case 'mouseup':
|
65 | this._isDragging = false;
|
66 | window.removeEventListener('mousemove', this);
|
67 | window.removeEventListener('mouseup', this);
|
68 | break;
|
69 | default:
|
70 | break;
|
71 | }
|
72 | }
|
73 | }
|
74 |
|
\ | No newline at end of file |