<Palito />

<Palito /> 컴포넌트는 Palito 라이브러리의 핵심 캔버스를 렌더링하는 컴포넌트입니다.
해당 컴포넌트를 통해 노드 표시, 드래그 앤 드롭, 토폴로지 편집 등의 시각적 기능을 제공합니다.

⚠️ licenseKey는 필수이며, 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

이름	타입	설명	필수 여부
ref	Ref<PalitoHandle>	Palito 인스턴스를 조작하기 위한 참조 객체	✅
licenseKey	string	API 서버 인증을 위한 라이선스 키	✅
customNodes	CustomNode[]	사용자 정의 노드 정보 배열	❌
theme1	Theme	밝은 테마 구성 객체	❌
theme2	Theme	어두운 테마 구성 객체	❌
initialProject	Project	초기 렌더링 시 불러올 프로젝트 데이터	❌
width	string	Palito 전체 가로 크기를 비율로 조정 (기본 "100")	❌
height	string	Palito 전체 세로 크기를 비율로 조정 (기본 "100)	❌

---

Return

이 컴포넌트는 React Component이며, 직접적인 반환값은 없습니다.
다만, 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}
        width="80"
        height="80"
      />

      <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"
}

---

참고사항

• customNodes는 사이드바에 표시할 노드 목록을 정의합니다. 각 type은 고유해야 합니다.
• theme1, theme2는 색상 팔레트를 정의한 JSON 객체로, 밝은/어두운 테마 각각 적용됩니다.
• 주요 ref 메서드 예시:
  • getAllNodes()
  • getSelectedNodeData()
  • getGraphStyle()
  • setProject(data: Project)
• 라이선스 키가 없을 경우 라이브러리는 작동하지 않습니다.