diff --git a/web/gui/src/main/webapp/_bripc/svg-exercise.html b/web/gui/src/main/webapp/_bripc/svg-exercise.html index 3952b6ced2..785a3a72af 100644 --- a/web/gui/src/main/webapp/_bripc/svg-exercise.html +++ b/web/gui/src/main/webapp/_bripc/svg-exercise.html @@ -42,6 +42,7 @@ .button { fill: #369; /* TODO: figure out why svg filters are not working */ + /* is it because there is an invisible rectangle behind it? */ /*filter: url(#innerbevel);*/ } svg text { diff --git a/web/gui/src/main/webapp/_bripc/svg-exercise.js b/web/gui/src/main/webapp/_bripc/svg-exercise.js index a5501923f5..1595f76f3c 100644 --- a/web/gui/src/main/webapp/_bripc/svg-exercise.js +++ b/web/gui/src/main/webapp/_bripc/svg-exercise.js @@ -29,7 +29,7 @@ btnHeight = 50, hoverZone = 60, sectorDivisions = 3, - pageMargin = 20; + pageMargin = 10; // svg elements var svg, g; @@ -37,48 +37,16 @@ // other variables var winWidth, winHeight, sectorWidth, sectorHeight, - currSector = 4, + currSector = 4, // always starts in the middle mouse; // ==================================================== - // helper functions function centeredOnWindow(axis, dim) { return (axis / 2) - (dim / 2); } - // ==================================================== - - function center(elem) { - $log.debug(winWidth / 2); - $log.debug(winHeight / 2); - $log.debug((winWidth / 2) - ((elem.node().getBBox().width) / 2)); - $log.debug((winHeight / 2) - ((elem.node().getBBox().height) / 2)); - return { - x: (winWidth / 2) - ((elem.node().getBBox().width) / 2), - y: (winHeight / 2) - ((elem.node().getBBox().height) / 2) - } - } - function showSectors() { - svg.append('line') - .attr({ - x1: winWidth / 2, - x2: winWidth / 2, - y1: 0, - y2: winHeight, - stroke: 'purple', - 'stroke-width': '3px' - }); - svg.append('line') - .attr({ - x1: 0, - x2: winWidth, - y1: winHeight / 2, - y2: winHeight / 2, - stroke: 'purple', - 'stroke-width': '3px' - }); for (var i = 1; i < 5; i++) { var j; if (i < 3) { @@ -122,37 +90,34 @@ } function selectSector() { - var sector, row, col; + var sector, row, col, + currSectorCol = currSector % sectorDivisions; do { sector = Math.floor((Math.random() * 9)); - } while (sector === currSector); - $log.debug('sector after loop: ' + sector); - $log.debug('currSector after loop: ' + currSector); + col = sector % sectorDivisions; + } while (col === currSectorCol); currSector = sector; - $log.debug('currSector after assignment: ' + currSector); row = Math.floor(sector / sectorDivisions); - col = sector % sectorDivisions; - - $log.debug('row: ' + row); - $log.debug('col: ' + col); + // active area is the coordinates of the sector, plus or minus a margin return { - xmin: sectorWidth * col, - xmax: (sectorWidth * col) + sectorWidth, - ymin: sectorHeight * row, - ymax: (sectorHeight * row) + sectorHeight + xmin: (sectorWidth * col) + pageMargin, + xmax: ((sectorWidth * col) + sectorWidth) - pageMargin, + ymin: (sectorHeight * row) + pageMargin, + ymax: ((sectorHeight * row) + sectorHeight) - pageMargin } } function selectXY(sectorCoords) { var x, y, x1, y1; + do { x = (Math.random() * sectorCoords.xmax) + sectorCoords.xmin; y = (Math.random() * sectorCoords.ymax) + sectorCoords.ymin; x1 = x + btnWidth; y1 = y + btnHeight; - } while (x1 >= winWidth - pageMargin || y1 >= winHeight - pageMargin); + } while (x1 > sectorCoords.xmax || y1 > sectorCoords.ymax); return { x: x, @@ -167,9 +132,8 @@ function moveButton() { var sec = selectSector(), pos = selectXY(sec); - $log.debug(pos.x, pos.y); g.transition() - .duration(400) + .duration(300) .ease('cubic-out') .each('start', removeMouseListener) .attr('transform', gTranslate(pos.x, pos.y)) @@ -186,13 +150,9 @@ fs = _fs_; return { restrict: 'E', - link: function (scope, elem, attrs) { + link: function (scope, elem) { winWidth = fs.windowSize().width; winHeight = fs.windowSize().height; - // getting rid of pageMargin to see if the math is easier - // could put the padding somewhere else as in where it's ok to move the button - //sectorWidth = (winWidth / sectorDivisions) - pageMargin; - //sectorHeight = (winHeight / sectorDivisions) - pageMargin; sectorWidth = winWidth / sectorDivisions; sectorHeight = winHeight / sectorDivisions; @@ -203,7 +163,7 @@ height: winHeight + 'px' }); - showSectors(); + //showSectors(); g = svg.append('g'); var button = g.append('rect') @@ -228,12 +188,10 @@ height: btnHeight + hoverZone + 'px', x: -(hoverZone / 2), y: -(hoverZone / 2) - }), - centeredG = center(g); + }); g.attr('transform', - gTranslate(centeredG.x, centeredG.y)); - //gTranslate(centeredOnWindow(winWidth, btnWidth), - // centeredOnWindow(winHeight, btnHeight))); + gTranslate(centeredOnWindow(winWidth, btnWidth), + centeredOnWindow(winHeight, btnHeight))); addMouseListener(); } diff --git a/web/gui/src/main/webapp/app/fw/svg/glyph.js b/web/gui/src/main/webapp/app/fw/svg/glyph.js index 52664f5e7d..db2b5c4c81 100644 --- a/web/gui/src/main/webapp/app/fw/svg/glyph.js +++ b/web/gui/src/main/webapp/app/fw/svg/glyph.js @@ -267,13 +267,16 @@ "61.4,90.2,61.4,93.7z M93.8,61.8c-3.5,0-6.4-2.9-6.4-6.4c0-3.5," + "2.9-6.4,6.4-6.4s6.4,2.9,6.4,6.4C100.1,58.9,97.3,61.8,93.8,61.8z", - eqMaster: "M94.6,80.1c0,5.7-4.6,10.3-10.3,10.3S74,85.8,74,80.1" + - "c0-3.8,2-7,5-8.8L64.4,37.5H45.8L31.1,71.3c2.9,1.8,4.9,5.1,4.9," + - "8.8c0,5.7-4.6,10.3-10.3,10.3s-10.3-4.6-10.3-10.3S20,69.8,25.7," + - "69.8c0.7,0,1.5,0.1,2.2,0.2L42,37.5H26.7c-0.6,0-1-0.4-1-0.8V20.4" + - "c0-0.5,0.5-0.8,1-0.8h56.6c0.6,0,1,0.4,1,0.8v16.2c0,0.5-0.5,0.8" + - "-1,0.8H68.2L82.3,70c0.6-0.1,1.3-0.2,2-0.2C90,69.8,94.6,74.4," + - "94.6,80.1z" + eqMaster: "M100.1,46.9l-10.8-25h0.2c0.5,0,0.8-0.5,0.8-1.1v-3.2" + + "c0-0.6-0.4-1.1-0.8-1.1H59.2v-5.1c0-0.5-0.8-1-1.7-1h-5.1c-0.9,0" + + "-1.7,0.4-1.7,1v5.1l-30.2,0c-0.5,0-0.8,0.5-0.8,1.1v3.2c0,0.6," + + "0.4,1.1,0.8,1.1h0.1l-10.8,25C9,47.3,8.4,48,8.4,48.8v1.6l0,0h0" + + "v6.4c0,1.3,1.4,2.3,3.2,2.3h21.7c1.8,0,3.2-1,3.2-2.3v-8c0-0.9" + + "-0.7-1.6-1.7-2L22.9,21.9h27.9v59.6l-29,15.9c0,1.2,1.8,2.2,4.1," + + "2.2h58.3c2.3,0,4.1-1,4.1-2.2l-29-15.9V21.9h27.8L75.2,46.8c-1," + + "0.4-1.7,1.1-1.7,2v8c0,1.3,1.4,2.3,3.2,2.3h21.7c1.8,0,3.2-1,3.2" + + "-2.3v-8C101.6,48,101,47.3,100.1,46.9z M22,23.7l10.8,22.8H12.1" + + "L22,23.7z M97.9,46.5H77.2L88,23.7L97.9,46.5z" }, badgeViewBox = '0 0 10 10', diff --git a/web/gui/src/main/webapp/app/view/sample/sample.js b/web/gui/src/main/webapp/app/view/sample/sample.js index bb7417c678..9e6133b17e 100644 --- a/web/gui/src/main/webapp/app/view/sample/sample.js +++ b/web/gui/src/main/webapp/app/view/sample/sample.js @@ -95,7 +95,7 @@ toolbar.addToggle('demo-toggle', 'chain', false, togFn, 'another tooltip'); toolbar.addSeparator(); toolbar.addRadioSet('demo-radio', rset); - toolbar.show(); + toolbar.hide(); checkFn(); diff --git a/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js b/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js index 989fb9d758..8f5728dec9 100644 --- a/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js +++ b/web/gui/src/main/webapp/tests/app/fw/svg/glyph-spec.js @@ -53,7 +53,7 @@ describe('factory: fw/svg/glyph.js', function() { intentTraffic: 'M14.7,71.5h', allTraffic: 'M15.7,64.5h-7v', flows: 'M93.8,46.1c', - eqMaster: 'M94.6,80.1c0,5.7', + eqMaster: 'M100.1,46.9l', // badges uiAttached: 'M2,2.5a.5,.5', diff --git a/web/gui/src/main/webapp/tests/app/fw/widget/tooltip-spec.js b/web/gui/src/main/webapp/tests/app/fw/widget/tooltip-spec.js index f5a8cef808..a817dbcadd 100644 --- a/web/gui/src/main/webapp/tests/app/fw/widget/tooltip-spec.js +++ b/web/gui/src/main/webapp/tests/app/fw/widget/tooltip-spec.js @@ -55,12 +55,24 @@ describe('factory: fw/widget/tooltip.js', function () { }); // testing mouse events is tough - + // showTooltip needs a d3 event, which currently has no test backend + // .each is a workaround, which provides this, d, and i xit('should show a tooltip', function () { var btn = d3.select('body').append('div').attr('id', 'foo'); - // each is used to trigger a "mouse" event, providing this, d, and i btn.each(function () { tts.showTooltip(this, 'yay a tooltip'); }); + // tests here + }); + + // can't cancel a tooltip until we show one + // because currElemId isn't set otherwise + xit('should cancel an existing tooltip', function () { + var btn = d3.select('body').append('div').attr('id', 'foo'); + btn.each(function () { + tts.cancelTooltip(this); + }); + expect(d3Elem.text()).toBe(''); + expect(d3Elem.style('display')).toBe('none'); }); });