# j-Flow > j-Flow: los identificadores no pueden contener caracteres; NUEVO onpause {String} una ruta al método fn(ruta, es), se ejecuta cuando la salida/entrada está en pausa Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: es Content-SHA256: 3687d8f07703538a1ad90e9c718c04d6d384778b124d7af4a1e04fcea29155b4 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded - los identificadores no pueden contener el carácter `__` __Configuración__: - `width {Number}` un ancho del diseñador de flujo, predeterminado: `6000` - `height {Number}` una altura del diseñador de flujo, predeterminado: `6000` - `grid {Number}` un tamaño de cuadrícula de fondo, predeterminado: `25` - `paddingX {Number}` relleno interno, predeterminado: `6` - `curvedlines {Boolean}` habilita líneas curvas, predeterminado: `false` - `infopath {String}` una ruta a la variable/método, respuesta: `{ zoom: Number, selected: Object }` - `undopath {String}` una ruta a la variable/método, la respuesta es Matriz de objetos - `redopath {String}` una ruta a la variable/método, la respuesta es Matriz de objetos - `ondrop {String}` una ruta al método `fn(dropmeta, grid)` - `onmake {String}` una ruta al método `fn(el, com)`, se ejecuta cuando se crea el componente - `ondone {String}` una ruta al método `fn(el, com)`, se ejecuta cuando se crea el componente - `onmove {String}` una ruta al método `fn(el, com/group, type)`, se ejecuta cuando el componente/grupo se está moviendo - `onremove {String}` una ruta al método `fn(el, com)`, se ejecuta cuando se elimina el componente - `onconnect {String}` una ruta al método `fn(meta)`, se ejecuta cuando los dos componentes están conectados - `ondisconnect {String}` una ruta al método `fn(meta)`, se ejecuta cuando los dos componentes están desconectados - __NEW__ `onpause {String}` una ruta al método `fn(path, is)`, se ejecuta cuando la salida/entrada está en pausa - `steplines {Boolean}` habilita líneas de pasos (predeterminado: `false`) - `animationradius {Number}` radio de animación en píxeles (predeterminado: `5`) - `contextmenu {String}` una ruta a `function(e, type, component/meta)` (el tipo puede ser `map`, `component`, `connection`, `group`) - `dblclick {String}` un camino hacia `function(component)` - `outputoffsetX {Number}` un desplazamiento X predeterminado para el punto de salida (predeterminado: `10`) - `outputoffsetY {Number}` un desplazamiento Y predeterminado para el punto de salida (predeterminado: `12`) - `inputoffsetX {Number}` un desplazamiento X predeterminado para el punto de entrada (predeterminado: `10`) - `inputoffsetY {Number}` un desplazamiento Y predeterminado para el punto de entrada (predeterminado: `12`) - `snapping {Number}` ajuste en píxeles (predeterminado: `0` = deshabilitado) - `multiple {Boolean}` permite la selección múltiple del componente (predeterminado: `true`) - `history {Number}` un recuento de pasos en el historial de deshacer/rehacer (predeterminado: `100`) - `animationlimit {Number}` un recuento máximo de puntos para todas las animaciones (predeterminado: `100`) - `animationlimitconnection {Number}` un recuento máximo de puntos por conexión (predeterminado: `5`) - `allowpause {Boolean}` permite pausar en salidas/entradas (predeterminado: `true`) - `markers {Boolean}` agrega marcadores de flecha a la conexión (predeterminado: `true`) __Comandos__: - `flow.refresh` recalcula posiciones - `flow.selected.disconnect` desconecta la conexión seleccionada - `flow.selected.remove` elimina el componente seleccionado - `flow.selected.clear` elimina el componente o la conexión seleccionados - `flow.zoom` realiza zoom, argumento: `type` (puede ser: `in`, `out`, `reset` o `percentage {Number}`), segundo argumento opcional: `percentage` - `flow.undo` realiza el paso de deshacer - `flow.redo` realiza el paso de rehacer - `flow.reset` restablece el editor - `flow.components.add` agrega un nuevo componente, argumento: `component_declaration` - `flow.components.find` encuentra un componente, argumento: `component_id` - `flow.clean` limpia datos y conexiones inexistentes - `flow.traffic(componentid__outputid, { count: 3, speed: 3, limit: 20, delay: 50, reverse: false })` carga animación - La animación `reverse` se puede habilitar agregando `_` como carácter inicial del identificador `_componentid__outputid`. - __NEW__ `flow.groups.find` encuentra un grupo, argumento: `group_id` - __NEW__ `flow.check` una nueva alternativa más rápida al comando `flow.refresh` - __NEW__ `flow.find` busca un componente o grupo, argumento: `component_id` o `group_id` __Agregar un nuevo componente__: - el componente crea automáticamente el ID del componente - `connections` es `{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 } ``` __Salida de flujo__: - devuelve `Object` cuyas claves son `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)' }, ...]; } ``` __Es bueno saberlo__: - cada componente (en el Flujo) contiene la clase `f-COMPONENTNAME` - La clase `selectable` en el elemento componente permite copiar texto y deshabilita moverlo - `connections` admite `type:"transform"` con línea discontinua Úselo con ``. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT. ```html example.html
```