Drawflow
0.0.60
Простая библиотека потока.
Drawflow позволяет легко и быстро создавать потоки данных.
Установка только библиотеки JavaScript и с четырьмя строками кода.
Живая демонстрация
? Тема Редактировать генератор
edit режима редактора, fixed или viewЗагрузите или клонируйте репозиторий и скопируйте папку Dist, опцию CDN или NPM.
git clone https://github.com/jerosoler/Drawflow.git
# Last
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css " >
< script src =" https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js " > </ script >
# or version view releases https://github.com/jerosoler/Drawflow/releases
< link rel =" stylesheet " href =" https://unpkg.com/[email protected]/dist/drawflow.min.css " />
< script src =" https://unpkg.com/[email protected]/dist/drawflow.min.js " > </ script > npm i drawflowВнешний пакет. Больше информации #119
npm install - D @ types / drawflow import Drawflow from 'drawflow'
import styleDrawflow from 'drawflow/dist/drawflow.min.css' var Drawflow = require ( 'drawflow' )
var styleDrawflow = require ( 'drawflow/dist/drawflow.min.css' )Создайте родительский элемент натяжения .
< div id =" drawflow " > </ div >Начните поток.
var id = document . getElementById ( "drawflow" ) ;
const editor = new Drawflow ( id ) ;
editor . start ( ) ;| Параметр | Тип | Описание |
|---|---|---|
id | Объект | Название модуля |
render | Объект | Это для Vue . |
parent | Объект | Это для Vue . Родительский экземпляр |
import Vue from 'vue'
// Pass render Vue
this . editor = new Drawflow ( id , Vue , this ) ; import { h , getCurrentInstance , render } from 'vue'
const Vue = { version : 3 , h , render } ;
this . editor = new Drawflow ( id , Vue ) ;
// Pass render Vue 3 Instance
const internalInstance = getCurrentInstance ( )
editor . value = new Drawflow ( id , Vue , internalInstance . appContext . app . _context ) ; Добавить в файл nuxt.config.js
build: {
transpile : [ 'drawflow' ] ,
...
} del key для удаления элемента.Right click , чтобы показать параметры удаления (Mobile Long Press).Left click press , чтобы перемещать редактор или узел.Ctrl + Mouse Wheel choom in in in/out (мобильная щелка). Вы можете изменить редактор на фиксированный тип на блок. Только редактор может быть перенесен. Вы можете положить это до начала.
editor . editor_mode = 'edit' ; // Default
editor . editor_mode = 'fixed' ; // Only scrollВы также можете настроить значения Zoom.
editor . zoom_max = 1.6 ;
editor . zoom_min = 0.5 ;
editor . zoom_value = 0.1 ;| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
reroute | Логический | ЛОЖЬ | Активный перенаправление |
reroute_fix_curvature | Логический | ЛОЖЬ | Исправьте добавление очков |
curvature | Число | 0,5 | Кривизна |
reroute_curvature_start_end | Число | 0,5 | Перенаправление кривизны Первая точка и Las Point |
reroute_curvature | Число | 0,5 | Кривизна перенаправление |
reroute_width | Число | 6 | Ширина перенаправления |
line_path | Число | 5 | Ширина линии |
force_first_input | Логический | ЛОЖЬ | Заставьте первый вход, чтобы отбросить соединение в верхней части узла |
editor_mode | Текст | edit | edit для редактирования, fixed для узлов, фиксированные, но их входные поля доступны, view только для просмотра |
zoom | Число | 1 | По умолчанию Zoom |
zoom_max | Число | 1.6 | По умолчанию Zoom Max |
zoom_min | Число | 0,5 | По умолчанию Zoom Min |
zoom_value | Число | 0,1 | Обновление значения увеличения по умолчанию |
zoom_last_value | Число | 1 | Увеличение по умолчанию последнее значение |
draggable_inputs | Логический | истинный | Перетаскивать узлы на нажмите входы |
useuuid | Логический | ЛОЖЬ | Используйте UUID в качестве идентификатора узла вместо целочисленного индекса. Влияют только на недавно созданные узлы, не влияют на импортируемые узлы |
Активные перенаправленные соединения. Используйте перед start или import .
editor . reroute = true ;Создайте точку с двойным нажмите на линию подключения. Дважды щелкните точку для удаления.
Разделите потоки в разных редакторах.
editor . addModule ( 'nameNewModule' ) ;
editor . changeModule ( 'nameNewModule' ) ;
editor . removeModule ( 'nameModule' ) ;
// Default Module is Home
editor . changeModule ( 'Home' ) ; RemovedModule , если он находится в одном и том же модуле перенаправления в Home модуль
Добавить узел просто.
editor . addNode ( name , inputs , outputs , posx , posy , class , data , html ) ;| Параметр | Тип | Описание |
|---|---|---|
name | текст | Название модуля |
inputs | число | Количество входов DE |
outputs | число | Количество выходов DE |
pos_x | число | Положение на стартовом узле слева |
pos_y | число | Позиция на стартовом топе узла |
class | текст | Добавлено имя класса в де узло. Многочисленные классные имена, разделенные пространством |
data | json | Данные переданы в узле |
html | текст | HTML нарисован на узле или name узла регистра. |
typenode | логический и текст | По умолчанию false , true для объекта HTML, vue для Vue |
Вы можете использовать атрибут df-* в входах, Textarea или выбрать для синхронизации с данными узла и довольного .
Atrributs Multiples Rentals поддерживают df-*-*...
var html = `
<div><input type="text" df-name></div>
` ;
var data = { "name" : '' } ;
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , html ) ;Возможны узлы регистрации для повторного использования.
var html = document . createElement ( "div" ) ;
html . innerHTML = "Hello Drawflow!!" ;
editor . registerNode ( 'test' , html ) ;
// Use
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , 'test' , true ) ;
// For vue
import component from '~/components/testcomponent.vue'
editor . registerNode ( 'name' , component , props , options ) ;
// Use for vue
editor . addNode ( 'github' , 0 , 1 , 150 , 300 , 'github' , data , 'name' , 'vue' ) ;| Параметр | Тип | Описание |
|---|---|---|
name | текст | Название модуля зарегистрировано. |
html | текст | HTML для натяжения или компонента vue . |
props | json | Только для vue . Реквизит компонента. Not Required |
options | json | Только для vue . Варианты компонента. Not Required |
Другие доступные функции.
| Мехтод | Описание |
|---|---|
zoom_in() | Увеличение увеличения +0.1 |
zoom_out() | Уменьшение Zoom -0,1 |
getNodeFromId(id) | Получите информацию о узле. Пример: ID: 5 |
getNodesFromName(name) | Возврат массивы узлов идентификатор. Пример: Имя: telegram |
removeNodeId(id) | Удалить узел. EX ID: node-x |
updateNodeDataFromId | Обновить элемент данных. Пример: 5, { name: 'Drawflow' } |
addNodeInput(id) | Добавить вход в узел. EX ID: 5 |
addNodeOutput(id) | Добавить вывод в узел. EX ID: 5 |
removeNodeInput(id, input_class) | Удалить вход в узел. Ex id: 5 , input_2 |
removeNodeOutput(id, output_class) | Удалить выход до узла. Ex id: 5 , output_2 |
addConnection(id_output, id_input, output_class, input_class) | Добавить соединение. Пример: 15,16,'output_1','input_1' |
removeSingleConnection(id_output, id_input, output_class, input_class) | Удалить соединение. Пример: 15,16,'output_1','input_1' |
updateConnectionNodes(id) | Обновление положения соединений от Node Ex ID: node-x |
removeConnectionNodeId(id) | Удалить соединения узла. EX ID: node-x |
getModuleFromNodeId(id) | Получите имя модуля, где есть идентификатор. EX ID: 5 |
clearModuleSelected() | Очистить данные выбранного модуля |
clear() | Очистить все данные всех модулей и модулей удаляют. |
editor . removeNodeId ( 'node-4' ) ; Вы можете обнаружить события, которые происходят.
Список доступных событий:
| Событие | Возвращаться | Описание |
|---|---|---|
nodeCreated | идентификатор | id узла |
nodeRemoved | идентификатор | id узла |
nodeDataChanged | идентификатор | id узла DF-* Атрибуты изменены. |
nodeSelected | идентификатор | id узла |
nodeUnselected | истинный | Невысленный узел |
nodeMoved | идентификатор | id узла |
connectionStart | {output_id, output_class} | id узлов и вывода выбранных |
connectionCancel | истинный | Отмена соединения |
connectionCreated | {output_id, input_id, output_class, input_class} | id узлов и выбранного выходного/ввода/ввода |
connectionRemoved | {output_id, input_id, output_class, input_class} | id узлов и выбранного выходного/ввода/ввода |
connectionSelected | {output_id, input_id, output_class, input_class} | id узлов и выбранного выходного/ввода/ввода |
connectionUnselected | истинный | Невыразительное соединение |
addReroute | идентификатор | id вывода узла |
removeReroute | идентификатор | id вывода узла |
rerouteMoved | идентификатор | id вывода узла |
moduleCreated | имя | name модуля |
moduleChanged | имя | name модуля |
moduleRemoved | имя | name модуля |
click | событие | Нажмите на событие |
clickEnd | событие | Как только изменения щелчка были сделаны |
contextmenu | событие | Нажмите вторую кнопку Mouse Event |
mouseMove | {x, y} | Позиция |
mouseUp | событие | Мероприятие MouseUp |
keydown | событие | Кейддаун событие |
zoom | Zoom_level | Уровень масштабирования |
translate | {x, y} | Позиция перевода редактора |
import | import | Закончить импорт |
export | данные | Экспорт данных |
editor . on ( 'nodeCreated' , function ( id ) {
console . log ( "Node created " + id ) ;
} ) Вы можете экспортировать и импортировать свои данные.
var exportdata = editor . export ( ) ;
editor . import ( exportdata ) ;Пример экспортированных данных:
{
"drawflow" : {
"Home" : {
"data" : {}
},
"Other" : {
"data" : {
"16" : {
"id" : 16 ,
"name" : " facebook " ,
"data" : {},
"class" : " facebook " ,
"html" : "n
n
Facebook Message
n
n ",
"inputs" : {},
"outputs" : {
"output_1" : {
"connections" : [
{
"node" : " 17 " ,
"output" : " input_1 "
}
]
}
},
"pos_x" : 226 ,
"pos_y" : 138
},
"17" : {
"id" : 17 ,
"name" : " log " ,
"data" : {},
"class" : " log " ,
"html" : "n
n
Save log file
n
n ",
"inputs" : {
"input_1" : {
"connections" : [
{
"node" : " 16 " ,
"input" : " output_1 "
}
]
}
},
"outputs" : {},
"pos_x" : 690 ,
"pos_y" : 129
}
}
}
}
}
Просмотреть полный пример в папках Docs.
Существует также пример, как использовать натяжение в пользовательском элементе. (на основе литлирования).
MIT Лицензия
