fix: label 标签配置优化 (#81)

Co-authored-by: yxh01132861 <[email protected]>

src/components/LayerAttribute/BubbleLayerStyle/constant.ts

@@ -11,5 +11,5 @@ export const DefaultBubbleLayerStyle: BubbleLayerStyleAttributeValue = {
   strokeColor: 'blue',
   lineWidth: 1,
   lineOpacity: 1,
-  label: { style: { fill: 'red', fontSize: 18, textAnchor: 'center' } },
+  label: { style: { fill: 'red', fontSize: 18, textAnchor: 'center', textOffset: [0, 0] } },
 };

src/components/LayerAttribute/BubbleLayerStyle/demos/default.tsx

@@ -1,7 +1,7 @@
-import type { BubbleLayerStyleAttributeValue, BubbleLayerProps } from '@antv/larkmap';
-import { LarkMap, BubbleLayer, CustomControl, BubbleLayerStyleAttribute } from '@antv/larkmap';
-import React, { useEffect, useState } from 'react';
+import type { BubbleLayerProps, BubbleLayerStyleAttributeValue } from '@antv/larkmap';
+import { BubbleLayer, BubbleLayerStyleAttribute, CustomControl, LarkMap } from '@antv/larkmap';
 import 'antd/dist/antd.css';
+import React, { useEffect, useState } from 'react';
 
 const FieldList = [
   { type: 'string', lable: '城市', value: 'name', typeColor: 'green', typeName: '文本' },
@@ -18,7 +18,7 @@ const DefaultBubbleLayerStyle = {
   label: {
     field: 'temperature',
     visible: true,
-    style: { fill: '#454d64', fontSize: 18, textAnchor: 'center' as const },
+    style: { fill: '#454d64', fontSize: 18, textAnchor: 'center' as const, textOffset: [0, 0] },
   },
 };
 

src/components/LayerAttribute/BubbleLayerStyle/helper.ts

@@ -30,6 +30,7 @@ export const bubbleLayerStyleFlatToConfig = (style: Record<string, any>) => {
         fill: style.labelColor,
         fontSize: style.labelFontSize,
         textAnchor: style.labelTextAnchor,
+        textOffset: style.labelTextOffset,
       },
     },
   };
@@ -61,6 +62,7 @@ export const bubbleLayerStyleConfigToFlat = (styleConfig: BubbleLayerStyleAttrib
     labelColor: label?.style?.fill,
     labelFontSize: label?.style?.fontSize,
     labelTextAnchor: label?.style?.textAnchor,
+    labelTextOffset: label?.style?.textOffset,
   };
 
   return config;

src/components/LayerAttribute/BubbleLayerStyle/index.tsx

@@ -1,15 +1,15 @@
-import classNames from 'classnames';
-import React, { memo, useMemo } from 'react';
 import { Form, FormItem, Input, NumberPicker, Select, Switch } from '@formily/antd';
-import { createSchemaField } from '@formily/react';
 import type { Form as FormInstance } from '@formily/core';
 import { createForm, onFormValuesChange } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import classNames from 'classnames';
 import { debounce } from 'lodash-es';
-import { FormCollapse, FieldSelect, ColorPicker, RibbonSelect, Slider, SliderRange } from '../components';
-import type { BubbleLayerStyleAttributeProps } from './types';
-import schema from './schema';
-import { bubbleLayerStyleConfigToFlat, bubbleLayerStyleFlatToConfig } from './helper';
+import React, { memo, useMemo } from 'react';
+import { ColorPicker, FieldSelect, FormCollapse, Offset, RibbonSelect, Slider, SliderRange } from '../components';
 import { CLS_PREFIX } from './constant';
+import { bubbleLayerStyleConfigToFlat, bubbleLayerStyleFlatToConfig } from './helper';
+import schema from './schema';
+import type { BubbleLayerStyleAttributeProps } from './types';
 
 export const BubbleLayerStyleAttributeSchemaField: React.FC<
   Pick<BubbleLayerStyleAttributeProps, 'fieldList' | 'ribbonList'>
@@ -29,6 +29,7 @@ export const BubbleLayerStyleAttributeSchemaField: React.FC<
           ColorPicker,
           FieldSelect,
           SliderRange,
+          Offset,
         },
       }),
     [],

