@ant-design/pro-flow/es/BasicNode/index.js

A React based Flow components

import { SelectType } from "../FlowView/constants";
import { getClsFromSelectType } from "../utils";
import React from 'react';
import { Handle, Position } from 'reactflow';
import { useStyles } from "./styles";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export var zoomNum = function zoomNum(num, zoom, limitMax) {
  if (limitMax) return zoom > 1 ? num : num / zoom;
  return num / zoom;
};
var BasicNode = function BasicNode(_ref) {
  var data = _ref.data;
  var _useStyles = useStyles(),
    styles = _useStyles.styles,
    cx = _useStyles.cx;
  var title = data.title,
    logo = data.logo,
    description = data.description,
    className = data.className,
    _data$selectType = data.selectType,
    selectType = _data$selectType === void 0 ? SelectType.SELECT : _data$selectType,
    _data$zoom = data.zoom,
    zoom = _data$zoom === void 0 ? 1 : _data$zoom,
    label = data.label,
    titleSlot = data.titleSlot,
    _data$handleType = data.handleType,
    handleType = _data$handleType === void 0 ? 'both' : _data$handleType;
  return /*#__PURE__*/_jsxs("div", {
    className: styles.wrap,
    children: [handleType === 'output' || handleType === 'both' ? /*#__PURE__*/_jsx(Handle, {
      type: "target",
      position: Position.Left,
      style: {
        left: -6
      }
    }) : null, /*#__PURE__*/_jsxs("div", {
      children: [label && /*#__PURE__*/_jsx("div", {
        style: {
          position: 'absolute',
          zIndex: 10,
          transform: "translate(0, -".concat(zoomNum(20, zoom, true), "px) scale(").concat(1 / zoom, ")"),
          // top: `-${zoomNum(24, zoom, true)}px`,
          // padding: `${2 / zoom}px ${1 / zoom}px ${2 / zoom}px 0`,
          color: "rgba(0, 0, 0, 0.45)",
          borderRadius: "4px",
          // fontSize: `${14 / zoom}px`,
          fontSize: "".concat(14, "px"),
          whiteSpace: "nowrap"
        },
        children: zoom <= 0.1 ? "".concat(String(label).substring(0, 3), "...") : label
      }), /*#__PURE__*/_jsxs("div", {
        className: cx(styles.nodeWrap, styles[getClsFromSelectType(selectType)], className),
        children: [/*#__PURE__*/_jsx("img", {
          className: 'img',
          src: logo,
          alt: ""
        }), /*#__PURE__*/_jsxs("div", {
          className: 'content',
          children: [/*#__PURE__*/_jsxs("div", {
            className: 'title',
            children: [/*#__PURE__*/_jsx("span", {
              children: title
            }), !!titleSlot && !!titleSlot.value && titleSlot.type === 'left' && /*#__PURE__*/_jsx("div", {
              className: styles.titleSlotLeft,
              children: titleSlot.value
            }), !!titleSlot && !!titleSlot.value && titleSlot.type === 'right' && /*#__PURE__*/_jsxs("div", {
              className: styles.titleSlotLeft,
              children: [/*#__PURE__*/_jsx("div", {
                style: {
                  width: '28px'
                }
              }), /*#__PURE__*/_jsx("div", {
                className: styles.titleSlotRight,
                children: titleSlot.value
              })]
            })]
          }), /*#__PURE__*/_jsx("div", {
            className: 'des',
            children: description
          })]
        })]
      })]
    }), handleType === 'input' || handleType === 'both' ? /*#__PURE__*/_jsx(Handle, {
      type: "source",
      position: Position.Right,
      style: {
        right: -6
      }
    }) : null]
  });
};
export default BasicNode;