# j-Flow > j-Flow: identificatoren kunnen geen char bevatten; NEW onpause {String} een route naar de methode fn(path, is), het wordt uitgevoerd wanneer de uitgang/input is gespaard Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: nl Content-SHA256: c2bee73b3f4190c5ca5f8847b95499e2fca09fc66e3a5d35d3bc75ce058bf433 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded - Identificatoren kunnen geen `__` bevatten __Configuratie__: - `width {Number}` een breedte van Flow ontwerper, standaard: `6000` - `height {Number}` een hoogte van Flow ontwerper, standaard: `6000` - `grid {Number}` een grootte van de achtergrondnet, standaard: `25` - `paddingX {Number}` interne padding, standaard: `6` - `curvedlines {Boolean}` maakt curved lijn mogelijk, standaard: `false` - `infopath {String}` een weg naar variabele/methode, antwoord: `{ zoom: Number, selected: Object }` - `undopath {String}` een weg naar variabele/methode, de reactie is Object array - `redopath {String}` een weg naar variabele/methode, de reactie is Object array - `ondrop {String}` een weg naar de methode `fn(dropmeta, grid)` - `onmake {String}` een route naar de methode `fn(el, com)`, wordt uitgevoerd wanneer het component wordt gecreëerd - `ondone {String}` een route naar de methode `fn(el, com)`, wordt uitgevoerd wanneer het component wordt gecreëerd - `onmove {String}` is een route naar de methode `fn(el, com/group, type)`, het wordt uitgevoerd wanneer de component/groep zich verplaatst - `onremove {String}` een route naar de methode `fn(el, com)`, wordt uitgevoerd wanneer het onderdeel wordt verwijderd - `onconnect {String}` een route naar de methode `fn(meta)`, wordt uitgevoerd wanneer de twee componenten verbonden zijn - `ondisconnect {String}` is een route naar de methode `fn(meta)`, het wordt uitgevoerd wanneer de twee componenten zijn ontbindend - __NEW__ `onpause {String}` is een route naar de methode `fn(path, is)`, het wordt uitgevoerd wanneer de uitgang/input wordt gestopt - `steplines {Boolean}` maakt staplijnen mogelijk (default: `false`) - `animationradius {Number}` animatie radius in pixels (default: `5`) - `contextmenu {String}` een weg naar `function(e, type, component/meta)` (type kan zijn `map`, `component`, `connection`, `group`) - `dblclick {String}` een weg naar `function(component)` - `outputoffsetX {Number}` een standaard X offset voor uitgangspunt (de standaard: `10`) - `outputoffsetY {Number}` een standaard Y offset voor uitgangspunt (de standaard: `12`) - `inputoffsetX {Number}` een standaard X offset voor input point (default: `10`) - `inputoffsetY {Number}` een standaard Y offset voor de invoerpunten (de standaard: `12`) - `snapping {Number}` snapping in pixels (default: `0` = ingeschakeld) - `multiple {Boolean}` maakt meerdere selecties van de component mogelijk (default: `true`) - `history {Number}` een aantal stappen in de undo/redo geschiedenis (default: `100`) - `animationlimit {Number}` een maximum aantal punten voor alle animaties (default: `100`) - `animationlimitconnection {Number}` een maximum aantal punten per verbinding (default: `5`) - `allowpause {Boolean}` zorgt voor een pauze op uitgangen/inputs (default: `true`) - `markers {Boolean}` voegt de pijlmerken toe aan de verbinding (default: `true`) __Commanden__: - `flow.refresh` herbergt de posities - `flow.selected.disconnect` ontkoppelt geselecteerde verbinding - `flow.selected.remove` verwijdert de geselecteerde component - `flow.selected.clear` verwijdert geselecteerde component of verbinding - `flow.zoom` Zoom uit te voeren, argumenten: `type` (kan het zijn : `in`, `out`, `reset` Of `percentage {Number}`Een tweede optionele argument: `percentage` - `flow.undo` doet een stap - `flow.redo` doet een stap - `flow.reset` weergeven - `flow.components.add` voegt een nieuw onderdeel toe, argument: `component_declaration` - `flow.components.find` vindt een component, argument: `component_id` - `flow.clean` reinigt gegevens en niet-existent verbindingen - `flow.traffic(componentid__outputid, { count: 3, speed: 3, limit: 20, delay: 50, reverse: false })` Animatie - `reverse` animatie kan worden ingeschakeld door het toevoegen van `_` als een startcharging van de `_componentid__outputid` identificator - __NEW__ `flow.groups.find` vindt een groep, argument: `group_id` - __NEW__ `flow.check` een nieuwe sneller alternatief voor de bestelling `flow.refresh` - __NEW__ `flow.find` vindt een component of groep, argument: `component_id` of `group_id` __Een nieuwe component toevoegen__: - De component maakt automatisch een ID van de component - `connections` Het is `{Object}` ```js // Component declaration var component = { x: 100, y: 50, html: 'Component test', outputs: ['1 output name', '2 output name'], // or // outputs: [{ id: 'A', name: 'A output name' }, { id: 'B', name: 'B output name', color: '#FF8E37' }], 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); ``` ```js // 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 uitkomst__: - retourneert `Object` welke sleutels zijn `ID` van de componenten ```js { 'F1562743923216': { x: 1, y: 1, connections: [], ... }, 'F1562743965303': { x: 1, y: 1, connections: [], ... }, // Contains paused endpoints paused: { 'input__COMPONENTID__INDEXID': 1, 'output__COMPONENTID__INDEXID': 1 }, // Contains groups groups: [{ id: 'GroupID', name: 'Name', x: 100, y: 100, width: 100, height: 100, background: 'rgba(0,0,0,0.1)', color: '#000', border: 'rgba(0,0,0,0.1)' }, ...]; } ``` __Goed om te weten__: - Elke component (in de stroom) bevat een `f-COMPONENTNAME`-klasse - De `selectable`-klasse in het componentelement maakt het mogelijk om tekst te kopiëren en de beweging te ontbreken. - `connections` ondersteunt `type:"transform"` met dashed line Gebruik het met ``Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie. ```html example.html
```