<Palito />

The <Palito /> component renders the core canvas of the Palito library.
Through this component, visual features such as node rendering, drag-and-drop, and topology editing are provided.

⚠️ licenseKey is required, and internal methods can be accessed through ref.

---

Minimum Example

import { useRef } from "react";
import { Palito } from "../palito/Palito.jsx";

const ExamplePage = () => {
  const palitoRef = useRef(null);
  const LICENSE_KEY = "key-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

  return (
    <div>
      <Palito ref={palitoRef} licenseKey={LICENSE_KEY} />
    </div>
  );
};

export default ExamplePage;

---

Props

Name	Type	Description	Required
ref	Ref<PalitoHandle>	Reference object to manipulate the Palito instance	✅
licenseKey	string	License key for API server authentication	✅
customNodes	CustomNode[]	Array of user-defined custom node information	❌
theme1	Theme	Configuration object for the light theme	❌
theme2	Theme	Configuration object for the dark theme	❌
initialProject	Project	Project data to load during initial rendering	❌
width	string	Adjusts the overall width of Palito as a percentage (default: "100")	❌
height	string	Adjusts the overall height of Palito as a percentage (default: "100")	❌

---

Return

This component is a React Component and does not return any value directly.
However, internal methods can be called through the ref.

---

Advanced Example

ExamplePage.jsx

import { useRef } from "react";
import { Palito } from "../palito/Palito.jsx";

import example from "./example.json";
import themeSample1 from "./themeSample1.json";
import themeSample2 from "./themeSample2.json";
import MyCustomIcon from "../assets/my-custom-icon.svg";

const ExamplePage = () => {
  const palitoRef = useRef(null);
  const LICENSE_KEY = "key-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

  const handleGetData = () => {
    if (palitoRef.current) {
      const allNodes = palitoRef.current.getAllNodes();
      const graphStyle = palitoRef.current.getGraphStyle();
      const selectedNode = palitoRef.current.getSelectedNodeData();

      console.log("--- Palito Library Data ---");
      console.log("All Nodes:", allNodes);
      console.log("Graph Style:", graphStyle);
      console.log("Selected Node:", selectedNode);
    }
  };

  const handleInjectData = () => {
    if (palitoRef.current) {
      palitoRef.current.setProject(example);
    }
  };

  const userCustomNodes = [
    {
      label: "Terminal Devices",
      nodes: [
        {
          type: "Sample Terminal Node",
          icon: MyCustomIcon,
          isReactComponent: false,
        },
        {
          type: "Sample Terminal Node 2",
          icon: MyCustomIcon,
          isReactComponent: false,
        },
      ],
    },
    {
      label: "Network Devices",
      nodes: [
        {
          type: "Sample Network Node",
          icon: MyCustomIcon,
          isReactComponent: false,
        },
      ],
    },
    {
      label: "Additional Devices",
      nodes: [
        {
          type: "Sample Additional Node",
          icon: MyCustomIcon,
          isReactComponent: false,
        },
      ],
    },
  ];

  return (
    <div>
      <Palito
        ref={palitoRef}
        licenseKey={LICENSE_KEY}
        customNodes={userCustomNodes}
        theme1={themeSample1}
        theme2={themeSample2}
        initialProject={example}
      />

      <div
        style={{
          position: "absolute",
          bottom: "40px",
          right: "20px",
          zIndex: 1000,
        }}
      >
        <button
          onClick={handleGetData}
          style={{ padding: "10px 20px", fontSize: "16px" }}
        >
          Get Data from Library
        </button>
        <button
          onClick={handleInjectData}
          style={{ padding: "10px 20px", fontSize: "16px", marginLeft: "10px" }}
        >
          Set Data to Library
        </button>
      </div>
    </div>
  );
};

export default ExamplePage;

themeSample1.json

{
  "main": "#3757D2",
  "mainSmooth": "#405FD4",
  "shadow": "#2C46A9",
  "contrast": "#ffffff",
  "contrastSmooth": "#ECEBEB",
  "point1": "#ffffff",
  "point2": "#ffffff",
  "point3": "#0f9"
}

themeSample2.json

{
  "Main": "#ffffff",
  "MainSmooth": "#ECEBEB",
  "Shadow": "#dddddd",
  "Contrast": "#000000",
  "ContrastSmooth": "#111111",
  "Point1": "#016D9F",
  "Point2": "#107EB2",
  "Point3": "#015982"
}

---

Notes

• customNodes defines the list of nodes displayed in the sidebar. Each type must be unique.
• theme1 and theme2 are color palette JSON objects for light and dark themes, respectively.
• Example methods available via ref:
  • getAllNodes()
  • getSelectedNodeData()
  • getGraphStyle()
  • setProject(data: Project)
• The library will not function without a valid license key.