如何在 Angular 7 中包含和正确使用 @types/cytoscape UI 扩展

How to include and properly use @types/cytoscape UI extension in Angular 7

我正在尝试将 grid-guide 和 edgehandles cytoscape.js 扩展包含到我的 Angular7 项目中。它可以工作,但不是预期的那样(我认为),我无法在初始化但未启动时禁用绘图边缘句柄。

cytoscape 是用@types/cytoscape

导入的

网格指南:https://github.com/iVis-at-Bilkent/cytoscape.js-grid-guide 边缘句柄:https://github.com/cytoscape/cytoscape.js-edgehandles

扩展目前是通过 npm 导入的

我已经尝试关注这个发布的问题,但它并没有让我走得太远:How to use UI extension for Cytoscape.js in Typescript?

我试过使用自定义 typings.d.ts 文件,这是 @types/cytoscape 推荐的(见 index.d.ts 文件底部)

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 投射: https://stackblitz.com/edit/angular-cytoscape

预期结果是用 this.cy.edgehandles('drawon');

开始边缘句柄

我犯了一个愚蠢的错误,但如果有人正在努力解决这个问题。您需要做的就是使用: ''' //为扩展设置一个变量: public eh:any;

.....

this.eh = this.cy.edgehandles(默认值); this.eh.禁用(); // 而不是 this.cy.edgehandles('drawon'); '''

我使用 Angular CLI 7.x 生成项目并成功使用扩展:

Cytoscape 在文件末尾的 ./node-modules/@types/cytoscape 下的 "index.d.ts" 文件中提供了一些信息,这些信息应该适用于所有扩展名。

我在下面写下我用来使 'cytoscape-panzoom' 扩展工作的所有步骤。您可以对任何其他扩展使用相同的步骤。

  1. 使用 npm install cytoscape
  2. 安装 cytoscape
  3. 使用 npm install --save @types/cytoscape
  4. 安装 cytoscape 类型
  5. 安装根类型npm install @types/node --save-dev(您可以使用 --save 查看 npm 指南)

  6. 确保你的tsconfig.json文件有以下内容,否则 添加它(这是 'require(...)' 工作所必需的):

    "typeRoots": [ "./node_modules/@types" ]
    
  7. 使用 'npm install cytscape-panzoom' 安装 cytoscape 扩展 (在您的情况下,您的分机名称代替了 "cytoscape-panzoom",检查您正在使用的分机的 github)

  8. 添加cytoscape扩展的javascript和样式文件; .js 和 .css(如果适用)到 'angular.json' 文件中的相关部分:

    "styles": ["src/styles.css","./node_modules/cytoscape-panzoom/cytoscape.js-panzoom.css"], "scripts": ["./node_modules/cytoscape-panzoom/cytoscape-panzoom.js"]

  9. 在您的 Angular 项目的根目录中创建一个文件 扩展名 *.d.ts,在我的例子中我使用了 'panzoom.d.ts' 你可以使用 您的 cytoscape 扩展名称或简单的打字。d.ts.

  10. 将以下代码放入您的 .d.ts 文件并替换 "cytoscape-panzoom" 您可以使用您的分机名称:

        declare module 'cytoscape-panzoom' {
        const ext: cytoscape.Ext;
        export = ext;
      }
    
  11. 在组件中写入以下导入代码:

    var cyt = require ('cytoscape');
    var pz = require('cytoscape-panzoom');
    cyt.use(pz);
    

现在您可以使用扩展程序了!

用法示例:

...............

let cy_contianer = this.renderer.selectRootElement("#cy");
let cy = cyt({
container: cy_contianer,
layout: this.layout,
elements: this.elements,
minZoom: 0.3,
maxZoom: 5
});

  cy.style(this.style);

 var defaults = {
      zoomFactor: 0.05, // zoom factor per zoom tick
      zoomDelay: 45, // how many ms between zoom ticks       
      zoomInIcon: 'fa fa-plus',
      zoomOutIcon: 'fa fa-minus',
      resetIcon: 'fa fa-expand'

 // .... more settings here removed to make it short for sample
    };

    // HERE WE ARE USING THE EXTENSION THROUGH THE SAME cy OBJECT RETURNED BY cytoscape(..) function. 

    cy.panzoom(defaults);

希望回答对您有所帮助。