jjb-lc-designable/react/widgets/AuxToolWidget/DashedBox.js

基于alibaba-designable源码二次封装的表单设计器。

import React from 'react';
import { useHover, usePrefix, useValidNodeOffsetRect, useSelection } from '../../hooks';
import { observer } from 'jjb-lc-formily/reactive-react';
export const DashedBox = observer(() => {
  const hover = useHover();
  const prefix = usePrefix('aux-dashed-box');
  const selection = useSelection();
  const rect = useValidNodeOffsetRect(hover?.node);
  const createTipsStyle = () => {
    const baseStyle = {
      top: 0,
      left: 0,
      pointerEvents: 'none',
      boxSizing: 'border-box',
      visibility: 'hidden',
      zIndex: 2
    };
    if (rect) {
      baseStyle.transform = `perspective(1px) translate3d(${rect.x}px,${rect.y}px,0)`;
      baseStyle.height = rect.height;
      baseStyle.width = rect.width;
      baseStyle.visibility = 'visible';
    }
    return baseStyle;
  };
  if (!hover.node) return null;
  if (hover.node.hidden) return null;
  if (selection.selected.includes(hover.node.id)) return null;
  return /*#__PURE__*/React.createElement("div", {
    className: prefix,
    style: createTipsStyle()
  }, /*#__PURE__*/React.createElement("span", {
    className: prefix + '-title',
    style: {
      position: 'absolute',
      bottom: '100%',
      left: 0,
      fontSize: 12,
      userSelect: 'none',
      fontWeight: 'lighter',
      whiteSpace: 'nowrap'
    }
  }, hover?.node.getMessage('title')));
});
DashedBox.displayName = 'DashedBox';