blocks.js ดาวน์โหลด - blocks.js ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

blocks.js

ทรัพยากรอื่นๆ

1.0.0

ดาวน์โหลด

blocks.js

ตึก

ตัวแก้ไขกราฟ Dataflow JavaScript

blocks.js เป็นตัวแก้ไขภาพ JavaScript สำหรับการแก้ไขกราฟ dataflow สามารถใช้ในการแก้ไขกราฟกระบวนการ

โปรดทราบว่านี่เป็นเพียงตัวแก้ไขส่วนหน้ายืดหยุ่นไม่มีส่วนหลังที่นี่

คุณสามารถลองสาธิตสด

ภาพรวม

blocks.js ถูกป้อนโดยใช้ข้อกำหนดของบล็อกโดยใช้ข้อมูลเมตาอธิบายฟิลด์ชื่อและพฤติกรรม

อนุญาตให้ผู้ใช้แก้ไขฉากบล็อก

จากนั้นขอขอบคุณตัวอย่างเช่นวิธี export() คุณสามารถกลับฉากที่แก้ไขได้ เมื่อคุณโหลดบล็อกคุณสามารถโหลดฉากกลับได้

ใช้ blocks.js

การดาวน์โหลด

หากคุณต้องการใช้มันคุณจะต้องดึงรหัสไม่ว่าจะโดยการโคลนนิ่งที่เก็บนี้หรือโดยการดาวน์โหลด

ความต้องการ

blocks.js ใช้:

jQuery
jQuery-json สำหรับการส่งออก JSON
jQuery-Mousewheel สำหรับการเลื่อนซูม
jQuery-SVG สำหรับการแสดงผลขอบ
jQuery-formserialize สำหรับรูปแบบการทำให้เป็นอนุกรมและ deserialization
jQuery-FancyBox สำหรับ Modal Parameters Edition

ข้อกำหนดทั้งหมดเหล่านี้รวมอยู่ในที่เก็บนี้ นี่คือเหตุผลที่ห้องสมุดบุคคลที่สามจะมีลักษณะเช่นนี้:

 <!-- 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] มันแสดงถึงขั้นต่ำและขอบสูงสุดที่สามารถเชื่อมต่อกับ I/O
dimension : จำนวนการเชื่อมต่อในฟิลด์เดียวกันอาจขึ้นอยู่กับค่าฟิลด์ขนาดหรือแก้ไขเป็นจำนวนคงที่ ดู Variadic I/OS

อย่าลังเลที่จะดูการสาธิตที่เก็บในไดเรกทอรี `Demo/̀

ฉาก

ฉากนี้เป็นวัตถุที่ง่ายต่อการทำ:

blocks : ฉากบล็อก
edges : ขอบฉาก

บล็อกฉาก

บล็อกฉากทั้งหมดแสดงด้วย:

id : ID ตัวเลข
x และ y ตำแหน่งของบล็อกในฉาก
type : ชื่อประเภทบล็อก
module : ชื่อโมดูลประเภทบล็อก
values : อาร์เรย์ที่มีค่าของฟิลด์ที่แก้ไขได้ทั้งหมด

ขอบฉาก

ขอบฉากถูกแสดงด้วย:

id : ID ตัวเลข
block1 : ID ของบล็อกที่ขอบเริ่มต้น
connector1 : ตัวเชื่อมต่อของบล็อกที่จุดเริ่มต้น
block2 : ID ของบล็อกที่ขอบสิ้นสุดลง
connector2 : ตัวเชื่อมต่อของบล็อกที่ขอบสิ้นสุดลง

ตัวเชื่อมต่อฉาก

ตัวเชื่อมต่อคืออาร์เรย์ที่มีองค์ประกอบ 2 หรือ 3 รายการ:

สตริง input หรือ output อธิบายว่าตัวเชื่อมต่อเป็นขาออกของบล็อกหรือป้อนเข้ามา
ชื่อของฟิลด์บล็อกในกรณีล่าง
เป็นทางเลือกดัชนีสำหรับฟิลด์ Variadic

การพิมพ์

แต่ละฟิลด์สามารถพิมพ์ได้ ประเภทพื้นฐาน ( string , choice , longtext , bool , int ) จะแสดงเป็นอินพุตฟอร์ม, ประเภทที่ไม่รู้จักอื่น ๆ ทั้งหมดจะแสดงเป็นอินพุตข้อความอย่างง่าย (หมายเหตุ: สำหรับประเภท choice คุณสามารถกำหนดตัวเลือกการเพิ่มรายการ ̀ choices ในฟิลด์บล็อก)

หากประเภทจบลงด้วย [] จะถือว่าเป็นอาร์เรย์ปุ่ม Add & Remove จะถูกเพิ่มเมื่อแก้ไข

โดยค่าเริ่มต้นประเภทต่าง ๆ จะไม่เข้ากันได้ดังนั้นจึงไม่สามารถเชื่อมโยงเข้าด้วยกันได้ อย่างไรก็ตามคุณสามารถบอกบล็อกได้ว่าบางประเภทเข้ากันได้โดยใช้:

 // 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' ) ;

VARIADIC I/OS

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"
        }
    ]
} ) ;