From 18ccb2cdc97ef8eb2f2fc1500bba3563472ae863 Mon Sep 17 00:00:00 2001 From: newcat Date: Sun, 17 Feb 2019 01:00:57 +0100 Subject: [PATCH] Updated docs, using docsify now --- docs/.nojekyll | 0 docs/README.md | 12 +++ docs/_sidebar.md | 10 +++ docs/custom-nodes.md | 167 +++++++++++++++++++++++++++++++++++++++ docs/editor.md | 31 ++++---- docs/getting-started.md | 37 +++++++++ docs/img/node_parts.png | Bin 0 -> 15002 bytes docs/index.html | 25 ++++++ docs/nodeInterfaces.md | 19 ----- docs/options/button.md | 7 -- docs/options/checkbox.md | 6 -- docs/options/input.md | 6 -- docs/options/number.md | 6 -- docs/options/select.md | 11 --- docs/options/text.md | 6 -- docs/prebuilt-options.md | 20 +++++ package.json | 5 +- 17 files changed, 288 insertions(+), 80 deletions(-) create mode 100644 docs/.nojekyll create mode 100644 docs/README.md create mode 100644 docs/_sidebar.md create mode 100644 docs/custom-nodes.md create mode 100644 docs/getting-started.md create mode 100644 docs/img/node_parts.png create mode 100644 docs/index.html delete mode 100644 docs/nodeInterfaces.md delete mode 100644 docs/options/button.md delete mode 100644 docs/options/checkbox.md delete mode 100644 docs/options/input.md delete mode 100644 docs/options/number.md delete mode 100644 docs/options/select.md delete mode 100644 docs/options/text.md create mode 100644 docs/prebuilt-options.md diff --git a/docs/.nojekyll b/docs/.nojekyll new file mode 100644 index 00000000..e69de29b diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 00000000..dd9b0872 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,12 @@ +# BaklavaJS + +[![Build Status](https://travis-ci.org/newcat/baklavajs.svg?branch=master)](https://travis-ci.org/newcat/baklavajs) +[![npm version](https://badge.fury.io/js/baklavajs.svg)](https://badge.fury.io/js/baklavajs) + +Graph / node editor in the browser using VueJS +![example](img/example.png) + +### Roadmap +* Add panning for all nodes +* Allow connections from input to output (auto-reverse) +* Optional keyboard shortcuts \ No newline at end of file diff --git a/docs/_sidebar.md b/docs/_sidebar.md new file mode 100644 index 00000000..24b00fd2 --- /dev/null +++ b/docs/_sidebar.md @@ -0,0 +1,10 @@ +* **Usage** + * [Documentation](/) + * [Getting Started](/getting-started.md) + * [Editor Instance](/editor.md) + * [Styling](/styling.md) +* **Custom Nodes** + * [Creating Custom Nodes](/custom-nodes.md) + * [Prebuilt Options](/prebuilt-options.md) +* **Reference** + * [API Reference](/api.md) \ No newline at end of file diff --git a/docs/custom-nodes.md b/docs/custom-nodes.md new file mode 100644 index 00000000..79a48c87 --- /dev/null +++ b/docs/custom-nodes.md @@ -0,0 +1,167 @@ +# Creating Custom Nodes + +- [Basics](#basics) +- [Node Interfaces](#node-interfaces) +- [Node Options](#node-options) + - [Sidebar](#sidebar) + - [Prebuilt Options](#prebuilt-options) + - [Default Values](#default-values) +- [Custom Node Implementation](#custom-node-implementation) + - [Node Builder](#node-builder) + - [Class](#class) +- [Calculation](#calculation) + +## Basics +Every node consists of three parts: +* [Output Interfaces](#node-interfaces) +* [Options](#node-options) +* [Input Interfaces](#node-interfaces) + +![node parts](img/node_parts.png) + +All of these parts are customizable. + +## Node Interfaces +Interfaces are used to receive data from other nodes (*input interfaces*) or send data to other nodes (*output interfaces*). A node interface has two important properties: + +| Property | Description | +| --- | --- | +|

**name**

|

The name is displayed to the user. You also need the name to get the value of the interface

| +|

**type**

|

