Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 1c6d0f6

Browse files
nartcnartc
committed
pass container style to html content
1 parent 6b6f49b commit 1c6d0f6

File tree

9 files changed

+142
-6
lines changed

9 files changed

+142
-6
lines changed

‎apps/astro-docs/package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,21 @@
2525
"@astrojs/mdx": "^3.1.3",
2626
"@astrojs/starlight": "^0.25.1",
2727
"@astrojs/tailwind": "^5.1.0",
28+
"angular-three": "2.0.0-beta.264",
2829
"astro": "^4.10.2",
30+
"ngxtension": "^4.0.0",
2931
"rxjs": "^7.8.1",
3032
"sharp": "^0.32.5",
3133
"tailwindcss": "^3.4.6",
34+
"three": "^0.166.1",
3235
"tslib": "^2.6.3",
3336
"typescript": "^5.5.3",
3437
"zone.js": "^0.14.8"
3538
},
3639
"nx": {},
3740
"devDependencies": {
38-
"@expressive-code/plugin-line-numbers": "^0.35.3"
41+
"@expressive-code/plugin-line-numbers": "^0.35.3",
42+
"@types/three": "^0.166.0"
3943
},
4044
"web-types": [
4145
"../../node_modules/angular-three/web-types.json",

‎apps/astro-docs/src/components/scene-graph.analog

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script lang="ts">
2+
import { ElementRef, viewChild } from '@angular/core';
3+
import * as THREE from 'three';
4+
import { extend, injectBeforeRender } from 'angular-three';
5+
6+
extend(THREE);
7+
8+
const mesh = viewChild.required<ElementRef<THREE.Mesh>>('mesh');
9+
10+
injectBeforeRender(() => {
11+
mesh().nativeElement.rotation.x += 0.01;
12+
});
13+
</script>
14+
15+
<template>
16+
<ngt-mesh #mesh>
17+
<ngt-box-geometry />
18+
<ngt-mesh-basic-material color="hotpink" />
19+
</ngt-mesh>
20+
</template>

‎apps/astro-docs/src/components/scene-graph.component.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, viewChild } from '@angular/core';
2+
import { extend, injectBeforeRender } from 'angular-three';
3+
import * as THREE from 'three';
4+
5+
extend(THREE);
6+
7+
@Component({
8+
selector: 'scene-graph',
9+
standalone: true,
10+
template: `
11+
<ngt-mesh #mesh>
12+
<ngt-box-geometry />
13+
<ngt-mesh-basic-material color="hotpink" />
14+
</ngt-mesh>
15+
`,
16+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
17+
})
18+
export class SceneGraph {
19+
mesh = viewChild.required<ElementRef<THREE.Mesh>>('mesh');
20+
21+
constructor() {
22+
injectBeforeRender(() => {
23+
this.mesh().nativeElement.rotation.x += 0.01;
24+
});
25+
}
26+
}

‎apps/astro-docs/src/components/test.analog

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
1-
<script lang="ts"></script>
1+
<script lang="ts">
2+
import SceneGraph from './scene-graph.analog';
3+
4+
import { NgtCanvas } from 'angular-three' with { analog: 'imports' };
5+
6+
defineMetadata({
7+
exposes: [SceneGraph],
8+
});
9+
</script>
210

311
<template>
4-
<h1>Hello World!!!!! SFC</h1>
12+
<ngt-canvas [sceneGraph]="SceneGraph" />
513
</template>

‎apps/astro-docs/src/components/test.component.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component } from '@angular/core';
2+
import { NgtCanvas } from 'angular-three';
3+
import { SceneGraph } from './scene-graph.component';
4+
5+
@Component({
6+
selector: 'test',
7+
standalone: true,
8+
template: `
9+
<ngt-canvas [sceneGraph]="SceneGraph" />
10+
`,
11+
imports: [NgtCanvas],
12+
})
13+
export default class Test {
14+
SceneGraph = SceneGraph;
15+
}

‎apps/astro-docs/src/content/docs/index.mdx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,11 @@ hero:
1717
---
1818

1919
import { Card, CardGrid } from '@astrojs/starlight/components';
20-
import Test from '../../components/test.analog';
20+
import Test from '../../components/test.component';
2121

22-
<Test client:visible />
22+
<div class="h-48 w-48">
23+
<Test client:only />
24+
</div>
2325

2426
## Next steps
2527

‎libs/soba/misc/src/lib/html/html-content.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export interface NgtsHTMLContentOptions {
4949
prepend: boolean;
5050
fullscreen: boolean;
5151
containerClass: string;
52+
containerStyle: Partial<CSSStyleDeclaration>;
5253
pointerEvents: PointerEventsProperties;
5354
calculatePosition: CalculatePosition;
5455
sprite: boolean;
@@ -62,6 +63,7 @@ const defaultHtmlContentOptions: NgtsHTMLContentOptions = {
6263
pointerEvents: 'auto',
6364
calculatePosition: defaultCalculatePosition,
6465
containerClass: '',
66+
containerStyle: {},
6567
center: false,
6668
prepend: false,
6769
fullscreen: false,
@@ -80,7 +82,7 @@ const defaultHtmlContentOptions: NgtsHTMLContentOptions = {
8082
[style.height.px]="size().height"
8183
>
8284
<div #transformInner style="position: absolute" [style.pointer-events]="pointerEvents()">
83-
<div #container [class]="containerClass()">
85+
<div #container [class]="containerClass()" [style]="containerStyle()">
8486
<ng-container [ngTemplateOutlet]="content" />
8587
</div>
8688
</div>
@@ -95,6 +97,7 @@ const defaultHtmlContentOptions: NgtsHTMLContentOptions = {
9597
[style.width]="fullscreen() ? size().width : 'unset'"
9698
[style.height]="fullscreen() ? size().height : 'unset'"
9799
[class]="containerClass()"
100+
[style]="containerStyle()"
98101
>
99102
<ng-container [ngTemplateOutlet]="content" />
100103
</div>
@@ -134,6 +137,7 @@ export class NgtsHTMLContent extends NgtHTML {
134137
fullscreen = pick(this.options, 'fullscreen');
135138
pointerEvents = pick(this.options, 'pointerEvents');
136139
containerClass = pick(this.options, 'containerClass');
140+
containerStyle = pick(this.options, 'containerStyle');
137141

138142
private target = computed(() => {
139143
const parent = resolveRef(this.parent());

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,12 @@ export const Transform = makeStoryObject(HtmlTransformScene, {
100100
sprite: true,
101101
distanceFactor: 20,
102102
containerClass: 'transformed-container',
103+
containerStyle: {
104+
background: 'palegreen',
105+
fontSize: '50px',
106+
padding: '10px 18px',
107+
border: '2px solid black',
108+
} as Partial<CSSStyleDeclaration>,
103109
},
104110
},
105111
});

‎pnpm-lock.yaml

Lines changed: 51 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)