shalu-system-designer/apps/flowchart-designer/src/components/nodes/Port.tsx

import { PlusOutlined } from "@ant-design/icons";
import React from "react";

export default function Port(props: {
  hovered: boolean;
  out?: boolean;
  style?: React.CSSProperties;
}) {
  const { hovered, style = {}, out = true } = props;
  const [canAdd, setCanAdd] = React.useState(false);

  const handleSetCanAdd = (value: boolean) => {
    out && setCanAdd(value);
  };

  const extraStyle = React.useMemo(() => {
    if (out && canAdd) {
      return {
        transform: "scale(2) translateY(-50%)"
      };
    }
    return {};
  }, [canAdd]);

  return (
    <div
      className="node-port flex items-center justify-center"
      style={{
        transform: hovered ? "scale(1.5) translateY(-50%)" : "scale(1) translateY(-50%)",
        opacity: hovered ? 1 : 0.5,
        ...style,
        ...extraStyle
      }}
      onMouseEnter={() => handleSetCanAdd(true)}
      onMouseLeave={() => handleSetCanAdd(false)}
    >
      { out && <PlusOutlined
        className="transform scale-0 transition duration-300 color-#fff text-8px"
        style={{ transform: canAdd ? "scale(1)" : "scale(0)" }}
      />}
    </div>
  );
}