@formily-design/react 1.0.0 → 1.0.2

package/src/simulators/ResponsiveSimulator/index.tsx

@@ -1,193 +0,0 @@
-import React, { useRef } from 'react'
-import { observer } from '@formily/reactive-react'
-import {
-  Engine,
-  DragStartEvent,
-  DragMoveEvent,
-  DragStopEvent,
-  CursorDragType,
-} from '@formily-design/core'
-import {
-  calcSpeedFactor,
-  createUniformSpeedAnimation,
-} from '@formily-design/shared'
-import { useScreen, useDesigner, usePrefix } from '../../hooks'
-import { IconWidget } from '../../widgets'
-import { ResizeHandle, ResizeHandleType } from './handle'
-
-import cls from 'classnames'
-import './styles.less'
-
-const useResizeEffect = (
-  container: React.MutableRefObject<HTMLDivElement>,
-  content: React.MutableRefObject<HTMLDivElement>,
-  engine: Engine
-) => {
-  let status: ResizeHandleType = null
-  let startX = 0
-  let startY = 0
-  let startWidth = 0
-  let startHeight = 0
-  let animationX = null
-  let animationY = null
-
-  const getStyle = (status: ResizeHandleType) => {
-    if (status === ResizeHandleType.Resize) return 'nwse-resize'
-    if (status === ResizeHandleType.ResizeHeight) return 'ns-resize'
-    if (status === ResizeHandleType.ResizeWidth) return 'ew-resize'
-  }
-
-  const updateSize = (deltaX: number, deltaY: number) => {
-    const containerRect = container.current?.getBoundingClientRect()
-    if (status === ResizeHandleType.Resize) {
-      engine.screen.setSize(startWidth + deltaX, startHeight + deltaY)
-      container.current.scrollBy(
-        containerRect.width + deltaX,
-        containerRect.height + deltaY
-      )
-    } else if (status === ResizeHandleType.ResizeHeight) {
-      engine.screen.setSize(startWidth, startHeight + deltaY)
-      container.current.scrollBy(
-        container.current.scrollLeft,
-        containerRect.height + deltaY
-      )
-    } else if (status === ResizeHandleType.ResizeWidth) {
-      engine.screen.setSize(startWidth + deltaX, startHeight)
-      container.current.scrollBy(
-        containerRect.width + deltaX,
-        container.current.scrollTop
-      )
-    }
-  }
-
-  engine.subscribeTo(DragStartEvent, (e) => {
-    if (!engine.workbench.currentWorkspace?.viewport) return
-    const target = e.data.target as HTMLElement
-    if (target?.closest(`*[${engine.props.screenResizeHandlerAttrName}]`)) {
-      const rect = content.current?.getBoundingClientRect()
-      if (!rect) return
-      status = target.getAttribute(
-        engine.props.screenResizeHandlerAttrName
-      ) as ResizeHandleType
-      engine.cursor.setStyle(getStyle(status))
-      startX = e.data.topClientX
-      startY = e.data.topClientY
-      startWidth = rect.width
-      startHeight = rect.height
-      engine.cursor.setDragType(CursorDragType.Resize)
-    }
-  })
-  engine.subscribeTo(DragMoveEvent, (e) => {
-    if (!engine.workbench.currentWorkspace?.viewport) return
-    if (!status) return
-    const deltaX = e.data.topClientX - startX
-    const deltaY = e.data.topClientY - startY
-    const containerRect = container.current?.getBoundingClientRect()
-    const distanceX = Math.floor(containerRect.right - e.data.topClientX)
-    const distanceY = Math.floor(containerRect.bottom - e.data.topClientY)
-    const factorX = calcSpeedFactor(distanceX, 10)
-    const factorY = calcSpeedFactor(distanceY, 10)
-    updateSize(deltaX, deltaY)
-    if (distanceX <= 10) {
-      if (!animationX) {
-        animationX = createUniformSpeedAnimation(1000 * factorX, (delta) => {
-          updateSize(deltaX + delta, deltaY)
-        })
-      }
-    } else {
-      if (animationX) {
-        animationX = animationX()
-      }
-    }
-
-    if (distanceY <= 10) {
-      if (!animationY) {
-        animationY = createUniformSpeedAnimation(300 * factorY, (delta) => {
-          updateSize(deltaX, deltaY + delta)
-        })
-      }
-    } else {
-      if (animationY) {
-        animationY = animationY()
-      }
-    }
-  })
-  engine.subscribeTo(DragStopEvent, () => {
-    if (!status) return
-    status = null
-    engine.cursor.setStyle('')
-    engine.cursor.setDragType(CursorDragType.Move)
-    if (animationX) {
-      animationX = animationX()
-    }
-    if (animationY) {
-      animationY = animationY()
-    }
-  })
-}
-
-export interface IResponsiveSimulatorProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  className?: string
-  style?: React.CSSProperties
-}
-
-export const ResponsiveSimulator: React.FC<IResponsiveSimulatorProps> =
-  observer((props) => {
-    const container = useRef<HTMLDivElement>()
-    const content = useRef<HTMLDivElement>()
-    const prefix = usePrefix('responsive-simulator')
-    const screen = useScreen()
-    useDesigner((engine) => {
-      useResizeEffect(container, content, engine)
-    })
-    return (
-      <div
-        {...props}
-        className={cls(prefix, props.className)}
-        style={{
-          height: '100%',
-          width: '100%',
-          minHeight: 100,
-          position: 'relative',
-          ...props.style,
-        }}
-      >
-        <div
-          ref={container}
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            height: '100%',
-            width: '100%',
-            overflow: 'overlay',
-          }}
-        >
-          <div
-            ref={content}
-            style={{
-              width: screen.width,
-              height: screen.height,
-              paddingRight: 15,
-              paddingBottom: 15,
-              position: 'relative',
-              boxSizing: 'border-box',
-              overflow: 'hidden',
-            }}
-          >
-            {props.children}
-            <ResizeHandle type={ResizeHandleType.Resize}>
-              <IconWidget infer="DragMove" style={{ pointerEvents: 'none' }} />
-            </ResizeHandle>
-            <ResizeHandle type={ResizeHandleType.ResizeHeight}>
-              <IconWidget infer="Menu" style={{ pointerEvents: 'none' }} />
-            </ResizeHandle>
-            <ResizeHandle type={ResizeHandleType.ResizeWidth}>
-              <IconWidget infer="Menu" style={{ pointerEvents: 'none' }} />
-            </ResizeHandle>
-          </div>
-        </div>
-      </div>
-    )
-  })

