blocks.js

blocks.js

Editor Grafik Dataflow JavaScript

Blocks.js adalah editor visual JavaScript untuk mengedit grafik DataFlow, dapat digunakan untuk mengedit grafik proses.

Perhatikan bahwa ini hanyalah editor front-end yang fleksibel, tidak ada back-end di sini.

Anda dapat mencoba demo langsung.

Ringkasan

Blocks.js diberi makan menggunakan spesifikasi blok, menggunakan informasi meta yang menjelaskan bidang, nama, dan perilakunya.

Ini memungkinkan pengguna untuk mengedit adegan blok.

Kemudian, terima kasih misalnya untuk export() , metode, Anda bisa mendapatkan kembali adegan yang diedit. Saat Anda memuat blok, Anda juga dapat memuat kembali pemandangan.

Menggunakan blocks.js

Mengunduh

Jika Anda ingin menggunakannya, Anda harus mengambil kode, baik dengan mengkloning repositori ini, atau dengan mengunduhnya.

Persyaratan

blocks.js menggunakan:

• jQuery
• jQuery-json untuk ekspor JSON
• jQuery-mousewheel untuk menggulir zoom
• jQuery-svg untuk rendering tepi
• jQuery-Formserialize untuk bentuk serialisasi dan deserialisasi
• JQuery-FancyBox untuk Modal Parameters Edition

Semua persyaratan ini termasuk dalam repositori ini. Inilah sebabnya mengapa perpustakaan pihak ketiga akan terlihat seperti ini:

 <!-- 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 " />

Kemudian, Anda harus memuat blocks.js dan blocks.css :

 <!-- blocks.js -->
< script type =" text/javascript " src =" build/blocks.js " > </ script > 
< link rel =" stylesheet " type =" text/css " href =" build/blocks.css " />

Menjalankannya

Berikut adalah contoh sederhana:

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

Lihatlah simple.html .

Blok

Blok adalah objek yang berisi:

• name : Nama blok
• family : The Block Family, ini akan digunakan untuk meletakkannya di sub-bagian menu blok kanan
• module : Modul Blok, Bertindak Seperti Namespace dan Hindari Tabrakan Nama
• description : Deskripsi apa yang dilakukan blok, untuk membantu pengguna
• size : Ukuran blok, bisa ̀ small , normal atau sejumlah piksel tertentu
• class : Kelas tambahan CSS yang akan ditambahkan ke blok
• fields : Daftar Array Bidang Blok, lihat di bawah

Bidang

Bidang dapat berupa input, output dan/atau parameter blok yang dapat diedit. Itu adalah objek yang berisi:

• name : Nama lapangan, tidak boleh berisi karakter khusus
• label : Label bidang, yang akan dicetak dalam judul blok, dapat berisi karakter khusus
• attrs : Atribut bidang penentuan string, dapat berisi input , output dan/atau editable . Misalnya: "editable input"
• type : Jenis bidang. Lihat pengetikan.
• defaultValue : Nilai default bidang, yang akan digunakan jika itu dapat diedit
• hide : Jangan menampilkan bidang yang dapat diedit di informasi blok
• hideLabel : Jangan menampilkan label bidang yang dapat diedit di informasi blok
• card : Kardinalitas input/output. Ini bisa berupa string seperti "0-3" atau dan array seperti [0,3] , itu mewakili minimum dan tepi maksimum yang dapat dihubungkan ke I/O.
• dimension : Jumlah koneksi pada bidang yang sama dapat bergantung pada nilai bidang lain, ukuran, atau diperbaiki ke nomor statis. Lihat I/OS Variadik

Jangan ragu untuk melihat demo repositori, di direktori `demo/̀.

Pemandangan

Adegan ini adalah objek yang mudah diarahkan:

• blocks : adegan blok
• edges : Tepi Adegan

Blok adegan

Semua blok adegan diwakili dengan:

• id : ID numeriknya
• x dan y , posisi blok di tempat kejadian
• type : Nama Jenis Blok
• module : Nama Modul Jenis Blok
• values : Array yang berisi nilai semua bidang yang dapat dieditnya

Tepi adegan

Tepi adegan diwakili dengan:

• id : ID numeriknya
• block1 : ID blok di mana tepi dimulai
• connector1 : Konektor blok di mana tepi dimulai
• block2 : ID blok di mana ujungnya berakhir
• connector2 : Konektor blok di mana tepi berakhir

Konektor adegan

Konektor adalah array yang berisi 2 atau 3 elemen:

• String, input atau output , menjelaskan jika konektor keluar dari blok atau masuk ke dalamnya
• Nama bidang blok, dalam huruf kecil
• Secara opsional, indeks untuk bidang variadik

Mengetik

Setiap bidang dapat diketik. Tipe dasar ( string , choice , longtext , bool , int ) diterjemahkan sebagai input bentuk, semua jenis lain yang tidak diketahui diterjemahkan sebagai input teks sederhana. (Catatan: Untuk jenis choice , Anda dapat menentukan pilihan menambahkan entri ̀ choices di bidang blok).

Jika jenisnya berakhir dengan [] , itu dianggap sebagai array, tombol Tambah & Lepaskan akan ditambahkan saat mengedit.

Secara default, berbagai jenis tidak kompatibel, dan karenanya tidak dapat dihubungkan bersama. Namun Anda dapat memberi tahu Bloks.js bahwa beberapa jenis yang kompatibel menggunakan:

 // 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 Variadik

Beberapa I/OS dapat berupa variadik, pikirkan blok yang akan menghasilkan N pengguna pertama dari suatu database, Anda dapat mendefinisikannya dengan cara ini:

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

Di sini, jumlah pengguna yang dikeluarkan akan dapat diedit, menggunakan bidang n dapat diedit. Perhatikan bahwa # akan diganti dengan jumlah output.

Contoh

Berikut adalah contoh yang menggunakan blocks.js:

• Arduiflow, pemrograman Arduino dengan blocks.js

Berkontribusi & peretasan

Pengembangan berlangsung di src/ Direktori. Ada Makefile menggunakan baris perintah uglifyjs untuk membuat build.

Anda dapat menggunakan index-dev.html untuk menguji blocks.js menggunakan sumbernya, dan index.html untuk mencobanya dalam mode build.

build/ direktori repositori ini tidak akan diperbarui pada setiap komit, tetapi harus berisi snapshot terbaru dari repositori.

Lisensi

Blocks.js berada di bawah lisensi MIT. Lihatlah file lisensi untuk informasi lebih lanjut.