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

Merge pull request #2066 from mojoaxel/newArrowTypes 

Network: edge-endpoint 'circle'
codeClimate
yotamberk 8 years ago
committed by GitHub
parent
439aa79a68 d2aa7b01c2
commit
f99d204ee6
7 changed files with 105 additions and 25 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +10
    -4
      docs/network/edges.html
  2. +55
    -0
      examples/network/edgeStyles/arrowTypes.html
  3. +4
    -4
      lib/network/modules/EdgesHandler.js
  4. +5
    -5
      lib/network/modules/PhysicsEngine.js
  5. +13
    -4
      lib/network/modules/components/edges/util/EdgeBase.js
  6. +6
    -6
      lib/network/options.js
  7. +12
    -2
      lib/network/shapes.js

+ 10
- 4
docs/network/edges.html View File

@ -115,9 +115,9 @@
var options = { var options = {
edges:{ edges:{
arrows: { arrows: {
to: {enabled: false, scaleFactor:1},
middle: {enabled: false, scaleFactor:1},
from: {enabled: false, scaleFactor:1}
to: {enabled: false, scaleFactor:1, type:'arrow'},
middle: {enabled: false, scaleFactor:1, type:'arrow'},
from: {enabled: false, scaleFactor:1, type:'arrow'}
}, },
arrowStrikethrough: true, arrowStrikethrough: true,
color: { color: {
@ -243,6 +243,12 @@ network.setOptions(options);
<td><code>1</code></td> <td><code>1</code></td>
<td>The scale factor allows you to change the size of the arrowhead.</td> <td>The scale factor allows you to change the size of the arrowhead.</td>
</tr> </tr>
<tr parent="arrows" class="hidden">
<td class="indent2">arrows.to.type</td>
<td>String</td>
<td><code>arrow</code></td>
<td>The type of endpoint. Default is <code>arrow</code>. Also possible is <code>circle</code>.</td>
</tr>
<tr parent="arrows" class="hidden"> <tr parent="arrows" class="hidden">
<td class="indent">arrows.middle</td> <td class="indent">arrows.middle</td>
<td>Object or Boolean</td> <td>Object or Boolean</td>
@ -703,4 +709,4 @@ var options: {
<script src="../js/tipuesearch.config.js"></script> <script src="../js/tipuesearch.config.js"></script>
<script src="../js/tipuesearch.js"></script> <script src="../js/tipuesearch.js"></script>
<!-- controller --> <!-- controller -->
<script src="../js/main.js"></script>
<script src="../js/main.js"></script>

+ 55
- 0
examples/network/edgeStyles/arrowTypes.html View File

@ -0,0 +1,55 @@
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<p>
There two type of liner endings. The classical "arrow" (default) and "circle".
</p>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'X'},
{id: 2, label: 'Y'},
{id: 3, label: 'Z'}
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 2, arrows:'to'},
{from: 2, to: 3, arrows:{
to: {
type: 'circle'
}
}},
]);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
</script>
<script src="../../googleAnalytics.js"></script>
</body>
</html>

+ 4
- 4
lib/network/modules/EdgesHandler.js View File

@ -23,9 +23,9 @@ class EdgesHandler {
this.options = {}; this.options = {};
this.defaultOptions = { this.defaultOptions = {
arrows: { arrows: {
to: {enabled: false, scaleFactor:1}, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
middle: {enabled: false, scaleFactor:1},
from: {enabled: false, scaleFactor:1}
to: {enabled: false, scaleFactor:1, type: 'arrow'}, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
middle: {enabled: false, scaleFactor:1, type: 'arrow'},
from: {enabled: false, scaleFactor:1, type: 'arrow'}
}, },
arrowStrikethrough: true, arrowStrikethrough: true,
color: { color: {
@ -388,4 +388,4 @@ class EdgesHandler {
} }
export default EdgesHandler;
export default EdgesHandler;

+ 5
- 5
lib/network/modules/PhysicsEngine.js View File

@ -628,7 +628,7 @@ class PhysicsEngine {
this._freezeNodes(); this._freezeNodes();
} }
this.stabilizationIterations = 0; this.stabilizationIterations = 0;
setTimeout(() => this._stabilizationBatch(),0); setTimeout(() => this._stabilizationBatch(),0);
} }
@ -649,7 +649,7 @@ class PhysicsEngine {
this.physicsTick(); this.physicsTick();
count++; count++;
} }
if (this.stabilized === false && this.stabilizationIterations < this.targetIterations) { if (this.stabilized === false && this.stabilizationIterations < this.targetIterations) {
this.body.emitter.emit('stabilizationProgress', {iterations: this.stabilizationIterations, total: this.targetIterations}); this.body.emitter.emit('stabilizationProgress', {iterations: this.stabilizationIterations, total: this.targetIterations});
setTimeout(this._stabilizationBatch.bind(this),0); setTimeout(this._stabilizationBatch.bind(this),0);
@ -710,11 +710,11 @@ class PhysicsEngine {
let angle = Math.atan2(force.y, force.x); let angle = Math.atan2(force.y, force.x);
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.arrow(node.x + factor*force.x + Math.cos(angle)*arrowSize, node.y + factor*force.y+Math.sin(angle)*arrowSize, angle, arrowSize);
ctx.arrowEndpoint(node.x + factor*force.x + Math.cos(angle)*arrowSize, node.y + factor*force.y+Math.sin(angle)*arrowSize, angle, arrowSize);
ctx.fill(); ctx.fill();
} }
} }
} }
export default PhysicsEngine;
export default PhysicsEngine;

+ 13
- 4
lib/network/modules/components/edges/util/EdgeBase.js View File

