1.0.0 • Published 3 years ago
cytoscape.stickynote v1.0.0
cytoscape-stickynote
Description
This extension allows for the creation of cytoscape graph annotations. This includes stickynotes and notes on individual graph nodes. Text in stickynotes implements Editor.js, a a block style editor. Annotations persist through cytoscape json import/export.
Dependencies
- @editorjs/editorjs: ^2.19.0
- @editorjs/header: ^2.6.0
- @editorjs/list: ^1.6.1
- cytoscape: ^3.16.3
- cytoscape-cxtmenu: ^3.2.0
- cytoscape-popper: ^1.0.7
Usage instructions
Download the library:
- via npm:
npm install cytoscape-stickynote
- via direct download in the repository
Import the library as appropriate for your project:
ES import:
import cytoscape from 'cytoscape';
import { register as stickynote } from 'cytoscape-stickynote';
cytoscape.use(stickynote);
CommonJS require:
let cytoscape = require('cytoscape');
let stickynote = require('cytoscape-stickynote');
cytoscape.use(stickynote);
AMD:
require(['cytoscape', 'cytoscape-stickynote'], function (cytoscape, stickynote) {
stickynote(cytoscape);
});
API
Example
import cytoscape from 'cytoscape';
import { register as stickynote } from 'main.bundle.js';
import cxtmenu from 'cytoscape-cxtmenu';
import popper from 'cytoscape-popper';
import EditorJS from '@editorjs/editorjs';
import List from '@editorjs/list';
import Header from '@editorjs/header';
// register extensions
cytoscape.use(popper);
cytoscape.use(cxtmenu);
cytoscape.use(stickynote);
let cy = cytoscape({
container: document.getElementById('cy'),
/* ... */
});
// must pass editor object as a parameter
// other options are not needed
const stickynotes = cy.stickynote({
editor: {
EditorJS: EditorJS,
List: List,
Header: Header,
},
});
// ctxmenu extension implemented to make stickynote function calls
cy.cxtmenu({
selector: 'core',
commands: [
{
content: 'Add Note',
select: function (ele) {
stickynotes.addNote(ele);
},
},
{
content: 'Sort Notes',
select: function () {
stickynotes.sortNotes();
},
},
{
content: 'Toggle Notes',
select: function (ele) {
stickynotes.toggleNotes(ele);
},
},
],
});
cy.cxtmenu({
selector: 'node[tippyType="note"]',
commands: [
{
content: 'Edit Title',
select: function (ele) {
stickynotes.editTitle(ele);
},
},
{
content: 'Delete Note',
select: function (ele) {
stickynotes.deleteNote(ele);
},
},
],
});
Default options
let defaults = {
stickyNoteWidth: 220, // width of stickynote
stickyNoteHeight: 120, // height of stickunote
startingLineOffset: 20, // vertical offset value for the first line of sortnotes
newLineOffset: 100, // vertical offset value for each line after the starting line of sortnotes
nodeOffset: 225, // horizontal offset between each node
leftBuffer: 130, // minimum horizontal value
rightBuffer: 30, // maximum horizontal value
seperationNoteToNode: 20, // vertical distance from node to note
editor: undefined, // if editor is undefined, error. See above for example use
};
1.0.0
3 years ago