blocks.js
1.0.0
blocks.js هو محرر مرئي JavaScript لتحرير DataFlow الرسم البياني ، ويمكن استخدامه لتحرير الرسوم البيانية للعمليات.
لاحظ أن هذا مجرد محرر مرن في الواجهة الأمامية ، لا يوجد هنا.
يمكنك تجربة عرض حي مباشر.
يتم تغذية blocks.js باستخدام مواصفات الكتل ، باستخدام معلومات التعريف التي تشرح حقولها واسمها وسلوكها.
يسمح للمستخدم بتحرير مشهد الكتل.
بعد ذلك ، شكرًا على سبيل المثال على Method export() ، يمكنك استعادة المشهد المعدل. عند تحميل الكتل ، يمكنك أيضًا تحميل مشهد مرة أخرى.
إذا كنت ترغب في استخدامه ، فسيتعين عليك جلب الرمز ، إما عن طريق استنساخ هذا المستودع ، أو عن طريق تنزيله.
تستخدم blocks.js:
يتم تضمين كل هذه المتطلبات في هذا المستودع. هذا هو السبب في أن مكتبات الطرف الثالث ستبدو هكذا:
<!-- Third party libraries -->
< script type =" text/javascript " src =" build/jquery.js " > </ script >
< script type =" text/javascript " src =" build/jquery.json.min.js " > </ script >
< script type =" text/javascript " src =" build/jquery.mousewheel.min.js " > </ script >
< script type =" text/javascript " src =" build/jquery.svg.min.js " > </ script >
< script type =" text/javascript " src =" build/jquery.formserialize.min.js " > </ script >
< script type =" text/javascript " src =" build/jquery.fancybox.min.js " > </ script >
< link rel =" stylesheet " type =" text/css " href =" build/fancybox/jquery.fancybox.css " /> بعد ذلك ، سيتعين عليك تحميل blocks.js و blocks.css :
<!-- blocks.js -->
< script type =" text/javascript " src =" build/blocks.js " > </ script >
< link rel =" stylesheet " type =" text/css " href =" build/blocks.css " />هنا مثال بسيط:
// Instanciate Blocks
var blocks = new Blocks ( ) ;
// Registering a simple block, with an input
// and an output
blocks . register ( {
name : "Test" ,
fields : [
{
name : "Input" ,
attrs : "input"
} ,
{
name : "Output" ,
attrs : "output"
}
]
} ) ;
// Running blocks on the div with the name "blocks"
blocks . run ( "#blocks" ) ; إلقاء نظرة على simple.html .
الكتل هو كائن يحتوي على:
name : اسم الكتلةfamily : عائلة البلوك ، سيتم استخدام هذا لوضعه في القسم الفرعي القائم على الكتل الصحيحةmodule : وحدة الكتلة ، تتصرف مثل مساحة الاسم وتجنب تصادم الأسماءdescription : وصف لما تفعله الكتلة ، لمساعدة المستخدمsize : حجم الكتلة ، يمكن أن يكون small أو normal أو عدد معين من وحدات البكسلclass : فئات CSS الإضافية التي سيتم إضافتها إلى الكتلةfields : قائمة صفيف لحقول الكتلة ، انظر أدناهيمكن أن يكون الحقل إدخالًا ومخرجات و/أو معلمة قابلة للتحرير للكتلة. إنه كائن يحتوي على:
name : اسم الحقل ، يجب ألا يحتويlabel : تسمية الحقل ، والتي سيتم طباعتها في عنوان الكتل ، يمكن أن تحتوي على أحرف خاصةattrs : سمات حقل سلسلة containg ، يمكن أن تحتوي على input ، output و/أو editable . على سبيل المثال: "editable input"type : نوع الحقل. انظر الكتابة.defaultValue : القيمة الافتراضية للحقل ، والتي سيتم استخدامها إذا كانت قابلة للتحريرhide : لا تعرض الحقل القابل للتحرير في معلومات الكتلةhideLabel : لا تعرض تسمية الحقل القابلة للتحرير في معلومات الكتلةcard : Cardinality من الإدخال/الإخراج. يمكن أن يكون هذا سلسلة مثل "0-3" أو صفيف مثل [0,3] ، فهي تمثل الحد الأدنى والحواف القصوى التي يمكن توصيلها بإدخال/إخراج.dimension : يمكن أن يعتمد عدد الاتصال على نفس الحقل على قيمة حقل أخرى ، أو حجمها أو تثبيتها على رقم ثابت. انظر variadic I/OSلا تتردد في إلقاء نظرة على العرض التجريبي للمستودع ، في دليل "العرض التوضيحي/".
المشهد هو كائن سهل الغاز يحتوي على:
blocks : الكتل المشهدedges : الحواف المشهديتم تمثيل جميع كتلة المشهد مع:
id : معرفه الرقميx و y ، موضع الكتلة في المشهدtype : اسم نوع الكتلةmodule النمطية: اسم وحدة الكتلةvalues : صفيف يحتوي على قيم جميع حقولها القابلة للتحريريتم تمثيل حافة المشهد مع:
id : معرفه الرقميblock1 : معرف الكتلة حيث تبدأ الحافةconnector1 : موصل الكتلة حيث تبدأ الحافةblock2 : معرف الكتلة حيث تنتهي الحافةconnector2 : موصل الكتلة حيث تنتهي الحافةالموصل هو صفيف يحتوي على 2 أو 3 عناصر:
input أو output ، موضحة ما إذا كان الموصل صادرًا من الكتلة أو يدخل فيه يمكن كتابة كل حقل. يتم تقديم الأنواع الأساسية ( string ، choice ، longtext ، bool ، int ) كمدخلات للنماذج ، يتم تقديم جميع الأنواع غير المعروفة الأخرى كإدخال نص بسيط. (ملاحظة: لنوع choice ، يمكنك تحديد الخيارات إضافة إدخال ̀ choices في حقل الكتلة).
إذا انتهى النوع بـ [] ، فسيتم اعتباره صفيفًا ، فسيتم إضافة أزرار إضافة وإزالة عند التحرير.
بشكل افتراضي ، فإن الأنواع المختلفة ليست متجانسة ، وبالتالي لا يمكن ربطها معًا. ومع ذلك ، يمكنك معرفة blocks.js أن بعض الأنواع متوافقة باستخدام:
// Tells blocks.js that string and number are compatible and can be linked
blocks . types . addCompatibility ( 'string' , 'number' ) ;
// Tells blocks.js that an image can be converted to a string, however, the
// string can't be converted to an image
blocks . types . addCompatibilityOneWay ( 'image' , 'string' ) ; يمكن أن تكون بعض I/OS متنوعة ، فكر في كتلة من شأنها إخراج أول المستخدمين في قاعدة البيانات ، يمكنك تحديدها على هذا النحو:
blocks . register ( {
name : "TopUsers" ,
description : "Outputs the n first users of the database" ,
fields : [
{
name : "n" ,
type : "int" ,
hide : true ,
defaultValue : 3 ,
attrs : "editable"
} ,
{
name : "users" ,
label : "User #" ,
dimension : "n" ,
attrs : "output"
}
]
} ) ; هنا ، سيكون عدد المستخدمين الذين يتم إخراجهم قابلاً للتحرير ، باستخدام حقل n القابل للتحرير. لاحظ أنه سيتم استبدال # بعدد الإخراج.
فيما يلي مثال يستخدم blocks.js:
يأخذ التطوير أماكن في src/ الدليل. هناك Makefile باستخدام سطر أوامر uglifyjs لإنشاء البناء.
يمكنك استخدام index-dev.html لاختبار blocks.js باستخدام مصادره ، و index.html لتجربته في وضع الإنشاء.
لن يتم تحديث build/ دليل هذا المستودع على كل التزام ، ولكن يجب أن يحتوي على لقطة حديثة للمستودع.
blocks.js تحت رخصة معهد ماساتشوستس للتكنولوجيا. إلقاء نظرة على ملف الترخيص لمزيد من المعلومات.