@ -412,6 +412,7 @@ class EdgeBase {
let node2; let node2;
let guideOffset; let guideOffset;
let scaleFactor; let scaleFactor;
let type;
let lineWidth = this.getLineWidth(selected, hover); let lineWidth = this.getLineWidth(selected, hover);
if (position === 'from') { if (position === 'from') {
@ -419,17 +420,20 @@ class EdgeBase {
node2 = this.to; node2 = this.to;
guideOffset = 0.1; guideOffset = 0.1;
scaleFactor = this.options.arrows.from.scaleFactor; scaleFactor = this.options.arrows.from.scaleFactor;
type = this.options.arrows.from.type;
} }
else if (position === 'to') { else if (position === 'to') {
node1 = this.to; node1 = this.to;
node2 = this.from; node2 = this.from;
guideOffset = -0.1; guideOffset = -0.1;
scaleFactor = this.options.arrows.to.scaleFactor; scaleFactor = this.options.arrows.to.scaleFactor;
type = this.options.arrows.to.type;
} }
else { else {
node1 = this.to; node1 = this.to;
node2 = this.from; node2 = this.from;
scaleFactor = this.options.arrows.middle.scaleFactor; scaleFactor = this.options.arrows.middle.scaleFactor;
type = this.options.arrows.middle.type;
} }
// if not connected to itself // if not connected to itself
@ -475,7 +479,7 @@ class EdgeBase {
var yi = arrowPoint.y - length * 0.9 * Math.sin(angle); var yi = arrowPoint.y - length * 0.9 * Math.sin(angle);
let arrowCore = {x: xi, y: yi}; let arrowCore = {x: xi, y: yi};
return {point: arrowPoint, core: arrowCore, angle: angle, length: length};
return {point: arrowPoint, core: arrowCore, angle: angle, length: length, type: type};
} }
/** /**
@ -491,8 +495,13 @@ class EdgeBase {
ctx.fillStyle = ctx.strokeStyle; ctx.fillStyle = ctx.strokeStyle;
ctx.lineWidth = this.getLineWidth(selected, hover); ctx.lineWidth = this.getLineWidth(selected, hover);
// draw arrow at the end of the line
ctx.arrow(arrowData.point.x, arrowData.point.y, arrowData.angle, arrowData.length);
if (arrowData.type && arrowData.type.toLowerCase() === 'circle') {
// draw circle at the end of the line
ctx.circleEndpoint(arrowData.point.x, arrowData.point.y, arrowData.angle, arrowData.length);
} else {
// draw arrow at the end of the line
ctx.arrowEndpoint(arrowData.point.x, arrowData.point.y, arrowData.angle, arrowData.length);
}
// draw shadow if enabled // draw shadow if enabled
this.enableShadow(ctx); this.enableShadow(ctx);
@ -521,4 +530,4 @@ class EdgeBase {
} }
} }
export default EdgeBase;
export default EdgeBase;

+ 6
- 6
lib/network/options.js View File

@ -24,9 +24,9 @@ let allOptions = {
}, },
edges: { edges: {
arrows: { arrows: {
to: { enabled: { boolean }, scaleFactor: { number }, __type__: { object, boolean } },
middle: { enabled: { boolean }, scaleFactor: { number }, __type__: { object, boolean } },
from: { enabled: { boolean }, scaleFactor: { number }, __type__: { object, boolean } },
to: { enabled: { boolean }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean } },
middle: { enabled: { boolean }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean } },
from: { enabled: { boolean }, scaleFactor: { number }, type: { string: ['arrow', 'circle'] }, __type__: { object, boolean } },
__type__: { string: ['from', 'to', 'middle'], object } __type__: { string: ['from', 'to', 'middle'], object }
}, },
arrowStrikethrough: { boolean }, arrowStrikethrough: { boolean },
@ -371,9 +371,9 @@ let configureOptions = {
}, },
edges: { edges: {
arrows: { arrows: {
to: { enabled: false, scaleFactor: [1, 0, 3, 0.05] }, // boolean / {arrowScaleFactor:1} / {enabled: false, arrowScaleFactor:1}
middle: { enabled: false, scaleFactor: [1, 0, 3, 0.05] },
from: { enabled: false, scaleFactor: [1, 0, 3, 0.05] }
to: { enabled: false, scaleFactor: [1, 0, 3, 0.05], type: 'arrow' },
middle: { enabled: false, scaleFactor: [1, 0, 3, 0.05], type: 'arrow' },
from: { enabled: false, scaleFactor: [1, 0, 3, 0.05], type: 'arrow' }
}, },
arrowStrikethrough: true, arrowStrikethrough: true,
color: { color: {

+ 12
- 2
lib/network/shapes.js View File

@ -206,9 +206,9 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
/** /**
* Draw an arrow point (no line)
* Draw an arrow at the end of a line with the given angle.
*/ */
CanvasRenderingContext2D.prototype.arrow = function (x, y, angle, length) {
CanvasRenderingContext2D.prototype.arrowEndpoint = function (x, y, angle, length) {
// tail // tail
var xt = x - length * Math.cos(angle); var xt = x - length * Math.cos(angle);
var yt = y - length * Math.sin(angle); var yt = y - length * Math.sin(angle);
@ -233,6 +233,16 @@ if (typeof CanvasRenderingContext2D !== 'undefined') {
this.closePath(); this.closePath();
}; };
/**
* Draw an circle an the end of an line with the given angle.
*/
CanvasRenderingContext2D.prototype.circleEndpoint = function (x, y, angle, length) {
var radius = length * 0.4;
var xc = x - radius * Math.cos(angle);
var yc = y - radius * Math.sin(angle);
this.circle(xc, yc, radius);
};
/** /**
* Sets up the dashedLine functionality for drawing * Sets up the dashedLine functionality for drawing
* Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas

Write Preview
Loading…
Cancel
Save