Package Name

npm i node-ified-view

import { NodifyCode } from 'node-ified-view';

screenshot

Description

NodifyCode is a dynamic React component designed as a complex interactive UI for visualizing and managing draggable elements (boxes) and their connections through paths inside a container. The component supports adding function, parameter, and output boxes, dragging and connecting elements with paths. and executing associated logical functionality based on user-defined settings.

Adds boxes of types: function, parameter, and output.

Draggable boxes.

Connects boxes visually with paths.

Inline editing support for boxes with configurable dropdowns, inputs, and numeric inputs.

Export the entire state which can be saved and used as init data when to load it by default.

run will execute the logics built during connection

Interaction Flow

Users add new boxes (function, parameter, output, box) from the left panel.

Users drag boxes freely within the main container.

Users create connections by dragging from one box endpoint to another.

Boxes show editing controls based on the mode and usage.

User-defined logic can be executed based on function-parameter mappings.

The state can be exported or prefilled for persistence or sharing.

Installation

You can install the package via npm: npm i node-ified-view

| Prop Name | Type | Description | Default | | ---------------- | -------- | ------------------------------------------------------------------------------------------ | ------- | | finalResult | function | Callback function that receives the final output after execution of the logical mapping. | - | | connectionObject | function | Callback function to receive the serialized connection and elements object for export. | - | | type | string | Defines component mode. E.g., 'logical' or 'view-only' to toggle behavior and UI elements. | - | | usage | string | Defines usage context, affects button labels and behaviors. | - | | hideBoxPanel | boolean | Hides the side panel for adding new elements when true. | false | | baseObject | object | The base object used for logic execution mapping of functions/parameters. | {} | | prefilled | object | Data object containing initial elements, connections, mappings to prefill component state. | {} |

Example

import { useRef, useState } from 'react';
import { NodifyCode } from 'node-ified-view';

function App() {
  const baseObject = useRef({
    param1: 1,
    param2: 2,
    calculate: (a, b) => {
      return { v: a - b, hh: 'oioi' };
    },
  });
  const [preFilled, setPreFilled] = useState({});

  const out = (e) => {
    //output from Run
  };

  return (
    <div>
      <NodifyCode
        baseObject={baseObject?.current}
        finalResult={out}
        connectionObject={(e) => {
          //prefilled connection object
        }}
        prefilled={preFilled}
        type='view-only' //--> hides settings good for only rendering purpose.
        usage='logical' //--> for executing logics, behave as simple view if no value set.
        hideBoxPanel={true}
      />
    </div>
  );
}

export default App;