GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — Modify the way to emit gutterClick event which was buggy · cdscript/angular-split@82884f6

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
  • projects/angular-split
    • package.json
    • src/lib/component
      • split.component.ts
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎projects/angular-split/package.json‎

Copy file name to clipboardExpand all lines: projects/angular-split/package.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-split",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"description": "Angular UI library used to split views and to allow dragging to resize the split areas using CSS flexbox layout.",
55
"author": "bertrandg",
66
"repository": {
Collapse file

‎projects/angular-split/src/lib/component/split.component.ts‎

Copy file name to clipboardExpand all lines: projects/angular-split/src/lib/component/split.component.ts
+63-48Lines changed: 63 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ import { SplitAreaDirective } from '../directive/splitArea.directive';
5555
[imageH]="gutterImageH"
5656
[imageV]="gutterImageV"
5757
[disabled]="disabled"
58+
(click)="clickGutter($event, index*2+1, index+1)"
5859
(mousedown)="startDragging($event, index*2+1, index+1)"
5960
(touchstart)="startDragging($event, index*2+1, index+1)"></as-split-gutter>
6061
</ng-template>`,
@@ -244,8 +245,9 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
244245

245246
public isViewInitialized: boolean = false;
246247
private isDragging: boolean = false;
247-
private draggingWithoutMove: boolean = false;
248248
private currentGutterNum: number = 0;
249+
private startPoint: IPoint | null = null;
250+
private endPoint: IPoint | null = null;
249251

250252
public readonly displayedAreas: Array<IArea> = [];
251253
private readonly hidedAreas: Array<IArea> = [];
@@ -348,7 +350,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
348350

349351
// ¤ AREAS ORDER
350352

351-
if(resetOrders === true) {
353+
if(resetOrders === true) {
352354

353355
// If user provided 'order' for each area, use it to sort them.
354356
if(this.displayedAreas.every(a => a.comp.order !== null)) {
@@ -438,17 +440,21 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
438440
});
439441
}
440442

443+
public clickGutter(event: MouseEvent, gutterOrder: number, gutterNum: number): void {
444+
if(this.startPoint && this.startPoint.x === event.pageX && this.startPoint.y === event.pageY) {
445+
this.currentGutterNum = gutterNum;
446+
447+
this.notify('click');
448+
}
449+
}
450+
441451
public startDragging(startEvent: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void {
442452
startEvent.preventDefault();
443453

444-
// Place code here to allow '(gutterClick)' event even if '[disabled]="true"'.
445-
this.currentGutterNum = gutterNum;
446-
this.draggingWithoutMove = true;
447-
this.ngZone.runOutsideAngular(() => {
448-
this.dragListeners.push( this.renderer.listen('document', 'mouseup', (e: MouseEvent) => this.stopDragging()) );
449-
this.dragListeners.push( this.renderer.listen('document', 'touchend', (e: TouchEvent) => this.stopDragging()) );
450-
this.dragListeners.push( this.renderer.listen('document', 'touchcancel', (e: TouchEvent) => this.stopDragging()) );
451-
});
454+
this.startPoint = getPointFromEvent(startEvent);
455+
if(!this.startPoint) {
456+
return;
457+
}
452458

453459
if(this.disabled) {
454460
return;
@@ -461,21 +467,24 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
461467
return;
462468
}
463469

470+
this.ngZone.runOutsideAngular(() => {
471+
this.dragListeners.push( this.renderer.listen('document', 'mouseup', (e: MouseEvent) => this.stopDragging()) );
472+
this.dragListeners.push( this.renderer.listen('document', 'touchend', (e: TouchEvent) => this.stopDragging()) );
473+
this.dragListeners.push( this.renderer.listen('document', 'touchcancel', (e: TouchEvent) => this.stopDragging()) );
474+
});
475+
464476
const prop = (this.direction === 'horizontal') ? 'offsetWidth' : 'offsetHeight';
465477
this.dragStartValues.sizePixelContainer = this.elRef.nativeElement[prop];
466478
this.dragStartValues.sizePixelA = areaA.comp.getSizePixel(prop);
467479
this.dragStartValues.sizePixelB = areaB.comp.getSizePixel(prop);
468480
this.dragStartValues.sizePercentA = areaA.size;
469481
this.dragStartValues.sizePercentB = areaB.size;
470482

471-
const start: IPoint = this.getPointFromEvent(startEvent);
472-
if(!start) {
473-
return;
474-
}
483+
this.currentGutterNum = gutterNum;
475484

476485
this.ngZone.runOutsideAngular(() => {
477-
this.dragListeners.push( this.renderer.listen('document', 'mousemove', (e: MouseEvent) => this.dragEvent(e, start, areaA, areaB)) );
478-
this.dragListeners.push( this.renderer.listen('document', 'touchmove', (e: TouchEvent) => this.dragEvent(e, start, areaA, areaB)) );
486+
this.dragListeners.push( this.renderer.listen('document', 'mousemove', (e: MouseEvent) => this.dragEvent(e, areaA, areaB)) );
487+
this.dragListeners.push( this.renderer.listen('document', 'touchmove', (e: TouchEvent) => this.dragEvent(e, areaA, areaB)) );
479488
});
480489

481490
areaA.comp.lockEvents();
@@ -486,43 +495,25 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
486495
this.notify('start');
487496
}
488497

489-
private dragEvent(event: MouseEvent | TouchEvent, start: IPoint, areaA: IArea, areaB: IArea): void {
498+
private dragEvent(event: MouseEvent | TouchEvent, areaA: IArea, areaB: IArea): void {
490499
if(!this.isDragging) {
491500
return;
492501
}
493-
const end: IPoint = this.getPointFromEvent(event);
494-
if(!end) {
502+
503+
this.endPoint = getPointFromEvent(event);
504+
if(!this.endPoint) {
495505
return;
496506
}
497507

498-
this.draggingWithoutMove = false;
499-
this.drag(start, end, areaA, areaB);
500-
}
501-
502-
private getPointFromEvent(event: MouseEvent | TouchEvent): IPoint {
503-
// TouchEvent
504-
if(event instanceof TouchEvent) {
505-
return {
506-
x: event.touches[0].pageX,
507-
y: event.touches[0].pageY,
508-
};
509-
}
510-
// MouseEvent
511-
else if(event.pageX !== undefined && event.pageY !== undefined) {
512-
return {
513-
x: event.pageX,
514-
y: event.pageY,
515-
};
516-
}
517-
return null;
508+
this.drag(areaA, areaB);
518509
}
519510

520-
private drag(start: IPoint, end: IPoint, areaA: IArea, areaB: IArea): void {
511+
private drag(areaA: IArea, areaB: IArea): void {
521512

522513
// ¤ AREAS SIZE PIXEL
523514

524515
const devicePixelRatio = /*window.devicePixelRatio ||*/ 1;
525-
let offsetPixel = (this.direction === 'horizontal') ? (start.x - end.x) : (start.y - end.y);
516+
let offsetPixel = (this.direction === 'horizontal') ? (this.startPoint.x - this.endPoint.x) : (this.startPoint.y - this.endPoint.y);
526517
offsetPixel = offsetPixel / devicePixelRatio;
527518

528519
if(this.dir === 'rtl') {
@@ -572,11 +563,14 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
572563
}
573564

574565
this.refreshStyleSizes();
575-
this.notify('progress');
566+
567+
if(this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y) {
568+
this.notify('progress');
569+
}
576570
}
577571

578572
private stopDragging(): void {
579-
if(this.isDragging === false && this.draggingWithoutMove === false) {
573+
if(this.isDragging === false) {
580574
return;
581575
}
582576

@@ -591,15 +585,17 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
591585
}
592586
}
593587

594-
if(this.draggingWithoutMove === true) {
595-
this.notify('click');
596-
}
597-
else {
588+
if(this.endPoint && (this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y)) {
598589
this.notify('end');
599590
}
600591

601592
this.isDragging = false;
602-
this.draggingWithoutMove = false;
593+
594+
// Needed to let (click)="clickGutter(...)" event run and verify if mouse moved or not
595+
setTimeout(() => {
596+
this.startPoint = null;
597+
this.endPoint = null;
598+
})
603599
}
604600

605601

@@ -630,3 +626,22 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
630626
this.stopDragging();
631627
}
632628
}
629+
630+
631+
function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint {
632+
// TouchEvent
633+
if(event instanceof TouchEvent) {
634+
return {
635+
x: event.touches[0].pageX,
636+
y: event.touches[0].pageY,
637+
};
638+
}
639+
// MouseEvent
640+
else if(event.pageX !== undefined && event.pageY !== undefined) {
641+
return {
642+
x: event.pageX,
643+
y: event.pageY,
644+
};
645+
}
646+
return null;
647+
}

0 commit comments

Comments
0 (0)
You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.