11import { NumberInput } from '@angular/cdk/coercion' ;
2- import { ConnectionPositionPair } from '@angular/cdk/overlay' ;
2+ import { ConnectedOverlayPositionChange } from '@angular/cdk/overlay' ;
33import {
44 afterNextRender ,
55 computed ,
@@ -14,14 +14,17 @@ import {
1414 signal ,
1515 untracked
1616} from '@angular/core' ;
17- import { getArrowPositionParams , getSideAndAlignFromAllPossibleConnectedPositions } from '@radix-ng/primitives/core' ;
17+ import { toSignal } from '@angular/core/rxjs-interop' ;
18+ import {
19+ getArrowPositionParams ,
20+ getSideAndAlignFromAllPossibleConnectedPositions ,
21+ RDX_POSITIONING_DEFAULTS
22+ } from '@radix-ng/primitives/core' ;
1823import { RdxTooltipArrowToken } from './tooltip-arrow.token' ;
19- import { RdxTooltipContentToken } from './tooltip-content.token' ;
20- import { injectTooltipRoot } from './tooltip-root.directive' ;
24+ import { injectTooltipRoot } from './tooltip-root.inject' ;
2125
2226@Directive ( {
2327 selector : '[rdxTooltipArrow]' ,
24- standalone : true ,
2528 providers : [
2629 {
2730 provide : RdxTooltipArrowToken ,
@@ -30,32 +33,24 @@ import { injectTooltipRoot } from './tooltip-root.directive';
3033 ]
3134} )
3235export class RdxTooltipArrowDirective {
33- /** @ignore */
34- readonly tooltipRoot = injectTooltipRoot ( ) ;
3536 /** @ignore */
3637 private readonly renderer = inject ( Renderer2 ) ;
3738 /** @ignore */
38- private readonly contentDirective = inject ( RdxTooltipContentToken ) ;
39+ private readonly rootDirective = injectTooltipRoot ( ) ;
3940 /** @ignore */
40- private readonly elementRef = inject < ElementRef < HTMLElement > > ( ElementRef ) ;
41+ readonly elementRef = inject ( ElementRef ) ;
4142
4243 /**
43- * The width of the arrow in pixels.
44+ * @description The width of the arrow in pixels.
45+ * @default 10
4446 */
45- readonly width = input < number , NumberInput > ( 10 , { transform : numberAttribute } ) ;
47+ readonly width = input < number , NumberInput > ( RDX_POSITIONING_DEFAULTS . arrow . width , { transform : numberAttribute } ) ;
4648
4749 /**
48- * The height of the arrow in pixels.
50+ * @description The height of the arrow in pixels.
51+ * @default 5
4952 */
50- readonly height = input < number , NumberInput > ( 5 , { transform : numberAttribute } ) ;
51-
52- /**
53- * @ignore
54- * */
55- private triggerRect : DOMRect ;
56-
57- /** @ignore */
58- private readonly currentArrowSvgElement = signal < HTMLOrSVGElement | undefined > ( void 0 ) ;
53+ readonly height = input < number , NumberInput > ( RDX_POSITIONING_DEFAULTS . arrow . height , { transform : numberAttribute } ) ;
5954
6055 /** @ignore */
6156 readonly arrowSvgElement = computed < HTMLElement > ( ( ) => {
@@ -74,6 +69,14 @@ export class RdxTooltipArrowDirective {
7469 return svgElement ;
7570 } ) ;
7671
72+ /** @ignore */
73+ private readonly currentArrowSvgElement = signal < HTMLOrSVGElement | undefined > ( void 0 ) ;
74+ /** @ignore */
75+ private readonly position = toSignal ( this . rootDirective . contentDirective ( ) . positionChange ( ) ) ;
76+
77+ /** @ignore */
78+ private anchorOrTriggerRect : DOMRect ;
79+
7780 constructor ( ) {
7881 afterNextRender ( {
7982 write : ( ) => {
@@ -85,20 +88,24 @@ export class RdxTooltipArrowDirective {
8588 this . renderer . setStyle ( this . elementRef . nativeElement , 'fontSize' , '0px' ) ;
8689 }
8790 } ) ;
91+ this . onArrowSvgElementChangeEffect ( ) ;
92+ this . onContentPositionAndArrowDimensionsChangeEffect ( ) ;
8893 }
8994
9095 /** @ignore */
91- private setTriggerRect ( ) {
92- this . triggerRect = this . tooltipRoot . tooltipTriggerDirective ( ) . elementRef . nativeElement . getBoundingClientRect ( ) ;
96+ private setAnchorOrTriggerRect ( ) {
97+ this . anchorOrTriggerRect = (
98+ this . rootDirective . anchorDirective ( ) ?? this . rootDirective . triggerDirective ( )
99+ ) . elementRef . nativeElement . getBoundingClientRect ( ) ;
93100 }
94101
95102 /** @ignore */
96- private setPosition ( position : ConnectionPositionPair , arrowDimensions : { width : number ; height : number } ) {
97- this . setTriggerRect ( ) ;
103+ private setPosition ( position : ConnectedOverlayPositionChange , arrowDimensions : { width : number ; height : number } ) {
104+ this . setAnchorOrTriggerRect ( ) ;
98105 const posParams = getArrowPositionParams (
99- getSideAndAlignFromAllPossibleConnectedPositions ( position ) ,
106+ getSideAndAlignFromAllPossibleConnectedPositions ( position . connectionPair ) ,
100107 { width : arrowDimensions . width , height : arrowDimensions . height } ,
101- { width : this . triggerRect . width , height : this . triggerRect . height }
108+ { width : this . anchorOrTriggerRect . width , height : this . anchorOrTriggerRect . height }
102109 ) ;
103110
104111 this . renderer . setStyle ( this . elementRef . nativeElement , 'top' , posParams . top ) ;
@@ -110,29 +117,33 @@ export class RdxTooltipArrowDirective {
110117 }
111118
112119 /** @ignore */
113- private readonly onArrowSvgElementChangeEffect = effect ( ( ) => {
114- const arrowElement = this . arrowSvgElement ( ) ;
115- untracked ( ( ) => {
116- const currentArrowSvgElement = this . currentArrowSvgElement ( ) ;
117- if ( currentArrowSvgElement ) {
118- this . renderer . removeChild ( this . elementRef . nativeElement , currentArrowSvgElement ) ;
119- }
120- this . currentArrowSvgElement . set ( arrowElement ) ;
121- this . renderer . setStyle ( this . elementRef . nativeElement , 'width' , `${ this . width ( ) } ) ;
122- this . renderer . setStyle ( this . elementRef . nativeElement , 'height' , `${ this . height ( ) } ) ;
123- this . renderer . appendChild ( this . elementRef . nativeElement , this . currentArrowSvgElement ( ) ) ;
120+ private onArrowSvgElementChangeEffect ( ) {
121+ effect ( ( ) => {
122+ const arrowElement = this . arrowSvgElement ( ) ;
123+ untracked ( ( ) => {
124+ const currentArrowSvgElement = this . currentArrowSvgElement ( ) ;
125+ if ( currentArrowSvgElement ) {
126+ this . renderer . removeChild ( this . elementRef . nativeElement , currentArrowSvgElement ) ;
127+ }
128+ this . currentArrowSvgElement . set ( arrowElement ) ;
129+ this . renderer . setStyle ( this . elementRef . nativeElement , 'width' , `${ this . width ( ) } ) ;
130+ this . renderer . setStyle ( this . elementRef . nativeElement , 'height' , `${ this . height ( ) } ) ;
131+ this . renderer . appendChild ( this . elementRef . nativeElement , this . currentArrowSvgElement ( ) ) ;
132+ } ) ;
124133 } ) ;
125- } ) ;
134+ }
126135
127136 /** @ignore */
128- private readonly onContentPositionAndArrowDimensionsChangeEffect = effect ( ( ) => {
129- const position = this . contentDirective . position ( ) ;
130- const arrowDimensions = { width : this . width ( ) , height : this . height ( ) } ;
131- untracked ( ( ) => {
132- if ( ! position ) {
133- return ;
134- }
135- this . setPosition ( position , arrowDimensions ) ;
137+ private onContentPositionAndArrowDimensionsChangeEffect ( ) {
138+ effect ( ( ) => {
139+ const position = this . position ( ) ;
140+ const arrowDimensions = { width : this . width ( ) , height : this . height ( ) } ;
141+ untracked ( ( ) => {
142+ if ( ! position ) {
143+ return ;
144+ }
145+ this . setPosition ( position , arrowDimensions ) ;
146+ } ) ;
136147 } ) ;
137- } ) ;
148+ }
138149}
0 commit comments