function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
/**
 * NodePortMarkers - 选中图元时显示四向锚点，用于拉线
 */
import React from 'react';
import classNames from 'classnames';
import { EDGE_PORT_MARKER_OUTSET, getPortMarkerDisplayPoint } from "../utils/edgeRouting";

/** 端口圆点的视觉直径（px），与 NodePortMarkers.less 中 base width/height 保持一致 */
var MARKER_VISUAL_SIZE = 10;
import "./NodePortMarkers.less";
var PREFIX = 'pisell-floor-map-layout';
var MARKER_ANCHORS = ['top', 'right', 'bottom', 'left'];
export function NodePortMarkers(props) {
  var rect = props.rect,
    _props$contentOffsetX = props.contentOffsetX,
    contentOffsetX = _props$contentOffsetX === void 0 ? 0 : _props$contentOffsetX,
    _props$contentOffsetY = props.contentOffsetY,
    contentOffsetY = _props$contentOffsetY === void 0 ? 0 : _props$contentOffsetY,
    _props$previewOnly = props.previewOnly,
    previewOnly = _props$previewOnly === void 0 ? false : _props$previewOnly,
    onAnchorPointerDown = props.onAnchorPointerDown,
    _props$highlightAncho = props.highlightAnchors,
    highlightAnchors = _props$highlightAncho === void 0 ? [] : _props$highlightAncho,
    className = props.className,
    _props$viewportScale = props.viewportScale,
    viewportScale = _props$viewportScale === void 0 ? 1 : _props$viewportScale;
  var safeScale = Math.max(viewportScale, 0.01);
  var markerSize = MARKER_VISUAL_SIZE / safeScale;
  var markerHalf = markerSize / 2;
  var markerOutset = EDGE_PORT_MARKER_OUTSET / safeScale;
  return /*#__PURE__*/React.createElement("div", {
    className: classNames("".concat(PREFIX, "-port-markers"), className),
    style: {
      position: 'absolute',
      left: contentOffsetX + rect.left,
      top: contentOffsetY + rect.top,
      width: rect.width,
      height: rect.height,
      pointerEvents: 'none',
      zIndex: 5
    }
  }, MARKER_ANCHORS.map(function (anchor) {
    var localRect = {
      left: 0,
      top: 0,
      width: rect.width,
      height: rect.height
    };
    var pt = getPortMarkerDisplayPoint(localRect, anchor, markerOutset);
    var highlighted = highlightAnchors.includes(anchor);
    var Tag = previewOnly ? 'span' : 'button';
    return /*#__PURE__*/React.createElement(Tag, {
      key: anchor,
      type: previewOnly ? undefined : 'button',
      className: classNames("".concat(PREFIX, "-port-marker"), _defineProperty(_defineProperty({}, "".concat(PREFIX, "-port-marker--highlight"), highlighted), "".concat(PREFIX, "-port-marker--preview"), previewOnly)),
      style: {
        left: pt.x,
        top: pt.y,
        width: markerSize,
        height: markerSize,
        marginLeft: -markerHalf,
        marginTop: -markerHalf,
        pointerEvents: previewOnly ? 'none' : 'auto'
      },
      "aria-label": anchor,
      onPointerDown: previewOnly || !onAnchorPointerDown ? undefined : function (ev) {
        ev.stopPropagation();
        ev.preventDefault();
        onAnchorPointerDown(anchor, ev);
      }
    });
  }));
}