The type can be any word (spaces would break the CSS class). By default, connections are only allowed between NodeInterfaces, that have the same type. The "dot" will also be assigned the following CSS class: `--iftype-{TYPE}`. For example, if the type is "string", the CSS class would be `--iftype-string`. You can use this to [style](styling.md) your interfaces.

| + +An input interface, which is not connected, can display a node option to allow the user to change its value. + +## Node Options +Options are just Vue components, that support the `v-model` directive. +This means, they receive the option's value through the `value` prop and can write updates +to the value using the `input` event. +Additionally, each option can emit the `openSidebar` event, which will open the [sidebar](#sidebar) +to display a more advanced UI for the option. + +Their value can be written or read by using the [setOptionValue](docs/api.md#Node+setOptionValue) +or [getOptionValue](docs/api.md#Node+getOptionValue) methods. + +### Sidebar +Some options can require a more complex UI which would not fit in the limited space that a node provides. +In this case, you can display a button in the node that will open the sidebar when pressed. +The advanced UI can now be displayed in the sidebar. + +> Open the sidebar by emitting the `openSidebar` event in an option. + +```js +import { Options } from "baklavajs"; +import MySidebarOption from "./MySidebarOption.vue"; + +// in the node constructor +this.addOption("SidebarTest", Options.ButtonOption, () => ({ testtext: "any" }), MySidebarOption); +``` + +Both the component in the node as well as the component in the sidebar +will receive the current option value through the `value` prop. + +### Prebuilt Options +There are prebuilt options like text and number input, dropdown menu and many more available. +These are documented [here](/prebuilt-options). + +### Default Values +> When providing complex default values like arrays or objects as default values using the NodeBuilder's +> [addInputInterface](docs/api.md#NodeBuilder+addInputInterface) or +> [addOption](docs/api.md#NodeBuilder+addOption) method, you need to provide an option that returns +> the default array or object. This ensures that multiple instances of the node interface or node option +> all have their own data objects. + +Example: +```js +new NodeBuilder("MyNode") + // This is fine, because we provide a primitive as default value + .addInputInterface("Primitive", "type", MyOption, "default") + // But in this case we need to provide a function to create an object + .addInputInterface("Complex", "type", MyOption, () => { + return { a: 1, b: "Hello World!" }; + }) +``` + +## Custom Node Implementation +There are two ways to create custom nodes: + +### Node Builder +The [node builder](api.md#NodeBuilder) is a simple way to build nodes "on the fly". +```js +import { NodeBuilder, Options } from "baklavajs"; + +export default new NodeBuilder("MathNode") + .addInputInterface("Number 1", "number", Options.NumberOption, 1) + .addInputInterface("Number 2", "number", Options.NumberOption, 10) + .addOption("Operation", Options.SelectOption, () => ({ + selected: "Add", + items: [ "Add", "Subtract" ] + })) + .addOutputInterface("Output", "number") + .onCalculate((n) => { + const n1 = n.getInterface("Number 1").value; + const n2 = n.getInterface("Number 2").value; + const operation = n.getOptionValue("Operation").selected; + let result; + if (operation === "Add") { + result = n1 + n2; + } else if (operation === "Subtract") { + result = n1 - n2; + } + n.getInterface("Output").value = result; + }) + .build(); +``` + +> Don't forget to `build()` at the end. + +### Class +If you have a more complex node, you can create a subclass of `Node` +and implement the required methods/properties yourself. +```js +import { Node, Options } from "baklavajs"; + +export class MathNode extends Node { + + type = "MathNode"; + name = this.type; + + constructor() { + super(); + this.addInputInterface("Number 1", "number", Options.NumberOption, 1); + this.addInputInterface("Number 2", "number", Options.NumberOption, 10); + this.addOutputInterface("Output", "number"); + this.addOption("Operation", Options.SelectOption, () => ({ + selected: "Add", + items: [ "Add", "Subtract" ] + })); + } + + public calculate() { + const n1 = this.getInterface("Number 1").value; + const n2 = this.getInterface("Number 2").value; + const operation = this.getOptionValue("Operation").selected; + let result; + if (operation === "Add") { + result = n1 + n2; + } else if (operation === "Subtract") { + result = n1 - n2; + } + this.getInterface("Output").value = result; + } + +} +``` + +## Calculation +Each Node class can overwrite the `calculate()` function to perform some logic. +Usually the calculation functions reads the values from the input interfaces and the options, +performs some logic and sets the values of the output interfaces with the results. + +For a node, that outputs the sum of its two inputs, the calculation function could look like this: +```js +calculate() { + const a = this.getInterface("Number 1").value; + const b = this.getInterface("Number 2").value; + this.getInterface("Output").value = a + b; +} +``` \ No newline at end of file diff --git a/docs/editor.md b/docs/editor.md index 00c64060..58c94314 100644 --- a/docs/editor.md +++ b/docs/editor.md @@ -1,18 +1,16 @@ -# Editor +# Editor The editor class is the main class of the model. You can do most things like adding/removing nodes and connections, loading/saving, ... from here. > Please only use the provided functions and do not modify fields directly. -- [Editor](#editor) - - [Nodes](#nodes) - - [Adding / removing nodes](#adding--removing-nodes) - - [Connections](#connections) - - [Connection validity](#connection-validity) - - [Adding / removing connections](#adding--removing-connections) - - [Calculation](#calculation) - - [Saving / Export](#saving--export) - - [Loading / Import](#loading--import) - +- [Nodes](#nodes) + - [Adding / removing nodes](#adding--removing-nodes) +- [Connections](#connections) + - [Connection validity](#connection-validity) + - [Adding / removing connections](#adding--removing-connections) +- [Calculation](#calculation) +- [Saving / Export](#saving--export) +- [Loading / Import](#loading--import) ## Nodes > You should register all [custom node types](nodes.md) in the editor. @@ -39,14 +37,15 @@ To prevent infinite loops in node calculation, the graph must not contain cycles Additionally, you can allow connections only between certain interface types. By default, connections are only allowed between interfaces with the same type. If you want to change this behavior, provide a custom predicate to the [typeComparer](api.md#Editor+typeComparer) field. The `typeComparer` is a function, that takes an `IConnection` as a parameter and returns a boolean that specifies, whether this connection is allowed or not. The default implementation is: -```ts -(c) => c.from.type === c.to.type; +```js +function compare(connection) { + connection.from.type === connection.to.type; +} ``` ### Adding / removing connections -[addConnection](api.md#Editor+addConnection) - -[removeConnection](api.md#Editor+removeConnection) +Use the [addConnection](api.md#Editor+addConnection) and [removeConnection()](api.md#Editor+removeConnection) methods +for adding or removing connections. > Never remove a connection from the list yourself! This will result in the connection not being GCed. > Always use the `removeConnection` method. diff --git a/docs/getting-started.md b/docs/getting-started.md new file mode 100644 index 00000000..91a62bb5 --- /dev/null +++ b/docs/getting-started.md @@ -0,0 +1,37 @@ +# Getting Started + +First, you need to install the library: +```bash +# npm +npm i baklavajs + +# yarn +yarn add baklavajs +``` + +Now you need to tell Vue to use this library. Add the following code in your application entry file (usually `index.js` or `main.js`): +```js +import BaklavaJS from "baklavajs"; +Vue.use(BaklavaJS); +``` + +The library is now installed and ready to use. +To actually use it, you need to create an `Editor` instance, which you can provide to the editor component. +This is a minimal wrapper component: +```vue + + + +``` diff --git a/docs/img/node_parts.png b/docs/img/node_parts.png new file mode 100644 index 0000000000000000000000000000000000000000..5d838d7abbc63abe47c16b22f247029da4e8b0da GIT binary patch literal 15002 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 + + + + + + + + + BaklavaJS + + +
+ + + + + + \ No newline at end of file diff --git a/docs/nodeInterfaces.md b/docs/nodeInterfaces.md deleted file mode 100644 index 8c52fa50..00000000 --- a/docs/nodeInterfaces.md +++ /dev/null @@ -1,19 +0,0 @@ -# NodeInterfaces - -## Constructor -The constructor accepts the following parameters -- `parent: Node` | The node instance which this interface belongs to -- `isInput: boolean` | Specifies, whether this is an input (=`true`) or an output (=`false`) interface -- `type: string` | Sets the type of the interface. See [Types](#Types) -- `option?: VueConstructor` | This is an optional parameter. See [Option](#Option) - -## Types -The type can be any word (spaces would break the CSS class). -By default, connections are only allowed between NodeInterfaces, that have the same type. -The "dot" will also be assigned the following CSS class: `--iftype-{TYPE}`. -For example, if the type is "string", the CSS class would be `--iftype-string`. -You can use this to [style](styling.md) your interfaces. - -## Option -A node interface, which is not connected, can display a component to allow the user to change its value. -This can be any component that supports the `v-model` directive. diff --git a/docs/options/button.md b/docs/options/button.md deleted file mode 100644 index 06d4ce88..00000000 --- a/docs/options/button.md +++ /dev/null @@ -1,7 +0,0 @@ -# Button Option - -Displays a button that opens the sidebar when clicked. -The buttons label is determined by the name of the option. - -## Data type -`undefined` \ No newline at end of file diff --git a/docs/options/checkbox.md b/docs/options/checkbox.md deleted file mode 100644 index 673cf69a..00000000 --- a/docs/options/checkbox.md +++ /dev/null @@ -1,6 +0,0 @@ -# Checkbox Option - -Displays a checkbox. - -## Data type -`boolean` \ No newline at end of file diff --git a/docs/options/input.md b/docs/options/input.md deleted file mode 100644 index f2f1bb1f..00000000 --- a/docs/options/input.md +++ /dev/null @@ -1,6 +0,0 @@ -# InputOption - -Shows a simple input text field. - -## Data type -`string` diff --git a/docs/options/number.md b/docs/options/number.md deleted file mode 100644 index 5ff2d86a..00000000 --- a/docs/options/number.md +++ /dev/null @@ -1,6 +0,0 @@ -# Number Option - -Numeric input field including up/down arrows for editing numeric values. - -## Data type -`number` \ No newline at end of file diff --git a/docs/options/select.md b/docs/options/select.md deleted file mode 100644 index bd4d793b..00000000 --- a/docs/options/select.md +++ /dev/null @@ -1,11 +0,0 @@ -# SelectOption - -Allows the user to choose one of predefined values in a dropdown menu. - -## Data type -```ts -{ - selected: string - items: string[] -} -``` diff --git a/docs/options/text.md b/docs/options/text.md deleted file mode 100644 index 131fa4f7..00000000 --- a/docs/options/text.md +++ /dev/null @@ -1,6 +0,0 @@ -# TextOption - -Option which displays arbitrary text - -## Data type -`string` diff --git a/docs/prebuilt-options.md b/docs/prebuilt-options.md new file mode 100644 index 00000000..a307c8ac --- /dev/null +++ b/docs/prebuilt-options.md @@ -0,0 +1,20 @@ +# Prebuilt Options + +## Usage +All options are provided through the `Options` namespace: +```js +import { Options } from "baklavajs"; + +// in the node constructor +this.addOption("MyOption", Options.InputOption); +``` + +## List of Prebuilt Options +| Name | Description | Value Type | +| --- | --- | --- | +| `ButtonOption` | A button that opens the sidebar when clicked. The label of the button is determined by the name of the option. | `undefined` | +| `CheckboxOption` | A checkbox for setting boolean values. | `boolean` | +| `InputOption` | A simple text field. The option name will be displayed as placeholder. | `string` | +| `NumberOption` | A numeric up/down field for numeric values. | `number` | +| `SelectOption` | A dropdown select which allows the user to choose one of predefined values. | `{ selected: string, items: string[] }` | +| `TextOption` | Displays arbitrary strings | `string` | \ No newline at end of file diff --git a/package.json b/package.json index 07175e25..081c6c6b 100644 --- a/package.json +++ b/package.json @@ -22,9 +22,7 @@ "build-lib": "webpack", "gen-doc": "jsdoc2md --files ./src/model/*.ts ./src/utility/nodeBuilder.ts --configure ./jsdoc2md.json > ./docs/api.md" }, - "dependencies": { - "portal-vue": "^1.5.1" - }, + "dependencies": {}, "devDependencies": { "@babel/cli": "^7.2.3", "@babel/core": "^7.2.2", @@ -43,6 +41,7 @@ "lodash": "^4.17.11", "mini-css-extract-plugin": "^0.5.0", "node-sass": "^4.9.0", + "portal-vue": "^1.5.1", "sass-loader": "^7.0.1", "ts-loader": "^5.3.2", "typescript": "^3.2.2",