Question

我正在尝试将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?

我尝试使用自定义的types.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);

链接到项目： https://stackblitz.com/edit/angular-cytoscape

预期结果将以this.cy.edgehandles（'drawon'）;开始边缘处理

Answer 1

我使用Angular CLI 7.x生成了一个项目，并成功使用了扩展名：

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

我正在写下面所有使“ cytoscape-panzoom”扩展正常工作的步骤。您可以对其他任何扩展程序使用相同的步骤。

使用npm install cytoscape
使用npm install --save @types/cytoscape
安装根类型npm install @types/node --save-dev（您可以使用--save参见npm指南）
确保您的tsconfig.json文件具有以下内容，否则添加它（这需要'require（...）'起作用）：
```
"typeRoots": [ "./node_modules/@types" ]
```
使用“ npm install cytscape-panzoom”安装cytoscape扩展（在您的情况下，您的扩展名代替“ cytoscape-panzoom”，请在github上查看您正在使用的扩展名）
添加cytoscape扩展名的javascript和样式文件； .js和.css（如果适用）到“ angular.json”文件中的相关部分：

“样式”：[“ src / styles.css”，“ ./ node_modules / cytoscape-panzoom / cytoscape.js-panzoom.css”]， “脚本”：[“ ./node_modules/cytoscape-panzoom/cytoscape-panzoom.js”]
在Angular项目的根目录中使用扩展名* .d.ts，在我的情况下，我使用了“ panzoom.d.ts”，您可以使用您的cytoscape扩展名或直接键入。d.ts。
将以下代码放入.d.ts文件中，并代替您可以使用扩展名“ cytoscape-panzoom”：
```
    declare module 'cytoscape-panzoom' {
    const ext: cytoscape.Ext;
    export = ext;
  }
```

在组件内编写以下导入代码：

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);

希望答案会有所帮助。

Answer 2

我犯了愚蠢的错误，但如果有人为此而挣扎。您需要做的就是使用： ''' //为扩展名设置一个变量：公共eh：any;

....

this.eh = this.cy.edgehandles（默认值）; this.eh.disable（）; //代替this.cy.edgehandles（'drawon'）; '''

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

2 个答案: