Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite3227ae

Browse files
HarpushJefiozie
andauthored
refactor: change gutter directives to modern angular (#479)
Co-authored-by: Jeffrey Bosch <Jefiozie@users.noreply.github.com>
1 parent12d12a0 commite3227ae

File tree

5 files changed

+67
-54
lines changed

5 files changed

+67
-54
lines changed
Lines changed: 8 additions & 10 deletions
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-
exportclassSplitGutterDragHandleDirectiveimplementsOnInit,OnDestroy{
10-
constructor(
11-
@Inject(GUTTER_NUM_TOKEN)privategutterNum:number,
12-
privateelementRef:ElementRef<HTMLElement>,
13-
privategutterDir:SplitGutterDirective,
14-
){}
9+
exportclassSplitGutterDragHandleDirectiveimplementsOnDestroy{
10+
privatereadonlygutterNum=inject(GUTTER_NUM_TOKEN)
11+
privatereadonlyelementRef=inject<ElementRef<HTMLElement>>(ElementRef)
12+
privatereadonlygutterDir=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‎

Lines changed: 21 additions & 20 deletions
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
interfaceSplitGutterDynamicInjectorTemplateContext{
@@ -14,30 +14,31 @@ interface SplitGutterDynamicInjectorTemplateContext {
1414
standalone:true,
1515
})
1616
exportclassSplitGutterDynamicInjectorDirective{
17-
@Input('asSplitGutterDynamicInjector')
18-
setgutterNum(value:number){
19-
this.vcr.clear()
17+
privatereadonlyvcr=inject(ViewContainerRef)
18+
privatereadonlytemplateRef=inject<TemplateRef<SplitGutterDynamicInjectorTemplateContext>>(TemplateRef)
2019

21-
constinjector=Injector.create({
22-
providers:[
23-
{
24-
provide:GUTTER_NUM_TOKEN,
25-
useValue:value,
26-
},
27-
],
28-
parent:this.vcr.injector,
29-
})
20+
protectedreadonlygutterNum=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+
constinjector=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-
privatevcr:ViewContainerRef,
36-
privatetemplateRef:TemplateRef<SplitGutterDynamicInjectorTemplateContext>,
37-
){}
36+
this.vcr.createEmbeddedView(this.templateRef,{$implicit:injector})
37+
})
38+
}
3839

3940
staticngTemplateContextGuard(
40-
dir:SplitGutterDynamicInjectorDirective,
41+
_dir:SplitGutterDynamicInjectorDirective,
4142
ctx:unknown,
4243
):ctx isSplitGutterDynamicInjectorTemplateContext{
4344
returntrue
Lines changed: 8 additions & 10 deletions
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-
exportclassSplitGutterExcludeFromDragDirectiveimplementsOnInit,OnDestroy{
10-
constructor(
11-
@Inject(GUTTER_NUM_TOKEN)privategutterNum:number,
12-
privateelementRef:ElementRef<HTMLElement>,
13-
privategutterDir:SplitGutterDirective,
14-
){}
9+
exportclassSplitGutterExcludeFromDragDirectiveimplementsOnDestroy{
10+
privatereadonlygutterNum=inject(GUTTER_NUM_TOKEN)
11+
privatereadonlyelementRef=inject<ElementRef<HTMLElement>>(ElementRef)
12+
privatereadonlygutterDir=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‎

Lines changed: 26 additions & 13 deletions
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
exportinterfaceSplitGutterTemplateContext{
@@ -38,22 +38,29 @@ export interface SplitGutterTemplateContext {
3838
standalone:true,
3939
})
4040
exportclassSplitGutterDirective{
41+
readonlytemplate=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=newMap<number,ElementRef<HTMLElement>[]>()
49+
readonly_gutterToHandleElementMap=newMap<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=newMap<number,ElementRef<HTMLElement>[]>()
51-
52-
constructor(publictemplate:TemplateRef<SplitGutterTemplateContext>){}
56+
readonly_gutterToExcludeDragElementMap=newMap<number,ElementRef<HTMLElement>[]>()
5357

54-
canStartDragging(originElement:HTMLElement,gutterNum:number){
55-
if(this.gutterToExcludeDragElementMap.has(gutterNum)){
56-
constisInsideExclude=this.gutterToExcludeDragElementMap
58+
/**
59+
*@internal
60+
*/
61+
_canStartDragging(originElement:HTMLElement,gutterNum:number){
62+
if(this._gutterToExcludeDragElementMap.has(gutterNum)){
63+
constisInsideExclude=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-
returnthis.gutterToHandleElementMap
72+
if(this._gutterToHandleElementMap.has(gutterNum)){
73+
returnthis._gutterToHandleElementMap
6774
.get(gutterNum)
6875
.some((gutterHandleElement)=>gutterHandleElement.nativeElement.contains(originElement))
6976
}
7077

7178
returntrue
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
constelements=map.get(gutterNum)
8497
elements.splice(elements.indexOf(elementRef),1)
8598

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

91-
staticngTemplateContextGuard(dir:SplitGutterDirective,ctx:unknown):ctx isSplitGutterTemplateContext{
104+
staticngTemplateContextGuard(_dir:SplitGutterDirective,ctx:unknown):ctx isSplitGutterTemplateContext{
92105
returntrue
93106
}
94107
}

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

Lines changed: 4 additions & 1 deletion
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.targetasHTMLElement,context.gutterIndex+1),
245+
this.customGutter()._canStartDragging(
246+
context.mouseDownEvent.targetasHTMLElement,
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)
[8]ページ先頭
©2009-2025 Movatter.jp