Skip to content

Commit

Permalink
fix so only one dom ele is used for node, edge, cy
Browse files Browse the repository at this point in the history
  • Loading branch information
@maxkfranz
maxkfranz committed Dec 13, 2016
1 parent 4ba8cf3 commit 7dbcff0
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 75 deletions.
2 changes: 0 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,6 @@ These are additional options you can use for convenience. Remember: This extens

* `options.hide.cyViewport` : When `true`, hides qTips when the viewport is manipulated (i.e. zoom/pan).

* `options.position.adjust.cyAdjustToEleBB` : When `true` (default), applies additional manual adjustments to make the positioning mechanism account for node sizes and `options.position.adjust.x` and `options.position.adjust.y` values.

## Publishing instructions

1. Set the version number env var: `export VERSION=1.2.3`
Expand Down
122 changes: 50 additions & 72 deletions cytoscape-qtip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,11 @@ SOFTWARE.
var $qtipContainer = $('<div></div>');
var viewportDebounceRate = 250;

$qtipContainer.css({
'z-index': -1,
'position': 'absolute'
});

function generateOpts( target, passedOpts ){
var qtip = target.scratch().qtip;
var opts = $.extend( {}, passedOpts );
Expand All @@ -202,10 +207,6 @@ SOFTWARE.
adjust.method = adjust.method || 'flip';
adjust.mouse = false;

if( isUndef(adjust.cyAdjustToEleBB) ){
adjust.cyAdjustToEleBB = true;
}

// default show event
opts.show = opts.show || {};

Expand Down Expand Up @@ -238,6 +239,47 @@ SOFTWARE.
return opts;
}

function updatePosition(ele, qtip, evt){
var e = evt;
var isCy = isFunction( ele.pan );
var isEle = !isCy;
var isNode = isEle && ele.isNode();
var cy = isCy ? ele : ele.cy();
var cOff = cy.container().getBoundingClientRect();
var pos = isNode ? ele.renderedPosition() : ( e ? e.cyRenderedPosition : undefined );
if( !pos || pos.x == null || isNaN(pos.x) ){ return; }

var bb = isNode ? ele.renderedBoundingBox({
includeLabels: false
}) : {
x1: pos.x - 1,
x2: pos.x + 1,
w: 3,
y1: pos.y - 1,
y2: pos.y + 1,
h: 3
};

if( qtip.$domEle.parent().length === 0 ){
qtip.$domEle.appendTo(document.body);
}

qtip.$domEle.css({
'width': bb.w,
'height': bb.h,
'top': bb.y1 + cOff.top + window.pageYOffset,
'left': bb.x1 + cOff.left + window.pageXOffset,
'position': 'absolute',
'pointer-events': 'none',
'background': 'red',
'z-index': 99999999,
'opacity': 0.5,
'visibility': 'hidden'
});

qtip.api.set('position.target', qtip.$domEle);
}

$$('collection', 'qtip', function( passedOpts ){
var eles = this;
var cy = this.cy();
Expand All @@ -257,66 +299,11 @@ SOFTWARE.
var qtipApi = qtip.api = qtip.$domEle.qtip('api'); // save api ref
qtip.$domEle.removeData('qtip'); // remove qtip dom/api ref to be safe

var updatePosition = function(e){
var cOff = container.getBoundingClientRect();
var pos = ele.renderedPosition() || ( e ? e.cyRenderedPosition : undefined );
if( !pos || pos.x == null || isNaN(pos.x) ){ return; }

if( opts.position.adjust.cyAdjustToEleBB && ele.isNode() ){
var my = opts.position.my.toLowerCase();
var at = opts.position.at.toLowerCase();
var z = cy.zoom();
var w = ele.outerWidth() * z;
var h = ele.outerHeight() * z;

if( at.match('top') ){
pos.y -= h/2;
} else if( at.match('bottom') ){
pos.y += h/2;
}

if( at.match('left') ){
pos.x -= w/2;
} else if( at.match('right') ){
pos.x += w/2;
}

if( isNumber(adjNums.x) ){
pos.x += adjNums.x;
}

if( isNumber(adjNums.y) ){
pos.y += adjNums.y;
}
}

qtipApi.set('position.adjust.x', cOff.left + pos.x + window.pageXOffset);
qtipApi.set('position.adjust.y', cOff.top + pos.y + window.pageYOffset);
};
updatePosition();
updatePosition(ele, qtip);

ele.on( opts.show.event, function(e){
var targetDom = $('<div></div>'),
cOff = container.getBoundingClientRect(),
bb = ele.renderedBoundingBox();

targetDom.css({
width: bb.w,
height: bb.h,
top: bb.y1 + cOff.top,
left: bb.x1 + cOff.left,
position: 'absolute'
});
targetDom.appendTo(document.body);

qtipApi.set('position.target', targetDom);
qtipApi.set('position.adjust.x', 0);
qtipApi.set('position.adjust.y', 0);

updatePosition(ele, qtip, e);
qtipApi.show();

// Remove our temporary target DOM.
targetDom.remove();
} );

ele.on( opts.hide.event, function(e){
Expand All @@ -331,7 +318,7 @@ SOFTWARE.

if( opts.position.adjust.cyViewport ){
cy.on('pan zoom', debounce(function(e){
updatePosition(e);
updatePosition(ele, qtip, e);

qtipApi.reposition();
}, viewportDebounceRate, { trailing: true }) );
Expand Down Expand Up @@ -360,18 +347,9 @@ SOFTWARE.
var qtipApi = qtip.api = qtip.$domEle.qtip('api'); // save api ref
qtip.$domEle.removeData('qtip'); // remove qtip dom/api ref to be safe

var updatePosition = function(e){
var cOff = container.getBoundingClientRect();
var pos = e.cyRenderedPosition;
if( !pos || pos.x == null || isNaN(pos.x) ){ return; }

qtipApi.set('position.adjust.x', cOff.left + pos.x + window.pageXOffset);
qtipApi.set('position.adjust.y', cOff.top + pos.y + window.pageYOffset);
};

cy.on( opts.show.event, function(e){
if( !opts.show.cyBgOnly || (opts.show.cyBgOnly && e.cyTarget === cy) ){
updatePosition(e);
updatePosition(cy, qtip, e);

qtipApi.show();
}
Expand Down
6 changes: 5 additions & 1 deletion demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,14 @@
<script src="cytoscape-qtip.js"></script>

<style>
body {
body, html {
font-family: helvetica;
font-size: 14px;
width: 100%;
height: 100%;
position: absolute;
padding: 0;
margin: 0;
}

#cy {
Expand All @@ -35,6 +38,7 @@
h1 {
opacity: 0.5;
font-size: 1em;
margin: 0.25em;
}
</style>

Expand Down

0 comments on commit 7dbcff0

Please sign in to comment.