diff --git a/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts b/packages/li-p2/src/LayerAttribute/BubbleLayerStyle/helper.ts index 7b99cdae..9492055f 100644 --- 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) => { + 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) => { // 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 index f4bd2155..d654fc76 100644 --- 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 index 0bfd9e51..a57b4a56 100644 --- 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([]); - const [customType, setCustomType] = useState(defaultCustomRanges?.type || 'string'); + const [customType, setCustomType] = useState(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) => { {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 ( { - 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) => { - 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) => { }); 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) => { } 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 index 69f0486f..480ba95a 100644 --- 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 & { 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 index 73da0f7a..11781a37 100644 --- 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 index c99c24bc..8980345a 100644 --- 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(