@formily-design/react 1.0.0 → 1.0.2

package/src/widgets/AuxToolWidget/Delete.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { TreeNode } from '@formily-design/core'
-import { IconWidget } from '../IconWidget'
-import { usePrefix } from '../../hooks'
-import { Button } from 'antd'
-
-export interface IDeleteProps {
-  node: TreeNode
-  style?: React.CSSProperties
-}
-
-export const Delete: React.FC<IDeleteProps> = ({ node, style }) => {
-  const prefix = usePrefix('aux-copy')
-  if (node === node.root) return null
-  return (
-    <Button
-      className={prefix}
-      style={style}
-      type="primary"
-      onClick={() => {
-        TreeNode.remove([node])
-      }}
-    >
-      <IconWidget infer="Remove" />
-    </Button>
-  )
-}
-
-Delete.displayName = 'Delete'

package/src/widgets/AuxToolWidget/DragHandler.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { TreeNode } from '@formily-design/core'
-import { observer } from '@formily/reactive-react'
-import { IconWidget } from '../IconWidget'
-import { useDesigner, usePrefix } from '../../hooks'
-import { Button } from 'antd'
-
-export interface IDragHandlerProps {
-  node: TreeNode
-  style?: React.CSSProperties
-}
-
-export const DragHandler: React.FC<IDragHandlerProps> = observer(
-  ({ node, style }) => {
-    const designer = useDesigner()
-    const prefix = usePrefix('aux-drag-handler')
-    if (node === node.root || !node.allowDrag()) return null
-    const handlerProps = {
-      [designer.props.nodeDragHandlerAttrName]: 'true',
-    }
-    return (
-      <Button {...handlerProps} className={prefix} style={style} type="primary">
-        <IconWidget infer="Move" />
-      </Button>
-    )
-  }
-)
-
-DragHandler.displayName = 'DragHandler'

package/src/widgets/AuxToolWidget/FreeSelection.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import { useCursor, usePrefix, useViewport, useOperation } from '../../hooks'
-import { observer } from '@formily/reactive-react'
-import { CursorDragType, CursorStatus } from '@formily-design/core'
-import { calcRectByStartEndPoint } from '@formily-design/shared'
-import cls from 'classnames'
-
-export const FreeSelection = observer(() => {
-  const cursor = useCursor()
-  const viewport = useViewport()
-  const operation = useOperation()
-  const prefix = usePrefix('aux-free-selection')
-  const createSelectionStyle = () => {
-    const startDragPoint = viewport.getOffsetPoint({
-      x: cursor.dragStartPosition.topClientX,
-      y: cursor.dragStartPosition.topClientY,
-    })
-    const currentPoint = viewport.getOffsetPoint({
-      x: cursor.position.topClientX,
-      y: cursor.position.topClientY,
-    })
-    const rect = calcRectByStartEndPoint(
-      startDragPoint,
-      currentPoint,
-      viewport.dragScrollXDelta,
-      viewport.dragScrollYDelta
-    )
-    const baseStyle: React.CSSProperties = {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      opacity: 0.2,
-      borderWidth: 1,
-      borderStyle: 'solid',
-      transform: `perspective(1px) translate3d(${rect.x}px,${rect.y}px,0)`,
-      height: rect.height,
-      width: rect.width,
-      pointerEvents: 'none',
-      boxSizing: 'border-box',
-      zIndex: 1,
-    }
-    return baseStyle
-  }
-
-  if (
-    operation.moveHelper.hasDragNodes ||
-    cursor.status !== CursorStatus.Dragging ||
-    cursor.dragType !== CursorDragType.Move
-  )
-    return null
-
-  return <div className={cls(prefix)} style={createSelectionStyle()}></div>
-})

package/src/widgets/AuxToolWidget/Helpers.tsx

