<< Click to Display Table of Contents >> Navigation: Konfigurierung Webinterface > Individuelles Maskenlayout > Elemente im individuellen Maskenlayout > Element "Diagramm" |
Dieses Element ist ein benutzerdefinierter (über Javascript) gerichteter Graph.
Beispiel:
var RU=rimacon._userform, RUC=rimacon._userform._customer;
var ndAdmin = RU.CIDiagram1.addNode("ndAdmin", false, "ANW", 5, "Admin", 100, 100); var ndHH = RU.CIDiagram1.addNode("ndHH", false, "STO", 12, "Hamburg", 400, 100); var ndSR001 = RU.CIDiagram1.addNode("ndSR001", false, "HWM", 7, "SR001", 400, 250);
var line1 = RU.CIDiagram1.addLineWithRelation( ndAdmin, // ndFrom ndHH, // ndTo null, // LineStyle { descr:"sitzt in", relationTable:"VTAB_ANWSTO", relationSourceId:5678} );
var line2a = RU.CIDiagram1.addLineWithRelation( ndAdmin, ndSR001, { lineColor:"green" }, { descr:"administriert", relationTable:"VTAB_ANWHWM", relationSourceId:1234} );
var line2b = RU.CIDiagram1.addLineWithRelation( ndSR001, ndAdmin, { lineColor:"blue" }, // !!! ignoriert !!! { descr:"wird administriert", relationTable:"VTAB_ANWHWM", relationSourceId:1234} );
console.log("line2a === line2b", line2a === line2b); // "true"
RU.CIDiagram1.recalcLinesPos(); |
Ergebnis
Bestandteile
Knoten (in JS „Node“ oder „CINode“)
Im obigen Beispiel sind es „Admin“, „Hamburg“ und „SR001“.
Ein Knoten kann auch „in der Luft“ hängen, d.h. ohne Verknüpfung mit anderen Knoten.
Siehe „Klasse CINode”.
Linie (in JS „Line“)
Verknüpft zwei Knoten. Es können eine Richtung (1 Pfeil) oder beide Richtungen (2 Pfeile) angezeigt werden. Erstellt wird dies über die Funktion addLineWithRelation.
Hinweis: Wenn eine Linie für Knoten A🡪B erstellt wird und nachträglich für B🡪A, wird bei „B🡪A” die Linie aus “A🡪B” genutzt. Im obigen Beispiel sind es „line2a“ und „line2b“ – beide sind dieselben Objekte.
Siehe „Klasse Line”.
Liniebeschreibung (in JS „Relation“ oder „RelationInfo“)
Beschreibt die Linie, bzw. die Beziehung. Eine Linie kan mehrere Beschreibungen haben, die mit Symbol „|“ gestrennt werden.
Hinweis: Bei mehreren Beschreibungen, die nicht für die gleiche Richtung gelten, wird automatisch einen kleinen Pfeil (🡪,ß) angezeigt, damit es klar ist, für welche Richtung die Beschreibung gilt. Im obigen Beispiel siehe „administriert🡪“ und „ßwird administriert“.
Siehe „Struktur LineStyle” und “Struktur RelationInfo”.
Attribute
links, oben, Breite, Höhe
Position und Größe
visible
Legt fest, ob das Element nach Initiierung der Maske angezeigt wird.
AutoMoveAndResize
Rahmen
siehe auch Hintergrund und Rahmen
Funktionen
addLineWithRelation(ndFrom: CINode, ndTo: CINode, lineStyle: LineStyle, relationInfo: RelationInfo)
Hier können zwei Szenare passieren:
Szenar1 – die zwei Knoten sind noch nicht verknüpft: Es wird eine neue Linie mit Style und Beschreibung erstellt.
Szenar2 – die zwei Knoten sind schon verknüpft: Die bestehende Linie wird um Beschreibung erweitert. Parameter „lineStyle“ wird ignoriert (im obigen Beispiel siehe „line2b - lineColor blue“)
Bei mehreren Aufrufen von addLineWithRelation – rufen Sie zum Schluss die Funktion recalcLinesPos.
Rückgabewert: Linie, siehe „Klasse Line“.
addNode(nodekey: string, is_group: boolean, table: string, objid: number, htmlContent: string, X: number, Y: number)
Fügt einen neuen Knoten hinzu. Parameter „is_group“ ist für internale Fälle, setzen Sie es an „false“.
Rückgabewert: Knoten, siehe „Klasse CINode“.
clear()
Löscht alles.
findFirstNode(table: string, objid: number)
Findet den ersten Knoten nach den Attributen “table” und “objid”.
Rückgabewert: Knoten, siehe „Klasse CINode“.
getAllNodes()
Gibt alle Knoten als Array zurück:
Rückgabewert: Array von Knoten, siehe „Klasse CINode“.
getLineByIndex(index)
Gibt die Linie nach Index zurück.
Rückgabewert: Linie, siehe „Klasse Line“.
getLinesCount()
Gibt die Anzahl der Linien zurück.
getNodeByIndex(nodeIndex:number)
Gibt den Knoten nach Index zurück.
Rückgabewert: Knoten, siehe „Klasse CINode“.
getNodeIndex(nd:CINode)
Gibt Index/Reihenfolge der Knoten nach Objekt zurück. Wenn nichts gefunden wird, wird -1 zurückgegeben.
getNodesCount()
Gibt die Anzahl der Knoten zurück.
hideAllDescriptions(hide: boolean)
Wenn hide=true, werden alle Linienbeschreibungen versteckt.
Wenn hide=false, werden nur Linienbeschreibungen mit Attribut hideDescr=true (default Wert) angezeigt.
Zweck dieser Funktion ist ganz easy alle Liniebeschreibungen per Befehl verstecken oder zeigen, wobei die explicit versteckte Beschreibungen (Attribut hideDescr=true) bleiben immer versteckt.
recalcLayout(ci_w?: number, ci_h?: number)
Berechnet die Positionen von einzelnen Elementen neu.
recalcLinesPos()
Berechnet die Position von allen Linien neu.
Rufen Sie diese Funktion nach letztem addLineWithRelation.
remeasureContentSize()
Berechnet Inhalare des Knotes neu.
removeNode(nd:CINode)
Löscht den Knoten.
Ereignisse
onNodeClick
Definiert die entsprechende Aktion. Zur Verfügung steht Kontextvariable "ctx" mit zwei Attributen:
event: HTML MouseEvent
node: siehe “Klasse CINode”
onNodeMouseEnter, onNodeMouseLeave
Entsprichen den DOM-Erergnissen “mouseenter”, “mouseleave”.
Zur Verfügung steht Kontextvariable ctx mit zwei Attributen:
event: HTML MouseEvent
node: siehe “Klasse CINode”
onLineClick
Definiert die entsprechende Aktion. Zur Verfügung steht Kontextvariable ctx mit zwei Attributen:
event: HTML MouseEvent
line: siehe “Klasse Line”
onLineDescrClick
Definiert die entsprechende Aktion. Zur Verfügung steht Kontextvariable ctx mit drei Attributen:
event: HTML MouseEvent
line: siehe “Klasse Line”
relationInfo: siehe “Struktur RelationInfo”
onLineDescrMouseEnter, onLineDescrMouseLeave
Entsprichen den DOM-Erergnissen “mouseenter”, “mouseleave”. Zur Verfügung steht Kontextvariable ctx mit drei Attributen:
event: HTML MouseEvent
line: siehe “Klasse Line”
relationInfo: siehe “Struktur RelationInfo”
Klasse CINode
Attribut table, objid
Tabelle und Primärschlüssel-ID des Objektes. Diese Attribute sind nicht verpflichtend, da aber das Diagramm meistens für Objekte genutzt wird, stehen diese Attribute direkt zur Verfügung.
Funktion getContentContainer()
DOM-Objekt, welches Inhalt des Knotes hält. Aber nur Inhalt, nicht den Rest (Rahmen&co).
Funktion getIsArrangable()
Gibt true zurück, wenn während der automatischen Anordnung die Position geändert darf (durch den Alghoritmus).
Funktion getVisible()
Gibt zurück, ob der Knoten angezeigt wird.
Funktion getX(), getY()
Gibt die X und Y Position. Die Position ist von Zoom unabhängig.
Funktion setCustomBorderColor(clrOrEmpty:string)
Setzt benutzerdefinierte Farbe für den Rahmen. Wenn leer, wird die Standardfarbe genutzt.
Funktion setHtmlContent(html:string)
Legt den Inhalt als HTML fest.
Funktion setIsArrangable(B:boolean)
Legt fest, ob bei der automatischen Anordnung die Position geändert darf (durch den Alghoritmus).
Funktion setPos(log_x:number, log_y:number)
Legt die Position fest.
Funktion setTextContent(tx:string)
Legt den Inhalt als Text fest.
Funktion setVisible(b:boolean)
Zeigt oder versteckt der Knoten.
Klasse Line
Attribut ndFrom, ndTo
Die Start- und Endknoten. Siehe „Klasse CINode“.
Bitte nicht direkt ändern!
Attribut lineStyle
Siehe „Struktur LineStyle“.
Nach Änderungen rufen Sie die Funktion renderLine auf.
Funktion addRelation( {relationType, relationTable, relationSourceId, descr, hideDescr, descrBold:string, descrUnderline:string, descrItalic:string, descrColor}, _is_direct:boolean)
Fügt eine neue Linienbeschreibung hinzu.
Wenn der Parameter _is_direct = true, gilt es für die Richtung ndFrom🡪ndTo, ansonst für ndTo🡪ndFrom.
Zum Schluss rufen Sie die Funktion renderAllDescriptions().
Funktion getRelationCount()
Gibt Anzahl der Beschreibungen zurück.
Funktion getRelationByIndex(index: number)
Gibt die Beschreibung nach Index zurück.
Rückgabewert: Siehe „Struktur RelationInfo“
Funktion getVisible()
Gibt zurück, ob die Linie angezeigt wird.
Funktion removeRelationByIndex(index: number)
Löscht eine Beschreibugn nach Index.
Zum Schluss rufen Sie die Funktion renderAllDescriptions().
Funktion renderAllDescriptions()
Renderiert alle Beschreibungen neu.
Funktion renderLine()
Renderiert die Linie und alle Beschreibungen neu.
Funktion setVisible(v:boolean)
Zeigt oder versteckt die Linie.
Struktur „RelationInfo”
Attribut isDirectRelation
Wenn true, gilt es für die Richtung ndFrom🡪ndTo, ansonst für ndTo🡪ndFrom.
Attribute relationType, relationTable, relationSourceId
Richtung, Tabelle und Primärschlüssel-ID der n:m-Tabelle. Diese Attribute sind nicht verpflichtend, da aber das Diagramm meistens für Objekte und n:m-Beziehungen genutzt wird, stehen diese Attribute direkt zur Verfügung.
Attribut descr
Beschreibung.
Nach Änderungen rufen Sie die Funktion renderAllDescriptions().
Attribut hideDescr
Wenn true, wird die Beschreibung nicht angezeigt. Aber der entsprechender Linienpfeil ja.
Attribut descrBold, descrUnderline, descrItalic
Hinweis: Die Werte sind eine Zeichenfolge mit folgender Bedeutung:
„“: Eigenschaft nicht geändert
„1”: fett, untergeschrieben oder kursiv wird erzwungen
„0”: nicht-fett, nicht-untergeschrieben oder nicht-kursiv wird erzwungen
Attribut descrColor
Farbe des Beschreibungstextes. Leer bedeutet die Defaultfarbe.
Struktur „LineStyle”
Attribut lineColor
Farbe der Linie. Wenn leer, wird die Standardfarbe genutzt.
Attribut lineWidth
Stärke der Linie. Wenn leer, wird die Standardstärke genutzt.
Attribut lineCap
Siehe https://www.w3.org/TR/SVG/painting.html#StrokeLinecapProperty
Attribut lineDasharray
Definiert der “Muster” im Format „dash-length, space-length, dash-length, space-length,... “
Wenn leer, ist die Linie “solid” dargestellt.
Nach Änderunge rufen Sie die Funktion renderLine.
Beispiele:
„1,1“ : punktierte linie – kleine Abstände
„1,4“ : punktierte linie – längere Abstände
“4,4”: gestrichelte Linie – Abstände normal
“4,1”: gestrichelte Linie – kleine Abstände
“4,8”: gestrichelte Linie – lange Abstände
“8,8”: auch gestrichelte Linie – die Striche und Abstände sind länger
„4,4,1,4“: Stricht-Punkt-Linie, die Abstände sind identisch
„4,1,1,8“: Stricht-Punkt-Linie, nach jedem Strich-Punkt-Pair kommt längerer Abstand.
Hinweis: Die Werte 1, 4, 8 werden hier nur beispielhaft genutzt, generell sind auch andere Werte möglich.