29
windowresize: 'resized'
33
initializer: function(options) {
34
ViewportModule.superclass.constructor.apply(this, arguments);
38
var topology = this.get('component'),
40
currentScale = topology.get('scale');
42
ViewportModule.superclass.render.apply(this, arguments);
43
// Build a slider to control zoom level
45
value = currentScale * 100;
47
var slider = new Y.Slider({
52
slider.render('#slider-parent');
53
slider.after('valueChange', function(evt) {
54
// Don't fire a zoom if there's a zoom event already in progress;
55
// that will run rescale for us.
56
if (d3.event && d3.event.scale && d3.event.translate) {
59
topology._fire_zoom((evt.newVal - evt.prevVal) / 100);
67
ViewportModule.superclass.update.apply(this, arguments);
72
* Event handler for windowresize events.
74
* Properly scale the component to take advantage of all the space
75
* provided by the viewport.
79
resized: function(evt) {
80
// start with some reasonable defaults
81
var topology = this.get('component'),
30
windowresize: 'resized',
36
* Set the visualization size based on the viewport.
38
* This event allows other page components that may unintentionally affect
39
* the page size, such as the charm panel, to get out of the way before we
40
* compute sizes. Note the "afterPageSizeRecalculation" event at the end
44
var topo = this.get('component'),
83
45
container = this.get('container'),
84
viewport_height = '100%',
85
viewport_width = '100%',
86
47
svg = container.one('svg'),
90
if (container.get('winHeight') &&
91
Y.one('#overview-tasks') &&
93
// Attempt to get the viewport height minus the navbar at top and
94
// control bar at the bottom. Use Y.one() to ensure that the
95
// container is attached first (provides some sensible defaults)
97
viewport_height = container.get('winHeight') -
98
styleToNumber('#overview-tasks', 'height', 22) - //XXX
99
styleToNumber('.navbar', 'height', 87) - 1; //XXX
101
// Attempt to get the viewport width from the overview-tasks bar.
102
viewport_width = styleToNumber('#viewport', 'width', 800); //XXX
104
// Make sure we don't get sized any smaller than 800x600
105
viewport_height = Math.max(viewport_height, height);
106
viewport_width = Math.max(viewport_width, width);
48
canvas = container.one('.topology-canvas'),
49
zoomPlane = container.one('.zoom-plane');
51
if (!canvas || !svg) {
108
// Set the svg sizes.
109
svg.setAttribute('width', viewport_width)
110
.setAttribute('height', viewport_height);
112
// Get the resulting computed sizes (in the case of 100%).
113
width = parseInt(svg.getComputedStyle('width'), 10);
114
height = parseInt(svg.getComputedStyle('height'), 10);
116
// Set the internal rect's size.
118
.setAttribute('width', width)
119
.setAttribute('height', height);
120
container.one('#canvas').setStyle('height', height);
121
container.one('#canvas').setStyle('width', width);
54
topo.fire('beforePageSizeRecalculation');
55
// Get the canvas out of the way so we can calculate the size
56
// correctly (the canvas contains the svg). We want it to be the
57
// smallest size we accept--no smaller or bigger--or else the
58
// presence or absence of scrollbars may affect our calculations
60
canvas.setStyles({height: 600, width: 800});
61
var dimensions = utils.getEffectiveViewportSize(true, 800, 600);
62
svg.setAttribute('width', dimensions.width);
63
svg.setAttribute('height', dimensions.height);
64
vis.attr('width', dimensions.width);
65
vis.attr('height', dimensions.height);
68
zoomPlane.setAttribute('width', dimensions.width);
69
zoomPlane.setAttribute('height', dimensions.height);
71
width: dimensions.width + 'px',
72
height: dimensions.height + 'px'});
123
73
// Reset the scale parameters
124
topology.xscale.domain([-width / 2, width / 2])
126
topology.yscale.domain([-height / 2, height / 2])
129
topology.width = width;
130
topology.height = height;
74
topo.set('size', [dimensions.width, dimensions.height]);
75
topo.fire('afterPageSizeRecalculation');
added
removed
app/views/topology/viewport.js
