@formily-design/react 1.0.0

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@formily-design/react",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "lib",
+  "types": "lib/index.d.ts",
+  "engines": {
+    "npm": ">=3.0.0"
+  },
+  "module": "esm",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alibaba/designable.git"
+  },
+  "bugs": {
+    "url": "https://github.com/alibaba/designable/issues"
+  },
+  "homepage": "https://github.com/alibaba/designable#readme",
+  "scripts": {
+    "build": "rimraf -rf lib esm dist && npm run build:cjs && npm run build:esm && npm run build:umd && ts-node copy",
+    "build:cjs": "tsc --project tsconfig.build.json",
+    "build:esm": "tsc --project tsconfig.build.json --module es2015 --outDir esm",
+    "build:umd": "rollup --config --verbose",
+    "build:copy": "ts-node copy"
+  },
+  "devDependencies": {
+    "@formily/reactive": "^2.0.2",
+    "@formily/reactive-react": "^2.0.2"
+  },
+  "peerDependencies": {
+    "@formily/reactive": "^2.0.2",
+    "@formily/reactive-react": "^2.0.2",
+    "antd": "^5.29.3",
+    "react": "18.x || 17.x"
+  },
+  "dependencies": {
+    "@formily-design/core": "1.0.0",
+    "@formily-design/shared": "1.0.0",
+    "dateformat": "^4.5.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "f3496a519e4be3f14900ddbe44744ae482247047"
+}

package/rollup.config.js

@@ -0,0 +1,3 @@
+import baseConfig from '../../scripts/rollup.base.js'
+
+export default baseConfig('designable.react', 'Designable.React')

package/src/containers/Designer.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useRef } from 'react'
+import { Engine, GlobalRegistry } from '@formily-design/core'
+import { DesignerEngineContext } from '../context'
+import { IDesignerProps } from '../types'
+import { GhostWidget } from '../widgets'
+import { useDesigner } from '../hooks'
+import { Layout } from './Layout'
+import * as icons from '../icons'
+
+GlobalRegistry.registerDesignerIcons(icons)
+
+export const Designer: React.FC<IDesignerProps> = (props) => {
+  const engine = useDesigner()
+  const ref = useRef<Engine>()
+  useEffect(() => {
+    if (props.engine) {
+      if (props.engine && ref.current) {
+        if (props.engine !== ref.current) {
+          ref.current.unmount()
+        }
+      }
+      props.engine.mount()
+      ref.current = props.engine
+    }
+    return () => {
+      if (props.engine) {
+        props.engine.unmount()
+      }
+    }
+  }, [props.engine])
+
+  if (engine)
+    throw new Error(
+      'There can only be one Designable Engine Context in the React Tree'
+    )
+
+  return (
+    <Layout {...props}>
+      <DesignerEngineContext.Provider value={props.engine}>
+        {props.children}
+        <GhostWidget />
+      </DesignerEngineContext.Provider>
+    </Layout>
+  )
+}
+
+Designer.defaultProps = {
+  prefixCls: 'dn-',
+  theme: 'light',
+}

package/src/containers/Layout.tsx

@@ -0,0 +1,50 @@
+import React, { useContext, Fragment, useRef, useLayoutEffect } from 'react'
+import { each } from '@formily-design/shared'
+import { DesignerLayoutContext } from '../context'
+import { IDesignerLayoutProps } from '../types'
+import cls from 'classnames'
+
+export const Layout: React.FC<IDesignerLayoutProps> = (props) => {
+  const layout = useContext(DesignerLayoutContext)
+  const ref = useRef<HTMLDivElement>()
+  useLayoutEffect(() => {
+    if (ref.current) {
+      each(props.variables, (value, key) => {
+        ref.current.style.setProperty(`--${key}`, value)
+      })
+    }
+  }, [])
+
+  if (layout) {
+    return <Fragment>{props.children}</Fragment>
+  }
+  return (
+    <div
+      ref={ref}
+      className={cls(
+        {
+          [`${props.prefixCls}app`]: true,
+          [`${props.prefixCls}${props.theme}`]: props.theme,
+        },
+        props.className
+      )}
+      style={props.style}
+    >
+      <DesignerLayoutContext.Provider
+        value={{
+          theme: props.theme,
+          prefixCls: props.prefixCls,
+          position: props.position,
+        }}
+      >
+        {props.children}
+      </DesignerLayoutContext.Provider>
+    </div>
+  )
+}
+
+Layout.defaultProps = {
+  theme: 'light',
+  prefixCls: 'dn-',
+  position: 'fixed',
+}