package/src/simulators/ResponsiveSimulator/styles.less

@@ -1,56 +0,0 @@
-@import '../../variables.less';
-
-.@{prefix-cls}-responsive-simulator {
-  background-color: var(--dn-responsive-simulator-bg-color);
-}
-
-.@{prefix-cls}-resize-handle {
-  position: absolute;
-  transition: 0.2s all ease-in-out;
-  box-sizing: border-box;
-  user-select: none;
-  bottom: 0;
-  z-index: 10;
-  background: var(--dn-resize-handle-bg-color);
-  color: var(--dn-resize-handle-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &-RESIZE_WIDTH {
-    top: 0;
-    bottom: 15px;
-    cursor: ew-resize;
-
-    svg {
-      transform-origin: center;
-      transform: rotate(-90deg);
-    }
-  }
-
-  &-RESIZE_HEIGHT {
-    left: 0;
-    right: 15px;
-    cursor: ns-resize;
-  }
-
-  &-RESIZE {
-    cursor: nwse-resize;
-  }
-
-  &-RESIZE_HEIGHT,
-  &-RESIZE {
-    height: 15px;
-  }
-
-  &-RESIZE_WIDTH,
-  &-RESIZE {
-    right: 0;
-    width: 15px;
-  }
-
-  &:hover {
-    background: var(--dn-resize-handle-hover-bg-color);
-    color: var(--dn-resize-handle-hover-color);
-  }
-}

package/src/simulators/index.tsx

@@ -1,3 +0,0 @@
-export * from './PCSimulator'
-export * from './MobileSimulator'
-export * from './ResponsiveSimulator'

package/src/theme.less

@@ -1,224 +0,0 @@
-@import './variables.less';
-
-:root {
-  //品牌色
-  --dn-brand-color: rgba(24, 144, 255, 1);
-  --dn-brand-hovering: rgba(64, 169, 255, 1);
-  --dn-brand-dragging: rgba(24, 144, 255, 0.26);
-  --dn-brand-dropping: rgba(24, 144, 255, 0.34);
-  --dn-brand-moving: rgba(24, 144, 255, 0.5);
-  //白色调色版
-  --dn-white: #fff;
-  --dn-white-gray: #d9d9d9;
-  --dn-white-gray-light: #eee;
-  --dn-white-gray-lighter: #f0f0f0;
-  --dn-white-gray-dark: #aaa;
-  //灰色调色板
-  --dn-gray: #333;
-  --dn-gray-light: #444;
-  --dn-gray-lighter: #666;
-  --dn-gray-dark: #222;
-  --dn-black: #1a1a1a;
-}
-
-.@{prefix-cls}-light {
-  --dn-aux-cover-rect-dragging-color: var(--dn-brand-dragging);
-  --dn-aux-cover-rect-dropping-color: var(--dn-brand-dropping);
-  --dn-aux-free-selection-background-color: var(--dn-brand-color);
-  --dn-aux-free-selection-border-color: var(--dn-brand-color);
-  --dn-aux-insertion-color: var(--dn-brand-color);
-  --dn-aux-dashed-box-color: var(--dn-brand-color);
-  --dn-aux-dashed-box-title-color: var(--dn-gray);
-  --dn-aux-selection-box-border-color: var(--dn-brand-color);
-  --dn-aux-selection-box-color: var(--dn-gray);
-  --dn-ghost-color: var(--dn-white);
-  --dn-ghost-bg-color: var(--dn-brand-moving);
-  --dn-outline-tree-bg-color: var(--dn-white);
-  --dn-outline-tree-header-border-color: var(--dn-white-gray-light);
-  --dn-outline-tree-color: var(--dn-gray);
-  --dn-outline-tree-insertion-bg-color: var(--dn-brand-color);
-  --dn-outline-tree-node-header-color: var(--dn-gray);
-  --dn-outline-tree-node-hover-color: var(--dn-brand-color);
-
-  --dn-toolbar-input-color: var(--dn-gray-dark);
-  --dn-toolbar-input-bg-color: var(--dn-white);
-  --dn-toolbar-input-border-color: var(--dn-white-gray-light);
-  --dn-toolbar-input-hover-border-color: var(--dn-white-gray-light);
-  --dn-toolbar-input-handler-bg-color: var(--dn-white);
-
-  --dn-resize-handle-bg-color: var(--dn-white-gray-light);
-  --dn-resize-handle-hover-bg-color: var(--dn-white-gray-lighter);
-  --dn-resize-handle-color: var(--dn-gray-light);
-  --dn-resize-handle-hover-color: var(--dn-white-lighter);
-
-  --dn-mobile-simulator-bg-color: var(--dn-white-gray-light);
-  --dn-mobile-simulator-body-bg-color: var(--dn-white);
-  --dn-mobile-simulator-border-color: var(--dn-gray-dark);
-  --dn-responsive-simulator-bg-color: var(--dn-white);
-  --dn-pc-simulator-bg-color: var(--dn-white);
-
-  --dn-aux-selector-btn-color: var(--dn-white);
-  --dn-aux-selector-btn-bg-color: var(--dn-brand-color);
-  --dn-aux-selector-btn-border-color: var(--dn-brand-color);
-  --dn-aux-selector-btn-hover-color: var(--dn-white);
-  --dn-aux-selector-btn-hover-bg-color: var(--dn-brand-hovering);
-  --dn-aux-selector-btn-hover-border-color: var(--dn-brand-hovering);
-  --dn-aux-selector-btn-active-color: var(--dn-white);
-  --dn-aux-selector-btn-active-bg-color: var(--dn-brand-hovering);
-  --dn-aux-selector-btn-active-border-color: var(--dn-brand-hovering);
-
-  --dn-panel-border-color: var(--dn-white-gray);
-  --dn-panel-active-bg-color: var(--dn-white-gray-light);
-  --dn-resource-content-bg-color: var(--dn-white);
-
-  --dn-composite-panel-tabs-bg-color: var(--dn-white);
-  --dn-composite-panel-tabs-active-bg-color: var(--dn-white);
-  --dn-composite-panel-highlight-bg-color: var(--dn-white-gray-light);
-  --dn-composite-panel-tabs-color: var(--dn-gray-lighter);
-  --dn-composite-panel-tabs-hover-color: var(--dn-brand-color);
-  --dn-composite-panel-tabs-content-bg-color: var(--dn-white);
-  --dn-composite-panel-tabs-header-color: var(--dn-gray-lighter);
-
-  --dn-collapse-header-color: var(--dn-gray);
-
-  --dn-resource-item-color: var(--dn-gray);
-  --dn-resource-item-hover-border-color: var(--dn-brand-color);
-  --dn-resource-item-hover-color: var(--dn-brand-color);
-
-  --dn-main-panel-header-bg-color: var(--dn-white);
-  --dn-workspace-panel-bg-color: var(--dn-white-gray-light);
-
-  --dn-scrollbar-color: var(--dn-white-gray);
-  --dn-scrollbar-hover-color: var(--white-dn-gray-lighter);
-
-  --dn-empty-bg-color: var(--dn-white);
-
-  --dn-droppable-bg-color: var(--dn-white-gray-lighter);
-  --dn-droppable-border-color: var(--dn-white-gray-dark);
-  --dn-droppable-color: var(--dn-gray-lighter);
-}
-
-.@{prefix-cls}-dark {
-  --dn-aux-cover-rect-dragging-color: var(--dn-brand-dragging);
-  --dn-aux-cover-rect-dropping-color: var(--dn-brand-dropping);
-  --dn-aux-free-selection-background-color: var(--dn-brand-color);
-  --dn-aux-free-selection-border-color: var(--dn-brand-color);
-  --dn-aux-insertion-color: var(--dn-brand-color);
-  --dn-aux-dashed-box-color: var(--dn-brand-color);
-  --dn-aux-dashed-box-title-color: var(--dn-brand-color);
-  --dn-aux-selection-box-border-color: var(--dn-brand-color);
-  --dn-aux-selection-box-color: var(--dn-gray);
-  --dn-ghost-color: var(--dn-white);
-  --dn-ghost-bg-color: var(--dn-brand-moving);
-  --dn-outline-tree-bg-color: var(--dn-gray-dark);
-  --dn-outline-tree-header-border-color: var(--dn-gray);
-  --dn-outline-tree-color: var(--dn-white-gray);
-  --dn-outline-tree-insertion-bg-color: var(--dn-brand-color);
-  --dn-outline-tree-node-header-color: var(--dn-white-gray);
-  --dn-outline-tree-node-hover-color: var(--dn-white-gray);
-
-  --dn-toolbar-input-color: var(--dn-white-gray);
-  --dn-toolbar-input-bg-color: transparent;
-  --dn-toolbar-input-border-color: var(--dn-gray-light);
-  --dn-toolbar-input-hover-border-color: var(--dn-brand-color);
-  --dn-toolbar-input-handler-bg-color: var(--dn-gray-light);
-  --dn-resize-handle-bg-color: var(--dn-gray-light);
-  --dn-resize-handle-hover-bg-color: var(--dn-gray-lighter);
-  --dn-resize-handle-color: var(--dn-gray-lighter);
-  --dn-resize-handle-hover-color: var(--dn-white-gray-dark);
-
-  --dn-mobile-simulator-bg-color: var(--dn-black);
-  --dn-mobile-simulator-body-bg-color: var(--dn-black);
-  --dn-mobile-simulator-border-color: var(--dn-black);
-  --dn-responsive-simulator-bg-color: var(--dn-black);
-  --dn-pc-simulator-bg-color: var(--dn-black);
-
-  --dn-aux-selector-btn-color: var(--dn-white);
-  --dn-aux-selector-btn-bg-color: var(--dn-brand-color);
-  --dn-aux-selector-btn-border-color: var(--dn-brand-color);
-  --dn-aux-selector-btn-hover-color: var(--dn-white);
-  --dn-aux-selector-btn-hover-bg-color: var(--dn-brand-hovering);
-  --dn-aux-selector-btn-hover-border-color: var(--dn-brand-hovering);
-  --dn-aux-selector-btn-active-color: var(--dn-white);
-  --dn-aux-selector-btn-active-bg-color: var(--dn-brand-hovering);
-  --dn-aux-selector-btn-active-border-color: var(--dn-brand-hovering);
-
-  --dn-panel-border-color: var(--dn-gray-light);
-  --dn-panel-active-bg-color: var(--dn-gray);
-  --dn-resource-content-bg-color: var(--dn-gray-dark);
-
-  --dn-composite-panel-tabs-bg-color: var(--dn-gray-dark);
-  --dn-composite-panel-tabs-active-bg-color: var(--dn-gray-dark);
-  --dn-composite-panel-highlight-bg-color: var(--dn-black);
-  --dn-composite-panel-tabs-color: var(--dn-white-gray-dark);
-  --dn-composite-panel-tabs-hover-color: var(--dn-brand-color);
-  --dn-composite-panel-tabs-content-bg-color: var(--dn-gray-dark);
-  --dn-composite-panel-tabs-header-color: var(--dn-white-gray);
-
-  --dn-collapse-header-color: var(--dn-white-gray);
-
-  --dn-resource-item-color: var(--dn-white-gray);
-  --dn-resource-item-hover-color: var(--dn-brand-color);
-
-  --dn-main-panel-header-bg-color: var(--dn-gray-dark);
-  --dn-workspace-panel-bg-color: var(--dn-gray-dark);
-
-  --dn-scrollbar-color: var(--dn-gray-light);
-  --dn-scrollbar-hover-color: var(--dn-gray-lighter);
-
-  --dn-empty-bg-color: var(--dn-gray-dark);
-
-  --dn-droppable-bg-color: var(--dn-gray);
-  --dn-droppable-border-color: var(--dn-gray-light);
-  --dn-droppable-color: var(--dn-white);
-}
-
-.@{prefix-cls}-app {
-  ::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--dn-scrollbar-color);
-    border-radius: 0;
-    transition: all 0.25s ease-in-out;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: var(--dn-scrollbar-hover-color);
-  }
-
-  color: var(--dn-gray-dark);
-  font-size: 14px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  font-variant: tabular-nums;
-  line-height: 1.5715;
-  font-feature-settings: 'tnum';
-
-  * {
-    box-sizing: border-box;
-  }
-
-  *[contenteditable='true'] {
-    min-width: 1px;
-    min-height: 14px;
-    cursor: text !important;
-    outline: none !important;
-  }
-
-  *[data-content-editable]:not(*[contenteditable='true']) {
-    &:empty::before {
-      content: 'Please Input';
-      display: block;
-      opacity: 0.6;
-    }
-
-    &:hover {
-      cursor: text !important;
-      opacity: 0.8;
-    }
-  }
-}

