Skip to content

Commit ec312f0

Browse files
bertrandgbertrandg
committed
[WIP] Percent mode: maxSize is now working
1 parent f9355ee commit ec312f0

4 files changed

Lines changed: 36 additions & 28 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.1",
3+
"version": "3.0.0-beta.2",
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: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -515,10 +515,10 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
515515
if(areasBefore.remain !== 0 && areasAfter.remain !== 0) {
516516
console.log('Case AAA > before=', areasBefore, ' - after=', areasAfter)
517517
if(Math.abs(areasBefore.remain) > Math.abs(areasAfter.remain)) {
518-
518+
areasAfter = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasAfterGutter, steppedOffset + areasBefore.remain, this.snapshot.allAreasSizePixel);
519519
}
520520
else {
521-
521+
areasBefore = getGutterSideAbsorptionCapacity(this.unit, this.snapshot.areasBeforeGutter, -(steppedOffset - areasAfter.remain), this.snapshot.allAreasSizePixel);
522522
}
523523
}
524524
// Areas before gutter can't absorbs all offset > need to recalculate sizes for areas after gutter.
@@ -533,22 +533,24 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
533533
}
534534

535535
// Hack to force total === 100
536-
if(this.unit === 'percent') {
537-
// get first area not at min/max and set size to 100-allAreaSizes
538-
const areaToReset = this.displayedAreas.find(a => a.size !== 0 && a.size !== a.minSize && a.size !== a.maxSize);
539-
540-
areaToReset.size = 100 - this.displayedAreas.filter(a => a !== areaToReset).reduce((total, a) => total+a.size, 0);
536+
// get first area not at min/max and set size to total-allAreaSizes
537+
const areaToReset = this.displayedAreas.find(a => a.size !== 0 && a.size !== a.minSize && a.size !== a.maxSize);
538+
539+
if(areaToReset) {
540+
if(this.unit === 'percent') {
541+
areaToReset.size = 100 - this.displayedAreas.filter(a => a !== areaToReset).reduce((total, a) => total+a.size, 0);
542+
}
543+
if(this.unit === 'pixel') {
544+
areaToReset.size = this.snapshot.allAreasSizePixel - this.displayedAreas.filter(a => a !== areaToReset).reduce((total, a) => total+a.size, 0);
545+
}
541546
}
542-
543-
544-
const tt = [...areasBefore.list.map(a=>a.percentAfterAbsorption), ...areasAfter.list.map(a=>a.percentAfterAbsorption)].reduce((t,s)=>t+s, 0);
545-
if(tt !== 100) debugger;
546-
547+
547548
// Now we know areas could absorb steppedOffset, time to really update sizes
548-
549+
549550
areasBefore.list.forEach(item => updateAreaSize(this.unit, item));
550551
areasAfter.list.forEach(item => updateAreaSize(this.unit, item));
551-
552+
console.log(this.displayedAreas.map(a=>a.size), this.displayedAreas.map(a=>a.size).reduce((t,s)=>t+s, 0))
553+
552554
this.refreshStyleSizes();
553555
this.notify('progress', this.snapshot.gutterNum);
554556
}

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

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ function getAreaAbsorptionCapacity(unit: 'percent' | 'pixel', areaSnapshot: IAre
6363
return {
6464
areaSnapshot,
6565
pixelAbsorb: 0,
66-
percentAfterAbsorption: areaSnapshot.sizePercentAtStart,
66+
percentAfterAbsorption: round(areaSnapshot.sizePercentAtStart),
6767
pixelRemain: 0,
6868
};
6969
}
@@ -90,25 +90,25 @@ function getAreaAbsorptionCapacity(unit: 'percent' | 'pixel', areaSnapshot: IAre
9090
function getAreaAbsorptionCapacityPercent(areaSnapshot: IAreaSnapshot, pixels: number, allAreasSizePixel: number): IAreaAbsorptionCapacity {
9191
const tempPixelSize = areaSnapshot.sizePixelAtStart + pixels;
9292
const tempPercentSize = tempPixelSize / allAreasSizePixel * 100;
93-
93+
9494
// ENLARGE AREA
95-
95+
9696
if(pixels > 0) {
9797
// If maxSize & newSize bigger than it > absorb to max and return remaining pixels
9898
if(areaSnapshot.area.maxSize !== null && tempPercentSize > areaSnapshot.area.maxSize) {
9999
// Use area.area.maxSize as newPercentSize and return calculate pixels remaining
100-
const maxPixelAbsorb = areaSnapshot.sizePixelAtStart * areaSnapshot.area.maxSize / areaSnapshot.sizePercentAtStart;
100+
const maxSizePixel = areaSnapshot.area.maxSize / 100 * allAreasSizePixel;
101101
return {
102102
areaSnapshot,
103-
pixelAbsorb: maxPixelAbsorb,
104-
percentAfterAbsorption: (areaSnapshot.sizePixelAtStart + maxPixelAbsorb) / areaSnapshot.sizePixelAtStart * areaSnapshot.sizePercentAtStart,
105-
pixelRemain: pixels - maxPixelAbsorb
103+
pixelAbsorb: maxSizePixel,
104+
percentAfterAbsorption: round(areaSnapshot.area.maxSize),
105+
pixelRemain: areaSnapshot.sizePixelAtStart + pixels - maxSizePixel
106106
};
107107
}
108108
return {
109109
areaSnapshot,
110110
pixelAbsorb: pixels,
111-
percentAfterAbsorption: tempPercentSize > 100 ? 100 : tempPercentSize,
111+
percentAfterAbsorption: round(tempPercentSize > 100 ? 100 : tempPercentSize),
112112
pixelRemain: 0
113113
};
114114
}
@@ -123,7 +123,7 @@ function getAreaAbsorptionCapacityPercent(areaSnapshot: IAreaSnapshot, pixels: n
123123
return {
124124
areaSnapshot,
125125
pixelAbsorb: minSizePixel,
126-
percentAfterAbsorption: areaSnapshot.area.minSize,
126+
percentAfterAbsorption: round(areaSnapshot.area.minSize),
127127
pixelRemain: areaSnapshot.sizePixelAtStart + pixels - minSizePixel
128128
};
129129
}
@@ -140,7 +140,7 @@ function getAreaAbsorptionCapacityPercent(areaSnapshot: IAreaSnapshot, pixels: n
140140
return {
141141
areaSnapshot,
142142
pixelAbsorb: pixels,
143-
percentAfterAbsorption: tempPercentSize,
143+
percentAfterAbsorption: round(tempPercentSize),
144144
pixelRemain: 0
145145
};
146146
}
@@ -216,3 +216,7 @@ export function updateAreaSize(unit: 'percent' | 'pixel', item: IAreaAbsorptionC
216216

217217
return Boolean(item.pixelRemain > 0);
218218
}
219+
220+
function round(v: number): number {
221+
return Math.round(v * 1000) / 1000;
222+
}

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { AComponent } from './AComponent';
1818
}
1919
as-split-area {
2020
background: lightblue;
21+
transition: background .2s;
2122
}
2223
as-split-area.as-min {
2324
background: green;
@@ -31,14 +32,14 @@ import { AComponent } from './AComponent';
3132
<div class="container">
3233
<sp-example-title [type]="exampleEnum.SIMPLE"></sp-example-title>
3334
<div class="split-example">
34-
<as-split [direction]="direction" gutterSize="85" (dragEnd)="log($event)">
35-
<as-split-area size="30" minSize="20">
35+
<as-split [direction]="direction" gutterSize="9" (dragEnd)="log($event)">
36+
<as-split-area size="30" minSize="20" maxSize="30">
3637
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
3738
</as-split-area>
3839
<as-split-area size="40" minSize="30">
3940
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
4041
</as-split-area>
41-
<as-split-area size="30" minSize="10">
42+
<as-split-area size="30" minSize="10" maxSize="50">
4243
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
4344
</as-split-area>
4445
</as-split>
@@ -52,6 +53,7 @@ import { AComponent } from './AComponent';
5253
export class SimpleComponent extends AComponent {
5354
direction: string = 'horizontal'
5455

56+
//
5557
log(x) {
5658
if(x.sizes.includes('*')) { debugger; }
5759
console.log('dragEnd ', x.sizes, ' total > ', x.sizes.reduce((t, s) => t+s, 0))

0 commit comments

Comments
 (0)