package/src/containers/Simulator.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { ScreenType } from '@formily-design/core'
+import { requestIdle } from '@formily-design/shared'
+import { observer } from '@formily/reactive-react'
+import { useScreen } from '../hooks'
+import {
+  MobileSimulator,
+  PCSimulator,
+  ResponsiveSimulator,
+} from '../simulators'
+
+export type ISimulatorProps = React.HTMLAttributes<HTMLDivElement>
+
+export const Simulator: React.FC<ISimulatorProps> = observer(
+  (props: ISimulatorProps) => {
+    const screen = useScreen()
+    if (screen.type === ScreenType.PC)
+      return <PCSimulator {...props}>{props.children}</PCSimulator>
+    if (screen.type === ScreenType.Mobile)
+      return <MobileSimulator {...props}>{props.children}</MobileSimulator>
+    if (screen.type === ScreenType.Responsive)
+      return (
+        <ResponsiveSimulator {...props}>{props.children}</ResponsiveSimulator>
+      )
+    return <PCSimulator {...props}>{props.children}</PCSimulator>
+  },
+  {
+    scheduler: requestIdle,
+  }
+)

package/src/containers/Viewport.tsx

@@ -0,0 +1,69 @@
+import React, { useLayoutEffect, useRef, useState } from 'react'
+import { usePrefix, useViewport } from '../hooks'
+import { AuxToolWidget, EmptyWidget } from '../widgets'
+import { Viewport as ViewportType } from '@formily-design/core'
+import { requestIdle, globalThisPolyfill } from '@formily-design/shared'
+import cls from 'classnames'
+export interface IViewportProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'placeholder'> {
+  placeholder?: React.ReactNode
+  dragTipsDirection?: 'left' | 'right'
+}
+
+export const Viewport: React.FC<IViewportProps> = ({
+  placeholder,
+  dragTipsDirection,
+  ...props
+}) => {
+  const [loaded, setLoaded] = useState(false)
+  const prefix = usePrefix('viewport')
+  const viewport = useViewport()
+  const ref = useRef<HTMLDivElement>()
+  const viewportRef = useRef<ViewportType>()
+  const isFrameRef = useRef(false)
+  useLayoutEffect(() => {
+    const frameElement = ref.current.querySelector('iframe')
+    if (!viewport) return
+    if (viewportRef.current && viewportRef.current !== viewport) {
+      viewportRef.current.onUnmount()
+    }
+    if (frameElement) {
+      frameElement.addEventListener('load', () => {
+        viewport.onMount(frameElement, frameElement.contentWindow)
+        requestIdle(() => {
+          isFrameRef.current = true
+          setLoaded(true)
+        })
+      })
+    } else {
+      viewport.onMount(ref.current, globalThisPolyfill)
+      requestIdle(() => {
+        isFrameRef.current = false
+        setLoaded(true)
+      })
+    }
+    viewportRef.current = viewport
+    return () => {
+      viewport.onUnmount()
+    }
+  }, [viewport])
+
+  return (
+    <div
+      {...props}
+      ref={ref}
+      className={cls(prefix, props.className)}
+      style={{
+        opacity: !loaded ? 0 : 1,
+        overflow: isFrameRef.current ? 'hidden' : 'overlay',
+        ...props.style,
+      }}
+    >
+      {props.children}
+      <AuxToolWidget />
+      <EmptyWidget dragTipsDirection={dragTipsDirection}>
+        {placeholder}
+      </EmptyWidget>
+    </div>
+  )
+}

package/src/containers/Workbench.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { observer } from '@formily/reactive-react'
+import { useWorkbench } from '../hooks'
+import { Workspace } from './Workspace'
+
+export const Workbench: React.FC<{ children?: React.ReactNode }> = observer(
+  (props) => {
+    const workbench = useWorkbench()
+    return (
+      <Workspace id={workbench.currentWorkspace?.id}>
+        {props.children}
+      </Workspace>
+    )
+  }
+)

package/src/containers/Workspace.tsx

