Skip to content

Commit 5d74654

Browse files
bertrandgbertrandg
committed
rc0: pixel mode > correct when missing/toomany wildcard area / update how flex styles seeted
1 parent 9be7eaa commit 5d74654

3 files changed

Lines changed: 74 additions & 36 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.9",
3+
"version": "3.0.0-rc.0",
44
"description": "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.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
/* When <as-split-area [visible]="false"> force size to 0. */
3434

3535
&.as-hidden {
36-
flex-basis: 0 !important;
36+
flex: 0 1 0 !important;
3737
overflow-x: hidden;
3838
overflow-y: hidden;
3939
}

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

Lines changed: 72 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -369,13 +369,39 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
369369
else {
370370
const wildcardSizeAreas = this.displayedAreas.filter(a => a.component.size === null);
371371

372-
// No wildcard area > Need to select one arbitrarily
373-
if(wildcardSizeAreas.length === 0) {
374-
372+
// No wildcard area > Need to select one arbitrarily > first
373+
if(wildcardSizeAreas.length === 0 && this.displayedAreas.length > 0) {
374+
375+
this.displayedAreas.forEach((area, i) => {
376+
area.size = (i === 0) ? null : area.component.size;
377+
area.minSize = (i === 0) ? null : getAreaMinSize(area);
378+
area.maxSize = (i === 0) ? null : getAreaMaxSize(area);
379+
});
375380
}
376-
// More than one wildcard area > Need to keep only one arbitrarily
381+
// More than one wildcard area > Need to keep only one arbitrarly > first
377382
else if(wildcardSizeAreas.length > 1) {
378-
383+
384+
let alreadyGotOne = false;
385+
this.displayedAreas.forEach(area => {
386+
if(area.component.size === null) {
387+
if(alreadyGotOne === false) {
388+
area.size = null;
389+
area.minSize = null;
390+
area.maxSize = null;
391+
alreadyGotOne = true;
392+
}
393+
else {
394+
area.size = 100;
395+
area.minSize = null;
396+
area.maxSize = null;
397+
}
398+
}
399+
else {
400+
area.size = area.component.size;
401+
area.minSize = getAreaMinSize(area);
402+
area.maxSize = getAreaMaxSize(area);
403+
}
404+
});
379405
}
380406
}
381407
break;
@@ -388,41 +414,53 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
388414
}
389415

390416
private refreshStyleSizes(): void {
391-
if(this.displayedAreas.length === 1) {
392-
this.displayedAreas[0].component.setStyleFlex(0, 0, `100%`, false, false);
393-
}
394-
else if(this.unit === 'percent') {
395-
const sumGutterSize = this.getNbGutters() * this.gutterSize;
396-
397-
this.displayedAreas.forEach(area => {
398-
area.component.setStyleFlex(
399-
0,
400-
0,
401-
`calc( ${ area.size }% - ${ <number> area.size / 100 * sumGutterSize }px )`,
402-
area.minSize !== null && area.minSize === area.size ? true : false,
403-
area.maxSize !== null && area.maxSize === area.size ? true : false,
404-
);
405-
});
417+
///////////////////////////////////////////
418+
// PERCENT MODE
419+
if(this.unit === 'percent') {
420+
// Only one area > flex-basis 100%
421+
if(this.displayedAreas.length === 1) {
422+
this.displayedAreas[0].component.setStyleFlex(0, 0, `100%`, false, false);
423+
}
424+
// Multiple areas > use each percent basis
425+
else {
426+
const sumGutterSize = this.getNbGutters() * this.gutterSize;
427+
428+
this.displayedAreas.forEach(area => {
429+
area.component.setStyleFlex(
430+
0, 0, `calc( ${ area.size }% - ${ <number> area.size / 100 * sumGutterSize }px )`,
431+
(area.minSize !== null && area.minSize === area.size) ? true : false,
432+
(area.maxSize !== null && area.maxSize === area.size) ? true : false,
433+
);
434+
});
435+
}
406436
}
437+
///////////////////////////////////////////
438+
// PIXEL MODE
407439
else if(this.unit === 'pixel') {
408440
this.displayedAreas.forEach(area => {
441+
// Area with wildcard size
409442
if(area.size === null) {
410-
area.component.setStyleFlex(
411-
1,
412-
1,
413-
`auto`,
414-
area.minSize !== null && area.minSize === area.size ? true : false,
415-
area.maxSize !== null && area.maxSize === area.size ? true : false,
416-
);
443+
if(this.displayedAreas.length === 1) {
444+
area.component.setStyleFlex(1, 1, `100%`, false, false);
445+
}
446+
else {
447+
area.component.setStyleFlex(1, 1, `auto`, false, false);
448+
}
417449
}
450+
// Area with pixel size
418451
else {
419-
area.component.setStyleFlex(
420-
0,
421-
0,
422-
`${ area.size }px`,
423-
area.minSize !== null && area.minSize === area.size ? true : false,
424-
area.maxSize !== null && area.maxSize === area.size ? true : false,
425-
);
452+
// Only one area > flex-basis 100%
453+
if(this.displayedAreas.length === 1) {
454+
area.component.setStyleFlex(0, 0, `100%`, false, false);
455+
}
456+
// Multiple areas > use each pixel basis
457+
else {
458+
area.component.setStyleFlex(
459+
0, 0, `${ area.size }px`,
460+
(area.minSize !== null && area.minSize === area.size) ? true : false,
461+
(area.maxSize !== null && area.maxSize === area.size) ? true : false,
462+
);
463+
}
426464
}
427465
});
428466
}

0 commit comments

Comments
 (0)