jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Add endpoint 'bar' to Network (#3444) 

* Add endpoint 'bar' to Network

Fixes #3412

- Adds class `Bar` and handling to `EndPoints.js`
- Adjusted `options.js` for endpoint, minor code changes
- Added to example `network/edgeTypes/arrowTypes`.
- Added to edges documentation

* Grumbl fix travis unit test yet again. Go die already!
revert-3409-performance
wimrijnders 7 years ago
committed by Yotam Berkowitz
parent
1ec51911d9
commit
091473a75e
5 changed files with 93 additions and 14 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      docs/network/edges.html
  2. +27
    -5
      examples/network/edgeStyles/arrowTypes.html
  3. +3
    -2
      lib/network/modules/CanvasRenderer.js
  4. +57
    -3
      lib/network/modules/components/edges/util/EndPoints.js
  5. +5
    -3
      lib/network/options.js

+ 1
- 1
docs/network/edges.html View File

@ -279,7 +279,7 @@ network.setOptions(options);
<td class="indent2">arrows.to.type</td> <td class="indent2">arrows.to.type</td>
<td>String</td> <td>String</td>
<td><code>arrow</code></td> <td><code>arrow</code></td>
<td>The type of endpoint. Default is <code>arrow</code>. Also possible is <code>circle</code>.</td>
<td>The type of endpoint. Possible values are: <code>arrow</code>, <code>bar</code>, <code>circle</code>. The default is <code>arrow</code>.
</tr> </tr>
<tr parent="arrows" class="hidden"> <tr parent="arrows" class="hidden">
<td class="indent">arrows.middle</td> <td class="indent">arrows.middle</td>

+ 27
- 5
examples/network/edgeStyles/arrowTypes.html View File

@ -17,7 +17,8 @@
<body> <body>
<p> <p>
There two type of liner endings. The classical "arrow" (default) and "circle".
The types of endpoints are: <code>'arrow' 'circle' 'bar'</code>.
The default is <code>'arrow'</code>.
</p> </p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
@ -25,9 +26,10 @@
<script type="text/javascript"> <script type="text/javascript">
// create an array with nodes // create an array with nodes
var nodes = new vis.DataSet([ var nodes = new vis.DataSet([
{id: 1, label: 'X'},
{id: 2, label: 'Y'},
{id: 3, label: 'Z'}
{id: 1, label: 'A'},
{id: 2, label: 'B'},
{id: 3, label: 'C'},
{id: 4, label: 'D'}
]); ]);
// create an array with edges // create an array with edges
@ -35,9 +37,16 @@
{from: 1, to: 2, arrows:'to'}, {from: 1, to: 2, arrows:'to'},
{from: 2, to: 3, arrows:{ {from: 2, to: 3, arrows:{
to: { to: {
enabled: true,
type: 'circle' type: 'circle'
} }
}}, }},
{from: 3, to: 4, arrows:{
to: {
enabled: true,
type: 'bar'
}
}},
]); ]);
// create a network // create a network
@ -46,7 +55,20 @@
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {};
var options = {
/*
// Enable this to make the endpoints smaller/larger
edges: {
arrows: {
to: {
scaleFactor: 5
}
}
}
*/
};
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);
</script> </script>

+ 3
- 2
lib/network/modules/CanvasRenderer.js View File

