Skip to content

Commit cefc7c6

Browse files
nartcnartc
committed
use common soba content
1 parent 6062838 commit cefc7c6

File tree

9 files changed

+41
-42
lines changed

9 files changed

+41
-42
lines changed

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { NgIf, NgTemplateOutlet } from '@angular/common';
2-
import { CUSTOM_ELEMENTS_SCHEMA, Component, ContentChild, Directive, Input, TemplateRef, effect } from '@angular/core';
2+
import { CUSTOM_ELEMENTS_SCHEMA, Component, ContentChild, Input, TemplateRef, effect } from '@angular/core';
33
import { extend, injectNgtRef, signalStore, type NgtAnyRecord, type NgtLineSegments } from 'angular-three';
4+
import { NgtsSobaContent } from 'angular-three-soba/misc';
45
import * as THREE from 'three';
56
import { LineBasicMaterial, LineSegments } from 'three';
67

@@ -22,9 +23,6 @@ declare global {
2223

2324
extend({ LineSegments, LineBasicMaterial });
2425

25-
@Directive({ selector: 'ng-template[ngtsEdgesContent]', standalone: true })
26-
export class NgtsEdgesContent {}
27-
2826
@Component({
2927
selector: 'ngts-edges',
3028
standalone: true,
@@ -42,7 +40,7 @@ export class NgtsEdgesContent {}
4240
export class NgtsEdges {
4341
nullRaycast = () => null;
4442

45-
@ContentChild(NgtsEdgesContent, { read: TemplateRef }) content?: TemplateRef<unknown>;
43+
@ContentChild(NgtsSobaContent, { read: TemplateRef }) content?: TemplateRef<unknown>;
4644

4745
private inputs = signalStore<NgtsEdgesState>({ threshold: 15, color: 'black' });
4846

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { NgIf } from '@angular/common';
22
import { Component, computed, CUSTOM_ELEMENTS_SCHEMA, effect, ElementRef, Input } from '@angular/core';
33
import { extend, injectNgtRef, injectNgtStore, NgtGroup, signalStore } from 'angular-three';
4-
import { NgtsEdges, NgtsEdgesContent } from 'angular-three-soba/abstractions';
5-
import { injectNgtsFBO } from 'angular-three-soba/misc';
4+
import { NgtsEdges } from 'angular-three-soba/abstractions';
5+
import { injectNgtsFBO, NgtsSobaContent } from 'angular-three-soba/misc';
66
import { CausticsMaterial, CausticsProjectionMaterial } from 'angular-three-soba/shaders';
77
import * as THREE from 'three';
88
import { Group, LineBasicMaterial, Mesh, OrthographicCamera, PlaneGeometry, Scene } from 'three';
@@ -129,12 +129,12 @@ declare global {
129129
/>
130130
131131
<ngts-edges *ngIf="debug()">
132-
<ngt-line-basic-material *ngtEdgesContent color="#ffff00" [toneMapped]="false" />
132+
<ngt-line-basic-material *ngtsSobaContent color="#ffff00" [toneMapped]="false" />
133133
</ngts-edges>
134134
</ngt-mesh>
135135
</ngt-group>
136136
`,
137-
imports: [NgIf, NgtsEdges, NgtsEdgesContent],
137+
imports: [NgIf, NgtsEdges, NgtsSobaContent],
138138
schemas: [CUSTOM_ELEMENTS_SCHEMA],
139139
})
140140
export class NgtsCaustics {

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { Directive, Injector, TemplateRef, inject } from '@angular/core';
2+
3+
@Directive({ selector: 'ng-template[ngtsSobaContent]', standalone: true, exportAs: 'sobaContent' })
4+
export class NgtsSobaContent {
5+
injector = inject(Injector);
6+
template = inject(TemplateRef);
7+
}

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
CUSTOM_ELEMENTS_SCHEMA,
44
Component,
55
ContentChild,
6-
Directive,
76
EventEmitter,
87
Input,
98
Output,
@@ -23,6 +22,7 @@ import {
2322
} from 'angular-three';
2423
import * as THREE from 'three';
2524
import { Group, Mesh, PlaneGeometry, ShaderMaterial } from 'three';
25+
import { NgtsSobaContent } from '../content/content';
2626
import { NgtsHtmlWrapper, defaultCalculatePosition } from './html-wrapper';
2727

2828
extend({ Group, PlaneGeometry, Mesh, ShaderMaterial });
@@ -70,9 +70,6 @@ export const [injectNgtsHtmlInputs, provideNgtsHtmlInputs] = createInjectionToke
7070
{ isRoot: false, deps: [forwardRef(() => NgtsHtml)] },
7171
);
7272

73-
@Directive({ selector: 'ng-template[ngtsHtmlContent]', standalone: true })
74-
export class NgtsHtmlContent {}
75-
7673
declare global {
7774
interface HTMLElementTagNameMap {
7875
/**
@@ -129,7 +126,7 @@ export class NgtsHtml {
129126
receiveShadow: false,
130127
});
131128

132-
@ContentChild(NgtsHtmlContent, { read: TemplateRef }) set content(content: TemplateRef<unknown>) {
129+
@ContentChild(NgtsSobaContent, { read: TemplateRef }) set content(content: TemplateRef<unknown>) {
133130
this.inputs.set({ content });
134131
}
135132

‎libs/soba/misc/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
export * from './animations/animations';
22
export * from './bake-shadows/bake-shadows';
33
export * from './caustics/caustics';
4+
export * from './content/content';
45
export * from './decal/decal';
56
export * from './depth-buffer/depth-buffer';
67
export * from './example/example';

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
CUSTOM_ELEMENTS_SCHEMA,
44
Component,
55
ContentChild,
6-
Directive,
76
Injector,
87
Input,
98
NgZone,
@@ -28,6 +27,7 @@ import {
2827
type NgtPoints,
2928
type NgtRef,
3029
} from 'angular-three';
30+
import { NgtsSobaContent } from 'angular-three-soba/misc';
3131
import * as THREE from 'three';
3232
import { BufferAttribute, BufferGeometry, Points } from 'three';
3333
import { NgtsPointsInput, type NgtsPointsBuffersState, type NgtsPointsInstancesState } from './points-input';
@@ -278,9 +278,6 @@ export class NgtsPointsBuffers {
278278
}
279279
}
280280

281-
@Directive({ selector: 'ng-template[ngtsPointsContent]', standalone: true })
282-
export class NgtsPointsContent {}
283-
284281
@Component({
285282
selector: 'ngts-points',
286283
standalone: true,
@@ -298,5 +295,5 @@ export class NgtsPointsContent {}
298295
schemas: [CUSTOM_ELEMENTS_SCHEMA],
299296
})
300297
export class NgtsPoints extends NgtsPointsInput {
301-
@ContentChild(NgtsPointsContent, { static: true, read: TemplateRef }) content!: TemplateRef<unknown>;
298+
@ContentChild(NgtsSobaContent, { static: true, read: TemplateRef }) content!: TemplateRef<unknown>;
302299
}

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from '@angular/core';
22
import { NgtArgs, injectNgtRef } from 'angular-three';
3-
import { NgtsHtml, NgtsHtmlContent } from 'angular-three-soba/misc';
3+
import { NgtsHtml, NgtsSobaContent } from 'angular-three-soba/misc';
44
import { Mesh } from 'three';
55
import { makeDecorators, makeStoryFunction, makeStoryObject, turn } from '../setup-canvas';
66

@@ -22,31 +22,31 @@ class HtmlContent {
2222
<ngt-icosahedron-geometry *args="[2, 2]" />
2323
<ngt-mesh-basic-material [color]="color" [wireframe]="true" />
2424
<ngts-html [distanceFactor]="distanceFactor" [renderedDivClass]="className" [transform]="transform">
25-
<div *ngtsHtmlContent><html-content text="First" /></div>
25+
<div *ngtsSobaContent><html-content text="First" /></div>
2626
</ngts-html>
2727
</ngt-mesh>
2828
2929
<ngt-mesh [position]="[10, 0, 10]">
3030
<ngt-icosahedron-geometry *args="[2, 2]" />
3131
<ngt-mesh-basic-material [color]="color" [wireframe]="true" />
3232
<ngts-html [distanceFactor]="distanceFactor" [renderedDivClass]="className" [transform]="transform">
33-
<div *ngtsHtmlContent><html-content text="Second" /></div>
33+
<div *ngtsSobaContent><html-content text="Second" /></div>
3434
</ngts-html>
3535
</ngt-mesh>
3636
3737
<ngt-mesh [position]="[-20, 0, -20]">
3838
<ngt-icosahedron-geometry *args="[2, 2]" />
3939
<ngt-mesh-basic-material [color]="color" [wireframe]="true" />
4040
<ngts-html [distanceFactor]="distanceFactor" [renderedDivClass]="className" [transform]="transform">
41-
<div *ngtsHtmlContent><html-content text="Third" /></div>
41+
<div *ngtsSobaContent><html-content text="Third" /></div>
4242
</ngts-html>
4343
</ngt-mesh>
4444
4545
<ng-content />
4646
</ngt-group>
4747
`,
4848
// NOTE: I think createComponent might work better than createEmbeddedView
49-
imports: [NgtsHtml, NgtsHtmlContent, NgtArgs, HtmlContent],
49+
imports: [NgtsHtml, NgtsSobaContent, NgtArgs, HtmlContent],
5050
schemas: [CUSTOM_ELEMENTS_SCHEMA],
5151
})
5252
class DefaultHtmlStory {
@@ -74,11 +74,11 @@ class DefaultHtmlStory {
7474
[position]="[5, 15, 0]"
7575
[style]="{ background: 'palegreen', fontSize: '50px', padding: '10px 18px', border: '2px solid black' }"
7676
>
77-
<html-content *ngtsHtmlContent text="Transform mode" />
77+
<html-content *ngtsSobaContent text="Transform mode" />
7878
</ngts-html>
7979
</default-html-story>
8080
`,
81-
imports: [DefaultHtmlStory, NgtsHtml, NgtsHtmlContent, HtmlContent],
81+
imports: [DefaultHtmlStory, NgtsHtml, NgtsSobaContent, HtmlContent],
8282
schemas: [CUSTOM_ELEMENTS_SCHEMA],
8383
})
8484
class TransformHtmlStory {}
@@ -91,7 +91,7 @@ class TransformHtmlStory {}
9191
<ngt-icosahedron-geometry *args="[5, 5]" />
9292
<ngt-mesh-basic-material color="hotpink" />
9393
<ngts-html [position]="[0, 0, -6]" renderedDivClass="html-story-label" occlude="blending">
94-
<span *ngtsHtmlContent>Blending</span>
94+
<span *ngtsSobaContent>Blending</span>
9595
</ngts-html>
9696
</ngt-mesh>
9797
@@ -104,7 +104,7 @@ class TransformHtmlStory {}
104104
renderedDivClass="html-story-label html-story-label-B"
105105
occlude="blending"
106106
>
107-
<span *ngtsHtmlContent>Blending w/ transform</span>
107+
<span *ngtsSobaContent>Blending w/ transform</span>
108108
</ngts-html>
109109
</ngt-mesh>
110110
@@ -117,14 +117,14 @@ class TransformHtmlStory {}
117117
renderedDivClass="html-story-label"
118118
[occlude]="[occluderRef]"
119119
>
120-
<span *ngtsHtmlContent>Raycast occlusion</span>
120+
<span *ngtsSobaContent>Raycast occlusion</span>
121121
</ngts-html>
122122
</ngt-mesh>
123123
</ngt-group>
124124
<ngt-ambient-light [intensity]="0.8" />
125125
<ngt-point-light [intensity]="1" [position]="[0, 6, 0]" />
126126
`,
127-
imports: [NgtArgs, NgtsHtml, NgtsHtmlContent],
127+
imports: [NgtArgs, NgtsHtml, NgtsSobaContent],
128128
schemas: [CUSTOM_ELEMENTS_SCHEMA],
129129
})
130130
class OccludeHtmlStory {

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { CUSTOM_ELEMENTS_SCHEMA, Component, Input, effect, signal } from '@angular/core';
22
import { extend, injectBeforeRender, injectNgtStore } from 'angular-three';
33
import { NgtsPointMaterial } from 'angular-three-soba/materials';
4-
import { NgtsPoint, NgtsPoints, NgtsPointsContent } from 'angular-three-soba/performances';
4+
import { NgtsPoint, NgtsPoints } from 'angular-three-soba/performances';
55
import { shaderMaterial } from 'angular-three-soba/shaders';
66
import * as THREE from 'three';
77
import { makeCanvasOptions, makeDecorators, makeStoryFunction } from '../setup-canvas';
88

99
import { NgFor } from '@angular/common';
10+
import { NgtsSobaContent } from 'angular-three-soba/misc';
1011
import * as buffer from 'maath/buffer';
1112
import * as misc from 'maath/misc';
1213

@@ -82,7 +83,7 @@ class PointEvent {
8283
standalone: true,
8384
template: `
8485
<ngts-points [limit]="points.length" [range]="points.length">
85-
<ng-template ngtsPointsContent>
86+
<ng-template ngtsSobaContent>
8687
<ngts-point-material
8788
[transparent]="true"
8889
[vertexColors]="true"
@@ -94,7 +95,7 @@ class PointEvent {
9495
</ng-template>
9596
</ngts-points>
9697
`,
97-
imports: [NgtsPoints, NgtsPointsContent, NgFor, NgtsPointMaterial, PointEvent],
98+
imports: [NgtsPoints, NgtsSobaContent, NgFor, NgtsPointMaterial, PointEvent],
9899
schemas: [CUSTOM_ELEMENTS_SCHEMA],
99100
})
100101
class PointsSelectionStory {
@@ -123,13 +124,13 @@ class PointsSelectionStory {
123124
standalone: true,
124125
template: `
125126
<ngts-points>
126-
<ng-template ngtsPointsContent>
127+
<ng-template ngtsSobaContent>
127128
<points-point-event *ngFor="let p of points" [position]="p.v3" [color]="p.v3" [size]="p.size" />
128129
<ngt-my-points-material />
129130
</ng-template>
130131
</ngts-points>
131132
`,
132-
imports: [NgtsPoints, NgtsPointsContent, PointEvent, NgFor],
133+
imports: [NgtsPoints, NgtsSobaContent, PointEvent, NgFor],
133134
schemas: [CUSTOM_ELEMENTS_SCHEMA],
134135
})
135136
class PointsInstancesStory {
@@ -158,10 +159,10 @@ class PointsInstancesStory {
158159
standalone: true,
159160
template: `
160161
<ngts-points [positions]="positionFinal" [colors]="color" [sizes]="size">
161-
<ngt-my-points-material *ngtsPointsContent />
162+
<ngt-my-points-material *ngtsSobaContent />
162163
</ngts-points>
163164
`,
164-
imports: [NgtsPoints, NgtsPointsContent],
165+
imports: [NgtsPoints, NgtsSobaContent],
165166
schemas: [CUSTOM_ELEMENTS_SCHEMA],
166167
})
167168
class PointsBuffersStory {

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import { NgIf, NgTemplateOutlet } from '@angular/common';
2-
import { CUSTOM_ELEMENTS_SCHEMA, Component, ContentChild, Directive, TemplateRef } from '@angular/core';
2+
import { CUSTOM_ELEMENTS_SCHEMA, Component, ContentChild, TemplateRef } from '@angular/core';
3+
import { NgtsSobaContent } from 'angular-three-soba/misc';
34
import { NgtsEnvironmentCube } from './environment-cube';
45
import { NgtsEnvironmentGround } from './environment-ground';
56
import { NgtsEnvironmentInput } from './environment-input';
67
import { NgtsEnvironmentMap } from './environment-map';
78
import { NgtsEnvironmentPortal } from './environment-portal';
89

9-
@Directive({ selector: 'ng-template[ngtsEnvironmentContent]', standalone: true })
10-
export class NgtsEnvironmentContent {}
11-
1210
@Component({
1311
selector: 'ngts-environment',
1412
standalone: true,
@@ -38,5 +36,5 @@ export class NgtsEnvironmentContent {}
3836
schemas: [CUSTOM_ELEMENTS_SCHEMA],
3937
})
4038
export class NgtsEnvironment extends NgtsEnvironmentInput {
41-
@ContentChild(NgtsEnvironmentContent, { read: TemplateRef }) content?: TemplateRef<unknown>;
39+
@ContentChild(NgtsSobaContent, { read: TemplateRef }) content?: TemplateRef<unknown>;
4240
}

0 commit comments

Comments
 (0)