diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index 700afc03..763f307e 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -29,6 +29,7 @@ import { getElementPixelSize, getGutterSideAbsorptionCapacity, updateAreaSize, + getAreaSize, } from '../utils' /** @@ -366,7 +367,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { if (resetSizes === true) { const useUserSizes = isUserSizesValid( this.unit, - this.displayedAreas.map((a) => a.component.size), + this.displayedAreas.map((a) => getAreaSize(a.component.size)), ) switch (this.unit) { @@ -527,10 +528,11 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } this.displayedAreas.forEach((area) => { + const size = getAreaSize(area.size) const areaSnapshot: IAreaSnapshot = { area, sizePixelAtStart: getElementPixelSize(area.component.elRef, this.direction), - sizePercentAtStart: this.unit === 'percent' ? area.size : -1, // If pixel mode, anyway, will not be used. + sizePercentAtStart: this.unit === 'percent' ? size : -1, // If pixel mode, anyway, will not be used. } if (area.order < gutterOrder) { diff --git a/projects/angular-split/src/lib/directive/split-area.directive.ts b/projects/angular-split/src/lib/directive/split-area.directive.ts index d5bfd41b..144b795c 100644 --- a/projects/angular-split/src/lib/directive/split-area.directive.ts +++ b/projects/angular-split/src/lib/directive/split-area.directive.ts @@ -1,6 +1,7 @@ import { Directive, ElementRef, Input, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core' import { SplitComponent } from '../component/split.component' +import { IAreaSize } from '../interface' import { getInputBoolean, getInputPositiveNumber } from '../utils' @Directive({ @@ -20,15 +21,15 @@ export class SplitAreaDirective implements OnInit, OnDestroy { return this._order } - private _size: number | null = null + private _size: IAreaSize = null - @Input() set size(v: number | null) { + @Input() set size(v: IAreaSize) { this._size = getInputPositiveNumber(v, null) this.split.updateArea(this, false, true) } - get size(): number | null { + get size(): IAreaSize { return this._size } diff --git a/projects/angular-split/src/lib/interface.ts b/projects/angular-split/src/lib/interface.ts index 13e23aba..ba229e4e 100644 --- a/projects/angular-split/src/lib/interface.ts +++ b/projects/angular-split/src/lib/interface.ts @@ -5,13 +5,15 @@ export interface IPoint { y: number } +export type IAreaSize = number | '*' + export interface IArea { component: SplitAreaDirective order: number - size: number | null - minSize: number | null - maxSize: number | null - sizeBeforeCollapse: number | null + size: IAreaSize + minSize: IAreaSize + maxSize: IAreaSize + sizeBeforeCollapse: IAreaSize gutterBeforeCollapse: number } @@ -53,4 +55,4 @@ export interface IOutputData { sizes: IOutputAreaSizes } -export interface IOutputAreaSizes extends Array {} +export interface IOutputAreaSizes extends Array {} diff --git a/projects/angular-split/src/lib/utils.ts b/projects/angular-split/src/lib/utils.ts index 5b943b26..d2ea7832 100644 --- a/projects/angular-split/src/lib/utils.ts +++ b/projects/angular-split/src/lib/utils.ts @@ -1,6 +1,13 @@ import { ElementRef } from '@angular/core' -import { IArea, IPoint, IAreaSnapshot, ISplitSideAbsorptionCapacity, IAreaAbsorptionCapacity } from './interface' +import { + IArea, + IAreaAbsorptionCapacity, + IAreaSize, + IAreaSnapshot, + IPoint, + ISplitSideAbsorptionCapacity, +} from './interface' export function getPointFromEvent(event: MouseEvent | TouchEvent): IPoint { // TouchEvent @@ -40,7 +47,7 @@ export function getInputPositiveNumber(v: any, defaultValue: T): number | T { export function isUserSizesValid(unit: 'percent' | 'pixel', sizes: Array): boolean { // All sizes have to be not null and total should be 100 if (unit === 'percent') { - const total = sizes.reduce((total, s) => (s !== null ? total + s : total), 0) + const total = sizes.reduce((acc, curr) => (curr !== null ? acc + curr : acc), 0) return sizes.every((s) => s !== null) && total > 99.9 && total < 100.1 } @@ -50,7 +57,7 @@ export function isUserSizesValid(unit: 'percent' | 'pixel', sizes: Array 0) { // If maxSize & newSize bigger than it > absorb to max and return remaining pixels - if (areaSnapshot.area.maxSize !== null && tempPercentSize > areaSnapshot.area.maxSize) { + if (maxSize !== null && tempPercentSize > maxSize) { // Use area.area.maxSize as newPercentSize and return calculate pixels remaining - const maxSizePixel = (areaSnapshot.area.maxSize / 100) * allAreasSizePixel + const maxSizePixel = (maxSize / 100) * allAreasSizePixel return { areaSnapshot, pixelAbsorb: maxSizePixel, - percentAfterAbsorption: areaSnapshot.area.maxSize, + percentAfterAbsorption: maxSize, pixelRemain: areaSnapshot.sizePixelAtStart + pixels - maxSizePixel, } } @@ -175,13 +184,13 @@ function getAreaAbsorptionCapacityPercent( // REDUCE AREA else if (pixels < 0) { // If minSize & newSize smaller than it > absorb to min and return remaining pixels - if (areaSnapshot.area.minSize !== null && tempPercentSize < areaSnapshot.area.minSize) { + if (minSize !== null && tempPercentSize < minSize) { // Use area.area.minSize as newPercentSize and return calculate pixels remaining - const minSizePixel = (areaSnapshot.area.minSize / 100) * allAreasSizePixel + const minSizePixel = (minSize / 100) * allAreasSizePixel return { areaSnapshot, pixelAbsorb: minSizePixel, - percentAfterAbsorption: areaSnapshot.area.minSize, + percentAfterAbsorption: minSize, pixelRemain: areaSnapshot.sizePixelAtStart + pixels - minSizePixel, } } @@ -210,17 +219,19 @@ function getAreaAbsorptionCapacityPixel( containerSizePixel: number, ): IAreaAbsorptionCapacity { const tempPixelSize = areaSnapshot.sizePixelAtStart + pixels + const maxSize = getAreaSize(areaSnapshot.area.maxSize) + const minSize = getAreaSize(areaSnapshot.area.minSize) // ENLARGE AREA if (pixels > 0) { // If maxSize & newSize bigger than it > absorb to max and return remaining pixels - if (areaSnapshot.area.maxSize !== null && tempPixelSize > areaSnapshot.area.maxSize) { + if (maxSize !== null && tempPixelSize > maxSize) { return { areaSnapshot, - pixelAbsorb: areaSnapshot.area.maxSize - areaSnapshot.sizePixelAtStart, + pixelAbsorb: maxSize - areaSnapshot.sizePixelAtStart, percentAfterAbsorption: -1, - pixelRemain: tempPixelSize - areaSnapshot.area.maxSize, + pixelRemain: tempPixelSize - maxSize, } } return { @@ -234,12 +245,12 @@ function getAreaAbsorptionCapacityPixel( // REDUCE AREA else if (pixels < 0) { // If minSize & newSize smaller than it > absorb to min and return remaining pixels - if (areaSnapshot.area.minSize !== null && tempPixelSize < areaSnapshot.area.minSize) { + if (minSize !== null && tempPixelSize < minSize) { return { areaSnapshot, - pixelAbsorb: areaSnapshot.area.minSize + pixels - tempPixelSize, + pixelAbsorb: minSize + pixels - tempPixelSize, percentAfterAbsorption: -1, - pixelRemain: tempPixelSize - areaSnapshot.area.minSize, + pixelRemain: tempPixelSize - minSize, } } // If reduced under zero > return remaining pixels @@ -270,3 +281,7 @@ export function updateAreaSize(unit: 'percent' | 'pixel', item: IAreaAbsorptionC } } } + +export function getAreaSize(size: IAreaSize): number { + return size === '*' ? -1 : size +} diff --git a/src/app/documentation/documentation.component.ts b/src/app/documentation/documentation.component.ts index 042e0b06..b0367bce 100644 --- a/src/app/documentation/documentation.component.ts +++ b/src/app/documentation/documentation.component.ts @@ -168,7 +168,7 @@ export class DocumentationComponent { }, { name: 'size', - type: "number|'*'", + type: `number|'*'`, default: '-', details: `Size of the area in selected unit (percent/pixel).
Percent mode: All areas sizes should equal to 100, If not, all areas will have the same size.
Pixel mode: An area with wildcard size ([size]="'*'") is mandatory (only one) and can't have [visible]="false" or minSize/maxSize/lockSize properties.`, }, diff --git a/src/app/examples/dir-rtl/dir-rtl.component.ts b/src/app/examples/dir-rtl/dir-rtl.component.ts index 136dba8c..a2300cf6 100644 --- a/src/app/examples/dir-rtl/dir-rtl.component.ts +++ b/src/app/examples/dir-rtl/dir-rtl.component.ts @@ -24,14 +24,14 @@ import { AComponent } from '../../ui/components/AComponent'
- +

1. 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.

- +

2. 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 @@ -43,7 +43,7 @@ import { AComponent } from '../../ui/components/AComponent' illum qui dolorem eum fugiat quo voluptas nulla pariatur?

- +

3. 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 diff --git a/src/app/examples/iframes/iframes.component.ts b/src/app/examples/iframes/iframes.component.ts index 842351e9..76fdaa20 100644 --- a/src/app/examples/iframes/iframes.component.ts +++ b/src/app/examples/iframes/iframes.component.ts @@ -39,13 +39,13 @@ import { AComponent } from '../../ui/components/AComponent' (dragEnd)="dragEndHandler($event)" (gutterClick)="splitGutterClick($event)" > - +

- +
diff --git a/src/app/examples/min-max-split/min-max-split.component.ts b/src/app/examples/min-max-split/min-max-split.component.ts index 024614bc..0b1c0908 100644 --- a/src/app/examples/min-max-split/min-max-split.component.ts +++ b/src/app/examples/min-max-split/min-max-split.component.ts @@ -81,18 +81,18 @@ import { AComponent } from '../../ui/components/AComponent'
Percent mode:
- -

size="30"
minSize="20"
maxSize="30"

+ +

[size]="30"
minSize="20"
maxSize="30"

MIN

MAX

 - -

size="40"
minSize="30"
maxSize="50"

+ +

[size]="40"
minSize="30"
maxSize="50"

MIN

MAX

 - -

size="30"
minSize="20"
maxSize="50"

+ +

[size]="30"
minSize="20"
maxSize="50"

MIN

MAX

 @@ -101,8 +101,8 @@ import { AComponent } from '../../ui/components/AComponent'
Pixel mode:
- -

size="200"
minSize="100"
maxSize="200"

+ +

[size]="200"
minSize="100"
maxSize="200"

MIN

MAX

 @@ -111,14 +111,14 @@ import { AComponent } from '../../ui/components/AComponent'

MIN

MAX

 - -

size="150"
lockSize="true"

Same as
minSize="150"
maxSize="150"

+ +

[size]="150"
lockSize="true"

Same as
minSize="150"
maxSize="150"

MIN
&
MAX

 - -

size="250"
minSize="250"
maxSize="400"

+ +

size="*"
minSize="250"
maxSize="400"

MIN

MAX

 diff --git a/src/app/examples/nested-split/nested-split.component.ts b/src/app/examples/nested-split/nested-split.component.ts index 4953cff7..f61ecb49 100644 --- a/src/app/examples/nested-split/nested-split.component.ts +++ b/src/app/examples/nested-split/nested-split.component.ts @@ -14,7 +14,7 @@ import { AComponent } from '../../ui/components/AComponent'
- +

@@ -44,16 +44,16 @@ import { AComponent } from '../../ui/components/AComponent' - + - +

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.

- +

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 diff --git a/src/app/examples/simple-split/simple-split.component.ts b/src/app/examples/simple-split/simple-split.component.ts index 60b91068..e10ccb8a 100644 --- a/src/app/examples/simple-split/simple-split.component.ts +++ b/src/app/examples/simple-split/simple-split.component.ts @@ -26,7 +26,7 @@ import { AComponent } from '../../ui/components/AComponent'

Percent mode:
- +
Initial size: 30%
Current size: {{ sizes.percent.area1 }}% @@ -37,7 +37,7 @@ import { AComponent } from '../../ui/components/AComponent' voluptate velit esse cillum dolore eu fugiat nulla pariatur.

- +
Initial size: 70%
Current size: {{ sizes.percent.area2 }}% @@ -58,7 +58,7 @@ import { AComponent } from '../../ui/components/AComponent'
Pixel mode:
- +
Initial size: 120px
Current size: {{ sizes.pixel.area1 }}px @@ -84,7 +84,7 @@ import { AComponent } from '../../ui/components/AComponent' illum qui dolorem eum fugiat quo voluptas nulla pariatur?

- +
Initial size: 160px
Current size: {{ sizes.pixel.area3 }}px diff --git a/src/app/examples/split-transitions/split-transitions.component.ts b/src/app/examples/split-transitions/split-transitions.component.ts index ff701c21..b356f8da 100644 --- a/src/app/examples/split-transitions/split-transitions.component.ts +++ b/src/app/examples/split-transitions/split-transitions.component.ts @@ -166,7 +166,7 @@ import { formatDate } from '../../utils/format-date'
- +

size: 200px
minSize: 200px

 @@ -176,7 +176,7 @@ import { formatDate } from '../../utils/format-date'

size: *

 - +

size: 200px
minSize: 200px

 @@ -184,17 +184,17 @@ import { formatDate } from '../../utils/format-date'
- +

size: 30%
minSize: 30%

 - +

size: 40%

 - +

size: 30%
minSize: 30%

 @@ -212,26 +212,26 @@ import { formatDate } from '../../utils/format-date'
- +

A
size: 200px
minSize: 200px

B
size: *

 - +

C
size: 200px
minSize: 200px
- +

A
size: 30%
minSize: 30%

 - +

B
size: 40%

 - +

C
size: 30%
minSize: 30%

 diff --git a/src/app/examples/sync-split/sync-split.component.ts b/src/app/examples/sync-split/sync-split.component.ts index 0488116b..b38e6c4a 100644 --- a/src/app/examples/sync-split/sync-split.component.ts +++ b/src/app/examples/sync-split/sync-split.component.ts @@ -18,19 +18,19 @@ import { formatDate } from '../../utils/format-date'
-
+
A 1
A 2
-
+
B 1
B 2
- + C 1