Skip to content

Commit e3227ae

Browse files
HarpushJefiozie
Harpush
and
Jefiozie
authored
refactor: change gutter directives to modern angular (#479)
Co-authored-by: Jeffrey Bosch <Jefiozie@users.noreply.github.com>
1 parent 12d12a0 commit e3227ae

5 files changed

+67
-54
lines changed

‎projects/angular-split/src/lib/gutter/split-gutter-drag-handle.directive.ts

+8-10
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
1-
import { Directive, OnInit, OnDestroy, Inject, ElementRef } from '@angular/core'
1+
import { Directive, OnDestroy, ElementRef, inject } from '@angular/core'
22
import { SplitGutterDirective } from './split-gutter.directive'
33
import { GUTTER_NUM_TOKEN } from './gutter-num-token'
44

55
@Directive({
66
selector: '[asSplitGutterDragHandle]',
77
standalone: true,
88
})
9-
export class SplitGutterDragHandleDirective implements OnInit, OnDestroy {
10-
constructor(
11-
@Inject(GUTTER_NUM_TOKEN) private gutterNum: number,
12-
private elementRef: ElementRef<HTMLElement>,
13-
private gutterDir: SplitGutterDirective,
14-
) {}
9+
export class SplitGutterDragHandleDirective implements OnDestroy {
10+
private readonly gutterNum = inject(GUTTER_NUM_TOKEN)
11+
private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef)
12+
private readonly gutterDir = inject(SplitGutterDirective)
1513

16-
ngOnInit(): void {
17-
this.gutterDir.addToMap(this.gutterDir.gutterToHandleElementMap, this.gutterNum, this.elementRef)
14+
constructor() {
15+
this.gutterDir._addToMap(this.gutterDir._gutterToHandleElementMap, this.gutterNum, this.elementRef)
1816
}
1917

2018
ngOnDestroy(): void {
21-
this.gutterDir.removedFromMap(this.gutterDir.gutterToHandleElementMap, this.gutterNum, this.elementRef)
19+
this.gutterDir._removedFromMap(this.gutterDir._gutterToHandleElementMap, this.gutterNum, this.elementRef)
2220
}
2321
}

‎projects/angular-split/src/lib/gutter/split-gutter-dynamic-injector.directive.ts

+21-20
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Injector, Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core'
1+
import { Injector, Directive, ViewContainerRef, TemplateRef, input, effect, inject } from '@angular/core'
22
import { GUTTER_NUM_TOKEN } from './gutter-num-token'
33

44
interface SplitGutterDynamicInjectorTemplateContext {
@@ -14,30 +14,31 @@ interface SplitGutterDynamicInjectorTemplateContext {
1414
standalone: true,
1515
})
1616
export class SplitGutterDynamicInjectorDirective {
17-
@Input('asSplitGutterDynamicInjector')
18-
set gutterNum(value: number) {
19-
this.vcr.clear()
17+
private readonly vcr = inject(ViewContainerRef)
18+
private readonly templateRef = inject<TemplateRef<SplitGutterDynamicInjectorTemplateContext>>(TemplateRef)
2019

21-
const injector = Injector.create({
22-
providers: [
23-
{
24-
provide: GUTTER_NUM_TOKEN,
25-
useValue: value,
26-
},
27-
],
28-
parent: this.vcr.injector,
29-
})
20+
protected readonly gutterNum = input.required<number>({ alias: 'asSplitGutterDynamicInjector' })
3021

31-
this.vcr.createEmbeddedView(this.templateRef, { $implicit: injector })
32-
}
22+
constructor() {
23+
effect(() => {
24+
this.vcr.clear()
25+
26+
const injector = Injector.create({
27+
providers: [
28+
{
29+
provide: GUTTER_NUM_TOKEN,
30+
useValue: this.gutterNum(),
31+
},
32+
],
33+
parent: this.vcr.injector,
34+
})
3335

34-
constructor(
35-
private vcr: ViewContainerRef,
36-
private templateRef: TemplateRef<SplitGutterDynamicInjectorTemplateContext>,
37-
) {}
36+
this.vcr.createEmbeddedView(this.templateRef, { $implicit: injector })
37+
})
38+
}
3839

3940
static ngTemplateContextGuard(
40-
dir: SplitGutterDynamicInjectorDirective,
41+
_dir: SplitGutterDynamicInjectorDirective,
4142
ctx: unknown,
4243
): ctx is SplitGutterDynamicInjectorTemplateContext {
4344
return true

‎projects/angular-split/src/lib/gutter/split-gutter-exclude-from-drag.directive.ts

+8-10
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
1-
import { Directive, OnInit, OnDestroy, Inject, ElementRef } from '@angular/core'
1+
import { Directive, OnDestroy, ElementRef, inject } from '@angular/core'
22
import { SplitGutterDirective } from './split-gutter.directive'
33
import { GUTTER_NUM_TOKEN } from './gutter-num-token'
44

55
@Directive({
66
selector: '[asSplitGutterExcludeFromDrag]',
77
standalone: true,
88
})
9-
export class SplitGutterExcludeFromDragDirective implements OnInit, OnDestroy {
10-
constructor(
11-
@Inject(GUTTER_NUM_TOKEN) private gutterNum: number,
12-
private elementRef: ElementRef<HTMLElement>,
13-
private gutterDir: SplitGutterDirective,
14-
) {}
9+
export class SplitGutterExcludeFromDragDirective implements OnDestroy {
10+
private readonly gutterNum = inject(GUTTER_NUM_TOKEN)
11+
private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef)
12+
private readonly gutterDir = inject(SplitGutterDirective)
1513

16-
ngOnInit(): void {
17-
this.gutterDir.addToMap(this.gutterDir.gutterToExcludeDragElementMap, this.gutterNum, this.elementRef)
14+
constructor() {
15+
this.gutterDir._addToMap(this.gutterDir._gutterToExcludeDragElementMap, this.gutterNum, this.elementRef)
1816
}
1917

2018
ngOnDestroy(): void {
21-
this.gutterDir.removedFromMap(this.gutterDir.gutterToExcludeDragElementMap, this.gutterNum, this.elementRef)
19+
this.gutterDir._removedFromMap(this.gutterDir._gutterToExcludeDragElementMap, this.gutterNum, this.elementRef)
2220
}
2321
}

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

+26-13
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Directive, ElementRef, TemplateRef } from '@angular/core'
1+
import { Directive, ElementRef, inject, TemplateRef } from '@angular/core'
22
import { SplitAreaComponent } from '../split-area/split-area.component'
33

44
export interface SplitGutterTemplateContext {
@@ -38,22 +38,29 @@ export interface SplitGutterTemplateContext {
3838
standalone: true,
3939
})
4040
export class SplitGutterDirective {
41+
readonly template = inject<TemplateRef<SplitGutterTemplateContext>>(TemplateRef)
42+
4143
/**
4244
* The map holds reference to the drag handle elements inside instances
4345
* of the provided template.
46+
*
47+
* @internal
4448
*/
45-
gutterToHandleElementMap = new Map<number, ElementRef<HTMLElement>[]>()
49+
readonly _gutterToHandleElementMap = new Map<number, ElementRef<HTMLElement>[]>()
4650
/**
4751
* The map holds reference to the excluded drag elements inside instances
4852
* of the provided template.
53+
*
54+
* @internal
4955
*/
50-
gutterToExcludeDragElementMap = new Map<number, ElementRef<HTMLElement>[]>()
51-
52-
constructor(public template: TemplateRef<SplitGutterTemplateContext>) {}
56+
readonly _gutterToExcludeDragElementMap = new Map<number, ElementRef<HTMLElement>[]>()
5357

54-
canStartDragging(originElement: HTMLElement, gutterNum: number) {
55-
if (this.gutterToExcludeDragElementMap.has(gutterNum)) {
56-
const isInsideExclude = this.gutterToExcludeDragElementMap
58+
/**
59+
* @internal
60+
*/
61+
_canStartDragging(originElement: HTMLElement, gutterNum: number) {
62+
if (this._gutterToExcludeDragElementMap.has(gutterNum)) {
63+
const isInsideExclude = this._gutterToExcludeDragElementMap
5764
.get(gutterNum)
5865
.some((gutterExcludeElement) => gutterExcludeElement.nativeElement.contains(originElement))
5966

@@ -62,24 +69,30 @@ export class SplitGutterDirective {
6269
}
6370
}
6471

65-
if (this.gutterToHandleElementMap.has(gutterNum)) {
66-
return this.gutterToHandleElementMap
72+
if (this._gutterToHandleElementMap.has(gutterNum)) {
73+
return this._gutterToHandleElementMap
6774
.get(gutterNum)
6875
.some((gutterHandleElement) => gutterHandleElement.nativeElement.contains(originElement))
6976
}
7077

7178
return true
7279
}
7380

74-
addToMap(map: Map<number, ElementRef<HTMLElement>[]>, gutterNum: number, elementRef: ElementRef<HTMLElement>) {
81+
/**
82+
* @internal
83+
*/
84+
_addToMap(map: Map<number, ElementRef<HTMLElement>[]>, gutterNum: number, elementRef: ElementRef<HTMLElement>) {
7585
if (map.has(gutterNum)) {
7686
map.get(gutterNum).push(elementRef)
7787
} else {
7888
map.set(gutterNum, [elementRef])
7989
}
8090
}
8191

82-
removedFromMap(map: Map<number, ElementRef<HTMLElement>[]>, gutterNum: number, elementRef: ElementRef<HTMLElement>) {
92+
/**
93+
* @internal
94+
*/
95+
_removedFromMap(map: Map<number, ElementRef<HTMLElement>[]>, gutterNum: number, elementRef: ElementRef<HTMLElement>) {
8396
const elements = map.get(gutterNum)
8497
elements.splice(elements.indexOf(elementRef), 1)
8598

@@ -88,7 +101,7 @@ export class SplitGutterDirective {
88101
}
89102
}
90103

91-
static ngTemplateContextGuard(dir: SplitGutterDirective, ctx: unknown): ctx is SplitGutterTemplateContext {
104+
static ngTemplateContextGuard(_dir: SplitGutterDirective, ctx: unknown): ctx is SplitGutterTemplateContext {
92105
return true
93106
}
94107
}

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -242,7 +242,10 @@ export class SplitComponent {
242242
filter(
243243
(context) =>
244244
!this.customGutter() ||
245-
this.customGutter().canStartDragging(context.mouseDownEvent.target as HTMLElement, context.gutterIndex + 1),
245+
this.customGutter()._canStartDragging(
246+
context.mouseDownEvent.target as HTMLElement,
247+
context.gutterIndex + 1,
248+
),
246249
),
247250
switchMap((mouseDownContext) =>
248251
// As we have gutterClickDeltaPx we can't just start the drag but need to make sure

0 commit comments

Comments
 (0)