use common soba content

Author: nartc

libs/soba/abstractions/src/edges/edges.ts

@@ -1,6 +1,7 @@
 import { NgIf, NgTemplateOutlet } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, Component, ContentChild, Directive, Input, TemplateRef, effect } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, Component, ContentChild, Input, TemplateRef, effect } from '@angular/core';
 import { extend, injectNgtRef, signalStore, type NgtAnyRecord, type NgtLineSegments } from 'angular-three';
+import { NgtsSobaContent } from 'angular-three-soba/misc';
 import * as THREE from 'three';
 import { LineBasicMaterial, LineSegments } from 'three';
 
@@ -22,9 +23,6 @@ declare global {
 
 extend({ LineSegments, LineBasicMaterial });
 
-@Directive({ selector: 'ng-template[ngtsEdgesContent]', standalone: true })
-export class NgtsEdgesContent {}
-
 @Component({
 	selector: 'ngts-edges',
 	standalone: true,
@@ -42,7 +40,7 @@ export class NgtsEdgesContent {}
 export class NgtsEdges {
 	nullRaycast = () => null;
 
-	@ContentChild(NgtsEdgesContent, { read: TemplateRef }) content?: TemplateRef<unknown>;
+	@ContentChild(NgtsSobaContent, { read: TemplateRef }) content?: TemplateRef<unknown>;
 
 	private inputs = signalStore<NgtsEdgesState>({ threshold: 15, color: 'black' });
 

libs/soba/misc/src/caustics/caustics.ts

@@ -1,8 +1,8 @@
 import { NgIf } from '@angular/common';
 import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, ElementRef, Input } from '@angular/core';
 import { extend, injectNgtRef, injectNgtStore, NgtGroup, signalStore } from 'angular-three';
-import { NgtsEdges, NgtsEdgesContent } from 'angular-three-soba/abstractions';
-import { injectNgtsFBO } from 'angular-three-soba/misc';
+import { NgtsEdges } from 'angular-three-soba/abstractions';
+import { injectNgtsFBO, NgtsSobaContent } from 'angular-three-soba/misc';
 import { CausticsMaterial, CausticsProjectionMaterial } from 'angular-three-soba/shaders';
 import * as THREE from 'three';
 import { Group, LineBasicMaterial, Mesh, OrthographicCamera, PlaneGeometry, Scene } from 'three';
@@ -129,12 +129,12 @@ declare global {
 				/>
 
 				<ngts-edges *ngIf="debug()">
-					<ngt-line-basic-material *ngtEdgesContent color="#ffff00" [toneMapped]="false" />
+					<ngt-line-basic-material *ngtsSobaContent color="#ffff00" [toneMapped]="false" />
 				</ngts-edges>
 			</ngt-mesh>
 		</ngt-group>
 	`,
-	imports: [NgIf, NgtsEdges, NgtsEdgesContent],
+	imports: [NgIf, NgtsEdges, NgtsSobaContent],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class NgtsCaustics {

libs/soba/misc/src/content/content.ts

@@ -0,0 +1,7 @@
+import { Directive, Injector, TemplateRef, inject } from '@angular/core';
+
+@Directive({ selector: 'ng-template[ngtsSobaContent]', standalone: true, exportAs: 'sobaContent' })
+export class NgtsSobaContent {
+	injector = inject(Injector);
+	template = inject(TemplateRef);
+}

libs/soba/misc/src/html/html.ts

@@ -3,7 +3,6 @@ import {
 	CUSTOM_ELEMENTS_SCHEMA,
 	Component,
 	ContentChild,
-	Directive,
 	EventEmitter,
 	Input,
 	Output,
@@ -23,6 +22,7 @@ import {
 } from 'angular-three';
 import * as THREE from 'three';
 import { Group, Mesh, PlaneGeometry, ShaderMaterial } from 'three';
+import { NgtsSobaContent } from '../content/content';
 import { NgtsHtmlWrapper, defaultCalculatePosition } from './html-wrapper';
 
 extend({ Group, PlaneGeometry, Mesh, ShaderMaterial });
@@ -70,9 +70,6 @@ export const [injectNgtsHtmlInputs, provideNgtsHtmlInputs] = createInjectionToke
 	{ isRoot: false, deps: [forwardRef(() => NgtsHtml)] },
 );
 
-@Directive({ selector: 'ng-template[ngtsHtmlContent]', standalone: true })
-export class NgtsHtmlContent {}
-
 declare global {
 	interface HTMLElementTagNameMap {
 		/**
@@ -129,7 +126,7 @@ export class NgtsHtml {
 		receiveShadow: false,
 	});
 
-	@ContentChild(NgtsHtmlContent, { read: TemplateRef }) set content(content: TemplateRef<unknown>) {
+	@ContentChild(NgtsSobaContent, { read: TemplateRef }) set content(content: TemplateRef<unknown>) {
 		this.inputs.set({ content });
 	}
 

libs/soba/misc/src/index.ts

@@ -1,6 +1,7 @@
 export * from './animations/animations';
 export * from './bake-shadows/bake-shadows';
 export * from './caustics/caustics';
+export * from './content/content';
 export * from './decal/decal';
 export * from './depth-buffer/depth-buffer';
 export * from './example/example';

libs/soba/performances/src/points/points.ts

@@ -3,7 +3,6 @@ import {
 	CUSTOM_ELEMENTS_SCHEMA,
 	Component,
 	ContentChild,
-	Directive,
 	Injector,
 	Input,
 	NgZone,
@@ -28,6 +27,7 @@ import {
 	type NgtPoints,
 	type NgtRef,
 } from 'angular-three';
+import { NgtsSobaContent } from 'angular-three-soba/misc';
 import * as THREE from 'three';
 import { BufferAttribute, BufferGeometry, Points } from 'three';
 import { NgtsPointsInput, type NgtsPointsBuffersState, type NgtsPointsInstancesState } from './points-input';
@@ -278,9 +278,6 @@ export class NgtsPointsBuffers {
 	}
 }
 
-@Directive({ selector: 'ng-template[ngtsPointsContent]', standalone: true })
-export class NgtsPointsContent {}
-
 @Component({
 	selector: 'ngts-points',
 	standalone: true,
@@ -298,5 +295,5 @@ export class NgtsPointsContent {}
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class NgtsPoints extends NgtsPointsInput {
-	@ContentChild(NgtsPointsContent, { static: true, read: TemplateRef }) content!: TemplateRef<unknown>;
+	@ContentChild(NgtsSobaContent, { static: true, read: TemplateRef }) content!: TemplateRef<unknown>;
 }

libs/soba/src/misc/html.stories.ts

@@ -1,6 +1,6 @@
 import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from '@angular/core';
 import { NgtArgs, injectNgtRef } from 'angular-three';
-import { NgtsHtml, NgtsHtmlContent } from 'angular-three-soba/misc';
+import { NgtsHtml, NgtsSobaContent } from 'angular-three-soba/misc';
 import { Mesh } from 'three';
 import { makeDecorators, makeStoryFunction, makeStoryObject, turn } from '../setup-canvas';
 
@@ -22,31 +22,31 @@ class HtmlContent {
 				<ngt-icosahedron-geometry *args="[2, 2]" />
 				<ngt-mesh-basic-material [color]="color" [wireframe]="true" />
 				<ngts-html [distanceFactor]="distanceFactor" [renderedDivClass]="className" [transform]="transform">
-					<div *ngtsHtmlContent><html-content text="First" /></div>
+					<div *ngtsSobaContent><html-content text="First" /></div>
 				</ngts-html>
 			</ngt-mesh>
 
 			<ngt-mesh [position]="[10, 0, 10]">
 				<ngt-icosahedron-geometry *args="[2, 2]" />
 				<ngt-mesh-basic-material [color]="color" [wireframe]="true" />
 				<ngts-html [distanceFactor]="distanceFactor" [renderedDivClass]="className" [transform]="transform">
-					<div *ngtsHtmlContent><html-content text="Second" /></div>
+					<div *ngtsSobaContent><html-content text="Second" /></div>
 				</ngts-html>
 			</ngt-mesh>
 
 			<ngt-mesh [position]="[-20, 0, -20]">
 				<ngt-icosahedron-geometry *args="[2, 2]" />
 				<ngt-mesh-basic-material [color]="color" [wireframe]="true" />
 				<ngts-html [distanceFactor]="distanceFactor" [renderedDivClass]="className" [transform]="transform">
-					<div *ngtsHtmlContent><html-content text="Third" /></div>
+					<div *ngtsSobaContent><html-content text="Third" /></div>
 				</ngts-html>
 			</ngt-mesh>
 
 			<ng-content />
 		</ngt-group>
 	`,
 	// NOTE: I think createComponent might work better than createEmbeddedView
-	imports: [NgtsHtml, NgtsHtmlContent, NgtArgs, HtmlContent],
+	imports: [NgtsHtml, NgtsSobaContent, NgtArgs, HtmlContent],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 class DefaultHtmlStory {
@@ -74,11 +74,11 @@ class DefaultHtmlStory {
 				[position]="[5, 15, 0]"
 				[style]="{ background: 'palegreen', fontSize: '50px', padding: '10px 18px', border: '2px solid black' }"
 			>
-				<html-content *ngtsHtmlContent text="Transform mode" />
+				<html-content *ngtsSobaContent text="Transform mode" />
 			</ngts-html>
 		</default-html-story>
 	`,
-	imports: [DefaultHtmlStory, NgtsHtml, NgtsHtmlContent, HtmlContent],
+	imports: [DefaultHtmlStory, NgtsHtml, NgtsSobaContent, HtmlContent],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 class TransformHtmlStory {}
@@ -91,7 +91,7 @@ class TransformHtmlStory {}
 				<ngt-icosahedron-geometry *args="[5, 5]" />
 				<ngt-mesh-basic-material color="hotpink" />
 				<ngts-html [position]="[0, 0, -6]" renderedDivClass="html-story-label" occlude="blending">
-					<span *ngtsHtmlContent>Blending</span>
+					<span *ngtsSobaContent>Blending</span>
 				</ngts-html>
 			</ngt-mesh>
 
@@ -104,7 +104,7 @@ class TransformHtmlStory {}
 					renderedDivClass="html-story-label html-story-label-B"
 					occlude="blending"
 				>
-					<span *ngtsHtmlContent>Blending w/ transform</span>
+					<span *ngtsSobaContent>Blending w/ transform</span>
 				</ngts-html>
 			</ngt-mesh>
 
@@ -117,14 +117,14 @@ class TransformHtmlStory {}
 					renderedDivClass="html-story-label"
 					[occlude]="[occluderRef]"
 				>
-					<span *ngtsHtmlContent>Raycast occlusion</span>
+					<span *ngtsSobaContent>Raycast occlusion</span>
 				</ngts-html>
 			</ngt-mesh>
 		</ngt-group>
 		<ngt-ambient-light [intensity]="0.8" />
 		<ngt-point-light [intensity]="1" [position]="[0, 6, 0]" />
 	`,
-	imports: [NgtArgs, NgtsHtml, NgtsHtmlContent],
+	imports: [NgtArgs, NgtsHtml, NgtsSobaContent],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 class OccludeHtmlStory {

libs/soba/src/performances/points.stories.ts

@@ -1,12 +1,13 @@
 import { CUSTOM_ELEMENTS_SCHEMA, Component, Input, effect, signal } from '@angular/core';
 import { extend, injectBeforeRender, injectNgtStore } from 'angular-three';
 import { NgtsPointMaterial } from 'angular-three-soba/materials';
-import { NgtsPoint, NgtsPoints, NgtsPointsContent } from 'angular-three-soba/performances';
+import { NgtsPoint, NgtsPoints } from 'angular-three-soba/performances';
 import { shaderMaterial } from 'angular-three-soba/shaders';
 import * as THREE from 'three';
 import { makeCanvasOptions, makeDecorators, makeStoryFunction } from '../setup-canvas';
 
 import { NgFor } from '@angular/common';
+import { NgtsSobaContent } from 'angular-three-soba/misc';
 import * as buffer from 'maath/buffer';
 import * as misc from 'maath/misc';
 
@@ -82,7 +83,7 @@ class PointEvent {
 	standalone: true,
 	template: `
 		<ngts-points [limit]="points.length" [range]="points.length">
-			<ng-template ngtsPointsContent>
+			<ng-template ngtsSobaContent>
 				<ngts-point-material
 					[transparent]="true"
 					[vertexColors]="true"
@@ -94,7 +95,7 @@ class PointEvent {
 			</ng-template>
 		</ngts-points>
 	`,
-	imports: [NgtsPoints, NgtsPointsContent, NgFor, NgtsPointMaterial, PointEvent],
+	imports: [NgtsPoints, NgtsSobaContent, NgFor, NgtsPointMaterial, PointEvent],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 class PointsSelectionStory {
@@ -123,13 +124,13 @@ class PointsSelectionStory {
 	standalone: true,
 	template: `
 		<ngts-points>
-			<ng-template ngtsPointsContent>
+			<ng-template ngtsSobaContent>
 				<points-point-event *ngFor="let p of points" [position]="p.v3" [color]="p.v3" [size]="p.size" />
 				<ngt-my-points-material />
 			</ng-template>
 		</ngts-points>
 	`,
-	imports: [NgtsPoints, NgtsPointsContent, PointEvent, NgFor],
+	imports: [NgtsPoints, NgtsSobaContent, PointEvent, NgFor],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 class PointsInstancesStory {
@@ -158,10 +159,10 @@ class PointsInstancesStory {
 	standalone: true,
 	template: `
 		<ngts-points [positions]="positionFinal" [colors]="color" [sizes]="size">
-			<ngt-my-points-material *ngtsPointsContent />
+			<ngt-my-points-material *ngtsSobaContent />
 		</ngts-points>
 	`,
-	imports: [NgtsPoints, NgtsPointsContent],
+	imports: [NgtsPoints, NgtsSobaContent],
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 class PointsBuffersStory {

libs/soba/staging/src/environment/environment.ts

@@ -1,14 +1,12 @@
 import { NgIf, NgTemplateOutlet } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, Component, ContentChild, Directive, TemplateRef } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, Component, ContentChild, TemplateRef } from '@angular/core';
+import { NgtsSobaContent } from 'angular-three-soba/misc';
 import { NgtsEnvironmentCube } from './environment-cube';
 import { NgtsEnvironmentGround } from './environment-ground';
 import { NgtsEnvironmentInput } from './environment-input';
 import { NgtsEnvironmentMap } from './environment-map';
 import { NgtsEnvironmentPortal } from './environment-portal';
 
-@Directive({ selector: 'ng-template[ngtsEnvironmentContent]', standalone: true })
-export class NgtsEnvironmentContent {}
-
 @Component({
 	selector: 'ngts-environment',
 	standalone: true,
@@ -38,5 +36,5 @@ export class NgtsEnvironmentContent {}
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class NgtsEnvironment extends NgtsEnvironmentInput {
-	@ContentChild(NgtsEnvironmentContent, { read: TemplateRef }) content?: TemplateRef<unknown>;
+	@ContentChild(NgtsSobaContent, { read: TemplateRef }) content?: TemplateRef<unknown>;
 }