@naniteninja/trait-visual 1.0.4 → 1.0.5

package/README.md

@@ -1,216 +1,73 @@
-# @naniteninja/trait-visual
+# TraitVisualLib
 
-An Angular library for visualizing trait-based relationships in 3D space using Three.js. This library provides a pure visualization component that can be integrated into any Angular application to display personality traits, preferences, and attributes as an interactive 3D visualization.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
 
-## Installation
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
 
 ```bash
-npm install @naniteninja/trait-visual
+ng generate component component-name
 ```
 
-## Requirements
-
-- Angular 20.0.0 or higher
-- Three.js (included as dependency)
-- ml-pca (included as dependency)
-
-## Quick Start
-
-### 1. Import the Component
-
-```typescript
-import { TraitVisualComponent } from '@naniteninja/trait-visual';
-
-@Component({
-  selector: 'app-my-component',
-  standalone: true,
-  imports: [TraitVisualComponent],
-  template: `
-    <tv-trait-visual
-      [nodeData]="myNodeData"
-      [attributeWeights]="myAttributeWeights"
-      [preferenceWeights]="myPreferenceWeights"
-    ></tv-trait-visual>
-  `
-})
-export class MyComponent {
-  // Your component logic
-}
-```
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
 
-### 2. Prepare Your Data
-
-```typescript
-import { INodeData } from '@naniteninja/trait-visual';
-
-const myNodeData: INodeData[] = [
-  {
-    id: 1,
-    name: 'Central Node',
-    initialPosition: [0, 0, 0],
-    isSupermassiveBlackhole: true,
-    color: '#C300FF',
-    attributes: { attr1: 50, attr2: 75, attr3: 25 },
-    preferences: { attr1: 100, attr2: 80, attr3: 60 }
-  },
-  {
-    id: 2,
-    name: 'Node 1',
-    initialPosition: [5, 0, 0],
-    isSupermassiveBlackhole: false,
-    color: '#FF3366',
-    attributes: { attr1: 0, attr2: 50, attr3: 100 },
-    preferences: { attr1: 0, attr2: 0, attr3: 0 }
-  }
-  // ... more nodes
-];
-
-const myAttributeWeights = [1.0, 1.2, 0.8];
-const myPreferenceWeights = [1.0, 1.0, 1.0];
+```bash
+ng generate --help
 ```
 
-## API Reference
-
-### TraitVisualComponent
-
-The main visualization component.
+## Host app assets
 
-#### Inputs
-
-- `nodeData: INodeData[]` (required) - Array of node data to visualize
-- `attributeWeights?: number[]` - Weights for attribute calculations (optional)
-- `preferenceWeights?: number[]` - Weights for preference calculations (optional)
-- `attributeCount?: number` - Number of attributes per node (optional)
-- `preferenceCount?: number` - Number of preferences per node (optional)
-
-#### Usage
-
-```html
-<tv-trait-visual
-  [nodeData]="nodeData"
-  [attributeWeights]="attributeWeights"
-  [preferenceWeights]="preferenceWeights"
-></tv-trait-visual>
-```
+The canvas loads textures from the host app. The host must either serve these files at the root, or pass `assetsBaseUrl` to the component:
 
-### Types
+- `scale-texture.png`
+- `color-tiles.png`
+- `ani-tiles.exr`
 
-#### INodeData
+Example: `<tv-trait-visual-canvas [config]="config" assetsBaseUrl="/assets/"></tv-trait-visual-canvas>` if the host serves them from `/assets/`.
 
-```typescript
-interface INodeData {
-  id: number;
-  name: string;
-  initialPosition: [number, number, number];
-  isSupermassiveBlackhole: boolean;
-  color: string;
-  attributes: IHumanAttributes;  // Record<string, number>
-  preferences: IHumanAttributes; // Record<string, number>
-}
-```
+## Building
 
-#### IHumanAttributes
+To build the library, run:
 
-```typescript
-interface IHumanAttributes {
-  [key: string]: number;
-}
+```bash
+ng build trait-visual-lib
 ```
 
-### Configuration Utilities
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
 
-The library exports utility functions for working with node data:
+### Publishing the Library
 
-```typescript
-import { 
-  dynamicCounts, 
-  updateCounts, 
-  attributeWeights, 
-  nodeData 
-} from '@naniteninja/trait-visual';
+Once the project is built, you can publish your library by following these steps:
 
-// Get current attribute/preference counts
-console.log(dynamicCounts.attributes); // 5
-console.log(dynamicCounts.preferences); // 5
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/trait-visual-lib
+   ```
 
-// Update counts
-updateCounts(7, 7);
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
 
-// Get computed attribute weights from PCA
-console.log(attributeWeights);
+## Running unit tests
 
-// Get default node data (for reference)
-console.log(nodeData);
-```
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
 
-## Features
-
-- **3D Visualization**: Interactive Three.js-based 3D visualization
-- **PCA-based Positioning**: Nodes are positioned in 3D space using Principal Component Analysis
-- **Dynamic Updates**: Component reacts to input changes via Angular's change detection
-- **Customizable**: Full control over node data, weights, and attributes
-- **Standalone Component**: No additional module setup required
-
-## Example: Complete Integration
-
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { TraitVisualComponent, INodeData } from '@naniteninja/trait-visual';
-
-@Component({
-  selector: 'app-personality-visualizer',
-  standalone: true,
-  imports: [TraitVisualComponent],
-  template: `
-    <div style="width: 100vw; height: 100vh;">
-      <tv-trait-visual
-        [nodeData]="nodes"
-        [attributeWeights]="attrWeights"
-        [preferenceWeights]="prefWeights"
-      ></tv-trait-visual>
-    </div>
-  `
-})
-export class PersonalityVisualizerComponent implements OnInit {
-  nodes: INodeData[] = [];
-  attrWeights: number[] = [1, 1, 1, 1, 1];
-  prefWeights: number[] = [1, 1, 1, 1, 1];
-
-  ngOnInit() {
-    // Load or generate your node data
-    this.nodes = this.generateNodeData();
-  }
-
-  private generateNodeData(): INodeData[] {
-    // Your data generation logic
-    return [];
-  }
-}
+```bash
+ng test
 ```
 
-## Styling
+## Running end-to-end tests
 
-The component uses minimal styling. You can style the wrapper element:
+For end-to-end (e2e) testing, run:
 
-```css
-tv-trait-visual {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
+```bash
+ng e2e
 ```
 
-The canvas will fill its container. Ensure the container has defined dimensions.
-
-## Browser Support
-
-- Modern browsers with WebGL support
-- Chrome, Firefox, Safari, Edge (latest versions)
-
-## License
-
-MIT
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
 
-## Author
+## Additional Resources
 
-naniteninja
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.