j-Flow

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

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}

// 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);

// 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

{
	'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 <ui-component name="flow">. 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.

example.html

<style>
	.toolbar { margin-bottom: 10px; }
	.toolbar button { min-width: 26px; height: 24px; background-color: transparent; border: 0; font-size: 12px; color: gray; }
	.toolbar button span { margin-left: 3px; }
	.toolbar button[name="remove"] { color: red !important; }
	.toolbar button:disabled { color: #C0C0C0 !important; cursor: not-allowed; }
	.toolbar button:hover { color: black; }
	.toolbar button:first-child { border-left: 0; }
</style>

<div class="toolbar">
	<button is="is-button" path="floweditor.undo" config="enabled:value && value.length > 0;click:floweditor_undo" disabled="disabled"><i class="ti ti-undo"></i></button>
	<button is="is-button" path="floweditor.redo" config="enabled:value && value.length > 0;click:floweditor_redo" disabled="disabled"><i class="ti ti-redo"></i></button>
	<button is="is-button" path="floweditor.info.selected" config="enabled;click:floweditor_remove" name="remove" disabled="disabled"><i class="ti ti-trash"></i></button>
</div>

<ui-component name="flow" path="flowmodel" config="width:6000;height:6000;grid:26;infopath:floweditor.info;undopath:floweditor.undo;redopath:floweditor.redo"></ui-component>

<script>

	var flowmodel = {
		groups: [{ id: 'G12345', name: 'My group', x: 50, y: 50, width: 300, height: 300 }],
		'F1562743923216': { x: 100, y: 150, html: 'Component 1', outputs: ['Done', 'Error'], connections: { '0': [{ id: 'F1562743965303', index: '2', disabled: false }] }},
		'F1562743965303': { x: 500, y: 250, html: 'Component 2', inputs: ['1', '2', '3'] }
	};

	var floweditor = {};

	function floweditor_undo() {
		CMD('flow.undo');
	}

	function floweditor_redo() {
		CMD('flow.redo');
	}

	function floweditor_remove() {
		CMD('flow.selected.clear');
	}

	// Extend buttons for using Web components
	customElements.define('is-button', class extends HTMLButtonElement {
		constructor() {
			super();
			setTimeout(NEWUIBIND, 2, this);
		}
	}, { extends: 'button' });

</script>