Skip to content

Commit d3db8e1

Browse files
bertrandgbertrandg
committed
[WIP] Finalize pixel mode & add restrictMove property
1 parent a150a63 commit d3db8e1

4 files changed

Lines changed: 79 additions & 32 deletions

File tree

‎projects/angular-split/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-split",
3-
"version": "3.0.0-beta.3",
3+
"version": "3.0.0-beta.4",
44
"description": "Lightweight Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.",
55
"author": "bertrandg",
66
"repository": {

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

Lines changed: 45 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,18 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
117117

118118
////
119119

120+
private _restrictMove: boolean = false;
121+
122+
@Input() set restrictMove(v: boolean) {
123+
this._restrictMove = getInputBoolean(v);
124+
}
125+
126+
get restrictMove(): boolean {
127+
return this._restrictMove;
128+
}
129+
130+
////
131+
120132
private _useTransition: boolean = false;
121133

122134
@Input() set useTransition(v: boolean) {
@@ -349,7 +361,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
349361
this.displayedAreas.forEach(area => {
350362
area.size = area.component.size;
351363

352-
// Set min/max to area.size if size provided less than min/more than max
364+
// Set min/max to area.size if size provided 'less than min'/'more than max'
353365
area.minSize = (area.component.minSize === null) ? null : (area.size !== null && area.component.minSize > area.size ? area.size : area.component.minSize);
354366
area.maxSize = (area.component.maxSize === null) ? null : (area.size !== null && area.component.maxSize < area.size ? area.size : area.component.maxSize);
355367
});
@@ -444,13 +456,23 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
444456
};
445457

446458
if(area.order < gutterOrder) {
447-
this.snapshot.areasBeforeGutter.unshift(areaSnapshot);
459+
if(this.restrictMove === true) {
460+
this.snapshot.areasBeforeGutter = [areaSnapshot];
461+
}
462+
else {
463+
this.snapshot.areasBeforeGutter.unshift(areaSnapshot);
464+
}
448465
}
449466
else if(area.order > gutterOrder) {
450-
this.snapshot.areasAfterGutter.push(areaSnapshot);
467+
if(this.restrictMove === true) {
468+
if(this.snapshot.areasAfterGutter.length === 0) this.snapshot.areasAfterGutter = [areaSnapshot];
469+
}
470+
else {
471+
this.snapshot.areasAfterGutter.push(areaSnapshot);
472+
}
451473
}
452474
});
453-
console.log('START', this.displayedAreas.map(a=>a.size), ' TOTAL > ', this.displayedAreas.map(a=>a.size).reduce((t,s)=>t+s, 0), this.snapshot);
475+
//console.log('START', this.displayedAreas.map(a=>a.size), ' TOTAL > ', this.displayedAreas.map(a=>a.size).reduce((t,s)=>t+s, 0), this.snapshot);
454476

455477
if(this.snapshot.areasBeforeGutter.length === 0 || this.snapshot.areasAfterGutter.length === 0) {
456478
return;
@@ -503,64 +525,64 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
503525

504526
// Need to know if each gutter side areas could reacts to steppedOffset
505527

506-
console.groupCollapsed('steppedOffset', steppedOffset)
528+
//console.groupCollapsed('steppedOffset', steppedOffset)
507529
let areasBefore = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasBeforeGutter, -steppedOffset, this.snapshot.allAreasSizePixel);
508530
let areasAfter = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasAfterGutter, steppedOffset, this.snapshot.allAreasSizePixel);
509531

510-
logMe(this.unit, '--- > ', areasBefore, areasAfter)
532+
//logMe(this.unit, '--- > ', areasBefore, areasAfter)
511533

512534
// Each gutter side areas can't absorb all offset
513535
if(areasBefore.remain !== 0 && areasAfter.remain !== 0) {
514536
if(Math.abs(areasBefore.remain) === Math.abs(areasAfter.remain)) {
515-
logMe(this.unit, 'AA1 > ', areasBefore, areasAfter)
537+
//logMe(this.unit, 'AA1 > ', areasBefore, areasAfter)
516538
}
517539
else if(Math.abs(areasBefore.remain) > Math.abs(areasAfter.remain)) {
518540
areasAfter = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasAfterGutter, steppedOffset + areasBefore.remain, this.snapshot.allAreasSizePixel);
519-
logMe(this.unit, 'AA2 > ', areasBefore, areasAfter)
541+
//logMe(this.unit, 'AA2 > ', areasBefore, areasAfter)
520542
}
521543
else {
522544
areasBefore = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasBeforeGutter, -(steppedOffset - areasAfter.remain), this.snapshot.allAreasSizePixel);
523-
logMe(this.unit, 'AA3 > ', areasBefore, areasAfter)
545+
//logMe(this.unit, 'AA3 > ', areasBefore, areasAfter)
524546
}
525547
}
526548
// Areas before gutter can't absorbs all offset > need to recalculate sizes for areas after gutter.
527549
else if(areasBefore.remain !== 0) {
528550
areasAfter = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasAfterGutter, steppedOffset + areasBefore.remain, this.snapshot.allAreasSizePixel);
529-
logMe(this.unit, 'BBB > ', areasBefore, areasAfter)
551+
//logMe(this.unit, 'BBB > ', areasBefore, areasAfter)
530552
}
531553
// Areas after gutter can't absorbs all offset > need to recalculate sizes for areas before gutter.
532554
else if(areasAfter.remain !== 0) {
533555
areasBefore = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasBeforeGutter, -(steppedOffset - areasAfter.remain), this.snapshot.allAreasSizePixel);
534-
logMe(this.unit, 'CCC > ', areasBefore, areasAfter)
535-
}
536-
else {
537-
logMe(this.unit, 'DDD > ', areasBefore, areasAfter)
538-
//debugger;
556+
//logMe(this.unit, 'CCC > ', areasBefore, areasAfter)
539557
}
558+
//else {
559+
//logMe(this.unit, 'DDD > ', areasBefore, areasAfter)
560+
//}
540561

