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

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

import React from 'react';
import { useTransformHelper, useCursor, usePrefix } from '../../hooks';
import { observer } from 'jjb-lc-formily/reactive-react';
import { CursorStatus } from 'jjb-lc-designable/core';
export const SnapLine = observer(() => {
  const cursor = useCursor();
  const transformHelper = useTransformHelper();
  const prefix = usePrefix('aux-snap-line');
  const createLineStyle = rect => {
    const baseStyle = {
      top: 0,
      left: 0,
      height: rect.height || 1,
      width: rect.width || 1,
      transform: `perspective(1px) translate3d(${rect.x}px,${rect.y}px,0)`,
      background: `#b0b1f3`,
      position: 'absolute',
      zIndex: 2
    };
    return baseStyle;
  };
  if (cursor.status !== CursorStatus.Dragging) return null;
  return /*#__PURE__*/React.createElement(React.Fragment, null, transformHelper.closestSnapLines.map((line, key) => {
    if (line.type !== 'normal') return null;
    return /*#__PURE__*/React.createElement("div", {
      key: key,
      className: prefix,
      style: {
        // @ts-ignore
        ...createLineStyle(line.rect)
      }
    });
  }));
});
SnapLine.displayName = 'SnapLine';