feat(core): add util directives and pipes

packages/core/src/index.ts

@@ -1,2 +1,24 @@
+export * from './lib/models';
+
 export * from './lib/core.module';
 export * from './lib/canvas.component';
+
+export * from './lib/services/loader.service';
+
+export * from './lib/stores/animation.store';
+export * from './lib/stores/canvas.store';
+export * from './lib/stores/events.store';
+export * from './lib/stores/instances.store';
+
+export * from './lib/color/color.pipe';
+export * from './lib/color/color.module';
+
+export * from './lib/fog/fog.pipe';
+export * from './lib/fog/fog.module';
+
+export * from './lib/math/math.pipe';
+export * from './lib/math/math-constant.pipe';
+export * from './lib/math/math.module';
+
+export * from './lib/repeat/repeat.directive';
+export * from './lib/repeat/repeat.module';

packages/core/src/lib/canvas.component.spec.ts

@@ -1,20 +1,19 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CanvasComponent } from './canvas.component';
+import { NgtCanvasComponent } from './canvas.component';
 
 describe('CanvasComponent', () => {
-  let component: CanvasComponent;
-  let fixture: ComponentFixture<CanvasComponent>;
+  let component: NgtCanvasComponent;
+  let fixture: ComponentFixture<NgtCanvasComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ CanvasComponent ]
-    })
-    .compileComponents();
+      declarations: [NgtCanvasComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CanvasComponent);
+    fixture = TestBed.createComponent(NgtCanvasComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

packages/core/src/lib/canvas.component.ts

@@ -58,7 +58,7 @@ import { InstancesStore } from './stores/instances.store';
     DestroyedService,
   ],
 })
-export class CanvasComponent implements OnInit {
+export class NgtCanvasComponent implements OnInit {
   @HostBinding('class.ngt-canvas') hostClass = true;
 
   @Input() set orthographic(v: boolean) {

packages/core/src/lib/color/color.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { NgtColorPipe } from './color.pipe';
+
+@NgModule({
+  declarations: [NgtColorPipe],
+  exports: [NgtColorPipe],
+})
+export class NgtColorPipeModule {}

packages/core/src/lib/color/color.pipe.ts

@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as THREE from 'three';
+
+@Pipe({
+  name: 'color',
+  pure: true,
+})
+export class NgtColorPipe implements PipeTransform {
+  /**
+   * ConstructorParameters<typeof THREE.Color> has a limitation on THREE.Color constructor overloads
+   */
+  transform(
+    args: Array<THREE.Color | string | number> | [number, number, number]
+  ): THREE.Color {
+    return new THREE.Color(...args);
+  }
+}

packages/core/src/lib/core.module.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { CanvasComponent } from './canvas.component';
+import { NgtCanvasComponent } from './canvas.component';
 
 @NgModule({
   imports: [CommonModule],
-  declarations: [CanvasComponent],
-  exports: [CanvasComponent],
+  declarations: [NgtCanvasComponent],
+  exports: [NgtCanvasComponent],
 })
-export class CoreModule {}
+export class NgtCoreModule {}

packages/core/src/lib/fog/fog.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { NgtFogPipe } from './fog.pipe';
+
+@NgModule({
+  declarations: [NgtFogPipe],
+  exports: [NgtFogPipe],
+})
+export class NgtFogPipeModule {}

packages/core/src/lib/fog/fog.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import * as THREE from 'three';
+
+@Pipe({
+  name: 'fog',
+  pure: true,
+})
+export class NgtFogPipe implements PipeTransform {
+  transform(args: ConstructorParameters<typeof THREE.Fog>): THREE.Fog {
+    return new THREE.Fog(...args);
+  }
+}

packages/core/src/lib/math/math-constant.pipe.ts

@@ -0,0 +1,27 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'mathConst',
+  pure: true,
+})
+export class NgtMathConstantPipe implements PipeTransform {
+  transform(
+    value: number | 0,
+    keyOfMathConst:
+      | 'PI'
+      | 'E'
+      | 'LN2'
+      | 'LOG2E'
+      | 'LN10'
+      | 'LOG10E'
+      | 'SQRT1_2'
+      | 'SQRT2'
+      | 'random'
+  ): number {
+    if (keyOfMathConst === 'random') {
+      return Math.random();
+    }
+
+    return value * Math[keyOfMathConst];
+  }
+}

packages/core/src/lib/math/math.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { NgtMathConstantPipe } from './math-constant.pipe';
+import { NgtMathPipe } from './math.pipe';
+
+@NgModule({
+  declarations: [NgtMathPipe, NgtMathConstantPipe],
+  exports: [NgtMathPipe, NgtMathConstantPipe],
+})
+export class NgtMathPipeModule {}

packages/core/src/lib/math/math.pipe.ts

@@ -0,0 +1,28 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'math',
+  pure: true,
+})
+export class NgtMathPipe implements PipeTransform {
+  transform(
+    value: number | number[],
+    keyOfMath: keyof Omit<
+      Math,
+      | 'PI'
+      | 'E'
+      | 'LN2'
+      | 'LOG2E'
+      | 'LN10'
+      | 'LOG10E'
+      | 'SQRT1_2'
+      | 'SQRT2'
+      | 'random'
+    >
+  ): ReturnType<Extract<Math[typeof keyOfMath], 'string'>> {
+    const params: number[] = Array.isArray(value) ? value : [value];
+    return (Math[keyOfMath] as unknown as (...args: number[]) => number)(
+      ...params
+    ) as ReturnType<Extract<Math[typeof keyOfMath], 'string'>>;
+  }
+}

packages/core/src/lib/repeat/repeat.directive.ts

@@ -0,0 +1,65 @@
+import {
+  Directive,
+  Inject,
+  Input,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core';
+
+const MAX_VALUE = 0x10000;
+
+export interface RepeatContext {
+  $implicit: number;
+  isOdd: boolean;
+  isEven: boolean;
+  isFirst: boolean;
+  isLast: boolean;
+}
+
+@Directive({
+  selector: '[repeat][repeatOf]',
+})
+export class NgtRepeatDirective {
+  @Input()
+  set repeatOf(count: number) {
+    const safeCount = Math.floor(Math.max(0, Math.min(count, MAX_VALUE)));
+    const { length } = this.viewContainer;
+
+    if (safeCount < length) {
+      this.removeContainers(length - safeCount);
+    } else {
+      this.addContainers(length, safeCount);
+    }
+  }
+
+  constructor(
+    @Inject(ViewContainerRef) private readonly viewContainer: ViewContainerRef,
+    @Inject(TemplateRef)
+    private readonly templateRef: TemplateRef<RepeatContext>
+  ) {}
+
+  private addContainers(length: number, count: number) {
+    for (let index = length; index < count; index++) {
+      this.viewContainer.createEmbeddedView<RepeatContext>(this.templateRef, {
+        $implicit: index,
+        isFirst: index === length,
+        isLast: index === count - 1,
+        isOdd: !(index % 2),
+        isEven: !!(index % 2),
+      });
+    }
+  }
+
+  private removeContainers(amount: number) {
+    for (let index = 0; index < amount; index++) {
+      this.viewContainer.remove();
+    }
+  }
+
+  static ngTemplateContextGuard(
+    dir: NgtRepeatDirective,
+    ctx: unknown
+  ): ctx is RepeatContext {
+    return true;
+  }
+}

packages/core/src/lib/repeat/repeat.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { NgtRepeatDirective } from './repeat.directive';
+
+@NgModule({
+  declarations: [NgtRepeatDirective],
+  exports: [NgtRepeatDirective],
+})
+export class NgtRepeatModule {}