iVis-at-Bilkent / cytoscape.js-context-menus

A Cytoscape.js extension to provide context menu around elements and core instance
MIT License
87 stars 41 forks source link

Is there any way to use contextMenus extension in Angular 9 application ? #43

Closed ErnestManukyan closed 4 years ago

ErnestManukyan commented 4 years ago

compilation error Property 'contextMenus' does not exist on type 'Core'.

canbax commented 4 years ago
  1. put "node_modules/cytoscape-context-menus/cytoscape-context-menus.css" inside the array "styles" inside the file "angular.json".

  2. import the library and other necessary libraries inside a ts file like

import cytoscape from 'cytoscape';
import * as contextMenus from 'cytoscape-context-menus';
import * as $ from 'jquery';

And then register the extension like cytoscape.use(contextMenus, $);. Then you can use it as described in the API of the extension.

ErnestManukyan commented 4 years ago

cytoscape.use() method has only one input parameter

ErnestManukyan commented 4 years ago
/**
 * Register imported extension into cytoscape
 * @param module Entry point for the extension, got by module = require('cy-ext')
 * or by import module from 'cy-ext'
 * http://js.cytoscape.org/#extensions
 */
function use(module: Ext): void;
canbax commented 4 years ago

my dependencies are. It works fine for me.

    "cytoscape": "^3.14.2",
    "cytoscape-context-menus": "^3.1.0",
    "jquery": "^3.5.1",

did you try running? If you try what is the error message you get?

edit you should rerun ng serve when you changed "angular.json" file

ErnestManukyan commented 4 years ago

It's still not working. First of all, I have a problem when trying to register the extension.

image

ErnestManukyan commented 4 years ago

I did update and the packages versions are the same as You have.

ErnestManukyan commented 4 years ago

Can you please share your use method's signature ?

canbax commented 4 years ago

I think you are importing types for cytoscape. I recommend you to not do that.

cytoscape.js and probably all of its extensions do not support typescript natively. There might be some wrappers around them to use typescript.

You should import cytoscape and extensions as JAVASCRIPT modules. So there won't be any type information. With js the editor won't show you such errors. You won't see the signatures of methods.

ErnestManukyan commented 4 years ago

@canbax helped me to change my code. So, the problem was about importing types like typescript. We imported cytoscape and extensions as JAVASCRIPT modules and now everything works fine. Dear @canbax thank you very much !!!