@formily-design/react 1.0.0 → 1.0.1

package/src/widgets/AuxToolWidget/SpaceBlock.tsx

@@ -1,112 +0,0 @@
-import React, { Fragment } from 'react'
-import { useTransformHelper, useCursor, usePrefix } from '../../hooks'
-import { observer } from '@formily/reactive-react'
-import { CursorStatus } from '@formily-design/core'
-import { ILineSegment, calcRectOfAxisLineSegment } from '@formily-design/shared'
-
-export const SpaceBlock = observer(() => {
-  const cursor = useCursor()
-  const transformHelper = useTransformHelper()
-  const prefix = usePrefix('aux-space-block')
-
-  if (cursor.status !== CursorStatus.Dragging) return null
-
-  const renderRulerBox = (distance: number, type: string) => {
-    if (type === 'top' || type === 'bottom') {
-      return (
-        <div className={prefix + '-ruler-v'}>
-          <div className={prefix + '-ruler-indicator'}>
-            <span>{distance?.toFixed(0)}</span>
-          </div>
-        </div>
-      )
-    } else if (type === 'left' || type === 'right') {
-      return (
-        <div className={prefix + '-ruler-h'}>
-          <div className={prefix + '-ruler-indicator'}>
-            <span>{distance?.toFixed(0)}</span>
-          </div>
-        </div>
-      )
-    }
-  }
-
-  const renderDashedLine = (line: ILineSegment) => {
-    const rect = calcRectOfAxisLineSegment(line)
-    if (!rect) return null
-    const width = rect.width || 2
-    const height = rect.height || 2
-    return (
-      <svg
-        width={width + 'px'}
-        height={height + 'px'}
-        viewBox={`0 0 ${width} ${height}`}
-        style={{
-          top: 0,
-          left: 0,
-          transform: `perspective(1px) translate3d(${line.start.x}px,${line.start.y}px,0)`,
-          position: 'absolute',
-          zIndex: 3,
-        }}
-      >
-        <line
-          x1={line.start.x - rect.x}
-          y1={line.start.y - rect.y}
-          x2={line.end.x - rect.x}
-          y2={line.end.y - rect.y}
-          strokeDasharray={4}
-          stroke="#745BFF"
-          strokeWidth={2}
-        ></line>
-      </svg>
-    )
-  }
-
-  return (
-    <>
-      {transformHelper.measurerSpaceBlocks.map(
-        ({ type, crossDragNodesRect, distance, extendsLine }, key) => {
-          return (
-            <Fragment>
-              {renderDashedLine(extendsLine)}
-              <div
-                key={key}
-                style={{
-                  top: 0,
-                  left: 0,
-                  height: crossDragNodesRect.height,
-                  width: crossDragNodesRect.width,
-                  transform: `perspective(1px) translate3d(${crossDragNodesRect.x}px,${crossDragNodesRect.y}px,0)`,
-                  position: 'absolute',
-                  zIndex: 3,
-                }}
-              >
-                {renderRulerBox(distance, type)}
-              </div>
-            </Fragment>
-          )
-        }
-      )}
-      {transformHelper.thresholdSpaceBlocks.map(({ rect }, key) => {
-        return (
-          <div
-            key={key}
-            className={prefix}
-            style={{
-              top: 0,
-              left: 0,
-              height: rect.height,
-              width: rect.width,
-              transform: `perspective(1px) translate3d(${rect.x}px,${rect.y}px,0)`,
-              position: 'absolute',
-              background: 'rgba(255, 0, 0, 0.2)',
-              zIndex: 1,
-            }}
-          ></div>
-        )
-      })}
-    </>
-  )
-})
-
-SpaceBlock.displayName = 'SpaceBlock'

