Слияние кода завершено, страница обновится автоматически
GGEditor
Визуальный редактор диаграмм на основе G6 и React.
Установка
npm install gg-editor --save
<script src="https://unpkg.com/gg-editor@${version}/dist/index.js"></script>
Использование
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>;
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
Тип | Пример | Исходный код |
---|---|---|
Диаграмма | flow | source |
Диаграмма | mind | source |
Компонент | component-command | source |
Компонент | component-item-panel | source |
Компонент | component-detail-panel | source |
Плагин | plugin-editable-label | source |
Плагин | plugin-item-popover | source |
Плагин | plugin-context-menu | source |
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )