update scroll controls component to use NgtHtml

Author: nartc

libs/core/src/index.ts

@@ -1,6 +1,7 @@
 export * from './lib/canvas';
 export * from './lib/directives/args';
 export { NgtCamera, NgtComputeFunction, NgtDomEvent, NgtThreeEvent } from './lib/events';
+export * from './lib/html';
 export * from './lib/instance';
 export * from './lib/loader';
 export { addAfterEffect, addEffect, addTail } from './lib/loop';

libs/core/src/lib/html.ts

@@ -0,0 +1,55 @@
+import {
+	AbstractType,
+	DestroyRef,
+	Directive,
+	ElementRef,
+	inject,
+	InjectionToken,
+	Provider,
+	ProviderToken,
+	Type,
+} from '@angular/core';
+import { HTML } from './renderer';
+import { injectStore } from './store';
+import { NgtAnyRecord } from './types';
+
+const NGT_HTML_DOM_ELEMENT = new InjectionToken<'gl' | HTMLElement>('NGT_HTML_DOM_ELEMENT');
+
+export function provideHTMLDomElement(): Provider;
+export function provideHTMLDomElement<
+	TDeps extends Array<ProviderToken<any>>,
+	TValues extends {
+		[K in keyof TDeps]: TDeps[K] extends Type<infer T> | AbstractType<infer T> | InjectionToken<infer T> ? T : never;
+	},
+>(deps: TDeps, factory: (...args: TValues) => HTMLElement): Provider;
+export function provideHTMLDomElement(...args: any[]) {
+	if (args.length === 0) {
+		return { provide: NGT_HTML_DOM_ELEMENT, useFactory: () => 'gl' };
+	}
+
+	return { provide: NGT_HTML_DOM_ELEMENT, useFactory: args.pop(), deps: args };
+}
+
+@Directive()
+export abstract class NgtHTML {
+	static [HTML] = true;
+
+	protected store = injectStore();
+	protected destroyRef = inject(DestroyRef);
+	protected host = inject<ElementRef<HTMLElement>>(ElementRef);
+	protected domElement = inject(NGT_HTML_DOM_ELEMENT, { self: true, optional: true });
+
+	constructor() {
+		if (this.domElement === 'gl') {
+			Object.assign(this.host.nativeElement, {
+				__ngt_dom_parent__: this.store.snapshot.gl.domElement.parentElement,
+			});
+		} else if (this.domElement) {
+			Object.assign(this.host.nativeElement, { __ngt_dom_parent__: this.domElement });
+		}
+
+		this.destroyRef.onDestroy(() => {
+			delete (this.host.nativeElement as NgtAnyRecord)['__ngt_dom_parent__'];
+		});
+	}
+}

libs/core/src/lib/renderer/utils.ts

@@ -16,17 +16,6 @@ export const enum NgtRendererClassId {
 	injectorFactory,
 }
 
-// export function kebabToPascal(str: string): string {
-// 	// split the string at each hyphen
-// 	const parts = str.split('-');
-//
-// 	// map over the parts, capitalizing the first letter of each part
-// 	const pascalParts = parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1));
-//
-// 	// join the parts together to create the final PascalCase string
-// 	return pascalParts.join('');
-// }
-
 export function kebabToPascal(str: string): string {
 	if (!str) return str; // Handle empty input
 

libs/soba/controls/src/lib/scroll-controls.ts

@@ -3,15 +3,14 @@ import {
 	afterNextRender,
 	ChangeDetectionStrategy,
 	Component,
-	CUSTOM_ELEMENTS_SCHEMA,
-	DestroyRef,
+	Directive,
 	ElementRef,
 	inject,
 	input,
 	model,
 	untracked,
 } from '@angular/core';
-import { extend, HTML, injectBeforeRender, injectStore, NgtAnyRecord, pick } from 'angular-three';
+import { injectBeforeRender, injectStore, NgtHTML, pick, provideHTMLDomElement } from 'angular-three';
 import { easing } from 'maath';
 import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { mergeInputs } from 'ngxtension/inject-inputs';
@@ -280,23 +279,14 @@ export class NgtsScrollControls {
 	}
 }
 
