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

updated option stucture to use static methods to avoid duplicate definitions

flowchartTest
Alex de Mulder 9 years ago
parent
e6dd6712ea
commit
b12044333d
9 changed files with 15474 additions and 13388 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +15324
    -13194
      dist/vis.js
  2. +1
    -4
      examples/network/01_basic_usage.html
  3. +0
    -3
      examples/network/09_sizing.html
  4. +7
    -80
      lib/network/modules/EdgesHandler.js
  5. +5
    -12
      lib/network/modules/NodesHandler.js
  6. +52
    -45
      lib/network/modules/components/Edge.js
  7. +55
    -41
      lib/network/modules/components/Node.js
  8. +15
    -9
      lib/network/modules/components/unified/Label.js
  9. +15
    -0
      lib/util.js

+ 15324
- 13194
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 4
examples/network/01_basic_usage.html View File

@ -11,14 +11,12 @@
width: 600px;
height: 400px;
border: 1px solid lightgray;
display:none;
}
</style>
<body>
<div id="mynetwork"></div>
<input type="button" onclick="document.getElementById('mynetwork').style.display='block'; network.view.zoomExtent({duration:0});" value="showdiv">
<script type="text/javascript">
// create an array with nodes
var nodes = [
@ -46,9 +44,8 @@
edges: edges
};
var options = {
// configure: 'nodes',
configure: 'nodes',
// physics:{stabilization:true}
nodes:{color:'red'}
}
var network = new vis.Network(container, data, options);
// network.setOptions({nodes:{color:'red'}})

+ 0
- 3
examples/network/09_sizing.html View File

@ -63,9 +63,6 @@
var options = {
nodes: {
shape: 'dot'
},
edges: {
color: '#97C2FC'
}
};
network = new vis.Network(container, data, options);

+ 7
- 80
lib/network/modules/EdgesHandler.js View File