@@ -0,0 +1,41 @@
+import React, { useMemo, useRef, Fragment } from 'react'
+import { useDesigner } from '../hooks'
+import { WorkspaceContext } from '../context'
+export interface IWorkspaceProps {
+  children?: React.ReactNode
+  id?: string
+  title?: string
+  description?: string
+}
+
+export const Workspace: React.FC<IWorkspaceProps> = ({
+  id,
+  title,
+  description,
+  ...props
+}) => {
+  const oldId = useRef<string>()
+  const designer = useDesigner()
+  const workspace = useMemo(() => {
+    if (!designer) return
+    if (oldId.current && oldId.current !== id) {
+      const old = designer.workbench.findWorkspaceById(oldId.current)
+      if (old) old.viewport.detachEvents()
+    }
+    const workspace = {
+      id: id || 'index',
+      title,
+      description,
+    }
+    designer.workbench.ensureWorkspace(workspace)
+    oldId.current = workspace.id
+    return workspace
+  }, [id, designer])
+  return (
+    <Fragment>
+      <WorkspaceContext.Provider value={workspace}>
+        {props.children}
+      </WorkspaceContext.Provider>
+    </Fragment>
+  )
+}

package/src/containers/index.ts

@@ -0,0 +1,7 @@
+import './styles.less'
+export * from './Layout'
+export * from './Designer'
+export * from './Workspace'
+export * from './Simulator'
+export * from './Viewport'
+export * from './Workbench'

package/src/containers/styles.less

@@ -0,0 +1,19 @@
+@import '../variables.less';
+
+.@{prefix-cls}-viewport {
+  height: 100%;
+  width: 100%;
+  min-height: 100px;
+  position: relative;
+  outline: none;
+  box-sizing: border-box;
+  user-select: none;
+  overflow: overlay;
+
+  // & > * {
+  //   width: fit-content;
+  //   height: fit-content;
+  //   min-width: 100%;
+  //   min-height: 100%;
+  // }
+}

package/src/context.ts

@@ -0,0 +1,17 @@
+import { createContext } from 'react'
+import { TreeNode, Engine } from '@formily-design/core'
+import {
+  IDesignerLayoutContext,
+  IWorkspaceContext,
+  IDesignerComponents,
+} from './types'
+
+export const DesignerComponentsContext = createContext<IDesignerComponents>({})
+
+export const DesignerLayoutContext = createContext<IDesignerLayoutContext>(null)
+
+export const DesignerEngineContext = createContext<Engine>(null)
+
+export const TreeNodeContext = createContext<TreeNode>(null)
+
+export const WorkspaceContext = createContext<IWorkspaceContext>(null)

package/src/hooks/index.ts

@@ -0,0 +1,25 @@
+export * from './useDesigner'
+export * from './useCursor'
+export * from './useScreen'
+export * from './useTree'
+export * from './useTheme'
+export * from './usePosition'
+export * from './useTreeNode'
+export * from './useHover'
+export * from './useViewport'
+export * from './useOutline'
+export * from './useSelection'
+export * from './useOperation'
+export * from './useWorkbench'
+export * from './useWorkspace'
+export * from './useLayout'
+export * from './useHistory'
+export * from './usePrefix'
+export * from './useRegistry'
+export * from './useValidNodeOffsetRect'
+export * from './useMoveHelper'
+export * from './useNodeIdProps'
+export * from './useTransformHelper'
+export * from './useSelectedNode'
+export * from './useSelected'
+export * from './useComponents'

package/src/hooks/useComponents.ts

@@ -0,0 +1,3 @@
+import { useContext } from 'react'
+import { DesignerComponentsContext } from '../context'
+export const useComponents = () => useContext(DesignerComponentsContext)

package/src/hooks/useCursor.ts

@@ -0,0 +1,6 @@
+import { useDesigner } from './useDesigner'
+
+export const useCursor = () => {
+  const designer = useDesigner()
+  return designer.cursor
+}

package/src/hooks/useDesigner.ts

@@ -0,0 +1,19 @@
+import { useContext, useEffect } from 'react'
+import { Engine } from '@formily-design/core'
+import { DesignerEngineContext } from '../context'
+import { isFn, globalThisPolyfill } from '@formily-design/shared'
+export interface IEffects {
+  (engine: Engine): void
+}
+
+export const useDesigner = (effects?: IEffects): Engine => {
+  const designer: Engine =
+    globalThisPolyfill['__DESIGNABLE_ENGINE__'] ||
+    useContext(DesignerEngineContext)
+  useEffect(() => {
+    if (isFn(effects)) {
+      return effects(designer)
+    }
+  }, [])
+  return designer
+}

