Add padding parameter

examples/graph/elk-layout.js

@@ -11,7 +11,7 @@ class Demo extends Phaser.Scene {
     preload() { }
 
     create() {
-        var nodeA = CreateNode(this);
+        var nodeA = CreateNode(this, 0xFFFF00);
         var nodeB = CreateNode(this);
         var nodeC = CreateNode(this);
         var nodeD = CreateNode(this);
@@ -21,7 +21,7 @@ class Demo extends Phaser.Scene {
         var edgeCD = CreateEdge(this);
 
         var graph = this.rexGraph.add.graph()
-            .addNodes([nodeA, nodeB, nodeC, nodeD])
+            .addNodes([nodeA, nodeB, nodeC, nodeD], { padding: 3 })
             .addEdge(edgeAB, nodeA, nodeB)
             .addEdge(edgeAC, nodeA, nodeC)
             .addEdge(edgeBD, nodeB, nodeD)
@@ -35,7 +35,11 @@ class Demo extends Phaser.Scene {
                 .setTo(0, 0, endPoint.x - startPoint.x, endPoint.y - startPoint.y)
         });
 
-        this.rexGraph.ELKLayout(graph)
+        this.rexGraph.ELKLayout(graph, {
+            layoutOptions: {
+                // 'elk.direction': 'DOWN'
+            }
+        })
             .once('layout.complete', function () {
                 console.log('layout.complete')
             })
@@ -46,8 +50,11 @@ class Demo extends Phaser.Scene {
     }
 }
 
-var CreateNode = function (scene) {
-    return scene.add.rectangle(0, 0, 100, 100).setStrokeStyle(3, 0x00ffff)
+var CreateNode = function (scene, color) {
+    if (color === undefined) {
+        color = 0x888888;
+    }
+    return scene.add.rectangle(0, 0, 100, 100).setStrokeStyle(3, color)
 }
 
 var CreateEdge = function (scene) {

plugins/graph/graph/Graph.js

@@ -58,10 +58,28 @@ class Graph extends EE {
     }
 
     remove(gameObject) {
-        if (this.isEdge(gameObject)) {
-            this.removeEdge(gameObject);
-        } else if (this.isNode(gameObject)) {
+        if (this.isNode(gameObject)) {
             this.removeNode(gameObject);
+        } else if (this.isEdge(gameObject)) {
+            this.removeEdge(gameObject);
+        }
+        return this;
+    }
+
+    setAttribute(gameObject, key, value) {
+        if (this.isNode(gameObject)) {
+            this.setNodeAttribute(gameObject, key, value);
+        } else if (this.isEdge(gameObject)) {
+            this.setEdgeAttribute(gameObject, key, value);
+        }
+        return this;
+    }
+
+    getAttribute(gameObject, key) {
+        if (this.isNode(gameObject)) {
+            this.getNodeAttribute(gameObject, key);
+        } else if (this.isEdge(gameObject)) {
+            this.getEdgeAttribute(gameObject, key);
         }
         return this;
     }

plugins/graph/graph/Methods.js

@@ -1,10 +1,3 @@
-import IsEdge from './edge/IsEdge.js';
-import AddEdge from './edge/AddEdge.js';
-import RemoveEdge from './edge/RemoveEdge.js';
-import GetAllEdges from './edge/GetAllEdges.js';
-import GetEdgesOfNode from './edge/GetEdgesOfNode.js';
-import GetEdgeLength from './edge/GetEdgeLength.js';
-
 import IsNode from './node/IsNode.js';
 import AddNode from './node/AddNode.js';
 import AddNodes from './node/AddNodes.js';
@@ -13,18 +6,22 @@ import RemoveAllNodes from './node/RemoveAllNodes.js';
 import GetAllNodes from './node/GetAllNodes.js';
 import GetNodesOfEdge from './node/GetNodesOfEdge.js';
 import GetOppositeNode from './node/GetOppositeNode.js';
+import SetNodeAttribute from './node/SetNodeAttribute.js';
+import GetNodeAttribute from './node/GetNodeAttribute.js';
+
+import IsEdge from './edge/IsEdge.js';
+import AddEdge from './edge/AddEdge.js';
+import RemoveEdge from './edge/RemoveEdge.js';
+import GetAllEdges from './edge/GetAllEdges.js';
+import GetEdgesOfNode from './edge/GetEdgesOfNode.js';
+import GetEdgeLength from './edge/GetEdgeLength.js';
+import SetEdgeAttribute from './edge/SetEdgeAttribute.js';
+import GetEdgeAttribute from './edge/GetEdgeAttribute.js';
 
 import GetNeighborNodes from './neighbors/GetNeighborNodes.js';
 import AreNeighborNodes from './neighbors/AreNeighborNodes.js';
 
 export default {
-    isEdge: IsEdge,
-    addEdge: AddEdge,
-    removeEdge: RemoveEdge,
-    getAllEdges: GetAllEdges,
-    getEdgesOfNode: GetEdgesOfNode,
-    getEdgeLength: GetEdgeLength,
-
     isNode: IsNode,
     addNode: AddNode,
     addNodes: AddNodes,
@@ -33,6 +30,17 @@ export default {
     getAllNodes: GetAllNodes,
     getNodesOfEdge: GetNodesOfEdge,
     getOppositeNode: GetOppositeNode,
+    setNodeAttribute: SetNodeAttribute,
+    getNodeAttribute: GetNodeAttribute,
+
+    isEdge: IsEdge,
+    addEdge: AddEdge,
+    removeEdge: RemoveEdge,
+    getAllEdges: GetAllEdges,
+    getEdgesOfNode: GetEdgesOfNode,
+    getEdgeLength: GetEdgeLength,
+    setEdgeAttribute: SetEdgeAttribute,
+    getEdgeAttribute: GetEdgeAttribute,
 
     getNeighborNodes: GetNeighborNodes,
     areNeighborNodes: AreNeighborNodes,

plugins/graph/graph/edge/AddEdge.js

@@ -1,5 +1,6 @@
 import GetGraphItem from '../../graphitem/GetGraphItem.js';
 import GetObjUID from '../../graphitem/GetObjUID.js';
+import IsPlainObject from '../../../utils/object/IsPlainObject.js'
 
 const DIRAtoB = 1;
 const DIRBtoA = 2;
@@ -9,17 +10,20 @@ const DIRMODE = {
     '<->': (DIRAtoB | DIRBtoA),
 };
 
-var AddEdge = function (edgeGameObject, nodeAGameObject, nodeBGameObject, dir) {
+var AddEdge = function (edgeGameObject, nodeAGameObject, nodeBGameObject, dir, attributes) {
     if (this.isEdge(edgeGameObject)) {
         return this;
     }
 
-    if (typeof (dir) === 'string') {
-        dir = DIRMODE[dir];
+    if (IsPlainObject(dir)) {
+        attributes = dir;
+        dir == undefined;
     }
 
     if (dir === undefined) {
         dir = 3;
+    } else if (typeof (dir) === 'string') {
+        dir = DIRMODE[dir];
     }
 
     // Add node to graph
@@ -38,15 +42,15 @@ var AddEdge = function (edgeGameObject, nodeAGameObject, nodeBGameObject, dir) {
 
     switch (dir) {
         case DIRAtoB:
-            this.graph.addDirectedEdgeWithKey(edgeUID, nodeAUID, nodeBUID);
+            this.graph.addDirectedEdgeWithKey(edgeUID, nodeAUID, nodeBUID, attributes);
             break;
 
         case DIRBtoA:
-            this.graph.addDirectedEdgeWithKey(edgeUID, nodeBUID, nodeAUID);
+            this.graph.addDirectedEdgeWithKey(edgeUID, nodeBUID, nodeAUID, attributes);
             break;
 
         default:
-            this.graph.addUndirectedEdgeWithKey(edgeUID, nodeAUID, nodeBUID);
+            this.graph.addUndirectedEdgeWithKey(edgeUID, nodeAUID, nodeBUID, attributes);
             break;
     }
 

plugins/graph/graph/edge/GetEdgeAttribute.js

@@ -0,0 +1,13 @@
+import GetObjUID from '../../graphitem/GetObjUID.js';
+
+var GetEdgeAttribute = function (gameObject, key) {
+    var nodeUID = GetObjUID(gameObject);
+
+    if (key === undefined) {
+        return this.graph.getEdgeAttributes(nodeUID);
+    } else {
+        return this.graph.getEdgeAttribute(nodeUID, key);
+    }
+}
+
+export default GetEdgeAttribute;

plugins/graph/graph/edge/SetEdgeAttribute.js

@@ -0,0 +1,14 @@
+import GetObjUID from '../../graphitem/GetObjUID.js';
+import IsPlainObject from '../../../utils/object/IsPlainObject.js';
+
+var SetEdgeAttribute = function (gameObject, key, value) {
+    var nodeUID = GetObjUID(gameObject);
+
+    if (IsPlainObject(key)) {
+        return this.graph.updateEdgeAttribute(nodeUID, key);
+    } else {
+        return this.graph.setEdgeAttribute(nodeUID, key, value);
+    }
+}
+
+export default SetEdgeAttribute;

plugins/graph/graph/node/AddNode.js

@@ -1,15 +1,15 @@
 import GetGraphItem from '../../graphitem/GetGraphItem.js';
 import GetObjUID from '../../graphitem/GetObjUID.js';
 
-var AddNode = function (gameObejct) {
+var AddNode = function (gameObejct, attributes) {
     if (this.isNode(gameObejct)) {
         return this;
     }
 
     GetGraphItem(gameObejct).setGraph(this);
 
     var nodeUID = GetObjUID(gameObejct);
-    this.graph.addNode(nodeUID);
+    this.graph.addNode(nodeUID, attributes);
 
     return this;
 };

plugins/graph/graph/node/AddNodes.js

@@ -1,6 +1,6 @@
-var AddNodes = function (gameObjects) {
+var AddNodes = function (gameObjects, attributes) {
     for (var i = 0, cnt = gameObjects.length; i < cnt; i++) {
-        this.addNode(gameObjects[i]);
+        this.addNode(gameObjects[i], { ...attributes });
     }
     return this;
 }

plugins/graph/graph/node/GetNodeAttribute.js

@@ -0,0 +1,13 @@
+import GetObjUID from '../../graphitem/GetObjUID.js';
+
+var GetNodeAttribute = function (gameObject, key) {
+    var nodeUID = GetObjUID(gameObject);
+
+    if (key === undefined) {
+        return this.graph.getNodeAttributes(nodeUID);
+    } else {
+        return this.graph.getNodeAttribute(nodeUID, key);
+    }
+}
+
+export default GetNodeAttribute;

plugins/graph/graph/node/SetNodeAttribute.js

@@ -0,0 +1,14 @@
+import GetObjUID from '../../graphitem/GetObjUID.js';
+import IsPlainObject from '../../../utils/object/IsPlainObject.js';
+
+var SetNodeAttribute = function (gameObject, key, value) {
+    var nodeUID = GetObjUID(gameObject);
+
+    if (IsPlainObject(key)) {
+        return this.graph.updateNodeAttribute(nodeUID, key);
+    } else {
+        return this.graph.setNodeAttribute(nodeUID, key, value);
+    }
+}
+
+export default SetNodeAttribute;

plugins/graph/layout/elkjs/BuildGraphData.js

@@ -1,19 +1,21 @@
 import UIDToObj from '../../graphitem/UIDToObj.js';
+import GetBoundsConfig from '../../../utils/bounds/GetBoundsConfig.js';
 
 var BuildGraphData = function (graph, config) {
     var nodes = [];
     var nodeGameObjectMap = {};
-    graph.graph.forEachNode(function (uid) {
+    graph.graph.forEachNode(function (uid, attributes) {
         var nodeGameObject = UIDToObj(uid);
         if (!nodeGameObject) {
             return;
         }
 
+        var padding = GetBoundsConfig(attributes.padding);
+        var width = nodeGameObject.displayWidth + padding.left + padding.right;
+        var height = nodeGameObject.displayHeight + padding.top + padding.bottom;
         var nodeData = {
-            gameObject: nodeGameObject,
-            id: uid,
-            width: nodeGameObject.displayWidth,
-            height: nodeGameObject.displayHeight
+            gameObject: nodeGameObject, padding: padding,
+            id: uid, width: width, height: height
         };
         nodes.push(nodeData);
 

plugins/graph/layout/elkjs/Layout.js

@@ -3,11 +3,24 @@ import BuildGraphData from './BuildGraphData.js';
 import PlaceGameObjects from './PlaceGameObjects.js';
 
 var Layout = async function (graph, config) {
+    if (config === undefined) {
+        config = {};
+    }
+
     graph.emit('layout.start', graph);
 
-    var elk = new ELK();
     var graphData = BuildGraphData(graph, config);
-    graphData = await elk.layout(graphData);
+
+    graph.emit('layout.prelayout', graph);
+
+    var elk = new ELK();
+    graphData = await elk.layout(graphData, {
+        layoutOptions: config.layoutOptions,
+
+    });
+
+    graph.emit('layout.postlayout', graph);
+
     PlaceGameObjects(graph, graphData, config);
 
     graph.emit('layout.complete', graph);

plugins/graph/layout/elkjs/PlaceGameObjects.js

@@ -5,7 +5,13 @@ const ALIGN_CENTER = Phaser.Display.Align.CENTER;
 
 var PlaceGameObjects = function (graph, graphData, config) {
     graphData.children.forEach(function (nodeData) {
-        AlignIn(nodeData.gameObject, nodeData.x, nodeData.y, nodeData.width, nodeData.height, ALIGN_CENTER);
+        var gameObject = nodeData.gameObject;
+        var padding = nodeData.padding;
+        var x = nodeData.x + padding.left;
+        var y = nodeData.y + padding.top;
+        var width = nodeData.width - padding.left - padding.right;
+        var height = nodeData.height - padding.top - padding.bottom;
+        AlignIn(gameObject, x, y, width, height, ALIGN_CENTER);
         graph.emit('layout.node', nodeData.gameObject);
     })