package/src/types.ts

@@ -1,41 +0,0 @@
-import React from 'react'
-import { Engine, IResource, IBehavior } from '@formily-design/core'
-
-export interface IDesignerLayoutProps {
-  children?: React.ReactNode
-  prefixCls?: string
-  theme?: 'dark' | 'light' | (string & {})
-  variables?: Record<string, string>
-  position?: 'fixed' | 'absolute' | 'relative'
-  style?: React.CSSProperties
-  className?: string
-}
-export interface IDesignerProps extends IDesignerLayoutProps {
-  engine: Engine
-}
-
-export interface IDesignerComponents {
-  [key: string]: DnFC<any> | DnComponent<any>
-}
-
-export interface IDesignerLayoutContext {
-  theme?: 'dark' | 'light' | (string & {})
-  prefixCls: string
-  position: 'fixed' | 'absolute' | 'relative'
-}
-
-export interface IWorkspaceContext {
-  id: string
-  title?: string
-  description?: string
-}
-
-export type DnFC<P = {}> = React.FC<P> & {
-  Resource?: IResource[]
-  Behavior?: IBehavior[]
-}
-
-export type DnComponent<P = {}> = React.ComponentType<P> & {
-  Resource?: IResource[]
-  Behavior?: IBehavior[]
-}

