Browse Source

Some more decoupling of components options

css_transitions
josdejong 11 years ago
parent
commit
a06814d7f1
11 changed files with 87 additions and 147 deletions
  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


Loading…
Cancel
Save