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     imports: [],
0052     templateUrl: './split-window.component.html',
0053     styleUrl: './split-window.component.scss'
0054 })
0055 export class SplitWindowComponent implements AfterViewInit {
0056   private isHandlerDragging = false;
0057
0058   constructor(private elRef: ElementRef, private renderer: Renderer2) {}
0059
0060   ngAfterViewInit() {
0061     const handler = this.elRef.nativeElement.querySelector('.handler');
0062     const wrapper = handler.closest('.wrapper');
0063     const boxA = wrapper.querySelector('.box');
0064
0065     this.renderer.listen(handler, 'mousedown', (e: MouseEvent) => {
0066       // Если событие mousedown произошло на элементе .handler, флаг переключается на true
0067       this.isHandlerDragging = true;
0068     });
0069
0070     this.renderer.listen(document, 'mousemove', (e: MouseEvent) => {
0071       if (!this.isHandlerDragging) {
0072         return;
0073       }
0074
0075
0076       const containerOffsetLeft = wrapper.offsetLeft;
0077
0078
0079       const pointerRelativeXpos = e.clientX - containerOffsetLeft;
0080
0081
0082       const boxAminWidth = 60;
0083
0084
0085       boxA.style.width = `${Math.max(boxAminWidth, pointerRelativeXpos - 8)}px`;
0086       boxA.style.flexGrow = '0';
0087     });
0088
0089     this.renderer.listen(document, 'mouseup', () => {
0090       this.isHandlerDragging = false;
0091     });
0092   }
0093 }