# j-Flow > j-Flow: Bezeichner dürfen kein Zeichen enthalten; NEU onpause {String} ein Pfad zur Methode fn(path, is), sie wird ausgeführt, wenn die Ausgabe/Eingabe angehalten wird Framework: jcomponent20 Product: jComponent 20 (jcomponent@20) Language: de Content-SHA256: 091b5d17214d75aa13b7fe2b0941e59155fb2ae449b6334aa5f6482e6f18a7a3 Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e Review: not-recorded - Die Identifikatoren können nicht `__` enthalten __Konfiguration__: - `width {Number}` eine Breite von Flow Designer, Standard: `6000` - `height {Number}` eine Höhe von Flow Designer, Standard: `6000` - `grid {Number}` eine Größe des Hintergrundnetzes, Standard: `25` - `paddingX {Number}` Internal Padding, Standard: `6` - `curvedlines {Boolean}` ermöglicht kurven Linien, Standard: `false` - `infopath {String}` ein Weg zu Variablen/Methode, Antwort: `{ zoom: Number, selected: Object }` - `undopath {String}` eine Art von Variabel / Methode, die Reaktion ist Object Array - `redopath {String}` eine Art von Variabel / Methode, die Reaktion ist Object Array - `ondrop {String}` ein Pfad zur Methode `fn(dropmeta, grid)` - `onmake {String}` ist eine Methode zu `fn(el, com)`, es wird ausgeführt, wenn die Komponente erstellt - `ondone {String}` ist eine Methode zu `fn(el, com)`, es wird ausgeführt, wenn die Komponente erstellt wird - `onmove {String}` ist ein Weg zur Methode `fn(el, com/group, type)`, es wird ausgeführt, wenn die Komponente/Gruppe bewegt wird - `onremove {String}` ist eine Methode zu `fn(el, com)`, es wird ausgeführt, wenn die Komponente entfernt wird - `onconnect {String}` ist ein Weg zur Methode `fn(meta)`, es wird ausgeführt, wenn die beiden Komponenten verbunden sind - `ondisconnect {String}` ist ein Weg zur Methode `fn(meta)`, es wird ausgeführt, wenn die beiden Komponenten abgeschlossen sind - __NEW__ `onpause {String}` eine Route zum Method `fn(path, is)`, es wird ausgeführt, wenn die Ausgabe/Einnahme unterbrochen ist - `steplines {Boolean}` ermöglicht Schrittlinien (Default: `false`) - `animationradius {Number}`-Animationsradius in Pixeln (Default: `5`) - `contextmenu {String}` ist ein Weg zu `function(e, type, component/meta)` (Typ kann `map`, `component`, `connection`, `group`) sein. - `dblclick {String}` ein Pfad zu `function(component)` - `outputoffsetX {Number}` ein Standard-X-Offset für Ausgangspunkte (Default: `10`) - `outputoffsetY {Number}` eine Standard-Y-Offset für Ausgangspunkte (Default: `12`) - `inputoffsetX {Number}` ein Standard-X-Offset für Eintrittspunkte (Default: `10`) - `inputoffsetY {Number}` ein Standard-Y-Offset für Eintrittspunkt (Default: `12`) - `snapping {Number}` in Pixeln (default: `0` = abgeschaltet) - `multiple {Boolean}` ermöglicht mehrfache Auswahl der Komponente (Default: `true`) - `history {Number}` eine Anzahl von Schritten in der undo/redo Geschichte (Default: `100`) - `animationlimit {Number}` eine maximale Anzahl von Punkten für alle Animationen (Default: `100`) - `animationlimitconnection {Number}` eine maximale Anzahl von Punkten pro Verbindung (Default: `5`) - `allowpause {Boolean}` ermöglicht eine Pause auf Ausgängen/Einnahmen (Default: `true`) - `markers {Boolean}` fügt an die Verbindung Schildmarker hinzu (Default: `true`) __Befehl__: - `flow.refresh` berechnet Positionen - `flow.selected.disconnect` enthält eine ausgewählte Verbindung - `flow.selected.remove` entfernt ausgewählte Komponente - `flow.selected.clear` entfernt ausgewählte Komponente oder Verbindung - `flow.zoom` führt zum Zoom, Argument: `type` (sie können `in`, `out`, `reset` oder `percentage {Number}` sein), zweite optionale Argumente: `percentage` - `flow.undo` führt ein Schritt - `flow.redo` macht einen Schritt - `flow.reset` wiederherstellbar - `flow.components.add` fügt eine neue Komponente hinzu, Argument: `component_declaration` - `flow.components.find` findet einen Bestandteil, Argument: `component_id` - `flow.clean` reinigt Daten und nicht vorhandene Verbindungen - `flow.traffic(componentid__outputid, { count: 3, speed: 3, limit: 20, delay: 50, reverse: false })` Animation Laden - Die `reverse`-Animation kann durch die Ergänzung von `_` als Start-Chark des `_componentid__outputid` aktiviert werden. - __NEW__ `flow.groups.find` findet eine Gruppe, Argument: `group_id` - __NEW__ `flow.check` eine neue schneller Alternative zum `flow.refresh` - __NEW__ `flow.find` findet eine Komponente oder Gruppe, Argument: `component_id` oder `group_id` __Eine neue Komponente hinzufügen__: - Die Komponente erzeugt automatisch das ID der Komponente - `connections` ist `{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-Ausgabe__: - gibt `Object` zurück, welche Schlüssel `ID` der Komponenten sind ```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)' }, ...]; } ``` __Gut zu wissen__: - Jede Komponente (in der Flow) enthält eine `f-COMPONENTNAME`-Klasse - `selectable`-Klasse im Komponentenelement ermöglicht die Kopie von Text und deaktiviert Bewegung - `connections` unterstützt `type:"transform"` mit Dashed Line Verwenden Sie es mit ``. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz. ```html example.html
```