JarCasting
JarCasting JarCasting

cytoscape-node-html-label

WebJar for cytoscape-node-html-label

Лицензия

Лицензия

MIT
Группа

Группа

org.webjars.bowergithub.kaluginserg
Идентификатор

Идентификатор

cytoscape-node-html-label
Последняя версия

Последняя версия

1.1.5
Дата

Дата
Тип

Тип

jar
Описание

Описание

cytoscape-node-html-label
WebJar for cytoscape-node-html-label
Ссылка на сайт

Ссылка на сайт

https://www.webjars.org
Система контроля версий

Система контроля версий

https://github.com/kaluginserg/cytoscape-node-html-label

Скачать cytoscape-node-html-label

Имя Файла Размер
cytoscape-node-html-label-1.1.5.pom
cytoscape-node-html-label-1.1.5.jar 115 KB
cytoscape-node-html-label-1.1.5-sources.jar 22 bytes
cytoscape-node-html-label-1.1.5-javadoc.jar 22 bytes
Обзор

Как подключить последнюю версию

<!-- https://jarcasting.com/artifacts/org.webjars.bowergithub.kaluginserg/cytoscape-node-html-label/ -->
<dependency>
    <groupId>org.webjars.bowergithub.kaluginserg</groupId>
    <artifactId>cytoscape-node-html-label</artifactId>
    <version>1.1.5</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bowergithub.kaluginserg/cytoscape-node-html-label/
implementation 'org.webjars.bowergithub.kaluginserg:cytoscape-node-html-label:1.1.5'
// https://jarcasting.com/artifacts/org.webjars.bowergithub.kaluginserg/cytoscape-node-html-label/
implementation ("org.webjars.bowergithub.kaluginserg:cytoscape-node-html-label:1.1.5")
'org.webjars.bowergithub.kaluginserg:cytoscape-node-html-label:jar:1.1.5'
<dependency org="org.webjars.bowergithub.kaluginserg" name="cytoscape-node-html-label" rev="1.1.5">
  <artifact name="cytoscape-node-html-label" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bowergithub.kaluginserg', module='cytoscape-node-html-label', version='1.1.5')
)
libraryDependencies += "org.webjars.bowergithub.kaluginserg" % "cytoscape-node-html-label" % "1.1.5"
[org.webjars.bowergithub.kaluginserg/cytoscape-node-html-label "1.1.5"]

Зависимости

compile (1)

Идентификатор библиотеки Тип Версия
org.webjars.bowergithub.cytoscape : cytoscape.js jar [3.0.0,4)

Модули Проекта

Данный проект не имеет модулей.

cytoscape-node-html-label

Description

This extension provides ability to add labels for Cytoscape nodes. Simple example:

cyInstance.nodeHtmlLabel( [{ tpl: d => '<div>' + d + '</div>' }] );

Demo: https://kaluginserg.github.io/cytoscape-node-html-label/

Features

  • optimized for high performance with high number of nodes, for smooth panning and zooming.
  • customizable labels with different templates.

Dependencies

  • Cytoscape.js ^3.0.0

Usage instructions

Download the library:

  • via npm: npm install cytoscape-node-html-label,
  • via bower: bower install cytoscape-node-html-label, or
  • via direct download from the repository (probably from a tag).

Plain HTML/JS has extension registered for you automatically:

<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="cytoscape-node-html-label.js"></script>

RequireJs approach:

require() the library as appropriate for your project:

CommonJS:

var cytoscape = require('cytoscape');
var nodeHtmlLabel = require('cytoscape-node-html-label');
nodeHtmlLabel( cytoscape ); // register extension

AMD:

require(['cytoscape', 'cytoscape-node-html-label'], function( cytoscape, nodeHtmlLabel ){
  nodeHtmlLabel( cytoscape ); // register extension
});

API

nodeHtmlLabel parameter is an array of options:

cyInstance.nodeHtmlLabel([
  {
    query: 'node', // cytoscape query selector
    halign: 'center', // title vertical position. Can be 'left',''center, 'right'
    valign: 'center', // title vertical position. Can be 'top',''center, 'bottom'
    halignBox: 'center', // title vertical position. Can be 'left',''center, 'right'
    valignBox: 'center', // title relative box vertical position. Can be 'top',''center, 'bottom'
    cssClass: '', // any classes will be as attribute of <div> container for every title
    tpl(data) {
      return '<span>' + data + '</span>'; // your html template here
    }
  }
]);

To make links clickable inside your labels, you need to pass enablePointerEvents: true as the 3rd argument to nodeHtmlLabel:

cyInstance.nodeHtmlLabel([
  {
    ...
  }
], {
  enablePointerEvents: true
});

Usage example

Code example:

// create Cy instance
var cyInstance = cytoscape({
    container: document.getElementById('cy'),
    layout: {
        name: 'random'
    },
    elements: [ // your cy elements
        { group: "nodes", data: { id: 'a1', name: 'a10' }, classes: 'l1' },
        { group: "nodes", data: { id: 'a1', name: 'a10' }, classes: 'l1' },
        { group: "nodes", data: { id: 'a1', name: 'a10' }, classes: 'l1' },
        { group: "nodes", data: { id: 'a5', name: 'a5' }, classes: 'l2' }
    ]
});

// set nodeHtmlLabel for your Cy instance
cyInstance.nodeHtmlLabel([{
        query: '.l1',
        valign: "top",
        halign: "left",
        valignBox: "top",
        halignBox: "left",
        tpl: function(data) {
            return '<p class="cy-title__p1">' + data.id + '</p>' + '<p  class="cy-title__p2">' + data.name + '</p>';
        }
    },
    {
        query: '.l2',
        tpl: function(data) {
            return '<p class="cy-title__p1">' + data.id + '</p>' + '<p  class="cy-title__p2">' + data.name + '</p>';
        }
    }
]);

Demo here: https://kaluginserg.github.io/cytoscape-node-html-label/

How to build and develop:

  1. Run npm start
  2. Create change in src/cytoscape-node-html-label.ts
  3. When finished => npm run test
  4. Prepare js and min files: npm run build
  5. git commit

Then, for version update and publish:

  1. Create new npm version: gulp patch, gulp feature or gulp release
  2. npm publish

Версии библиотеки

Версия
1.1.5