Skip to content

Commit ca8eacb

Browse files
bertrandgbertrandg
committed
[WIP]
1 parent 26d108e commit ca8eacb

3 files changed

Lines changed: 67 additions & 36 deletions

File tree

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

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, R
22
import { Observable, Subscriber, Subject } from 'rxjs';
33
import { debounceTime } from 'rxjs/operators';
44

5-
import { IArea, IPoint, ISplitSnapshot, IAreaSnapshot } from '../interface';
5+
import { IArea, IPoint, ISplitSnapshot, IAreaSnapshot, ISplitSideAbsorptionSnapshot } from '../interface';
66
import { SplitAreaDirective } from '../directive/splitArea.directive';
77
import { getInputPositiveNumber, getInputBoolean, getPointFromEvent, getElementPixelSize, getAreaAbsorptionCapacity, isValidTotalSize } from '../utils';
88

@@ -152,8 +152,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
152152
private _dir: 'ltr' | 'rtl' = 'ltr';
153153

154154
@Input() set dir(v: 'ltr' | 'rtl') {
155-
v = (v === 'rtl') ? 'rtl' : 'ltr';
156-
this._dir = v;
155+
this._dir = (v === 'rtl') ? 'rtl' : 'ltr';
157156

158157
this.renderer.setAttribute(this.elRef.nativeElement, 'dir', this._dir);
159158
}
@@ -424,9 +423,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
424423
event.stopPropagation();
425424

426425
if(this.startPoint && this.startPoint.x === event.clientX && this.startPoint.y === event.clientY) {
427-
this.currentGutterNum = gutterNum;
428-
429-
this.notify('click');
426+
this.notify('click', gutterNum);
430427
}
431428
}
432429

@@ -483,7 +480,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
483480
this.renderer.addClass(this.elRef.nativeElement, 'is-dragging');
484481
this.renderer.addClass(this.gutterEls.toArray()[this.snapshot.gutterNum - 1].nativeElement, 'is-dragged');
485482

486-
this.notify('start');
483+
this.notify('start', this.snapshot.gutterNum);
487484
}
488485

