Web UI component: j-Flow
j-Flow
- Works only with
+v18
- identifiers can't contain
__
char
Configuration:
width
{Number} a width of Flow designer, default:6000
height
{Number} a height of Flow designer, default:6000
grid
{Number} a size of background grid, default:25
paddingX
{Number} internal padding, default:6
curvedlines
{Boolean} enables curved lines, default:false
infopath
{String} a path to variable/method, response:{ zoom: Number, selected: Object }
undopath
{String} a path to variable/method, response is Object arrayredopath
{String} a path to variable/method, response is Object arrayondrop
{String} a path to methodfn(dropmeta, grid)
onmake
{String} a path to methodfn(el, com)
, it's executed when the component is creatingondone
{String} a path to methodfn(el, com)
, it's executed when the component is createdonmove
{String} a path to methodfn(el, com)
, it's executed when the component is movingonremove
{String} a path to methodfn(el, com)
, it's executed when the component is removedonconnect
{String} a path to methodfn(meta)
, it's executed when the two components are connectedondisconnect
{String} a path to methodfn(meta)
, it's executed when the two components are disconnectedhorizontal
{Boolean} outputs will be rendered horizontally (default:false
)steplines
{Boolean} enables step lines (default:false
)- NEW
animationradius
{Boolean} animation radius in pixels (default:6
) - NEW
contextmenu
{String} a path tofunction(e, type, component/meta)
(type can bemap
,component
orconnection
) - NEW
dblclick
{String} a path tofunction(component)
Commands:
flow.refresh
recalculates positionsflow.selected.disconnect
disconnects selected connectionflow.selected.remove
removes selected componentflow.selected.clear
removes selected component or connectionflow.zoom
performs zoom, argument:type
(can be:in
,out
,reset
)flow.undo
performs undo stepflow.redo
performs redo stepflow.reset
resets editorflow.components.add
adds a new component, argument:component_declaration
flow.components.find
finds a component, argument:component_id
flow.clean
cleans data and non-exist connections- NEW
flow.traffic(componentid__outputid, { count: 3, speed: 3, limit: 20, delay: 50 })
loads animation
Adding a new component:
- the component automatically creates ID of component
connections
is{Object}
// Component declaration
var component = {
x: 100,
y: 50,
html: 'Component test',
outputs: ['1 output name', '2 output name'],
// or
// outputs: [{ id: 'A', 'A output name' }, { id: 'B', 'B output name' }],
connections: { '0': [{ id: '0002', index: '2', disabled: false }] }, // Look to the connection object below
// or
// connections: { 'A': [{ id: '0002', index: 'B', disabled: false }] },
actions: { select: true, move: true, disabled: false, remove: true, connect: true }
};
// Appends component
CMD('flow.components.add', component);
// Connection object
// connections: { '0': [CONNECTION_OBJECT1, CONNECTION_OBJECT2, CONNECTION_OBJECT3] }
{
id: 'TARGET_ID_COMPONENT',
index: '0', // An input index or index id, must be string!!!
disabled: false // Optional, it's the connection disabled? Disabled connection can't be removed
}
Flow output:
- returns
Object
which keys areID
of components
{
'F1562743923216': { x: 1, y: 1, connections: [], ... },
'F1562743965303': { x: 1, y: 1, connections: [], ... },
// Contains paused endpoints
paused: { 'input__COMPONENTID__INDEXID': 1, 'output__COMPONENTID__INDEXID': 1 }
}
Good to know:
- each component (in the Flow) contains
f-COMPONENTNAME
class
Author
- Peter Širka petersirka@gmail.com
- License
Created
10. july 2019
Updated
05. february 2021
Version
v1
License
https://www.totaljs.com/license/
Dark mode
Yes
Responsive
Yes
Author
Peter Širka
Email
petersirka@gmail.com
