blocks.js

blocks.js

Редактор графов DataFlow JavaScript

Blocks.js является визуальным редактором JavaScript для редактирования графа DataFlow, его можно использовать для редактирования графиков процессов.

Обратите внимание, что это всего лишь гибкий редактор фронта, здесь нет никакого оборота.

Вы можете попробовать живую демонстрацию.

Обзор

Blocks.js подается с использованием спецификаций блоков, используя мета -информацию, объясняющие ее поля, имя и поведение.

Это позволяет пользователю редактировать сцену блоков.

Затем, например, благодаря методу export() , вы можете вернуть отредактированную сцену. Когда вы загружаете блоки, вы также можете загрузить сцену.

Использование Blocks.js

Загрузка

Если вы хотите его использовать, вам придется получить код, либо клонируя этот репозиторий, либо загрузив его.

Требования

blocks.js использует:

• jQuery
• jquery-json для экспорта json
• jquery-mousewheel для прокрутки Zoom
• jquery-svg для рендеринга краев
• jQuery-FormSerialize для сериализации форм и пустынь
• jQuery-Fancybox для модальных параметров издания

Все эти требования включены в этот репозиторий. Вот почему сторонние библиотеки будут выглядеть так:

 <!-- 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 : атрибуты поля строки, могут содержать input , output и/или editable . Например: "editable input"
• type : тип поля. Смотрите набор.
• defaultValue : значение по умолчанию поля, которое будет использоваться, если оно редактируется
• hide : не отображайте редактируемое поле в информации блока
• hideLabel : не отображайте редактируемое поле для поля в информации блока
• card : кардинальность ввода/вывода. Это может быть строка, подобная "0-3" или массиву, как [0,3] , она представляет минимум и максимальные ребра, которые могут быть подключены к вводу/выводу.
• dimension : количество соединения в том же поле может зависеть от другого значения поля, размера или быть прикрепленным к статическому номеру. См. Вариадический 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

Некоторые I/ОС могут быть переменными, подумайте о блоке, который выведет N первых пользователей базы данных, вы можете определить его таким образом:

 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:

• Arduiflow, Arduino Программирование с Blocks.js

Вклад и взломать

Развитие происходит в src/ каталоге. Существует Makefile , использующий командную строку uglifyjs для создания сборки.

Вы можете использовать index-dev.html index.html тестирования блоков.

build/ каталог этого репозитория не будет обновляться на каждом коммите, но должен содержать недавний снимок репозитория.

Лицензия

Blocks.js находится под лицензией MIT. Посмотрите на файл лицензии для получения дополнительной информации.