Build Graph from text

Introduction

Create node and edge game objects from text.

• Author: Rex
• Method

Live demos

• Graph in container

Usage

Sample code

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 object
• onCreateNodeGameObject : Callback to create node game object

  function(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

  function(scene, id, parameters) {
      return scene.rexGraph.add.line(config)
  }
  

  • gameObject : Line-shape
  • parameters : 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 NODE parameters.
• 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 -> C creates 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
• 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