package/src/widgets/AuxToolWidget/TranslateHandler.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import cls from 'classnames'
-import { useDesigner, usePrefix } from '../../hooks'
-import { TreeNode } from '@formily-design/core'
-import { IconWidget } from '../IconWidget'
-
-export interface ITranslateHandlerProps {
-  node: TreeNode
-}
-
-export const TranslateHandler: React.FC<ITranslateHandlerProps> = (props) => {
-  const designer = useDesigner()
-  const prefix = usePrefix('aux-node-translate-handler')
-  const createHandler = (value: string) => {
-    return {
-      [designer.props.nodeTranslateAttrName]: value,
-      className: cls(prefix, value),
-    }
-  }
-  const allowTranslate = props.node.allowTranslate()
-  if (!allowTranslate) return null
-  return (
-    <>
-      <div {...createHandler('translate')}>
-        <IconWidget infer="FreeMove" />
-      </div>
-    </>
-  )
-}

package/src/widgets/AuxToolWidget/index.tsx

@@ -1,40 +0,0 @@
-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<HTMLDivElement>()
-  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 (
-    <div ref={ref} className={prefix}>
-      <Insertion />
-      <SpaceBlock />
-      <SnapLine />
-      <DashedBox />
-      <Selection />
-      <Cover />
-      <FreeSelection />
-    </div>
-  )
-}
-
-AuxToolWidget.displayName = 'AuxToolWidget'

package/src/widgets/AuxToolWidget/styles.less

