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

Some more decoupling of components options

css_transitions
josdejong 12 years ago
parent
fc11f82f45
commit
a06814d7f1
11 changed files with 87 additions and 147 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +5
    -9
      src/component/group.js
  2. +4
    -9
      src/component/groupset.js
  3. +4
    -10
      src/component/itemset.js
  4. +2
    -8
      src/component/panel.js
  5. +17
    -16
      src/component/rootpanel.js
  6. +2
    -8
      src/component/timeaxis.js
  7. +2
    -2
      src/range.js
  8. +1
    -3
      src/stack.js
  9. +4
    -6
      src/visualization/timeline.js
  10. +42
    -72
      vis.js
  11. +4
    -4
      vis.min.js

+ 5
- 9
src/component/group.js View File

@ -13,24 +13,19 @@ function Group (parent, groupId, options) {
this.groupId = groupId;
this.itemsData = null; // DataSet
this.itemset = null; // ItemSet
this.options = Object.create(parent && parent.options || null);
this.options = options || {};
this.options.top = 0;
this.top = 0;
this.left = 0;
this.width = 0;
this.height = 0;
this.setOptions(options);
}
Group.prototype = new Component();
Group.prototype.setOptions = function setOptions(options) {
if (options) {
util.extend(this.options, options);
}
};
// TODO: comment
Group.prototype.setOptions = Component.prototype.setOptions;
/**
* Get the container element of the panel, which can be used by a child to
@ -59,7 +54,8 @@ Group.prototype.setItems = function setItems(items) {
if (items) {
var groupId = this.groupId;
this.itemset = new ItemSet(this);
var itemsetOptions = Object.create(this.options);
this.itemset = new ItemSet(this, null, itemsetOptions);
this.itemset.setRange(this.parent.range);
this.view = new DataView(items, {

+ 4
- 9
src/component/groupset.js View File

@ -13,7 +13,7 @@ function GroupSet(parent, depends, options) {
this.parent = parent;
this.depends = depends;
this.options = Object.create(parent && parent.options || null);
this.options = options || {};
this.range = null; // Range or Object {start: number, end: number}
this.itemsData = null; // DataSet with items
@ -36,8 +36,6 @@ function GroupSet(parent, depends, options) {
me._onRemove(params.items);
}
};
this.setOptions(options);
}
GroupSet.prototype = new Panel();
@ -47,11 +45,7 @@ GroupSet.prototype = new Panel();
* @param {Object} [options] The following options are available:
* TODO: describe options
*/
GroupSet.prototype.setOptions = function setOptions(options) {
if (options) {
util.extend(this.options, options);
}
};
GroupSet.prototype.setOptions = Component.prototype.setOptions;
GroupSet.prototype.setRange = function (range) {
// TODO: implement setRange
@ -211,7 +205,8 @@ GroupSet.prototype.repaint = function repaint() {
case 'add':
case 'update':
if (!group) {
group = new Group(me, id);
var groupOptions = Object.create(me.options);
group = new Group(me, id, groupOptions);
group.setItems(me.itemsData); // attach items data
groups.push(group);

+ 4
- 10
src/component/itemset.js View File

@ -17,7 +17,7 @@ function ItemSet(parent, depends, options) {
this.depends = depends;
// one options object is shared by this itemset and all its items
this.options = Object.create(parent && parent.options || null);
this.options = options || {};
this.defaultOptions = {
style: 'box',
align: 'center',
@ -55,10 +55,10 @@ function ItemSet(parent, depends, options) {
this.items = {}; // object with an Item for every data item
this.queue = {}; // queue with id/actions: 'add', 'update', 'delete'
this.stack = new Stack(this);
this.stack = new Stack(this, Object.create(this.options));
this.conversion = null;
this.setOptions(options);
// TODO: ItemSet should also attach event listeners for rangechange and rangechanged, like timeaxis
}
ItemSet.prototype = new Panel();
@ -95,13 +95,7 @@ ItemSet.types = {
* Padding of the contents of an item in pixels.
* Must correspond with the items css. Default is 5.
*/
ItemSet.prototype.setOptions = function setOptions(options) {
if (options) {
util.extend(this.options, options);
}
// TODO: ItemSet should also attach event listeners for rangechange and rangechanged, like timeaxis
};
ItemSet.prototype.setOptions = Component.prototype.setOptions;
/**
* Set range (start and end).

+ 2
- 8
src/component/panel.js View File

@ -17,9 +17,7 @@ function Panel(parent, depends, options) {
this.parent = parent;
this.depends = depends;
this.options = Object.create(parent && parent.options || null);
this.setOptions(options);
this.options = options || {};
}
Panel.prototype = new Component();
@ -33,11 +31,7 @@ Panel.prototype = new Component();
* {String | Number | function} [width]
* {String | Number | function} [height]
*/
Panel.prototype.setOptions = function (options) {
if (options) {
util.extend(this.options, options);
}
};
Panel.prototype.setOptions = Component.prototype.setOptions;
/**
* Get the container element of the panel, which can be used by a child to

+ 17
- 16
src/component/rootpanel.js View File

@ -10,14 +10,12 @@ function RootPanel(container, options) {
this.id = util.randomUUID();
this.container = container;
this.options = Object.create(options || null);
this.options = options || {}
this.defaultOptions = {
autoResize: true
};
this.listeners = {}; // event listeners
this.setOptions(options);
}
RootPanel.prototype = new Panel();
@ -32,19 +30,7 @@ RootPanel.prototype = new Panel();
* {String | Number | function} [height]
* {Boolean | function} [autoResize]
*/
RootPanel.prototype.setOptions = function (options) {
if (options) {
util.extend(this.options, options);
}
var autoResize = this.getOption('autoResize');
if (autoResize) {
this._watch();
}
else {
this._unwatch();
}
};
RootPanel.prototype.setOptions = Component.prototype.setOptions;
/**
* Repaint the component
@ -82,6 +68,7 @@ RootPanel.prototype.repaint = function () {
changed += update(frame.style, 'height', asSize(options.height, '100%'));
this._updateEventEmitters();
this._updateWatch();
return (changed > 0);
};
@ -108,6 +95,20 @@ RootPanel.prototype.reflow = function () {
return (changed > 0);
};
/**
* Update watching for resize, depending on the current option
* @private
*/
RootPanel.prototype._updateWatch = function () {
var autoResize = this.getOption('autoResize');
if (autoResize) {
this._watch();
}
else {
this._unwatch();
}
};
/**
* Watch for changes in the size of the frame. On resize, the Panel will
* automatically redraw itself.

+ 2
- 8
src/component/timeaxis.js View File

@ -34,7 +34,7 @@ function TimeAxis (parent, depends, options) {
lineTop: 0
};
this.options = Object.create(parent && parent.options || null);
this.options = options || {};
this.defaultOptions = {
orientation: 'bottom', // supported: 'top', 'bottom'
// TODO: implement timeaxis orientations 'left' and 'right'
@ -44,18 +44,12 @@ function TimeAxis (parent, depends, options) {
this.conversion = null;
this.range = null;
this.setOptions(options);
}
TimeAxis.prototype = new Component();
// TODO: comment options
TimeAxis.prototype.setOptions = function (options) {
if (options) {
util.extend(this.options, options);
}
};
TimeAxis.prototype.setOptions = Component.prototype.setOptions;
/**
* Set a range (start and end)

+ 2
- 2
src/range.js View File

@ -18,9 +18,9 @@ function Range(options) {
zoomMax: null
};
this.setOptions(options);
this.listeners = [];
this.setOptions(options);
}
/**

+ 1
- 3
src/stack.js View File

@ -7,7 +7,7 @@
function Stack (parent, options) {
this.parent = parent;
this.options = Object.create(parent && parent.options || 0);
this.options = options || {};
this.defaultOptions = {
order: function (a, b) {
//return (b.width - a.width) || (a.left - b.left); // TODO: cleanup
@ -38,8 +38,6 @@ function Stack (parent, options) {
};
this.ordered = []; // ordered items
this.setOptions(options);
}
/**

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

@ -62,7 +62,7 @@ function Timeline (container, items, options) {
// TODO: put the listeners in setOptions, be able to dynamically change with options moveable and zoomable
// time axis
var timeaxisOptions = Object.create(this.options);
var timeaxisOptions = Object.create(mainOptions);
timeaxisOptions.range = this.range;
this.timeaxis = new TimeAxis(this.root, [], timeaxisOptions);
this.timeaxis.setRange(this.range);
@ -74,9 +74,6 @@ function Timeline (container, items, options) {
this.itemsData = null; // DataSet
this.groupsData = null; // DataSet
// set options (must take place before setting the data)
this.setOptions(options);
// set data
if (items) {
this.setItems(items);
@ -177,7 +174,8 @@ Timeline.prototype.setGroups = function(groups) {
}
// create new content set
var options = {
var options = Object.create(this.options);
util.extend(options, {
top: function () {
if (me.options.orientation == 'top') {
return me.timeaxis.height;
@ -205,7 +203,7 @@ Timeline.prototype.setGroups = function(groups) {
return null;
}
}
};
});
this.content = new type(this.root, [this.timeaxis], options);
if (this.content.setRange) {
this.content.setRange(this.range);

+ 42
- 72
vis.js View File

@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library.
*
* @version 0.0.8
* @date 2013-05-23
* @date 2013-05-24
*
* @license
* Copyright (C) 2011-2013 Almende B.V, http://almende.com
@ -2589,7 +2589,7 @@ DataView.prototype._trigger = DataSet.prototype._trigger;
function Stack (parent, options) {
this.parent = parent;
this.options = Object.create(parent && parent.options || 0);
this.options = options || {};
this.defaultOptions = {
order: function (a, b) {
//return (b.width - a.width) || (a.left - b.left); // TODO: cleanup
@ -2620,8 +2620,6 @@ function Stack (parent, options) {
};
this.ordered = []; // ordered items
this.setOptions(options);
}
/**
@ -2795,9 +2793,9 @@ function Range(options) {
zoomMax: null
};
this.setOptions(options);
this.listeners = [];
this.setOptions(options);
}
/**
@ -3730,9 +3728,7 @@ function Panel(parent, depends, options) {
this.parent = parent;
this.depends = depends;
this.options = Object.create(parent && parent.options || null);
this.setOptions(options);
this.options = options || {};
}
Panel.prototype = new Component();
@ -3746,11 +3742,7 @@ Panel.prototype = new Component();
* {String | Number | function} [width]
* {String | Number | function} [height]
*/
Panel.prototype.setOptions = function (options) {
if (options) {
util.extend(this.options, options);
}
};
Panel.prototype.setOptions = Component.prototype.setOptions;
/**
* Get the container element of the panel, which can be used by a child to
@ -3842,14 +3834,12 @@ function RootPanel(container, options) {
this.id = util.randomUUID();
this.container = container;
this.options = Object.create(options || null);
this.options = options || {}
this.defaultOptions = {
autoResize: true
};
this.listeners = {}; // event listeners
this.setOptions(options);
}
RootPanel.prototype = new Panel();
@ -3864,19 +3854,7 @@ RootPanel.prototype = new Panel();
* {String | Number | function} [height]
* {Boolean | function} [autoResize]
*/
RootPanel.prototype.setOptions = function (options) {
if (options) {
util.extend(this.options, options);
}
var autoResize = this.getOption('autoResize');
if (autoResize) {
this._watch();
}
else {
this._unwatch();
}
};
RootPanel.prototype.setOptions = Component.prototype.setOptions;
/**
* Repaint the component
@ -3914,6 +3892,7 @@ RootPanel.prototype.repaint = function () {
changed += update(frame.style, 'height', asSize(options.height, '100%'));
this._updateEventEmitters();
this._updateWatch();
return (changed > 0);
};
@ -3940,6 +3919,20 @@ RootPanel.prototype.reflow = function () {
return (changed > 0);
};
/**
* Update watching for resize, depending on the current option
* @private
*/
RootPanel.prototype._updateWatch = function () {
var autoResize = this.getOption('autoResize');
if (autoResize) {
this._watch();
}
else {
this._unwatch();
}
};
/**
* Watch for changes in the size of the frame. On resize, the Panel will
* automatically redraw itself.
@ -4073,7 +4066,7 @@ function TimeAxis (parent, depends, options) {
lineTop: 0
};
this.options = Object.create(parent && parent.options || null);
this.options = options || {};
this.defaultOptions = {
orientation: 'bottom', // supported: 'top', 'bottom'
// TODO: implement timeaxis orientations 'left' and 'right'
@ -4083,18 +4076,12 @@ function TimeAxis (parent, depends, options) {
this.conversion = null;
this.range = null;
this.setOptions(options);
}
TimeAxis.prototype = new Component();
// TODO: comment options
TimeAxis.prototype.setOptions = function (options) {
if (options) {
util.extend(this.options, options);
}
};
TimeAxis.prototype.setOptions = Component.prototype.setOptions;
/**
* Set a range (start and end)
@ -4584,7 +4571,7 @@ function ItemSet(parent, depends, options) {
this.depends = depends;
// one options object is shared by this itemset and all its items
this.options = Object.create(parent && parent.options || null);
this.options = options || {};
this.defaultOptions = {
style: 'box',
align: 'center',
@ -4622,10 +4609,10 @@ function ItemSet(parent, depends, options) {
this.items = {}; // object with an Item for every data item
this.queue = {}; // queue with id/actions: 'add', 'update', 'delete'
this.stack = new Stack(this);
this.stack = new Stack(this, Object.create(this.options));
this.conversion = null;
this.setOptions(options);
// TODO: ItemSet should also attach event listeners for rangechange and rangechanged, like timeaxis
}
ItemSet.prototype = new Panel();
@ -4662,13 +4649,7 @@ ItemSet.types = {
* Padding of the contents of an item in pixels.
* Must correspond with the items css. Default is 5.
*/
ItemSet.prototype.setOptions = function setOptions(options) {
if (options) {
util.extend(this.options, options);
}
// TODO: ItemSet should also attach event listeners for rangechange and rangechanged, like timeaxis
};
ItemSet.prototype.setOptions = Component.prototype.setOptions;
/**
* Set range (start and end).
@ -6019,24 +6000,19 @@ function Group (parent, groupId, options) {
this.groupId = groupId;
this.itemsData = null; // DataSet
this.itemset = null; // ItemSet
this.options = Object.create(parent && parent.options || null);
this.options = options || {};
this.options.top = 0;
this.top = 0;
this.left = 0;
this.width = 0;
this.height = 0;
this.setOptions(options);
}
Group.prototype = new Component();
Group.prototype.setOptions = function setOptions(options) {
if (options) {
util.extend(this.options, options);
}
};
// TODO: comment
Group.prototype.setOptions = Component.prototype.setOptions;
/**
* Get the container element of the panel, which can be used by a child to
@ -6065,7 +6041,8 @@ Group.prototype.setItems = function setItems(items) {
if (items) {
var groupId = this.groupId;
this.itemset = new ItemSet(this);
var itemsetOptions = Object.create(this.options);
this.itemset = new ItemSet(this, null, itemsetOptions);
this.itemset.setRange(this.parent.range);
this.view = new DataView(items, {
@ -6116,7 +6093,7 @@ function GroupSet(parent, depends, options) {
this.parent = parent;
this.depends = depends;
this.options = Object.create(parent && parent.options || null);
this.options = options || {};
this.range = null; // Range or Object {start: number, end: number}
this.itemsData = null; // DataSet with items
@ -6139,8 +6116,6 @@ function GroupSet(parent, depends, options) {
me._onRemove(params.items);
}
};
this.setOptions(options);
}
GroupSet.prototype = new Panel();
@ -6150,11 +6125,7 @@ GroupSet.prototype = new Panel();
* @param {Object} [options] The following options are available:
* TODO: describe options
*/
GroupSet.prototype.setOptions = function setOptions(options) {
if (options) {
util.extend(this.options, options);
}
};
GroupSet.prototype.setOptions = Component.prototype.setOptions;
GroupSet.prototype.setRange = function (range) {
// TODO: implement setRange
@ -6314,7 +6285,8 @@ GroupSet.prototype.repaint = function repaint() {
case 'add':
case 'update':
if (!group) {
group = new Group(me, id);
var groupOptions = Object.create(me.options);
group = new Group(me, id, groupOptions);
group.setItems(me.itemsData); // attach items data
groups.push(group);
@ -6551,7 +6523,7 @@ function Timeline (container, items, options) {
// TODO: put the listeners in setOptions, be able to dynamically change with options moveable and zoomable
// time axis
var timeaxisOptions = Object.create(this.options);
var timeaxisOptions = Object.create(mainOptions);
timeaxisOptions.range = this.range;
this.timeaxis = new TimeAxis(this.root, [], timeaxisOptions);
this.timeaxis.setRange(this.range);
@ -6563,9 +6535,6 @@ function Timeline (container, items, options) {
this.itemsData = null; // DataSet
this.groupsData = null; // DataSet
// set options (must take place before setting the data)
this.setOptions(options);
// set data
if (items) {
this.setItems(items);
@ -6666,7 +6635,8 @@ Timeline.prototype.setGroups = function(groups) {
}
// create new content set
var options = {
var options = Object.create(this.options);
util.extend(options, {
top: function () {
if (me.options.orientation == 'top') {
return me.timeaxis.height;
@ -6694,7 +6664,7 @@ Timeline.prototype.setGroups = function(groups) {
return null;
}
}
};
});
this.content = new type(this.root, [this.timeaxis], options);
if (this.content.setRange) {
this.content.setRange(this.range);

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


Write Preview
Loading…
Cancel
Save