How to add/remove a port dynamically of a cell from the react component?

[dPacc]

I have a choice node react component

// choiceNode.tsx
import { memo, FC } from "react";
import { ReactShape } from "@antv/x6-react-shape";
import { Row, Col, Input } from "antd";

export interface reactNodeType {
  node?: ReactShape;
  choicePrompt: string;
  disableSecondChoice: boolean;
  choiceText1: string;
  choiceText2: string;
}

const Index: FC<reactNodeType> = memo(function Index({
  node,
  choicePrompt,
  disableSecondChoice,
  choiceText1,
  choiceText2,
}) {
  return (
    <Col
      style={{
        borderRadius: "5px",
        boxShadow: "0px 0px 8px rgba(0, 0, 0, 0.1)",
      }}
    >
      <div className="da-border-1 da-overflow-hidden da-border-color-black-40 da-border-color-dark-80 da-border-radius da-bg-color-black-0 da-bg-color-dark-100 da-p-16 da-card-1">
        <Row gutter={16} align="middle">
          <Col
            span={24}
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              fontWeight: "bold",
              fontSize: "16px",
              marginBottom: "4px",
            }}
          >
            Choice Prompt
          </Col>
          <Row>
            <Input.TextArea
              value={choicePrompt}
              autoSize={{ minRows: 2, maxRows: 3 }}
              disabled
              style={{
                color: "black",
                cursor: "pointer",
                backgroundColor: "transparent",
              }}
            />
          </Row>

          {/* 1 Line space */}
          <div
            style={{
              height: "14px",
              width: "100%",
            }}
          />

          <Col
            span={24}
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              fontWeight: "bold",
              fontSize: "16px",
              marginBottom: "4px",
            }}
          >
            Choices
          </Col>
          <Row>
            <Input.TextArea
              value={choiceText1}
              autoSize={{ minRows: 2, maxRows: 6 }}
              disabled
              style={{
                color: "black",
                cursor: "pointer",
                backgroundColor: "transparent",
              }}
            />
          </Row>

          {/* 1 Line space */}
          <div
            style={{
              height: "8px",
              width: "100%",
            }}
          />

          <Row>
            <Input.TextArea
              value={choiceText2}
              autoSize={{ minRows: 2, maxRows: 6 }}
              disabled
              style={{
                color: disableSecondChoice ? "" : "black",
                cursor: disableSecondChoice ? "not-allowed" : "pointer",
                backgroundColor: disableSecondChoice ? "" : "transparent",
              }}
            />
          </Row>
        </Row>
      </div>
    </Col>
  );
});

export default Index;

I then registered the node as follows

import { Graph, Node } from "@antv/x6";
import ChoicesNodeComponent from "./nodes/ChoicesNode";
import "@antv/x6-react-shape";

export const choicesNode = Graph.registerNode("choices-node", {
  inherit: "react-shape",
  width: 200,
  height: 100,
  component(node: Node) {
    return (
      <ChoicesNodeComponent
        choicePrompt={node.data.choicePrompt}
        disableSecondChoice={node.data.disableSecondChoice}
        choiceText1={node.data.choiceText1}
        choiceText2={node.data.choiceText2}
      />
    );
  },
  tools: [
    {
      name: "button-remove",
      args: { x: 10, y: 10 },
    },
  ],
  ports: {
    groups: {
      in: {
        position: "left",
        attrs: {
          circle: {
            r: 7,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 2,
            fill: "#fff",
            style: {
              visibility: "hidden",
            },
          },
        },
      },
      out: {
        position: "right",
        attrs: {
          circle: {
            r: 7,
            magnet: true,
            stroke: "#5F95FF",
            strokeWidth: 2,
            fill: "#fff",
            style: {
              visibility: "hidden",
            },
          },
        },
      },
    },
    items: [
      {
        group: "in",
        args: { x: 10, dy: 85 },
      },
      {
        group: "out",
        args: { x: 12, dy: 160 },
      },
      {
        group: "out",
        args: { x: 12, dy: 180 },
      },
    ],
  },
});

How can I dynamically add or remove ports from the choiceNode.tsx file using the node prop

[NewByVector]

Hopefully these api will help you