Skip to content

fix: correctly type the size property #289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
beeman wants to merge 1 commit into from
Closed

fix: correctly type the size property #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions projects/angular-split/src/lib/component/split.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
getElementPixelSize,
getGutterSideAbsorptionCapacity,
updateAreaSize,
getAreaSize,
} from '../utils'

/**
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down
7 changes: 4 additions & 3 deletions projects/angular-split/src/lib/directive/split-area.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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({
Expand All @@ -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
}

Expand Down
12 changes: 7 additions & 5 deletions projects/angular-split/src/lib/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@ export interface IPoint {
y: number
}

export type IAreaSize = number | '*'
Copy link
Contributor

@lf-novelt lf-novelt Mar 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

weird to prefix a type (not an interface) with the capital I prefix that means Interface :P

Copy link
Collaborator Author

@beeman beeman Mar 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point @lf-novelt - I'm not a fan of the I for interfaces either, it's more a matter of keeping consistency.


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
}

Expand Down Expand Up @@ -53,4 +55,4 @@ export interface IOutputData {
sizes: IOutputAreaSizes
}

export interface IOutputAreaSizes extends Array<number | '*'> {}
export interface IOutputAreaSizes extends Array<IAreaSize> {}
47 changes: 31 additions & 16 deletions projects/angular-split/src/lib/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -40,7 +47,7 @@ export function getInputPositiveNumber<T>(v: any, defaultValue: T): number | T {
export function isUserSizesValid(unit: 'percent' | 'pixel', sizes: Array<number | null>): 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
}

Expand All @@ -50,7 +57,7 @@ export function isUserSizesValid(unit: 'percent' | 'pixel', sizes: Array<number
}
}

export function getAreaMinSize(a: IArea): null | number {
export function getAreaMinSize(a: IArea): IAreaSize {
if (a.size === null) {
return null
}
Expand All @@ -70,7 +77,7 @@ export function getAreaMinSize(a: IArea): null | number {
return a.component.minSize
}

export function getAreaMaxSize(a: IArea): null | number {
export function getAreaMaxSize(a: IArea): IAreaSize {
if (a.size === null) {
return null
}
Expand Down Expand Up @@ -149,18 +156,20 @@ function getAreaAbsorptionCapacityPercent(
): IAreaAbsorptionCapacity {
const tempPixelSize = areaSnapshot.sizePixelAtStart + pixels
const tempPercentSize = (tempPixelSize / allAreasSizePixel) * 100
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 && 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,
}
}
Expand All @@ -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,
}
}
Expand Down Expand Up @@ -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 {
Expand All @@ -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
Expand Down Expand Up @@ -270,3 +281,7 @@ export function updateAreaSize(unit: 'percent' | 'pixel', item: IAreaAbsorptionC
}
}
}

export function getAreaSize(size: IAreaSize): number {
return size === '*' ? -1 : size
}
2 changes: 1 addition & 1 deletion src/app/documentation/documentation.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ export class DocumentationComponent {
},
{
name: 'size',
type: "number|'*'",
type: `number|'*'`,
default: '-',
details: `Size of the area in selected unit (<code>percent</code>/<code>pixel</code>).<br><u>Percent mode:</u> All areas sizes should equal to 100, If not, all areas will have the same size.<br><u>Pixel mode:</u> An area with wildcard size (<code>[size]="'*'"</code>) is mandatory (only one) and can't have <code>[visible]="false"</code> or <code>minSize</code>/<code>maxSize</code>/<code>lockSize</code> properties.`,
},
Expand Down
6 changes: 3 additions & 3 deletions src/app/examples/dir-rtl/dir-rtl.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,14 @@ import { AComponent } from '../../ui/components/AComponent'
<sp-example-title [type]="exampleEnum.DIR"></sp-example-title>
<div class="split-example">
<as-split [dir]="dir">
<as-split-area size="20">
<as-split-area [size]="20">
<p>
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.
</p>
</as-split-area>
<as-split-area size="40">
<as-split-area [size]="40">
<p>
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
Expand All @@ -43,7 +43,7 @@ import { AComponent } from '../../ui/components/AComponent'
illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</as-split-area>
<as-split-area size="40">
<as-split-area [size]="40">
<p>
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
Expand Down
4 changes: 2 additions & 2 deletions src/app/examples/iframes/iframes.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,13 @@ import { AComponent } from '../../ui/components/AComponent'
(dragEnd)="dragEndHandler($event)"
(gutterClick)="splitGutterClick($event)"
>
<as-split-area size="40">
<as-split-area [size]="40">
<div>
<iframe src="https://angular-split.github.io" frameborder="0" width="100%" height="100%"></iframe>
<div [hidden]="showIframeHider === false" class="hack-iframe-hider"></div>
</div>
</as-split-area>
<as-split-area size="60">
<as-split-area [size]="60">
<div>
<iframe src="https://angular-split.github.io" frameborder="0" width="100%" height="100%"></iframe>
<div [hidden]="showIframeHider === false" class="hack-iframe-hider"></div>
Expand Down
24 changes: 12 additions & 12 deletions src/app/examples/min-max-split/min-max-split.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,18 +81,18 @@ import { AComponent } from '../../ui/components/AComponent'
<h5>Percent mode:</h5>
<div class="split-example ex-percent">
<as-split unit="percent" [restrictMove]="restrictMove" gutterSize="30" (dragEnd)="log($event)">
<as-split-area size="30" minSize="20" maxSize="30">
<p>size="30"<br />minSize="20"<br />maxSize="30"</p>
<as-split-area [size]="30" minSize="20" maxSize="30">
<p>[size]="30"<br />minSize="20"<br />maxSize="30"</p>
<div class="txt-min"><p>MIN</p></div>
<div class="txt-max"><p>MAX</p></div>
</as-split-area>
<as-split-area size="40" minSize="30" maxSize="50">
<p>size="40"<br />minSize="30"<br />maxSize="50"</p>
<as-split-area [size]="40" minSize="30" maxSize="50">
<p>[size]="40"<br />minSize="30"<br />maxSize="50"</p>
<div class="txt-min"><p>MIN</p></div>
<div class="txt-max"><p>MAX</p></div>
</as-split-area>
<as-split-area size="30" minSize="20" maxSize="50">
<p>size="30"<br />minSize="20"<br />maxSize="50"</p>
<as-split-area [size]="30" minSize="20" maxSize="50">
<p>[size]="30"<br />minSize="20"<br />maxSize="50"</p>
<div class="txt-min"><p>MIN</p></div>
<div class="txt-max"><p>MAX</p></div>
</as-split-area>
Expand All @@ -101,8 +101,8 @@ import { AComponent } from '../../ui/components/AComponent'
<h5>Pixel mode:</h5>
<div class="split-example ex-pixel">
<as-split unit="pixel" [restrictMove]="restrictMove" gutterSize="30" (dragEnd)="log($event)">
<as-split-area size="200" minSize="100" maxSize="200">
<p>size="200"<br />minSize="100"<br />maxSize="200"</p>
<as-split-area [size]="200" minSize="100" maxSize="200">
<p>[size]="200"<br />minSize="100"<br />maxSize="200"</p>
<div class="txt-min"><p>MIN</p></div>
<div class="txt-max"><p>MAX</p></div>
</as-split-area>
Expand All @@ -111,14 +111,14 @@ import { AComponent } from '../../ui/components/AComponent'
<div class="txt-min"><p>MIN</p></div>
<div class="txt-max"><p>MAX</p></div>
</as-split-area>
<as-split-area size="150" lockSize="true">
<p>size="150"<br />lockSize="true"<br /><br />Same as<br />minSize="150"<br />maxSize="150"</p>
<as-split-area [size]="150" lockSize="true">
<p>[size]="150"<br />lockSize="true"<br /><br />Same as<br />minSize="150"<br />maxSize="150"</p>
<div class="txt-minmax">
<p>MIN<br />&<br />MAX</p>
</div>
</as-split-area>
<as-split-area size="250" minSize="250" maxSize="400">
<p>size="250"<br />minSize="250"<br />maxSize="400"</p>
<as-split-area size="*" minSize="250" maxSize="400">
<p>size="*"<br />minSize="250"<br />maxSize="400"</p>
<div class="txt-min"><p>MIN</p></div>
<div class="txt-max"><p>MAX</p></div>
</as-split-area>
Expand Down
8 changes: 4 additions & 4 deletions src/app/examples/nested-split/nested-split.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { AComponent } from '../../ui/components/AComponent'
<sp-example-title [type]="exampleEnum.NESTED"></sp-example-title>
<div class="split-example" style="height: 400px;">
<as-split direction="horizontal" restrictMove="true" [useTransition]="true">
<as-split-area size="40">
<as-split-area [size]="40">
<as-split direction="vertical" restrictMove="true">
<as-split-area>
<p>
Expand Down Expand Up @@ -44,16 +44,16 @@ import { AComponent } from '../../ui/components/AComponent'
</as-split-area>
</as-split>
</as-split-area>
<as-split-area size="60">
<as-split-area [size]="60">
<as-split direction="vertical" restrictMove="true">
<as-split-area size="25">
<as-split-area [size]="25">
<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>
</as-split-area>
<as-split-area size="75">
<as-split-area [size]="75">
<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
Expand Down
8 changes: 4 additions & 4 deletions src/app/examples/simple-split/simple-split.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { AComponent } from '../../ui/components/AComponent'
<h5>Percent mode:</h5>
<div class="split-example ex-percent">
<as-split unit="percent" [direction]="direction" (dragEnd)="dragEnd('percent', $event)" #split="asSplit">
<as-split-area size="30" #area1="asSplitArea">
<as-split-area [size]="30" #area1="asSplitArea">
<h5>Initial size: <b>30%</b></h5>
<h5>
Current size: <b>{{ sizes.percent.area1 }}%</b>
Expand All @@ -37,7 +37,7 @@ import { AComponent } from '../../ui/components/AComponent'
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</as-split-area>
<as-split-area size="70" #area2="asSplitArea">
<as-split-area [size]="70" #area2="asSplitArea">
<h5>Initial size: <b>70%</b></h5>
<h5>
Current size: <b>{{ sizes.percent.area2 }}%</b>
Expand All @@ -58,7 +58,7 @@ import { AComponent } from '../../ui/components/AComponent'
<h5>Pixel mode:</h5>
<div class="split-example ex-pixel">
<as-split unit="pixel" [direction]="direction" (dragEnd)="dragEnd('pixel', $event)">
<as-split-area size="120">
<as-split-area [size]="120">
<h5>Initial size: <b>120px</b></h5>
<h5>
Current size: <b>{{ sizes.pixel.area1 }}px</b>
Expand All @@ -84,7 +84,7 @@ import { AComponent } from '../../ui/components/AComponent'
illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</as-split-area>
<as-split-area size="160">
<as-split-area [size]="160">
<h5>Initial size: <b>160px</b></h5>
<h5>
Current size: <b>{{ sizes.pixel.area3 }}px</b>
Expand Down
Loading