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 'cytoscape-stickynote';
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
};