| /* |
| * Copyright 2015 Open Networking Laboratory |
| * |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| /* |
| ONOS GUI -- SVG mouse over d3 exercise module |
| */ |
| |
| (function () { |
| 'use strict'; |
| |
| // injected references |
| var $log, fs; |
| |
| // constants |
| var btnWidth = 175, |
| btnHeight = 50, |
| hoverZone = 60, |
| pageMargin = 20; |
| |
| // svg elements |
| var g; |
| |
| // other variables |
| var winWidth, winHeight, |
| mouse; |
| |
| // ==================================================== |
| |
| // helper functions |
| function centeredOnWindow(axis, dim) { |
| return (axis / 2) - (dim / 2); |
| } |
| |
| function randomPos() { |
| return { |
| x: Math.random() * winWidth, |
| y: Math.random() * winHeight |
| } |
| } |
| |
| function getPosition() { |
| var x = randomPos().x + pageMargin, |
| y = randomPos().y + pageMargin, |
| x1 = x + btnWidth, |
| y1 = y + btnHeight, |
| wwMargin = winWidth - pageMargin, |
| whMargin = winHeight - pageMargin; |
| |
| while (x1 >= wwMargin || y1 >= whMargin) { |
| x = randomPos().x + pageMargin; |
| y = randomPos().y + pageMargin; |
| x1 = x + btnWidth; |
| y1 = y + btnHeight; |
| } |
| |
| return { |
| x: x, |
| y: y |
| } |
| } |
| |
| function gTranslate(x, y) { |
| return 'translate(' + x + ',' + y + ')'; |
| } |
| |
| function moveButton() { |
| var pos = getPosition(), |
| x = pos.x, |
| y = pos.y; |
| g.transition() |
| .duration(400) |
| .ease('cubic-out') |
| .attr('transform', gTranslate(x, y)); |
| } |
| |
| angular.module('svgExercise', ['onosUtil']) |
| |
| .controller('svgExCtrl', ['$log', function (_$log_) { |
| $log = _$log_; |
| }]) |
| |
| .directive('improvePerformance', ['FnService', function (_fs_) { |
| fs = _fs_; |
| return { |
| restrict: 'E', |
| link: function (scope, elem, attrs) { |
| winWidth = fs.windowSize().width; |
| winHeight = fs.windowSize().height; |
| var svg = d3.select(elem[0]) |
| .append('svg') |
| .attr({ |
| width: winWidth + 'px', |
| height: winHeight + 'px' |
| }); |
| g = svg.append('g') |
| .attr('transform', |
| gTranslate(centeredOnWindow(winWidth, btnWidth), |
| centeredOnWindow(winHeight, btnHeight))); |
| |
| var button = g.append('rect') |
| .attr({ |
| width: btnWidth + 'px', |
| height: btnHeight + 'px', |
| rx: '10px', |
| 'class': 'button' |
| }), |
| text = g.append('text') |
| .style('text-anchor', 'middle') |
| .text('Click for better performance.') |
| .attr({ |
| x: btnWidth / 2, |
| y: (btnHeight / 2) + 5 |
| }), |
| rect = g.append('rect') |
| .attr({ |
| fill: 'none', |
| 'pointer-events': 'all', |
| width: btnWidth + hoverZone + 'px', |
| height: btnHeight + hoverZone + 'px', |
| x: -(hoverZone / 2), |
| y: -(hoverZone / 2) |
| }); |
| |
| g.on('mousemove', function () { |
| mouse = d3.mouse(this); |
| moveButton(); |
| }); |
| |
| } |
| }; |
| }]); |
| }()); |