@@ -1,383 +0,0 @@
-@import '../../variables.less';
-
-@keyframes dn-animate-slide-to-top {
-  from {
-    transform: translateY(-10%);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateY(0);
-    opacity: 0.8;
-  }
-}
-
-.@{prefix-cls}-auxtool {
-  transform: perspective(1px) translate3d(0, 0, 0);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-
-  z-index: 9998;
-}
-
-.dn-aux-button {
-  button {
-    font-size: 12px !important;
-    display: flex;
-    align-items: center;
-    padding: 0 3px;
-    height: 20px;
-    color: var(--dn-aux-selector-btn-color); //#fff
-    background: var(--dn-aux-selector-btn-bg-color); //#1890ff
-    border-color: var(--dn-aux-selector-btn-border-color); //#1890ff
-
-    &:hover,
-    &:focus {
-      color: var(--dn-aux-selector-btn-hover-color); //#fff
-      background: var(--dn-aux-selector-btn-hover-bg-color); //#40a9ff
-      border-color: var(--dn-aux-selector-btn-hover-border-color); //#40a9ff
-    }
-
-    &:active {
-      color: var(--dn-aux-selector-btn-active-color); //#fff
-      background: var(--dn-aux-selector-btn-active-bg-color); //#096dd9
-      border-color: var(--dn-aux-selector-btn-active-border-color); //#096dd9
-    }
-  }
-}
-
-.@{prefix-cls}-aux-cover-rect {
-  &.dragging {
-    background-color: var(--dn-aux-cover-rect-dragging-color);
-  }
-
-  &.dropping {
-    background-color: var(--dn-aux-cover-rect-dropping-color);
-  }
-}
-
-.@{prefix-cls}-aux-free-selection {
-  background-color: var(--dn-aux-free-selection-background-color);
-  border-color: var(--dn-aux-free-selection-border-color);
-}
-
-.@{prefix-cls}-aux-helpers {
-  position: absolute;
-  pointer-events: all;
-  z-index: 10;
-  user-select: none;
-
-  .dn-aux-button();
-
-  &.bottom-right {
-    top: 100%;
-    right: 0;
-  }
-
-  &.bottom-left {
-    top: 100%;
-    left: 0;
-  }
-
-  &.bottom-center {
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  &.inner-top-right {
-    top: -2px;
-    right: 2px;
-  }
-
-  &.inner-top-left {
-    top: -2px;
-    left: 2px;
-  }
-
-  &.inner-top-center {
-    top: -2px;
-    right: 2px;
-  }
-
-  &.inner-bottom-right {
-    bottom: -2px;
-    right: 2px;
-  }
-
-  &.inner-bottom-left {
-    bottom: -2px;
-    left: 2px;
-  }
-
-  &.inner-bottom-center {
-    bottom: -2px;
-    right: 2px;
-  }
-
-  &.top-right {
-    bottom: 100%;
-    right: 0;
-  }
-
-  &.top-left {
-    bottom: 100%;
-    left: 0;
-  }
-
-  &.top-center {
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  button {
-    span {
-      transform: scale(0.9);
-      margin-left: 2px;
-
-      &.@{prefix-cls}-icon {
-        transform: scale(1);
-        margin-left: 0;
-      }
-    }
-  }
-
-  &-content {
-    display: flex;
-    flex-wrap: nowrap;
-    white-space: nowrap;
-
-    button {
-      font-size: 12px !important;
-      display: flex;
-      align-items: center;
-      padding: 0 3px;
-      height: 20px;
-    }
-
-    & > * {
-      margin-top: 4px;
-      margin-bottom: 4px;
-      margin-left: 2px;
-
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-  }
-}
-
-.@{prefix-cls}-aux-insertion {
-  background-color: var(--dn-aux-insertion-color);
-}
-
-.@{prefix-cls}-aux-dashed-box {
-  border: 1px dashed var(--dn-aux-dashed-box-color);
-
-  &-title {
-    color: var(--dn-aux-dashed-box-title-color);
-  }
-}
-
-.@{prefix-cls}-aux-selection-box {
-  border: 2px solid var(--dn-aux-selection-box-border-color);
-  position: relative;
-  pointer-events: none;
-
-  &-inner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  &-title {
-    color: var(--dn-aux-selection-box-color);
-  }
-}
-
-.@{prefix-cls}-aux-selector {
-  .dn-aux-button();
-
-  &-menu {
-    margin-top: -4px;
-    animation: dn-animate-slide-to-top 0.2s;
-    opacity: 0.8;
-
-    button {
-      font-size: 12px !important;
-      display: flex;
-      align-items: center;
-      padding: 0 3px;
-      height: 20px;
-      margin-top: 2px;
-    }
-  }
-}
-
-.@{prefix-cls}-aux-drag-handler {
-  cursor: move;
-}
-
-.@{prefix-cls}-aux-node-resize-handler {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  pointer-events: all;
-  border-radius: 10px;
-  background-color: #fff;
-  border: 1px solid var(--dn-brand-color);
-
-  &.left-center {
-    left: 0;
-    top: 50%;
-    transform: translate(calc(-50% - 1px), -50%);
-    cursor: ew-resize;
-  }
-
-  &.right-center {
-    left: 100%;
-    top: 50%;
-    transform: translate(calc(-50% + 1px), -50%);
-    cursor: ew-resize;
-  }
-
-  &.center-top {
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, calc(-50% - 1px));
-    cursor: ns-resize;
-  }
-
-  &.center-bottom {
-    left: 50%;
-    top: 100%;
-    transform: translate(-50%, calc(-50% + 1px));
-    cursor: ns-resize;
-  }
-
-  &.left-top {
-    left: 0;
-    top: 0;
-    transform: translate(calc(-50% + 1px), calc(-50% + 1px));
-    cursor: nwse-resize;
-  }
-
-  &.left-bottom {
-    left: 0;
-    top: 100%;
-    transform: translate(-50%, -50%);
-    cursor: nesw-resize;
-  }
-
-  &.right-bottom {
-    left: 100%;
-    top: 100%;
-    transform: translate(-50%, -50%);
-    cursor: nwse-resize;
-  }
-
-  &.right-top {
-    left: 100%;
-    top: 0;
-    transform: translate(-50%, -50%);
-    cursor: nesw-resize;
-  }
-}
-
-.@{prefix-cls}-aux-node-translate-handler {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 2px;
-  width: 40px;
-  height: 20px;
-  background: #1890ff;
-  opacity: 0.5;
-  pointer-events: all;
-}
-
-.@{prefix-cls}-aux-space-block-ruler-indicator {
-  position: absolute;
-  background-color: var(--dn-brand-color);
-  color: var(--dn-white);
-  border-radius: 8px;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  span {
-    margin: 0 6px;
-    display: inline-block;
-    font-size: 12px;
-  }
-}
-
-.@{prefix-cls}-aux-space-block-ruler-h {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translate(0, -50%);
-  width: 100%;
-  height: 12px;
-  border-left: 1px solid var(--dn-brand-color);
-  border-right: 1px solid var(--dn-brand-color);
-
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    right: 0;
-    transform: translate(0, -50%);
-    width: 100%;
-    height: 1px;
-    background-color: var(--dn-brand-color);
-    z-index: 1;
-  }
-
-  .@{prefix-cls}-aux-space-block-ruler-indicator {
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%) scale(0.7);
-  }
-}
-
-.@{prefix-cls}-aux-space-block-ruler-v {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, 0);
-  height: 100%;
-  width: 12px;
-  border-top: 1px solid var(--dn-brand-color);
-  border-bottom: 1px solid var(--dn-brand-color);
-
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, 0);
-    height: 100%;
-    width: 1px;
-    background-color: var(--dn-brand-color);
-    z-index: 1;
-  }
-
-  .@{prefix-cls}-aux-space-block-ruler-indicator {
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%) scale(0.7);
-  }
-}

