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 branch 'develop'

codeClimate v4.15.1
jos 8 years ago
parent
1eaaeb8532 6aa9c6ae07
commit
0666cb142c
26 changed files with 12854 additions and 12333 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +18
    -0
      HISTORY.md
  2. +12573
    -12091
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +22
    -22
      dist/vis.min.js
  5. +8
    -1
      docs/network/nodes.html
  6. +67
    -0
      examples/network/exampleApplications/disassemblerExample.html
  7. +7
    -3
      examples/network/labels/labelAlignment.html
  8. +9
    -1
      gulpfile.js
  9. +20
    -0
      lib/hammerUtil.js
  10. +1
    -2
      lib/network/Network.js
  11. +14
    -5
      lib/network/modules/Canvas.js
  12. +1
    -1
      lib/network/modules/NodesHandler.js
  13. +3
    -2
      lib/network/modules/SelectionHandler.js
  14. +1
    -1
      lib/network/modules/components/Edge.js
  15. +1
    -1
      lib/network/modules/components/Node.js
  16. +27
    -16
      lib/network/modules/components/shared/Label.js
  17. +9
    -2
      lib/timeline/Core.js
  18. +3
    -2
      lib/timeline/Graph2d.js
  19. +4
    -2
      lib/timeline/Timeline.js
  20. +1
    -1
      lib/timeline/component/CustomTime.js
  21. +3
    -1
      lib/timeline/component/DataScale.js
  22. +2
    -2
      lib/timeline/component/ItemSet.js
  23. +15
    -10
      lib/timeline/component/item/BoxItem.js
  24. +19
    -18
      package.json
  25. +24
    -147
      test/networkTest.html
  26. +1
    -1
      test/timeline.html

+ 18
- 0
HISTORY.md View File

@ -2,6 +2,24 @@
http://visjs.org
## 2016-03-08, version 4.15.1
## General
- Updated all dependencies.
### Graph2d
- Fixed #1455: allow vertical panning of the web page on touch devices.
- Fixed #1692: Error when y-axis values are equal.
### Timeline
- Fixed #1455: allow vertical panning of the web page on touch devices.
- Fixed #1695: Item line and dot not correctly reckoning with the line width
when using left or right align.
## 2016-02-23, version 4.15.0
### Timeline

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


+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


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


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

@ -133,7 +133,7 @@ var options = {
background: 'none',
strokeWidth: 0, // px
strokeColor: '#ffffff',
align: 'horizontal'
align: 'center'
},
group: undefined,
hidden: false,
@ -374,6 +374,13 @@ network.setOptions(options);
<td><code>'#ffffff'</code></td>
<td>This is the color of the stroke <i>assuming the value for stroke is higher than 0</i>.</td>
</tr>
<tr parent="font" class="hidden">
<td class="indent">font.align</td>
<td>String</td>
<td><code>'center'</code></td>
<td>This can be set to 'left' to make the label left-aligned. Otherwise,
defaults to 'center'.</td>
</tr>
<tr>
<td>group</td>
<td>String</td>

+ 67
- 0
examples/network/exampleApplications/disassemblerExample.html View File

