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

docs, bugfixes

flowchartTest
Alex de Mulder 9 years ago
parent
efd876dba8
commit
6f5bc44eea
11 changed files with 234 additions and 67 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +14
    -15
      dist/vis.js
  2. +9
    -1
      docs/css/newdocs.css
  3. +27
    -0
      docs/js/toggleTable.js
  4. +8
    -1
      docs/network/canvas.html
  5. +9
    -2
      docs/network/configure.html
  6. +118
    -15
      docs/network/edges.html
  7. +27
    -17
      docs/network/groups.html
  8. +6
    -0
      docs/network/nodes.html
  9. +3
    -2
      examples/network/01_basic_usage.html
  10. +12
    -13
      lib/network/modules/Validator.js
  11. +1
    -1
      lib/network/modules/components/AllOptions.js

+ 14
- 15
dist/vis.js View File

@ -25980,16 +25980,16 @@ return /******/ (function(modules) { // webpackBootstrap
// __any__ is a wildcard. Any value is accepted and will be further analysed by reference.
if (Validator.getType(options[option]) === 'object') {
util.copyAndExtendArray(path, option);
Validator.checkFields(option, options, referenceOptions, '__any__', referenceOptions.__any__.__type__, path, true);
Validator.checkFields(option, options, referenceOptions, '__any__', referenceOptions.__any__.__type__, path);
}
} else {
// Since all options in the reference are objects, we can check whether they are supposed to be object to look for the __type__ field.
if (referenceOptions[option].__type__ !== undefined) {
util.copyAndExtendArray(path, option);
// if this should be an object, we check if the correct type has been supplied to account for shorthand options.
Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option].__type__, path, true);
Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option].__type__, path);
} else {
Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option], path, false);
Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option], path);
}
}
}
@ -25998,15 +25998,14 @@ return /******/ (function(modules) { // webpackBootstrap
/**
*
* @param {String} option | the option property
* @param {Object} options | The supplied options object
* @param {Object} referenceOptions | The reference options containing all options and their allowed formats
* @param {String} referenceOption | Usually this is the same as option, except when handling an __any__ tag.
* @param {String} refOptionType | This is the type object from the reference options
* @param path
* @param recursive
*/
value: function checkFields(option, options, referenceOptions, referenceOption, refOptionObj, path, recursive) {
* @param {String} option | the option property
* @param {Object} options | The supplied options object
* @param {Object} referenceOptions | The reference options containing all options and their allowed formats
* @param {String} referenceOption | Usually this is the same as option, except when handling an __any__ tag.
* @param {String} refOptionType | This is the type object from the reference options
* @param {Array} path | where in the object is the option
*/
value: function checkFields(option, options, referenceOptions, referenceOption, refOptionObj, path) {
var optionType = Validator.getType(options[option]);
var refOptionType = refOptionObj[optionType];
if (refOptionType !== undefined) {
@ -26015,10 +26014,10 @@ return /******/ (function(modules) { // webpackBootstrap
if (refOptionType.indexOf(options[option]) === -1) {
console.log('%cInvalid option detected in "' + option + '".' + ' Allowed values are:' + Validator.print(refOptionType) + ' not "' + options[option] + '". ' + Validator.printLocation(path, option), printStyle);
errorFound = true;
} else if (recursive === true && optionType === 'object') {
} else if (optionType === 'object') {
Validator.parse(options[option], referenceOptions[referenceOption], path);
}
} else if (recursive === true && optionType === 'object') {
} else if (optionType === 'object') {
Validator.parse(options[option], referenceOptions[referenceOption], path);
}
} else {
@ -26212,7 +26211,7 @@ return /******/ (function(modules) { // webpackBootstrap
__type__: { object: object }
},
clustering: {},
configuration: {
configure: {
filter: { boolean: boolean, string: ['nodes', 'edges', 'layout', 'physics', 'manipulation', 'interaction', 'selection', 'rendering'], array: array },
container: { dom: dom },
__type__: { object: object, string: string, array: array, boolean: boolean }

+ 9
- 1
docs/css/newdocs.css View File

@ -94,6 +94,10 @@ pre.code {
border:0px;
}
pre.top {
margin-left:20px;
}
tr.hidden {
max-height:0;
/*max-height: 0;*/
@ -185,5 +189,9 @@ td.methodName {
}
pre.options {
max-width:500px;
max-width:600px;
}
pre.hidden {
display:none;
}

+ 27
- 0
docs/js/toggleTable.js View File

@ -53,5 +53,32 @@ function toggleTable(tableId, parent, clickedRow) {
spans[i].className = wasOpen === true ? 'right-caret' : 'caret';
}
}
}
function toggleTab(showTabId, showPreId, hideTabId, hidePreId) {
if (hideTabId !== undefined) {
document.getElementById(hideTabId).className = '';
document.getElementById(hidePreId).className = document.getElementById(hidePreId).className.replace(' hidden','');
document.getElementById(hidePreId).className += ' hidden';
}
document.getElementById('hiddenTab').className = '';
document.getElementById(showTabId).className = 'active';
document.getElementById(showPreId).className = document.getElementById(showPreId).className.replace(' hidden','');
}
function hideOptions(hideTabId1, hidePreId1, hideTabId2, hidePreId2) {
document.getElementById('hiddenTab').className = 'active';
document.getElementById(hideTabId1).className = '';
document.getElementById(hidePreId1).className = document.getElementById(hidePreId1).className.replace(' hidden','');
document.getElementById(hidePreId1).className += ' hidden';
if (hideTabId2 !== undefined) {
document.getElementById(hideTabId2).className = '';
document.getElementById(hidePreId2).className = document.getElementById(hidePreId2).className.replace(' hidden','');
document.getElementById(hidePreId2).className += ' hidden';
}
}

+ 8
- 1
docs/network/canvas.html View File

@ -14,6 +14,7 @@
<link href="../css/newdocs.css" rel="stylesheet">
<link href="../css/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../js/toggleTable.js"></script>
<script type="text/javascript" src="../js/googleAnalytics.js"></script>
<script type="text/javascript" src="../js/prettify/prettify.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
@ -81,7 +82,13 @@
<h3>Options</h3>
<p>The options for the canvas have to be contained in an object titled 'canvas'.</p>
<pre class="prettyprint lang-js options">
<p>Click on the options shown to show how these options are supposed to be used.</p>
<ul class="nav nav-tabs">
<li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab('fullTab','fullOptions');" id="fullTab"><a href="#">options shown</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options hidden" id="fullOptions">
var options = {
canvas:{
width:'100%', // other format: '400px'

+ 9
- 2
docs/network/configure.html View File

@ -24,6 +24,7 @@
<link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="../js/googleAnalytics.js"></script>
<script type="text/javascript" src="../js/toggleTable.js"></script>
<script type="text/javascript" src="../js/prettify/prettify.js"></script>
<script src="../js/smooth-scroll.min.js"></script>
@ -85,8 +86,14 @@
<p>Handles the HTML part of the canvas.</p>
<h3>Options</h3>
<p>The options for the canvas have to be contained in an object titled 'canvas'.</p>
<pre class="prettyprint lang-js options">
<p>The options for the canvas have to be contained in an object titled 'configure'.</p>
<p>Click on the options shown to show how these options are supposed to be used.</p>
<ul class="nav nav-tabs">
<li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab('fullTab','fullOptions');" id="fullTab"><a href="#">options shown</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options hidden" id="fullOptions">
var options = {
configure:{
filter: 'nodes, physics', // or ['nodes','physics'] or true

+ 118
- 15
docs/network/edges.html View File

@ -1,19 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script>(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-61231638-1', 'auto');
ga('send', 'pageview');</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -26,6 +13,10 @@
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/newdocs.css" rel="stylesheet">
<link href="../css/prettify.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="../js/googleAnalytics.js"></script>
<script type="text/javascript" src="../js/prettify/prettify.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
@ -47,7 +38,7 @@
</head>
<!-- NAVBAR
================================================== -->
<body>
<body onload="prettyPrint();">
<div class="navbar-wrapper">
<div class="container">
@ -96,7 +87,112 @@
<h3>Options</h3>
<p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
<p>The options for the canvas have to be contained in an object titled 'edges'. All of these options can be supplied per edge as well. Obviously, 'id' should not be defined globally but per edge. Options defined
in the global edges object, are applied to all edges. If an edge has options of its own, those will be used instead of the global options.</p>
<p>Click on the full options or shorthand options to show how these options are supposed to be used.</p>
<ul class="nav nav-tabs">
<li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions','shortTab','shortOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab('fullTab','fullOptions','shortTab','shortOptions');" id="fullTab"><a href="#">full options</a></li>
<li role="presentation" onclick="toggleTab('shortTab','shortOptions','fullTab','fullOptions');" id="shortTab"><a href="#">shorthand options</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options top hidden" id="fullOptions">
// these are all options in full.
var options = {
edges:{
arrows: {
to: {enabled: false, scaleFactor:1},
middle: {enabled: false, scaleFactor:1},
from: {enabled: false, scaleFactor:1}
},
color: {
color:'#848484',
highlight:'#848484',
hover: '#848484',
inherit: 'from',
opacity:1.0
},
dashes:{
enabled: false,
pattern:[5,5]
},
font: {
color: '#343434',
size: 14, // px
face: 'arial',
background: 'none',
stroke: 1, // px
strokeColor: '#ffffff',
align:'horizontal'
},
hidden: false,
hoverWidth: 1.5,
label: undefined,
length: undefined,
physics: true,
scaling:{
min: 1,
max: 15,
label: {
enabled: true,
min: 14,
max: 30,
maxVisible: 30,
drawThreshold: 3
},
customScalingFunction: function (min,max,total,value) {
if (max === min) {
return 0.5;
}
else {
var scale = 1 / (max - min);
return Math.max(0,(value - min)*scale);
}
}
},
selectionWidth: 1,
selfReferenceSize:20,
shadow:{
enabled: false,
size:10,
x:5,
y:5
},
smooth: {
enabled: true,
dynamic: true,
type: "continuous",
roundness: 0.5
},
title:undefined,
width: 1,
value: undefined
}
}
network.setOptions(options);
</pre>
<pre class="prettyprint lang-js options top hidden" id="shortOptions">
// here all options that have shorthand notations are shown.
var options = {
edges:{
arrows: 'to, from',
color: 'red',
dashes: true,
font: '12px arial #ff0000',
scaling:{
label: true,
},
shadow: true,
smooth: true,
}
}
network.setOptions(options);
</pre>
<p>These options can also be set per individual edge.</p>
<table class="moduleTable" id="optionTable">
<tr class="header">
<td class="name">name</td>
@ -311,6 +407,13 @@ var options: {
can taylor the logic in the function as long as it returns a <code>Number</code>.
</td>
</tr>
<tr>
<td>id</td>
<td class="mid">String</td>
<td class="mid"><code>undefined</code></td>
<td>The id of the edge. The id is optional for edges. When not supplied, an UUID will be assigned to the edge.</td>
</tr>
<tr>
<td>label</td>
<td class="mid">String</td>

+ 27
- 17
docs/network/groups.html View File

@ -1,19 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script>(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-61231638-1', 'auto');
ga('send', 'pageview');</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -26,6 +13,10 @@
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/newdocs.css" rel="stylesheet">
<link href="../css/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../js/toggleTable.js"></script>
<script type="text/javascript" src="../js/googleAnalytics.js"></script>
<script type="text/javascript" src="../js/prettify/prettify.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
@ -45,7 +36,7 @@
</head>
<!-- NAVBAR
================================================== -->
<body>
<body onload="prettyPrint();">
<div class="navbar-wrapper">
<div class="container">
@ -90,11 +81,30 @@
<div class="container full">
<h1>Network - groups</h1>
<p>Handles the HTML part of the canvas.</p>
<p>Handles the group styling.</p>
<h3>Options</h3>
<p>This is a list of all the methods in the public API. They are collected here from all individual modules.</p>
<p>The options for the canvas have to be contained in an object titled 'groups'.</p>
<p>Click on the options shown to show how these options are supposed to be used.</p>
<ul class="nav nav-tabs">
<li role="presentation" class="active" onclick="hideOptions('fullTab','fullOptions');" id="hiddenTab"><a href="#">options hidden</a></li>
<li role="presentation" onclick="toggleTab('fullTab','fullOptions');" id="fullTab"><a href="#">options shown</a></li>
</ul>
<br>
<pre class="prettyprint lang-js options hidden" id="fullOptions">
var options = {
groups:{
useDefaultGroups: true,
myGroupId:{
/*node options*/
}
}
}
network.setOptions(options);
</pre>
<p>All of the individual options are explained here:</p>
<table class="moduleTable">
<tr class="header">
<td class="name">name</td>
@ -120,7 +130,7 @@
All options described in the <a href="./nodes.html">nodes module</a> that make sense can be used here
(you're not going to set the same id or x,y position for a group of nodes).
Example:
<pre class="code">
<pre class="prettyprint lang-js options">
var nodes = [
{id:1, group:'myGroup', label:"I'm in a custom group called 'myGroup'!"}
]

+ 6
- 0
docs/network/nodes.html View File

@ -299,6 +299,12 @@
<td class="mid"><code>'#2B7CE9'</code></td>
<td>The color of the icon.</td>
</tr>
<tr>
<td>id</td>
<td class="mid">String</td>
<td class="mid"><code>undefined</code></td>
<td>The id of the node. The id is mandatory for nodes and they have to be unique. This should obviously be set per node, not globally.</td>
</tr>
<tr>
<td>image</td>
<td class="mid">String</td>

+ 3
- 2
examples/network/01_basic_usage.html View File

@ -44,8 +44,9 @@
edges: edges
};
var options = {
nodes:{title:undefined},edges:{hoverWidth:function(a) {return a;}},
configuration:{container:container}
configure:true,
// physics:{barnesHut:{gravitationslPull:34}, solver:'banana'},
groups:{'bla':{color:{backsground:'red'}, borderWidth:5}}
}
var network = new vis.Network(container, data, options);
// network.setOptions({nodes:{color:'red'}})

+ 12
- 13
lib/network/modules/Validator.js View File

@ -56,7 +56,7 @@ class Validator {
// __any__ is a wildcard. Any value is accepted and will be further analysed by reference.
if (Validator.getType(options[option]) === 'object') {
util.copyAndExtendArray(path, option);
Validator.checkFields(option, options, referenceOptions, '__any__', referenceOptions['__any__'].__type__, path, true);
Validator.checkFields(option, options, referenceOptions, '__any__', referenceOptions['__any__'].__type__, path);
}
}
else {
@ -64,25 +64,24 @@ class Validator {
if (referenceOptions[option].__type__ !== undefined) {
util.copyAndExtendArray(path, option);
// if this should be an object, we check if the correct type has been supplied to account for shorthand options.
Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option].__type__, path, true);
Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option].__type__, path);
}
else {
Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option], path, false);
Validator.checkFields(option, options, referenceOptions, option, referenceOptions[option], path);
}
}
}
/**
*
* @param {String} option | the option property
* @param {Object} options | The supplied options object
* @param {Object} referenceOptions | The reference options containing all options and their allowed formats
* @param {String} referenceOption | Usually this is the same as option, except when handling an __any__ tag.
* @param {String} refOptionType | This is the type object from the reference options
* @param path
* @param recursive
* @param {String} option | the option property
* @param {Object} options | The supplied options object
* @param {Object} referenceOptions | The reference options containing all options and their allowed formats
* @param {String} referenceOption | Usually this is the same as option, except when handling an __any__ tag.
* @param {String} refOptionType | This is the type object from the reference options
* @param {Array} path | where in the object is the option
*/
static checkFields(option, options, referenceOptions, referenceOption, refOptionObj, path, recursive) {
static checkFields(option, options, referenceOptions, referenceOption, refOptionObj, path) {
let optionType = Validator.getType(options[option]);
let refOptionType = refOptionObj[optionType];
if (refOptionType !== undefined) {
@ -93,11 +92,11 @@ class Validator {
' Allowed values are:' + Validator.print(refOptionType) + ' not "' + options[option] + '". ' + Validator.printLocation(path, option), printStyle);
errorFound = true;
}
else if (recursive === true && optionType === 'object') {
else if (optionType === 'object') {
Validator.parse(options[option], referenceOptions[referenceOption], path);
}
}
else if (recursive === true && optionType === 'object') {
else if (optionType === 'object') {
Validator.parse(options[option], referenceOptions[referenceOption], path);
}
}

+ 1
- 1
lib/network/modules/components/AllOptions.js View File

@ -27,7 +27,7 @@ let allOptions = {
__type__: {object}
},
clustering: {},
configuration: {
configure: {
filter: {boolean,string:['nodes','edges','layout','physics','manipulation','interaction','selection','rendering'],array},
container: {dom},
__type__: {object,string,array,boolean}

Write Preview
Loading…
Cancel
Save