@formily-design/react 1.0.0

package/src/simulators/ResponsiveSimulator/index.tsx

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

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

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

package/src/theme.less

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

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

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

package/src/widgets/AuxToolWidget/Copy.tsx

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

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

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