I'm trying to include grid-guide and edgehandles cytoscape.js extensions into my Angular7 project. It works, but not as intended (I think), I can't disable drawing edgehandles when it is initialized, but not started.
cytoscape is imported with the @types/cytoscape
Grid-guide: https://github.com/iVis-at-Bilkent/cytoscape.js-grid-guide edgehandles: https://github.com/cytoscape/cytoscape.js-edgehandles
The extensions are currently imported through npm
I've tried to follow this issue posted, but it didn't get me far: How to use UI extension for Cytoscape.js in Typescript?
I've tried using a custom typings.d.ts file, which is recommened by the @types/cytoscape (see the bottom of index.d.ts file)
typings.d.ts:
declare module 'edgehandles-cyto' {
const ext: cytoscape.Ext;
export = ext;
};
And importing into the component:
import cytoscape = require('cytoscape'); //This works
//Importing jquery and grid-guide, works, but maybe not as intended
var jquery = require('jquery');
var gridGuide = require('cytoscape-grid-guide');
//Importing cytoscape extension, edgehandles, works, but not as intended
var edgehandles = require('cytoscape-edgehandles');
//Connected with cytoscape
gridGuide( cytoscape, jquery );
cytoscape.use(edgehandles);
//After cytoscape is initialized, trying to include these extensions
this.cy.gridGuide(options); //Options and defaults are already set
this.cy.edgehandles(defaults);
Link to project: https://stackblitz.com/edit/angular-cytoscape
Expected result would be to start edgehandles with this.cy.edgehandles('drawon');
Stupid mistake by me, but if anyone is struggling with it. All you need to do is to use: ''' //set a variable for the extension: public eh:any;
....
this.eh = this.cy.edgehandles(defaults); this.eh.disable(); //instead of this.cy.edgehandles('drawon'); '''