Getting started

1) Add dependency to your project

# npm
npm install nls-spline-generator --save

# yarn
yarn add nls-spline-generator

2) Import module to your Angular application

// app.module.ts (default filename)

import { NlsSplineGeneratoreModule } from 'nls-spline-generator';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
    NlsSplineGeneratoreModule
  ],
  providers: [
    // ...
  ],
  bootstrap: [
    // ...
  ]
})
export class AppModule { }

4) Implement directive in your template

Past in the configuration and set animation to true or false (default is false):

<nls-spline-generator [config]="config"></nls-spline-generator>

Usage only

// models/config.model.ts
/**
 * The Configuration stands for incoming parameters from outside
 * to adjust the outcoming graphs.
 */

export interface Config {
  /**
   * Amount of orientation points, excl. entry and vector points
   */
  points?: number;
  /**
   * Points distributation factor depending on canvas size
   */
  overshoot?: number;
  /**
   * Amount of graphs
   */
  graphs?: number;
  /**
   * Amount of splines each graph
   */
  splines?: number;
  /**
   * Directional vectors coming next after entry points.
   * Starting as well ending points of graph drawn on canvs.
   * Enters the canvas (in)
   * Leaves the canvas (off)
   */
  vector?: {
    in?: {
      /**
       * Vector direction set by part of tau. Examples:
       * 0 up, 0.25 right, 0.5 bottom, 0.75 left
       */
      direction: number;
      /**
       * Margin between canvas border and first graph curve (px)
       */
      margin: number;
      /**
       * Percentage of canvas height or width
       */
      tension: number;
    },
    out?: {
      /**
       * Vector direction set by part of tau. Examples:
       * 0 up, 0.25 right, 0.5 bottom, 0.75 left
       */
      direction: number;
      /**
       * Margin between canvas border and first graph curve (px)
       */
      margin: number;
      /**
       * Percentage of canvas height or width
       */
      tension: number;
    }
  };
  /**
   * Configuration for Margins for Entrie Points, Splines and the Canvas at all.
   */
  margin?: {
    /**
     *  Margin between entry points of graphs
     */
    entry?: number;
    /**
     * Margin between splines of graphs
     */
    spline?: number;
    canvas?: {
      /**
       * Horizontal margin between entry points and canvas boundries (px)
       */
      x?: number;
      /**
       * Vertical margin between entry points and canvas boundries (px)
       */
      y?: number;
    }
  };
   /**
    * Configuration of spline strokes
    */
  stroke?: {
    /**
     * Spline stroke width in pixel
     */
    width: number;
    /**
     * Spline stroke color in hexadecimal, rgb, etc.
     */
    colors: string[];
  };
  /**
   * Background color of canvas (default transprent)
   */
  background?: string;
  /**
   * Configuration for Animation
   */
  animation?: {
    enabled?: boolean;
    frequency?: number;
    /**
     * Amplitude of noise generated animation pathes
     */
    amplitude?: number;
    /**
     * Radius of circular noise generated pathes
     */
   radius?: number;
    /**
     * Ticks per one animation cycle
     */
    ticks?: number;
  };
  /**
   * Enable debug mode to draw all helpers like
   * points etc.
   */
  debug?: boolean;
}

Active Development (Advanced)

Rquirements

• Node.js
• Angular CLI

NPM Scripts

| command | description | |------------------|--------------------------------------------------------------------| | npm run start | start development server on http://localhost:4200/ | | npm run build | build production application and save to ./dist | | npm run build:library | build node module and save to ./dist/nls-spline-generator | | npm run library:files | copy README.md and LICENSE to library directory |

Version Release

1. Bumping new version of main application

npm version major|minor|patch -m "RELEASE MESSAGE" 

2. Synchronizing versions

Synchronize the version of ./projects/nls-spline-generator/package.json with the main application ./package.json.

3. Copying files

Copy README.md and LICENSE from main application to library.

npm run library:files

4. Building library

npm run build:library

5. Publishing to npm

cd dist/nls-spline-generator
npm publish
cd ../..

6. Push changes to repository

git push
git push --tags

Semantic Versioning

Any release or tag must use Semantic Versioning.

Given a version number MAJOR.MINOR.PATCH, increment the:

1. MAJOR version when you make incompatible API changes,
2. MINOR version when you add functionality in a backwards-compatible manner, and
3. PATCH version when you make backwards-compatible bug fixes.

Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.

Contributors

• Author and Realisation Michael Czechowski
• Consultant Martin Maga
• Idea and Concept Bernhard Kinzler

License

pending