@@ -1,116 +0,0 @@
-import React, { useRef, useState, useLayoutEffect } from 'react'
-import { TreeNode } from '@formily-design/core'
-import { reaction } from '@formily/reactive'
-import { usePrefix, useViewport } from '../../hooks'
-import { Selector } from './Selector'
-import { Copy } from './Copy'
-import { Delete } from './Delete'
-import { DragHandler } from './DragHandler'
-import cls from 'classnames'
-
-const HELPER_DEBOUNCE_TIMEOUT = 100
-
-export interface IHelpersProps {
-  node: TreeNode
-  nodeRect: DOMRect
-}
-export interface IViewportState {
-  viewportWidth?: number
-  viewportHeight?: number
-  viewportScrollX?: number
-  viewportScrollY?: number
-  viewportIsScrollTop?: boolean
-  viewportIsScrollBottom?: boolean
-}
-
-export const Helpers: React.FC<IHelpersProps> = ({ node, nodeRect }) => {
-  const prefix = usePrefix('aux-helpers')
-  const viewport = useViewport()
-  const unmountRef = useRef(false)
-  const ref = useRef<HTMLDivElement>()
-  const [position, setPosition] = useState('top-right')
-
-  useLayoutEffect(() => {
-    let request = null
-
-    const getYInViewport = (nodeRect: DOMRect, helpersRect: DOMRect) => {
-      if (nodeRect.top - viewport.scrollY > helpersRect.height) {
-        return 'top'
-      } else if (
-        viewport.isScrollTop &&
-        nodeRect.height + helpersRect.height > viewport.height
-      ) {
-        return 'inner-top'
-      } else if (
-        nodeRect.bottom >= viewport.scrollY + viewport.height &&
-        nodeRect.height + helpersRect.height > viewport.height
-      ) {
-        return 'inner-bottom'
-      }
-
-      return 'bottom'
-    }
-
-    const getXInViewport = (nodeRect: DOMRect, helpersRect: DOMRect) => {
-      const widthDelta = helpersRect.width - nodeRect.width
-      if (widthDelta >= 0) {
-        if (nodeRect.x < widthDelta) {
-          return 'left'
-        } else if (nodeRect.right + widthDelta > viewport.width) {
-          return 'right'
-        } else {
-          return 'center'
-        }
-      }
-      return 'right'
-    }
-
-    const update = () => {
-      const helpersRect = ref.current?.getBoundingClientRect()
-      if (!helpersRect || !nodeRect) return
-      if (unmountRef.current) return
-      setPosition(
-        getYInViewport(nodeRect, helpersRect) +
-          '-' +
-          getXInViewport(nodeRect, helpersRect)
-      )
-    }
-
-    update()
-
-    return reaction(
-      () => [
-        viewport.width,
-        viewport.height,
-        viewport.scrollX,
-        viewport.scrollY,
-        viewport.isScrollBottom,
-        viewport.isScrollTop,
-      ],
-      () => {
-        clearTimeout(request)
-        request = setTimeout(update, HELPER_DEBOUNCE_TIMEOUT)
-      }
-    )
-  }, [viewport, nodeRect])
-
-  if (!nodeRect || !node) return null
-
-  return (
-    <div
-      className={cls(prefix, {
-        [position]: true,
-      })}
-      ref={ref}
-    >
-      <div className={cls(prefix + '-content')}>
-        <Selector node={node} />
-        {node?.allowClone() === false ? null : <Copy node={node} />}
-        {node?.allowDrag() === false ? null : <DragHandler node={node} />}
-        {node?.allowDelete() === false ? null : <Delete node={node} />}
-      </div>
-    </div>
-  )
-}
-
-Helpers.displayName = 'Helpers'

package/src/widgets/AuxToolWidget/Insertion.tsx

