npm package: @sedeh/node-object-model
Description: Have you ever wanted to have a way of viewing a network and traverse through it in g graphical way?
Latest version: 0.0.6

# Welcome to node-object-model
Have you ever wanted to have a way of viewing a network and traverse through it in g graphical way?

Node Object Model (NOM) is perfect for presenting Network topology or representing data in the form of nodes of different sizes embedding node-specific data that can be retrieved through each node.

[Live Demo](https://stackblitz.com/edit/node-object-model?file=package.json)  | 
[NPM](https://www.npmjs.com/package/@sedeh/node-object-model) | 
[Comments/Requests](https://github.com/msalehisedeh/node-object-model/issues)

## Dependencies

```
MODULE: 
		NodeObjectModule

DEPENDENCIES: 
    "font-awesome": "^4.7.0",
```

## Interfaces

Node interface provides a basic block to create  a topology of inter-connections. A node ID is essentially its name or title. 
A node is represented with an icon. The icon value will be a CSS class name that renders the icon. A node is also represented 
by a description which can be a long text/html content that can be displayed when a node is selected. A node can be a facade of a 
topology of inner nodes through its children.  Within a node, all children could be inter connected through list of IDs in its 
connections list. A node could have any kind of information pertinent to its characteristics and as such is not pre-defined through 
its info object. Wnen representing a node in a container, top and left values will determine its physical pixel perfect location 
within the cntainer.

```
export interface Node {
	id: string;
	icon: string;
	draggable?: boolean;
	editable?: boolean;
	description: string;
	top: number;
	left: number;
	width: number;
	height: number;
	children: Node[];
	connections: Connection[];
	info?: any;
	offset?: any;
}
export interface Connection {
	id: string;
	class: string;
	info?: any;
}
export interface ConnectionDetail {
	id: string;
	offset: number;
	from: string;
	to: string;
	info: any;
	hit: (event: any, item: any) => boolean;
	left: number;
	top:  number;
	width:  number;
	height: number;
	class: string[]
}
```

## Sample code

```
<node-object-model 
    [root]="root"
    [clear]="root === undefined"
    [enableInspection]="enableInspection" 
    [enableDetailedInspection]="enableDetailedInspection"
    [popupInspection]="popupInspection"
    [activeOnHover]="activeOnHover"
    (onSelection)="report($event)"
    [editable]="editable" >
</node-object-model>  	

```

| Version  |Description                                                                                                                                   |
|-----------|---------------------------------------------------------------------------------------------------------------------------------------------|
|0.0.2/3/4/5|small documentational fixes.                                                                                                                 |
|0.0.1      |Initial release with angular 15.                                                                                                             |


Sample of code in Action:

![alt text](https://raw.githubusercontent.com/msalehisedeh/node-object-model/master/sample.png "What you would see when a nodde object model is used")