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

Added an option to force a reflow/repaint instead of kindly request it

css_transitions
josdejong 11 years ago
parent
279f918b12
commit
08b6ba904e
8 changed files with 185 additions and 83 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +14
    -14
      examples/timeline/01_basic.html
  2. +30
    -30
      examples/timeline/02_dataset.html
  3. +70
    -0
      examples/timeline/04_a_lot_of_data.html
  4. +29
    -14
      src/controller.js
  5. +4
    -3
      src/visualization/timeline.js
  6. +1
    -1
      test/timeline.html
  7. +34
    -18
      vis.js
  8. +3
    -3
      vis.min.js

+ 14
- 14
examples/timeline/01_basic.html View File

@ -12,20 +12,20 @@
<script src="../../vis.js"></script>
</head>
<body>
<div id="visualization"></div>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
</script>
<script type="text/javascript">
var container = document.getElementById('visualization');
var data = [
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
</script>
</body>
</html>

+ 30
- 30
examples/timeline/02_dataset.html View File

@ -6,7 +6,7 @@
<style>
body, html {
font-family: arial, sans-serif;
font-size: 12pt;
font-size: 11pt;
}
#visualization {
@ -23,34 +23,34 @@
<script src="../../vis.js"></script>
</head>
<body>
<div id="visualization"></div>
<script>
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var data = new vis.DataSet({
fieldTypes: {
start: 'Date',
end: 'Date'
}
});
data.add([
{id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4).toDate()},
{id: 2, content: 'item 2', start: now.clone().add('days', -2).toDate() },
{id: 3, content: 'item 3', start: now.clone().add('days', 2).toDate()},
{id: 4, content: 'item 4', start: now.clone().add('days', 0).toDate(), end: now.clone().add('days', 3).toDate()},
{id: 5, content: 'item 5', start: now.clone().add('days', 9).toDate(), type:'point'},
{id: 6, content: 'item 6', start: now.clone().add('days', 11).toDate()}
]);
var container = document.getElementById('visualization');
var options = {
start: now.clone().add('days', -3).valueOf(),
end: now.clone().add('days', 7).valueOf()
};
var timeline = new vis.Timeline(container, data, options);
</script>
<div id="visualization"></div>
<script>
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var data = new vis.DataSet({
fieldTypes: {
start: 'Date',
end: 'Date'
}
});
data.add([
{id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4).toDate()},
{id: 2, content: 'item 2', start: now.clone().add('days', -2).toDate() },
{id: 3, content: 'item 3', start: now.clone().add('days', 2).toDate()},
{id: 4, content: 'item 4', start: now.clone().add('days', 0).toDate(), end: now.clone().add('days', 3).toDate()},
{id: 5, content: 'item 5', start: now.clone().add('days', 9).toDate(), type:'point'},
{id: 6, content: 'item 6', start: now.clone().add('days', 11).toDate()}
]);
var container = document.getElementById('visualization');
var options = {
start: now.clone().add('days', -3).valueOf(),
end: now.clone().add('days', 7).valueOf()
};
var timeline = new vis.Timeline(container, data, options);
</script>
</body>
</html>

+ 70
- 0
examples/timeline/04_a_lot_of_data.html View File

@ -0,0 +1,70 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline demo - a lot of data</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
#visualization {
box-sizing: border-box;
width: 100%;
height: 300px;
}
#visualization .itemset {
/*background: rgba(255, 255, 0, 0.5);*/
}
</style>
<script src="../../vis.js"></script>
</head>
<body>
<p>
Test with a lot of data
</p>
<p>
<label for="count">Number of items</label>
<input id="count" value="100">
<input id="draw" type="button" value="draw">
</p>
<div id="visualization"></div>
<script>
// create a dataset with items
var now = moment().minutes(0).seconds(0).milliseconds(0);
var data = new vis.DataSet({
fieldTypes: {
start: 'Date',
end: 'Date'
}
});
// create data
function createData() {
var count = parseInt(document.getElementById('count').value) || 100;
var newData = [];
for (var i = 0; i < count; i++) {
newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i).toDate()});
}
data.clear();
data.add(newData);
}
createData();
document.getElementById('draw').onclick = createData;
var container = document.getElementById('visualization');
var options = {
start: now.clone().add('days', -3).valueOf(),
end: now.clone().add('days', 7).valueOf()
};
var timeline = new vis.Timeline(container, data, options);
</script>
</body>
</html>

+ 29
- 14
src/controller.js View File

