@sedeh/node-object-model
v0.0.6
Published
Have you ever wanted to have a way of viewing a network and traverse through it in g graphical way?
Downloads
1
Maintainers
Readme
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 | NPM | Comments/Requests
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: