Flow-Builder-Three

Node tree builder for Apifornia project

Installation

npm install --save flow-builder-three

Usage

import FlowBuilderThree from 'flow-builder-three';

const fbt = new FlowBuilderThree(eventEmitter)
    
fbt.run().then( () => {
    fbt.node.add(nodeData);    
});

API

Основные методы

.run

.run(): Promise<any>

запустить построение сцены

Node API

Методы API, расположенные в этом разделе относятся к управлению нодами

.add

.node.add(nodeData: TNodeData, options?: {windowScreenPosition?: TPosition2D}): Promise<string>

добавить ноду на сцену

nodeData - данные ноды
options: { windowScreenPosition - (необязательное) позиция ноды в координатах страницы, это свойство перезаписывает свойство "position" в nodeData }

.remove

.node.remove(id: string): Promise<string>

удалить ноду со сцены

id - идентификатор ноды

.rename

.node.rename(id: string, name: string): Promise<string>

переименовать ноду

id - идентификатор ноды
name - новое имя ноды

.addPorts

.node.addPorts(nodeId: string, data: { direction: 'input' | 'output'; data: TPortData }[]): Promise<string>

добавить порты к ноде

nodeId - идентификатор ноды
data.direction - направление порта
data.data - данные порта

.removePorts

.node.removePorts(nodeId: string, portIds: string[]): Promise<string>

удалить порты из ноды

nodeId - идентификатор ноды
portIds - идентификаторы удаляемых портов

.changeNodeConvertStatus

.node.changeConvertStatus(id: string, newStatus: 'local' | 'master' | 'instance'): Promise<string>

измененить convertStatus ноды

id - идентификатор ноды
newStatus - новый статус

.execute

.node.execute(id: string): Promise<string>

запустить выполнение ноды

id - идентификатор ноды

.stop

.node.stop(id: string): Promise<string>

остановить выполнение ноды

id - идентификатор ноды

.setAsStart

.node.setAsStart(id: string): Promise<string>

установить ноду как стартовую

id - идентификатор ноды

.move

.node.move(nodeId: string, position: { x: number; y: number }): void

переместить ноду в пространстве

nodeId - идентификатор ноды
position.x - позиция по x
position.y - позиция по y

.collapsePorts

.node.collapsePorts(id: string): Promise<string>

свернуть все порты ноды, аналогично нажатию на треугольник в ноде

id - идентификатор ноды

.expandPorts

.node.expandPorts(id: string): Promise<string>

развернуть все порты в ноду, аналогично нажатию на треугольник в ноде

id - идентификатор ноды

.showError

.node.showError(nodeId: string, errorData: { code: string; message: string }[]): Promise<string>

показать КНОПКУ ошибки в ноде

nodeId - идентификатор ноды
errorData.code - код ошибки
errorData.message - текст ошибки

.hideError

.node.hideError(nodeId: string): Promise<string>

скрыть кнопку ошибки в ноде, само окно ошибки так же исчезает

nodeId - идентификатор ноды

.setIndicators

.node.setIndicators(data: { nodeId: string; indicator: string }[]): Promise<string>

установить новые индикаторы для нод

data.nodeId - идентификатор ноды
data.indicator - новый индикатор ноды

.setPortsIndexes

.node.setPortsIndexes(data: { nodeId: string; data: { portId: string; index: number }[] }[]): Promise<string>

установить порядковые номера для портов нод

data.nodeId - идентификатор ноды
data.data.portId - идентификатор порта
data.data.index - порядковый номер

Connection API

Методы API, расположенные в этом разделе относятся управлению сединениями между нодами

.add

.connection.add(linePath: TLinePath): Promise<string>

соединенить ноды линией

linePath - объект, описывающий откуда и куда идёт соединение

.remove

.connection.remove(linePath: TLinePath): Promise<string>

удалить содинение между нодами

linePath - объект описывающий откуда и куда идёт соединение

.showMarkerIndicator

включить индикатор маркера линии

.connection.showMarkerIndicator(linePath: TLinePath): Promise<string>

linePath - объект описывающий откуда и куда идёт соединение

.hideMarkerIndicator

выключить индикатор маркера линии

.connection.hideMarkerIndicator(linePath: TLinePath): Promise<string>

linePath - объект описывающий откуда и куда идёт соединение

Scene API

Методы API, расположенные в этом разделе относятся к управлению сценой.

.moveCameraToNode

.scene.moveCameraToNode(id: string): Promise<string>

переместить камеру к указанной ноде

id - идентификатор ноды

.resetAll

.scene.resetAll(): Promise<string>

сбросить всю сцену. Ноды, соединения и т.д. удаляются, камера встаёт в первоначальное положение

.resetCamera

.scene.resetCamera(): Promise<string>

сбросить сбросить настройки камеры.

.cameraToCenter

.scene.cameraToCenter(): Promise<string>

центрировать камеру

.zoomIn

.scene.zoomIn(value?: number | 'max'): Promise<string>

приблизить камеру

value - любое положительное число или 'max'(максимальное приближение), если значение отсутствует, то шаг приближения равен 1

.zoomOut

.scene.zoomOut(value?: number | 'max'): Promise<string>

отдалить камеру

value - любое положительное число или 'max'(максимальное отдаление), если значение отсутствует, то шаг отдаления равен 1

Alien API (Методы коллаборации)

Методы API, расположенные в этом разделе относятся к подключаемым пользователям.

.add

.alien.add(data: TAlienData): Promise<string>

зарегистрировать нового пользователя для коллаборационного взаимодействия

data - данные пользователя

.remove

.alien.remove(alienId: string): Promise<string>

удалить подключенного пользователя

alienId - идентификатор пользователя

.movePointer

.alien.movePointer(alienId: string, position: { x: number; y: number }): void

переместить курсор подключенного пользователя в сцене

alienId - идентификатор пользователя
position.x - позиция по x
position.y - позиция по y

.selectNodes

.alien.selectNodes(alienId: string, nodeIds: string[]): Promise<string>

выделить ноду пользователем

alienId - идентификатор пользователя
nodeIds - список идентификаторов нод, которые надо выделить

.deselectNodes

.alien.deselectNodes(alienId: string, nodeIds: string[]): Promise<string>

снять выделение с ноды, выделенной ранее подключаемым пользователем

alienId - идентификатор пользователя
nodeIds - список идентификаторов нод, с которых надо снять выделение

.selectLines

.alien.selectLines(alienId: string, lineIds: string[]): Promise<string>

выделить линию подключаемым пользователем

alienId - идентификатор пользователя
lineIds - список идентификаторов линий, которые нужно выделить

.alien.deselectLines

.alien.deselectLines(alienId: string, lineIds: string[]): Promise<string>

снять выделение линии, выделенной ранее подключаемым пользователем

alienId - идентификатор пользователя
lineIds - список идентификаторов линий, которые нужно удалить

EventEmitter

События генерируемые EventEmitter'ом.

const fbt = new FlowBuilderThree(eventEmitter)

eventEmitter.emit('addConnection', data);

Node events

nodeSelect

.emit('nodeSelect', data: TNodeData)

нода выделена

data - данные ноды

nodeMultipleSelect

.emit('nodeMultipleSelect', data: TNodeData[])

нода(одна или несколько) выделены мультиселектом

data - массив данных ноды

nodeDeselect

.emit('nodeDeselect', data: TNodeData[])

снятие выделения с нод, выделенных текущим юзером

data - массив данных ноды

nodeMove

.emit('nodeMove', data: TNodeData)

нода перемещена, срабатывает по окончании перемещения

data - данные ноды

nodeRemove

.emit('nodeRemove', data: TNodeData)

нода удалена

data - данные ноды

nodeExecute

.emit('nodeExecute', data: TNodeData)

нода запущена

data - данные ноды

nodeRename

.emit('nodeRename', data: TNodeData)

нода переименована

data - данные ноды

openNodeCredentials

.emit('openNodeCredentials', data: TNodeData)

нажата кнопка меню ноды Credentials

data - данные ноды

changeStartNode

.emit('changeStartNode', data: TNodeData)

нода установлена как стартовая

data - данные ноды, которая стала стартовой

groupNodes

.emit('groupNodes', ids: string[])

активирован хоткей(CTRL+G/CMD+G) группировки нод

ids - список идентификаторов выделенных нод, подлежащих группировке

jumpInsideNode

.emit('jumpInsideNode', data: { nodeId: string })

активирован двойной клик по ноде

data.nodeId - идентификатор ноды, на которой вызвано событие двойного клика

Line Events

события относящиеся к линиям

addConnection

.emit('addConnection', data: TLineEmitData)

добавлено соединение

data - данные о соединениях линии

removeConnection

.emit('removeConnection', data: TLineEmitData)

удалено соединение

data - данные о соединении линии

lineSelect

.emit('linesSelect', data: TLineEmitData)

линия выделена

data - данные о соединении линии

lineMultipleSelect

.emit('lineMultipleSelect', data: TLineEmitData[])

линия выделена c помощью области выделения

data - массив данных о соединении линии

lineDeselect

.emit('lineDeselect', data: TLineEmitData[])

выделение с линии снято

data - массив данных о соединении линии

WatchPoint Events

события относящиеся к вотчпоинту

watchPointSelect

.emit('watchPointSelect', data: TWatchPointEmitData)

вотчпоинт выделен

data - данные генерируемые для событий вотчпоинта

watchPointDeselect

.emit('watchPointDeselect', data: TWatchPointEmitData)

выделение снято с вотчпоинта

data - данные генерируемые для событий вотчпоинта

watchPointMove

.emit('watchPointMove', data: TWatchPointEmitData)

вотчпоинт сдвинут, событие срабатывается по окончании перемещения

data - данные генерируемые для событий вотчпоинта

watchPointShow

.emit('watchPointShow', data: TWatchPointEmitData)

вотчпоинт отображается на экране

data - данные генерируемые для событий вотчпоинта

watchPointHide

.emit('watchPointHide', data: TWatchPointEmitData)

вотчпоинт скрыт

data - данные генерируемые для событий вотчпоинта

watchPointResize

.emit('watchPointResize', data: TWatchPointEmitData)

размер вотчпоинта был изменён, вызывается по окончании изменения

data - данные генерируемые для событий вотчпоинта

watchPointCopyButton

.emit('watchPointCopyButton', data: TWatchPointEmitData)

кнопка Copy была нажата

data - данные генерируемые для событий вотчпоинта

watchPointSaveButton

.emit('watchPointSaveButton', data: TWatchPointEmitData)

кнопка Save была нажата

data - данные генерируемые для событий вотчпоинта

Events for Aliens

pointerMove

.emit('pointerMove', data: { position: { x: number, y: number } })

отправка положения курсора текущего юзера

data.position - позиция курсора в координатах сцены

Other Events

undo

.emit('undo')

срабатывает при нажатии пользователем CTRL+Z/CMD-Z

redo

.emit('redo')

срабатывает при нажатии пользователем CTRL+SHIFT+Z/CMD+SHIFT+Z

Data Types

TPosition2D

type TPosition2D {
    x: number;
    y: number;
}

TNodeData

данные ноды

interface TNodeData {
    id: string;                         //идентификатор ноды
    staticUid: string;                  //постоянный идентификатор ноды
    name: string;                       //имя ноды
    indicator: string;                  //индикатор ноды
    isStartNode: boolean;               //флаг устанавливает ноду как стартовую
    logo: {                     
        url: string;                    //ссылка на изображение
    };                      
    tagline: string;                    //слоган
    inputs: TPortData[];                //список входных портов
    outputs: TPortData[];               //список выходных портов
    position: {                         //положение ноды в пространстве
        x: number;                      
        y: number;              
    };
    width: number | null;               //ширина ноды в условных единицах сцены
    isPortsCollapsed: boolean;          //флаг сворачивания всех портов
    isInputPortsCollapsed: boolean;     //флаг сворачивания входных портов
    isOutputPortsCollapsed: boolean;    //флаг сворачивания выходных портов
    isSelected: boolean;                //флаг выделенности ноды
}

TLinePath

путь линии, описание того откуда и куда должна идти линия

interface TLinePath {
    output: {                   //откуда начинается соединение            
        nodeStaticUid: string;  //статический идентификатор ноды 
        portId: string          //идентификатор порта
    };
    input: {                    //куда идёт соединение       
        nodeStaticUid: string;  //статический идентификатор ноды 
        portId: string          //идентификатор порта
    };              
}

TPortData

данные порта

interface TPortData {
    id: string;                 //идентификатор порта
    index: number;              //порядковый номер порта для сортировки портов внутри ноды
    name: string;               //имя порта
    type: TFlowDataTypes;       //тип получаемой/передаваемой информации через порт
}

TFlowDataTypes

типы данных передаваемых через порты

type TFlowDataTypes = 'null' | 'boolean' | 'number' | 'string' | 'image' | 'images' | 'table' | 'json';

TAlienData

данные подключеного пользователя

type TAlienData = {
    id: string;         //идентификатор пользователя
    color: string;      //цвет пользователя в формате '#FF0000'
    name: string;       //имя пользователя
};

TWatchPointEmitData

Данные вотчпоинта передаваемые эмиттером при возникновении различных событий

type WatchPointEmitData = {
    nodeOut: TNodeData;     //данные исходящей ноды
    nodeIn: TNodeData;      //данные входящей ноды      
    portOut: TPortData;     //данные исходящего порта
    portIn: TPortData;      //данные входящего порта
    selected: boolean;      //флаг выбран ли вотчпоинт
    visible: boolean;       //видимость вотчпоинта
    width: number;          //ширина вотчпоинта
    height: number;         //высота вотчпоинта
    position: {             //позиция вотчпоинта в координатах сцены
        x: number;                         
        y: number;                      
    };
    data: TFlowData;        //данные передаваемые через соединение
};

TLineEmitData

Данные соединения линии

type TLineEmitData = {
    nodeOut: TNodeData;     //данные ноды из которой идёт соединение
    nodeIn: TNodeData;      //данные ноды в которую идёт соединение
    portOut: TPortData;     //данные порта из которого идёт соединение
    portIn: TPortData;      //данные порта в который идёт соединение
};

TFlowData

данные передаваемые через соединение

type TFlowData =
    | TFlowRaw
    | TFlowSignal
    | TFlowNull
    | TFlowBoolean
    | TFlowNumber
    | TFlowString
    | TFlowImage
    | TFlowImages
    | TFlowTable
    | TFlowJSON

TFlowRaw

Данные передаваемые через порт типа Raw

interface TFlowRaw {
    type: 'raw';
    data: string;
    isOverride: boolean;
}

TFlowSignal

Данные передаваемые через порт типа SIGNAL

interface TFlowSignal {
    type: 'signal';
    data: string;
}

TFlowNull

Данные передаваемые через порт типа NULL

interface TFlowNull {
    type: 'null';
    data: string;
    isOverride: boolean;
}

TFlowBoolean

Данные передаваемые через порт типа BOOLEAN

interface TFlowBoolean {
    type: 'boolean';
    data: 'true' | 'false';
    isOverride: boolean;
}

TFlowNumber

Данные передаваемые через порт типа NUMBER

interface TFlowNumber {
    type: 'number';
    data: string;
    isOverride: boolean;
}

TFlowString

Данные передаваемые через порт типа STRING

interface TFlowString {
    type: 'string';
    data: string;
    isOverride: boolean;
}

TFlowImage

Данные передаваемые через порт типа IMAGE

interface TFlowImage {
    type: 'image';
    data: string;
    isOverride: boolean;
}

TFlowImages

Данные передаваемые через порт типа IMAGES

interface TFlowImages {
    type: 'images';
    data: { id: string; url: string }[];
    isOverride: boolean;
}

TFlowTable

Данные передаваемые через порт типа TABLE

interface TFlowTable {
    type: 'table';
    data: { [key: string]: string }[];
    isOverride: boolean;
}

TFlowJSON

Данные передаваемые через порт типа JSON

interface TFlowJSON {
    type: 'json';
    fileName: string;
    data: string;
    isOverride: boolean;
}