perf(core): improve performance

Author: janryWang

packages/core/src/effects/useDragDropEffect.ts

@@ -130,27 +130,21 @@ export const useDragDropEffect = (engine: Engine) => {
         ) {
           if (closestNode.allowSibling(dragNodes)) {
             const newNodes = closestNode.insertBefore(...dragNodes)
-            requestIdle(() => {
-              selection.batchSafeSelect(newNodes)
-            })
+            selection.batchSafeSelect(newNodes)
           }
         } else if (
           closestDirection === ClosestDirection.Inner ||
           closestDirection === ClosestDirection.InnerAfter
         ) {
           if (closestNode.allowAppend(dragNodes)) {
             const newNodes = closestNode.appendNode(...dragNodes)
-            requestIdle(() => {
-              selection.batchSafeSelect(newNodes)
-            })
+            selection.batchSafeSelect(newNodes)
             operation.setDropNode(closestNode)
           }
         } else if (closestDirection === ClosestDirection.InnerBefore) {
           if (closestNode.allowAppend(dragNodes)) {
             const newNodes = closestNode.prependNode(...dragNodes)
-            requestIdle(() => {
-              selection.batchSafeSelect(newNodes)
-            })
+            selection.batchSafeSelect(newNodes)
             operation.setDropNode(closestNode)
           }
         }

packages/react-settings-form/package.json

@@ -21,6 +21,7 @@
     "antd": "^4.15.5"
   },
   "dependencies": {
+    "@designable/shared": "0.1.18",
     "@designable/core": "0.1.18",
     "@designable/react": "0.1.18",
     "@formily/antd": "^2.0.0-beta.50",

packages/react-settings-form/src/SettingsForm.tsx

@@ -2,12 +2,13 @@ import React, { useMemo } from 'react'
 import { createForm } from '@formily/core'
 import { Form } from '@formily/antd'
 import { observer } from '@formily/react'
-import { Empty } from 'antd'
+import { requestIdle } from '@designable/shared'
 import { useSelection, useTree, usePrefix, IconWidget } from '@designable/react'
 import { SchemaField } from './SchemaField'
 import { ISettingFormProps } from './types'
 import { SettingsFormContext } from './context'
 import { useLocales } from './effects'
+import { Empty } from 'antd'
 import cls from 'classnames'
 import './styles.less'
 
@@ -22,44 +23,49 @@ const useCurrentNode = () => {
   return tree?.findById?.(selected[0])
 }
 
-export const SettingsForm: React.FC<ISettingFormProps> = observer((props) => {
-  const node = useCurrentNode()
-  const selected = useSelected()
-  const prefix = usePrefix('settings-form')
-  const form = useMemo(() => {
-    return createForm({
-      values: node?.props,
-      effects() {
-        useLocales()
-      },
-    })
-  }, [node, node?.designerProps?.propsSchema])
+export const SettingsForm: React.FC<ISettingFormProps> = observer(
+  (props) => {
+    const node = useCurrentNode()
+    const selected = useSelected()
+    const prefix = usePrefix('settings-form')
+    const form = useMemo(() => {
+      return createForm({
+        values: node?.props,
+        effects() {
+          useLocales()
+        },
+      })
+    }, [node, node?.designerProps?.propsSchema])
 
-  const render = () => {
-    if (node && node.designerProps?.propsSchema && selected.length === 1) {
+    const render = () => {
+      if (node && node.designerProps?.propsSchema && selected.length === 1) {
+        return (
+          <div className={cls(prefix, props.className)} style={props.style}>
+            <SettingsFormContext.Provider value={props}>
+              <Form
+                form={form}
+                colon={false}
+                labelWidth={120}
+                labelAlign="left"
+                wrapperAlign="right"
+                feedbackLayout="none"
+              >
+                <SchemaField schema={node.designerProps.propsSchema as any} />
+              </Form>
+            </SettingsFormContext.Provider>
+          </div>
+        )
+      }
       return (
-        <div className={cls(prefix, props.className)} style={props.style}>
-          <SettingsFormContext.Provider value={props}>
-            <Form
-              form={form}
-              colon={false}
-              labelWidth={120}
-              labelAlign="left"
-              wrapperAlign="right"
-              feedbackLayout="none"
-            >
-              <SchemaField schema={node.designerProps.propsSchema as any} />
-            </Form>
-          </SettingsFormContext.Provider>
+        <div className={prefix + '-empty'}>
+          <Empty />
         </div>
       )
     }
-    return (
-      <div className={prefix + '-empty'}>
-        <Empty />
-      </div>
-    )
-  }
 
-  return <IconWidget.Provider tooltip>{render()}</IconWidget.Provider>
-})
+    return <IconWidget.Provider tooltip>{render()}</IconWidget.Provider>
+  },
+  {
+    scheduler: requestIdle,
+  }
+)