@ -149,11 +149,12 @@ class CanvasRenderer {
// This is not something that will happen in normal operation, but we still need // This is not something that will happen in normal operation, but we still need
// to take it into account. // to take it into account.
// //
if (typeof window === 'undefined') return; // Note: `if (window === undefined)` doesn't work
if (typeof window === 'undefined') return; // Doing `if (window === undefined)` does not work here!
let timer;
var myWindow = window; // Grab a reference to reduce the possibility that 'window' is reset var myWindow = window; // Grab a reference to reduce the possibility that 'window' is reset
// while running this method. // while running this method.
let timer;
if (this.requiresTimeout === true) { if (this.requiresTimeout === true) {
// wait given number of milliseconds and perform the animation step function // wait given number of milliseconds and perform the animation step function

+ 57
- 3
lib/network/modules/components/edges/util/EndPoints.js View File

@ -1,4 +1,4 @@
/**
/** ============================================================================
* Location of all the endpoint drawing routines. * Location of all the endpoint drawing routines.
* *
* Every endpoint has its own drawing routine, which contains an endpoint definition. * Every endpoint has its own drawing routine, which contains an endpoint definition.
@ -9,9 +9,21 @@
* - The endpoints are orientated to the positive x-direction * - The endpoints are orientated to the positive x-direction
* - The length of the endpoint is at most 1 * - The length of the endpoint is at most 1
* *
* As long as the endpoint classes remain simple and not too numerous, they will be contained within this module.
* As long as the endpoint classes remain simple and not too numerous, they will
* be contained within this module.
* All classes here except `EndPoints` should be considered as private to this module. * All classes here except `EndPoints` should be considered as private to this module.
*/
*
* -----------------------------------------------------------------------------
* ### Further Actions
*
* After adding a new endpoint here, you also need to do the following things:
*
* - Add the new endpoint name to `network/options.js` in array `endPoints`.
* - Add the new endpoint name to the documentation.
* Scan for 'arrows.to.type` and add it to the description.
* - Add the endpoint to the examples. At the very least, add it to example
* `edgeStyles/arrowTypes`.
* ============================================================================= */
// NOTE: When a typedef is isolated in a separate comment block, an actual description is generated for it, // NOTE: When a typedef is isolated in a separate comment block, an actual description is generated for it,
// using the rest of the commenting in the code block. Usage of typedef in other comments then // using the rest of the commenting in the code block. Usage of typedef in other comments then
@ -145,6 +157,45 @@ class Circle {
} }
/**
* Drawing methods for the bar endpoint.
*/
class Bar {
/**
* Draw this shape at the end of a line.
*
* @param {CanvasRenderingContext2D} ctx
* @param {ArrowData} arrowData
* @static
*/
static draw(ctx, arrowData) {
/*
var points = [
{x:0, y:0.5},
{x:0, y:-0.5}
];
EndPoint.transform(points, arrowData);
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
ctx.lineTo(points[1].x, points[1].y);
ctx.stroke();
*/
var points = [
{x:0, y:0.5},
{x:0, y:-0.5},
{x:-0.15, y:-0.5},
{x:-0.15, y:0.5},
];
EndPoint.transform(points, arrowData);
EndPoint.drawPath(ctx, points);
}
}
/** /**
* Drawing methods for the endpoints. * Drawing methods for the endpoints.
*/ */
@ -167,6 +218,9 @@ class EndPoints {
case 'circle': case 'circle':
Circle.draw(ctx, arrowData); Circle.draw(ctx, arrowData);
break; break;
case 'bar':
Bar.draw(ctx, arrowData);
break;
case 'arrow': // fall-through case 'arrow': // fall-through
default: default:
Arrow.draw(ctx, arrowData); Arrow.draw(ctx, arrowData);

+ 5
- 3
lib/network/options.js View File

@ -13,6 +13,8 @@ let object = 'object'; // should only be in a __type__ property
let dom = 'dom'; let dom = 'dom';
let any = 'any'; let any = 'any';
// List of endpoints
let endPoints = ['arrow', 'circle', 'bar'];
let allOptions = { let allOptions = {
configure: { configure: {
@ -24,9 +26,9 @@ let allOptions = {
}, },
edges: { edges: {
arrows: { arrows: {
to: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean: bool } },
middle: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean: bool } },
from: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean: bool } },
to: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: endPoints }, __type__: { object, boolean: bool } },
middle: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: endPoints }, __type__: { object, boolean: bool } },
from: { enabled: { boolean: bool }, scaleFactor: { number }, type: { string: endPoints }, __type__: { object, boolean: bool } },
__type__: { string: ['from', 'to', 'middle'], object } __type__: { string: ['from', 'to', 'middle'], object }
}, },
arrowStrikethrough: { boolean: bool }, arrowStrikethrough: { boolean: bool },

Write Preview
Loading…
Cancel
Save