web/gui/src/main/webapp/_bripc/svg-exercise.js

/*
 * 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();
                    });

                }
            };
        }]);
}());