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

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

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React, { Fragment } from 'react';
import { Helpers } from './Helpers';
import { ResizeHandler } from './ResizeHandler';
import { useSelection, useValidNodeOffsetRect, useTree, useCursor, useMoveHelper, usePrefix, useDesigner } from '../../hooks';
import { observer } from 'jjb-lc-formily/reactive-react';
import { TranslateHandler } from './TranslateHandler';
export const SelectionBox = props => {
  const designer = useDesigner();
  const prefix = usePrefix('aux-selection-box');
  const innerPrefix = usePrefix('aux-selection-box-inner');
  const nodeRect = useValidNodeOffsetRect(props.node);
  const createSelectionStyle = () => {
    const baseStyle = {
      position: 'absolute',
      top: 0,
      left: 0,
      boxSizing: 'border-box',
      zIndex: 4
    };
    if (nodeRect) {
      baseStyle.transform = `perspective(1px) translate3d(${nodeRect.x}px,${nodeRect.y}px,0)`;
      baseStyle.height = nodeRect.height;
      baseStyle.width = nodeRect.width;
    }
    return baseStyle;
  };
  if (!nodeRect) return null;
  if (!nodeRect.width || !nodeRect.height) return null;
  const selectionId = {
    [designer.props?.nodeSelectionIdAttrName]: props.node.id
  };
  return /*#__PURE__*/React.createElement("div", _extends({}, selectionId, {
    className: prefix,
    style: createSelectionStyle()
  }), /*#__PURE__*/React.createElement("div", {
    className: innerPrefix
  }), /*#__PURE__*/React.createElement(ResizeHandler, {
    node: props.node
  }), /*#__PURE__*/React.createElement(TranslateHandler, {
    node: props.node
  }), props.showHelpers &&
  /*#__PURE__*/
  // @ts-ignore
  React.createElement(Helpers, _extends({}, props, {
    node: props.node,
    nodeRect: nodeRect
  })));
};
export const Selection = observer(() => {
  const selection = useSelection();
  const tree = useTree();
  const cursor = useCursor();
  const viewportMoveHelper = useMoveHelper();
  if (cursor.status !== 'NORMAL' && viewportMoveHelper.touchNode) return null;
  return /*#__PURE__*/React.createElement(Fragment, null, selection.selected.map(id => {
    const node = tree.findById(id);
    if (!node) return;
    if (node.hidden) return;
    return /*#__PURE__*/React.createElement(SelectionBox, {
      key: id,
      node: node,
      showHelpers: selection.selected.length === 1
    });
  }));
});
Selection.displayName = 'Selection';