如何在 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' 扩展工作的所有步骤。您可以对任何其他扩展使用相同的步骤。
- 使用
npm install cytoscape
安装 cytoscape
- 使用
npm install --save @types/cytoscape
安装 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' 文件中的相关部分:
"styles": ["src/styles.css","./node_modules/cytoscape-panzoom/cytoscape.js-panzoom.css"],
"scripts": ["./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);
希望回答对您有所帮助。
我正在尝试将 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' 扩展工作的所有步骤。您可以对任何其他扩展使用相同的步骤。
- 使用
npm install cytoscape
安装 cytoscape
- 使用
npm install --save @types/cytoscape
安装 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' 文件中的相关部分:
"styles": ["src/styles.css","./node_modules/cytoscape-panzoom/cytoscape.js-panzoom.css"], "scripts": ["./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);
希望回答对您有所帮助。