An extension to the LeaderLine project: adding parent element,scroll position, absolute parent positioning and more
npm install linkerline|New Properties|Type|Description|
|--------------|----|-----------|
|element|SVG Element|The line svg element|
|removed|boolean|Indicates whether the line was removed (line.remove was called) or not [>=1.5.0]
|standalone|boolean|Indicates whether the line is directly instantiated or not (ex: belongs to a LinkerLineChain instance) [>=1.5.0]|
Changes :
1. pointAnchor, areaAnchor, mouseHoverAnchor are renamed to PointAnchor, AreaAnchor, MouseHoverAnchor.
2. CaptionLabel and PathLabel are merged into Label. The Label has an option named "on" that takes as a value either "path" or "element".
3. animation object "timing" property is renamed to "easing".
4. dash "len" property is renamed to "length".
Check source code.
npm install --save linkerline
And then use it in your code as follows :
import LinkerLine from "linkerline";
const line=new LinkerLine({
//...OriginalClassProps,
parent:HTMLElement,// this is the new parent option
start:HTMLElement,
end:HTMLElement,
});
//line.element => returns the line svg element
```
new LinKerLine.Chain(nodes,options):LinkerLineChain;
|Param Name|Type|Description|
|----------|----|-----------|
|nodes|HTMLElement[]|The chain nodes|
|options|object|The chain options|
Additional properties are added to nodes:
|Property Name|Type|Description|
|-------------|----|-----------|
|outLine|LinkerLine \| undefined|The linkerline instance exiting the node|
|inLine|LinkerLine \| undefined|The linkerline instance entering the node|
const chain=new LinkerLine.Chain(nodes,{
onLinkChange:({line,startNode,endNode,nodesLinked})=>{
const color=nodesLinked?line.color:null;
startNode.style.backgroundColor=color;
endNode.style.backgroundColor=color;
},
});
linkbtn.onclick=()=>{
chain.link();
};
unlinkbtn.onclick=()=>{
chain.unlink();
}
`positionAll [1.2.0]
A new static method LinkerLine.positionAll() : void that updates all the lines'positions at once.Custom Plugs [1.1.0]
It allows defining custom plugs via the static method LinkerLine.definePlug( options : object ).
|Option Name|Type|Description|
|-----------|----|-----------|
|name|string (required)|plug name|
|shape|enum "rect","ellipse"|defines a plug via a shape|
|svg|string \| (color:string,weight:string)=>string|defines a plug via an svg string|
|src|string|defines a plug via an url or base64 string|
|width|number|sets the plug base width|
|height|number|sets the plug base height|
|margin|number|margin between the plug and the start/end element|
|rotatable|boolean|indicates whether the plug should have a fixed orientation or rotate accordingly| LinkerLine.definePlug({
name:"star",
svg:(color,weight)=>
const line=new LinkerLine({
parent:linkerlineview,
color:"#73f5fa",
size:3,
startPlug:"star",
endPlug:"star",
});
For svgs, when a function is specified, the color and the weight params will respectively make sure that the plug will match the line color (or start/endPlugColor if specified) and thickness.