All Projects → alibaba → Ggeditor

alibaba / Ggeditor

Licence: mit
A visual graph editor based on G6 and React

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Ggeditor

Ascii art
Real-Time ASCII Art Rendering Library
Stars: ✭ 599 (-81.4%)
Mutual labels:  tree, graphics
Macsvg
macSVG - An open-source macOS app for designing HTML5 SVG (Scalable Vector Graphics) art and animation with a WebKit web view ➤➤➤
Stars: ✭ 789 (-75.5%)
Mutual labels:  graphics, editor
Core2d
A multi-platform data driven 2D diagram editor.
Stars: ✭ 475 (-85.25%)
Mutual labels:  graphics, editor
Vue Dataflow Editor
Vue 2 dataflow graph editor
Stars: ✭ 73 (-97.73%)
Mutual labels:  graphics, editor
Pixieditor
PixiEditor is a lightweight pixel art editor made with .NET 5
Stars: ✭ 210 (-93.48%)
Mutual labels:  graphics, editor
Seashore
easy to use mac osx image editing application for the rest of us
Stars: ✭ 182 (-94.35%)
Mutual labels:  graphics, editor
Retouch
🎬 An OpenGL application for editing and retouching images using depth-maps in 2.5D
Stars: ✭ 63 (-98.04%)
Mutual labels:  graphics, editor
Three Mesh Bvh
A BVH implementation to speed up raycasting against three.js meshes.
Stars: ✭ 302 (-90.62%)
Mutual labels:  tree, graphics
G6
♾ A Graph Visualization Framework in JavaScript
Stars: ✭ 8,490 (+163.66%)
Mutual labels:  tree, mind
Data Structures Algorithms
My implementation of 85+ popular data structures and algorithms and interview questions in Python 3 and C++
Stars: ✭ 273 (-91.52%)
Mutual labels:  tree
A
A graphical text editor
Stars: ✭ 280 (-91.3%)
Mutual labels:  editor
Edxray
A physically based renderer which implements many state of the art techniques in light transport simulation, material modeling, sampling and reconstruction.
Stars: ✭ 270 (-91.61%)
Mutual labels:  graphics
Rdsystem
Reaction-diffusion system with CustomRenderTexture.
Stars: ✭ 271 (-91.58%)
Mutual labels:  graphics
Xcodecolorsense2
🍉 An Xcode source editor extension that shows hex color info
Stars: ✭ 281 (-91.27%)
Mutual labels:  editor
Edizon cheatsconfigsandscripts
The official EdiZon Editor Config and Editor Script repository.
Stars: ✭ 271 (-91.58%)
Mutual labels:  editor
React Native Rich Editor
Lightweight React Native (JavaScript, H5) rich text editor
Stars: ✭ 281 (-91.27%)
Mutual labels:  editor
Mak
A universal notepad. (WIP)
Stars: ✭ 270 (-91.61%)
Mutual labels:  editor
Ofelia
A real-time cross-platform creative coding tool for multimedia development
Stars: ✭ 269 (-91.65%)
Mutual labels:  graphics
Thinkmap
Draw a tree in Android。在 Android 上绘制思维导图控件,让思维更简单。
Stars: ✭ 285 (-91.15%)
Mutual labels:  tree
Text
📑 Collaborative document editing using Markdown
Stars: ✭ 282 (-91.24%)
Mutual labels:  editor

English | 简体中文

GGEditor

基于 G6React 的可视化图编辑器

GitHub npm npm

安装

npm

npm install gg-editor --save

umd

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

使用

流程图

Edit GGEditor - Flow

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

const data = {
  nodes: [
    {
      id: '0',
      label: 'Node',
      x: 55,
      y: 55,
    },
    {
      id: '1',
      label: 'Node',
      x: 55,
      y: 255,
    },
  ],
  edges: [
    {
      label: 'Label',
      source: '0',
      target: '1',
    },
  ],
};

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

脑图

Edit GGEditor - Mind

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

const data = {
  label: 'Central Topic',
  children: [
    {
      label: 'Main Topic 1',
    },
    {
      label: 'Main Topic 2',
    },
    {
      label: 'Main Topic 3',
    },
  ],
};

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

示例

# 克隆仓库
$ git clone https://github.com/alibaba/GGEditor.git

# 切换目录
$ cd gg-editor

# 安装依赖
$ npm install

# 运行示例
$ npm start
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].