feat(core): support node designerProps with nodeName

alibaba · Aug 27, 2021 · 864ae0f · 864ae0f
1 parent 80d62d4
commit 864ae0f
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 34 deletions.
diff --git a/packages/core/src/models/TreeNode.ts b/packages/core/src/models/TreeNode.ts
@@ -23,11 +23,11 @@ import { GlobalRegistry } from '../registry'
 
 export interface ITreeNode {
   componentName?: string
-  designerProps?: IDesignerControllerProps
   operation?: Operation
   hidden?: boolean
   isSourceNode?: boolean
   id?: string
+  name?: string
   props?: Record<string | number | symbol, any>
   children?: ITreeNode[]
 }
@@ -116,14 +116,14 @@ export class TreeNode {
 
   componentName = 'NO_NAME_COMPONENT'
 
+  name = ''
+
   props: ITreeNode['props'] = {}
 
   children: TreeNode[] = []
 
   isSelfSourceNode: boolean
 
-  selfDesignerProps: IDesignerControllerProps
-
   constructor(node?: ITreeNode, parent?: TreeNode) {
     if (node instanceof TreeNode) {
       return node
@@ -164,17 +164,14 @@ export class TreeNode {
     })
   }
 
-  set designerProps(props: IDesignerControllerProps) {
-    this.selfDesignerProps = props || {}
-  }
-
   get designerProps(): IDesignerProps {
     const commonDesignerProps = GlobalRegistry.getComponentDesignerProps(
       this.componentName
     )
+    const nodeDesignerProps = GlobalRegistry.getNodeDesignerProps(this.name)
     const finallyDesignerProps: IDesignerProps = {
       ...resolveDesignerProps(this, commonDesignerProps),
-      ...resolveDesignerProps(this, this.selfDesignerProps),
+      ...resolveDesignerProps(this, nodeDesignerProps),
     }
     const display = this.props?.style?.display
     if (display) {
@@ -206,9 +203,9 @@ export class TreeNode {
     return this.parent.children.indexOf(this)
   }
 
-  get childrens(): TreeNode[] {
+  get descendants(): TreeNode[] {
     return this.children.reduce((buf, node) => {
-      return buf.concat(node).concat(node.childrens)
+      return buf.concat(node).concat(node.descendants)
     }, [])
   }
 
@@ -669,8 +666,8 @@ export class TreeNode {
         if (node.componentName) {
           this.componentName = node.componentName
         }
-        if (node.designerProps) {
-          this.designerProps = node.designerProps
+        if (node.name) {
+          this.name = node.name
         }
         this.props = {
           ...this.designerProps?.defaultProps,

diff --git a/packages/core/src/registry.ts b/packages/core/src/registry.ts
@@ -1,13 +1,14 @@
 import { each, isFn, isPlainObj } from '@designable/shared'
 import { Path } from '@formily/path'
 import { define, observable } from '@formily/reactive'
+import { TreeNode } from './models'
 import {
   IDesignerControllerProps,
   IDesignerControllerPropsMap,
   IDesignerLocales,
 } from './types'
 
-const getBrowserlanguage = () => {
+const getBrowserLanguage = () => {
   /* istanbul ignore next */
   if (!window.navigator) {
     return 'en'
@@ -32,20 +33,22 @@ const getISOCode = (language: string) => {
   return isoCode
 }
 
-const DESIGNER_PROPS_MAP: IDesignerControllerPropsMap = {
+const COMPONENT_DESIGNER_PROPS_MAP: IDesignerControllerPropsMap = {
   Root: {
     droppable: true,
     cloneable: false,
     deletable: false,
   },
 }
 
+const NODE_DESIGNER_PROPS_MAP: IDesignerControllerPropsMap = {}
+
 const DESIGNER_ICONS_MAP: Record<string, any> = {}
 
 const DESIGNER_LOCALES: IDesignerLocales = define(
   {
     messages: {},
-    language: getBrowserlanguage(),
+    language: getBrowserLanguage(),
   },
   {
     language: observable.ref,
@@ -77,34 +80,55 @@ const mergeLocales = (target: any, source: any) => {
   return source
 }
 
+const resolveDesignerProps = (
+  node: TreeNode,
+  props: IDesignerControllerProps
+) => {
+  return isFn(props) ? props(node) : props
+}
+
 const DESIGNER_GlobalRegistry = {
   setComponentDesignerProps: (
     componentName: string,
     props: IDesignerControllerProps
   ) => {
     const originProps = GlobalRegistry.getComponentDesignerProps(componentName)
-    DESIGNER_PROPS_MAP[componentName] = (node) => {
-      if (isFn(originProps)) {
-        if (isFn(props)) {
-          return { ...originProps(node), ...props(node) }
-        } else {
-          return { ...originProps(node), ...props }
-        }
-      } else if (isFn(props)) {
-        return { ...originProps, ...props(node) }
-      } else {
-        return { ...originProps, ...props }
+    COMPONENT_DESIGNER_PROPS_MAP[componentName] = (node) => {
+      return {
+        ...resolveDesignerProps(node, originProps),
+        ...resolveDesignerProps(node, props),
+      }
+    }
+  },
+
+  setNodeDesignerProps: (nodeName: string, props: IDesignerControllerProps) => {
+    const originProps = GlobalRegistry.getNodeDesignerProps(nodeName)
+    NODE_DESIGNER_PROPS_MAP[nodeName] = (node) => {
+      return {
+        ...resolveDesignerProps(node, originProps),
+        ...resolveDesignerProps(node, props),
       }
     }
   },
 
   getComponentDesignerProps: (componentName: string) => {
-    return DESIGNER_PROPS_MAP[componentName] || {}
+    return COMPONENT_DESIGNER_PROPS_MAP[componentName] || {}
+  },
+
+  getNodeDesignerProps: (nodeName: string) => {
+    return NODE_DESIGNER_PROPS_MAP[nodeName] || {}
   },
 
-  registerDesignerProps: (map: IDesignerControllerPropsMap) => {
-    each(map, (props, componentName) => {
-      GlobalRegistry.setComponentDesignerProps(componentName, props)
+  registerDesignerProps: (
+    map: IDesignerControllerPropsMap,
+    type: 'component' | 'node' = 'component'
+  ) => {
+    each(map, (props, name) => {
+      if (type === 'component') {
+        GlobalRegistry.setComponentDesignerProps(name, props)
+      } else {
+        GlobalRegistry.setNodeDesignerProps(name, props)
+      }
     })
   },
 

diff --git a/packages/core/src/shortcuts/MultiSelection.ts b/packages/core/src/shortcuts/MultiSelection.ts
@@ -25,7 +25,7 @@ export const SelectAllNodes = new Shortcut({
     if (operation) {
       const tree = operation.tree
       const selection = operation.selection
-      selection.batchSelect(tree.childrens)
+      selection.batchSelect(tree.descendants)
     }
   },
 })
diff --git a/packages/playground/src/main.tsx b/packages/playground/src/main.tsx
@@ -123,6 +123,10 @@ GlobalRegistry.registerDesignerProps({
   },
 })
 
+GlobalRegistry.setNodeDesignerProps('Card2', {
+  title: 'Card2',
+})
+
 GlobalDragSource.setSourcesByGroup('form', [
   {
     componentName: 'Field',
@@ -144,9 +148,7 @@ GlobalDragSource.setSourcesByGroup('form', [
   },
   {
     componentName: 'Card',
-    designerProps: {
-      title: '卡片123',
-    },
+    name: 'Card2',
     props: {
       title: '卡片',
       type: 'void',