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 11 years ago
parent
fc11f82f45
commit
a06814d7f1
11 changed files with 87 additions and 147 deletions
Unified 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.groupId = groupId;
this.itemsData = null; // DataSet this.itemsData = null; // DataSet
this.itemset = null; // ItemSet this.itemset = null; // ItemSet
this.options = Object.create(parent && parent.options || null);
this.options = options || {};
this.options.top = 0; this.options.top = 0;
this.top = 0; this.top = 0;
this.left = 0; this.left = 0;
this.width = 0; this.width = 0;
this.height = 0; this.height = 0;
this.setOptions(options);
} }
Group.prototype = new Component(); 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 * 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) { if (items) {
var groupId = this.groupId; 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.itemset.setRange(this.parent.range);
this.view = new DataView(items, { 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.parent = parent;
this.depends = depends; 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.range = null; // Range or Object {start: number, end: number}
this.itemsData = null; // DataSet with items this.itemsData = null; // DataSet with items
@ -36,8 +36,6 @@ function GroupSet(parent, depends, options) {
me._onRemove(params.items); me._onRemove(params.items);
} }
}; };
this.setOptions(options);
} }
GroupSet.prototype = new Panel(); GroupSet.prototype = new Panel();
@ -47,11 +45,7 @@ GroupSet.prototype = new Panel();
* @param {Object} [options] The following options are available: * @param {Object} [options] The following options are available:
* TODO: describe options * 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) { GroupSet.prototype.setRange = function (range) {
// TODO: implement setRange // TODO: implement setRange
@ -211,7 +205,8 @@ GroupSet.prototype.repaint = function repaint() {
case 'add': case 'add':
case 'update': case 'update':
if (!group) { 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 group.setItems(me.itemsData); // attach items data
groups.push(group); groups.push(group);

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

@ -17,7 +17,7 @@ function ItemSet(parent, depends, options) {
this.depends = depends; this.depends = depends;
// one options object is shared by this itemset and all its items // 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 = { this.defaultOptions = {
style: 'box', style: 'box',
align: 'center', align: 'center',
@ -55,10 +55,10 @@ function ItemSet(parent, depends, options) {
this.items = {}; // object with an Item for every data item this.items = {}; // object with an Item for every data item
this.queue = {}; // queue with id/actions: 'add', 'update', 'delete' 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.conversion = null;
this.setOptions(options);
// TODO: ItemSet should also attach event listeners for rangechange and rangechanged, like timeaxis
} }
ItemSet.prototype = new Panel(); ItemSet.prototype = new Panel();
@ -95,13 +95,7 @@ ItemSet.types = {
* Padding of the contents of an item in pixels. * Padding of the contents of an item in pixels.
* Must correspond with the items css. Default is 5. * 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). * 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.parent = parent;
this.depends = depends; this.depends = depends;
this.options = Object.create(parent && parent.options || null);
this.setOptions(options);
this.options = options || {};
} }
Panel.prototype = new Component(); Panel.prototype = new Component();
@ -33,11 +31,7 @@ Panel.prototype = new Component();
* {String | Number | function} [width] * {String | Number | function} [width]
* {String | Number | function} [height] * {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 * 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.id = util.randomUUID();
this.container = container; this.container = container;
this.options = Object.create(options || null);
this.options = options || {}
this.defaultOptions = { this.defaultOptions = {
autoResize: true autoResize: true
}; };
this.listeners = {}; // event listeners this.listeners = {}; // event listeners
this.setOptions(options);
} }
RootPanel.prototype = new Panel(); RootPanel.prototype = new Panel();
@ -32,19 +30,7 @@ RootPanel.prototype = new Panel();
* {String | Number | function} [height] * {String | Number | function} [height]
* {Boolean | function} [autoResize] * {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 * Repaint the component
@ -82,6 +68,7 @@ RootPanel.prototype.repaint = function () {
changed += update(frame.style, 'height', asSize(options.height, '100%')); changed += update(frame.style, 'height', asSize(options.height, '100%'));
this._updateEventEmitters(); this._updateEventEmitters();
this._updateWatch();
return (changed > 0); return (changed > 0);
}; };
@ -108,6 +95,20 @@ RootPanel.prototype.reflow = function () {
return (changed > 0); 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 * Watch for changes in the size of the frame. On resize, the Panel will
* automatically redraw itself. * automatically redraw itself.

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

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

+ 2
- 2
src/range.js View File

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

+ 1
- 3
src/stack.js View File

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

+ 42
- 72
vis.js View File

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