@formily-design/react 1.0.0

package/src/widgets/AuxToolWidget/Delete.tsx

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,125 @@
+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

@@ -0,0 +1,40 @@
+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'