489486
private dragEvent(event: MouseEvent | TouchEvent, areaA: IArea, areaB: IArea): void {
@@ -511,7 +508,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
511508

512509
this.snapshot.lastSteppedOffset = steppedOffset;
513510

514-
const areasBefore = this.snapshot.areasBeforeGutter.reduce((acc, area) => {
511+
const areasBefore: ISplitSideAbsorptionSnapshot = this.snapshot.areasBeforeGutter.reduce((acc, area) => {
515512
const res = getAreaAbsorptionCapacity(this.unit, area, acc.remain);
516513
acc.list.push(res);
517514
acc.remain = res.remain;
@@ -520,7 +517,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
520517

521518
if(areasBefore.remain !== 0) return;
522519

523-
const areasAfter = this.snapshot.areasAfterGutter.reduce((acc, a) => {
520+
const areasAfter: ISplitSideAbsorptionSnapshot = this.snapshot.areasAfterGutter.reduce((acc, a) => {
524521
const res = getAreaAbsorptionCapacity(this.unit, a, acc.remain);
525522
acc.list.push(res);
526523
acc.remain = res.remain;
@@ -540,16 +537,28 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
540537
// }
541538

542539
areasBefore.list.forEach((e, i) => {
543-
if(e.)
540+
if(e.absorb > 0) {
541+
if(this.unit === 'percent') {
542+
543+
}
544+
else if(this.unit === 'pixel') {
545+
if(e.areaSnapshot.area.size === null) {
546+
547+
}
548+
else {
549+
e.areaSnapshot.area.size -= e.absorb;
550+
}
551+
}
552+
}
544553
});
545554

546555
this.refreshStyleSizes();
547556

548557
// If moved from starting point, notify progress
549558
// TODO test but normally, IF condition is not needed because L513 "if(steppedOffset === this.snapshot.lastSteppedOffset)..."
550-
if(this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y) {
551-
this.notify('progress');
552-
}
559+
//if(this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y) {
560+
this.notify('progress', this.snapshot.gutterNum);
561+
//}
553562
}
554563

555564
private stopDragging(event?: Event): void {
@@ -575,7 +584,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
575584

576585
// If moved from starting point, notify end
577586
if(event && this.endPoint && (this.startPoint.x !== this.endPoint.x || this.startPoint.y !== this.endPoint.y)) {
578-
this.notify('end');
587+
this.notify('end', this.snapshot.gutterNum);
579588
}
580589

581590
this.isDragging = false;
@@ -592,22 +601,22 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
592601
});
593602
}
594603

595-
public notify(type: 'start' | 'progress' | 'end' | 'click' | 'transitionEnd'): void {
604+
public notify(type: 'start' | 'progress' | 'end' | 'click' | 'transitionEnd', gutterNum: number): void {
596605
const sizes: Array<number> = this.displayedAreas.map(a => a.size * 100);
597606

598607
if(type === 'start') {
599608
if(this.dragStartSubscriber) {
600-
this.ngZone.run(() => this.dragStartSubscriber.next({gutterNum: this.snapshot.gutterNum, sizes}));
609+
this.ngZone.run(() => this.dragStartSubscriber.next({gutterNum, sizes}));
601610
}
602611
}
603612
else if(type === 'end') {
604613
if(this.dragEndSubscriber) {
605-
this.ngZone.run(() => this.dragEndSubscriber.next({gutterNum: this.snapshot.gutterNum, sizes}));
614+
this.ngZone.run(() => this.dragEndSubscriber.next({gutterNum, sizes}));
606615
}
607616
}
608617
else if(type === 'click') {
609618
if(this.gutterClickSubscriber) {
610-
this.ngZone.run(() => this.gutterClickSubscriber.next({gutterNum: this.snapshot.gutterNum, sizes}));
619+
this.ngZone.run(() => this.gutterClickSubscriber.next({gutterNum, sizes}));
611620
}
612621
}
613622
else if(type === 'transitionEnd') {
@@ -617,7 +626,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
617626
}
618627
else if(type === 'progress') {
619628
// Stay outside zone to allow users do what they want about change detection mechanism.
620-
this.dragProgressSubject.next({gutterNum: this.snapshot.gutterNum, sizes});
629+
this.dragProgressSubject.next({gutterNum, sizes});
621630
}
622631
}
623632

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

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { SplitAreaDirective } from "./directive/splitArea.directive";
22

3+
export interface IPoint {
4+
x: number;
5+
y: number;
6+
}
7+
38
export interface IArea {
49
component: SplitAreaDirective;
510
order: number;
@@ -8,21 +13,27 @@ export interface IArea {
813
maxSize?: number;
914
}
1015

11-
export interface IPoint {
12-
x: number;
13-
y: number;
16+
export interface ISplitSnapshot {
17+
gutterNum: number
18+
containerSizePixel: number
19+
lastSteppedOffset: number
20+
areasBeforeGutter: Array<IAreaSnapshot>
21+
areasAfterGutter: Array<IAreaSnapshot>
1422
}
1523

1624
export interface IAreaSnapshot {
1725
area: IArea
18-
sizePixelAtStart: number
19-
sizePercentAtStart: number
26+
sizePixelAtStart: number
27+
sizePercentAtStart: number
2028
}
2129

22-
export interface ISplitSnapshot {
23-
gutterNum: number
24-
containerSizePixel: number
25-
lastSteppedOffset: number
26-
areasBeforeGutter: Array<IAreaSnapshot>
27-
areasAfterGutter: Array<IAreaSnapshot>
30+
export interface ISplitSideAbsorptionSnapshot {
31+
remain: number
32+
list: Array<IAreaAbsorptionSnapshot>
33+
}
34+
35+
export interface IAreaAbsorptionSnapshot {
36+
areaSnapshot: IAreaSnapshot
37+
absorb: number
38+
remain: number
2839
}

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

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ElementRef } from '@angular/core';
22

3-
import { IPoint, IAreaSnapshot } from './interface';
3+
import { IPoint, IAreaSnapshot, IAreaAbsorptionSnapshot } from './interface';
44

55
export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint {
66
// TouchEvent
@@ -52,10 +52,11 @@ export function isValidTotalSize(total: number): boolean {
5252
// _________________________________________________
5353
// |________________maxSize_(%_/_px)_________________|
5454
//
55-
export function getAreaAbsorptionCapacity(unit: 'percent' | 'pixel', areaSnapshot: IAreaSnapshot, pixels: number): {absorb: number, remain: number} {
55+
export function getAreaAbsorptionCapacity(unit: 'percent' | 'pixel', areaSnapshot: IAreaSnapshot, pixels: number): IAreaAbsorptionSnapshot {
5656
// No pain no gain
5757
if(pixels === 0) {
5858
return {
59+
areaSnapshot,
5960
absorb: 0,
6061
remain: 0,
6162
};
@@ -64,21 +65,22 @@ export function getAreaAbsorptionCapacity(unit: 'percent' | 'pixel', areaSnapsho
6465
// Area at zero and need to be reduced, not possible
6566
if(areaSnapshot.area.size === 0 && pixels < 0) {
6667
return {
68+
areaSnapshot,
6769
absorb: 0,
6870
remain: pixels,
6971
};
7072
}
7173

7274

7375
if(unit === 'pixel') {
74-
return areaAbsorbPixel(areaSnapshot, pixels);
76+
return getAreaAbsorptionCapacityPixel(areaSnapshot, pixels);
7577
}
7678

77-
return areaAbsorbPercent(areaSnapshot, pixels);
79+
return getAreaAbsorptionCapacityPercent(areaSnapshot, pixels);
7880
}
7981

8082

81-
function areaAbsorbPercent(areaSnapshot: IAreaSnapshot, pixels: number): {absorb: number, remain: number} {
83+
function getAreaAbsorptionCapacityPercent(areaSnapshot: IAreaSnapshot, pixels: number): IAreaAbsorptionSnapshot {
8284
const tempPixelSize = areaSnapshot.sizePixelAtStart + pixels;
8385
const tempPercentSize = tempPixelSize / areaSnapshot.sizePixelAtStart * areaSnapshot.sizePercentAtStart;
8486

@@ -90,11 +92,13 @@ function areaAbsorbPercent(areaSnapshot: IAreaSnapshot, pixels: number): {absorb
9092
// Use area.area.maxSize as newPercentSize and return calculate pixels remaining
9193
const maxPixelAbsorb = areaSnapshot.sizePixelAtStart * areaSnapshot.area.maxSize / areaSnapshot.sizePercentAtStart;
9294
return {
95+
areaSnapshot,
9396
absorb: maxPixelAbsorb,
9497
remain: pixels - maxPixelAbsorb
9598
};
9699
}
97100
return {
101+
areaSnapshot,
98102
absorb: pixels,
99103
remain: 0
100104
};
@@ -108,6 +112,7 @@ function areaAbsorbPercent(areaSnapshot: IAreaSnapshot, pixels: number): {absorb
108112
// Use area.area.minSize as newPercentSize and return calculate pixels remaining
109113
const maxPixelAbsorb = areaSnapshot.sizePixelAtStart * areaSnapshot.area.minSize / areaSnapshot.sizePercentAtStart;
110114
return {
115+
areaSnapshot,
111116
absorb: maxPixelAbsorb,
112117
remain: pixels - maxPixelAbsorb
113118
};
@@ -116,18 +121,20 @@ function areaAbsorbPercent(areaSnapshot: IAreaSnapshot, pixels: number): {absorb
116121
else if(tempPercentSize < 0) {
117122
// Use 0 as newPercentSize and return calculate pixels remaining
118123
return {
124+
areaSnapshot,
119125
absorb: ,
120126
remain: pixels - areaSnapshot.sizePixelAtStart
121127
};
122128
}
123129
return {
130+
areaSnapshot,
124131
absorb: pixels,
125132
remain: 0
126133
};
127134
}
128135
}
129136

130-
function areaAbsorbPixel(areaSnapshot: IAreaSnapshot, pixels: number): {absorb: number, remain: number} {
137+
function getAreaAbsorptionCapacityPixel(areaSnapshot: IAreaSnapshot, pixels: number): IAreaAbsorptionSnapshot {
131138
const tempPixelSize = areaSnapshot.sizePixelAtStart + pixels;
132139

133140
// ENLARGE
@@ -136,11 +143,13 @@ function areaAbsorbPixel(areaSnapshot: IAreaSnapshot, pixels: number): {absorb:
136143
// If maxSize & newSize bigger than it > absorb to max and return remaining pixels
137144
if(areaSnapshot.area.maxSize !== undefined && tempPixelSize > areaSnapshot.area.maxSize) {
138145
return {
146+
areaSnapshot,
139147
absorb: areaSnapshot.area.maxSize,
140148
remain: tempPixelSize - areaSnapshot.area.maxSize
141149
};
142150
}
143151
return {
152+
areaSnapshot,
144153
absorb: pixels,
145154
remain: 0
146155
};
@@ -152,6 +161,7 @@ function areaAbsorbPixel(areaSnapshot: IAreaSnapshot, pixels: number): {absorb:
152161
// If minSize & newSize smaller than it > absorb to min and return remaining pixels
153162
if(areaSnapshot.area.minSize !== undefined && tempPixelSize < areaSnapshot.area.minSize) {
154163
return {
164+
areaSnapshot,
155165
absorb: areaSnapshot.area.minSize,
156166
remain: tempPixelSize - areaSnapshot.area.minSize
157167
};
@@ -161,6 +171,7 @@ function areaAbsorbPixel(areaSnapshot: IAreaSnapshot, pixels: number): {absorb:
161171
return tempPixelSize;
162172
}
163173
return {
174+
areaSnapshot,
164175
absorb: pixels,
165176
remain: 0
166177
};

0 commit comments

Comments
 (0)