Cytoscape.js node/edge 标签上的标签编辑器 tap/click
Cytoscape.js node/edge label editor on label tap/click
是否有任何库可以在 node/edge 标签上提供编辑功能？我搜索了整个 npm 和 github，但没有找到任何有用的东西。一个接近我需要的库是 'zngduong/cytoscape.js-edit-content'，但它不能正常工作。我实现了上下文菜单，我创建的选项之一是编辑元素的标签。我在元素位置上生成输入标签时遇到问题。下面是我当前使用 this 库的代码。
cy.cxtmenu({
selector: 'node, edge',
commands: [
{
content: '<span class="glyphicon glyphicon-pencil"></span>',
select: function(ele)
{
var $input = '<input type="text" value="'+ ele.data('name') +'" size="20" style="z-index: 10000;"/>';
$('div#cy').append($input);
}
},
{
content: '<span class="glyphicon glyphicon-remove"></span>',
select: function(ele){
}
},
{
content: '<span class="glyphicon glyphicon-trash"></span>',
select: function(ele){
ele.remove();
}
}
]
});
(1) 您不能向 Cytoscape 添加任何内容 div。
(2) 您应该将标签文本存储在元素的 data.
中
(3) 您应该在标签中使用 stylesheet to map 数据字段（例如 label: data(label)）。
(4) 通过(3)和(4)，设置node.data('label', newLabel)改变标签文本。您如何为此设计 UI 由您决定。例如，您可以在 qtip.
中显示一个文本框
是否有任何库可以在 node/edge 标签上提供编辑功能？我搜索了整个 npm 和 github，但没有找到任何有用的东西。一个接近我需要的库是 'zngduong/cytoscape.js-edit-content'，但它不能正常工作。我实现了上下文菜单，我创建的选项之一是编辑元素的标签。我在元素位置上生成输入标签时遇到问题。下面是我当前使用 this 库的代码。
cy.cxtmenu({
selector: 'node, edge',
commands: [
{
content: '<span class="glyphicon glyphicon-pencil"></span>',
select: function(ele)
{
var $input = '<input type="text" value="'+ ele.data('name') +'" size="20" style="z-index: 10000;"/>';
$('div#cy').append($input);
}
},
{
content: '<span class="glyphicon glyphicon-remove"></span>',
select: function(ele){
}
},
{
content: '<span class="glyphicon glyphicon-trash"></span>',
select: function(ele){
ele.remove();
}
}
]
});
(1) 您不能向 Cytoscape 添加任何内容 div。
(2) 您应该将标签文本存储在元素的 data.
中(3) 您应该在标签中使用 stylesheet to map 数据字段（例如 label: data(label)）。
(4) 通过(3)和(4)，设置node.data('label', newLabel)改变标签文本。您如何为此设计 UI 由您决定。例如，您可以在 qtip.