fix: 自定义文本展示补充

antvis · Oct 9, 2023 · 736706c · 736706c
1 parent 67f64da
commit 736706c
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 35 deletions.
diff --git a/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts
@@ -5,15 +5,24 @@ import type { BubbleLayerStyleAttributeValue } from './types';
  * 将表单的平铺数据转为图层样式的数据结构
  * */
 export const bubbleLayerStyleFlatToConfig = (style: Record<string, any>) => {
+  const fillColor = style.fillColorField
+    ? {
+        field: style.fillColorField,
+        value: typeof style.fillColorScale === 'string' ? style.fillColorRange.colors : style.fillColorScale.colors,
+        scale:
+          typeof style.fillColorScale === 'string'
+            ? { type: style.fillColorScale }
+            : {
+                type: style.fillColorScale.thresholdType === 'string' ? 'cat' : style.fillColorScale.type,
+                domain: style.fillColorScale.domain,
+                thresholdType: style.fillColorScale.type,
+              },
+        isReversed: style.fillColorRange.isReversed,
+      }
+    : style.fillColor;
+
   const styleConfig: BubbleLayerStyleAttributeValue = {
-    fillColor: style.fillColorField
-      ? {
-          field: style.fillColorField,
-          value: style.fillColorRange.colors,
-          scale: { type: style.fillColorScale },
-          isReversed: style.fillColorRange.isReversed,
-        }
-      : style.fillColor,
+    fillColor,
     opacity: style.fillColorOpacity,
     strokeColor: style.strokeColor,
     lineWidth: style.lineWidth,
@@ -43,6 +52,7 @@ export const bubbleLayerStyleFlatToConfig = (style: Record<string, any>) => {
     //   rings: style.animateRings,
     // },
   };
+
   return styleConfig;
 };
 
@@ -63,6 +73,21 @@ export const bubbleLayerStyleConfigToFlat = (styleConfig: BubbleLayerStyleAttrib
     maxZoom = 24,
     blend,
   } = styleConfig;
+
+  const fillColorScale =
+    typeof fillColor === 'object'
+      ? fillColor.scale?.domain
+        ? {
+            // @ts-ignore
+            type: fillColor?.scale?.thresholdType ?? '',
+            thresholdType: fillColor?.scale?.type === 'cat' ? 'string' : 'number',
+            // @ts-ignore
+            domain: fillColor?.scale?.domain ?? [],
+            colors: fillColor?.value,
+          }
+        : fillColor?.scale?.type
+      : undefined;
+
   const config = {
     fillColorField: typeof fillColor === 'object' ? fillColor?.field : undefined,
     fillColorRange:
@@ -73,7 +98,7 @@ export const bubbleLayerStyleConfigToFlat = (styleConfig: BubbleLayerStyleAttrib
             isReversed: fillColor?.isReversed || false,
           }
         : undefined,
-    fillColorScale: typeof fillColor === 'object' ? fillColor?.scale?.type : undefined,
+    fillColorScale,
     fillColor: typeof fillColor !== 'object' ? fillColor : undefined,
     fillColorOpacity: opacity,
     strokeColor: strokeColor,

diff --git a/packages/li-p2/src/LayerAttribute/common-schema/fill-color-collapse.ts b/packages/li-p2/src/LayerAttribute/common-schema/fill-color-collapse.ts
@@ -102,6 +102,15 @@ export default (options: AttributeSchemaOptions) => {
                   },
                 },
               },
