@formily-design/react 1.0.0

package/src/widgets/AuxToolWidget/SpaceBlock.tsx

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

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

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

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

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

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