@ -2,7 +2,8 @@ var util = require("../../util");
var DataSet = require('../../DataSet');
var DataView = require('../../DataView');
import Edge from "./components/Edge"
import Edge from "./components/Edge"
import Label from "./components/unified/Label"
class EdgesHandler {
constructor(body, images, groups) {
@ -126,76 +127,11 @@ class EdgesHandler {
setOptions(options) {
if (options !== undefined) {
var fields = [
'font',
'from',
'hidden',
'hoverWidth',
'label',
'length',
'line',
'opacity',
'physics',
'selfReferenceSize',
'to',
'title',
'value',
'width',
'widthMin',
'widthMax',
'widthSelectionMultiplier'
];
util.selectiveExtend(fields, this.options, options);
util.mergeOptions(this.options, options, 'smooth');
util.mergeOptions(this.options, options, 'dashes');
// set the scaling options
if (options.scaling !== undefined) {
if (options.scaling.min !== undefined) {this.options.scaling.min = options.scaling.min;}
if (options.scaling.max !== undefined) {this.options.scaling.max = options.scaling.max;}
util.mergeOptions(this.options.scaling, options.scaling, 'label');
}
// hanlde multiple input cases for arrows
if (options.arrows !== undefined) {
if (typeof options.arrows === 'string') {
let arrows = options.arrows.toLowerCase();
if (arrows.indexOf("to") != -1) {this.options.arrows.to.enabled = true;}
if (arrows.indexOf("middle") != -1) {this.options.arrows.middle.enabled = true;}
if (arrows.indexOf("from") != -1) {this.options.arrows.from.enabled = true;}
}
else if (typeof options.arrows === 'object') {
util.mergeOptions(this.options.arrows, options.arrows, 'to');
util.mergeOptions(this.options.arrows, options.arrows, 'middle');
util.mergeOptions(this.options.arrows, options.arrows, 'from');
}
else {
throw new Error("The arrow options can only be an object or a string. Refer to the documentation. You used:" + JSON.stringify(options.arrows));
}
}
// use the parser from the Edge class to fill in all shorthand notations
Edge.parseOptions(this.options, options);
// hanlde multiple input cases for color
if (options.color !== undefined) {
if (util.isString(options.color)) {
util.assignAllKeys(this.options.color, options.color);
this.options.color.inherit.enabled = false;
}
else {
if (typeof options.color === 'object') {
let colorsDefined = false;
if (options.color.color !== undefined) {this.options.color.color = options.color.color; colorsDefined = true;}
if (options.color.highlight !== undefined) {this.options.color.highlight = options.color.highlight; colorsDefined = true;}
if (options.color.hover !== undefined) {this.options.color.hover = options.color.hover; colorsDefined = true;}
if (options.color.opacity !== undefined) {this.options.color.opacity = options.color.opacity;}
if (options.color.inherit === undefined && colorsDefined === true) {
this.options.color.inherit.enabled = false;
}
}
}
util.mergeOptions(this.options.color, options.color, 'inherit');
this.markAllEdgesAsDirty();
}
@ -210,18 +146,9 @@ class EdgesHandler {
}
// update fonts in all edges
if (options.font) {
if (typeof options.font === 'string') {
let optionsArray = options.font.split(" ");
this.options.font.size = optionsArray[0].replace("px",'');
this.options.font.face = optionsArray[1];
this.options.font.color = optionsArray[2];
}
else if (typeof options.font === 'object') {
this.options.font = util.bridgeObject(options.font);
}
this.options.font.size = Number(this.options.font.size);
if (options.font !== undefined) {
// use the parser from the Label class to fill in all shorthand notations
Label.parseOptions(this.options,options);
for (let edgeId in this.body.edges) {
if (this.body.edges.hasOwnProperty(edgeId)) {
this.body.edges[edgeId].updateLabelModule();

+ 5
- 12
lib/network/modules/NodesHandler.js View File

@ -2,7 +2,8 @@ var util = require("../../util");
var DataSet = require('../../DataSet');
var DataView = require('../../DataView');
import Node from "./components/Node";
import Node from "./components/Node";
import Label from "./components/unified/Label";
class NodesHandler {
constructor(body, images, groups, layoutEngine) {
@ -96,17 +97,8 @@ class NodesHandler {
}
setOptions(options) {
if (options) {
util.selectiveNotDeepExtend(['color'], this.options, options);
if (options.color) {
let parsedColor = util.parseColor(options.color);
if (parsedColor.border !== undefined) {this.options.color.border = parsedColor.border;}
if (parsedColor.background !== undefined) {this.options.color.background = parsedColor.background;}
if (parsedColor.highlight.border !== undefined) {this.options.color.highlight.border = parsedColor.highlight.border;}
if (parsedColor.highlight.background !== undefined) {this.options.color.highlight.background = parsedColor.highlight.background;}
if (parsedColor.hover.border !== undefined) {this.options.color.hover.border = parsedColor.hover.border;}
if (parsedColor.hover.background !== undefined) {this.options.color.hover.background = parsedColor.hover.background;}
}
if (options !== undefined) {
Node.parseOptions(this.options, options);
// update the shape in all nodes
if (options.shape !== undefined) {
@ -119,6 +111,7 @@ class NodesHandler {
// update the shape size in all nodes
if (options.font !== undefined) {
Label.parseOptions(this.options.font,options);
for (let nodeId in this.body.nodes) {
if (this.body.nodes.hasOwnProperty(nodeId)) {
this.body.nodes[nodeId].updateLabelModule();

+ 52
- 45
lib/network/modules/components/Edge.js View File

@ -62,6 +62,25 @@ class Edge {
}
this.colorDirty = true;
Edge.parseOptions(this.options, options);
if (options.id !== undefined) {this.id = options.id;}
if (options.from !== undefined) {this.fromId = options.from;}
if (options.to !== undefined) {this.toId = options.to;}
if (options.title !== undefined) {this.title = options.title;}
if (options.value !== undefined) {this.value = options.value;}
// A node is connected when it has a from and to node that both exist in the network.body.nodes.
this.connect();
// update label Module
this.updateLabelModule();
let dataChanged = this.updateEdgeType();
return dataChanged;
}
static parseOptions(parentOptions, newOptions) {
var fields = [
'id',
'font',
@ -82,71 +101,59 @@ class Edge {
'widthMax',
'widthSelectionMultiplier'
];
util.selectiveDeepExtend(fields, this.options, options);
util.mergeOptions(this.options, options, 'smooth');
util.mergeOptions(this.options, options, 'dashes');
if (options.id !== undefined) {this.id = options.id;}
if (options.from !== undefined) {this.fromId = options.from;}
if (options.to !== undefined) {this.toId = options.to;}
if (options.title !== undefined) {this.title = options.title;}
if (options.value !== undefined) {this.value = options.value;}
// only deep extend the items in the field array. These do not have shorthand.
util.selectiveDeepExtend(fields, parentOptions, newOptions);
util.mergeOptions(parentOptions, newOptions, 'smooth');
util.mergeOptions(parentOptions, newOptions, 'dashes');
// set the scaling options
if (options.scaling !== undefined) {
if (options.scaling.min !== undefined) {this.options.scaling.min = options.scaling.min;}
if (options.scaling.max !== undefined) {this.options.scaling.max = options.scaling.max;}
util.mergeOptions(this.options.scaling, options.scaling, 'label');
// set the scaling newOptions
if (newOptions.scaling !== undefined) {
if (newOptions.scaling.min !== undefined) {parentOptions.scaling.min = newOptions.scaling.min;}
if (newOptions.scaling.max !== undefined) {parentOptions.scaling.max = newOptions.scaling.max;}
util.mergeOptions(parentOptions.scaling, newOptions.scaling, 'label');
}
// hanlde multiple input cases for arrows
if (options.arrows !== undefined) {
if (typeof options.arrows === 'string') {
let arrows = options.arrows.toLowerCase();
if (arrows.indexOf("to") != -1) {this.options.arrows.to.enabled = true;}
if (arrows.indexOf("middle") != -1) {this.options.arrows.middle.enabled = true;}
if (arrows.indexOf("from") != -1) {this.options.arrows.from.enabled = true;}
if (newOptions.arrows !== undefined) {
if (typeof newOptions.arrows === 'string') {
let arrows = newOptions.arrows.toLowerCase();
if (arrows.indexOf("to") != -1) {parentOptions.arrows.to.enabled = true;}
if (arrows.indexOf("middle") != -1) {parentOptions.arrows.middle.enabled = true;}
if (arrows.indexOf("from") != -1) {parentOptions.arrows.from.enabled = true;}
}
else if (typeof options.arrows === 'object') {
util.mergeOptions(this.options.arrows, options.arrows, 'to');
util.mergeOptions(this.options.arrows, options.arrows, 'middle');
util.mergeOptions(this.options.arrows, options.arrows, 'from');
else if (typeof newOptions.arrows === 'object') {
util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'to');
util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'middle');
util.mergeOptions(parentOptions.arrows, newOptions.arrows, 'from');
}
else {
throw new Error("The arrow options can only be an object or a string. Refer to the documentation. You used:" + JSON.stringify(options.arrows));
throw new Error("The arrow newOptions can only be an object or a string. Refer to the documentation. You used:" + JSON.stringify(newOptions.arrows));
}
}
// hanlde multiple input cases for color
if (options.color !== undefined) {
if (util.isString(options.color)) {
util.assignAllKeys(this.options.color, options.color);
this.options.color.inherit.enabled = false;
if (newOptions.color !== undefined) {
if (util.isString(newOptions.color)) {
parentOptions.color.color = newOptions.color;
parentOptions.color.highlight = newOptions.color;
parentOptions.color.hover = newOptions.color;
parentOptions.color.inherit.enabled = false;
}
else {
let colorsDefined = false;
if (options.color.color !== undefined) {this.options.color.color = options.color.color; colorsDefined = true;}
if (options.color.highlight !== undefined) {this.options.color.highlight = options.color.highlight; colorsDefined = true;}
if (options.color.hover !== undefined) {this.options.color.hover = options.color.hover; colorsDefined = true;}
if (options.color.opacity !== undefined) {this.options.color.opacity = options.color.opacity;}
if (newOptions.color.color !== undefined) {parentOptions.color.color = newOptions.color.color; colorsDefined = true;}
if (newOptions.color.highlight !== undefined) {parentOptions.color.highlight = newOptions.color.highlight; colorsDefined = true;}
if (newOptions.color.hover !== undefined) {parentOptions.color.hover = newOptions.color.hover; colorsDefined = true;}
if (newOptions.color.opacity !== undefined) {parentOptions.color.opacity = newOptions.color.opacity;}
if (options.color.inherit === undefined && colorsDefined === true) {
this.options.color.inherit.enabled = false;
if (newOptions.color.inherit === undefined && colorsDefined === true) {
parentOptions.color.inherit.enabled = false;
}
}
util.mergeOptions(this.options.color, options.color, 'inherit');
util.mergeOptions(parentOptions.color, newOptions.color, 'inherit');
}
// A node is connected when it has a from and to node that both exist in the network.body.nodes.
this.connect();
// update label Module
this.updateLabelModule();
let dataChanged = this.updateEdgeType();
return dataChanged;
}
updateLabelModule() {

+ 55
- 41
lib/network/modules/components/Node.js View File

@ -107,28 +107,6 @@ class Node {
return;
}
var fields = [
'borderWidth',
'borderWidthSelected',
'brokenImage',
'customScalingFunction',
'font',
'hidden',
'icon',
'id',
'image',
'label',
'level',
'physics',
'shape',
'size',
'title',
'value',
'x',
'y'
];
util.selectiveDeepExtend(fields, this.options, options);
// basic options
if (options.id !== undefined) {this.id = options.id;}
@ -140,6 +118,9 @@ class Node {
if (options.y !== undefined) {this.y = options.y; this.predefinedPosition = true;}
if (options.value !== undefined) {this.value = options.value;}
// this transforms all shorthands into fully defined options
Node.parseOptions(this.options,options);
// copy group options
if (typeof options.group === 'number' || (typeof options.group === 'string' && options.group != '')) {
var groupObj = this.grouplist.get(options.group);
@ -147,11 +128,8 @@ class Node {
// the color object needs to be completely defined. Since groups can partially overwrite the colors, we parse it again, just in case.
this.options.color = util.parseColor(this.options.color);
}
// individual shape options
if (options.color !== undefined) {
this.options.color = util.parseColor(options.color);
}
// load the images
if (this.options.image !== undefined && this.options.image != "") {
if (this.imagelist) {
this.imageObj = this.imagelist.load(this.options.image, this.options.brokenImage);
@ -161,27 +139,63 @@ class Node {
}
}
if (options.fixed !== undefined) {
if (typeof options.fixed === 'boolean') {
this.options.fixed.x = true;
this.options.fixed.y = true;
}
else {
if (options.fixed.x !== undefined && typeof options.fixed.x === 'boolean') {
this.options.fixed.x = options.fixed.x;
}
if (options.fixed.y !== undefined && typeof options.fixed.y === 'boolean') {
this.options.fixed.y = options.fixed.y;
}
}
}
this.updateShape();
this.updateLabelModule();
// reset the size of the node, this can be changed
this._reset();
}
/**
* This process all possible shorthands in the new options and makes sure that the parentOptions are fully defined.
* Static so it can also be used by the handler.
* @param parentOptions
* @param newOptions
*/
static parseOptions(parentOptions, newOptions) {
var fields = [
'borderWidth',
'borderWidthSelected',
'brokenImage',
'customScalingFunction',
'font',
'hidden',
'icon',
'id',
'image',
'label',
'level',
'physics',
'shape',
'size',
'title',
'value',
'x',
'y'
];
util.selectiveDeepExtend(fields, parentOptions, newOptions);
// individual shape newOptions
if (newOptions.color !== undefined) {
let parsedColor = util.parseColor(newOptions.color);
util.fillIfDefined(parentOptions.color, parsedColor);
}
if (newOptions.fixed !== undefined) {
if (typeof newOptions.fixed === 'boolean') {
parentOptions.fixed.x = true;
parentOptions.fixed.y = true;
}
else {
if (newOptions.fixed.x !== undefined && typeof newOptions.fixed.x === 'boolean') {
parentOptions.fixed.x = newOptions.fixed.x;
}
if (newOptions.fixed.y !== undefined && typeof newOptions.fixed.y === 'boolean') {
parentOptions.fixed.y = newOptions.fixed.y;
}
}
}
}
updateLabelModule() {

+ 15
- 9
lib/network/modules/components/unified/Label.js View File

@ -22,20 +22,26 @@ class Label {
setOptions(options) {
this.options = options;
if (options.label !== undefined) {
this.labelDirty = true;
}
if (options.font) {
if (typeof options.font === 'string') {
let optionsArray = options.font.split(" ");
this.fontOptions.size = optionsArray[0].replace("px",'');
this.fontOptions.face = optionsArray[1];
this.fontOptions.color = optionsArray[2];
Label.parseOptions(this.fontOptions,options);
}
static parseOptions(parentOptions, newOptions) {
if (newOptions.font !== undefined) {
if (typeof newOptions.font === 'string') {
let newOptionsArray = newOptions.font.split(" ");
parentOptions.size = newOptionsArray[0].replace("px",'');
parentOptions.face = newOptionsArray[1];
parentOptions.color = newOptionsArray[2];
}
else if (typeof options.font === 'object') {
this.fontOptions = util.bridgeObject(options.font);
else if (typeof newOptions.font === 'object') {
util.fillIfDefined(parentOptions, newOptions.font);
}
this.fontOptions.size = Number(this.fontOptions.size);
parentOptions.size = Number(parentOptions.size);
}
}

+ 15
- 0
lib/util.js View File

@ -122,6 +122,21 @@ exports.assignAllKeys = function (obj, value) {
}
/**
* Fill an object with a possibly partially defined other object. Only copies values.
* @param obj
* @param value
*/
exports.fillIfDefined = function (parentObj, newObj) {
for (var prop in parentObj) {
if (newObj[prop] !== undefined) {
if (typeof newObj[prop] !== 'object') {
parentObj[prop] = newObj[prop];
}
}
}
}
/**
* Extend object a with the properties of object b or a series of objects
* Only properties with defined values are copied

Write Preview
Loading…
Cancel
Save