@ -0,0 +1,67 @@
<html>
<head>
<style type="text/css">
#mynetwork {
width: 900px;
height: 850px;
border: 1px solid lightgray;
}
</style>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script src="../../../dist/vis.js"></script>
</head>
<body>
<p>Use VisJS to diagram the Control-Flow-Graph (CFG) of a function from
a program you wish to analyze.</p>
<p><div id="mynetwork"></div><br /></p>
<script type="text/javascript">
var opts = {
manipulation: false,
height: '90%',
layout: {
hierarchical: {
enabled: true,
levelSeparation: 300
}
},
physics: {
hierarchicalRepulsion: {
nodeDistance: 300
}
}
};
nodes = [
{'id': 'cfg_0x00405a2e', 'size': 150, 'label': "0x00405a2e:\nmov DWORD PTR ss:[esp + 0x000000b0], 0x00000002\nmov DWORD PTR ss:[ebp + 0x00], esi\ntest bl, 0x02\nje 0x00405a49<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a49', 'size': 150, 'label': "0x00405a49:\ntest bl, 0x01\nje 0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a55', 'size': 150, 'label': "0x00405a55:\nmov ecx, DWORD PTR ss:[esp + 0x1c]\npush ecx\ncall 0x004095c6<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a62', 'size': 150, 'label': "0x00405a62:\nmov eax, 0x00000002\nmov ecx, DWORD PTR ss:[esp + 0x000000a8]\nmov DWORD PTR fs:[0x00000000], ecx\npop ecx\npop esi\npop ebp\npop ebx\nadd esp, 0x000000a4\nret\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x004095c6', 'size': 150, 'label': "0x004095c6:\nmov edi, edi\npush ebp\nmov ebp, esp\npop ebp\njmp 0x00417563<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a39', 'size': 150, 'label': "0x00405a39:\nand ebx, 0xfd<-0x03>\nlea ecx, [esp + 0x34]\nmov DWORD PTR ss:[esp + 0x10], ebx\ncall 0x00403450<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00403450', 'size': 150, 'label': "0x00403450:\npush 0xff<-0x01>\npush 0x0042fa64\nmov eax, DWORD PTR fs:[0x00000000]\npush eax\npush ecx\npush ebx\npush ebp\npush esi\npush edi\nmov eax, DWORD PTR ds:[0x0043dff0<.data+0x0ff0>]\nxor eax, esp\npush eax\nlea eax, [esp + 0x18]\nmov DWORD PTR fs:[0x00000000], eax\nmov esi, ecx\nmov DWORD PTR ss:[esp + 0x14], esi\npush esi\nmov DWORD PTR ss:[esp + 0x24], 0x00000004\ncall 0x0042f03f<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a4e', 'size': 150, 'label': "0x00405a4e:\ncmp DWORD PTR ss:[esp + 0x30], 0x10\njb 0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a5f', 'size': 150, 'label': "0x00405a5f:\nadd esp, 0x04\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
]
edges = [
{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a39", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a4e", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a55", 'to': "cfg_0x00405a5f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a55", 'to': "cfg_0x004095c6", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x004095c6", 'to': "cfg_0x00417563", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a39", 'to': "cfg_0x00403450", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a39", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00403450", 'to': "cfg_0x00403489", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00403450", 'to': "cfg_0x0042f03f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a55", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a5f", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
]
var container = document.getElementById('mynetwork');
var data = {'nodes': nodes, 'edges': edges}
var gph = new vis.Network(container, data, opts);
</script>
</body>
</html>

+ 7
- 3
examples/network/labels/labelAlignment.html View File

@ -21,7 +21,10 @@
<body>
<p>Labels of edges can be aligned to edges in various ways. <br>Label alignment for nodes (top, bottom, left, right, inside) is planned but not in vis yet.</p>
<p>Labels of edges can be aligned to edges in various ways.</p>
<p>Text-alignment within node labels can be 'left' or 'center', other font alignments not implemented.</p>
<p>Label alignment (placement of label &quot;box&quot;) for nodes (top, bottom, left, right, inside) is
planned but not in vis yet.</p>
<div id="mynetwork"></div>
@ -30,9 +33,10 @@
var nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
{id: 3, label: 'Node 3'},
{id: 3, label: 'Node 3:\nLeft-Aligned', font: {'face': 'Monospace', align: 'left'}},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
{id: 5, label: 'Node 5\nLeft-Aligned box', shape: 'box',
font: {'face': 'Monospace', align: 'left'}}
];
// create an array with edges

+ 9
- 1
gulpfile.js View File

@ -45,7 +45,15 @@ var webpackConfig = {
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
cacheDirectory: true,
presets: ['es2015']
}
}
],
// exclude requires of moment.js language files