src/components/LayerAttribute/ChoroplethLayerStyle/constant.ts

@@ -10,5 +10,5 @@ export const DefaultChoroplethLayerStyle: ChoroplethLayerStyleAttributeValue = {
   strokeColor: 'blue',
   lineWidth: 1,
   lineOpacity: 1,
-  label: { style: { fill: 'red', fontSize: 18, textAnchor: 'center' } },
+  label: { style: { fill: 'red', fontSize: 18, textAnchor: 'center', textOffset: [0, 0] } },
 };

src/components/LayerAttribute/ChoroplethLayerStyle/demos/default.tsx

@@ -20,7 +20,7 @@ const DefaultChoroplethLayerStyle = {
   label: {
     field: 'name',
     visible: true,
-    style: { fill: 'blue', fontSize: 18, textAnchor: 'center' as const },
+    style: { fill: 'blue', fontSize: 18, textAnchor: 'center' as const, textOffset: [0, 0] },
   },
 };
 

src/components/LayerAttribute/ChoroplethLayerStyle/helper.ts

@@ -24,6 +24,7 @@ export const choroplethLayerStyleFlatToConfig = (style: Record<string, any>) =>
         fill: style.labelColor,
         fontSize: style.labelFontSize,
         textAnchor: style.labelTextAnchor,
+        textOffset: style.labelTextOffset,
       },
     },
   };
@@ -50,6 +51,7 @@ export const choroplethLayerStyleConfigToFlat = (styleConfig: ChoroplethLayerSty
     labelColor: label?.style?.fill,
     labelFontSize: label?.style?.fontSize,
     labelTextAnchor: label?.style?.textAnchor,
+    labelTextOffset: label?.style?.textOffset,
   };
 
   return config;

src/components/LayerAttribute/ChoroplethLayerStyle/index.tsx

@@ -1,15 +1,15 @@
-import classNames from 'classnames';
-import React, { memo, useMemo } from 'react';
 import { Form, FormItem, Input, NumberPicker, Select, Switch } from '@formily/antd';
-import { createSchemaField } from '@formily/react';
 import type { Form as FormInstance } from '@formily/core';
 import { createForm, onFormValuesChange } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import classNames from 'classnames';
 import { debounce } from 'lodash-es';
-import { FormCollapse, FieldSelect, ColorPicker, RibbonSelect, Slider, SliderRange } from '../components';
-import type { ChoroplethLayerStyleAttributeProps } from './types';
-import schema from './schema';
-import { choroplethLayerStyleConfigToFlat, choroplethLayerStyleFlatToConfig } from './helper';
+import React, { memo, useMemo } from 'react';
+import { ColorPicker, FieldSelect, FormCollapse, Offset, RibbonSelect, Slider, SliderRange } from '../components';
 import { CLS_PREFIX } from './constant';
+import { choroplethLayerStyleConfigToFlat, choroplethLayerStyleFlatToConfig } from './helper';
+import schema from './schema';
+import type { ChoroplethLayerStyleAttributeProps } from './types';
 
 export const ChoroplethLayerStyleAttributeSchemaField: React.FC<
   Pick<ChoroplethLayerStyleAttributeProps, 'fieldList' | 'ribbonList'>
@@ -29,6 +29,7 @@ export const ChoroplethLayerStyleAttributeSchemaField: React.FC<
           ColorPicker,
           FieldSelect,
           SliderRange,
+          Offset,
         },
       }),
     [],

src/components/LayerAttribute/common-schema/lable-collapse.ts

@@ -54,18 +54,36 @@ export default (fieldList: FieldSelectOptionType[] = []) => {
           labelTextAnchor: {
             type: 'string',
             title: '位置',
+            default: 'right',
             enum: [
               {
-                label: '居中',
-                value: 'center',
+                label: '居右',
+                value: 'right',
+              },
+
+              {
+                label: '右上',
+                value: 'top-right',
+              },
+              {
+                label: '右下',
+                value: 'bottom-right',
               },
               {
                 label: '居左',
                 value: 'left',
               },
               {
-                label: '居右',
-                value: 'right',
+                label: '左上',
+                value: 'top-left',
+              },
+              {
+                label: '左下',
+                value: 'bottom-left',
+              },
+              {
+                label: '居中',
+                value: 'center',
               },
             ],
             'x-decorator': 'FormItem',
@@ -75,6 +93,20 @@ export default (fieldList: FieldSelectOptionType[] = []) => {
             },
             'x-decorator-props': {},
           },
+
+          labelTextOffset: {
+            type: 'array',
+            title: '偏移量',
+            default: [0, 0],
+            'x-decorator': 'FormItem',
+            'x-component': 'Offset',
+            'x-component-props': {
+              dots: false,
+              range: true,
+              slider: false,
+            },
+            'x-decorator-props': {},
+          },
         },
       },
     },

