fix: 自定义展示未定义颜色

antvis · Nov 30, 2023 · 6bed452 · 6bed452
1 parent f550584
commit 6bed452
Show file tree

Hide file tree

Showing 17 changed files with 144 additions and 27 deletions.
diff --git a/packages/li-analysis-assets/src/layers/ChinaAdminLayer/register-form/index.ts b/packages/li-analysis-assets/src/layers/ChinaAdminLayer/register-form/index.ts
@@ -61,11 +61,6 @@ const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<Ch
   ]);
   const showNationalStyle = pick(values, ['showNationalBorders']);
 
-  // TODO: 没有值时置灰
-  if (typeof visConfig.fillColor === 'object' && visConfig.fillColor.scale) {
-    visConfig.fillColor.scale.unknown = '#c0c0c0';
-  }
-
   return {
     sourceConfig,
     visConfig: {

diff --git a/packages/li-core-assets/src/layers/BubbleLayer/register-form/index.ts b/packages/li-core-assets/src/layers/BubbleLayer/register-form/index.ts
@@ -33,11 +33,6 @@ const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<Bu
   };
   const visConfig = bubbleLayerStyleFlatToConfig(values);
 
-  // TODO: 没有值时置灰
-  if (typeof visConfig.fillColor === 'object' && visConfig.fillColor.scale) {
-    visConfig.fillColor.scale.unknown = '#c0c0c0';
-  }
-
   return {
     sourceConfig,
     visConfig,

diff --git a/packages/li-core-assets/src/layers/ChoroplethLayer/register-form/index.ts b/packages/li-core-assets/src/layers/ChoroplethLayer/register-form/index.ts
@@ -27,11 +27,6 @@ const fromValues = (values: Record<string, any>): LayerRegisterFormResultType<Ch
   };
   const visConfig = choroplethLayerStyleFlatToConfig(values);
 
-  // TODO: 没有值时置灰
-  if (typeof visConfig.fillColor === 'object' && visConfig.fillColor.scale) {
-    visConfig.fillColor.scale.unknown = '#c0c0c0';
-  }
-
   return {
     sourceConfig,
     visConfig,

diff --git a/packages/li-core-assets/src/layers/H3HexagonLayer/register-form/index.ts b/packages/li-core-assets/src/layers/H3HexagonLayer/register-form/index.ts
@@ -18,6 +18,7 @@ const toValues = (config: LayerRegisterFormResultType<ChoroplethLayerStyleAttrib
           type: fillColor?.scale?.type,
           domain: fillColor?.scale?.domain,
           range: fillColor?.value,
+          unknown: fillColor?.scale?.unknown,
           isCustom,
         }
       : undefined;
@@ -59,6 +60,7 @@ const fromValues = (style: Record<string, any>): LayerRegisterFormResultType<Cho
           ? {
               type: style.fillColorScale.type,
               domain: style.fillColorScale.domain,
+              unknown: style.fillColorScale.unknown,
             }
           : {
               type: style.fillColorScale.type,

diff --git a/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts
@@ -13,6 +13,7 @@ export const bubbleLayerStyleFlatToConfig = (style: Record<string, any>) => {
           ? {
               type: style.fillColorScale.type,
               domain: style.fillColorScale.domain,
+              unknown: style.fillColorScale.unknown,
             }
           : {
               type: style.fillColorScale.type,
@@ -84,6 +85,7 @@ export const bubbleLayerStyleConfigToFlat = (styleConfig: BubbleLayerStyleAttrib
           type: fillColor?.scale?.type,
           domain: fillColor?.scale?.domain,
           range: fillColor?.value,
+          unknown: fillColor?.scale?.unknown,
           isCustom,
         }
       : undefined;

diff --git a/packages/li-p2/src/LayerAttribute/ChoroplethLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/ChoroplethLayerStyle/helper.ts
@@ -13,6 +13,7 @@ export const choroplethLayerStyleFlatToConfig = (style: Record<string, any>) =>
           ? {
               type: style.fillColorScale.type,
               domain: style.fillColorScale.domain,
+              unknown: style.fillColorScale.unknown,
             }
           : {
               type: style.fillColorScale.type,
@@ -72,6 +73,7 @@ export const choroplethLayerStyleConfigToFlat = (styleConfig: ChoroplethLayerSty
           type: fillColor?.scale?.type,
           domain: fillColor?.scale?.domain,
           range: fillColor?.value,
+          unknown: fillColor?.scale?.unknown,
           isCustom,
         }
       : undefined;

diff --git a/packages/li-p2/src/LayerAttribute/LineLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/LineLayerStyle/helper.ts
@@ -13,6 +13,7 @@ export const lineLayerStyleFlatToConfig = (style: Record<string, any>) => {
           ? {
               type: style.fillColorScale.type,
               domain: style.fillColorScale.domain,
+              unknown: style.fillColorScale.unknown,
             }
           : {
               type: style.fillColorScale.type,
@@ -66,6 +67,7 @@ export const lineLayerStyleConfigToFlat = (styleConfig: LineLayerStyleAttributeV
           type: color?.scale?.type,
           domain: color?.scale?.domain,
           range: color?.value,
+          unknown: color?.scale?.unknown,
           isCustom,
         }
       : undefined;

diff --git a/...omponents/ScaleSelector/CustomMappingColors/CustomNumber/CustomItem/InputNumber/index.tsx b/...omponents/ScaleSelector/CustomMappingColors/CustomNumber/CustomItem/InputNumber/index.tsx
@@ -89,7 +89,7 @@ const NumberItem = ({ size = 'middle', value, min = -Infinity, max = Infinity, p
               controls={false}
               size={size}
               min={min}
-              max={max}
+              max={itemVal?.[1]}
               value={itemVal?.[0]}
               className={`${prefixCls}__input`}
               onChange={(e) => onFirstInputChange(e as number)}
@@ -100,7 +100,7 @@ const NumberItem = ({ size = 'middle', value, min = -Infinity, max = Infinity, p
             <InputNumber
               controls={false}
               size={size}
-              min={min}
+              min={itemVal?.[0]}
               max={max}
               value={itemVal?.[1]}
               className={`${prefixCls}__input`}

diff --git a/...p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomNumber/index.tsx b/...p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomNumber/index.tsx
@@ -38,9 +38,10 @@ const CustomNumber = (props: CustomNumberProps) => {
       return onChange(addList);
     }
 
-    const _domain: [number, number] = [Number(defaultValue[defaultValue.length - 1].value[0]), domain[1]];
+    const _domain: [number, number] =
+      defaultValue.length === 1 ? domain : [Number(defaultValue[defaultValue.length - 1].value[0]), domain[1]];
     const _medianValue: number = Number(((Number(_domain[1]) - Number(_domain[0])) / 2).toFixed(2));
-    const ranges = [Number((_medianValue + _domain[0]).toFixed(2)), Number(_domain[1])];
+    const ranges = [Number(_domain[0]), Number((_medianValue + _domain[0]).toFixed(2))];
 
     const addList: CustomMappingColorItem[] = [
       {
@@ -56,6 +57,7 @@ const CustomNumber = (props: CustomNumberProps) => {
     ];
 
     const list = [...defaultValue.slice(0, -1), ...addList];
+
     onChange(list);
   };
 
@@ -129,8 +131,7 @@ const CustomNumber = (props: CustomNumberProps) => {
     <div className={classnames(`${prefixCls}`, hashId, className)}>
       {defaultValue.map((customItem: CustomMappingColorItem, index: number) => {
         const position = index === 0 ? 'first' : index === defaultValue.length - 1 ? 'last' : null;
-        console.log(position, 'position');
-        const _min = position === 'first' ? -Infinity : (defaultValue[index - 1].value[1] as number);
+        const _min = position === 'first' ? -Infinity : (defaultValue[index - 1].value[0] as number);
         const _max = position === 'last' ? Infinity : defaultValue[index + 1]?.value?.[1];
 
         return (

diff --git a/...erAttribute/components/ScaleSelector/CustomMappingColors/CustomString/CustomItem/style.ts b/...erAttribute/components/ScaleSelector/CustomMappingColors/CustomString/CustomItem/style.ts
@@ -20,6 +20,7 @@ export default genStyleHook('scale-selector__custom-string', (token) => {
         '&__color': {
           width: '18px',
           height: '18px',
+          borderRadius: '4px',
         },
 
         '&__content': {

diff --git a/...Attribute/components/ScaleSelector/CustomMappingColors/CustomString/UnknownItem/index.tsx b/...Attribute/components/ScaleSelector/CustomMappingColors/CustomString/UnknownItem/index.tsx
@@ -0,0 +1,46 @@
+import { DeleteOutlined } from '@ant-design/icons';
+import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
+import { ColorPicker, Select } from 'antd';
+import type { Color } from 'antd/es/color-picker';
+import classnames from 'classnames';
+import React, { useMemo } from 'react';
+import useStyle from './style';
+
+type UnknownItemProps = {
+  color: string;
+  onChange: (color: string) => void;
+};
+
+const UnknownItem = ({ color: defaultColor, onChange }: UnknownItemProps) => {
+  const prefixCls = usePrefixCls('formily-scale-selector__custom-string-unknown');
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+
+  const colorChange = (color: Color) => {
+    onChange?.(color.toHexString());
+  };
+
+  return wrapSSR(
+    <div className={classnames(`${prefixCls}`, hashId)}>
+      <div className={`${prefixCls}__infor`}>
+        <div
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        >
+          <ColorPicker value={defaultColor ? defaultColor : '#5B8FF9'} onChange={colorChange}>
+            <div className={`${prefixCls}__infor__color`} style={{ background: defaultColor }} />
+          </ColorPicker>
+        </div>
+
+        <div className={`${prefixCls}__infor__content`}>
+          <Select size="small" style={{ width: '100%' }} disabled placeholder="其他" />
+        </div>
+
+        <div className={`${prefixCls}__infor__delete-icon`} />
+      </div>
+    </div>,
+  );
+};
+
+export default UnknownItem;
diff --git a/...rAttribute/components/ScaleSelector/CustomMappingColors/CustomString/UnknownItem/style.ts b/...rAttribute/components/ScaleSelector/CustomMappingColors/CustomString/UnknownItem/style.ts
@@ -0,0 +1,55 @@
+import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
+
+export default genStyleHook('scale-selector__custom-string-unknown', (token) => {
+  const { componentCls, antCls, colorBorder, lineType, borderRadius } = token;
+
+  return {
+    [componentCls]: {
+      display: 'flex',
+      alignItems: 'center',
+      padding: '5px 0',
+      borderRadius: '4px',
+
+      [`${componentCls}__infor`]: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        width: '100%',
+        cursor: 'pointer',
+
+        '&__color': {
+          width: '18px',
+          height: '18px',
+          border: `1px ${colorBorder} ${lineType}`,
+          borderRadius: `${borderRadius}px`,
+        },
+
+        '&__content': {
+          flex: 1,
+          width: '100%',
+          overflow: 'hidden',
+          margin: '0 3px',
+        },
+
+        '&__delete-icon': {
+          width: '14px',
+        },
+      },
+    },
+
+    [`${antCls}-select-dropdown`]: {
+      zIndex: 1,
+    },
+
+    '.ant-popover': {
+      zIndex: '4 !important',
+      '.ant-color-picker-presets .ant-collapse-item .ant-collapse-header': {
+        display: 'none',
+      },
+    },
+
+    '.ant-color-picker .ant-color-picker-panel .ant-color-picker-inner-panel-divider': {
+      margin: '3px 8px ',
+    },
+  };
+});
diff --git a/...p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomString/index.tsx b/...p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomString/index.tsx
@@ -6,16 +6,19 @@ import React, { useMemo } from 'react';
 import type { CustomMappingColorItem } from '../../type';
 import CustomItem from './CustomItem';
 import useStyle from './style';
+import UnknownItem from './UnknownItem';
 
 type CustomStringProps = {
-  domain: string[] | [number, number];
+  domain: string[];
+  unknown: string;
   value: CustomMappingColorItem[];
   onChange: (value: CustomMappingColorItem[]) => void;
+  onUnknownColorChange: (color: string) => void;
   className?: string;
 };
 
 const CustomString = (props: CustomStringProps) => {
-  const { value: defaultValue = [], domain, onChange, className } = props;
+  const { value: defaultValue = [], unknown = '#f000', domain, onChange, onUnknownColorChange, className } = props;
   const prefixCls = usePrefixCls('formily-color-range-selector__custom-string');
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
@@ -80,6 +83,8 @@ const CustomString = (props: CustomStringProps) => {
         );
       })}
 
+      <UnknownItem color={unknown} onChange={onUnknownColorChange} />
+
       <div onClick={addPaletteRangeItem} className={`${prefixCls}__add-range-item`}>
         <PlusOutlined /> 添加
       </div>

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/index.tsx
@@ -11,15 +11,17 @@ type CustomMappingColorProps = {
   dataType: 'string' | 'number';
   domain: string[] | [number, number];
   value?: CustomMappingData;
+  unknown?: string;
   onChange: (value: CustomMappingData) => void;
   className?: string;
 };
 
 const CustomMappingColor = (props: CustomMappingColorProps) => {
-  const { dataType = 'string', domain, value, onChange, className } = props;
+  const { dataType = 'string', domain, value, unknown = '#f000', onChange, className } = props;
   const prefixCls = usePrefixCls('formily-color-range-selector__custom-range');
   const [wrapSSR, hashId] = useStyle(prefixCls);
   const [customRanges, setCustomRanges] = useState<CustomMappingColorItem[]>([]);
+  const [unknownColor, setUnknownColor] = useState<string>(unknown);
 
   useEffect(() => {
     if (value?.list?.length) {
@@ -41,7 +43,7 @@ const CustomMappingColor = (props: CustomMappingColorProps) => {
     const list = customRanges.map((item) => {
       return { value: item.value, color: item.color };
     });
-    onChange({ type: dataType, list });
+    onChange({ type: dataType, list, unknown: unknownColor });
   };
 
   return wrapSSR(
@@ -51,7 +53,17 @@ const CustomMappingColor = (props: CustomMappingColorProps) => {
           <CustomNumber value={customRanges} domain={domain as [number, number]} onChange={onCustomRangesChange} />
         )}
 
-        {dataType === 'string' && <CustomString domain={domain} value={customRanges} onChange={onCustomRangesChange} />}
+        {dataType === 'string' && (
+          <CustomString
+            domain={domain as string[]}
+            value={customRanges}
+            onChange={onCustomRangesChange}
+            unknown={unknownColor}
+            onUnknownColorChange={(color: string) => {
+              setUnknownColor(color);
+            }}
+          />
+        )}
       </div>
 
       <div className={`${prefixCls}__btn`}>

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts
@@ -68,7 +68,7 @@ export const getDefaultValue = (
 
 // 通过自定义颜色映射转换为 Scale 的数据格式
 export const getScaleByCustomMappingData = (val: CustomMappingData) => {
-  const { type, list } = val;
+  const { type, list, unknown = '#f000' } = val;
 
   if (type === 'number') {
     const range = list.map((item) => item.color);
@@ -90,6 +90,7 @@ export const getScaleByCustomMappingData = (val: CustomMappingData) => {
     type: 'cat',
     domain,
     range,
+    unknown,
   };
 
   return scaleValue;

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx
@@ -140,6 +140,7 @@ const Internal = (props: ScaleSelectorProp) => {
                   dataType={dataType}
                   domain={domain}
                   value={customMappingData}
+                  unknown={value?.unknown}
                   onChange={(ranges: CustomMappingData) => onValueChange(ranges)}
                 />
               </>

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/type.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/type.ts
@@ -7,6 +7,7 @@ export type CustomMappingColorItem = {
 export type CustomMappingData = {
   type: 'number' | 'string' | 'custom';
   list: CustomMappingColorItem[];
+  unknown?: string;
 };
 
 export type SelectType = 'custom' | 'quantize' | 'quantile' | 'cat';
@@ -18,4 +19,5 @@ export type SelectorValue = {
   isCustom: boolean;
   domain?: string[] | number[];
   range?: string[];
+  unknown?: string;
 };