541-
562+
/*
542563
function logMe(unit, txt, lBefore, lAfter) {
543564
// PERCENT
544565
if(unit === 'percent') {
545-
console.log(txt, lBefore.remain, ' ¤ ', lAfter.remain, ' // ', ...lBefore.list.map(a=>a.percentAfterAbsorption).reverse(), ' ¤ ', ...lAfter.list.map(a=>a.percentAfterAbsorption))
566+
//console.log(txt, lBefore.remain, ' ¤ ', lAfter.remain, ' // ', ...lBefore.list.map(a=>a.percentAfterAbsorption).reverse(), ' ¤ ', ...lAfter.list.map(a=>a.percentAfterAbsorption))
546567
}
547568
// PIXEL
548569
else {
549-
console.log(txt, lBefore.remain, ' ¤ ', lAfter.remain, ' // ', ...lBefore.list.map(a=>a.pixelAbsorb).reverse(), ' ¤ ', ...lAfter.list.map(a=>a.pixelAbsorb))
570+
//console.log(txt, lBefore.remain, ' ¤ ', lAfter.remain, ' // ', ...lBefore.list.map(a=>a.pixelAbsorb).reverse(), ' ¤ ', ...lAfter.list.map(a=>a.pixelAbsorb))
550571
}
551572
}
552-
573+
*/
553574

554575
if(this.unit === 'percent') {
555576
// Hack because of browser messing up with sizes using calc(X% - Ypx) -> el.getBoundingClientRect()
556577
// If not there, playing with gutters makes total going down to 99.99875% then 99.99286%, 99.98986%,..
557578
const all = [...areasBefore.list, ...areasAfter.list];
579+
const allPercent = all.reduce((t, a) => t+a.areaSnapshot.sizePercentAtStart, 0);
558580
const areaToReset = all.find(a => a.percentAfterAbsorption !== 0 && a.percentAfterAbsorption !== a.areaSnapshot.area.minSize && a.percentAfterAbsorption !== a.areaSnapshot.area.maxSize)
559581

560582
if(areaToReset) {
561583
const x = areaToReset.percentAfterAbsorption;
562-
areaToReset.percentAfterAbsorption = 100 - all.filter(a => a !== areaToReset).reduce((total, a) => total+a.percentAfterAbsorption, 0);
563-
console.log('ZZZZZZZ areaToReset', areaToReset, 'before=', x, ' after=', areaToReset.percentAfterAbsorption)
584+
areaToReset.percentAfterAbsorption = allPercent - all.filter(a => a !== areaToReset).reduce((total, a) => total+a.percentAfterAbsorption, 0);
585+
//console.log('ZZZZZZZ areaToReset', areaToReset, 'before=', x, ' after=', areaToReset.percentAfterAbsorption)
564586
}
565587
}
566588

@@ -571,12 +593,12 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
571593
areasAfter.list.forEach(item => updateAreaSize(this.unit, item));
572594

573595
const ttt = this.displayedAreas.map(a=>a.size).reduce((t,s)=>t+s, 0);
574-
console.log('all a.size = ', ttt)
596+
//console.log('all a.size = ', ttt)
575597

576598
this.refreshStyleSizes();
577599
this.notify('progress', this.snapshot.gutterNum);
578600

579-
console.groupEnd()
601+
//console.groupEnd()
580602
}
581603

