# j-Flow > j-Flow: identyfikatorzy nie mogą zawierać ładunku; NOWY na przerwę {String} ścieżka do metody fn(poczynek, jest), wykonuje się, gdy wyjście / wejście jest przerwane Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: pl Content-SHA256: 2f09a7fa9d2d3c60caf16e8dcf11e403afe7fd8d02afcbb2b16527e14c42b097 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded - - identyfikator nie może zawierać `__` __Konfiguracja__: - `width {Number}` szerokość Flow Designer, domyślnie: `6000` - `height {Number}` wysokość Flow Designer, standard: `6000` - `grid {Number}` wielkość sieci tła, domyślnie: `25` - Wstępne podkładki `paddingX {Number}`: `6` - `curvedlines {Boolean}` umożliwia zakrzywione linie, standardowe: `false` - `infopath {String}` - ścieżka do zmiennej / metody, odpowiedź: `{ zoom: Number, selected: Object }` - `undopath {String}` - ścieżka do zmiennej / metody, odpowiedź jest obiektem - `redopath {String}` - ścieżka do zmiennej / metody, odpowiedź jest obiektem - `ondrop {String}` Droga do metody `fn(dropmeta, grid)` - Ścieżka `onmake {String}` do metody `fn(el, com)`, wykonuje się, gdy składnik jest tworzony - Ścieżka `ondone {String}` do metody `fn(el, com)`, wykonuje się, gdy składnik jest utworzony - Ścieżka `onmove {String}` do metody `fn(el, com/group, type)`, jest wykonywana, gdy składnik/grupa się porusza - Ścieżka `onremove {String}` do metody `fn(el, com)`, wykonuje się, gdy składnik jest usunięty - Ścieżka `onconnect {String}` do metody `fn(meta)`, jest wykonywana, gdy dwa komponenty są połączone - Ścieżka `ondisconnect {String}` do metody `fn(meta)`, jest wykonywana, gdy dwa elementy są odłączone - __NEW__ `onpause {String}` jest ścieżką do metody `fn(path, is)`, wykonuje się, gdy wyjście / wejście jest przerwane - `steplines {Boolean}` umożliwia linie krokowe (default: `false`) - Promień animacji `animationradius {Number}` w pikselach (default: `5`) - `contextmenu {String}` jest drogą do `function(e, type, component/meta)` (typ może być `map`, `component`, `connection`, `group`) - `dblclick {String}` - droga do `function(component)` - `outputoffsetX {Number}` zwykła opcja X dla punktu wyjścia (zwykła: `10`) - `outputoffsetY {Number}` zwrotny Y dla punktu wyjścia (zwrotny: `12`) - `inputoffsetX {Number}` jest zwykłym opłatą X dla punktu wejściowego (zwykły: `10`) - `inputoffsetY {Number}` zwrotny Y dla punktu wejściowego (zwrotny: `12`) - `snapping {Number}` w pikselach (default: `0` = wyłączony) - `multiple {Boolean}` umożliwia wielokrotne wybieranie składnika (default: `true`) - `history {Number}` liczba kroków w historii undo/redo (default: `100`) - `animationlimit {Number}` maksymalna liczba punktów dla wszystkich animacji (default: `100`) - `animationlimitconnection {Number}` maksymalna liczba punktów na połączenie (default: `5`) - `allowpause {Boolean}` umożliwia przerwę na wyjściach / wejściach (default: `true`) - `markers {Boolean}` dodaje wskaźniki strzał do połączenia (default: `true`) __polecenia__: - `flow.refresh` oblicza pozycje - `flow.selected.disconnect` odłącza wybrane połączenia - `flow.selected.remove` usuwa wybrane elementy - `flow.selected.clear` usuwa wybrany składnik lub połączenie - `flow.zoom` Zaczyna się od zoomu, argument: `type` (może być to: `in`, `out`, `reset` lub `percentage {Number}`Drugi argument opcjonalny: `percentage` - `flow.undo` wykonuje krok - `flow.redo` wykonuje gotowy krok - `flow.reset` edytor - `flow.components.add` dodaje nowy składnik, argument: `component_declaration` - `flow.components.find` znajduje składnik, argument: `component_id` - `flow.clean` oczyszcza dane i nieistniejące połączenia - `flow.traffic(componentid__outputid, { count: 3, speed: 3, limit: 20, delay: 50, reverse: false })` animacja - Animacja `reverse` może zostać uwzględniona poprzez dodanie `_` jako początek identyfikatoru `_componentid__outputid`. - __NEW__ `flow.groups.find` znajduje grupę, argument: `group_id` - __NEW__ `flow.check` nową szybszą alternatywę dla polecenia `flow.refresh` - __NEW__ `flow.find` znajduje składnik lub grupę, argument: `component_id` lub `group_id` __Dodaj nowy składnik__: - Komponent automatycznie tworzy identyfikator komponentu - `connections` Jest `{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 } ``` __Wydajność przepływu__: - Powrót `Object`, które klucze są `ID` składników ```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)' }, ...]; } ``` __Dobrze wiedzieć__: - Każdy składnik (w przepływie) zawiera klasę `f-COMPONENTNAME` - Klasa `selectable` w elementie komponentu umożliwia kopiowanie tekstu i zakłóca ruch - `connections` obsługuje `type:"transform"` z linią Użyj go z ``Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu `DEF.fallback` (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja MIT. ```html example.html
```