package/src/variables.less

@@ -1 +0,0 @@
-@prefix-cls: ~'dn';

package/src/widgets/AuxToolWidget/Copy.tsx

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

package/src/widgets/AuxToolWidget/Cover.tsx

@@ -1,76 +0,0 @@
-import React, { Fragment } from 'react'
-import {
-  useViewport,
-  useMoveHelper,
-  useCursor,
-  useValidNodeOffsetRect,
-  usePrefix,
-} from '../../hooks'
-import { observer } from '@formily/reactive-react'
-import { CursorStatus, ClosestPosition, TreeNode } from '@formily-design/core'
-import cls from 'classnames'
-interface ICoverRectProps {
-  node: TreeNode
-  dragging?: boolean
-  dropping?: boolean
-}
-
-const CoverRect: React.FC<ICoverRectProps> = (props) => {
-  const prefix = usePrefix('aux-cover-rect')
-  const rect = useValidNodeOffsetRect(props.node)
-  const createCoverStyle = () => {
-    const baseStyle: React.CSSProperties = {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      pointerEvents: 'none',
-    }
-    if (rect) {
-      baseStyle.transform = `perspective(1px) translate3d(${rect.x}px,${rect.y}px,0)`
-      baseStyle.height = rect.height
-      baseStyle.width = rect.width
-    }
-    return baseStyle
-  }
-
-  return (
-    <div
-      className={cls(prefix, {
-        dragging: props.dragging,
-        dropping: props.dropping,
-      })}
-      style={createCoverStyle()}
-    ></div>
-  )
-}
-
-export const Cover = observer(() => {
-  const viewportMoveHelper = useMoveHelper()
-  const viewport = useViewport()
-  const cursor = useCursor()
-  const renderDropCover = () => {
-    if (
-      !viewportMoveHelper.closestNode ||
-      !viewportMoveHelper.closestNode?.allowAppend(
-        viewportMoveHelper.dragNodes
-      ) ||
-      viewportMoveHelper.viewportClosestDirection !== ClosestPosition.Inner
-    )
-      return null
-    return <CoverRect node={viewportMoveHelper.closestNode} dropping />
-  }
-  if (cursor.status !== CursorStatus.Dragging) return null
-
-  return (
-    <Fragment>
-      {viewportMoveHelper.dragNodes.map((node) => {
-        if (!node) return
-        if (!viewport.findElementById(node.id)) return
-        return <CoverRect key={node.id} node={node} dragging />
-      })}
-      {renderDropCover()}
-    </Fragment>
-  )
-})
-
-Cover.displayName = 'Cover'

