Skip to content

[Experiment] Library javascript untuk memproses fungsi berantai dengan format JSON

License

Notifications You must be signed in to change notification settings

ilomon10/fungsi-maju

Repository files navigation

Fungsi Maju

Library javascript untuk memproses fungsi berantai dengan format JSON
Build Status Build Status Build Status Publish Status

⭐️ 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 Canvas

Move node
[Drag] Mouse Click on node.
Move Node

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

Remove connection
[Hover]Mouse on connection wire, [Press] Backspace key. [Hold] Shift to select multiple connection.
Remove 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

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.

About

[Experiment] Library javascript untuk memproses fungsi berantai dengan format JSON

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Languages