diff --git a/cytoscape-panzoom.js b/cytoscape-panzoom.js
index 9fd8601..f0287bf 100644
--- a/cytoscape-panzoom.js
+++ b/cytoscape-panzoom.js
@@ -36,10 +36,10 @@
autodisableForMobile: true, // disable the panzoom completely for mobile (since we don't really need it with gestures like pinch to zoom)
// icon class names
- sliderHandleIcon: 'fa fa-minus',
- zoomInIcon: 'fa fa-plus',
- zoomOutIcon: 'fa fa-minus',
- resetIcon: 'fa fa-expand'
+ zoomInIcon: 'fa fa-plus-square-o',
+ zoomOutIcon: 'fa fa-minus-square-o',
+ resetIcon: 'fa fa-refresh',
+ panIcon: 'fa fa-compass'
};
var panzoom = function(params){
@@ -72,49 +72,34 @@
// add base html elements
/////////////////////////
-
- var $zoomIn = $('
');
- $panzoom.append( $zoomIn );
-
- var $zoomOut = $('
');
- $panzoom.append( $zoomOut );
-
- var $reset = $('
');
- $panzoom.append( $reset );
-
- var $slider = $('');
- $panzoom.append( $slider );
-
- $slider.append('');
-
- var $sliderHandle = $('
');
- $slider.append( $sliderHandle );
-
- var $noZoomTick = $('');
- $slider.append( $noZoomTick );
-
- var $panner = $('');
- $panzoom.append( $panner );
var $pHandle = $('');
- $panner.append( $pHandle );
-
- var $pUp = $('');
- var $pDown = $('');
- var $pLeft = $('');
- var $pRight = $('');
- $panner.append( $pUp ).append( $pDown ).append( $pLeft ).append( $pRight );
+ var $pIndicator = $('
');
+ var $panner = $('
');
+ $pHandle.append($pIndicator).append($panner);
- var $pIndicator = $('');
- $panner.append( $pIndicator );
+ var $zoomer = $('')
+ var $slider = $('');
+ var $sliderHandle = $('
');
+ $slider.append( $sliderHandle );
+
+ var $reset = $('
');
+ var $zoomIn = $('
');
+ var $zoomOut = $('
');
+ $zoomer.append( $reset ).append($zoomIn).append($slider).append($zoomOut);
+
+ $panzoom.append( $pHandle );
+// $panzoom.append( $panner );
+ $panzoom.append( $zoomer );
+
// functions for calculating panning
////////////////////////////////////
function handle2pan(e){
var v = {
- x: e.originalEvent.pageX - $panner.offset().left - $panner.width()/2,
- y: e.originalEvent.pageY - $panner.offset().top - $panner.height()/2
+ x: e.originalEvent.pageX - $pHandle.offset().left - $pHandle.width()/2,
+ y: e.originalEvent.pageY - $pHandle.offset().top - $pHandle.height()/2
}
var r = options.panDragAreaSize;
@@ -136,8 +121,8 @@
percent = Math.max( options.panMinPercentSpeed, percent );
var vnorm = {
- x: -1 * v.x * (percent * options.panDistance),
- y: -1 * v.y * (percent * options.panDistance)
+ x: v.x * (percent * options.panDistance),
+ y: v.y * (percent * options.panDistance)
};
return vnorm;
@@ -154,20 +139,17 @@
var v = pan;
var d = Math.sqrt( v.x*v.x + v.y*v.y );
var vnorm = {
- x: -1 * v.x/d,
- y: -1 * v.y/d
+ x: v.x/d,
+ y: v.y/d
};
- var w = $panner.width();
- var h = $panner.height();
+ var w = $pHandle.width();
+ var h = $pHandle.height();
var percent = d/options.panDistance;
- var opacity = Math.max( options.panIndicatorMinOpacity, percent );
- var color = 255 - Math.round( opacity * 255 );
$pIndicator.show().css({
left: w/2 * vnorm.x + w/2,
- top: h/2 * vnorm.y + h/2,
- background: "rgb(" + color + ", " + color + ", " + color + ")"
+ top: h/2 * vnorm.y + h/2
});
}
@@ -380,10 +362,10 @@
var p = Math.log(z) / Math.log(zmax);
var percent = 1 - (p - x) / (1 - x); // the 1- bit at the front b/c up is in the -ve y direction
- if( percent > 1 || percent < 0 ){
- $noZoomTick.hide();
- return;
- }
+// if( percent > 1 || percent < 0 ){
+// $noZoomTick.hide();
+// return;
+// }
var min = sliderPadding;
var max = $slider.height() - $sliderHandle.height() - 2*sliderPadding;
@@ -393,7 +375,7 @@
if( top < min ){ top = min }
if( top > max ){ top = max }
- $noZoomTick.css('top', top);
+// $noZoomTick.css('top', top);
})();
// set up zoom in/out buttons
@@ -497,3 +479,4 @@
}
})();
+
diff --git a/cytoscape.js-panzoom.css b/cytoscape.js-panzoom.css
index 5068e5f..9a706b9 100644
--- a/cytoscape.js-panzoom.css
+++ b/cytoscape.js-panzoom.css
@@ -1,187 +1,94 @@
.ui-cytoscape-panzoom {
- position: absolute;
- font-size: 12px;
- color: #fff;
- font-family: arial, helvetica, sans-serif;
- line-height: 1;
+ position: relative;
+ font-size: 1em;
+ line-height: 1em;
color: #666;
- font-size: 11px;
z-index: 99999;
-}
-
-.ui-cytoscape-panzoom-zoom-button {
- cursor: pointer;
- padding: 3px;
- text-align: center;
- position: absolute;
- border-radius: 3px;
- width: 10px;
- height: 10px;
- left: 16px;
+ padding:0;
+ width: 3em !important;
+ margin: 0.5em;
background: #fff;
- border: 1px solid #999;
- margin-left: -1px;
- margin-top: -1px;
- z-index: 1;
}
-.ui-cytoscape-panzoom-zoom-button:active,
-.ui-cytoscape-panzoom-slider-handle:active,
-.ui-cytoscape-panzoom-slider-handle.active {
- background: #ddd;
-}
-
-.ui-cytoscape-panzoom-pan-button {
+.ui-cytoscape-panzoom-panner, .ui-cytoscape-panzoom-panner-handle{
position: absolute;
+ top:0;
+ left:0;
+ height: 3em;
+ width: 3em;
z-index: 1;
- height: 16px;
- width: 16px;
-}
-
-.ui-cytoscape-panzoom-reset {
- top: 55px;
-}
-
-.ui-cytoscape-panzoom-zoom-in {
- top: 80px;
-}
-
-.ui-cytoscape-panzoom-zoom-out {
- top: 197px;
}
-.ui-cytoscape-panzoom-pan-up {
- top: 0;
- left: 50%;
- margin-left: -5px;
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-bottom: 5px solid #666;
+.ui-cytoscape-panzoom-panner-handle{
+ z-index: 999;
+ outline: none;
+ background: transparent;
}
-
-.ui-cytoscape-panzoom-pan-down {
- bottom: 0;
- left: 50%;
- margin-left: -5px;
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-top: 5px solid #666;
+.ui-cytoscape-panzoom-panner{
+ top:0;
+ text-align:center;
+ line-height:3em;
}
-.ui-cytoscape-panzoom-pan-left {
- top: 50%;
- left: 0;
- margin-top: -5px;
- width: 0;
- height: 0;
- border-top: 5px solid transparent;
- border-bottom: 5px solid transparent;
- border-right: 5px solid #666;
-}
-
-.ui-cytoscape-panzoom-pan-right {
- top: 50%;
- right: 0;
- margin-top: -5px;
- width: 0;
- height: 0;
- border-top: 5px solid transparent;
- border-bottom: 5px solid transparent;
- border-left: 5px solid #666;
+.ui-cytoscape-panzoom-panner i{
+ font-size:3em;
+ vertical-align: top;
+ line-height: normal;
}
.ui-cytoscape-panzoom-pan-indicator {
- position: absolute;
- left: 0;
- top: 0;
- width: 8px;
- height: 8px;
- border-radius: 8px;
- background: #000;
- border-radius: 8px;
- margin-left: -5px;
- margin-top: -5px;
- display: none;
+ position: relative;
+ height: inherit;
+ width: inherit;
z-index: 999;
opacity: 0.6;
+ color: #666;
+ display: none;
}
-.ui-cytoscape-panzoom-slider {
- position: absolute;
- top: 97px;
- left: 17px;
- height: 100px;
- width: 15px;
-}
-
-.ui-cytoscape-panzoom-slider-background {
- position: absolute;
- top: 0;
- width: 2px;
- height: 100px;
- left: 5px;
- background: #fff;
- border-left: 1px solid #999;
- border-right: 1px solid #999;
-}
-
-.ui-cytoscape-panzoom-slider-handle {
+.ui-cytoscape-panzoom-pan-indicator >i{
position: absolute;
- width: 16px;
- height: 8px;
- background: #fff;
- border: 1px solid #999;
- border-radius: 2px;
- margin-left: -2px;
- z-index: 999;
- line-height: 8px;
- cursor: default;
+ left: -0.5em;
+ top: -0.5em;
}
-.ui-cytoscape-panzoom-slider-handle .icon {
- margin: 0 4px;
- line-height: 10px;
-}
-.ui-cytoscape-panzoom-no-zoom-tick {
+.ui-cytoscape-panzoom-zoomer{
+ width:3em;
position: absolute;
- background: #666;
- border: 1px solid #fff;
- border-radius: 2px;
- margin-left: -1px;
- width: 8px;
- height: 2px;
- left: 3px;
- z-index: 1;
- margin-top: 3px;
+ top:3.3em;
+ left: 50%;
+ transform: translateX(-50%);
+ -ms-transform: translate(-50%,0);
+}
+.ui-cytoscape-panzoom-reset,.ui-cytoscape-panzoom-zoom-in,.ui-cytoscape-panzoom-zoom-out{
+ position: relative;
+ width: 1em;
+ left: 50%;
+ transform: translateX(-50%);
+ -ms-transform: translate(-50%,0);
+ cursor: pointer;
}
-.ui-cytoscape-panzoom-panner {
- position: absolute;
- left: 5px;
- top: 5px;
- height: 40px;
- width: 40px;
- background: #fff;
- border: 1px solid #999;
- border-radius: 40px;
- margin-left: -1px;
+.ui-cytoscape-panzoom-slider{
+ position: relative;
+ width: 2px;
+ height: 7em;
+ margin:auto;
+ background-color: #bbb;
+ transform: translateX(-50%);
+ -ms-transform: translate(-50%,0);
}
-.ui-cytoscape-panzoom-panner-handle {
- position: absolute;
- left: 0;
- top: 0;
- outline: none;
- height: 40px;
- width: 40px;
+.ui-cytoscape-panzoom-slider-handle{
position: absolute;
- z-index: 999;
-}
-
-
-
+ top: 50%;
+ left: 0;
+ transform: translateX(-50%);
+ -ms-transform: translate(-50%,0);
+ width: 1.3em;
+ height: 3px;
+ background-color:#666;
+ border-radius: 1em;
+ cursor: move;
+}
\ No newline at end of file