From e79819fef4ef22167c47436340e5fb55ffeb2ec1 Mon Sep 17 00:00:00 2001 From: wojkiewp Date: Mon, 18 Oct 2021 09:33:55 +0200 Subject: [PATCH 1/8] global config settings --- .../src/lib/angular-split-config.token.ts | 15 +++++ .../src/lib/component/split.component.ts | 46 +++++++++++---- projects/angular-split/src/public_api.ts | 1 + src/app/examples/example-types.ts | 1 + src/app/examples/examples.routes.ts | 9 +++ .../global-options.component.ts | 57 +++++++++++++++++++ .../global-options/global-options.module.ts | 27 +++++++++ 7 files changed, 144 insertions(+), 12 deletions(-) create mode 100644 projects/angular-split/src/lib/angular-split-config.token.ts create mode 100644 src/app/examples/global-options/global-options.component.ts create mode 100644 src/app/examples/global-options/global-options.module.ts diff --git a/projects/angular-split/src/lib/angular-split-config.token.ts b/projects/angular-split/src/lib/angular-split-config.token.ts new file mode 100644 index 00000000..dd10c498 --- /dev/null +++ b/projects/angular-split/src/lib/angular-split-config.token.ts @@ -0,0 +1,15 @@ +import { InjectionToken } from '@angular/core' + +export const ANGULAR_SPLIT_DEFAULT_OPTIONS = new InjectionToken>('angular-split-global-config') + +export interface DefaultOptions { + dir: 'ltr' | 'rtl' + direction: 'horizontal' | 'vertical' + disabled: boolean + gutterDblClickDuration: number + gutterSize: number | null + gutterStep: number + restrictMove: boolean + unit: 'percent' | 'pixel' + useTransition: boolean +} diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index 52a4a699..a51c5ffb 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -13,6 +13,7 @@ import { QueryList, EventEmitter, ViewEncapsulation, + Inject, } from '@angular/core' import { Observable, Subscriber, Subject } from 'rxjs' import { debounceTime } from 'rxjs/operators' @@ -31,6 +32,7 @@ import { pointDeltaEquals, updateAreaSize, } from '../utils' +import { ANGULAR_SPLIT_DEFAULT_OPTIONS, DefaultOptions } from '../angular-split-config.token' /** * angular-split @@ -183,43 +185,63 @@ export class SplitComponent implements AfterViewInit, OnDestroy { this._gutterDblClickDuration = getInputPositiveNumber(v, 0) } - @Input() gutterClickDeltaPx = 2; + @Input() gutterClickDeltaPx = 2 get gutterDblClickDuration(): number { return this._gutterDblClickDuration } @Output() get transitionEnd(): Observable { - return new Observable((subscriber) => (this.transitionEndSubscriber = subscriber)).pipe( + return new Observable( + (subscriber: Subscriber) => (this.transitionEndSubscriber = subscriber), + ).pipe( + // @ts-ignore debounceTime(20), ) } + public _config: DefaultOptions = { + direction: 'horizontal', + unit: 'percent', + gutterSize: 11, + gutterStep: 1, + restrictMove: false, + useTransition: false, + disabled: false, + dir: 'ltr', + gutterDblClickDuration: 0, + } + constructor( private ngZone: NgZone, private elRef: ElementRef, private cdRef: ChangeDetectorRef, private renderer: Renderer2, + @Inject(ANGULAR_SPLIT_DEFAULT_OPTIONS) globalConfig: DefaultOptions, ) { // To force adding default class, could be override by user @Input() or not this.direction = this._direction + this._config = globalConfig ? Object.assign(this._config, globalConfig) : this._config + Object.keys(this._config).forEach((property) => { + this[property] = this._config[property] + }) } - private _direction: 'horizontal' | 'vertical' = 'horizontal' + private _direction: 'horizontal' | 'vertical' - private _unit: 'percent' | 'pixel' = 'percent' + private _unit: 'percent' | 'pixel' - private _gutterSize: number | null = 11 + private _gutterSize: number | null - private _gutterStep = 1 + private _gutterStep: number - private _restrictMove = false + private _restrictMove: boolean - private _useTransition = false + private _useTransition: boolean - private _disabled = false + private _disabled: boolean - private _dir: 'ltr' | 'rtl' = 'ltr' + private _dir: 'ltr' | 'rtl' - private _gutterDblClickDuration = 0 + private _gutterDblClickDuration: number @Output() dragStart = new EventEmitter(false) @Output() dragEnd = new EventEmitter(false) @@ -580,7 +602,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { event.preventDefault() event.stopPropagation() - const tempPoint = getPointFromEvent(event); + const tempPoint = getPointFromEvent(event) if (this._clickTimeout !== null && !pointDeltaEquals(this.startPoint, tempPoint, this.gutterClickDeltaPx)) { window.clearTimeout(this._clickTimeout) this._clickTimeout = null diff --git a/projects/angular-split/src/public_api.ts b/projects/angular-split/src/public_api.ts index 81a09e09..22b25ec5 100644 --- a/projects/angular-split/src/public_api.ts +++ b/projects/angular-split/src/public_api.ts @@ -6,3 +6,4 @@ export { AngularSplitModule } from './lib/module' export { SplitComponent } from './lib/component/split.component' export { SplitAreaDirective } from './lib/directive/split-area.directive' export { IOutputData, IOutputAreaSizes } from './lib/interface' +export { ANGULAR_SPLIT_DEFAULT_OPTIONS } from './lib/angular-split-config.token' diff --git a/src/app/examples/example-types.ts b/src/app/examples/example-types.ts index 7258fffe..1718ec89 100644 --- a/src/app/examples/example-types.ts +++ b/src/app/examples/example-types.ts @@ -13,4 +13,5 @@ export enum ExampleEnum { TOGGLE = 'toggle', TRANSITION = 'transition', WORKSPACE = 'workspace', + GLOBAL = 'global', } diff --git a/src/app/examples/examples.routes.ts b/src/app/examples/examples.routes.ts index 6d7a1a77..d10695aa 100644 --- a/src/app/examples/examples.routes.ts +++ b/src/app/examples/examples.routes.ts @@ -138,4 +138,13 @@ export const exampleRoutes: Routes = [ loadChildren: () => import('./workspace-localstorage/workspace-localstorage.module').then((m) => m.WorkspaceLocalstorageModule), }, + { + data: { + type: ExampleEnum.GLOBAL, + label: 'Split with global settings', + srcUrl: `${srcUrlBaseApp}/global-options/global-options.component.ts`, + }, + path: 'global-options', + loadChildren: () => import('./global-options/global-options.module').then((m) => m.GlobalOptionsModule), + }, ] diff --git a/src/app/examples/global-options/global-options.component.ts b/src/app/examples/global-options/global-options.component.ts new file mode 100644 index 00000000..bf42526d --- /dev/null +++ b/src/app/examples/global-options/global-options.component.ts @@ -0,0 +1,57 @@ +import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core' +import { AComponent } from '../../ui/components/AComponent' +import { SplitComponent, SplitAreaDirective } from 'angular-split' + +@Component({ + selector: 'app-global-options', + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + class: 'split-example-page', + }, + template: ` + {{ testChangeDetectorRun() }} +
+ +
Global direction and gutter size:
+
+ + +

+ 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 sunt + explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia + consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi + tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis + nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel + illum qui dolorem eum fugiat quo voluptas nulla pariatur? +

+ + +
+
+
+ `, +}) +export class GlobalOptionsComponent extends AComponent { + @ViewChild('split') split: SplitComponent + @ViewChild('area1') area1: SplitAreaDirective + @ViewChild('area2') area2: SplitAreaDirective + + constructor() { + super() + + setTimeout(() => { + console.log('>>> split > ', this.split) + console.log('>>> area1 > ', this.area1) + console.log('>>> area2 > ', this.area2) + }, 1000) + } +} diff --git a/src/app/examples/global-options/global-options.module.ts b/src/app/examples/global-options/global-options.module.ts new file mode 100644 index 00000000..d8a415ca --- /dev/null +++ b/src/app/examples/global-options/global-options.module.ts @@ -0,0 +1,27 @@ +import { NgModule } from '@angular/core' +import { CommonModule } from '@angular/common' +import { RouterModule } from '@angular/router' +import { GlobalOptionsComponent } from './global-options.component' +import { AngularSplitModule } from 'angular-split' +import { UiModule } from '../../ui/ui.module' +import { ANGULAR_SPLIT_DEFAULT_OPTIONS } from 'angular-split' + +@NgModule({ + declarations: [GlobalOptionsComponent], + imports: [ + CommonModule, + RouterModule.forChild([{ path: '', component: GlobalOptionsComponent }]), + AngularSplitModule, + UiModule, + ], + providers: [ + { + provide: ANGULAR_SPLIT_DEFAULT_OPTIONS, + useValue: { + direction: 'vertical', + gutterSize: 30, + }, + }, + ], +}) +export class GlobalOptionsModule {} From f780445add8d57aec8c02bc092676730dea78843 Mon Sep 17 00:00:00 2001 From: wojkiewp Date: Mon, 18 Oct 2021 09:43:11 +0200 Subject: [PATCH 2/8] changed interface name and property to private --- .../angular-split/src/lib/angular-split-config.token.ts | 4 ++-- projects/angular-split/src/lib/component/split.component.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/projects/angular-split/src/lib/angular-split-config.token.ts b/projects/angular-split/src/lib/angular-split-config.token.ts index dd10c498..617175ff 100644 --- a/projects/angular-split/src/lib/angular-split-config.token.ts +++ b/projects/angular-split/src/lib/angular-split-config.token.ts @@ -1,8 +1,8 @@ import { InjectionToken } from '@angular/core' -export const ANGULAR_SPLIT_DEFAULT_OPTIONS = new InjectionToken>('angular-split-global-config') +export const ANGULAR_SPLIT_DEFAULT_OPTIONS = new InjectionToken>('angular-split-global-config') -export interface DefaultOptions { +export interface IDefaultOptions { dir: 'ltr' | 'rtl' direction: 'horizontal' | 'vertical' disabled: boolean diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index a51c5ffb..68879992 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -32,7 +32,7 @@ import { pointDeltaEquals, updateAreaSize, } from '../utils' -import { ANGULAR_SPLIT_DEFAULT_OPTIONS, DefaultOptions } from '../angular-split-config.token' +import { ANGULAR_SPLIT_DEFAULT_OPTIONS, IDefaultOptions } from '../angular-split-config.token' /** * angular-split @@ -199,7 +199,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { ) } - public _config: DefaultOptions = { + private readonly _config: IDefaultOptions = { direction: 'horizontal', unit: 'percent', gutterSize: 11, @@ -216,7 +216,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { private elRef: ElementRef, private cdRef: ChangeDetectorRef, private renderer: Renderer2, - @Inject(ANGULAR_SPLIT_DEFAULT_OPTIONS) globalConfig: DefaultOptions, + @Inject(ANGULAR_SPLIT_DEFAULT_OPTIONS) globalConfig: IDefaultOptions, ) { // To force adding default class, could be override by user @Input() or not this.direction = this._direction From 96d52eb7c1a37edd9b0f148b0c277bd7c55a2980 Mon Sep 17 00:00:00 2001 From: wojkiewp Date: Mon, 18 Oct 2021 09:50:16 +0200 Subject: [PATCH 3/8] changed config property to private --- projects/angular-split/src/lib/component/split.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index 68879992..68f1f097 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -199,7 +199,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { ) } - private readonly _config: IDefaultOptions = { + private _config: IDefaultOptions = { direction: 'horizontal', unit: 'percent', gutterSize: 11, From b1ffdfca7ad67672f0ae42cf372400229d335893 Mon Sep 17 00:00:00 2001 From: pawelwojkiewicz Date: Thu, 25 Nov 2021 15:08:46 +0100 Subject: [PATCH 4/8] added Optional addnotation to Inject --- projects/angular-split/src/lib/component/split.component.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index 68f1f097..1a7715f0 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -14,6 +14,7 @@ import { EventEmitter, ViewEncapsulation, Inject, + Optional, } from '@angular/core' import { Observable, Subscriber, Subject } from 'rxjs' import { debounceTime } from 'rxjs/operators' @@ -216,7 +217,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { private elRef: ElementRef, private cdRef: ChangeDetectorRef, private renderer: Renderer2, - @Inject(ANGULAR_SPLIT_DEFAULT_OPTIONS) globalConfig: IDefaultOptions, + @Optional() @Inject(ANGULAR_SPLIT_DEFAULT_OPTIONS) globalConfig: IDefaultOptions, ) { // To force adding default class, could be override by user @Input() or not this.direction = this._direction From 7731a5ea29af345d634b1d6605a003cdbb0222a3 Mon Sep 17 00:00:00 2001 From: pawelwojkiewicz Date: Thu, 25 Nov 2021 15:53:37 +0100 Subject: [PATCH 5/8] removed ts-ignore comment --- projects/angular-split/src/lib/component/split.component.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index 1a7715f0..dd3cd40f 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -194,10 +194,7 @@ export class SplitComponent implements AfterViewInit, OnDestroy { @Output() get transitionEnd(): Observable { return new Observable( (subscriber: Subscriber) => (this.transitionEndSubscriber = subscriber), - ).pipe( - // @ts-ignore - debounceTime(20), - ) + ).pipe(debounceTime(20)) } private _config: IDefaultOptions = { From 469ce20ef66fc9e08aca86371c449aaed1e4bcf8 Mon Sep 17 00:00:00 2001 From: pawelwojkiewicz Date: Fri, 26 Nov 2021 09:42:21 +0100 Subject: [PATCH 6/8] added missed injection token --- projects/angular-split/src/public_api.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/angular-split/src/public_api.ts b/projects/angular-split/src/public_api.ts index 07393a3e..45465dc8 100644 --- a/projects/angular-split/src/public_api.ts +++ b/projects/angular-split/src/public_api.ts @@ -5,4 +5,5 @@ export { AngularSplitModule } from './lib/module' export { SplitComponent } from './lib/component/split.component' export { SplitAreaDirective } from './lib/directive/split-area.directive' +export { ANGULAR_SPLIT_DEFAULT_OPTIONS } from './lib/angular-split-config.token' export * from './lib/interface' From 6242972273bc5db40ab68219a9d8fda99735bbd2 Mon Sep 17 00:00:00 2001 From: pawelwojkiewicz Date: Fri, 26 Nov 2021 18:50:18 +0100 Subject: [PATCH 7/8] moved IDefaultOptions to interface.ts --- .../src/lib/angular-split-config.token.ts | 13 +------------ projects/angular-split/src/lib/interface.ts | 12 ++++++++++++ 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/projects/angular-split/src/lib/angular-split-config.token.ts b/projects/angular-split/src/lib/angular-split-config.token.ts index 617175ff..e24411d6 100644 --- a/projects/angular-split/src/lib/angular-split-config.token.ts +++ b/projects/angular-split/src/lib/angular-split-config.token.ts @@ -1,15 +1,4 @@ import { InjectionToken } from '@angular/core' +import { IDefaultOptions } from './interface' export const ANGULAR_SPLIT_DEFAULT_OPTIONS = new InjectionToken>('angular-split-global-config') - -export interface IDefaultOptions { - dir: 'ltr' | 'rtl' - direction: 'horizontal' | 'vertical' - disabled: boolean - gutterDblClickDuration: number - gutterSize: number | null - gutterStep: number - restrictMove: boolean - unit: 'percent' | 'pixel' - useTransition: boolean -} diff --git a/projects/angular-split/src/lib/interface.ts b/projects/angular-split/src/lib/interface.ts index 13e23aba..884284de 100644 --- a/projects/angular-split/src/lib/interface.ts +++ b/projects/angular-split/src/lib/interface.ts @@ -46,6 +46,18 @@ export interface IAreaAbsorptionCapacity { pixelRemain: number } +export interface IDefaultOptions { + dir: 'ltr' | 'rtl' + direction: 'horizontal' | 'vertical' + disabled: boolean + gutterDblClickDuration: number + gutterSize: number | null + gutterStep: number + restrictMove: boolean + unit: 'percent' | 'pixel' + useTransition: boolean +} + // CREATED TO SEND OUTSIDE export interface IOutputData { From 617004bb81d9eb10aaac4e69ea8af1ae3b1225e8 Mon Sep 17 00:00:00 2001 From: pawelwojkiewicz Date: Fri, 26 Nov 2021 18:56:29 +0100 Subject: [PATCH 8/8] fixed IDefaultOptions import --- projects/angular-split/src/lib/component/split.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/angular-split/src/lib/component/split.component.ts b/projects/angular-split/src/lib/component/split.component.ts index dd3cd40f..d2d1a39e 100644 --- a/projects/angular-split/src/lib/component/split.component.ts +++ b/projects/angular-split/src/lib/component/split.component.ts @@ -19,7 +19,7 @@ import { import { Observable, Subscriber, Subject } from 'rxjs' import { debounceTime } from 'rxjs/operators' -import { IArea, IPoint, ISplitSnapshot, IAreaSnapshot, IOutputData, IOutputAreaSizes } from '../interface' +import { IArea, IPoint, ISplitSnapshot, IAreaSnapshot, IOutputData, IOutputAreaSizes, IDefaultOptions } from '../interface' import { SplitAreaDirective } from '../directive/split-area.directive' import { getInputPositiveNumber, @@ -33,7 +33,7 @@ import { pointDeltaEquals, updateAreaSize, } from '../utils' -import { ANGULAR_SPLIT_DEFAULT_OPTIONS, IDefaultOptions } from '../angular-split-config.token' +import { ANGULAR_SPLIT_DEFAULT_OPTIONS} from '../angular-split-config.token' /** * angular-split