Skip to content

Commit ec8f498

Browse files
Chau TranChau Tran
Chau Tran
authored and
Chau Tran
committed
feat: signals are ready
1 parent 580393b commit ec8f498

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+4870
-14
lines changed

‎.release-it.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"releaseName": "Release ${version}"
4141
},
4242
"hooks": {
43-
"before:bump": "npx nx package angular-three",
43+
"before:bump": "pnpm exec nx package angular-three",
4444
"after:bump": ["git checkout -- package.json"]
4545
}
4646
}

‎apps/demo/.eslintrc.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"extends": ["../../.eslintrc.json"],
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts"],
7+
"rules": {
8+
"@angular-eslint/directive-selector": [
9+
"error",
10+
{
11+
"type": "attribute",
12+
"prefix": "angularThree",
13+
"style": "camelCase"
14+
}
15+
],
16+
"@angular-eslint/component-selector": [
17+
"error",
18+
{
19+
"type": "element",
20+
"prefix": "angular-three",
21+
"style": "kebab-case"
22+
}
23+
]
24+
},
25+
"extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"]
26+
},
27+
{
28+
"files": ["*.html"],
29+
"extends": ["plugin:@nx/angular-template"],
30+
"rules": {}
31+
}
32+
]
33+
}

‎apps/demo/project.json

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
{
2+
"name": "demo",
3+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
4+
"projectType": "application",
5+
"prefix": "angular-three",
6+
"sourceRoot": "apps/demo/src",
7+
"tags": [],
8+
"targets": {
9+
"build": {
10+
"executor": "@angular-devkit/build-angular:browser",
11+
"outputs": ["{options.outputPath}"],
12+
"options": {
13+
"outputPath": "dist/apps/demo",
14+
"index": "apps/demo/src/index.html",
15+
"main": "apps/demo/src/main.ts",
16+
"polyfills": ["zone.js"],
17+
"tsConfig": "apps/demo/tsconfig.app.json",
18+
"assets": ["apps/demo/src/favicon.ico", "apps/demo/src/assets"],
19+
"styles": ["apps/demo/src/styles.css"],
20+
"scripts": []
21+
},
22+
"configurations": {
23+
"production": {
24+
"budgets": [
25+
{
26+
"type": "initial",
27+
"maximumWarning": "500kb",
28+
"maximumError": "1mb"
29+
},
30+
{
31+
"type": "anyComponentStyle",
32+
"maximumWarning": "2kb",
33+
"maximumError": "4kb"
34+
}
35+
],
36+
"outputHashing": "all"
37+
},
38+
"development": {
39+
"buildOptimizer": false,
40+
"optimization": false,
41+
"vendorChunk": true,
42+
"extractLicenses": false,
43+
"sourceMap": true,
44+
"namedChunks": true
45+
}
46+
},
47+
"defaultConfiguration": "production"
48+
},
49+
"serve": {
50+
"executor": "@angular-devkit/build-angular:dev-server",
51+
"configurations": {
52+
"production": {
53+
"browserTarget": "demo:build:production"
54+
},
55+
"development": {
56+
"browserTarget": "demo:build:development"
57+
}
58+
},
59+
"defaultConfiguration": "development"
60+
},
61+
"extract-i18n": {
62+
"executor": "@angular-devkit/build-angular:extract-i18n",
63+
"options": {
64+
"browserTarget": "demo:build"
65+
}
66+
},
67+
"lint": {
68+
"executor": "@nx/linter:eslint",
69+
"outputs": ["{options.outputFile}"],
70+
"options": {
71+
"lintFilePatterns": ["apps/demo/**/*.ts", "apps/demo/**/*.html"]
72+
}
73+
}
74+
}
75+
}

