# j-Flow > j-Flow: os identificadores não podem conter char; NEW onpause {String} um caminho para o método fn(path, é), ele é executado quando a saída / entrada é interrompida Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: pt Content-SHA256: 5f4864f416559f365ca05421e40fc9db67b2473bcb13a6debe0c9ecbd827dd4b Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded - Os identificadores não podem conter `__` __Configuração__: - `width {Number}` uma largura de Flow designer, padrão: `6000` - `height {Number}` uma altura de Flow designer, padrão: `6000` - `grid {Number}` um tamanho da rede de fundo, padrão: `25` - Padrão interno `paddingX {Number}`, padrão: `6` - `curvedlines {Boolean}` permite linhas curvas, padrão: `false` - `infopath {String}` um caminho para variável/metodo, resposta: `{ zoom: Number, selected: Object }` - `undopath {String}` um caminho para variável/metodo, a resposta é Objet Array - `redopath {String}` um caminho para variável/metodo, a resposta é Objet Array - `ondrop {String}` um caminho para o método `fn(dropmeta, grid)` - `onmake {String}` um caminho para o método `fn(el, com)`, é executado quando o componente é criado - `ondone {String}` um caminho para o método `fn(el, com)`, é executado quando o componente é criado - `onmove {String}` um caminho para o método `fn(el, com/group, type)`, é executado quando o componente/grupo está em movimento - `onremove {String}` um caminho para o método `fn(el, com)`, é executado quando o componente é removido - `onconnect {String}` um caminho para o método `fn(meta)`, é executado quando os dois componentes são conectados - `ondisconnect {String}` um caminho para o método `fn(meta)`, é executado quando os dois componentes são desconectados - __NEW__ `onpause {String}` um caminho para o método `fn(path, is)`, ele é executado quando a saída / entrada é interrompida - `steplines {Boolean}` permite linhas de passo (default: `false`) - Rádio de animação `animationradius {Number}` em pixels (default: `5`) - `contextmenu {String}` um caminho para `function(e, type, component/meta)` (o tipo pode ser `map`, `component`, `connection`, `group`) - `dblclick {String}` um caminho para `function(component)` - `outputoffsetX {Number}` uma despensa X padrão para o ponto de saída (default: `10`) - `outputoffsetY {Number}` uma despensa Y padrão para o ponto de saída (default: `12`) - `inputoffsetX {Number}` um desempenho X padrão para o ponto de entrada (default: `10`) - `inputoffsetY {Number}` uma despensa Y padrão para o ponto de entrada (default: `12`) - `snapping {Number}` em pixels (default: `0` = desativado) - `multiple {Boolean}` permite a seleção múltipla do componente (default: `true`) - `history {Number}` um número de passos na história de undo/redo (default: `100`) - `animationlimit {Number}` - Número máximo de pontos para todas as animações (default: `100`) - `animationlimitconnection {Number}` - Número máximo de pontos por conexão (default: `5`) - `allowpause {Boolean}` permite a pausa nas saídas / entradas (default: `true`) - `markers {Boolean}` adiciona marcadores de fogo à conexão (default: `true`) __Comando__: - `flow.refresh` recalculam as posições - `flow.selected.disconnect` Desconecta a conexão selecionada - `flow.selected.remove` remove o componente selecionado - `flow.selected.clear` remove o componente selecionado ou a conexão - `flow.zoom` Exercício do zoom, argumento: `type` (O que pode ser: `in`, `out`, `reset` ou `percentage {Number}`2) O segundo argumento opcional: `percentage` - `flow.undo` faz um passo - `flow.redo` faz o passo - `flow.reset` é um editor - `flow.components.add` adiciona um novo componente, argumento: `component_declaration` - `flow.components.find` encontra um componente, argumento: `component_id` - `flow.clean` limpa dados e conexões não existentes - `flow.traffic(componentid__outputid, { count: 3, speed: 3, limit: 20, delay: 50, reverse: false })` carrega animação - A animação `reverse` pode ser ativada adicionando o `_` como um carrinho de início do identificador `_componentid__outputid`. - __NEW__ `flow.groups.find` encontra um grupo, argumento: `group_id` - __NEW__ `flow.check` uma nova alternativa mais rápida ao comando `flow.refresh` - __NEW__ `flow.find` encontra um componente ou grupo, argumento: `component_id` ou `group_id` __Adicionar um novo componente__: - O componente cria automaticamente o ID do 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 } ``` __Fluxo de saída__: - Retornar `Object` que chaves são `ID` de componentes ```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)' }, ...]; } ``` __Bom para saber__: - Cada componente (no fluxo) contém uma classe de `f-COMPONENTNAME` - A classe `selectable` no elemento componente permite copiar texto e desabilitar o movimento - `connections` suporta o `type:"transform"` com linha Use-o com ``Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço `DEF.fallback` (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT. ```html example.html
```