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

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

import React, { useEffect, useRef } from 'react';
import { useViewport, useDesigner, usePrefix } from '../../hooks';
import { Insertion } from './Insertion';
import { Selection } from './Selection';
import { FreeSelection } from './FreeSelection';
import { Cover } from './Cover';
import { DashedBox } from './DashedBox';
import { SpaceBlock } from './SpaceBlock';
import { SnapLine } from './SnapLine';
import './styles.less';
export const AuxToolWidget = () => {
  const engine = useDesigner();
  const viewport = useViewport();
  const prefix = usePrefix('auxtool');
  const ref = useRef();
  useEffect(() => {
    return engine.subscribeWith('viewport:scroll', () => {
      if (viewport.isIframe && ref.current) {
        ref.current.style.transform = `perspective(1px) translate3d(${-viewport.scrollX}px,${-viewport.scrollY}px,0)`;
      }
    });
  }, [engine, viewport]);
  if (!viewport) return null;
  return /*#__PURE__*/React.createElement("div", {
    ref: ref,
    className: prefix
  }, /*#__PURE__*/React.createElement(Insertion, null), /*#__PURE__*/React.createElement(SpaceBlock, null), /*#__PURE__*/React.createElement(SnapLine, null), /*#__PURE__*/React.createElement(DashedBox, null), /*#__PURE__*/React.createElement(Selection, null), /*#__PURE__*/React.createElement(Cover, null), /*#__PURE__*/React.createElement(FreeSelection, null));
};
AuxToolWidget.displayName = 'AuxToolWidget';