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

-

i use cytoscape extension cytoscape-qtip in component of ember app uses cytoscape.js dependency draw graph.

successful setup of cytoscape.js

cytoscape.js hooked ember installing via bower bower install cytoscape , importing 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 cytoscape-graph component can use cytoscape global variable out of box:

in my-ember-app/app/components/cytoscape-graph.js:

import ember 'ember'; export default ember.component.extend({ didinsertelement(){   let container = this.$();  // ...  var cy = cytoscape({    container: container,  // ... styles, layout, element selection  }); // cytoscape instance renders fine!

accessing global cytoscape works fine approach.

analogue setup of cytoscape-qtip doesn't work

although, when install cytoscape-qtip via bower, import dependency similar cytoscape app in ember-cli-build.js so:

in my-ember-app/ember-cli-build.js:

// ... module.exports = function(defaults) {   var app = new emberapp(defaults, {   // ;....   });   // ....   app.import('bower_components/cytoscape/dist/cytoscape.js');   app.import('bower_components/cytoscape-qtip/cytoscape-qtip.js');    return app.totree(); };

and try use qtip method in 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 following console error once mouseover event on graph node triggered:

uncaught typeerror: qtip.$domele.qtip not function(…) indicating qtip not defined in component yet. a similar question asked here didn't me issue, person asking there had issues jquery being loaded in correct order. in case jquery included in app , working fine.

how include cytoscape-qtip extension in ember app able use qtip in component?

you must follow instructions registering extension , dependencies specified in readme:

for commonjs (e.g. npm+browserify or npm+webpack):

var cytoscape = require('cytoscape'); var jquery = require('jquery'); var cyqtip = require('cytoscape-qtip');  cyqtip( cytoscape, jquery ); // register extension

for es6 style (any tooling supports es6):

import cytoscape 'cytoscape'; import jquery 'jquery'; import cyqtip 'cytoscape-qtip';  cyqtip( cytoscape, jquery ); // register extension

the lines pretty identical either way.

qtip must registered jquery, you'll have expose jquery globally first:

window.$ = window.jquery = require('jquery'); require('qtip');

see https://github.com/qtip2/qtip2/pull/810


Comments

Post a Comment

Popular posts from this blog

c - zlib and gdi32 with OpenSSL? -

-
this follow question undefined reference rsa_generate_key in openssl? have openssl program generate rsa key, follows : #include <stdio.h> #include <openssl/rsa.h> #include <openssl/pem.h> int main(int argc, char* argv[]) { rsa *r = null; int ret; r = rsa_new(); bignum *bne = null; ret = rsa_generate_key_ex(r, 2048, bne, null); return 0; } when compile gcc -i../include rsatest.c -lcrypto -l. i undefined reference errors functions in libraries gdi32 , zlib. so correct this, have add -lz , -lgdi32, as gcc -i../include/ rsatest.c -lcrypto -lz -lgdi32 -l. my question is, aren't static libcrypto , libssl self sufficient? in why having add libraries make work? there option should have added while compiling library prevent this? i'm using 64 bit windows mingw compiler. made openssl library of msys , make.
Read more

java - inputmismatch exception -

-
Image
this question has answer here: scanner skipping nextline() after using next(), nextint() or other nextfoo()? 14 answers import java.util.*; public class ngg { static scanner numberentered; static scanner userinput = new scanner(system.in); static int guessednumber; static int randomnumber = (int) (math.random()* 11); static scanner reply; static string answer; public static void main(string[] args) { guesschecker(guessednumber); } public static void guesschecker(int userguess) { while (userguess != randomnumber) { intro(); userguess = intchecker(); if (userguess == randomnumber) { system.out.println("congradulations!"); system.exit(0); } else { system.out.println("that incorrect!");...
Read more

ios - Align baselines with characters in large line heights with Text Kit -

-
Image
when draw attributed string fixed line height text kit, characters aligned bottom of line fragment. while make sense on 1 line characters varying in size, breaks flow of text multiple lines. baselines appear decided largest descender each line. i've found article people behind sketch explaining exact problem in bit more detail , showing solution does, not explaining how achieved this. this want basically: when showing 2 lines large line height, result far ideal: the code i'm using: let smallfont = uifont.systemfont(ofsize: 15) let bigfont = uifont.systemfont(ofsize: 25) let paragraphstyle = nsmutableparagraphstyle() paragraphstyle.minimumlineheight = 22 paragraphstyle.maximumlineheight = 22 var attributes = [ nsfontattributename: smallfont, nsparagraphstyleattributename: paragraphstyle ] let textstorage = nstextstorage() let textcontainer = nstextcontainer(size: cgsize(width: 250, height: 500)) let layoutmanager = nslayoutmanager() textstorage.append(n...
Read more