From 8071c77f29944b7c9d5fc0eef37ca97ff367eb04 Mon Sep 17 00:00:00 2001 From: Harpush Date: Sat, 2 Sep 2023 13:16:30 +0300 Subject: [PATCH] feat: support angular compiler strict templates --- angular.json | 10 +-- .../src/lib/component/split.component.ts | 79 ++++++++++--------- .../src/lib/directive/split-area.directive.ts | 19 ++--- projects/angular-split/src/lib/interface.ts | 24 ++++-- projects/angular-split/src/lib/utils.ts | 42 ++++++---- .../custom-gutter-style.component.ts | 4 +- src/app/examples/dir-rtl/dir-rtl.component.ts | 6 +- .../examples/geek-demo/geek-demo.component.ts | 13 ++- .../gutter-click-roll-unroll.component.ts | 31 +++----- .../simple-split/simple-split.component.ts | 5 +- .../split-transitions.component.ts | 12 ++- .../workspace-localstorage.component.ts | 8 +- tsconfig.json | 3 + 13 files changed, 140 insertions(+), 116 deletions(-) diff --git a/angular.json b/angular.json index 3283d3f6..8942b846 100644 --- a/angular.json +++ b/angular.json @@ -25,7 +25,7 @@ "assets": ["src/favicon.ico", "src/assets"], "styles": ["./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss"], "scripts": [], - "aot": false, + "aot": true, "vendorChunk": true, "extractLicenses": false, "buildOptimizer": false, @@ -35,13 +35,7 @@ }, "configurations": { "production": { - "budgets": [ - { - "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" - } - ], + "budgets": [], "outputHashing": "all" }, "development": { diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index 35ae6a0f..b00afe15 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -18,7 +18,6 @@ import { } from '@angular/core' import { Observable, Subscriber, Subject } from 'rxjs' import { debounceTime } from 'rxjs/operators' - import { IArea, IPoint, @@ -27,6 +26,10 @@ import { IOutputData, IOutputAreaSizes, IDefaultOptions, + IAreaSize, + ISplitDirection, + ISplitDir, + ISplitUnit, } from '../interface' import { SplitAreaDirective } from '../directive/split-area.directive' import { @@ -107,7 +110,7 @@ import { ANGULAR_SPLIT_DEFAULT_OPTIONS } from '../angular-split-config.token' encapsulation: ViewEncapsulation.Emulated, }) export class SplitComponent implements AfterViewInit, OnDestroy { - @Input() set direction(v: 'horizontal' | 'vertical') { + @Input() set direction(v: ISplitDirection) { this._direction = v === 'vertical' ? 'vertical' : 'horizontal' this.renderer.addClass(this.elRef.nativeElement, `as-${this._direction}`) @@ -119,11 +122,11 @@ export class SplitComponent implements AfterViewInit, OnDestroy { this.build(false, false) } - get direction(): 'horizontal' | 'vertical' { + get direction(): ISplitDirection { return this._direction } - @Input() set unit(v: 'percent' | 'pixel') { + @Input() set unit(v: ISplitUnit) { this._unit = v === 'pixel' ? 'pixel' : 'percent' this.renderer.addClass(this.elRef.nativeElement, `as-${this._unit}`) @@ -132,21 +135,21 @@ export class SplitComponent implements AfterViewInit, OnDestroy { this.build(false, true) } - get unit(): 'percent' | 'pixel' { + get unit(): ISplitUnit { return this._unit } - @Input() set gutterSize(v: number | null) { + @Input() set gutterSize(v: number | `${number}` | null | undefined) { this._gutterSize = getInputPositiveNumber(v, 11) this.build(false, false) } - get gutterSize(): number | null { + get gutterSize(): number { return this._gutterSize } - @Input() set gutterStep(v: number) { + @Input() set gutterStep(v: number | `${number}`) { this._gutterStep = getInputPositiveNumber(v, 1) } @@ -154,7 +157,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { return this._gutterStep } - @Input() set restrictMove(v: boolean) { + @Input() set restrictMove(v: boolean | `${boolean}`) { this._restrictMove = getInputBoolean(v) } @@ -162,7 +165,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { return this._restrictMove } - @Input() set useTransition(v: boolean) { + @Input() set useTransition(v: boolean | `${boolean}`) { this._useTransition = getInputBoolean(v) if (this._useTransition) { @@ -176,7 +179,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { return this._useTransition } - @Input() set disabled(v: boolean) { + @Input() set disabled(v: boolean | `${boolean}`) { this._disabled = getInputBoolean(v) if (this._disabled) { @@ -190,17 +193,17 @@ export class SplitComponent implements AfterViewInit, OnDestroy { return this._disabled } - @Input() set dir(v: 'ltr' | 'rtl') { + @Input() set dir(v: ISplitDir) { this._dir = v === 'rtl' ? 'rtl' : 'ltr' this.renderer.setAttribute(this.elRef.nativeElement, 'dir', this._dir) } - get dir(): 'ltr' | 'rtl' { + get dir(): ISplitDir { return this._dir } - @Input() set gutterDblClickDuration(v: number) { + @Input() set gutterDblClickDuration(v: number | `${number}`) { this._gutterDblClickDuration = getInputPositiveNumber(v, 0) } @@ -243,11 +246,11 @@ export class SplitComponent implements AfterViewInit, OnDestroy { this[property] = this._config[property] }) } - private _direction: 'horizontal' | 'vertical' + private _direction: ISplitDirection - private _unit: 'percent' | 'pixel' + private _unit: ISplitUnit - private _gutterSize: number | null + private _gutterSize: number private _gutterStep: number @@ -257,7 +260,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { private _disabled: boolean - private _dir: 'ltr' | 'rtl' + private _dir: ISplitDir private _gutterDblClickDuration: number @@ -268,8 +271,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { private transitionEndSubscriber: Subscriber - private dragProgressSubject: Subject = new Subject() - dragProgress$: Observable = this.dragProgressSubject.asObservable() + private dragProgressSubject = new Subject() + dragProgress$ = this.dragProgressSubject.asObservable() private isDragging = false private isWaitingClear = false @@ -364,7 +367,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { } public getVisibleAreaSizes(): IOutputAreaSizes { - return this.displayedAreas.map((a) => (a.size === null ? '*' : a.size)) + return this.displayedAreas.map((a) => a.size) } public setVisibleAreaSizes(sizes: IOutputAreaSizes): boolean { @@ -372,7 +375,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { return false } - const formattedSizes = sizes.map((s) => getInputPositiveNumber(s, null)) + const formattedSizes = sizes.map((s) => getInputPositiveNumber(s, '*')) const isValid = isUserSizesValid(this.unit, formattedSizes) if (isValid === false) { @@ -394,7 +397,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { if (resetOrders === true) { // If user provided 'order' for each area, use it to sort them. if (this.displayedAreas.every((a) => a.component.order !== null)) { - this.displayedAreas.sort((a, b) => a.component.order - b.component.order) + this.displayedAreas.sort((a, b) => a.component.order - b.component.order) } // Then set real order with multiples of 2, numbers between will be used by gutters. @@ -417,7 +420,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { const defaultSize = 100 / this.displayedAreas.length this.displayedAreas.forEach((area) => { - area.size = useUserSizes ? area.component.size : defaultSize + area.size = useUserSizes ? area.component.size : defaultSize area.minSize = getAreaMinSize(area) area.maxSize = getAreaMaxSize(area) }) @@ -431,12 +434,12 @@ export class SplitComponent implements AfterViewInit, OnDestroy { area.maxSize = getAreaMaxSize(area) }) } else { - const wildcardSizeAreas = this.displayedAreas.filter((a) => a.component.size === null) + const wildcardSizeAreas = this.displayedAreas.filter((a) => a.component.size === '*') // No wildcard area > Need to select one arbitrarily > first if (wildcardSizeAreas.length === 0 && this.displayedAreas.length > 0) { this.displayedAreas.forEach((area, i) => { - area.size = i === 0 ? null : area.component.size + area.size = i === 0 ? '*' : area.component.size area.minSize = i === 0 ? null : getAreaMinSize(area) area.maxSize = i === 0 ? null : getAreaMaxSize(area) }) @@ -444,9 +447,9 @@ export class SplitComponent implements AfterViewInit, OnDestroy { // More than one wildcard area > Need to keep only one arbitrarily > first let alreadyGotOne = false this.displayedAreas.forEach((area) => { - if (area.component.size === null) { + if (area.component.size === '*') { if (alreadyGotOne === false) { - area.size = null + area.size = '*' area.minSize = null area.maxSize = null alreadyGotOne = true @@ -485,7 +488,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { this.displayedAreas.forEach((area) => { // Area with wildcard size - if (area.size === null) { + if (area.size === '*') { if (this.displayedAreas.length === 1) { area.component.setStyleFlex(1, 1, `100%`, false, false) } else { @@ -495,7 +498,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { area.component.setStyleFlex( 0, 0, - `calc( ${area.size}% - ${(area.size / 100) * sumGutterSize}px )`, + `calc( ${area.size}% - ${(area.size / 100) * sumGutterSize}px )`, area.minSize !== null && area.minSize === area.size, area.maxSize !== null && area.maxSize === area.size, ) @@ -507,7 +510,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { // PIXEL MODE this.displayedAreas.forEach((area) => { // Area with wildcard size - if (area.size === null) { + if (area.size === '*') { if (this.displayedAreas.length === 1) { area.component.setStyleFlex(1, 1, `100%`, false, false) } else { @@ -646,10 +649,10 @@ export class SplitComponent implements AfterViewInit, OnDestroy { // We have a wildcard size area beside the dragged gutter. // In this case we can only calculate the size based on the move restricted areas. - if (areaSnapshotBefore.area.size === null || areaSnapshotAfter.area.size === null) { + if (areaSnapshotBefore.area.size === '*' || areaSnapshotAfter.area.size === '*') { const notInvolvedAreasSizesPercent = this.displayedAreas.reduce((accum, area) => { if (areaSnapshotBefore.area !== area && areaSnapshotAfter.area !== area) { - return accum + area.size + return accum + (area.size as number) } return accum @@ -661,7 +664,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { this.snapshot.allInvolvedAreasSizePercent = [ ...this.snapshot.areasBeforeGutter, ...this.snapshot.areasAfterGutter, - ].reduce((t, a) => t + a.sizePercentAtStart, 0) + ].reduce((t, a) => t + (a.sizePercentAtStart as number), 0) } } @@ -789,7 +792,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { // Hack because of browser messing up with sizes using calc(X% - Ypx) -> el.getBoundingClientRect() // If not there, playing with gutters makes total going down to 99.99875% then 99.99286%, 99.98986%,.. const all = [...areasBefore.list, ...areasAfter.list] - const wildcardArea = all.find((a) => a.percentAfterAbsorption == null) + const wildcardArea = all.find((a) => a.percentAfterAbsorption == '*') // In case we have a wildcard area - always align the percents on the wildcard area. const areaToReset = wildcardArea ?? @@ -803,7 +806,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { if (areaToReset) { areaToReset.percentAfterAbsorption = this.snapshot.allInvolvedAreasSizePercent - - all.filter((a) => a !== areaToReset).reduce((total, a) => total + a.percentAfterAbsorption, 0) + all.filter((a) => a !== areaToReset).reduce((total, a) => total + (a.percentAfterAbsorption as number), 0) } } @@ -919,8 +922,8 @@ export class SplitComponent implements AfterViewInit, OnDestroy { this.updateArea(comp, false, false) } - public getAriaAreaSizeText(size: number | null): string { - if (size === null) { + public getAriaAreaSizeText(size: IAreaSize): string { + if (size === '*') { return null } 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 12fede4a..c62bd34b 100644 --- a/projects/angular-split/src/lib/directive/split-area.directive.ts +++ b/projects/angular-split/src/lib/directive/split-area.directive.ts @@ -2,6 +2,7 @@ import { Directive, ElementRef, Input, NgZone, OnDestroy, OnInit, Renderer2 } fr import { Subscription } from 'rxjs' import { SplitComponent } from '../component/split.component' import { getInputBoolean, getInputPositiveNumber } from '../utils' +import { IAreaSize } from '../interface' @Directive({ selector: 'as-split-area, [as-split-area]', @@ -10,7 +11,7 @@ import { getInputBoolean, getInputPositiveNumber } from '../utils' export class SplitAreaDirective implements OnInit, OnDestroy { private _order: number | null = null - @Input() set order(v: number | null) { + @Input() set order(v: number | `${number}` | null | undefined) { this._order = getInputPositiveNumber(v, null) this.split.updateArea(this, true, false) @@ -20,21 +21,21 @@ export class SplitAreaDirective implements OnInit, OnDestroy { return this._order } - private _size: number | null = null + private _size: IAreaSize = null - @Input() set size(v: number | null) { - this._size = getInputPositiveNumber(v, null) + @Input() set size(v: IAreaSize | `${number}` | null | undefined) { + this._size = getInputPositiveNumber(v, '*') this.split.updateArea(this, false, true) } - get size(): number | null { + get size(): IAreaSize { return this._size } private _minSize: number | null = null - @Input() set minSize(v: number | null) { + @Input() set minSize(v: number | `${number}` | null | undefined) { this._minSize = getInputPositiveNumber(v, null) this.split.updateArea(this, false, true) @@ -46,7 +47,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy { private _maxSize: number | null = null - @Input() set maxSize(v: number | null) { + @Input() set maxSize(v: number | `${number}` | null | undefined) { this._maxSize = getInputPositiveNumber(v, null) this.split.updateArea(this, false, true) @@ -58,7 +59,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy { private _lockSize = false - @Input() set lockSize(v: boolean) { + @Input() set lockSize(v: boolean | `${boolean}`) { this._lockSize = getInputBoolean(v) this.split.updateArea(this, false, true) @@ -70,7 +71,7 @@ export class SplitAreaDirective implements OnInit, OnDestroy { private _visible = true - @Input() set visible(v: boolean) { + @Input() set visible(v: boolean | `${boolean}`) { this._visible = getInputBoolean(v) if (this._visible) { diff --git a/projects/angular-split/src/lib/interface.ts b/projects/angular-split/src/lib/interface.ts index 884284de..44fdcbf6 100644 --- a/projects/angular-split/src/lib/interface.ts +++ b/projects/angular-split/src/lib/interface.ts @@ -1,5 +1,13 @@ import { SplitAreaDirective } from './directive/split-area.directive' +export type ISplitDirection = 'horizontal' | 'vertical' + +export type ISplitDir = 'ltr' | 'rtl' + +export type IAreaSize = number | '*' + +export type ISplitUnit = 'percent' | 'pixel' + export interface IPoint { x: number y: number @@ -8,10 +16,10 @@ export interface IPoint { export interface IArea { component: SplitAreaDirective order: number - size: number | null + size: IAreaSize minSize: number | null maxSize: number | null - sizeBeforeCollapse: number | null + sizeBeforeCollapse: IAreaSize | null gutterBeforeCollapse: number } @@ -29,7 +37,7 @@ export interface ISplitSnapshot { export interface IAreaSnapshot { area: IArea sizePixelAtStart: number - sizePercentAtStart: number + sizePercentAtStart: IAreaSize } // CREATED ON DRAG PROGRESS @@ -42,19 +50,19 @@ export interface ISplitSideAbsorptionCapacity { export interface IAreaAbsorptionCapacity { areaSnapshot: IAreaSnapshot pixelAbsorb: number - percentAfterAbsorption: number + percentAfterAbsorption: IAreaSize pixelRemain: number } export interface IDefaultOptions { - dir: 'ltr' | 'rtl' - direction: 'horizontal' | 'vertical' + dir: ISplitDir + direction: ISplitDirection disabled: boolean gutterDblClickDuration: number gutterSize: number | null gutterStep: number restrictMove: boolean - unit: 'percent' | 'pixel' + unit: ISplitUnit useTransition: boolean } @@ -65,4 +73,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 1c9bdf2a..050c877e 100644 --- a/projects/angular-split/src/lib/utils.ts +++ b/projects/angular-split/src/lib/utils.ts @@ -1,6 +1,14 @@ import { ElementRef } from '@angular/core' - -import { IArea, IPoint, IAreaSnapshot, ISplitSideAbsorptionCapacity, IAreaAbsorptionCapacity } from './interface' +import { + IArea, + IPoint, + IAreaSnapshot, + ISplitSideAbsorptionCapacity, + IAreaAbsorptionCapacity, + IAreaSize, + ISplitDirection, + ISplitUnit, +} from './interface' export function getPointFromEvent(event: MouseEvent | TouchEvent | KeyboardEvent): IPoint { // TouchEvent @@ -32,7 +40,7 @@ export function pointDeltaEquals(lhs: IPoint, rhs: IPoint, deltaPx: number) { return Math.abs(lhs.x - rhs.x) <= deltaPx && Math.abs(lhs.y - rhs.y) <= deltaPx } -export function getKeyboardEndpoint(event: KeyboardEvent, direction: 'horizontal' | 'vertical'): IPoint | null { +export function getKeyboardEndpoint(event: KeyboardEvent, direction: ISplitDirection): IPoint | null { // Return null if direction keys on the opposite axis were pressed if (direction === 'horizontal') { switch (event.key) { @@ -98,7 +106,7 @@ export function getKeyboardEndpoint(event: KeyboardEvent, direction: 'horizontal } } -export function getElementPixelSize(elRef: ElementRef, direction: 'horizontal' | 'vertical'): number { +export function getElementPixelSize(elRef: ElementRef, direction: ISplitDirection): number { const rect = (elRef.nativeElement).getBoundingClientRect() return direction === 'horizontal' ? rect.width : rect.height @@ -115,13 +123,13 @@ export function getInputPositiveNumber(v: any, defaultValue: T): number | T { return !isNaN(v) && v >= 0 ? v : defaultValue } -export function isUserSizesValid(unit: 'percent' | 'pixel', sizes: Array): boolean { +export function isUserSizesValid(unit: ISplitUnit, sizes: Array): boolean { // All sizes total must be 100 unless there are wildcards. // While having wildcards all other sizes sum should be less than 100. // There should be maximum one wildcard. if (unit === 'percent') { - const total = sizes.reduce((total, s) => (s !== null ? total + s : total), 0) - const wildcardSizeAreas = sizes.filter((size) => size === null) + const total = sizes.reduce((total, s) => (s !== '*' ? total + s : total), 0) + const wildcardSizeAreas = sizes.filter((size) => size === '*') if (wildcardSizeAreas.length > 1) { return false @@ -136,12 +144,12 @@ export function isUserSizesValid(unit: 'percent' | 'pixel', sizes: Array s === null).length === 1 + return sizes.filter((s) => s === '*').length === 1 } } -export function getAreaMinSize(a: IArea): null | number { - if (a.size === null) { +export function getAreaMinSize(a: IArea): number | null { + if (a.size === '*') { return null } @@ -160,8 +168,8 @@ export function getAreaMinSize(a: IArea): null | number { return a.component.minSize } -export function getAreaMaxSize(a: IArea): null | number { - if (a.size === null) { +export function getAreaMaxSize(a: IArea): number | null { + if (a.size === '*') { return null } @@ -181,12 +189,12 @@ export function getAreaMaxSize(a: IArea): null | number { } export function getGutterSideAbsorptionCapacity( - unit: 'percent' | 'pixel', + unit: ISplitUnit, sideAreas: Array, pixels: number, allAreasSizePixel: number, ): ISplitSideAbsorptionCapacity { - return sideAreas.reduce( + return sideAreas.reduce( (acc, area) => { const res = getAreaAbsorptionCapacity(unit, area, acc.remain, allAreasSizePixel) acc.list.push(res) @@ -198,7 +206,7 @@ export function getGutterSideAbsorptionCapacity( } function getAreaAbsorptionCapacity( - unit: 'percent' | 'pixel', + unit: ISplitUnit, areaSnapshot: IAreaSnapshot, pixels: number, allAreasSizePixel: number, @@ -350,9 +358,9 @@ function getAreaAbsorptionCapacityPixel( } } -export function updateAreaSize(unit: 'percent' | 'pixel', item: IAreaAbsorptionCapacity) { +export function updateAreaSize(unit: ISplitUnit, item: IAreaAbsorptionCapacity) { // Update size except for the wildcard size area - if (item.areaSnapshot.area.size !== null) { + if (item.areaSnapshot.area.size !== '*') { if (unit === 'percent') { item.areaSnapshot.area.size = item.percentAfterAbsorption } else if (unit === 'pixel') { diff --git a/src/app/examples/custom-gutter-style/custom-gutter-style.component.ts b/src/app/examples/custom-gutter-style/custom-gutter-style.component.ts index ee8a378c..c43cda9f 100644 --- a/src/app/examples/custom-gutter-style/custom-gutter-style.component.ts +++ b/src/app/examples/custom-gutter-style/custom-gutter-style.component.ts @@ -1,6 +1,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core' - import { AComponent } from '../../ui/components/AComponent' +import { ISplitDirection } from 'angular-split' @Component({ selector: 'sp-ex-custom-gutter-style', @@ -65,5 +65,5 @@ import { AComponent } from '../../ui/components/AComponent' `, }) export class CustomGutterStyleComponent extends AComponent { - direction = 'horizontal' + direction: ISplitDirection = 'horizontal' } diff --git a/src/app/examples/dir-rtl/dir-rtl.component.ts b/src/app/examples/dir-rtl/dir-rtl.component.ts index 3b24b003..79538339 100644 --- a/src/app/examples/dir-rtl/dir-rtl.component.ts +++ b/src/app/examples/dir-rtl/dir-rtl.component.ts @@ -1,6 +1,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core' - import { AComponent } from '../../ui/components/AComponent' +import { ISplitDir, ISplitDirection } from 'angular-split' @Component({ selector: 'sp-ex-dir_rtl', @@ -74,6 +74,6 @@ import { AComponent } from '../../ui/components/AComponent' `, }) export class DirRtlComponent extends AComponent { - dir = 'rtl' - direction = 'horizontal' + dir: ISplitDir = 'rtl' + direction: ISplitDirection = 'horizontal' } diff --git a/src/app/examples/geek-demo/geek-demo.component.ts b/src/app/examples/geek-demo/geek-demo.component.ts index 2ca59e20..7c684390 100644 --- a/src/app/examples/geek-demo/geek-demo.component.ts +++ b/src/app/examples/geek-demo/geek-demo.component.ts @@ -1,7 +1,7 @@ import { Component, ViewChild, ChangeDetectionStrategy } from '@angular/core' import { SortableComponent } from 'ngx-bootstrap/sortable' - import { AComponent } from '../../ui/components/AComponent' +import { IAreaSize, ISplitDirection } from 'angular-split' @Component({ selector: 'sp-ex-geek-demo', @@ -184,7 +184,16 @@ import { AComponent } from '../../ui/components/AComponent' export class GeekDemoComponent extends AComponent { @ViewChild(SortableComponent) sortableComponent: SortableComponent - d = { + d: { + dir: ISplitDirection + restrictMove: boolean + useTransition: boolean + gutterSize: number | null + gutterStep: number | null + width: number | null + height: number | null + areas: { id: number; color: string; size: IAreaSize; present: boolean; visible: boolean }[] + } = { dir: 'horizontal', restrictMove: true, useTransition: true, diff --git a/src/app/examples/gutter-click-roll-unroll/gutter-click-roll-unroll.component.ts b/src/app/examples/gutter-click-roll-unroll/gutter-click-roll-unroll.component.ts index 59a9c88d..f4962060 100644 --- a/src/app/examples/gutter-click-roll-unroll/gutter-click-roll-unroll.component.ts +++ b/src/app/examples/gutter-click-roll-unroll/gutter-click-roll-unroll.component.ts @@ -1,7 +1,6 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core' -import { SplitComponent } from 'angular-split' +import { IAreaSize, IOutputAreaSizes, IOutputData, SplitComponent } from 'angular-split' import { Subscription } from 'rxjs' - import { AComponent } from '../../ui/components/AComponent' import { formatDate } from '../../utils/format-date' @@ -117,9 +116,9 @@ export class GutterClickRollUnrollComponent extends AComponent implements AfterV useTransition = true dblClickTime = 0 logMessages: Array<{ type: string; text: string }> = [] - areas = [ + areas: { size: IAreaSize; order: number; content: string }[] = [ { size: 25, order: 1, content: 'fg fdkjuh dfskhf dkujv fd vifdk hvdkuh fg' }, - { size: 50, order: 2, content: 'sd h vdshhf deuyf gduyeg hudeg hudfg fd vifdk hvdkuh fg' }, + { size: '*', order: 2, content: 'sd h vdshhf deuyf gduyeg hudeg hudfg fd vifdk hvdkuh fg' }, { size: 25, order: 3, content: 'sd jslfd ijgil dfhlt jkgvbnhj fl bhjgflh jfglhj fl h fg' }, ] sub: Subscription @@ -138,7 +137,11 @@ export class GutterClickRollUnrollComponent extends AComponent implements AfterV }) } - log(type: string, e: { gutterNum: number; sizes: Array }) { + log( + ...[type, e]: + | [type: 'dragStart' | 'dragEnd' | 'gutterClick' | 'gutterDblClick', e: IOutputData] + | [type: 'transitionEnd', e: IOutputAreaSizes] + ) { this.logMessages.push({ type, text: `${formatDate(new Date())} > ${type} event > ${JSON.stringify(e)}` }) setTimeout(() => { @@ -156,29 +159,17 @@ export class GutterClickRollUnrollComponent extends AComponent implements AfterV } } - gutterClick(e: { gutterNum: number; sizes: Array }) { + gutterClick(e: IOutputData) { if (e.gutterNum === 1) { - if (this.areas[0].size > 0) { - this.areas[1].size += this.areas[0].size + if ((this.areas[0].size as number) > 0) { this.areas[0].size = 0 - } else if (this.areas[1].size > 25) { - this.areas[1].size -= 25 - this.areas[0].size = 25 } else { this.areas[0].size = 25 - this.areas[1].size = 50 - this.areas[2].size = 25 } } else if (e.gutterNum === 2) { - if (this.areas[2].size > 0) { - this.areas[1].size += this.areas[2].size + if ((this.areas[2].size as number) > 0) { this.areas[2].size = 0 - } else if (this.areas[1].size > 25) { - this.areas[1].size -= 25 - this.areas[2].size = 25 } else { - this.areas[0].size = 25 - this.areas[1].size = 50 this.areas[2].size = 25 } } diff --git a/src/app/examples/simple-split/simple-split.component.ts b/src/app/examples/simple-split/simple-split.component.ts index e3fd997f..44a37126 100644 --- a/src/app/examples/simple-split/simple-split.component.ts +++ b/src/app/examples/simple-split/simple-split.component.ts @@ -1,6 +1,5 @@ import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core' -import { SplitComponent, SplitAreaDirective } from 'angular-split' - +import { SplitComponent, SplitAreaDirective, ISplitDirection } from 'angular-split' import { AComponent } from '../../ui/components/AComponent' @Component({ @@ -169,7 +168,7 @@ export class SimpleSplitComponent extends AComponent { @ViewChild('area1') area1: SplitAreaDirective @ViewChild('area2') area2: SplitAreaDirective - direction = 'horizontal' + direction: ISplitDirection = 'horizontal' sizes = { percentWithoutWildcards: { area1: 30, diff --git a/src/app/examples/split-transitions/split-transitions.component.ts b/src/app/examples/split-transitions/split-transitions.component.ts index ff701c21..41d4eba2 100644 --- a/src/app/examples/split-transitions/split-transitions.component.ts +++ b/src/app/examples/split-transitions/split-transitions.component.ts @@ -1,7 +1,7 @@ import { Component, ViewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core' - import { AComponent } from '../../ui/components/AComponent' import { formatDate } from '../../utils/format-date' +import { IAreaSize } from 'angular-split' @Component({ selector: 'sp-ex-transitions', @@ -240,7 +240,15 @@ import { formatDate } from '../../utils/format-date' `, }) export class SplitTransitionsComponent extends AComponent { - action = { + action: { + a1s: IAreaSize + a2s: IAreaSize + a3s: IAreaSize + a1v: boolean + a2v: boolean + a3v: boolean + useTransition: boolean + } = { a1s: 25, a2s: 50, a3s: 25, diff --git a/src/app/examples/workspace-localstorage/workspace-localstorage.component.ts b/src/app/examples/workspace-localstorage/workspace-localstorage.component.ts index 122a703b..afb2a413 100644 --- a/src/app/examples/workspace-localstorage/workspace-localstorage.component.ts +++ b/src/app/examples/workspace-localstorage/workspace-localstorage.component.ts @@ -1,15 +1,15 @@ import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core' import { cloneDeep } from 'lodash' - import { AComponent } from '../../ui/components/AComponent' +import { IAreaSize, IOutputData } from 'angular-split' interface IConfig { columns: Array<{ visible: boolean - size: number + size: IAreaSize rows: Array<{ visible: boolean - size: number + size: IAreaSize type: string }> }> @@ -147,7 +147,7 @@ export class WorkspaceLocalstorageComponent extends AComponent implements OnInit localStorage.removeItem(this.localStorageName) } - onDragEnd(columnindex: number, e: { gutterNum: number; sizes: Array }) { + onDragEnd(columnindex: number, e: IOutputData) { // Column dragged if (columnindex === -1) { // Set size for all visible columns diff --git a/tsconfig.json b/tsconfig.json index 55628726..39a60220 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,5 +18,8 @@ "angular-split/*": ["dist/angular-split/*"] }, "useDefineForClassFields": false + }, + "angularCompilerOptions": { + "strictTemplates": true } }