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 Zoom In/Out (قرصة متنقلة). يمكنك تغيير المحرر إلى النوع الثابت لحظره. يمكن نقل المحرر فقط. يمكنك وضعه قبل البدء.
editor . editor_mode = 'edit' ; // Default
editor . editor_mode = 'fixed' ; // Only scrollيمكنك أيضًا ضبط قيم التكبير.
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 | الانحناء Reroute First Point و Las Point |
reroute_curvature | رقم | 0.5 | انحناء REROUTE |
reroute_width | رقم | 6 | عرض Reroute |
line_path | رقم | 5 | عرض الخط |
force_first_input | منطقية | خطأ شنيع | إجبار أول إدخال لإسقاط الاتصال أعلى العقدة |
editor_mode | نص | edit | edit لتحرير ، fixed للعقد الثابتة ولكن حقول الإدخال الخاصة بها متوفرة ، view للعرض فقط |
zoom | رقم | 1 | التكبير الافتراضي |
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 | رقم | الموقف في start node اليسار |
pos_y | رقم | الموقف في START NODE TOP |
class | نص | تمت إضافة اسم className إلى De Node. أسماء فئة متعددة مفصولة بالفضاء |
data | جيسون | تم تمرير البيانات إلى العقدة |
html | نص | HTML مرسومة على عقدة أو name عقدة التسجيل. |
typenode | منطقية ونص | false افتراضي ، true لكائن HTML ، vue لـ Vue |
يمكنك استخدام السمة df-* في المدخلات ، textarea أو تحديد المزامنة مع بيانات العقدة والمضمون .
AtrRipts مضاعفات الآباء يدعمون 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 | جيسون | فقط ل vue . الدعائم المكون. Not Required |
options | جيسون | فقط ل vue . خيارات المكون. Not Required |
وظائف أخرى متاحة.
| مهتود | وصف |
|---|---|
zoom_in() | زيادة التكبير +0.1 |
zoom_out() | انخفاض تكبير -0.1 |
getNodeFromId(id) | احصل على معلومات من العقدة. على سبيل المثال: ID: 5 |
getNodesFromName(name) | مجموعة إرجاع معرف العقد. على سبيل المثال: الاسم: telegram |
removeNodeId(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) | إزالة اتصالات العقدة. المعرف السابق: node-x |
getModuleFromNodeId(id) | احصل على اسم الوحدة النمطية أين هو المعرف. ex id: 5 |
clearModuleSelected() | مسح بيانات الوحدة النمطية المحددة |
clear() | مسح جميع البيانات من جميع الوحدات والوحدات النمطية إزالة. |
editor . removeNodeId ( 'node-4' ) ; يمكنك اكتشاف الأحداث التي تحدث.
قائمة الأحداث المتاحة:
| حدث | يعود | وصف |
|---|---|---|
nodeCreated | بطاقة تعريف | id العقدة |
nodeRemoved | بطاقة تعريف | id العقدة |
nodeDataChanged | بطاقة تعريف | id العقدة df-* سمات تغيرت. |
nodeSelected | بطاقة تعريف | id العقدة |
nodeUnselected | حقيقي | عقدة Unlect |
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 | حدث | انقر فوق حدث الفأر الزر الثاني |
mouseMove | {x ، y} | موضع |
mouseUp | حدث | حدث ماوس |
keydown | حدث | حدث 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
}
}
}
}
}
عرض المثال الكامل في مستندات المجلد.
هناك أيضًا مثال على كيفية استخدام تدفق السحب في عنصر مخصص. (على أساس الخزان).
رخصة معهد ماساتشوستس للتكنولوجيا
