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

 

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

siehe auch 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.