deleteVersion()

This Hook is used to remove a specific version via API.

---

Example

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

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

  const handleDeleteData = () => {
    if (palitoRef.current) {
      palitoRef.current.deleteVersion(1.0);
    }
  };

  return (
    <div>
      <div>
        <Palito
          ref={palitoRef}
          licenseKey={LICENSE_KEY}
          initialProject={example}
        />
      </div>
      <div
        style={{
          position: "absolute",
          bottom: "40px",
          right: "20px",
          zIndex: 1000,
        }}
      >
        <button
          onClick={handleDeleteData}
          style={{ padding: "10px 20px", fontSize: "16px" }}
        >
          Delete Version
        </button>
      </div>
    </div>
  );
};

export default ExamplePage;

example.json

{
  "projectName": "Sample Project",
  "shipName": "Sample Ship",
  "compName": "Sample Company",
  "optionalFields": [],
  "versions": [
    {
      "version": 1,
      "versionMemo": "Sample Version (Example Target)",
      "editTime": "2025-09-16 16:13:16",
      "zones": [
        {
          "id": "zone-1",
          "name": "Zone 1",
          "nodes": [
            {
              "id": "1",
              "type": "custom",
              "position": {
                "x": 20,
                "y": 270
              },
              "data": {
                "component_name": "Firewall",
                "type": "Firewall",
                "security_zone": "zone-1",
                "system_category": "Network",
                "other_system_connection": [
                  {
                    "id": "2",
                    "type": "Default"
                  }
                ]
              },
              "measured": {
                "width": 80,
                "height": 100
              },
              "selected": false,
              "dragging": false
            },
            {
              "id": "2",
              "type": "custom",
              "position": {
                "x": 20,
                "y": 20
              },
              "data": {
                "component_name": "Router",
                "type": "Router",
                "security_zone": "zone-1",
                "system_category": "Network",
                "other_system_connection": []
              },
              "measured": {
                "width": 80,
                "height": 100
              },
              "selected": false
            }
          ],
          "viewport": {
            "x": 0,
            "y": 0,
            "zoom": 1
          },
          "flag": true
        }
      ]
    },
    {
      "version": 1.1,
      "versionMemo": "Sample Version",
      "editTime": "2025-09-16 16:13:11",
      "zones": [
        {
          "id": "zone-1",
          "name": "Zone 1",
          "nodes": [
            {
              "id": "1",
              "type": "custom",
              "position": {
                "x": 20,
                "y": 270
              },
              "data": {
                "component_name": "Firewall",
                "type": "Firewall",
                "security_zone": "zone-1",
                "system_category": "Network",
                "other_system_connection": [
                  {
                    "id": "2",
                    "type": "Default"
                  }
                ]
              },
              "measured": {
                "width": 80,
                "height": 100
              },
              "selected": false,
              "dragging": false
            },
            {
              "id": "2",
              "type": "custom",
              "position": {
                "x": 120,
                "y": 20
              },
              "data": {
                "component_name": "Router",
                "type": "Router",
                "security_zone": "zone-1",
                "system_category": "Network",
                "other_system_connection": []
              },
              "measured": {
                "width": 80,
                "height": 100
              },
              "selected": false
            },
            {
              "id": "3",
              "type": "custom",
              "position": {
                "x": 220,
                "y": 270
              },
              "data": {
                "component_name": "Firewall",
                "type": "Firewall",
                "security_zone": "zone-1",
                "system_category": "Network",
                "other_system_connection": [
                  {
                    "id": "2",
                    "type": "Default"
                  }
                ]
              },
              "measured": {
                "width": 80,
                "height": 100
              }
            }
          ],
          "viewport": {
            "x": 0,
            "y": 0,
            "zoom": 1
          },
          "flag": true
        }
      ]
    }
  ]
}

Example Output

If the currently selected version is deleted, it will automatically switch to the highest remaining version. If only one version remains, the following error message will be shown.

Props

Name	Type	Description	Default
versionId	number	ID of the version to delete (e.g., 1.0, 1.1)	-

Return

This hook does not return any value.