diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html index 84cc087bbc..d5f98e388b 100644 --- a/platform/commonUI/browse/res/templates/browse/object-header.html +++ b/platform/commonUI/browse/res/templates/browse/object-header.html @@ -21,7 +21,7 @@ -->
- + {{type.getGlyph()}} {{parameters.mode}} {{type.getName()}} diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index a12100cc67..d791a1a040 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -119,7 +119,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 5, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, @@ -140,38 +140,38 @@ time, mark, audio, video { font-size: 100%; vertical-align: baseline; } -/* line 22, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ html { line-height: 1; } -/* line 24, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ ol, ul { list-style: none; } -/* line 26, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ table { border-collapse: collapse; border-spacing: 0; } -/* line 28, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } -/* line 30, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q, blockquote { quotes: none; } - /* line 103, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ + /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } -/* line 32, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ a img { border: none; } -/* line 116, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ +/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } @@ -905,54 +905,52 @@ mct-container { .mobile-important-hide { display: none !important; } } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 189, ../sass/mobile/_layout.scss */ - .mobile-back-hide { - pointer-events: none; - -moz-transition-property: opacity; - -o-transition-property: opacity; - -webkit-transition-property: opacity; - transition-property: opacity; - -moz-transition-duration: 0.4s; - -o-transition-duration: 0.4s; - -webkit-transition-duration: 0.4s; - transition-duration: 0.4s; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - -webkit-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - opacity: 0; } } +/* line 189, ../sass/mobile/_layout.scss */ +.mobile-back-hide { + pointer-events: none; + -moz-transition-property: opacity; + -o-transition-property: opacity; + -webkit-transition-property: opacity; + transition-property: opacity; + -moz-transition-duration: 0.4s; + -o-transition-duration: 0.4s; + -webkit-transition-duration: 0.4s; + transition-duration: 0.4s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + opacity: 0; } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 198, ../sass/mobile/_layout.scss */ - .mobile-back-unhide { - pointer-events: all; - -moz-transition-property: opacity; - -o-transition-property: opacity; - -webkit-transition-property: opacity; - transition-property: opacity; - -moz-transition-duration: 0.4s; - -o-transition-duration: 0.4s; - -webkit-transition-duration: 0.4s; - transition-duration: 0.4s; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - -webkit-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - opacity: 1; } } +/* line 196, ../sass/mobile/_layout.scss */ +.mobile-back-unhide { + pointer-events: all; + -moz-transition-property: opacity; + -o-transition-property: opacity; + -webkit-transition-property: opacity; + transition-property: opacity; + -moz-transition-duration: 0.4s; + -o-transition-duration: 0.4s; + -webkit-transition-duration: 0.4s; + transition-duration: 0.4s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + opacity: 1; } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 207, ../sass/mobile/_layout.scss */ + /* line 203, ../sass/mobile/_layout.scss */ .phone-hide { display: none; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 213, ../sass/mobile/_layout.scss */ + /* line 209, ../sass/mobile/_layout.scss */ .tree-holder { overflow-x: hidden !important; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 218, ../sass/mobile/_layout.scss */ + /* line 214, ../sass/mobile/_layout.scss */ .mobile-disable-select { -moz-user-select: -moz-none; -ms-user-select: none; diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index 3f4fc062d3..b4fa307d81 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -187,20 +187,16 @@ } .mobile-back-hide { - @include phoneandtablet { pointer-events: none; @include trans-prop-nice(opacity, .4s); opacity: 0; - } } // Hides objects on phone and tablet .mobile-back-unhide { - @include phoneandtablet { pointer-events: all; @include trans-prop-nice(opacity, .4s); opacity: 1; - } } // Hides objects only on the phone diff --git a/platform/features/plot-reborn/src/controllers/PlotController.js b/platform/features/plot-reborn/src/controllers/PlotController.js index 24ccd387f8..7d745580ab 100644 --- a/platform/features/plot-reborn/src/controllers/PlotController.js +++ b/platform/features/plot-reborn/src/controllers/PlotController.js @@ -153,18 +153,6 @@ define( } }; } - - function onPinchStart(event) { - console.log("Pinch Start"); - } - - function onPinchChange(event) { - console.log("Pinch Change"); - } - - function onPinchEnd(event) { - console.log("Pinch End"); - } function followDataIfLive() { if (isLive) { @@ -175,10 +163,7 @@ define( $scope.$on('series:data:add', followDataIfLive); $scope.$on('user:viewport:change:end', onUserViewportChangeEnd); $scope.$on('user:viewport:change:start', onUserViewportChangeStart); - $scope.$on('mct:pinch:start', onPinchStart); - $scope.$on('mct:pinch:change', onPinchChange); - $scope.$on('mct:pinch:end', onPinchEnd); - + $scope.$watch('domainObject', linkDomainObject); return { diff --git a/platform/features/plot-reborn/src/directives/MCTPinch.js b/platform/features/plot-reborn/src/directives/MCTPinch.js index ad44730996..4da21aa4f9 100644 --- a/platform/features/plot-reborn/src/directives/MCTPinch.js +++ b/platform/features/plot-reborn/src/directives/MCTPinch.js @@ -29,32 +29,43 @@ define( function MCTPinch($log, agentService) { function link($scope, element, attrs) { - var posPrev, - evePrev; // Returns position of touch event function trackPosition(event) { - return [event.clientX, event.clientY]; + return { + clientX: event.clientX, + clientY: event.clientY + }; } + function calculateMidpoint(coordOne, coordTwo) { + return { + clientX: (coordOne.clientX + coordTwo.clientX) / 2, + clientY: (coordOne.clientY + coordTwo.clientY) / 2 + }; + } + + function calculateDistance(coordOne, coordTwo) { + return Math.sqrt(Math.pow(coordOne.clientX - coordTwo.clientX, 2) + + Math.pow(coordOne.clientY - coordTwo.clientY, 2)); + } + + + // On touch start the 'touch' is tracked and // the event is emitted through scope function pinchStart(event) { if (event.changedTouches.length === 2 || event.touches.length === 2) { - var touchPosition = [trackPosition(event.touches[0]), - trackPosition(event.touches[1])], - touchPositionPrev = posPrev || touchPosition, - eventPrev = evePrev || event; + var touchPositions = [trackPosition(event.touches[0]), + trackPosition(event.touches[1])]; - $scope.$emit('mct:pinch:start'); - // Set current position to be previous position - // for next touch action - posPrev = touchPosition; - - // Set current event to be previous event - // for next touch action - evePrev = event; + $scope.$emit('mct:pinch:start', { + touches: touchPositions, + bounds: event.target.getBoundingClientRect(), + midpoint: calculateMidpoint(touchPositions[0], touchPositions[1]), + distance: calculateDistance(touchPositions[0], touchPositions[1]) + }); // Stops other gestures/button clicks from being active event.preventDefault(); @@ -66,18 +77,14 @@ define( function pinchChange(event) { if (event.changedTouches.length === 2) { var touchPosition = [trackPosition(event.changedTouches[0]), - trackPosition(event.changedTouches[1])], - touchPositionPrev = posPrev || touchPosition, - eventPrev = evePrev || event; + trackPosition(event.changedTouches[1])]; - $scope.$emit('mct:pinch:change'); - // Set current position to be previous position - // for next touch action - posPrev = touchPosition; - - // Set current event to be previous event - // for next touch action - evePrev = event; + $scope.$emit('mct:pinch:change', { + touches: touchPosition, + bounds: event.target.getBoundingClientRect(), + midpoint: calculateMidpoint(touchPosition[0], touchPosition[1]), + distance: calculateDistance(touchPosition[0], touchPosition[1]) + }); // Stops other gestures/button clicks from being active event.preventDefault(); @@ -87,10 +94,10 @@ define( // On the 'touchend' or 'touchcancel' the event // is emitted through scope function pinchEnd(event) { - $scope.$emit('mct:pinch:end'); - - // Stops other gestures/button clicks from being active - event.preventDefault(); + $scope.$emit('mct:pinch:end'); + + // Stops other gestures/button clicks from being active + event.preventDefault(); } if (agentService.isMobile(navigator.userAgent)) { diff --git a/platform/features/plot-reborn/src/directives/MCTPlot.js b/platform/features/plot-reborn/src/directives/MCTPlot.js index cef2126935..b4bba3d92a 100644 --- a/platform/features/plot-reborn/src/directives/MCTPlot.js +++ b/platform/features/plot-reborn/src/directives/MCTPlot.js @@ -39,16 +39,18 @@ define( }; } - var dragStart, marqueeBox = {}, marqueeRect, // Set when exists. chartElementBounds, + firstTouches, + firstTouchDistance, + firstTouchPan, $canvas = $element.find('canvas'); function updateAxesForCurrentViewport() { // Update axes definitions for current viewport. - ['domain', 'range'].forEach(function(axisName) { + ['domain', 'range'].forEach(function (axisName) { var axis = $scope.axes[axisName], firstTick = $scope.viewport.topLeft[axisName], lastTick = $scope.viewport.bottomRight[axisName], @@ -60,7 +62,7 @@ define( // Yes, ticksize is negative for domain and positive for range. // It's because ticks are generated/displayed top to bottom and left to right. axis.ticks = []; - for (tickNumber = 0; tickNumber < axis.tickCount; tickNumber++) { + for (tickNumber = 0; tickNumber < axis.tickCount; tickNumber = tickNumber + 1) { tickIncrement = (axisSize * (tickNumber / denominator)); tickValue = firstTick - tickIncrement; axis.ticks.push( @@ -147,6 +149,32 @@ define( dragStart = undefined; $scope.$emit('user:viewport:change:end', $scope.viewport); } + + function trackTouchPosition(touchPosition, bounds) { + var positionOverElement, + positionAsPlotPoint, + position; + + chartElementBounds = bounds; + + positionOverElement = { + x: touchPosition.clientX - bounds.left, + y: touchPosition.clientY - bounds.top + }; + + positionAsPlotPoint = utils.elementPositionAsPlotPosition( + positionOverElement, + bounds, + $scope.viewport + ); + + position = { + positionOverElement: positionOverElement, + positionAsPlotPoint: positionAsPlotPoint + }; + + return position; + } function trackMousePosition($event) { // Calculate coordinates of mouse related to canvas and as @@ -158,6 +186,7 @@ define( chartElementBounds = bounds; + positionOverElement = { x: $event.clientX - bounds.left, y: $event.clientY - bounds.top @@ -202,13 +231,13 @@ define( } function toggleInteractionMode(event) { - if (event.keyCode === '18') { // control key. + if (event.keyCode === 16) { // shift key. watchForDrag(); } } function resetInteractionMode(event) { - if (event.keyCode === '18') { + if (event.keyCode === 16) { watchForMarquee(); } } @@ -241,11 +270,61 @@ define( // TODO: Discuss whether marqueeBox start should be fixed to data or fixed to canvas element, especially when "isLive is true". updateAxesForCurrentViewport(); } + + function calculateDistanceChange(startDist, currDist) { + return startDist / currDist; + } + + function updateZoom(midpoint, bounds, touches, distance) { + // calculate offset between points. Apply that offset to viewport. + var midpointPosition = trackTouchPosition(midpoint, bounds), + newPosition = midpointPosition.positionAsPlotPoint, + dDomain = firstTouchPan.domain - newPosition.domain, + dRange = firstTouchPan.range - newPosition.range; + + + $scope.viewport = { + topLeft: { + domain: $scope.viewport.topLeft.domain + dDomain, + range: $scope.viewport.topLeft.range + dRange + }, + bottomRight: { + domain: $scope.viewport.bottomRight.domain + dDomain, + range: $scope.viewport.bottomRight.range + dRange + } + }; + } + + function startZoom(midpoint, bounds, touches, distance) { + $scope.$emit('user:viewport:change:start'); + firstTouches = touches; + firstTouchDistance = distance; + firstTouchPan = trackTouchPosition(midpoint, bounds).positionAsPlotPoint; + } + + function endZoom() { + $scope.$emit('user:viewport:change:end', $scope.viewport); + } + + function onPinchStart(event, touch) { + startZoom(touch.midpoint, touch.bounds, touch.touches, touch.distance); + } + + function onPinchChange(event, touch) { + updateZoom(touch.midpoint, touch.bounds, touch.touches, touch.distance); + } + + function onPinchEnd(event) { + endZoom(); + } $scope.$watchCollection('viewport', onViewportChange); - + + $scope.$on('mct:pinch:start', onPinchStart); + $scope.$on('mct:pinch:change', onPinchChange); + $scope.$on('mct:pinch:end', onPinchEnd); + $scope.$on('$destroy', stopWatching); - } return {