package/src/widgets/AuxToolWidget/DashedBox.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import {
-  useHover,
-  usePrefix,
-  useValidNodeOffsetRect,
-  useSelection,
-} from '../../hooks'
-import { observer } from '@formily/reactive-react'
-
-export const DashedBox = observer(() => {
-  const hover = useHover()
-  const prefix = usePrefix('aux-dashed-box')
-  const selection = useSelection()
-  const rect = useValidNodeOffsetRect(hover?.node)
-  const createTipsStyle = () => {
-    const baseStyle: React.CSSProperties = {
-      top: 0,
-      left: 0,
-      pointerEvents: 'none',
-      boxSizing: 'border-box',
-      visibility: 'hidden',
-      zIndex: 2,
-    }
-    if (rect) {
-      baseStyle.transform = `perspective(1px) translate3d(${rect.x}px,${rect.y}px,0)`
-      baseStyle.height = rect.height
-      baseStyle.width = rect.width
-      baseStyle.visibility = 'visible'
-    }
-    return baseStyle
-  }
-  if (!hover.node) return null
-  if (hover.node.hidden) return null
-  if (selection.selected.includes(hover.node.id)) return null
-  return (
-    <div className={prefix} style={createTipsStyle()}>
-      <span
-        className={prefix + '-title'}
-        style={{
-          position: 'absolute',
-          bottom: '100%',
-          left: 0,
-          fontSize: 12,
-          userSelect: 'none',
-          fontWeight: 'lighter',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        {hover?.node.getMessage('title')}
-      </span>
-    </div>
-  )
-})
-
-DashedBox.displayName = 'DashedBox'