chore: improve code

alibaba · Dec 1, 2021 · a2f2b15 · a2f2b15
1 parent cfe6d18
commit a2f2b15
Show file tree

Hide file tree

Showing 23 changed files with 343 additions and 188 deletions.
diff --git a/formily/antd/src/components/FormGrid/preview.tsx b/formily/antd/src/components/FormGrid/preview.tsx
@@ -86,6 +86,7 @@ FormGrid.Behavior = createBehavior(
     selector: (node) => node.props['x-component'] === 'FormGrid.GridColumn',
     designerProps: {
       droppable: true,
+      resizeXPath: 'x-component-props.gridSpan',
       allowDrop: (node) => node.props['x-component'] === 'FormGrid',
       propsSchema: createFieldSchema(AllSchemas.FormGrid.GridColumn),
     },

diff --git a/formily/antd/src/locales/Field.ts b/formily/antd/src/locales/Field.ts
@@ -6,7 +6,7 @@ export const Field = {
       required: '必填',
       description: '描述',
       default: '默认值',
-      enum: '数据源',
+      enum: '可选项',
       'x-display': {
         title: '展示状态',
         tooltip: '半隐藏只会隐藏UI，全隐藏会删除数据',
@@ -104,7 +104,7 @@ export const Field = {
       required: 'Required',
       description: 'Description',
       default: 'Default',
-      enum: 'DataSource',
+      enum: 'Options',
       'x-display': {
         title: 'Display State',
         tooltip:
@@ -218,7 +218,7 @@ export const Field = {
       required: '필수항목',
       description: '설명',
       default: '기본 값',
-      enum: 'DataSource',
+      enum: 'Options',
       'x-display': {
         title: '디스플레이 상태',
         tooltip:

diff --git a/formily/antd/src/locales/Form.ts b/formily/antd/src/locales/Form.ts
@@ -37,7 +37,7 @@ export const Form = createLocales(Component, {
     },
   },
   'en-US': {
-    title: 'Form',
+    title: 'Form',
     settings: {
       labelCol: 'Label Col',
       wrapperCol: 'Wrapper Col',

diff --git a/formily/antd/src/locales/FormGrid.ts b/formily/antd/src/locales/FormGrid.ts
@@ -32,8 +32,8 @@ export const FormGrid = {
     },
   },
   'ko-KR': {
-    title: 'Grid',
-    addGridColumn: 'Grid Column 추가',
+    title: '그리드 열',
+    addGridColumn: '그리드 열 추가',
     settings: {
       'x-component-props': {
         minWidth: '최소 너비',

diff --git a/formily/antd/src/locales/FormLayout.ts b/formily/antd/src/locales/FormLayout.ts
@@ -77,4 +77,46 @@ export const FormLayout = {
       },
     },
   },
+  'ko-KR': {
+    title: '양식 레이아웃',
+    settings: {
+      'x-component-props': {
+        labelCol: '레이블 열',
+        wrapperCol: '래퍼 열',
+        colon: '콜론',
+        labelAlign: {
+          title: '레이블 정렬',
+          dataSource: ['왼쪽', '오른쪽', '상속'],
+        },
+        wrapperAlign: {
+          title: '래퍼 정렬',
+          dataSource: ['왼쪽', '오른쪽', '상속'],
+        },
+        labelWrap: '레이블 랩',
+        wrapperWrap: '래퍼 랩',
+        labelWidth: '레이블 너비',
+        wrapperWidth: '래퍼 너비',
+        fullness: '충만',
+        inset: '삽입',
+        shallow: '얕다',
+        bordered: '경계',
+        size: {
+          title: '크기',
+          dataSource: ['큰', '작은', '기본', '상속'],
+        },
+        layout: {
+          title: '레이아웃',
+          dataSource: ['가로', '세로', '인라인', '상속'],
+        },
+        feedbackLayout: {
+          title: '피드백 레이아웃',
+          dataSource: ['느슨한', '간단한', '팝업', '없음', '상속'],
+        },
+        tooltipLayout: {
+          title: '도구 설명 레이아웃',
+          dataSource: ['아이콘', '텍스트', '상속'],
+        },
+      },
+    },
+  },
 }
diff --git a/formily/next/src/locales/Field.ts b/formily/next/src/locales/Field.ts
@@ -6,7 +6,7 @@ export const Field = {
       required: '必填',
       description: '描述',
       default: '默认值',
-      enum: '数据源',
+      enum: '可选项',
       'x-display': {
         title: '展示状态',
         tooltip: '半隐藏只会隐藏UI，全隐藏会删除数据',
@@ -157,7 +157,7 @@ export const Field = {
       required: 'Required',
       description: 'Description',
       default: 'Default',
-      enum: 'DataSource',
+      enum: 'Options',
       'x-display': {
         title: 'Display State',
         tooltip:

diff --git a/formily/next/src/locales/Select.ts b/formily/next/src/locales/Select.ts
@@ -15,12 +15,12 @@ export const Select = {
           tooltip: '弹层内容为空的文案',
         },
         showDataSourceChildren: {
-          title: '展示数据源子节点',
+          title: '展示可选项子节点',
         },
         hasSelectAll: '多选模式下是否可全选',
         cacheValue: {
           title: '缓存选中值',
-          tooltip: '数据源变化的时是否保留已选的内容',
+          tooltip: '可选项变化的时是否保留已选的内容',
         },
         tagInline: '标签行内展示',
         tagClosable: '标签可关闭',

diff --git a/formily/next/src/locales/TreeSelect.ts b/formily/next/src/locales/TreeSelect.ts
@@ -15,12 +15,12 @@ export const TreeSelect = {
           tooltip: '弹层内容为空的文案',
         },
         showDataSourceChildren: {
-          title: '展示数据源子节点',
+          title: '展示可选项子节点',
         },
         hasSelectAll: '多选模式下是否可全选',
         cacheValue: {
           title: '缓存选中值',
-          tooltip: '数据源变化的时是否保留已选的内容',
+          tooltip: '可选项变化的时是否保留已选的内容',
         },
         tagInline: '标签行内展示',
         tagClosable: '标签可关闭',

diff --git a/formily/setters/src/components/DataSourceSetter/TreePanel.tsx b/formily/setters/src/components/DataSourceSetter/TreePanel.tsx
@@ -89,7 +89,7 @@ export const TreePanel: React.FC<ITreePanelProps> = observer((props) => {
             onClick={() => {
               const uuid = uid()
               const dataSource = props.treeDataSource.dataSource
-              const initialKeyValuePairs = props.defaultOptionValue.map(
+              const initialKeyValuePairs = props.defaultOptionValue?.map(
                 (item) => ({ ...item })
               ) || [
                 {

diff --git a/formily/setters/src/locales/en-US.ts b/formily/setters/src/locales/en-US.ts
@@ -53,9 +53,9 @@ export default {
         pleaseSelectNode: 'please select node from the tree on the left',
         addKeyValuePair: 'Add Key Value Pair',
         configureDataSource: 'Configure',
-        dataSource: 'DataSource',
+        dataSource: 'Options',
         defaultTitle: 'Default Title',
-        dataSourceTree: 'DataSource Tree',
+        dataSourceTree: 'Options Tree',
         addNode: 'Add Node',
         label: 'label',
         value: 'value',
@@ -84,7 +84,7 @@ export default {
         description: 'Description',
         value: 'Value',
         initialValue: 'InitialValue',
-        dataSource: 'DataSource',
+        dataSource: 'Options',
         required: 'Required',
         component: 'Component',
         componentProps: 'Component Props',

diff --git a/formily/setters/src/locales/ko-KR.ts b/formily/setters/src/locales/ko-KR.ts
@@ -53,9 +53,9 @@ export default {
         pleaseSelectNode: '왼쪽에 있는 트리에서 노드를 선택하세요.',
         addKeyValuePair: '키/값 쌍 추가',
         configureDataSource: '구성',
-        dataSource: 'DataSource',
+        dataSource: 'Options',
         defaultTitle: '기본 제목',
-        dataSourceTree: 'DataSource 트리',
+        dataSourceTree: 'Options 트리',
         addNode: '노드 추가',
         label: '레이블',
         value: '값',
@@ -82,7 +82,7 @@ export default {
         description: '설명',
         value: '값',
         initialValue: '초기값',
-        dataSource: 'DataSource',
+        dataSource: 'Options',
         required: '필수 항목',
         component: '컴포넌트',
         componentProps: '컴포넌트 속성',

diff --git a/formily/setters/src/locales/zh-CN.ts b/formily/setters/src/locales/zh-CN.ts
@@ -52,10 +52,10 @@ export default {
         nodeProperty: '节点属性',
         pleaseSelectNode: '请先选择左侧树节点',
         addKeyValuePair: '添加键值对',
-        configureDataSource: '配置数据源',
-        dataSource: '数据源',
+        configureDataSource: '配置可选项',
+        dataSource: '可选项',
         defaultTitle: '默认标题',
-        dataSourceTree: '数据源节点树',
+        dataSourceTree: '可选项节点树',
         addNode: '新增节点',
         label: '键名',
         value: '键值',
@@ -82,7 +82,7 @@ export default {
         description: '描述',
         value: '字段值',
         initialValue: '默认值',
-        dataSource: '数据源',
+        dataSource: '可选项',
         required: '是否必填',
         component: '组件',
         componentProps: '组件属性',

diff --git a/packages/core/src/models/Dragon.ts b/packages/core/src/models/Dragon.ts
@@ -100,13 +100,14 @@ export class Dragon {
       this.forceBlock ? false : isInline
     )
     const getValidParent = (node: TreeNode) => {
+      if (!node) return
       if (node.parent?.allowSibling(this.dragNodes)) return node.parent
       return getValidParent(node.parent)
     }
     if (isPointInRect(point, closestRect, this.sensitive)) {
       if (!closestNode.allowAppend(this.dragNodes)) {
         if (!closestNode.allowSibling(this.dragNodes)) {
-          const parentClosestNode = getValidParent(this.closestNode)
+          const parentClosestNode = getValidParent(closestNode)
           if (parentClosestNode) {
             this.closestNode = parentClosestNode
           }
@@ -153,7 +154,7 @@ export class Dragon {
       return isAfter ? ClosestPosition.InnerAfter : ClosestPosition.InnerBefore
     } else {
       if (!closestNode.allowSibling(this.dragNodes)) {
-        const parentClosestNode = getValidParent(this.closestNode)
+        const parentClosestNode = getValidParent(closestNode)
         if (parentClosestNode) {
           this.closestNode = parentClosestNode
         }

diff --git a/packages/core/src/models/Engine.ts b/packages/core/src/models/Engine.ts
@@ -99,6 +99,7 @@ export class Engine extends Event {
     clickStopPropagationAttrName: 'data-click-stop-propagation',
     nodeHelpersIdAttrName: 'data-designer-node-helpers-id',
     nodeDragHandlerAttrName: 'data-designer-node-handler',
+    nodeResizeHandlerAttrName: 'data-designer-node-resize-handler',
     outlineNodeIdAttrName: 'data-designer-outline-node-id',
     defaultScreenType: ScreenType.PC,
   }

diff --git a/packages/core/src/models/Selection.ts b/packages/core/src/models/Selection.ts
@@ -49,7 +49,10 @@ export class Selection {
 
   select(id: string | TreeNode, fromUser?: boolean) {
     if (isStr(id)) {
-      if (this.selected.length === 1 && this.selected.includes(id)) return
+      if (this.selected.length === 1 && this.selected.includes(id)) {
+        this.trigger(SelectNodeEvent, fromUser)
+        return
+      }
       this.selected = [id]
       this.trigger(SelectNodeEvent, fromUser)
     } else {

diff --git a/packages/core/src/models/TreeNode.ts b/packages/core/src/models/TreeNode.ts
@@ -385,6 +385,14 @@ export class TreeNode {
     return this.designerProps.draggable ?? true
   }
 
+  allowResize() {
+    if (this === this.root && !this.isSourceNode) return false
+    return (
+      (this.designerProps.resizeXPath || this.designerProps.resizeYPath) ??
+      false
+    )
+  }
+
   allowDelete() {
     if (this === this.root) return false
     return this.designerProps.deletable ?? true

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -21,6 +21,7 @@ export type IEngineProps<T = Event> = IEventProps<T> & {
   outlineNodeIdAttrName?: string //大纲树节点ID的dom属性名
   nodeHelpersIdAttrName?: string //节点工具栏属性名
   nodeDragHandlerAttrName?: string //节点拖拽手柄属性名
+  nodeResizeHandlerAttrName?: string //节点尺寸拖拽手柄属性名
   defaultComponentTree?: ITreeNode //默认组件树
   defaultScreenType?: ScreenType
   rootComponentName?: string
@@ -36,7 +37,7 @@ export type IEngineContext = {
 export interface IDesignerProps {
   package?: string //npm包名
   registry?: string //web npm注册平台地址
-  version?: string //semever版本号
+  version?: string //semver版本号
   path?: string //组件模块路径
   title?: string //标题
   description?: string //描述
@@ -45,7 +46,11 @@ export interface IDesignerProps {
   draggable?: boolean //是否可拖拽，默认为true
   deletable?: boolean //是否可删除，默认为true
   cloneable?: boolean //是否可拷贝，默认为true
-  resizable?: boolean //是否可修改尺寸，默认为false
+  resizeXPath?: string //尺寸X轴属性修改路径
+  resizeYPath?: string //尺寸Y轴属性修改路径
+  resizeStep?: number //尺寸拖拽步数
+  resizeMin?: number //尺寸拖拽最小值
+  resizeMax?: number //尺寸拖拽最大值
   inlineChildrenLayout?: boolean //子节点内联，用于指定复杂布局容器，强制内联
   selfRenderChildren?: boolean //是否自己渲染子节点
   propsSchema?: ISchema //Formily JSON Schema