ccs-gg-editor
TypeScript icon, indicating that this package has built-in type declarations

2.0.9 • Public • Published

English | 简体中文

CCS-GGEditor

language GitHub license npm version npm downloads

A visual graph editor based on G6 and React. fix the official version 2.x under ie11 mousewheel incompatibility.

Demo

Flow

Flow

Mind

Mind

Koni

Koni

Installation

npm

npm install --save ccs-gg-editor

umd

<script src="https://unpkg.com/ccs-gg-editor@${version}/dist/bundle.js"></script>

run demo

$ git clone https://github.com/gaoli/GGEditor.git
$ cd ccs-gg-editor
$ npm install
$ npm start

Usage

Flow

import GGEditor, { Flow } from 'ccs-gg-editor';

const data = {
  nodes: [{
    type: 'node',
    size: '70*70',
    shape: 'flow-circle',
    color: '#FA8C16',
    label: '起止节点',
    x: 55,
    y: 55,
    id: 'ea1184e8',
    index: 0,
  }, {
    type: 'node',
    size: '70*70',
    shape: 'flow-circle',
    color: '#FA8C16',
    label: '结束节点',
    x: 55,
    y: 255,
    id: '481fbb1a',
    index: 2,
  }],
  edges: [{
    source: 'ea1184e8',
    sourceAnchor: 2,
    target: '481fbb1a',
    targetAnchor: 0,
    id: '7989ac70',
    index: 1,
  }],
};

<GGEditor>
  <Flow style={{ width: 500, height: 500 }} data={data} />
</GGEditor>

Mind

import GGEditor, { Mind } from 'ccs-gg-editor';

const data = {
  roots: [{
    label: '中心主题',
    children: [{
      label: '分支主题 1',
    }, {
      label: '分支主题 2',
    }, {
      label: '分支主题 3',
    }],
  }],
};

<GGEditor>
  <Mind style={{ width: 500, height: 500 }} data={data} />
</GGEditor>

Documentation

DingTalk Group

DingTalk Group

Package Sidebar

Install

npm i ccs-gg-editor

Weekly Downloads

0

Version

2.0.9

License

MIT

Unpacked Size

1.38 MB

Total Files

123

Last publish

Collaborators

  • leesny