582604
private stopDragging(event?: Event): void {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ function getAreaAbsorptionCapacityPixel(areaSnapshot: IAreaSnapshot, pixels: num
158158
if(areaSnapshot.area.maxSize !== null && tempPixelSize > areaSnapshot.area.maxSize) {
159159
return {
160160
areaSnapshot,
161-
pixelAbsorb: areaSnapshot.area.maxSize,
161+
pixelAbsorb: areaSnapshot.area.maxSize - areaSnapshot.sizePixelAtStart,
162162
percentAfterAbsorption: -1,
163163
pixelRemain: tempPixelSize - areaSnapshot.area.maxSize
164164
};
@@ -178,7 +178,7 @@ function getAreaAbsorptionCapacityPixel(areaSnapshot: IAreaSnapshot, pixels: num
178178
if(areaSnapshot.area.minSize !== null && tempPixelSize < areaSnapshot.area.minSize) {
179179
return {
180180
areaSnapshot,
181-
pixelAbsorb: areaSnapshot.area.minSize,
181+
pixelAbsorb: areaSnapshot.area.minSize + pixels - tempPixelSize,
182182
percentAfterAbsorption: -1,
183183
pixelRemain: tempPixelSize - areaSnapshot.area.minSize
184184
};
@@ -189,7 +189,7 @@ function getAreaAbsorptionCapacityPixel(areaSnapshot: IAreaSnapshot, pixels: num
189189
areaSnapshot,
190190
pixelAbsorb: -areaSnapshot.sizePixelAtStart,
191191
percentAfterAbsorption: -1,
192-
pixelRemain: pixels - areaSnapshot.sizePixelAtStart
192+
pixelRemain: pixels + areaSnapshot.sizePixelAtStart
193193
};
194194
}
195195
return {

‎src_app/app/component/examples/minMax.route.component.ts‎

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,16 @@ import { AComponent } from './AComponent';
1010
'class': 'split-example-page'
1111
},
1212
styles: [`
13+
.btns {
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
flex-wrap: wrap;
18+
}
19+
1320
.txt-min,
14-
.txt-max {
21+
.txt-max,
22+
.txt-minmax {
1523
pointer-events: none;
1624
position: absolute;
1725
opacity: 0;
@@ -25,10 +33,12 @@ import { AComponent } from './AComponent';
2533
}
2634
2735
.txt-min > p,
28-
.txt-max > p {
29-
font-size: 60px;
36+
.txt-max > p,
37+
.txt-minmax > p {
38+
font-size: 30px;
3039
font-weight: bold;
3140
color: #cccccc;
41+
text-align: center;
3242
}
3343
3444
as-split-area {
@@ -57,14 +67,20 @@ import { AComponent } from './AComponent';
5767
as-split-area.as-max .txt-max {
5868
opacity: 1;
5969
}
70+
as-split-area.as-min.as-max {
71+
background: purple;
72+
}
73+
as-split-area.as-min.as-max .txt-minmax {
74+
opacity: 1;
75+
}
6076
`],
6177
template: `
6278
{{ testChangeDetectorRun() }}
6379
<div class="container">
6480
<sp-example-title [type]="exampleEnum.MINMAX"></sp-example-title>
6581
<h5>Percent mode:</h5>
6682
<div class="split-example">
67-
<as-split unit="percent" [direction]="direction" gutterSize="30" (dragEnd)="log($event)">
83+
<as-split unit="percent" [restrictMove]="restrictMove" [direction]="direction" gutterSize="30" (dragEnd)="log($event)">
6884
<as-split-area size="30" minSize="20" maxSize="30">
6985
<p>size="30"<br>minSize="20"<br>maxSize="30"</p>
7086
<div class="txt-min"><p>MIN</p></div>
@@ -84,7 +100,7 @@ import { AComponent } from './AComponent';
84100
</div>
85101
<h5>Pixel mode:</h5>
86102
<div class="split-example">
87-
<as-split unit="pixel" [direction]="direction" gutterSize="30" (dragEnd)="log($event)">
103+
<as-split unit="pixel" [restrictMove]="restrictMove" [direction]="direction" gutterSize="30" (dragEnd)="log($event)">
88104
<as-split-area size="200" minSize="100" maxSize="200">
89105
<p>size="200"<br>minSize="100"<br>maxSize="200"</p>
90106
<div class="txt-min"><p>MIN</p></div>
@@ -95,16 +111,25 @@ import { AComponent } from './AComponent';
95111
<div class="txt-min"><p>MIN</p></div>
96112
<div class="txt-max"><p>MAX</p></div>
97113
</as-split-area>
114+
<as-split-area size="80" minSize="80" maxSize="80">
115+
<p>size="80"<br>minSize="80"<br>maxSize="80"</p>
116+
<div class="txt-minmax"><p>MIN<br>&<br>MAX</p></div>
117+
</as-split-area>
98118
<as-split-area size="250" minSize="250" maxSize="400">
99119
<p>size="250"<br>minSize="250"<br>maxSize="400"</p>
100120
<div class="txt-min"><p>MIN</p></div>
101121
<div class="txt-max"><p>MAX</p></div>
102122
</as-split-area>
103123
</as-split>
104124
</div>
125+
<br>
126+
<div class="btns">
127+
<button class="btn btn-warning" (click)="restrictMove = restrictMove ? false : true">{{ 'Restrict move: "' + restrictMove + '"' }}</button>
128+
</div>
105129
</div>`
106130
})
107131
export class MinMaxComponent extends AComponent {
132+
restrictMove: boolean = false
108133

109134
//
110135
log(x) {

0 commit comments

Comments
 (0)