package/src/hooks/useHistory.ts

@@ -0,0 +1,6 @@
+import { useWorkspace } from './useWorkspace'
+
+export const useHistory = (workspaceId?: string) => {
+  const workspace = useWorkspace(workspaceId)
+  return workspace?.history
+}

package/src/hooks/useHover.ts

@@ -0,0 +1,6 @@
+import { useOperation } from './useOperation'
+
+export const useHover = (workspaceId?: string) => {
+  const operation = useOperation(workspaceId)
+  return operation?.hover
+}

package/src/hooks/useLayout.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+import { DesignerLayoutContext } from '../context'
+import { IDesignerLayoutContext } from '../types'
+import { globalThisPolyfill } from '@formily-design/shared'
+
+export const useLayout = (): IDesignerLayoutContext => {
+  return (
+    globalThisPolyfill['__DESIGNABLE_LAYOUT__'] ||
+    useContext(DesignerLayoutContext)
+  )
+}

package/src/hooks/useMoveHelper.ts

@@ -0,0 +1,6 @@
+import { useOperation } from './useOperation'
+
+export const useMoveHelper = (workspaceId?: string) => {
+  const operation = useOperation(workspaceId)
+  return operation?.moveHelper
+}

package/src/hooks/useNodeIdProps.ts

@@ -0,0 +1,11 @@
+import { TreeNode } from '@formily-design/core'
+import { useDesigner } from './useDesigner'
+import { useTreeNode } from './useTreeNode'
+
+export const useNodeIdProps = (node?: TreeNode) => {
+  const target = useTreeNode()
+  const designer = useDesigner()
+  return {
+    [designer.props.nodeIdAttrName]: node ? node.id : target.id,
+  }
+}

package/src/hooks/useOperation.ts

@@ -0,0 +1,6 @@
+import { useWorkspace } from './useWorkspace'
+
+export const useOperation = (workspaceId?: string) => {
+  const workspace = useWorkspace(workspaceId)
+  return workspace?.operation
+}

package/src/hooks/useOutline.ts

@@ -0,0 +1,6 @@
+import { useWorkspace } from './useWorkspace'
+
+export const useOutline = (workspaceId?: string) => {
+  const workspace = useWorkspace(workspaceId)
+  return workspace?.outline
+}

package/src/hooks/usePosition.ts

@@ -0,0 +1,5 @@
+import { useLayout } from './useLayout'
+
+export const usePosition = () => {
+  return useLayout()?.position
+}

package/src/hooks/usePrefix.ts

@@ -0,0 +1,5 @@
+import { useLayout } from './useLayout'
+
+export const usePrefix = (after = '') => {
+  return useLayout()?.prefixCls + after
+}

package/src/hooks/useRegistry.ts

@@ -0,0 +1,6 @@
+import { GlobalRegistry, IDesignerRegistry } from '@formily-design/core'
+import { globalThisPolyfill } from '@formily-design/shared'
+
+export const useRegistry = (): IDesignerRegistry => {
+  return globalThisPolyfill['__DESIGNER_REGISTRY__'] || GlobalRegistry
+}

package/src/hooks/useScreen.ts

@@ -0,0 +1,5 @@
+import { useDesigner } from './useDesigner'
+
+export const useScreen = () => {
+  return useDesigner().screen
+}

package/src/hooks/useSelected.ts

@@ -0,0 +1,6 @@
+import { useSelection } from './useSelection'
+
+export const useSelected = (workspaceId?: string) => {
+  const selection = useSelection(workspaceId)
+  return selection?.selected || []
+}

package/src/hooks/useSelectedNode.ts

@@ -0,0 +1,14 @@
+import { useSelected } from './useSelected'
+import { useTree } from './useTree'
+
+export const useSelectedNode = (workspaceId?: string) => {
+  const selected = useSelected(workspaceId)
+  const tree = useTree(workspaceId)
+  return tree?.findById?.(selected[0])
+}
+
+/**
+ * @deprecated
+ * please use useSelectedNode
+ */
+export const useCurrentNode = useSelectedNode

package/src/hooks/useSelection.ts

