jeudi 17 novembre 2016

How to include Cytoscape.js Extension Cytoscape-qtip into an Ember App

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