I would like to use the Cytoscape extension cytoscape-qtip
in a component of my Ember app which already uses Cytoscape.js as a dependency to draw a graph.
Successful Setup of Cytoscape.js
Cytoscape.js itself is already successfully hooked into Ember by installing it via bower bower install cytoscape
and importing it via ember-cli-build.js:
in my-ember-app/ember-cli-build.js:
// in my-ember-app/ember-cli-build.js
// ....
app.import('bower_components/cytoscape/dist/cytoscape.js');
return app.toTree();
In my cytoscape-graph
component I can then use the cytoscape
global variable out of the box:
in my-ember-app/app/components/cytoscape-graph.js:
import Ember from 'ember';
export default Ember.Component.extend({
didInsertElement(){
let container = this.$();
// ...
var cy = cytoscape({
container: container,
// ... styles, layout, element selection
}); // this cytoscape instance renders fine!
Accessing the global cytoscape
works fine with this approach.
Analogue Setup of Cytoscape-Qtip doesn't work
Although, when I install cytoscape-qtip
via bower, import the dependency similar to cytoscape
into my app in ember-cli-build.js
and try to use the qtip
method in my cytoscape-graph
component:
in my-ember-app/app/components/cytoscape-graph.js:
// ....
didInsertElement(){
// ....
cy.on('mouseover', 'node', function(event) {
var node = event.cyTarget;
node.qtip({
content: 'hello',
show: {
event: event.type,
ready: true
},
hide: {
event: 'mouseout unfocus'
}
}, event);
});
I will get the following console error once the mouseover event on any graph node is triggered:
Uncaught TypeError: qtip.$domEle.qtip is not a function(…)
indicating that qtip itself is not defined in my component yet. A similar question asked here didn't help me with my issue, as the person asking there had issues with jquery
being loaded in the correct order. In my case jquery
is already included in my app and working fine.
How do I include the cytoscape-qtip
extension in my Ember app to be able to use qtip
in my component?
Aucun commentaire:
Enregistrer un commentaire