diff --git a/docs/pages/api.md b/docs/pages/api.md index 5fdfbc0..8afc83d 100644 --- a/docs/pages/api.md +++ b/docs/pages/api.md @@ -4,4 +4,6 @@ title: API permalink: /api/ --- +# API + The graph API can be used to programmatically interact with a graph you have instantiated. You can control the view of the graph using the translate / scale functions as well as create / delete / update graph nodes and edges. The full API is documented [here](https://api.playcanvas.com/modules/PCUIGraph.html). diff --git a/docs/pages/config-options.md b/docs/pages/config-options.md index 7f1803e..2c391f1 100644 --- a/docs/pages/config-options.md +++ b/docs/pages/config-options.md @@ -4,6 +4,8 @@ title: Config Options permalink: /config-options/ --- +# Config Options + Options can be passed to the graph constructor as a JSON object which change the default behavior of the graph. You can do so as follows: ```javascript diff --git a/docs/pages/context-menus.md b/docs/pages/context-menus.md index 0118f7b..228cf9a 100644 --- a/docs/pages/context-menus.md +++ b/docs/pages/context-menus.md @@ -4,6 +4,8 @@ title: Context Menus permalink: /context-menus/ --- +# Context Menus + It is possible to create context menus on your graph which display when right clicking various graph items. There are three types of context menus; background, node and edge. You can define a set of actions which will display in each of these menus and each action item in the menu will fire an action event when selected. The background context menu appears when you right click on any blank space in the canvas. This context menu is used to add new nodes to the graph. It can be created by adding a `contextMenuItems` array to the options object passed to the graph constructor: diff --git a/docs/pages/events.md b/docs/pages/events.md index 34fa9c2..e44d421 100644 --- a/docs/pages/events.md +++ b/docs/pages/events.md @@ -4,6 +4,8 @@ title: Events permalink: /events/ --- +# Events + After creating a graph, you can register a callback for various events. This is achieved using the graphs [on function](https://api.playcanvas.com/classes/PCUIGraph.Graph.html#on). The following events are supported: ```javascript diff --git a/docs/pages/schema.md b/docs/pages/schema.md index 598bbc6..e7f9e37 100644 --- a/docs/pages/schema.md +++ b/docs/pages/schema.md @@ -4,6 +4,8 @@ title: Schema permalink: /schema/ --- +# Schema + The schema object is used to define what type of graph you will be initializing. More specifically, it defines which node your graph can contain and how those nodes can be connected together with edges. It should contain a set of nodes and edges which can be created in the graph. Each node and edge that is defined will need a unique number key which is used to reference that particular part of the schema. In the above example the single edge type defined references the two nodes contained in the schema when defining which node types it can connect. When creating large schemas, it can be useful to define these keys before creating the schema, so they can be easily referenced: diff --git a/docs/pages/storybook.md b/docs/pages/storybook.md index c3c47df..cef79fd 100644 --- a/docs/pages/storybook.md +++ b/docs/pages/storybook.md @@ -4,6 +4,8 @@ title: Storybook permalink: /storybook-docs/ --- +# Storybook + The storybook showcases PCUI-Graph's Graph component in a number of different contexts. [Click here](../storybook/) to view the storybook. diff --git a/docs/pages/styling.md b/docs/pages/styling.md index 457d6f3..6e1ca7f 100644 --- a/docs/pages/styling.md +++ b/docs/pages/styling.md @@ -4,6 +4,8 @@ title: Styling permalink: /styling/ --- +# Styling + You can style your graph by overriding it's default style properties. This can be achieved by modifying the defaultStyles passed in as part of an options object to the graph constructor. ```javascript