Build Graph from text
Introduction¶
Create node and edge game objects from text.
- Author: Rex
- Method
Live demos¶
Usage¶
Install plugin¶
Load minify file¶
- Load plugin (minify file) in preload stage
scene.load.scenePlugin('rexgraphplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexgraphplugin.min.js', 'rexGraph', 'rexGraph'); - Add graph object
var graph = scene.rexGraph.add.graph(config); - Create node and edge game objects from text
scene.rexGraph.buildGraphFromText(graph, config);
Import plugin¶
- Install rex plugins from npm
npm i phaser3-rex-plugins - Install plugin in configuration of game
import GraphPlugin from 'phaser3-rex-plugins/plugins/graph-plugin.js'; var config = { // ... plugins: { scene: [{ key: 'rexGraph', plugin: GraphPlugin, mapping: 'rexGraph' }, // ... ] } // ... }; var game = new Phaser.Game(config); - Add graph object
var graph = scene.rexGraph.add.graph(config); - Create node and edge game objects from text
scene.rexGraph.buildGraphFromText(graph, config);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins - Import class
import { Graph, BuildGraphFromText } from 'phaser3-rex-plugins/plugins/graph-components.js'; - Add graph object
var graph = new Graph(scene, config); - Create node and edge game objects from text
BuildGraphFromText(graph, config);
Create node and edge game objects from text¶
scene.rexGraph.buildGraphFromText(graph, {
onCreateNodeGameObject(scene, id, parameters) {
return gameObject;
},
onCreateEdgeGameObject(scene, id, parameters) {
return gameObject;
},
text: text
});
graph: Graph objectonCreateNodeGameObject: Callback to create node game objectfunction(scene, id, parameters) { return gameObject; }gameObject: Game object with position ({x, y}) and size ({width, height})parameters: See Syntax of text
onCreateEdgeGameObject: Callback to create edge game object. Default value isfunction (scene, id, parameters) { var { color = 0xffffff, width = 2, type = 'poly', head = 'none', tail = 'none,' } = parameters; var gameObject = new Line(scene, { color: color, lineWidth: width, lineType: type, headShape: head, tailShape: tail, }) scene.add.existing(gameObject); return gameObject; }gameObject: Line-shapeparameters: See Syntax of text
text: See Syntax of text
Syntax of Text¶
Example:
NODE [
padding=3,
color=0x888888
]
A [label=A, elk.layered.priority=1]
B [label=B]
A -> B -> C [color=0xFF0000]
A -> * -> D
E -> *1 -> F
G -> *1
H *> I
Node Defaults¶
NODE [key=value, ...]
- Declares default parameters for all subsequent nodes.
- Example:
NODE [padding=3, color=0x888888] - Every new node inherits these attributes unless overridden.
Edge Defaults¶
EDGE [key=value, ...]
- Declares default parameters for all subsequent edges.
- Example:
EDGE [color=0x888888, width=2]
Node Definition¶
<nodeId> [key=value, ...]
- Declares or updates a single node.
- Attributes in brackets overwrite the default
NODEparameters. - Example:
A [label=A, elk.layered.priority=1] B [label=B] - If no attribute block is provided, the node is still created with defaults.
Edge Definition¶
<source> -> <target>
<source> -> <mid> -> <target>
- Defines connections between nodes.
- A chain like
A -> B -> Ccreates two edges:A -> B B -> C - Attributes in brackets (
[ ... ]) after the chain apply to all edges in that chain. - Example:
A -> B -> C [color=0xFF0000]
Dummy Nodes¶
Used to control layout (width=0, height=0) without creating visible node objects.
Syntax:
*: Anonymous dummy node*name: Named dummy node
Examples:
A -> * -> D # Creates a new dummy node between A and D
E -> *1 -> F # Creates or reuses a named dummy node "*1"
G -> *1 # Reuses the same named dummy node
Builder won't create game object for dummy node, they exist only for layout.
Equal to
graph.addNode(graph.createDummyNode());
See also ELK layout
Invisible Edges¶
<nodeA> *> <nodeB>
- Defines an invisible edge.
- Builder won't create game object for invisible edge, they exist only for layout.
- Example:
H *> I
Equal to
graph.addEdge(graph.createInvisibleEdge());
See also ELK layout
Attribute Blocks¶
[key=value, key2=value2, ...]
- Enclosed in square brackets.
- Commas are optional before newlines.
- Acceptable value types:
- Numbers:
3,2.5 - Hexadecimal:
0x888888 - Strings:
"text"or'text' - Identifiers:
solid,circle
- Numbers:
- Example:
[label="Start", color=0xFF0000, elk.layered.priority=1]
Comments¶
Three comment styles are supported:
# comment
// comment
/* multi-line
comment */
Comments can appear anywhere and are ignored.
Statement Endings¶
Statements may be separated by:
- A newline (
\n) - A semicolon (
;)
Example:
A [label="Node A"];
B [label="Node B"]
A -> B
Summary of Core Constructs¶
| Type | Syntax | Description |
|---|---|---|
| Node defaults | NODE [key=value] |
Define attributes applied to all future nodes |
| Edge defaults | EDGE [key=value] |
Define attributes applied to all future edges |
| Node | A [key=value] |
Create or update node A |
| Edge | A -> B |
Create edge A→B |
| Edge chain | A -> B -> C |
Create multiple edges |
| Edge attributes | A -> B [key=value] |
Attributes applied to all edges in the chain |
| Dummy node | * or *name |
Invisible node for layout |
| Invisible edge | A *> B |
Hidden edge for layout |
| Comment | #, //, /* ... */ |
Ignored |
| Statement end | ; or newline |
Both accepted |
Complete Example¶
# Define node and edge defaults
NODE [shape="circle", padding=5]
EDGE [color=0x999999, width=2]
# Define nodes
A [label="Start"]
B [label="Middle"]
C [label="End"]
# Define edges
A -> B -> C [color=0xFF0000] # Colored chain
A -> * -> D # Dummy node between A and D
E -> *1 -> F # Named dummy node used twice
G -> *1 # Reuse *1 again
H *> I # Invisible edge