src/components/LayerAttribute/components/Offset/AntdOffset.less

@@ -0,0 +1,14 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
+@slider-range-prefix-cls: ~'@{ant-prefix}-formily-offset-range';
+
+.@{slider-range-prefix-cls} {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 5px;
+
+  .@{ant-prefix}-input-number {
+    width: 70px;
+  }
+}

src/components/LayerAttribute/components/Offset/AntdOffset.tsx

@@ -0,0 +1,49 @@
+import { usePrefixCls } from '@formily/antd/esm/__builtins__/hooks/usePrefixCls';
+import { InputNumber } from 'antd';
+import React, { useEffect, useState } from 'react';
+import './AntdOffset.less';
+
+export interface AntdOffsetProps {
+  /**
+   * 偏移量
+   */
+  value?: [number, number];
+  /**
+   * 选择发生改变时
+   */
+  onChange?: (value: [number, number]) => void;
+}
+
+const AntdOffset: React.FC<AntdOffsetProps> = (props) => {
+  const prefixCls = usePrefixCls('formily-offset-range');
+  const [sliderVal, setSliderVal] = useState<[number, number]>(props.value ?? [0, 0]);
+
+  useEffect(() => {
+    props.onChange(sliderVal);
+  }, [sliderVal]);
+
+  return (
+    <div className={prefixCls}>
+      <InputNumber
+        {...props}
+        size="small"
+        value={sliderVal[0]}
+        onChange={(val) => {
+          const value: [number, number] = [val, Number(sliderVal[1])];
+          setSliderVal(value);
+        }}
+      />
+      <InputNumber
+        {...props}
+        size="small"
+        value={sliderVal[1]}
+        onChange={(val) => {
+          const value: [number, number] = [sliderVal[0], Number(val)];
+          setSliderVal(value);
+        }}
+      />
+    </div>
+  );
+};
+
+export default AntdOffset;

src/components/LayerAttribute/components/Offset/index.tsx

@@ -0,0 +1,7 @@
+import { connect } from '@formily/react';
+import type { AntdOffsetProps } from './AntdOffset';
+import AntdOffset from './AntdOffset';
+
+const Offset: React.FC<AntdOffsetProps> = connect(AntdOffset);
+
+export default Offset;

src/components/LayerAttribute/components/SliderRange/AntdSliderRange.tsx

@@ -1,7 +1,7 @@
-import type { SliderRangeProps } from 'antd/lib/slider';
+import { usePrefixCls } from '@formily/antd/esm/__builtins__/hooks/usePrefixCls';
 import { InputNumber, Slider } from 'antd';
+import type { SliderRangeProps } from 'antd/lib/slider';
 import React, { useEffect, useState } from 'react';
-import { usePrefixCls } from '@formily/antd/esm/__builtins__/hooks/usePrefixCls';
 import './AntdSliderRange.less';
 
 const defaultConfig = {

src/components/LayerAttribute/components/index.ts

@@ -1,4 +1,5 @@
 export { ColorPicker, FieldSelect, RibbonSelect } from '@antv/insight-component';
 export { default as FormCollapse } from './FormCollapse';
+export { default as Offset } from './Offset';
 export { default as Slider } from './Slider';
 export { default as SliderRange } from './SliderRange';

src/components/Layers/CompositeLayers/IconFontLayer/index.md

@@ -1,8 +1,8 @@
 ---
 toc: content
-order: 8
+order: 3
 group:
-  title: 基础图层
+  title: 复合图层
   order: 1
 nav:
   title: 组件

src/components/Layers/CompositeLayers/IconImageLayer/index.md

@@ -1,8 +1,8 @@
 ---
 toc: content
-order: 9
+order: 4
 group:
-  title: 基础图层
+  title: 复合图层
   order: 1
 nav:
   title: 组件