pages/split-window/split-window.component.ts

0001 import {Component, OnInit, ChangeDetectionStrategy, AfterViewInit, ElementRef, Renderer2} from '@angular/core'
0002 // import { AComponent } from '../../ui/components/AComponent'
0003 // import { SplitAreaSize, SplitGutterInteractionEvent } from 'angular-split'
0004
0005 // interface IConfig {
0006 //   columns: Array<{
0007 //     visible: boolean
0008 //     size: SplitAreaSize
0009 //     rows: Array<{
0010 //       visible: boolean
0011 //       size: SplitAreaSize
0012 //       type: string
0013 //     }>
0014 //   }>
0015 //   disabled: boolean
0016 // }
0017
0018 // const defaultConfig: IConfig = {
0019 //   columns: [
0020 //     {
0021 //       visible: true,
0022 //       size: 25,
0023 //       rows: [
0024 //         { visible: true, size: 25, type: 'A' },
0025 //         { visible: true, size: 75, type: 'B' },
0026 //       ],
0027 //     },
0028 //     {
0029 //       visible: true,
0030 //       size: 50,
0031 //       rows: [
0032 //         { visible: true, size: 60, type: 'doc' },
0033 //         { visible: true, size: 40, type: 'C' },
0034 //       ],
0035 //     },
0036 //     {
0037 //       visible: true,
0038 //       size: 25,
0039 //       rows: [
0040 //         { visible: true, size: 20, type: 'D' },
0041 //         { visible: true, size: 30, type: 'E' },
0042 //         { visible: true, size: 50, type: 'F' },
0043 //       ],
0044 //     },
0045 //   ],
0046 //   disabled: false,
0047 // }
0048
0049 @Component({
0050   selector: 'app-split-window',
0051   standalone: true,
0052   imports: [],
0053   templateUrl: './split-window.component.html',
0054   styleUrl: './split-window.component.scss'
0055 })
0056 export class SplitWindowComponent implements AfterViewInit {
0057   private isHandlerDragging = false;
0058
0059   constructor(private elRef: ElementRef, private renderer: Renderer2) {}
0060
0061   ngAfterViewInit() {
0062     const handler = this.elRef.nativeElement.querySelector('.handler');
0063     const wrapper = handler.closest('.wrapper');
0064     const boxA = wrapper.querySelector('.box');
0065
0066     this.renderer.listen(handler, 'mousedown', (e: MouseEvent) => {
0067       // Если событие mousedown произошло на элементе .handler, флаг переключается на true
0068       this.isHandlerDragging = true;
0069     });
0070
0071     this.renderer.listen(document, 'mousemove', (e: MouseEvent) => {
0072       if (!this.isHandlerDragging) {
0073         return;
0074       }
0075
0076
0077       const containerOffsetLeft = wrapper.offsetLeft;
0078
0079
0080       const pointerRelativeXpos = e.clientX - containerOffsetLeft;
0081
0082
0083       const boxAminWidth = 60;
0084
0085
0086       boxA.style.width = `${Math.max(boxAminWidth, pointerRelativeXpos - 8)}px`;
0087       boxA.style.flexGrow = '0';
0088     });
0089
0090     this.renderer.listen(document, 'mouseup', () => {
0091       this.isHandlerDragging = false;
0092     });
0093   }
0094 }