Library for interlocking Elements
npm install @limbusfoundation/node-linejavascript
import { NodeLine } from "node-line.main.js";
`
Use
When importing the library into your project, instantiate the NodeLine class, and you can assign each instance to a constant :
`javascript
const myNode = new NodeLine()
`
After doing that, you should pass the required arguments :
`javascript
const myNode = new NodeLine(elementA,elementB,elementRender);
`
- elementA ( The element where the starting point A of the line begins. )
- elementB ( The element where the ending point B of the line terminates )
- elementRender ( The container where the line should be rendered. ex: ... )
After doing that, you should invoke the function that creates the line :
`javascript
myNode.createNode();
`
If you are assigning NodeLine to an element with dynamic proportion or displacement, such as DnD, you should call the function that updates the line whenever there is any event. :
`javascript
myNode.updatePath();
`
Now it's possible to remove specific nodes by calling the 'removeNode()' function.
`javascript
myNode.removeNode();
`
To customize your line or the starting and ending points of the line, you can call the 'settings()' function.
`javascript
myNode.settings(line,dot);
`
| Element | key | Type | Description |
|----------|----------|----------|----------|
| line | color | string | change the color of line |
| line | scale | string | change the scale / width of line |
| dot | color | string | change the fill color of dot |
| dot | scale | string | change the scale of dot |
| dot | visible | boolean | change if the dot is visible
'settings()' function example :
`javascript
mynode.settings({color: "red", scale: "10"},{color: "green", scale: "5",visible: false})
`
Example
Create an 'index.html' file and an 'index.js' file, and then include the 'index.js' file in your 'index.html' file.
Afterward, add two elements, A and B, to your HTML :
`html
NodeLine Example
`
In your 'index.js' file, import the 'NodeLine' library, add your HTML elements, and instantiate the 'NodeLine()' class with your arguments :
`javascript
import { NodeLine } from "node-line.main.js";
const myElementA = document.getElementById("my-element-a");
const myElementB = document.getElementById("my-element-b");
const body = document.body;
const myNode = new NodeLine(myElementA,myElementB,body)
``
const body = document.body to obtain a reference to the 'body' tag and add NodeLine to the body. However, you can use any other supported element as the container.
https://github.com/Limbus-Foundation/node-line.git