editor-creator v1.1.2

Editor-Creator

Editor-Creator is a visual graph editor based on G6 and React​​. It's a tool that provides a visual interface for creating and editing graphs. It can be used for various applications where graph visualization and manipulation is required.

Installation

$ npm install editor-creator --save

Usage

import React from 'react';
import Editor, { Flow } from 'editor-creator';

const data = {
  nodes: [
    {
      id: '0',
      label: 'Node 1',
      x: 10,
      y: 10,
    },
    {
      id: '1',
      label: 'Node 2',
      x: 20,
      y: 250,
    },
  ],
  edges: [
    {
      label: 'Label',
      source: '0',
      target: '1',
    },
  ],
};

const FlowEditor = () => {
  return (
    <Editor className="editor">
      <Flow
        data={data}
        graphConfig={{
          renderer: 'canvas',
          defaultNode: {
            shape: 'node',
          },
          defaultEdge: {
            shape: 'flowEdge',
          },
          minZoom: 0.1,
          maxZoom: 2,
        }}
        className="editor-flow"
      />
    </Editor>
  );
};

export default FlowEditor;

API

Editor

Flow

EditorContext

For EditorContextProps:

For EditorPrivateContextProps:

Graph

Command

ItemPanel

Item

Plugins

Minimap

Usage

import React from 'react';
import Editor, { Flow, Minimap } from 'editor-creator';

const FlowEditor = () => {
  return (
    <Editor className="editor">
      <Flow
        data={data}
        ref={component => {
          if (component) {
            const { graph } = component;
            if (graph && graph.cfg.plugins.length === 0) {
              const minimap = new Minimap({
                size: [230, 120],
                delegateStyle: {
                  fill: '#1890ff40',
                  stroke: '#1890ff40',
                },
                drawEdges: false,
              });

              graph.addPlugin(minimap);

              minimap.updateCanvas();
            }
          }
        }}
        className="editor-flow"
      />
    </Editor>
  );
};

export default FlowEditor;

Grid

Usage

import React from 'react';
import Editor, { Flow, Grid } from 'editor-creator';

const FlowEditor = () => {
  return (
    <Editor className="editor">
      <Flow
        data={data}
        ref={component => {
          if (component) {
            const { graph } = component;
            if (graph && graph.cfg.plugins.length === 0) {
              const grid = new Grid(graph);
              graph.addPlugin(grid);
            }
          }
        }}
        className="editor-flow"
      />
    </Editor>
  );
};

export default FlowEditor;

EditableLabel

Usage

import React from 'react';
import Editor, { Flow, EditableLabel } from 'editor-creator';

const FlowEditor = () => {
  return (
    <Editor className="editor">
      <EditableLabel />
      <Flow data={data} className="editor-flow" />
    </Editor>
  );
};

export default FlowEditor;

Examples

Feel free to experiment with editor-creator directly in your browser to assess its suitability for your project requirements:

Basic Example

The following example shows how to use simple Flow component from the library in your React application.

Advanced Example

The following example shows you a React component that serves as a graphical user interface for managing flows of nodes and edges. This component provides utilities for managing nodes and edges, such as undoing and redoing actions, copying, pasting, removing, and zooming in and out. It also features an interactive minimap and a grid layout for ease of navigation and a context menu for quick access to commands.