@ -32,28 +32,43 @@ Controller.prototype.add = function (component) {
/**
* Request a reflow. The controller will schedule a reflow
* @param {Boolean} [force] If true, an immediate reflow is forced. Default
* is false.
*/
Controller.prototype.requestReflow = function () {
if (!this.reflowTimer) {
var me = this;
this.reflowTimer = setTimeout(function () {
me.reflowTimer = undefined;
me.reflow();
}, 0);
Controller.prototype.requestReflow = function (force) {
if (force) {
this.reflow();
}
else {
if (!this.reflowTimer) {
var me = this;
this.reflowTimer = setTimeout(function () {
me.reflowTimer = undefined;
me.reflow();
}, 0);
}
}
};
/**
* Request a repaint. The controller will schedule a repaint
* @param {Boolean} [force] If true, an immediate repaint is forced. Default
* is false.
*/
Controller.prototype.requestRepaint = function () {
if (!this.repaintTimer) {
var me = this;
this.repaintTimer = setTimeout(function () {
me.repaintTimer = undefined;
me.repaint();
}, 0);
Controller.prototype.requestRepaint = function (force) {
if (force) {
this.repaint();
}
else {
if (!this.repaintTimer) {
var me = this;
this.repaintTimer = setTimeout(function () {
me.repaintTimer = undefined;
me.repaint();
}, 0);
}
}
};
/**

+ 4
- 3
src/visualization/timeline.js View File

@ -40,11 +40,12 @@ function Timeline (container, data, options) {
this.range.subscribe(this.main, 'move', 'horizontal');
this.range.subscribe(this.main, 'zoom', 'horizontal');
this.range.on('rangechange', function () {
// TODO: fix the delay in reflow/repaint, does not feel snappy
me.controller.requestReflow();
var force = true;
me.controller.requestReflow(force);
});
this.range.on('rangechanged', function () {
me.controller.requestReflow();
var force = true;
me.controller.requestReflow(force);
});
// TODO: put the listeners in setOptions, be able to dynamically change with options moveable and zoomable

+ 1
- 1
test/timeline.html View File

@ -7,7 +7,7 @@
<style type="text/css">
body, html {
font-family: sans-serif;
font-size: 12pt;
font-size: 11pt;
}
#visualization .itemset {

+ 34
- 18
vis.js View File

@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library.
*
* @version 0.0.7
* @date 2013-05-01
* @date 2013-05-02
*
* @license
* Copyright (C) 2011-2013 Almende B.V, http://almende.com
@ -2790,28 +2790,43 @@ Controller.prototype.add = function (component) {
/**
* Request a reflow. The controller will schedule a reflow
* @param {Boolean} [force] If true, an immediate reflow is forced. Default
* is false.
*/
Controller.prototype.requestReflow = function () {
if (!this.reflowTimer) {
var me = this;
this.reflowTimer = setTimeout(function () {
me.reflowTimer = undefined;
me.reflow();
}, 0);
Controller.prototype.requestReflow = function (force) {
if (force) {
this.reflow();
}
else {
if (!this.reflowTimer) {
var me = this;
this.reflowTimer = setTimeout(function () {
me.reflowTimer = undefined;
me.reflow();
}, 0);
}
}
};
/**
* Request a repaint. The controller will schedule a repaint
* @param {Boolean} [force] If true, an immediate repaint is forced. Default
* is false.
*/
Controller.prototype.requestRepaint = function () {
if (!this.repaintTimer) {
var me = this;
this.repaintTimer = setTimeout(function () {
me.repaintTimer = undefined;
me.repaint();
}, 0);
Controller.prototype.requestRepaint = function (force) {
if (force) {
this.repaint();
}
else {
if (!this.repaintTimer) {
var me = this;
this.repaintTimer = setTimeout(function () {
me.repaintTimer = undefined;
me.repaint();
}, 0);
}
}
};
/**
@ -5110,11 +5125,12 @@ function Timeline (container, data, options) {
this.range.subscribe(this.main, 'move', 'horizontal');
this.range.subscribe(this.main, 'zoom', 'horizontal');
this.range.on('rangechange', function () {
// TODO: fix the delay in reflow/repaint, does not feel snappy
me.controller.requestReflow();
var force = true;
me.controller.requestReflow(force);
});
this.range.on('rangechanged', function () {
me.controller.requestReflow();
var force = true;
me.controller.requestReflow(force);
});
// TODO: put the listeners in setOptions, be able to dynamically change with options moveable and zoomable

+ 3
- 3
vis.min.js
File diff suppressed because it is too large
View File


Write Preview
Loading…
Cancel
Save