@@ -0,0 +1,6 @@
+import { useOperation } from './useOperation'
+
+export const useSelection = (workspaceId?: string) => {
+  const operation = useOperation(workspaceId)
+  return operation?.selection
+}

package/src/hooks/useTheme.ts

@@ -0,0 +1,5 @@
+import { useLayout } from './useLayout'
+
+export const useTheme = () => {
+  return useLayout()?.theme
+}

package/src/hooks/useTransformHelper.ts

@@ -0,0 +1,6 @@
+import { useOperation } from './useOperation'
+
+export const useTransformHelper = (workspaceId?: string) => {
+  const operation = useOperation(workspaceId)
+  return operation?.transformHelper
+}

package/src/hooks/useTree.ts

@@ -0,0 +1,6 @@
+import { useOperation } from './useOperation'
+
+export const useTree = (workspaceId?: string) => {
+  const operation = useOperation(workspaceId)
+  return operation?.tree
+}

package/src/hooks/useTreeNode.ts

@@ -0,0 +1,6 @@
+import { useContext } from 'react'
+import { TreeNodeContext } from '../context'
+
+export const useTreeNode = () => {
+  return useContext(TreeNodeContext)
+}

package/src/hooks/useValidNodeOffsetRect.ts

@@ -0,0 +1,48 @@
+import { useState, useEffect, useMemo, useCallback } from 'react'
+import { TreeNode, CursorStatus, CursorDragType } from '@formily-design/core'
+import { LayoutObserver } from '@formily-design/shared'
+import { useViewport } from './useViewport'
+import { useDesigner } from './useDesigner'
+
+const isEqualRect = (rect1: DOMRect, rect2: DOMRect) => {
+  return (
+    rect1?.x === rect2?.x &&
+    rect1?.y === rect2?.y &&
+    rect1?.width === rect2?.width &&
+    rect1?.height === rect2?.height
+  )
+}
+
+export const useValidNodeOffsetRect = (node: TreeNode) => {
+  const engine = useDesigner()
+  const viewport = useViewport()
+  const [, forceUpdate] = useState(null)
+  const rectRef = useMemo(
+    () => ({ current: viewport.getValidNodeOffsetRect(node) as any }),
+    [viewport]
+  )
+
+  const element = viewport.findElementById(node?.id)
+
+  const compute = useCallback(() => {
+    if (
+      engine.cursor.status !== CursorStatus.Normal &&
+      engine.cursor.dragType === CursorDragType.Move
+    )
+      return
+    const nextRect = viewport.getValidNodeOffsetRect(node) as any
+    if (!isEqualRect(rectRef.current, nextRect) && nextRect) {
+      rectRef.current = nextRect
+      forceUpdate([])
+    }
+  }, [viewport, node])
+
+  useEffect(() => {
+    const layoutObserver = new LayoutObserver(compute)
+    if (element) layoutObserver.observe(element)
+    return () => {
+      layoutObserver.disconnect()
+    }
+  }, [node, viewport, element])
+  return rectRef.current
+}

package/src/hooks/useViewport.ts

@@ -0,0 +1,6 @@
+import { useWorkspace } from './useWorkspace'
+
+export const useViewport = (workspaceId?: string) => {
+  const workspace = useWorkspace(workspaceId)
+  return workspace?.viewport
+}

package/src/hooks/useWorkbench.ts

@@ -0,0 +1,6 @@
+import { useDesigner } from './useDesigner'
+
+export const useWorkbench = () => {
+  const designer = useDesigner()
+  return designer.workbench
+}

package/src/hooks/useWorkspace.ts

@@ -0,0 +1,16 @@
+import { useContext } from 'react'
+import { useDesigner } from './useDesigner'
+import { WorkspaceContext } from '../context'
+import { Workspace } from '@formily-design/core'
+import { globalThisPolyfill } from '@formily-design/shared'
+
+export const useWorkspace = (id?: string): Workspace => {
+  const designer = useDesigner()
+  const workspaceId = id || useContext(WorkspaceContext)?.id
+  if (workspaceId) {
+    return designer.workbench.findWorkspaceById(workspaceId)
+  }
+  if (globalThisPolyfill['__DESIGNABLE_WORKSPACE__'])
+    return globalThisPolyfill['__DESIGNABLE_WORKSPACE__']
+  return designer.workbench.currentWorkspace
+}