+              {
+                dependencies: ['fillColorScale'],
+                fulfill: {
+                  run: `$form.setFieldState("fillColorRange", (state) => {
+                    state.disabled = $form.getFieldState("fillColorScale", (state) => state.value?.type === "threshold");
+                    state.value = { colors: $form.getFieldState("fillColorScale", (state) => state.value?.colors)??state.value.colors };
+                })`,
+                },
+              },
             ],
           },
 

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/index.tsx
@@ -26,7 +26,7 @@ const CustomContent = (props: CustomContentProps) => {
   const prefixCls = usePrefixCls('formily-color-range-selector__custom-range');
   const [wrapSSR, hashId] = useStyle(prefixCls);
   const [customRanges, setCustomRanges] = useState<CustomItems[]>([]);
-  const [customType, setCustomType] = useState<CustomType>(defaultCustomRanges?.type || 'string');
+  const [customType, setCustomType] = useState<CustomType>(defaultCustomRanges?.thresholdType || 'string');
 
   const selectedOption = useMemo(() => {
     if (!customRanges.length) {
@@ -91,7 +91,7 @@ const CustomContent = (props: CustomContentProps) => {
     const list = customRanges.map((item) => {
       return { value: item.value, color: item.color };
     });
-    onChange({ type: customType, scaleType: 'threshold', list });
+    onChange({ thresholdType: customType, type: 'threshold', list });
     onCancel();
   };
 
@@ -125,8 +125,8 @@ const CustomContent = (props: CustomContentProps) => {
 
       <DndProvider backend={HTML5Backend}>
         {customRanges.map((customItem: CustomItems, index: number) => {
-          const min = index === 0 ? dataset.min : customRanges[index - 1].value[1];
-          const max = dataset.max;
+          const min = index === 0 ? dataset?.min : customRanges[index - 1].value[1];
+          const max = dataset?.max;
 
           return (
             <CustomItem

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/demos/default.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/demos/default.tsx
@@ -114,10 +114,10 @@ const schema = {
       type: 'string',
       title: '颜色划分',
       default: {
-        scaleType: 'threshold',
-        type: 'string',
+        type: 'threshold',
+        thresholdType: 'string',
         domain: [5, 5.2, 5.6, 5.7, 7.9],
-        colors: ['#f00', '#ff0'],
+        colors: ['#f00', '#ff0', '#00f'],
       },
       'x-decorator': 'FormItem',
       'x-component': 'ScaleSelector',

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts
@@ -1,19 +1,19 @@
 import type { CustomItemType } from './type';
 
 export const transformToLayer = (val: CustomItemType) => {
-  const { type, scaleType, list } = val;
+  const { type, thresholdType, list } = val;
   const colors = list.map((item) => item.color);
-  if (type === 'number') {
+  if (thresholdType === 'number') {
     const _val = Array.from(new Set(list.map((item) => item.value).flat())).filter((item) => item);
     return {
-      scaleType,
+      thresholdType,
       type,
       domain: _val,
       colors,
     };
   }
 
-  if (type === 'string') {
+  if (thresholdType === 'string') {
     const _val: (string | number)[] = [];
     for (let i = 0; i < list.length; i++) {
       const item = list[i].value;
@@ -23,7 +23,7 @@ export const transformToLayer = (val: CustomItemType) => {
     }
 
     return {
-      scaleType,
+      thresholdType,
       type,
       domain: _val,
       colors,
@@ -32,8 +32,12 @@ export const transformToLayer = (val: CustomItemType) => {
 };
 
 export const transformToScale = (val: Record<string, any>) => {
-  const { scaleType, type, domain, colors } = val;
-  if (type === 'number') {
+  if (typeof val === 'string') {
+    return val;
+  }
+
+  const { thresholdType, type, domain, colors } = val || {};
+  if (thresholdType === 'number') {
     const list = colors.map((item: string, index: number) => {
       return {
         value: [domain[index - 1], domain[index]],
@@ -42,13 +46,13 @@ export const transformToScale = (val: Record<string, any>) => {
     });
 
     return {
-      scaleType,
+      thresholdType,
       type,
       list,
     };
   }
 
-  if (type === 'string') {
+  if (thresholdType === 'string') {
     const list = domain.map((item: string | number, index: number) => {
       return {
         value: item,
@@ -67,7 +71,7 @@ export const transformToScale = (val: Record<string, any>) => {
     }
 
     return {
-      scaleType,
+      thresholdType,
       type,
       list: Object.keys(result).map((key) => ({
         color: key,

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx
@@ -7,18 +7,18 @@ import cls from 'classnames';
 import React, { useEffect, useMemo, useState } from 'react';
 import { DEHAULT_OPTIONS } from './constants';
 import CustomContent from './CustomContent';
+import { transformToLayer, transformToScale } from './helper';
 import useStyle from './style';
 import type { CustomItemType, DatasetType } from './type';
-import { transformToLayer, transformToScale } from './helper';
 export interface ColorScaleSelectOptionType extends DefaultOptionType {
   type: 'string' | 'number' | 'threshold';
-  scaleType?: string;
+  thresholdType?: string;
   dataset?: DatasetType;
 }
 
 export type ScaleSelectorProps = SelectProps<any, ColorScaleSelectOptionType> & {
   type: 'string' | 'number';
-  scaleType: string;
+  thresholdType: string;
   dataset?: DatasetType;
 };
 
@@ -28,11 +28,11 @@ const Internal = (props: ScaleSelectorProps) => {
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const defaultValue = useMemo(() => {
-    return transformToScale(props.value);
+    return transformToScale(props.value) as CustomItemType;
   }, [value]);
 
   const [open, setOpen] = useState(false);
-  const [type, setType] = useState(defaultValue?.scaleType);
+  const [type, setType] = useState(defaultValue?.type ?? defaultValue);
   const [customOpen, setCustomOpen] = useState(false);
 
   const selectOptions = useMemo(() => {
@@ -42,7 +42,7 @@ const Internal = (props: ScaleSelectorProps) => {
   }, [props.type, props.options]);
 
   useEffect(() => {
-    if (!props.value?.scaleType || selectOptions.findIndex((item) => item.value === props.value?.scaleType) === -1) {
+    if (!props.value?.type || selectOptions.findIndex((item) => item.value === props.value?.type) === -1) {
       if (props.onChange) {
         const val = selectOptions[0].value as string;
         props.onChange(val, selectOptions);
@@ -54,7 +54,7 @@ const Internal = (props: ScaleSelectorProps) => {
     const _val = transformToLayer(ranges);
     // @ts-ignore
     props?.onChange({
-      scaleType: 'threshold',
+      type: 'threshold',
       ..._val,
     });
     setOpen(false);

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/type.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/type.ts
@@ -9,8 +9,8 @@ export type CustomItems = {
 export type CustomType = 'string' | 'number';
 
 export type CustomItemType = {
-  type: CustomType;
-  scaleType: string;
+  type: string;
+  thresholdType: CustomType;
   list: CustomItems[];
 };
 

diff --git a/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/index.tsx b/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/index.tsx
@@ -10,6 +10,7 @@ import useStyle from './style';
 import type { ColorRange, SelectorValue } from './types';
 
 export interface ColorRangeSelectorProps {
+  disabled?: boolean;
   /**
    * 颜色值
    */
@@ -41,6 +42,7 @@ const Internal = (props: ColorRangeSelectorProps) => {
 
   return wrapSSR(
     <Select
+      disabled={props.disabled}
       className={cls(`${prefixCls}`, hashId)}
       open={open}
       onDropdownVisibleChange={(visible) => setOpen(visible)}