+ 20
- 0
lib/hammerUtil.js View File

@ -46,3 +46,23 @@ exports.offTouch = function (hammer, callback) {
* @param {function} callback Callback, called as callback(event)
*/
exports.offRelease = exports.offTouch;
/**
* Hack the PinchRecognizer such that it doesn't prevent default behavior
* for vertical panning.
*
* Yeah ... this is quite a hack ... see https://github.com/hammerjs/hammer.js/issues/932
*
* @param {Hammer.Pinch} pinchRecognizer
* @return {Hammer.Pinch} returns the pinchRecognizer
*/
exports.disablePreventDefaultVertically = function (pinchRecognizer) {
var TOUCH_ACTION_PAN_Y = 'pan-y';
pinchRecognizer.getTouchAction = function() {
// default method returns [TOUCH_ACTION_NONE]
return [TOUCH_ACTION_PAN_Y];
};
return pinchRecognizer;
};

+ 1
- 2
lib/network/Network.js View File

@ -2,16 +2,15 @@
require('./shapes');
let Emitter = require('emitter-component');
let Hammer = require('../module/hammer');
let util = require('../util');
let DataSet = require('../DataSet');
let DataView = require('../DataView');
let dotparser = require('./dotparser');
let gephiParser = require('./gephiParser');
let Images = require('./Images');
let Activator = require('../shared/Activator');
let locales = require('./locales');
import Images from './Images';
import Groups from './modules/Groups';
import NodesHandler from './modules/NodesHandler';
import EdgesHandler from './modules/EdgesHandler';

+ 14
- 5
lib/network/modules/Canvas.js View File

@ -17,6 +17,7 @@ class Canvas {
this.resizeTimer = undefined;
this.resizeFunction = this._onResize.bind(this);
this.cameraState = {};
this.initialized = false;
this.options = {};
this.defaultOptions = {
@ -88,10 +89,15 @@ class Canvas {
* @private
*/
_getCameraState(pixelRatio = this.pixelRatio) {
this.cameraState.previousWidth = this.frame.canvas.width / pixelRatio;
this.cameraState.previousHeight = this.frame.canvas.height / pixelRatio;
this.cameraState.scale = this.body.view.scale;
this.cameraState.position = this.DOMtoCanvas({x: 0.5 * this.frame.canvas.width / pixelRatio, y: 0.5 * this.frame.canvas.height / pixelRatio});
if (this.initialized === true) {
this.cameraState.previousWidth = this.frame.canvas.width / pixelRatio;
this.cameraState.previousHeight = this.frame.canvas.height / pixelRatio;
this.cameraState.scale = this.body.view.scale;
this.cameraState.position = this.DOMtoCanvas({
x: 0.5 * this.frame.canvas.width / pixelRatio,
y: 0.5 * this.frame.canvas.height / pixelRatio
});
}
}
/**
@ -216,7 +222,7 @@ class Canvas {
this.hammer = new Hammer(this.frame.canvas);
this.hammer.get('pinch').set({enable: true});
// enable to get better response, todo: test on mobile.
this.hammer.get('pan').set({threshold:5, direction:30}); // 30 is ALL_DIRECTIONS in hammer.
this.hammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_ALL});
hammerUtil.onTouch(this.hammer, (event) => {this.body.eventListeners.onTouch(event)});
this.hammer.on('tap', (event) => {this.body.eventListeners.onTap(event)});
@ -311,6 +317,9 @@ class Canvas {
this._setCameraState();
}
// set initialized so the get and set camera will work from now on.
this.initialized = true;
return emitEvent;
};

+ 1
- 1
lib/network/modules/NodesHandler.js View File

@ -49,7 +49,7 @@ class NodesHandler {
background: 'none',
strokeWidth: 0, // px
strokeColor: '#ffffff',
align: 'horizontal'
align: 'center'
},
group: undefined,
hidden: false,

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

@ -1,5 +1,6 @@
let Node = require("./components/Node");
let Edge = require("./components/Edge");
import Node from './components/Node';
import Edge from './components/Edge';
let util = require('../../util');
class SelectionHandler {

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

@ -49,7 +49,7 @@ class Edge {
this.connected = false;
this.labelModule = new Label(this.body, this.options);
this.labelModule = new Label(this.body, this.options, true /* It's an edge label */);
this.setOptions(options);
}

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

@ -67,7 +67,7 @@ class Node {
this.selected = false;
this.hover = false;
this.labelModule = new Label(this.body, this.options);
this.labelModule = new Label(this.body, this.options, false /* Not edge label */);
this.setOptions(options);
}

+ 27
- 16
lib/network/modules/components/shared/Label.js View File

@ -1,7 +1,7 @@
let util = require('../../../../util');
class Label {
constructor(body,options) {
constructor(body,options,edgelabel = false) {
this.body = body;
this.pointToSelf = false;
@ -9,6 +9,7 @@ class Label {
this.fontOptions = {};
this.setOptions(options);
this.size = {top: 0, left: 0, width: 0, height: 0, yLine: 0}; // could be cached
this.isEdgeLabel = edgelabel;
}
setOptions(options, allowDeletion = false) {
@ -87,19 +88,23 @@ class Label {
let lineMargin = 2;
switch (this.fontOptions.align) {
case 'middle':
ctx.fillRect(-this.size.width * 0.5, -this.size.height * 0.5, this.size.width, this.size.height);
break;
case 'top':
ctx.fillRect(-this.size.width * 0.5, -(this.size.height + lineMargin), this.size.width, this.size.height);
break;
case 'bottom':
ctx.fillRect(-this.size.width * 0.5, lineMargin, this.size.width, this.size.height);
break;
default:
ctx.fillRect(this.size.left, this.size.top - 0.5*lineMargin, this.size.width, this.size.height);
break;
if (this.isEdgeLabel) {
switch (this.fontOptions.align) {
case 'middle':
ctx.fillRect(-this.size.width * 0.5, -this.size.height * 0.5, this.size.width, this.size.height);
break;
case 'top':
ctx.fillRect(-this.size.width * 0.5, -(this.size.height + lineMargin), this.size.width, this.size.height);
break;
case 'bottom':
ctx.fillRect(-this.size.width * 0.5, lineMargin, this.size.width, this.size.height);
break;
default:
ctx.fillRect(this.size.left, this.size.top - 0.5*lineMargin, this.size.width, this.size.height);
break;
}
} else {
ctx.fillRect(this.size.left, this.size.top - 0.5*lineMargin, this.size.width, this.size.height);
}
}
}
@ -127,7 +132,13 @@ class Label {
// configure context for drawing the text
ctx.font = (selected && this.nodeOptions.labelHighlightBold ? 'bold ' : '') + fontSize + "px " + this.fontOptions.face;
ctx.fillStyle = fontColor;
ctx.textAlign = 'center';
// When the textAlign property is 'left', make label left-justified
if ((!this.isEdgeLabel) && this.fontOptions.align === 'left') {
ctx.textAlign = this.fontOptions.align;
x = x - 0.5 * this.size.width; // Shift label 1/2-distance to the left
} else {
ctx.textAlign = 'center';
}
// set the strokeWidth
if (this.fontOptions.strokeWidth > 0) {
@ -149,7 +160,7 @@ class Label {
_setAlignment(ctx, x, yLine, baseline) {
// check for label alignment (for edges)
// TODO: make alignment for nodes
if (this.fontOptions.align !== 'horizontal' && this.pointToSelf === false) {
if (this.isEdgeLabel && this.fontOptions.align !== 'horizontal' && this.pointToSelf === false) {
x = 0;
yLine = 0;

+ 9
- 2
lib/timeline/Core.js View File

@ -118,8 +118,9 @@ Core.prototype._create = function (container) {
// create event listeners for all interesting events, these events will be
// emitted via emitter
this.hammer = new Hammer(this.dom.root);
this.hammer.get('pinch').set({enable: true});
this.hammer.get('pan').set({threshold:5, direction:30}); // 30 is ALL_DIRECTIONS in hammer.
var pinchRecognizer = this.hammer.get('pinch').set({enable: true});
hammerUtil.disablePreventDefaultVertically(pinchRecognizer);
this.hammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_HORIZONTAL});
this.listeners = {};
var events = [
@ -768,6 +769,12 @@ Core.prototype._redraw = function() {
dom.shadowTopRight.style.visibility = visibilityTop;
dom.shadowBottomRight.style.visibility = visibilityBottom;
// enable/disable vertical panning
var contentsOverflow = this.props.center.height > this.props.centerContainer.height;
this.hammer.get('pan').set({
direction: contentsOverflow ? Hammer.DIRECTION_ALL : Hammer.DIRECTION_HORIZONTAL
});
// redraw all components
this.components.forEach(function (component) {
resized = component.redraw() || resized;

+ 3
- 2
lib/timeline/Graph2d.js View File

@ -11,12 +11,13 @@ var CurrentTime = require('./component/CurrentTime');
var CustomTime = require('./component/CustomTime');
var LineGraph = require('./component/LineGraph');
var Configurator = require('../shared/Configurator');
var Validator = require('../shared/Validator').default;
var printStyle = require('../shared/Validator').printStyle;
var allOptions = require('./optionsGraph2d').allOptions;
var configureOptions = require('./optionsGraph2d').configureOptions;
import Configurator from '../shared/Configurator';
import Validator from '../shared/Validator';
/**
* Create a timeline visualization
* @param {HTMLElement} container

+ 4
- 2
lib/timeline/Timeline.js View File

@ -11,12 +11,14 @@ var CurrentTime = require('./component/CurrentTime');
var CustomTime = require('./component/CustomTime');
var ItemSet = require('./component/ItemSet');
var Configurator = require('../shared/Configurator');
var Validator = require('../shared/Validator').default;
var printStyle = require('../shared/Validator').printStyle;
var allOptions = require('./optionsTimeline').allOptions;
var configureOptions = require('./optionsTimeline').configureOptions;
import Configurator from '../shared/Configurator';
import Validator from '../shared/Validator';
/**
* Create a timeline visualization
* @param {HTMLElement} container

+ 1
- 1
lib/timeline/component/CustomTime.js View File

@ -84,7 +84,7 @@ CustomTime.prototype._create = function() {
this.hammer.on('panstart', this._onDragStart.bind(this));
this.hammer.on('panmove', this._onDrag.bind(this));
this.hammer.on('panend', this._onDragEnd.bind(this));
this.hammer.get('pan').set({threshold:5, direction:30}); // 30 is ALL_DIRECTIONS in hammer.
this.hammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_HORIZONTAL});
};
/**

+ 3
- 1
lib/timeline/component/DataScale.js View File

@ -59,7 +59,9 @@ DataScale.prototype.determineScale = function () {
var range = this._end - this._start;
this.scale = this.containerHeight / range;
var minimumStepValue = this.majorCharHeight / this.scale;
var orderOfMagnitude = Math.round(Math.log(range) / Math.LN10);
var orderOfMagnitude = (range > 0)
? Math.round(Math.log(range) / Math.LN10)
: 0;
this.minorStepIdx = -1;
this.magnitudefactor = Math.pow(10, orderOfMagnitude);

+ 2
- 2
lib/timeline/component/ItemSet.js View File

@ -220,7 +220,7 @@ ItemSet.prototype._create = function(){
this.hammer.on('panstart', this._onDragStart.bind(this));
this.hammer.on('panmove', this._onDrag.bind(this));
this.hammer.on('panend', this._onDragEnd.bind(this));
this.hammer.get('pan').set({threshold:5, direction:30}); // 30 is ALL_DIRECTIONS in hammer.
this.hammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_HORIZONTAL});
// single select (or unselect) when tapping an item
this.hammer.on('tap', this._onSelectItem.bind(this));
@ -235,7 +235,7 @@ ItemSet.prototype._create = function(){
this.groupHammer.on('panstart', this._onGroupDragStart.bind(this));
this.groupHammer.on('panmove', this._onGroupDrag.bind(this));
this.groupHammer.on('panend', this._onGroupDragEnd.bind(this));
this.groupHammer.get('pan').set({threshold:5, direction:30});
this.groupHammer.get('pan').set({threshold:5, direction: Hammer.DIRECTION_HORIZONTAL});
// attach to the DOM
this.show();

+ 15
- 10
lib/timeline/component/item/BoxItem.js View File

@ -168,28 +168,33 @@ BoxItem.prototype.hide = function() {
BoxItem.prototype.repositionX = function() {
var start = this.conversion.toScreen(this.data.start);
var align = this.options.align;
var left;
// calculate left position of the box
if (align == 'right') {
this.left = start - this.width;
// reposition box, line, and dot
this.dom.box.style.left = this.left + 'px';
this.dom.line.style.left = (start - this.props.line.width) + 'px';
this.dom.dot.style.left = (start - this.props.line.width / 2 - this.props.dot.width / 2) + 'px';
}
else if (align == 'left') {
this.left = start;
// reposition box, line, and dot
this.dom.box.style.left = this.left + 'px';
this.dom.line.style.left = start + 'px';
this.dom.dot.style.left = (start + this.props.line.width / 2 - this.props.dot.width / 2) + 'px';
}
else {
// default or 'center'
this.left = start - this.width / 2;
}
// reposition box
this.dom.box.style.left = this.left + 'px';
// reposition line
this.dom.line.style.left = (start - this.props.line.width / 2) + 'px';
// reposition dot
this.dom.dot.style.left = (start - this.props.dot.width / 2) + 'px';
// reposition box, line, and dot
this.dom.box.style.left = this.left + 'px';
this.dom.line.style.left = (start - this.props.line.width / 2) + 'px';
this.dom.dot.style.left = (start - this.props.dot.width / 2) + 'px';
}
};
/**

+ 19
- 18
package.json View File

@ -1,6 +1,6 @@
{
"name": "vis",
"version": "4.15.0",
"version": "4.15.1",
"description": "A dynamic, browser-based visualization library.",
"homepage": "http://visjs.org/",
"license": "(Apache-2.0 OR MIT)",
@ -30,26 +30,27 @@
},
"dependencies": {},
"devDependencies": {
"babel-core": "^6.6.5",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babelify": "^7.2.0",
"clean-css": "^3.4.10",
"emitter-component": "^1.1.1",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-util": "^3.0.7",
"hammerjs": "^2.0.6",
"keycharm": "^0.2.0",
"moment": "^2.10.2",
"propagating-hammerjs": "^1.4.5",
"merge-stream": "^1.0.0",
"mocha": "^2.4.5",
"moment": "^2.12.0",
"propagating-hammerjs": "^1.4.6",
"rimraf": "^2.5.2",
"uglify-js": "^2.6.2",
"uuid": "^2.0.1",
"babel": "^5.1.11",
"babel-loader": "^5.0.0",
"babelify": "^6.0.2",
"clean-css": "^3.2.1",
"gulp": "^3.8.11",
"gulp-concat": "^2.5.2",
"gulp-minify-css": "^1.0.0",
"gulp-rename": "^1.2.2",
"gulp-util": "^3.0.4",
"merge-stream": "^0.1.7",
"mocha": "^2.2.4",
"rimraf": "^2.3.2",
"uglify-js": "^2.4.20",
"webpack": "^1.8.5",
"yargs": "^3.7.2"
"webpack": "^1.12.14",
"yargs": "^4.2.0"
}
}

+ 24
- 147
test/networkTest.html View File

@ -20,164 +20,41 @@
<script type="text/javascript">
// create a network
var container = document.getElementById('network');
var nodes = new vis.DataSet([]);
var edges = new vis.DataSet([]);
// create a network
var data = {
nodes: [{
"id": "59acc308-fc78-11e3-a451-005056967662_1",
"level": 1,
"shape": "box",
"label": "737464 (HALB)\nLenks\u00e4ule\n0 | M1182 - TK-PF\n0 | M2676 - TK-PF",
}, {
"id": "bc5ada61-e297-11e3-a03f-005056967662_2",
"level": 2,
"shape": "box",
"label": "578647 C (HALB)\nF\u00fchrungskasten komplett\n0000 | M2731 - TK-PF",
}, {
"id": "6f8a780a-e28e-11e3-a03f-005056967662_2",
"level": 2,
"shape": "box",
"label": "615430 C (HALB)\nF\u00fchrungskasten komplett\n0000 | M2781 - TK-PF\n0000 | M2788 - TK-PF",
}, {
"id": "49bb72b1-e2b2-11e3-a03f-005056967662_2",
"level": 2,
"shape": "box",
"label": "678478 D (HALB)\nF\u00fchrungskasten montiert\n0 | M1085 - TK-PFC",
}, {
"id": "e7bf7c7e-e28e-11e3-a03f-005056967662_2",
"level": 2,
"shape": "box",
"label": "727672 B (HALB)\nF\u00fchrungskasten komplett\n0 | M9999 - TK-PTH\n0000 | M1155 - TK-PTH",
}, {
"id": "623e8501-e2e2-11e3-a03f-005056967662_2",
"level": 2,
"shape": "box",
"label": "760550 A (HALB)\nF\u00fchrungskasten komplett\n0000 | M1556 - TK-PHS",
}, {
"id": "e7c6dcdf-e28e-11e3-a03f-005056967662_2",
"level": 2,
"shape": "box",
"label": "793641 A (HALB)\nF\u00fchrungskasten komplett\n0000 | M1155 - TK-PTH",
}, {
"id": "623edd04-e2e2-11e3-a03f-005056967662_2",
"level": 2,
"shape": "box",
"label": "802797 A (HALB)\nF\u00fchrungskasten komplett\n0 | M1556 - TK-PHS",
}, {
"id": "a986a9ab-fc82-11e3-a451-005056967662_2",
"level": 2,
"shape": "box",
"label": "821943 (HALB)\nF\u00fchrungskasten komplett\n0 | M2781 - TK-PF",
}, {
"id": "c22dda1e-fc84-11e3-a451-005056967662_2",
"level": 2,
"shape": "box",
"label": "821944 (HALB)\nF\u00fchrungskasten komplett\n0 | M2781 - TK-PF",
}, {
"id": "a05fcb83-29c6-11e4-9203-005056967662_2",
"level": 2,
"shape": "box",
"label": "828431 (HALB)\nF\u00fchrungskasten komplett",
}, {
"id": "eb9b67b7-6e3f-11e4-9203-005056967662_2",
"level": 2,
"shape": "box",
"label": "829382 A (HALB)\nF\u00fchrungskasten komplett\n0 | M1556 - TK-PHS",
}, {
"id": "084ec1e3-e447-11e3-a03f-005056967662_3",
"level": 3,
"shape": "box",
"color": "#00ff00",
"label": "310759 C (ROH)\nSchr\u00e4gkugellager",
}],
edges: [{
"from": "59acc308-fc78-11e3-a451-005056967662_1",
"to": "a986a9ab-fc82-11e3-a451-005056967662_2"
}, {
"from": "bc5ada61-e297-11e3-a03f-005056967662_2",
"to": "084ec1e3-e447-11e3-a03f-005056967662_3"
}, {
"from": "6f8a780a-e28e-11e3-a03f-005056967662_2",
"to": "084ec1e3-e447-11e3-a03f-005056967662_3"
}, {
"from": "49bb72b1-e2b2-11e3-a03f-005056967662_2",
"to": "084ec1e3-e447-11e3-a03f-005056967662_3"
}, {
"from": "e7bf7c7e-e28e-11e3-a03f-005056967662_2",
"to": "084ec1e3-e447-11e3-a03f-005056967662_3"
}, {
"from": "623e8501-e2e2-11e3-a03f-005056967662_2",
"to": "084ec1e3-e447-11e3-a03f-005056967662_3"
}, {
"from": "e7c6dcdf-e28e-11e3-a03f-005056967662_2",
"to": "084ec1e3-e447-11e3-a03f-005056967662_3"
}, {
"from": "623edd04-e2e2-11e3-a03f-005056967662_2",
"to": "084ec1e3-e447-11e3-a03f-005056967662_3"
}, {
"from": "a986a9ab-fc82-11e3-a451-005056967662_2",
"to": "084ec1e3-e447-11e3-a03f-005056967662_3"
}, {
"from": "c22dda1e-fc84-11e3-a451-005056967662_2",
"to": "084ec1e3-e447-11e3-a03f-005056967662_3"
}, {
"from": "a05fcb83-29c6-11e4-9203-005056967662_2",
"to": "084ec1e3-e447-11e3-a03f-005056967662_3"
}, {
"from": "eb9b67b7-6e3f-11e4-9203-005056967662_2",
"to": "084ec1e3-e447-11e3-a03f-005056967662_3"
}]
nodes: nodes,
edges: edges
};
var ids = {};
for ( var i = 0; i < data.nodes.length; i++) {
ids[data.nodes[i].id] = i;
data.nodes[i].id = i
data.nodes[i].label = i
}
for ( var i = 0; i < data.edges.length; i++) {
data.edges[i].from = ids[data.edges[i].from]
data.edges[i].to = ids[data.edges[i].to]
}
// data.nodes.update({id: 0, label: 'node 1'});
var fontFace = 'roboto,"helvetica neue","segoe ui",arial,helvetica,sans-serif';
var options = {
layout: {
hierarchical: {
//enabled: true,
nodeSpacing: 100,
//blockShifting: false,
//edgeMinimization: false,
direction: 'UD',
sortMethod: 'directed'
},
},
autoResize: true,
interaction: {
dragNodes: true,
hover: true
},
physics: {
enabled: false
width: '100%',
height: '400px',
nodes: {
shape: 'dot',
font: {
size: 13,
face: fontFace,
strokeColor: '#fff',
strokeWidth: 5
}
}
};
var network = new vis.Network(container, data, options);
network.on('click', function(params) {
if (params.nodes !== undefined) {
var firstNode = params.nodes[0];
if (firstNode !== undefined) {
var splitted = firstNode.split('_');
function info(s) {
document.getElementById('num').innerText += s + '\n';
}
Lisp.request.get('/dataStore/article/detail/id/' + splitted[0]);
}
}
});

+ 1
- 1
test/timeline.html View File

@ -120,7 +120,7 @@
'<div onclick="alert(\'you clicked a div\'); ">Click here! (div)</div>', start: now.clone().add(-2, 'days').toDate() },
{_id: 3, content: 'item 3', start: now.clone().add(2, 'days').toDate(), style: 'color: red;'},
{
_id: 4, content: 'item 4 foo bar foo bar foo bar foo bar foo bar',
_id: 4, content: 'item 4 foo bar foo bar foo bar foo bar foo bar <a href="http://visjs.org">Normal link</a>',
start: now.clone().add(0, 'days').toDate(),
end: now.clone().add(7, 'days').toDate(),
title: 'hello title!'

Write Preview
Loading…
Cancel
Save