package/src/widgets/ComponentTreeWidget/index.tsx

@@ -1,99 +0,0 @@
-import React, { Fragment, useEffect } from 'react'
-import { useTree, usePrefix, useDesigner, useComponents } from '../../hooks'
-import { TreeNodeContext, DesignerComponentsContext } from '../../context'
-import { IDesignerComponents } from '../../types'
-import { TreeNode, GlobalRegistry } from '@formily-design/core'
-import { observer } from '@formily/reactive-react'
-import cls from 'classnames'
-import './styles.less'
-
-export interface IComponentTreeWidgetProps {
-  style?: React.CSSProperties
-  className?: string
-  components: IDesignerComponents
-}
-
-export interface ITreeNodeWidgetProps {
-  node: TreeNode
-  children?: React.ReactChild
-}
-
-export const TreeNodeWidget: React.FC<ITreeNodeWidgetProps> = observer(
-  (props: ITreeNodeWidgetProps) => {
-    const designer = useDesigner(props.node?.designerProps?.effects)
-    const components = useComponents()
-    const node = props.node
-    const renderChildren = () => {
-      if (node?.designerProps?.selfRenderChildren) return []
-      return node?.children?.map((child) => {
-        return <TreeNodeWidget key={child.id} node={child} />
-      })
-    }
-    const renderProps = (extendsProps: any = {}) => {
-      const props = {
-        ...node.designerProps?.defaultProps,
-        ...extendsProps,
-        ...node.props,
-        ...node.designerProps?.getComponentProps?.(node),
-      }
-      if (node.depth === 0) {
-        delete props.style
-      }
-      return props
-    }
-    const renderComponent = () => {
-      const componentName = node.componentName
-      const Component = components[componentName]
-      const dataId = {}
-      if (Component) {
-        if (designer) {
-          dataId[designer?.props?.nodeIdAttrName] = node.id
-        }
-        return React.createElement(
-          Component,
-          renderProps(dataId),
-          ...renderChildren()
-        )
-      } else {
-        if (node?.children?.length) {
-          return <Fragment>{renderChildren()}</Fragment>
-        }
-      }
-    }
-
-    if (!node) return null
-    if (node.hidden) return null
-    return React.createElement(
-      TreeNodeContext.Provider,
-      { value: node },
-      renderComponent()
-    )
-  }
-)
-
-export const ComponentTreeWidget: React.FC<IComponentTreeWidgetProps> =
-  observer((props: IComponentTreeWidgetProps) => {
-    const tree = useTree()
-    const prefix = usePrefix('component-tree')
-    const designer = useDesigner()
-    const dataId = {}
-    if (designer && tree) {
-      dataId[designer?.props?.nodeIdAttrName] = tree.id
-    }
-    useEffect(() => {
-      GlobalRegistry.registerDesignerBehaviors(props.components)
-    }, [])
-    return (
-      <div
-        style={{ ...props.style, ...tree?.props?.style }}
-        className={cls(prefix, props.className)}
-        {...dataId}
-      >
-        <DesignerComponentsContext.Provider value={props.components}>
-          <TreeNodeWidget node={tree} />
-        </DesignerComponentsContext.Provider>
-      </div>
-    )
-  })
-
-ComponentTreeWidget.displayName = 'ComponentTreeWidget'

package/src/widgets/ComponentTreeWidget/styles.less

@@ -1,6 +0,0 @@
-@import '../../variables.less';
-
-.@{prefix-cls}-component-tree {
-  min-height: 100%;
-  min-width: 100%;
-}