# j-Flow > j-Flow: gli identificatori non possono contenere il carico; NEW onpause {String} un percorso al metodo fn(path, è), viene eseguito quando la produzione/importazione è interrotta Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: it Content-SHA256: 89fd1758b031fbfeb08b6cdcca46d992026402def9975ced483ce5851a41d9db Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded - I dati non possono contenere il carico `__` __Configurazione__: - `width {Number}` una larghezza di Flow designer, predefinito: `6000` - `height {Number}` una altezza di Flow designer, standard: `6000` - `grid {Number}` una griglia di sfondo, standard: `25` - `paddingX {Number}` Pattinaggio interno, default: `6` - `curvedlines {Boolean}` permette linee curve, standard: `false` - `infopath {String}` un percorso a variabile/metodo, risposta: `{ zoom: Number, selected: Object }` - `undopath {String}` un percorso per variabile/metodo, la risposta è l'area degli oggetti - `redopath {String}` un percorso per variabile/metodo, la risposta è l'area degli oggetti - `ondrop {String}` un percorso verso il metodo `fn(dropmeta, grid)` - `onmake {String}` un percorso al metodo `fn(el, com)`, viene eseguito quando il componente è creato - `ondone {String}` un percorso al metodo `fn(el, com)`, viene eseguito quando il componente è creato - `onmove {String}` un percorso al metodo `fn(el, com/group, type)`, viene eseguito quando il componente/gruppo si muove - `onremove {String}` un percorso al metodo `fn(el, com)`, viene eseguito quando il componente è rimosso - `onconnect {String}` un percorso al metodo `fn(meta)`, viene eseguito quando i due componenti sono collegati - `ondisconnect {String}` un percorso al metodo `fn(meta)`, viene eseguito quando i due componenti sono disconnessi - __NEW__ `onpause {String}` un percorso al metodo `fn(path, is)`, viene eseguito quando la produzione/ingresso è interrotta - `steplines {Boolean}` consente linee di passo (default: `false`) - Il raggio di animazione `animationradius {Number}` in pixel (default: `5`) - `contextmenu {String}` un percorso a `function(e, type, component/meta)` (il tipo può essere `map`, `component`, `connection`, `group`) - `dblclick {String}` un percorso a `function(component)` - `outputoffsetX {Number}` un offset X predefinito per il punto di uscita (predefinita: `10`) - `outputoffsetY {Number}` un offset Y predefinito per il punto di uscita (predefinita: `12`) - `inputoffsetX {Number}` un offset X predefinito per il punto di input (predefinita: `10`) - `inputoffsetY {Number}` un offset Y predefinito per il punto di input (predefinita: `12`) - `snapping {Number}` in pixel (default: `0` = disattivato) - `multiple {Boolean}` permette la selezione multipla del componente (default: `true`) - `history {Number}` un numero di passaggi nella storia undo/redo (default: `100`) - `animationlimit {Number}` un numero massimo di punti per tutte le animazioni (default: `100`) - `animationlimitconnection {Number}` un numero massimo di punti per connessione (default: `5`) - `allowpause {Boolean}` consente la pausa sulle uscite/ingresso (default: `true`) - `markers {Boolean}` aggiunge i segnalatori di freccia alla connessione (default: `true`) __Comando__: - `flow.refresh` ricarica le posizioni - `flow.selected.disconnect` disconnette la connessione selezionata - `flow.selected.remove` rimuove il componente selezionato - `flow.selected.clear` rimuove il componente o la connessione selezionata - `flow.zoom` Il zoom è un argomento: `type` ( può essere: `in`, `out`, `reset` o `percentage {Number}`Il secondo argomento opzionale: `percentage` - `flow.undo` è un passo - Il `flow.redo` è pronto a fare il passo - `flow.reset` riproduzione - `flow.components.add` aggiunge un nuovo componente, argomento: `component_declaration` - `flow.components.find` trova un componente, argomento: `component_id` - `flow.clean` pulisce i dati e le connessioni non esistenti - `flow.traffic(componentid__outputid, { count: 3, speed: 3, limit: 20, delay: 50, reverse: false })` carica animazione - L'animazione `reverse` può essere abilitata aggiungendo `_` come carico di avvio dell'identificatore `_componentid__outputid` - __NEW__ `flow.groups.find` trova un gruppo, argomento: `group_id` - __NEW__ `flow.check` una nuova alternativa più veloce al comando `flow.refresh` - __NEW__ `flow.find` trova un componente o gruppo, argomento: `component_id` o `group_id` __Aggiungi un nuovo componente__: - Il componente crea automaticamente l'ID del componente - `connections` è `{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 } ``` __Il flusso di produzione__: - ritorna `Object` che le chiavi sono `ID` dei componenti ```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)' }, ...]; } ``` __Buono sapere__: - Ogni componente (in flusso) contiene la classe `f-COMPONENTNAME` - La classe `selectable` nel componente consente di copiare il testo e disabilitare la circolazione - `connections` supporta il `type:"transform"` con la linea Utilizzare con ``Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT. ```html example.html
```