fungsi-maju

⭐️ Feature

• Engine untuk proses fungsi
• Validator skema json
• Editor visual
• Server-side processing
• Custom component

📦 Getting Started

NOTE: LIBRARY INI MASIH BERSIFAT EKPERIMEN

---

$ npm install fungsi-maju

npm

import { Engine } from 'fungsi-maju';
import 'fungsi-maju/build/index.css' // If you import a css file in your library

let libraryInstance = new Engine("0.1.0");
...

self-host/cdn

<link href="https://unpkg.com/fungsi-maju@latest/build/index.css" rel="stylesheet">
<script src="https://unpkg.com/fungsi-maju@latest/build/index.js"></script>

<script>
  let FungsiMaju = window.Engine.default;
  let libraryInstance = new FungsiMaju.Engine("0.1.0");
  ...
</script>

Example

import { Editor, Node, Component } from "fungsi-maju";

class Basic extends Component {
  constructor() {
    super("Basic");
  }
  builder(nodeView) {
    nodeView.addSocket("output", 0, "Output");
    return nodeView;
  }
  worker(node, input) {
    const output = input * 2;
    return output;
  }
}

class Debug extends Component {
  constructor() {
    super("Debug");
  }
  builder(nodeView) {
    nodeView.addSocket("input", 0, "Output");
    return nodeView;
  }
  worker(node, input) {
    console.log(input);
  }
}

let container = document.getElementById("editor");

let editor = new Editor("0.1.0", container);

editor.register(new Basic());
editor.register(new Debug());

let node = [
  new Node(Editor.generateId(), "Basic"),
  new Node(Editor.generateId(), "Debug"),
];

editor.addNode(node[0]);
editor.addNode(node[1]);

editor.connect(node[0], 0, node[1]);

const inputValue = 1;

editor.process(inputValue, node[0]);

editor.on("process", () => {
  console.log("process")
});

Tanpa View

import { Editor, Node, Component } from "fungsi-maju";

class MyComponent extends Component{
  constructor(name) {
    super(name);
  }
  worker(node, input) {
    const output = input + 1;
    return output;
  }
}

let editor = new Editor("0.1.0");

editor.register(new MyComponent("CustomComponent"));

let node = [
  new Node(Editor.generateId(), "CustomComponent"),
  new Node(Editor.generateId(), "CustomComponent"),
]

editor.addNode(node[0]);
editor.addNode(node[1]);

editor.connect(node[0], 0, node[1]);

const inputValue = 1;

editor.process(inputValue, node[0]);

editor.on("process", () => {
  console.log("process")
});

Interaction

Move canvas
[Press + Hold] Space key then [Drag] Click on canvas.

Move node
[Drag] Mouse Click on node.

Connect node socket
Click on node socket source, then Click on target socket.

Remove connection
[Hover]Mouse on connection wire, [Press] Backspace key. [Hold] Shift to select multiple connection.

API

Schema

{
  "version": "1.0.0",
  "nodes": [
    {
      "id": "string",
      "type": "string",
      "metadata": {},
      "outputs": [
        [ "string" ]
      ]
    },
    ...
  ]
}

Events

• process
• nodeselected
• nodecreate
• nodecreated
• noderemove
• noderemoved
• connectionselected
• connectioncreated
• connectionremoved

Engine

export { Engine } from "fungsi-maju";

properties

• extends Emitter
• version = string
• components = [Connection]
• nodes = [Node]

method	arguments	return
register(component)	Component	Engine
validate(data)	json	boolean
process(input, startId, json)	value, Node.id, json?	boolean

Editor

export { Editor } from "fungsi-maju";

properties

• extends Engine
• view = View

method	arguments	return
static generateId()	-	string
addNode(node)	Node	Node
removeNode(node)	Node	boolean
getNode(node)	Node	boolean
connect(from, branch, to)	Node, number, Node	boolean
toJSON()	-	json
fromJSON(json)	json	json

Node

export { Node } from "fungsi-maju";

properties

• id = string
• metadata = object
• position = object
• type = string
• outputs = [ [Node.id] ]

method	arguments	return
getData(key)	any	any
setData(key, value)	any, value	metadata
removeData(key)	any	metadata
addOutput(branch, id)	number, Node.id	Node
removeOutput(id, branch)	Node.id, number?	Node
toJSON()	-	json

View

properties

• emitter = Editor
• area = Area
• picker = Picker
• selection = Selection
• container = HTMLElement
• connection = {Connection}
• selected = {NodeView}
• nodes = {NodeView}

method	arguments	return
addNode(node)	Node	NodeView
getNode(id)	Node.id	NodeView
removeNode(node)	Node	Node

NodeView

properties

• id = Node.id
• view = View
• node = Node
• sockets = {Socket}
• component = {Component}
• container = HTMLElement
• element = Element

method	arguments	return
update()	-	-
render()	-	-
toJSON()	-	json

Credit

Konsep prosesnya mirip Node Red.
Editor visual adopsi dari vvvv.
Library ini diekstrak dari library ReteJS.
Emitter yang dipakai yaitu nanoevents.
Template library menggunkan js-library-boilerplate.