Skip to content

Commit 642c7ab

Browse files
bertrandgbertrandg
committed
Add [lockSize]="boolean" to split-area
1 parent 3d99266 commit 642c7ab

5 files changed

Lines changed: 67 additions & 16 deletions

File tree

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

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { debounceTime } from 'rxjs/operators';
44

55
import { IArea, IPoint, ISplitSnapshot, IAreaSnapshot, IOutputData, IOutputAreaSizes } from '../interface';
66
import { SplitAreaDirective } from '../directive/splitArea.directive';
7-
import { getInputPositiveNumber, getInputBoolean, isUserSizesValid, getPointFromEvent, getElementPixelSize, getGutterSideAbsorptionCapacity, updateAreaSize } from '../utils';
7+
import { getInputPositiveNumber, getInputBoolean, isUserSizesValid, getAreaMinSize, getAreaMaxSize, getPointFromEvent, getElementPixelSize, getGutterSideAbsorptionCapacity, updateAreaSize } from '../utils';
88

99
/**
1010
* angular-split
@@ -349,21 +349,17 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
349349

350350
this.displayedAreas.forEach(area => {
351351
area.size = useUserSizes ? <number> area.component.size : defaultSize;
352-
353-
// Set min/max to area.size if size provided 'less than min'/'more than max'
354-
area.minSize = (area.component.minSize === null) ? null : (area.component.minSize > area.size ? area.size : area.component.minSize);
355-
area.maxSize = (area.component.maxSize === null) ? null : (area.component.maxSize < area.size ? area.size : area.component.maxSize);
352+
area.minSize = getAreaMinSize(area);
353+
area.maxSize = getAreaMaxSize(area);
356354
});
357355
break;
358356
}
359357
case 'pixel': {
360358
if(useUserSizes) {
361359
this.displayedAreas.forEach(area => {
362360
area.size = area.component.size;
363-
364-
// Set min/max to area.size if size provided 'less than min'/'more than max'
365-
area.minSize = (area.component.minSize === null) ? null : (area.size !== null && area.component.minSize > area.size ? area.size : area.component.minSize);
366-
area.maxSize = (area.component.maxSize === null) ? null : (area.size !== null && area.component.maxSize < area.size ? area.size : area.component.maxSize);
361+
area.minSize = getAreaMinSize(area);
362+
area.maxSize = getAreaMaxSize(area);
367363
});
368364
}
369365
else {

‎projects/angular-split/src/lib/directive/splitArea.directive.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,20 @@ export class SplitAreaDirective implements OnInit, OnDestroy {
6464

6565
////
6666

67+
private _lockSize: boolean = false;
68+
69+
@Input() set lockSize(v: boolean) {
70+
this._lockSize = getInputBoolean(v);
71+
72+
this.split.updateArea(this, false, true);
73+
}
74+
75+
get lockSize(): boolean {
76+
return this._lockSize;
77+
}
78+
79+
////
80+
6781
private _visible: boolean = true;
6882

6983
@Input() set visible(v: boolean) {

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

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

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

55
export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint {
66
// TouchEvent
@@ -50,6 +50,46 @@ export function isUserSizesValid(unit: 'percent' | 'pixel', sizes: Array<number
5050
}
5151
}
5252

53+
export function getAreaMinSize(a: IArea): null | number {
54+
if(a.size === null) {
55+
return null;
56+
}
57+
58+
if(a.component.lockSize === true) {
59+
return a.size;
60+
}
61+
62+
if(a.component.minSize === null) {
63+
return null;
64+
}
65+
66+
if(a.component.minSize > a.size) {
67+
return a.size;
68+
}
69+
70+
return a.component.minSize;
71+
}
72+
73+
export function getAreaMaxSize(a: IArea): null | number {
74+
if(a.size === null) {
75+
return null;
76+
}
77+
78+
if(a.component.lockSize === true) {
79+
return a.size;
80+
}
81+
82+
if(a.component.maxSize === null) {
83+
return null;
84+
}
85+
86+
if(a.component.maxSize < a.size) {
87+
return a.size;
88+
}
89+
90+
return a.component.maxSize;
91+
}
92+
5393
export function getGutterSideAbsorptionCapacity(unit: 'percent' | 'pixel', sideAreas: Array<IAreaSnapshot>, pixels: number, allAreasSizePixel: number): ISplitSideAbsorptionCapacity {
5494
return sideAreas.reduce((acc, area) => {
5595
const res = getAreaAbsorptionCapacity(unit, area, acc.remain, allAreasSizePixel);

‎src_app/app/component/doc/doc.route.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@ export class DocComponent {
3939
{name: 'gutterStep', type: 'number', default: '1', details: `Gutter step while moving in pixels.`},
4040
{name: 'restrictMove', type: 'boolean', default: 'false', details: 'Set to <code>true</code> if you want to limit gutter move to adjacent areas.'},
4141
{name: 'disabled', type: 'boolean', default: 'false', details: 'Disable the dragging feature (remove cursor/image on gutters). <code>(gutterClick)</code> still emits.'},
42-
{name: 'useTransition', type: 'boolean', default: 'false', details: 'Add transition when toggling visibility using <code>[visible]</code> or <code>[size]</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>'},
4342
{name: 'dir', type: 'string', default: '"ltr"', details: 'Indicates the directionality of the areas: <code>"ltr"</code> (left to right) or <code>"rtl"</code> (right to left).'},
43+
{name: 'useTransition', type: 'boolean', default: 'false', details: 'Add transition when toggling visibility using <code>[visible]</code> or <code>[size]</code>.<br><u>Warning: Transitions are not working for <a href="https://github.com/philipwalton/flexbugs#flexbug-16">IE/Edge/Safari</a></u>'},
4444
],
4545
outputs: [
4646
{name: 'dragStart', value: '{gutterNum: number, sizes: Array<number>}', details: 'Emit when drag starts.'},
@@ -57,7 +57,7 @@ export class DocComponent {
5757

5858
readonly splitAreaDoc = {
5959
inputs: [
60-
{name: 'size', type: 'number', default: '-', details: `Size of the area in selected unit (<code>percent</code>/<code>pixel</code>).<br>Percent mode: If not provided or if all areas sizes not equal to 100, all areas will have the same size.<br>Pixel mode: An area with <code>[size]="'*'"</code> is mandatory (only one) and can't have <code>minSize</code>/<code>maxSize</code>/<code>lockSize</code>.`},
60+
{name: 'size', type: 'number', default: '-', details: `Size of the area in selected unit (<code>percent</code>/<code>pixel</code>).<br><u>Percent mode:</u> If not provided or if all areas sizes not equal to 100, all areas will have the same size.<br><u>Pixel mode:</u> An area with <code>[size]="'*'"</code> is mandatory (only one) and can't have <code>minSize</code>/<code>maxSize</code>/<code>lockSize</code>.`},
6161
{name: 'minSize', type: 'number', default: 'null', details: 'Minimum pixel or percent size, can\'t be smaller than provided <code>size</code>.'},
6262
{name: 'maxSize', type: 'number', default: 'null', details: 'Maximum pixel or percent size, can\'t be bigger than provided <code>size</code>.'},
6363
{name: 'lockSize', type: 'boolean', default: 'false', details: 'Lock area size, same as <code>minSize</code> = <code>maxSize</code> = <code>size</code>.'},

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ import { AComponent } from './AComponent';
5353
font-size: 12px;
5454
font-weight: bold;
5555
padding: 5px;
56+
line-height: 12px;
5657
}
5758
5859
as-split-area.as-min {
@@ -80,7 +81,7 @@ import { AComponent } from './AComponent';
8081
<sp-example-title [type]="exampleEnum.MINMAX"></sp-example-title>
8182
<h5>Percent mode:</h5>
8283
<div class="split-example">
83-
<as-split unit="percent" [restrictMove]="restrictMove" [direction]="direction" gutterSize="30" (dragEnd)="log($event)">
84+
<as-split unit="percent" [restrictMove]="restrictMove" gutterSize="30" (dragEnd)="log($event)">
8485
<as-split-area size="30" minSize="20" maxSize="30">
8586
<p>size="30"<br>minSize="20"<br>maxSize="30"</p>
8687
<div class="txt-min"><p>MIN</p></div>
@@ -100,7 +101,7 @@ import { AComponent } from './AComponent';
100101
</div>
101102
<h5>Pixel mode:</h5>
102103
<div class="split-example">
103-
<as-split unit="pixel" [restrictMove]="restrictMove" [direction]="direction" gutterSize="30" (dragEnd)="log($event)">
104+
<as-split unit="pixel" [restrictMove]="restrictMove" gutterSize="30" (dragEnd)="log($event)">
104105
<as-split-area size="200" minSize="100" maxSize="200">
105106
<p>size="200"<br>minSize="100"<br>maxSize="200"</p>
106107
<div class="txt-min"><p>MIN</p></div>
@@ -111,8 +112,8 @@ import { AComponent } from './AComponent';
111112
<div class="txt-min"><p>MIN</p></div>
112113
<div class="txt-max"><p>MAX</p></div>
113114
</as-split-area>
114-
<as-split-area size="80" minSize="80" maxSize="80">
115-
<p>size="80"<br>minSize="80"<br>maxSize="80"</p>
115+
<as-split-area size="150" lockSize="true">
116+
<p>size="150"<br>lockSize="true"<br><br>Same as<br>minSize="150"<br>maxSize="150"</p>
116117
<div class="txt-minmax"><p>MIN<br>&<br>MAX</p></div>
117118
</as-split-area>
118119
<as-split-area size="250" minSize="250" maxSize="400">

0 commit comments

Comments
 (0)