‎apps/demo/src/app/app.component.ts

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { NgTemplateOutlet } from '@angular/common';
2+
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, signal } from '@angular/core';
3+
import { NgtCanvas, extend } from 'angular-three';
4+
import * as THREE from 'three';
5+
6+
extend(THREE);
7+
8+
@Component({
9+
selector: 'app-cube',
10+
standalone: true,
11+
template: `
12+
<ngt-mesh
13+
(beforeRender)="onBeforeRender($any($event).object)"
14+
(pointerover)="hover.set(true)"
15+
(pointerout)="hover.set(false)"
16+
(click)="active.set(!active())"
17+
[scale]="active() ? 1.5 : 1"
18+
>
19+
<ngt-box-geometry />
20+
<ngt-mesh-standard-material [color]="hover() ? 'hotpink' : 'orange'" />
21+
</ngt-mesh>
22+
`,
23+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
24+
changeDetection: ChangeDetectionStrategy.OnPush,
25+
})
26+
export class Cube {
27+
hover = signal(false);
28+
active = signal(false);
29+
30+
onBeforeRender(mesh: THREE.Mesh) {
31+
mesh.rotation.x += 0.01;
32+
mesh.rotation.y += 0.01;
33+
}
34+
}
35+
36+
@Component({
37+
standalone: true,
38+
template: `
39+
<ngt-spot-light [position]="5" />
40+
<ngt-point-light [position]="-5" />
41+
<app-cube />
42+
`,
43+
imports: [Cube, NgTemplateOutlet],
44+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
45+
changeDetection: ChangeDetectionStrategy.OnPush,
46+
})
47+
export class Scene {}
48+
49+
@Component({
50+
standalone: true,
51+
imports: [NgtCanvas],
52+
selector: 'angular-three-root',
53+
template: ` <ngt-canvas [sceneGraph]="scene" />`,
54+
})
55+
export class AppComponent {
56+
readonly scene = Scene;
57+
}

‎apps/demo/src/app/app.config.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { ApplicationConfig } from '@angular/core';
2+
3+
export const appConfig: ApplicationConfig = {
4+
providers: [],
5+
};

‎apps/demo/src/assets/.gitkeep

Whitespace-only changes.

‎apps/demo/src/favicon.ico

14.7 KB
Binary file not shown.

‎apps/demo/src/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>demo</title>
6+
<base href="/" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link rel="icon" type="image/x-icon" href="favicon.ico" />
9+
</head>
10+
<body>
11+
<angular-three-root />
12+
</body>
13+
</html>

‎apps/demo/src/main.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { bootstrapApplication } from '@angular/platform-browser';
2+
import { AppComponent } from './app/app.component';
3+
import { appConfig } from './app/app.config';
4+
5+
bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

‎apps/demo/src/styles.css

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/* You can add global styles to this file, and also import other style files */
2+
/*
3+
1. Use a more-intuitive box-sizing model.
4+
*/
5+
*,
6+
*::before,
7+
*::after {
8+
box-sizing: border-box;
9+
}
10+
/*
11+
2. Remove default margin
12+
*/
13+
* {
14+
margin: 0;
15+
}
16+
/*
17+
3. Allow percentage-based heights in the application
18+
*/
19+
html,
20+
body {
21+
height: 100%;
22+
width: 100%;
23+
}
24+
/*
25+
Typographic tweaks!
26+
4. Add accessible line-height
27+
5. Improve text rendering
28+
*/
29+
body {
30+
line-height: 1.5;
31+
-webkit-font-smoothing: antialiased;
32+
font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji,
33+
Segoe UI Emoji;
34+
}
35+
/*
36+
6. Improve media defaults
37+
*/
38+
img,
39+
picture,
40+
video,
41+
canvas,
42+
svg {
43+
display: block;
44+
max-width: 100%;
45+
}
46+
/*
47+
7. Remove built-in form typography styles
48+
*/
49+
input,
50+
button,
51+
textarea,
52+
select {
53+
font: inherit;
54+
}
55+
/*
56+
8. Avoid text overflows
57+
*/
58+
p,
59+
h1,
60+
h2,
61+
h3,
62+
h4,
63+
h5,
64+
h6 {
65+
overflow-wrap: break-word;
66+
}
67+
/*
68+
9. Create a root stacking context
69+
*/
70+
#root,
71+
#__next {
72+
isolation: isolate;
73+
}

0 commit comments

Comments
 (0)