From 864ae0fc75dc893fd6045c47b3b19bb170c6325d Mon Sep 17 00:00:00 2001 From: "zhili.wzl" Date: Fri, 27 Aug 2021 09:48:32 +0800 Subject: [PATCH] feat(core): support node designerProps with nodeName --- packages/core/src/models/TreeNode.ts | 21 +++---- packages/core/src/registry.ts | 60 +++++++++++++------ packages/core/src/shortcuts/MultiSelection.ts | 2 +- packages/playground/src/main.tsx | 8 ++- 4 files changed, 57 insertions(+), 34 deletions(-) diff --git a/packages/core/src/models/TreeNode.ts b/packages/core/src/models/TreeNode.ts index f073f0bc6..1bb616efd 100644 --- 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 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 index 8e1b6e05a..7e81a9808 100644 --- 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,7 +33,7 @@ const getISOCode = (language: string) => { return isoCode } -const DESIGNER_PROPS_MAP: IDesignerControllerPropsMap = { +const COMPONENT_DESIGNER_PROPS_MAP: IDesignerControllerPropsMap = { Root: { droppable: true, cloneable: false, @@ -40,12 +41,14 @@ const DESIGNER_PROPS_MAP: IDesignerControllerPropsMap = { }, } +const NODE_DESIGNER_PROPS_MAP: IDesignerControllerPropsMap = {} + const DESIGNER_ICONS_MAP: Record = {} 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 index ff84de5ed..7984f0ffa 100644 --- 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 index dde1a2a47..cc7861078 100644 --- 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',