-@Component({
-	selector: 'ngt-group[ngts-scroll-canvas]',
-	standalone: true,
-	template: `
-		<ng-content />
-	`,
-	schemas: [CUSTOM_ELEMENTS_SCHEMA],
-	changeDetection: ChangeDetectionStrategy.OnPush,
-})
+@Directive({ selector: 'ngt-group[ngts-scroll-canvas]', standalone: true })
 export class NgtsScrollCanvas {
 	private host = inject<ElementRef<Group>>(ElementRef);
 	private scrollControls = inject(NgtsScrollControls);
 	private store = injectStore();
 	private viewport = this.store.select('viewport');
 
 	constructor() {
-		extend({ Group });
 		injectBeforeRender(() => {
 			const group = this.host.nativeElement;
 
@@ -310,31 +300,18 @@ export class NgtsScrollCanvas {
 	}
 }
 
-@Component({
+@Directive({
 	selector: 'div[ngts-scroll-html]',
 	standalone: true,
-	template: `
-		<ng-content />
-	`,
-	changeDetection: ChangeDetectionStrategy.OnPush,
-	host: {
-		style: 'position: absolute; top: 0; left: 0; will-change: transform;',
-	},
+	host: { style: 'position: absolute; top: 0; left: 0; will-change: transform;' },
+	providers: [provideHTMLDomElement([NgtsScrollControls], (scrollControls) => scrollControls.fixed)],
 })
-export class NgtsScrollHtml {
-	static [HTML] = true;
-
+export class NgtsScrollHtml extends NgtHTML {
 	private scrollControls = inject(NgtsScrollControls);
-	private host = inject<ElementRef<HTMLDivElement>>(ElementRef);
-	private store = injectStore();
 	private size = this.store.select('size');
 
 	constructor() {
-		// assigning dom parent so that the Renderer knows where to attach the element
-		Object.assign(this.host.nativeElement, {
-			__ngt_dom_parent__: this.scrollControls.fixed,
-		});
-
+		super();
 		injectBeforeRender(() => {
 			if (this.scrollControls.delta > this.scrollControls.eps()) {
 				this.host.nativeElement.style.transform = `translate3d(${
@@ -344,9 +321,5 @@ export class NgtsScrollHtml {
 				}px,${this.scrollControls.horizontal() ? 0 : this.size().height * (this.scrollControls.pages() - 1) * -this.scrollControls.offset}px,0)`;
 			}
 		});
-
-		inject(DestroyRef).onDestroy(() => {
-			delete (this.host.nativeElement as NgtAnyRecord)['__ngt_dom_parent__'];
-		});
 	}
 }

libs/soba/src/controls/scroll-controls.stories.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input, signal, Signal } from '@angular/core';
 import { Meta } from '@storybook/angular';
-import { HTML, injectStore, NgtSize } from 'angular-three';
+import { injectStore, NgtHTML } from 'angular-three';
 import {
 	NgtsScrollCanvas,
 	NgtsScrollControls,
@@ -82,13 +82,10 @@ class Suzanne {
 			mes.
 		</h1>
 	`,
-
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-class HtmlContent {
-	static [HTML] = true;
-
-	canvasSize = input.required<NgtSize>();
+class HtmlContent extends NgtHTML {
+	canvasSize = this.store.select('size');
 }
 
 @Component({
@@ -102,7 +99,7 @@ class HtmlContent {
 			</ngt-group>
 
 			<div ngts-scroll-html style="width: 100%; color: #ec2d2d">
-				<scroll-html-content [canvasSize]="canvasSize()" />
+				<scroll-html-content />
 			</div>
 		</ngts-scroll-controls>
 	`,