@@ -1,80 +0,0 @@
-import React from 'react'
-import { useMoveHelper, usePrefix } from '../../hooks'
-import { ClosestPosition } from '@formily-design/core'
-import { observer } from '@formily/reactive-react'
-
-export const Insertion = observer(() => {
-  const moveHelper = useMoveHelper()
-  const prefix = usePrefix('aux-insertion')
-  const createInsertionStyle = (): React.CSSProperties => {
-    const closestDirection = moveHelper.viewportClosestDirection
-    const closestRect = moveHelper.viewportClosestOffsetRect
-    const isInlineLayout = moveHelper.closestNode?.moveLayout === 'horizontal'
-    const baseStyle: React.CSSProperties = {
-      position: 'absolute',
-      transform: 'perspective(1px) translate3d(0,0,0)',
-      top: 0,
-      left: 0,
-    }
-    if (!closestRect) return baseStyle
-    if (
-      closestDirection === ClosestPosition.Before ||
-      closestDirection === ClosestPosition.ForbidBefore
-    ) {
-      baseStyle.width = 2
-      baseStyle.height = closestRect.height
-      baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y}px,0)`
-    } else if (
-      closestDirection === ClosestPosition.After ||
-      closestDirection === ClosestPosition.ForbidAfter
-    ) {
-      baseStyle.width = 2
-      baseStyle.height = closestRect.height
-      baseStyle.transform = `perspective(1px) translate3d(${
-        closestRect.x + closestRect.width - 2
-      }px,${closestRect.y}px,0)`
-    } else if (
-      closestDirection === ClosestPosition.InnerAfter ||
-      closestDirection === ClosestPosition.Under ||
-      closestDirection === ClosestPosition.ForbidInnerAfter ||
-      closestDirection === ClosestPosition.ForbidUnder
-    ) {
-      if (isInlineLayout) {
-        baseStyle.width = 2
-        baseStyle.height = closestRect.height
-        baseStyle.transform = `perspective(1px) translate3d(${
-          closestRect.x + closestRect.width - 2
-        }px,${closestRect.y}px,0)`
-      } else {
-        baseStyle.width = closestRect.width
-        baseStyle.height = 2
-        baseStyle.transform = `perspective(1px) translate3d(${
-          closestRect.x
-        }px,${closestRect.y + closestRect.height - 2}px,0)`
-      }
-    } else if (
-      closestDirection === ClosestPosition.InnerBefore ||
-      closestDirection === ClosestPosition.Upper ||
-      closestDirection === ClosestPosition.ForbidInnerBefore ||
-      closestDirection === ClosestPosition.ForbidUpper
-    ) {
-      if (isInlineLayout) {
-        baseStyle.width = 2
-        baseStyle.height = closestRect.height
-        baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y}px,0)`
-      } else {
-        baseStyle.width = closestRect.width
-        baseStyle.height = 2
-        baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y}px,0)`
-      }
-    }
-    if (closestDirection.includes('FORBID')) {
-      baseStyle.backgroundColor = 'red'
-    }
-    return baseStyle
-  }
-
-  return <div className={prefix} style={createInsertionStyle()}></div>
-})
-
-Insertion.displayName = 'Insertion'

package/src/widgets/AuxToolWidget/ResizeHandler.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import cls from 'classnames'
-import { useDesigner, usePrefix } from '../../hooks'
-import { TreeNode } from '@formily-design/core'
-
-export interface IResizeHandlerProps {
-  node: TreeNode
-}
-
-export const ResizeHandler: React.FC<IResizeHandlerProps> = (props) => {
-  const designer = useDesigner()
-  const prefix = usePrefix('aux-node-resize-handler')
-  const createHandler = (value: string) => {
-    return {
-      [designer.props.nodeResizeHandlerAttrName]: value,
-      className: cls(prefix, value),
-    }
-  }
-  const allowResize = props.node.allowResize()
-  if (!allowResize) return null
-  const allowX = allowResize.includes('x')
-  const allowY = allowResize.includes('y')
-  return (
-    <>
-      {allowX && <div {...createHandler('left-center')}></div>}
-      {allowX && <div {...createHandler('right-center')}></div>}
-      {allowY && <div {...createHandler('center-top')}></div>}
-      {allowY && <div {...createHandler('center-bottom')}></div>}
-      {allowX && allowY && <div {...createHandler('left-top')}></div>}
-      {allowY && allowY && <div {...createHandler('right-top')}></div>}
-      {allowX && allowY && <div {...createHandler('left-bottom')}></div>}
-      {allowY && allowY && <div {...createHandler('right-bottom')}></div>}
-    </>
-  )
-}

package/src/widgets/AuxToolWidget/Selection.tsx

@@ -1,85 +0,0 @@
-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 '@formily/reactive-react'
-import { TreeNode } from '@formily-design/core'
-import { TranslateHandler } from './TranslateHandler'
-export interface ISelectionBoxProps {
-  node: TreeNode
-  showHelpers: boolean
-}
-
-export const SelectionBox: React.FC<ISelectionBoxProps> = (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: React.CSSProperties = {
-      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 (
-    <div {...selectionId} className={prefix} style={createSelectionStyle()}>
-      <div className={innerPrefix}></div>
-      <ResizeHandler node={props.node} />
-      <TranslateHandler node={props.node} />
-      {props.showHelpers && (
-        <Helpers {...props} node={props.node} nodeRect={nodeRect} />
-      )}
-    </div>
-  )
-}
-
-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 (
-    <Fragment>
-      {selection.selected.map((id) => {
-        const node = tree.findById(id)
-        if (!node) return
-        if (node.hidden) return
-        return (
-          <SelectionBox
-            key={id}
-            node={node}
-            showHelpers={selection.selected.length === 1}
-          />
-        )
-      })}
-    </Fragment>
-  )
-})
-
-Selection.displayName = 'Selection'

package/src/widgets/AuxToolWidget/Selector.tsx

@@ -1,125 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react'
-import { TreeNode } from '@formily-design/core'
-import { useHover, useSelection, usePrefix } from '../../hooks'
-import { IconWidget } from '../IconWidget'
-import { NodeTitleWidget } from '../NodeTitleWidget'
-import { Button } from 'antd'
-import { observer } from '@formily/reactive-react'
-
-const useMouseHover = <T extends { current: HTMLElement }>(
-  ref: T,
-  enter?: () => void,
-  leave?: () => void
-) => {
-  useEffect(() => {
-    let timer = null
-    let unmounted = false
-    const onMouseOver = (e: MouseEvent) => {
-      const target: HTMLElement = e.target as any
-      clearTimeout(timer)
-      timer = setTimeout(() => {
-        if (unmounted) return
-        if (ref?.current?.contains(target)) {
-          enter && enter()
-        } else {
-          leave && leave()
-        }
-      }, 100)
-    }
-
-    document.addEventListener('mouseover', onMouseOver)
-    return () => {
-      unmounted = true
-      document.removeEventListener('mouseover', onMouseOver)
-    }
-  }, [])
-}
-
-export interface ISelectorProps {
-  node: TreeNode
-  style?: React.CSSProperties
-}
-
-export const Selector: React.FC<ISelectorProps> = observer(({ node }) => {
-  const hover = useHover()
-  const [expand, setExpand] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-  const selection = useSelection()
-  const prefix = usePrefix('aux-selector')
-  const renderIcon = (node: TreeNode) => {
-    const icon = node.designerProps.icon
-    if (icon) {
-      return <IconWidget infer={icon} />
-    }
-    if (node === node.root) {
-      return <IconWidget infer="Page" />
-    } else if (node.designerProps?.droppable) {
-      return <IconWidget infer="Container" />
-    }
-    return <IconWidget infer="Component" />
-  }
-
-  const renderMenu = () => {
-    const parents = node.getParents()
-    return (
-      <div
-        className={prefix + '-menu'}
-        style={{
-          position: 'absolute',
-          top: '100%',
-          left: 0,
-        }}
-      >
-        {parents.slice(0, 4).map((parent) => {
-          return (
-            <Button
-              key={parent.id}
-              type="primary"
-              onClick={() => {
-                selection.select(parent.id)
-              }}
-              onMouseEnter={() => {
-                hover.setHover(parent)
-              }}
-            >
-              {renderIcon(parent)}
-              <span style={{ transform: 'scale(0.85)', marginLeft: 2 }}>
-                <NodeTitleWidget node={parent} />
-              </span>
-            </Button>
-          )
-        })}
-      </div>
-    )
-  }
-
-  useMouseHover(
-    ref,
-    () => {
-      setExpand(true)
-    },
-    () => {
-      setExpand(false)
-    }
-  )
-
-  return (
-    <div ref={ref} className={prefix}>
-      <Button
-        className={prefix + '-title'}
-        type="primary"
-        onMouseEnter={() => {
-          hover.setHover(node)
-        }}
-      >
-        {renderIcon(node)}
-        <span>
-          <NodeTitleWidget node={node} />
-        </span>
-      </Button>
-      {expand && renderMenu()}
-    </div>
-  )
-})
-
-Selector.displayName = 'Selector'

package/src/widgets/AuxToolWidget/SnapLine.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import { useTransformHelper, useCursor, usePrefix } from '../../hooks'
-import { observer } from '@formily/reactive-react'
-import { CursorStatus } from '@formily-design/core'
-
-export const SnapLine = observer(() => {
-  const cursor = useCursor()
-  const transformHelper = useTransformHelper()
-  const prefix = usePrefix('aux-snap-line')
-  const createLineStyle = (rect: DOMRect) => {
-    const baseStyle: React.CSSProperties = {
-      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 (
-    <>
-      {transformHelper.closestSnapLines.map((line: any, key) => {
-        if (line.type !== 'normal') return null
-        return (
-          <div
-            key={key}
-            className={prefix}
-            style={createLineStyle(line.rect)}
-          ></div>
-        )
-      })}
-    </>
-  )
-})
-
-SnapLine.displayName = 'SnapLine'