fungsi-maju v0.1.21

⭐️ 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\ HoverMouse 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]

Editor

export { Editor } from "fungsi-maju";

properties

• extends Engine
• view = View

Node

export { Node } from "fungsi-maju";

properties

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

View

properties

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

NodeView

properties

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

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.