Lade...
 

FlowChart

FlowChart (WebWidget)

Stellt Flussdiagramme/FlowCharts dar und ermöglicht einer Bearbeitung dieser. Das aussehen der Zellen und Verbindungen ist dabei frei konfigurierbar.

Verwendung

Web(flowChart, APP("flowChart.html",0, 0, 800, 130)

Abhängigkeiten

  • flowChart.html
  • flowChart-directive.js
  • dependencies
    • mxGraph/*
    • flowChartMxGraphConfig.xml
    • flowChartNodeContainer.html
    • flowChart.css
    • ResizeSensor.js

Bearbeitungsmodus

Der Bearbeitungsmodus ist aktiv, wenn editable auf true gesetzt ist. Unabhängig vom Bearbeitungsmodus kann immer bei gedrückter sekundär Maustatse die Ansicht verschoben und über das Mausrad gezoomt werden.

Über ein Doppelklick auf eine Zelle kann ihr Inhalt verändert werden. Der bearbeitbare Inhalt ist dabei bei Blöcke entweder eine Referenz oder eine Aufzählung an Zustände/Labels , die als Ereignisse interpretiert werden. Die einzelnen Verbindungspunkte werden dabei durch Semikola getrennt. Bei Verbindungen stellt der Inhalt die Aufzählung der Trigger dar. Über ein Klick mit der sekunären Maustaste kann ein Kontextmenü aufgerufen werden. Über dieses kann mit der Zwischenablage interagiert, die Zelle entfernt oder ein Bild des Graphen erzeugt werden. Zudem kann darüber das Aussehen einzelner Zellen angepasst werden. Damit die Style-Eigenschaft wieder vom Style des Zelltyps abhängig ist, muss die Styländerungseingabe mit leerer Eingabe bestätigt werden, Über die Kontextmenüschaltfläche "Neu laden" kann bei referenzierenden zellen das referenzierte Objekt nach einer Änderung neu angefordert werden.

Über den Block Container an der rechten Seite können per Drag and Drop neue Zellen des entspechenden Typs erzeugt werden.

Toolbar Element Beschreibung
Neu Schickt die create_new Nachricht.
Speichern Triggert die save_flows Nachricht.
Letzte Änderung rückgängig machen.
Letzte rückgängig gemachte Änderung wiederholen.
Selektieren Ändert den Bearbeitungsmodus auf "select". In diesem Modus können neu Zellen per Drag and Drop aus dem BlockConatiner erzeugt und exestierende Zellen bearbeitet werden. Bei gedrückter primären Maustatse können mehrere Graphelemente auf einmal selektiert werden.
Verbinden Ändert den Bearbeitungsmodus auf "connect". In diesem Modus ist alles möglich, was im select Modus möglich ist. Zudem ist durch das Ziehen des Mauszeigers aus einer Zellmitte zu einer anderen zelle möglich, neue Verbindungen zu erstellen. Dafür muss die primäre Maustate gedrückt bleiben.
Bewegen Es können keine Zellen selektiert werden. Stattdessen lässt sich der Graph auch über das Betätigen der primären Maustaste verschieben. Dieser Modus ist auch aktiv, wenn der Bearbeitungsmodus nicht aktiv ist.
Analysieren Startet eine Analyse des aktuell geöfneten FlowCharts. Was analysiert werden soll, kann über das Analyze-Objekt der konfiguration festgelegt werden.
Layout anwenden Erlaubt eine schnelle strukturierte neuanordnung der Zellen.
Ansicht Erlaubt eine Änderung der Ansicht und das Anzeigen einer Übersicht über den FlowChart.

Nachrichtenschnittstelle

Bei der Richtungsbeschreibung wird das WebWidget in seine zwei Komponenten unterteilt. Das in HTML implementierte WebWidget, welches die Darstellungslogik und Nutzerinteraktion im Browser implementiert und das in InstantView implementierte WebWidget, welches die andere Seite mit den Daten aus ClassiX versorgt und es steuert.

Name Parameter Beschreibung
Push-Nachrichten (IV→HTML)
set_config Config Diese Nachricht ändert die Einstellung auf die übergebene. Bei nicht angegebenen Einstellungen wird die in Config-Objekt genannten  Standareinstellung verwendet.
merge_config Config Diese Nachricht ändert die Einstellung auf die übergebene. Bei nicht angegebenen Einstellungen werden die zuvor verwendeten Einstellung verwendet.

add_requested_blocks

 Array(WrappedBlock|NULL)

Nutze diese Nachricht, um auf die Nachricht "request" zu antworten.Diese Nachricht fügt Blöcke zum WebWidget hinzu und setzt die Aktion, welche diese Blöcke angefordert hat, fort. Nicht exestierende Blöcke werden durch NULL representiert.
update_block WrappedBlock Diese Nachricht überschreibt einen Block oder fügt ihn hinzu.
open_flow WrappedBlock Diese Nachricht öffnet den übergebenden FlowChart.
Ereignisse (HTML→IV)
initialize - Diese Nachricht ist die erste Nachricht, die das WebWidget schickt, sobald es sich initialisiert hat. Es signalisiert, dass nun Push-Nachrichten empfangen und verarbeitet werden können.
save_flows Array(WrappedBlock) Diese Nachricht schickt ein Array mit FlowCharts, die gespeichert werden sollen. Wird gesendet, wenn die Schaltfläche "Speichern"betätigt wird.
open Open Diese Nachricht signalisiert, dass der Block, auf welchen die Referenz verweist, geöffnet werden soll.
request Request Diese nachricht signalisiert, dass Blöcke benötigt werden. Als Antwort sollte die Nachricht add_requested_blocks gesendet werden.
create_new - Wird gesendet, wenn auf die Neu schaltfläche gedrückt wird und signalisiert, dass ein Neuer FlowChart erzeugt werden soll.

 

Das Config-Objekt

Feld Typ Standardwert Beschreibung

showBlockContainer

Boolean

true

Ob der BlockContainer angezeigt werden soll.

editable

Boolean

true

Ob die FlowCharts bearbeitbar sind.

newCanBeCreated

 Boolean false Ob Schaltfläche zum Erzeugen neuer FlowCharts angezeigt weren sollen. Bei einer Betätigung diser Schaltflächen wird eine create_new Nachricht geschickt.

limitConnectionDrawing

 Boolean false Ob die Anzahl der deklarierten Verbindungspunkte die Anzahl der Verbindungen, die gezeichnet werden können, limitieren soll.

defaultCellType

String

"flow"

Welchen Zelltyp neue Zellen haben, die erzeugt werden, wenn eine erstellte Verbindung keine Zielzelle hat. Ein leerer String sogt dafür, das Verbindungen ohne Anbund nicht erstellt werden.
cellTypeOfFlows String "flow" Welchen Zelltyp FlowCharts haben. FlowCharts können auch andere zelltypen haben, jedoch werden dann die ausgehende Verbindungen nicht automatisch bestimmt.

stylesheet

JSON-Object

edge: {
    width: 0,
    height: 0,
    relative: true,
    endArrow: "classic",
    show: Array("value"),
    fontSize: 12,
    fontColor: "black",
    align: "center",
    verticalAlign: "middle",
    strokeColor: "black "
},
defaultVertex: {
    width: 100,
    height: 45
    connectable: true,
    shape: "rectangle",
    fontSize: 11,
    show: Array("type", "value"),
    align: "center",
    verticalAlign: "middle",
    fillColor: "white",
    fontColor: "black",
    strokeColor: "black",
    overflow: "width"
}

Legt das Aussehen der Zellen anhand ihrers zelltyps fest.  Format: {Name:Style}.

Das Aussehen einer Verbindung wird über das Style-objekt mit dem Name/Schlüssel"edge" festgelegt. Das Standardaussehen legt das Style-objekt mit dem Namen/Schlüssen"defaultVertex" fest.

cellTypes

JSON-Object

{

    "flow": {

        "canBeOpened": true

    }

}

Legt die Eigenschaften der Zellen fest. Format: {CellTypeName:CellType}

analyze

Analyze | true

{

    "tooManyConnectionPointsDeclared":false

    "endlessLoops": false,

    "unreachableBlock": false,

    "notEndingWithSpecifiedBlockType": false,

    "notAllOutputsConnected": false,

    "outputNotExist": false,

    "outputNotSpecified": false,

    "outputConnectedMoreThanOnce": false,

    "referenceNotFound": false,

    "referenceNotSpecified": false

}

Legt fest, welche Analyzen bei einem Flow durchgeführt werden sollen. Wird true übergeben, so werden alle Analyzen durchgeführt.

importSettings

ImportSettings

{

    "codeCellType": "action",

    "pageCellType": "page",

    "unify": true,

    "defaultOkConnectionPoint": "OK"

}

Legt das Importverhalten von .vpfdx Flows und deren benötigten Dateien fest.
neededEndTypes JSON-Object {}

Legt fest, auf welchen Typen ein Flow enden darf und ob der Flow nach einem dieser Typen enden muss, also keine ausgehende Verbindungen erlaubt, selbst wenn Ereignisse vorhanden sind.

Format: {CellTypeName:Boolean}

entryPointTypes

 Array(String) Leeres Array Die Celltypen, die den Start beziehungsweise Einstiegspunkte eines Flows markieren. Wird für mehrere Analyzen vorrausgesetzt. Muss nicht gesetzt werden, wenn keine der entsprechenden Analyzen durchgeführt werden sollen.

 

Das Style-Objekt

Das Style-objekt legt das Standardmäßige Aussehen aller Zellen, dessens CellType dieses Style haben, fest. Im Celltype wird der Style über den Name, welcher im Stylsheet vergeben wird, referenziert.

Wir ein Feld nicht angegeben, so wird der Wert vom Style defaultVertex  verwendet. Somit ist kein Feld obligatorisch.

Feld Typ Beschreibung

width

height

Die standard Weite der Zelle.

height

height

Die standard Höhe der Zelle

show

Array(String)

Welche Felder in welcher Reihenfolge auf der Zelle angezeigt werden solle. Mögliche Werte sind: "value", "id", "type" und "name".

Bei "type" wird der Zellltype, bei "name" der (referenzierte) Name, bei "id" die ID der Zelle sund bei "value" entweder die Referenz oder, wenn es kein referenzierender Block ist, die Events angezeigt. 

editable

Boolean

Ob der Wert / die Referenz einer Zelle bearbeitbar ist.

connectable

 Boolean

Ob die zelle ein ein oder ausgehende Verbindung erlaubt. Die Zelle ist nur verbindbar, wenn es der Style und der Zelltyp dies nicht verbietet.

shape

String

Die Form der Zelle. Die Formen sind: "rectangle", "triangle", "rhombus", "hexagon", "cylinder", "cloud", "parallelogram",  "ellipse" und "doubleEllipse"

rounded

Boolean

Ob die Ecken der Form abgerundet sein sollen.

fonzSize

Number

Die Schriftgröße des Textes auf der Zelle.

align

String

Die horizontale Ausrichtung des Textes auf der Zelle. Mögliche Ausrichtungen sind: "left", "center" "right".

verticalAlign

String

Die vertikale Ausrichtung des Textes auf der Zelle. Mögliche Ausrichtungen sind: "top", "middle" "bottom".

fillColor

String

Die Farbe, die die zelle ausfüllt. Mögliche Werte sind HTML-Color-Namen und Hex-Codes.

fontColor

 String

Die Frabe der Schrift auf der zelle. Mögliche Werte sind HTML-Color-Namen und Hex-Codes.

strokeColor

 String Die Farbe des Randes der Zelle. Mögliche Werte sind HTML-Color-Namen und Hex-Codes.
overflow String Ob überstehender Text angezeigt werden soll. Mögliche Werte: "visible" und "hidden"

Für mehr StyleOptionen, siehe STYLE_ Konstanten auf https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxConstants-js.html

 

Das CellType-Objekt

Der Zelltyp beschreibt die Eigenschaften einer zelle

Feld Typ Standardwert Beschreibung
canBeCreated Boolean false Legt fest, ob leere Zellen dieses Zelltyps aus dem Blockcontainer heraus erstellt werden können.
style String "defaultVertex" Der Name des zuverwendendes Style-Objektes.
maxOut Integer -1

Die Anazhl der möglichen ausgehenden Verbindungen. -1 bedeutet unendlich.

Wenn createAsRef gesetzt ist, dann wird dieser Wert von der Anzahl der Ereignisse des referenzierten Blocks überschrieben.
connectable Boolean true Ob eine Verbindung mit Zellen dieses Typs verbunden werden können. Eine Zelle akzeptiert nur eine eingehende verbindung, wenn auch der Style dies erlaubt.

description

 String "" Eine Beschreibung des Zelltyps, welche im BlockContainer angezeigt wird.
canBeOpened Boolean false Legt fest ob Blöck dieses Typs geöffnet werden können. Wenn ein Block geöffnet werden kann, dann gibt es im Contetmenü ein weiterer Button, über welche die open Nachricht gesendet werden kann. Vorraussetzung: CreateAsRef ist true.
createAsRef Boolean

false

Für unter cellTypeOfFlows angegebenem Typ immer true

 Ob der Zelltyp ein Referenztyp ist, dessen Inhalt also eine Referenz ist. Ist Vorraussetzung für canBeOpened.

pathCanBeRelative

 Boolean false

Legt fest, ob die Referenz des geöfnetes FlowCharts an die Referenz angehängt wird, wenn die Referenz des Blocks keinen Punkt enthält. Um dann auf ein Element mit einer Referenz ohne Punkt zu verweisen, muss der Prefix "root." (ohne Anführungszeichen) verwendet werden.

Wird nur berücksichtigt, wenn createAsRef gesetzt ist.

 

Das FlowChart-Objekt

Das FlowChart-Objekt representiert einen FlowChart, welcher angezeigt werden kann. Description und viewPosition sind optional und werden automatisch bei verwendung erzeugt.

Feld Typ Beschreibung
name String

Der Name des FlowCharts. Die Referenz zu einem FlowChart setzt sich zusammen aus dem Pfad und dem Namen: (path.)name

Es wird nicht zwischen Groß- und Kleinschreibung unterschieden.
path String

Der Pfad / die Specifikation des FlowCharts. Einzelne Spezifikator werden mit einem Punkt getrennt. Die Referenz zu einem FlowChart setzt sich zusammen aus dem Pfad und dem Namen: (path.)name

Es wird nicht zwischen Groß- und Kleinschreibung unterschieden.
content  Array(Block)  Alle Zellen und Verbindungen des FlowCharts.
description String Die optionale Beschreibung des FlowCharts
viewPosition ViewPosition Die Position und Skalierung des FlowCharts in der Ansicht.

 

Das Block-Objekt

Das Block-Objekt representiert eine Zelle in einem FlowChart oder ein Block, aus welchem eine Zelle erzeugt werden kann beziehungsweise auf welchen eine Zelle verweisen kann.

Feld Typ Beschreibung
Nur wenn der Block eine Zelle ist
geometry Geometry Die Position und Größe der Zelle
style String

Der Name des Style-Objektes, welches das Aussehen dieser Zelle festlegt. MIt einem Semikolon getrennt können optional einzelne Feldänderungen des StyleObjektes aufgelistet werden.
id String Eine im FlowChart eindeutige numerische ID. Muss mindestens "2" sein.
type String Der Names des Zelltyps der Zelle.
Nur wenn type "edge" ist
source String Die ID der Zelle, von welcher die Verbindung ausgehen soll
target String Die ID der Zelle, zu wecher die Verbindung geh soll.

triggers

 Array(String) Bei welchen Ereignisse dieser Übergang ausgelöst werden soll.
Nur wenn type nicht "edge" ist und der Block eine referenzierende Zelle ist
contentRef String

Die Referenz zum Block oder FlowChart, welcher die eigentlichen Informationen hält. Die Referenz zu einem Block setzt sich zusammen aus dem Pfad und dem Namen: (path.)name. Wenn für den Zelltyp pathCanBeRelative true ist, dann kann auch nur der Name angegeben werden, wodurch die Referenz vom FlowChart vorne dranngehängt wird. Dies kann durch den Pseudopfad "root" umgangen werden. Dieses Feld ist nicht vorhanden, wenn der Block bereits die eigentliche Informationen hält.
Nur wenn type nicht "edge" ist und der Block keine referenzierende Zelle ist (contentRef ist nicht gesetzt)
name String

Der Name des Blocks. Die Referenz zu einem Block setzt sich zusammen aus dem Pfad und dem Namen: (path.)name

Es wird zwischen Groß- und Kleinschreibung unterschieden.
path String

Der Pfad / die Specifikation des Blocks. Einzelne Spezifikator werden mit einem Punkt getrennt. Die Referenz zu einem Block setzt sich zusammen aus dem Pfad und dem Namen: (path.)name

Es wird nicht zwischen Groß- und Kleinschreibung unterschieden
events Array(String) Ein Array, welcher angibt, welche ausgehende Ereignisse dieser Block hat. 
description String Die Beschreibung des Blocks 

extraTooltipFields

 JSON-Object Über dieses Feld können neben der Beschreibung noch weitere Felder zum Tooltip des Blocks hinzugefügt werden.

 

Das WrappedBlock-Objekt

Das WrappedBlock-Objekt ist ein Wrapper-Objekt um ein Block- oder FlowChart-Objekt, welches zusätzlich das Verzeichnis hält, von wo dieser geladen wurde.

Feld Type Beschreibung
content FlowChart | Block Der zu öffnende oder speichernde FlowChart
directory String Aus welchem Unterverzeichnis (startend nach dem Wurzelverzeichnis aller FlowChart Daten) der FlowChart geladen wurde bzw. in welchem er gespeichert werden soll.

 

Das ViewPosition-Objekt

Feld Typ Beschreibung
x Number  Die X-Koordinate der Position der Ansicht.
y Number Die Y-Koordinate der Position der Ansicht.
scale Number Die Skalierung der Ansicht

 

Das Geometry-Objekt

Feld Typ Beschreibung
x Number Die X-Koordinate des Blockes im FlowChart.
y Number Die Y-Koordinate des Blockes im FlowChart.
height Number Die Höhe des Blocks oder des Labels einer Verbindung.
width Number Die Weite des Blocks oder des Labels einer Verbindung.
Nur wenn der Block eine verbindung repäsentiert.
points Array(JSON-Object) Die Absolute Position der Biegepunkte einer Verbindung, Das JSON-Objekt für die Punkte hat folgendes Format: 

{x:Number,y:Number}

 

Das ImportSettings-Objekt

Beschreibt das Importverhalten beim Import von vpfd Dateien. Der Zelltyp von CALL Blöcken wird von cellTypeOfFlows festgelegt.

Feld Typ Standardwert Beschreibung
actionCellType String "action" Legt fest, welchen Zelltyp importierte Codeblöcke des Typs action haben werden.
decisionCellType String "decision"

Legt fest, welchen Zelltyp importierte Codeblöcke des Typs DECISION haben werden.
pageCellType String "page" Legt fest, welchen Zelltyp importierte Blöcke des Typs PAGE haben werden.
endCellType String "end" Legt fest, welchen Zelltyp importierte Codeblöcke des Typs END haben werden.
startCellType String "start" Legt fest, welchen Zelltyp importierte Codeblöcke des Typs START haben werden.
defaultOkConnectionPoint String | - "" Legt fest, durch welchen Name die Namen der Verbindungspunktes von code und call / flow Blöcken, die nur einen verbindungspunkt haben, vereinheitlicht werden soll. Wird kein String übergeben, so findet keine Vereinheitlichung der Ausgänge statt.
ignoreObsolete Boolean false

Legt fest, ob als obsolete markierte Blöcke beim Import übersprungen werden sollen.

Als obsolte markiert gelten alle Verzeichnisse, die mit .obsolete enden oder mit einem Unterstrich anfangen und alle Dateien, die mit einem Unterstrich anfangen.

Wenn dieses Feld auf false gesetzt wird, so wird im importiertem Namen die Makierung entfernt, und die Beschreibung der Blöcke auf "obsolete" gesetzt.

 

Das Open-Objekt

Feld Typ Beschreibung
reference String Die Referenz des zu öffnenden Blocks/FlowCharts
type String Der CellType des zu öffnenden Blocks.
sourceRef String Die Referenz des FlowCharts, aus welchem die Anfrage stammt.

sourceDirectory

 String Das Unterverzeichnis, in welchem angefangen werden soll, den Block oder FlowChart zu suchen. Es sollten alle übergeordnete Unterverzeichnis durchsucht werden.

 

Das Request-Object

Feld Typ Beschreibung
sourceRef String Die Referenz des FlowCharts, aus welchem die Anfrage stammt.
requests Array(Open ohne die Felder sourceRef und sourceDirectory) Beschreibung der Blöcke/FlowCharts, die angefordert werden.

sourceDirectory

 String Das Unterverzeichnis, in welchem angefangen werden soll, die Blöck beziehungsweise FlowChart zu suchen. Es sollten alle übergeordnete Unterverzeichnis durchsucht werden. Es wird das Verzeichnis übergeben, aus welchem der anfragende FlowChart geöffnet wurde.

 

Das Analyze-Objekt

Das Analyze-Objekt gibt an, welche Analyzen durchgeführt werden sollen. Eine Analyze wird immer bei Laden eines Flows oder durch das Betätigen der Schaltfläche Analysieren durchgeführt.

Der Typ aller Felder ist Boolean.

Feld Beschreibung

tooManyEventsDeclared

Wenn true, dann wird überprüft, ob bei einer Zelle mehr Ereignisse definiert wurden, als maxOut des ZellTypes an Verbindugen erlaubt. Betroffende Zellen werden mit einer Warnung markiert.

Zellen, die keine ausgehende Verbindungen erlauben, also immer das Ende eines Flows makieren, werden ignoriert.
endlessLoops

Wenn true, dann wird überprüft, ob es Endlosschleifen, also Schleifen, in denen es kein Möglichkeit mehr gibt, dass Ende des Flows zu ereichen, gibt. Betroffende Zellen werden mit einer Warnung markiert.

Vorraussetzung: EntryPointTypes ist gesetzt.
unreachableBlock

Wenn true, dann wird überprüft, ob jede Zelle erreichbar ist. Nicht erreichbare Zellen werden mit einer Warnung markiert.

Vorraussetzung: EntryPointTypes ist gesetzt.
eventNotExist

Wenn true, dann wird überprüft, ob die entsprechenden Ereignisse für die bei einer Verbindung angegebener Trigger vorhanden sind. Hat die Zelle, von welcher der Verbindung ausgeht das  angegenenen Ereignis nicht, so wird die Verbindung mit einer Warnung markiert.

Wenn der CellTyp der Zelle, bei der die Verbindung startet, gleich cellTypeOfFlows ist, dann wird diese Warnung nur angezeigt, wenn neededEndTypes nicht leer ist und für kein enthaltender Zelltyp createAsRef gesetzt ist.
notEndingWithSpecifiedBlockType Wenn true und 

neededEndTypes mindesten ein Typ enthält, dann wird überprüft, ob Zellen, bei denen der Flow endet, vom entsprechendem Typ sind. Sind die Zellen von einem anderem Typ, so werden sie mit einem Fehler markiert.

Vorraussetzung: EntryPointTypes ist gesetzt.
notAllEventsConnected

Wenn true, dann wird überprüft, ob zu allen Ereignisse entsprechende Trigger gesetzt sind. Reagiert auf ein Ereignis kein Auslöser, dann wird die Zelle mit einer Warnung markiert.

Zellen, bei denen der Flow endet, also keine ausgehende  Verbindungen haben, werden ignoriert.

Wenn der CellTyp der Zelle gleich cellTypeOfFlows ist, dann wird diese Warnung nur angezeigt, wenn neededEndTypes nicht leer ist und alle für kein enthaltender Zelltyp createAsRef gesetzt ist.
triggerNotSpecified

Wenn true, dann wird überprüft, ob bei jeder Verbindung ein Auslöser angegeben ist. Ist keiner angegeben, so wird die Verbindung mit einem Fehler markiert.

eventConnectedMoreThanOnce

 Wenn true, dann wird überprüft, dass jedes Ereignis einer Zelle maximal von einer Verbindung als Auslöser gesetzt ist. Wenn ein Ereignis mehrfach ausgewählt ist, dann werden die betroffenden Verbindungen mit einem Fehler markiert.
referenceNotFound Wenn true, dann wird bei jeder referenzierenden Zelle überpüft, ob die angegebene Referenz auf ein Block des selben Zelltyps verweist. Wird kein  Block gefunden, so wird die Zelle mit einem Fehler markiert.
referenceNotSpecified Wenn true, dann wird überpüft, dass bei jeder Zelle  mit einem Celltype, bei welchem createAsRef gesetzt ist,
eine Referenz angegeben wurde. Fehlt eine Referenz, so wird die betroffende Zelle mit einem Fehler markiert.