OrgTJWater/TJWaterFrontend_Refine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增应用样式 agent 工具
Build Push and Deploy / docker-image (push) Successful in 1m30s
Details
Build Push and Deploy / deploy-fallback-log (push) Has been skipped
Details

Browse Source
This commit is contained in:
Huarch
2026-05-29 10:27:27 +08:00
parent 0e82c080df
commit 9761ade8d8
9 changed files with 549 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/olmap/core/Controls/StyleEditorPanel.tsx
+24 -33
View File
@@ -2,34 +2,25 @@ import React from "react";
import StyleEditorForm from "./StyleEditorForm";
import { createDefaultLayerStyleState, createDefaultLayerStyleStates } from "./styleEditorPresets";
import { useStyleEditor } from "./useStyleEditor";
import { LayerStyleState, StyleConfig, StyleEditorPanelProps } from "./styleEditorTypes";
const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
layerStyleStates,
setLayerStyleStates,
isReady,
renderLayers,
selectedRenderLayer,
styleConfig,
setStyleConfig,
availableProperties,
onLayerChange,
onPropertyChange,
onClassificationMethodChange,
onSegmentsChange,
onCustomBreakChange,
onCustomBreakBlur,
onColorTypeChange,
onApply,
onReset,
}) => {
const {
isReady,
renderLayers,
selectedRenderLayer,
styleConfig,
setStyleConfig,
availableProperties,
handleLayerChange,
handlePropertyChange,
handleClassificationMethodChange,
handleSegmentsChange,
handleCustomBreakChange,
handleCustomBreakBlur,
handleColorTypeChange,
handleApply,
handleReset,
} = useStyleEditor({
layerStyleStates,
setLayerStyleStates,
});
if (!isReady) {
return <div>Loading...</div>;
}
@@ -41,15 +32,15 @@ const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
styleConfig={styleConfig}
setStyleConfig={setStyleConfig}
availableProperties={availableProperties}
onLayerChange={handleLayerChange}
onPropertyChange={handlePropertyChange}
onClassificationMethodChange={handleClassificationMethodChange}
onSegmentsChange={handleSegmentsChange}
onCustomBreakChange={handleCustomBreakChange}
onCustomBreakBlur={handleCustomBreakBlur}
onColorTypeChange={handleColorTypeChange}
onApply={handleApply}
onReset={handleReset}
onLayerChange={onLayerChange}
onPropertyChange={onPropertyChange}
onClassificationMethodChange={onClassificationMethodChange}
onSegmentsChange={onSegmentsChange}
onCustomBreakChange={onCustomBreakChange}
onCustomBreakBlur={onCustomBreakBlur}
onColorTypeChange={onColorTypeChange}
onApply={onApply}
onReset={onReset}
/>
);
};
src/components/olmap/core/Controls/Toolbar.tsx
+28 -7
View File
@@ -24,6 +24,7 @@ import {
buildFeatureProperties,
} from "./toolbarFeatureHelpers";
import { useToolbarChatActions } from "./useToolbarChatActions";
import { useStyleEditor } from "./useStyleEditor";
import { config } from "@/config/config";
import { apiFetch } from "@/lib/apiFetch";
@@ -81,20 +82,27 @@ const Toolbar: React.FC<ToolbarProps> = ({
endTime?: string;
} | null>(null);
// 样式状态管理 - 在 Toolbar 中管理，带有默认样式
const [layerStyleStates, setLayerStyleStates] = useState<LayerStyleState[]>(
() => createDefaultLayerStyleStates()
);
const styleEditor = useStyleEditor({
layerStyleStates,
setLayerStyleStates,
});
useToolbarChatActions({
setHighlightFeatures,
setChatPanelFeatureInfos,
setChatPanelType,
setChatPanelTimeRange,
setShowHistoryPanel,
setShowStyleEditor,
setActiveTools,
applyExternalStyle: styleEditor.applyExternalStyle,
resetExternalStyle: styleEditor.resetExternalStyle,
});
// 样式状态管理 - 在 Toolbar 中管理，带有默认样式
const [layerStyleStates, setLayerStyleStates] = useState<LayerStyleState[]>(
() => createDefaultLayerStyleStates()
);
// 计算激活的图例配置
const activeLegendConfigs = layerStyleStates
.filter((state) => state.isActive && state.legendConfig.property)
@@ -444,8 +452,21 @@ const Toolbar: React.FC<ToolbarProps> = ({
{showDrawPanel && map && <DrawPanel />}
<div style={{ display: showStyleEditor ? "block" : "none" }}>
<StyleEditorPanel
layerStyleStates={layerStyleStates}
setLayerStyleStates={setLayerStyleStates}
isReady={styleEditor.isReady}
renderLayers={styleEditor.renderLayers}
selectedRenderLayer={styleEditor.selectedRenderLayer}
styleConfig={styleEditor.styleConfig}
setStyleConfig={styleEditor.setStyleConfig}
availableProperties={styleEditor.availableProperties}
onLayerChange={styleEditor.handleLayerChange}
onPropertyChange={styleEditor.handlePropertyChange}
onClassificationMethodChange={styleEditor.handleClassificationMethodChange}
onSegmentsChange={styleEditor.handleSegmentsChange}
onCustomBreakChange={styleEditor.handleCustomBreakChange}
onCustomBreakBlur={styleEditor.handleCustomBreakBlur}
onColorTypeChange={styleEditor.handleColorTypeChange}
onApply={styleEditor.handleApply}
onReset={styleEditor.handleReset}
/>
</div>
<ToolbarHistoryPanel
src/components/olmap/core/Controls/styleEditorTypes.ts
+5 -1
View File
@@ -34,7 +34,7 @@ export interface LayerStyleState {
export type DefaultLayerStyleId = "junctions" | "pipes";
export interface StyleEditorPanelProps {
export interface StyleEditorStateProps {
layerStyleStates: LayerStyleState[];
setLayerStyleStates: React.Dispatch<React.SetStateAction<LayerStyleState[]>>;
}
@@ -60,3 +60,7 @@ export interface StyleEditorFormProps {
onApply: () => void;
onReset: () => void;
}
export interface StyleEditorPanelProps extends StyleEditorFormProps {
isReady: boolean;
}
src/components/olmap/core/Controls/useStyleEditor.ts
+262 -28
View File
@@ -25,8 +25,10 @@ import {
} from "./styleEditorUtils";
import {
AvailableProperty,
DefaultLayerStyleId,
LayerStyleState,
StyleEditorPanelProps,
StyleConfig,
StyleEditorStateProps,
} from "./styleEditorTypes";
import { LegendStyleConfig } from "./StyleLegend";
import { calculateClassification } from "@utils/breaks_classification";
@@ -36,7 +38,7 @@ const UNIT_HEADLOSS_RANGE: [number, number] = [0, 5];
export const useStyleEditor = ({
layerStyleStates,
setLayerStyleStates,
}: StyleEditorPanelProps) => {
}: StyleEditorStateProps) => {
const map = useMap();
const data = useData();
const { open } = useNotification();
@@ -85,6 +87,51 @@ export const useStyleEditor = ({
latestLayerStyleStatesRef.current = layerStyleStates;
}, [layerStyleStates]);
const upsertLayerStyleState = useCallback(
(newStyleState: LayerStyleState) => {
const existingState = latestLayerStyleStatesRef.current.find(
(state) => state.layerId === newStyleState.layerId
);
if (
existingState &&
JSON.stringify(existingState.styleConfig) ===
JSON.stringify(newStyleState.styleConfig) &&
JSON.stringify(existingState.legendConfig) ===
JSON.stringify(newStyleState.legendConfig) &&
existingState.layerName === newStyleState.layerName &&
existingState.isActive === newStyleState.isActive
) {
return;
}
setLayerStyleStates((prev) => {
const existingIndex = prev.findIndex(
(state) => state.layerId === newStyleState.layerId
);
const nextStates =
existingIndex === -1
? [...prev, newStyleState]
: prev.map((state, index) =>
index === existingIndex ? newStyleState : state
);
latestLayerStyleStatesRef.current = nextStates;
return nextStates;
});
},
[setLayerStyleStates]
);
const removeLayerStyleState = useCallback(
(layerId: string) => {
setLayerStyleStates((prev) => {
const nextStates = prev.filter((state) => state.layerId !== layerId);
latestLayerStyleStatesRef.current = nextStates;
return nextStates;
});
},
[setLayerStyleStates]
);
const getRenderLayersById = useCallback(
(layerId: string) =>
activeMaps.flatMap((targetMap) =>
@@ -191,28 +238,9 @@ export const useStyleEditor = ({
isActive: true,
};
setLayerStyleStates((prev) => {
const existingIndex = prev.findIndex((state) => state.layerId === layerId);
if (existingIndex !== -1) {
const existingState = prev[existingIndex];
if (
JSON.stringify(existingState.styleConfig) ===
JSON.stringify(newStyleState.styleConfig) &&
JSON.stringify(existingState.legendConfig) ===
JSON.stringify(newStyleState.legendConfig) &&
existingState.layerName === newStyleState.layerName &&
existingState.isActive === newStyleState.isActive
) {
return prev;
}
const updated = [...prev];
updated[existingIndex] = newStyleState;
return updated;
}
return [...prev, newStyleState];
});
upsertLayerStyleState(newStyleState);
},
[availableProperties, selectedRenderLayer, setLayerStyleStates, styleConfig]
[availableProperties, selectedRenderLayer, styleConfig, upsertLayerStyleState]
);
const applyContourLayerStyle = useCallback(
@@ -520,9 +548,7 @@ export const useStyleEditor = ({
setShowJunctionTextLayer?.(styleConfig.showLabels);
setShowJunctionId?.(styleConfig.showId);
setApplyJunctionStyle(true);
if (property === "pressure") {
setContourLayerAvailable?.(true);
}
setContourLayerAvailable?.(property === "pressure");
saveLayerStyle(layerId);
open?.({
type: "success",
@@ -571,7 +597,7 @@ export const useStyleEditor = ({
targetLayer.setStyle(defaultFlatStyle);
});
setLayerStyleStates((prev) => prev.filter((state) => state.layerId !== layerId));
removeLayerStyleState(layerId);
if (layerId === "junctions") {
setApplyJunctionStyle(false);
@@ -593,7 +619,7 @@ export const useStyleEditor = ({
setContourLayerAvailable,
setContours,
setJunctionText,
setLayerStyleStates,
removeLayerStyleState,
setPipeText,
setShowJunctionId,
setShowJunctionTextLayer,
@@ -602,6 +628,211 @@ export const useStyleEditor = ({
setWaterflowLayerAvailable,
]);
const normalizeExternalStyleConfig = useCallback(
(layerId: DefaultLayerStyleId, overrides?: Partial<StyleConfig>): StyleConfig => {
const currentStyleState = latestLayerStyleStatesRef.current.find(
(state) => state.layerId === layerId
);
const baseStyleConfig =
currentStyleState?.styleConfig || createDefaultLayerStyleState(layerId).styleConfig;
const nextStyleConfig: StyleConfig = {
...baseStyleConfig,
...overrides,
customBreaks: overrides?.customBreaks
? [...overrides.customBreaks]
: [...(baseStyleConfig.customBreaks || [])],
customColors: overrides?.customColors
? [...overrides.customColors]
: [...(baseStyleConfig.customColors || [])],
};
nextStyleConfig.segments = Math.max(1, Math.round(nextStyleConfig.segments || 1));
nextStyleConfig.opacity = Math.min(1, Math.max(0, nextStyleConfig.opacity));
nextStyleConfig.singlePaletteIndex = Math.max(
0,
Math.round(nextStyleConfig.singlePaletteIndex || 0)
);
nextStyleConfig.gradientPaletteIndex = Math.max(
0,
Math.round(nextStyleConfig.gradientPaletteIndex || 0)
);
nextStyleConfig.rainbowPaletteIndex = Math.max(
0,
Math.round(nextStyleConfig.rainbowPaletteIndex || 0)
);
nextStyleConfig.minSize = Math.max(1, nextStyleConfig.minSize);
nextStyleConfig.maxSize = Math.max(nextStyleConfig.minSize, nextStyleConfig.maxSize);
nextStyleConfig.minStrokeWidth = Math.max(1, nextStyleConfig.minStrokeWidth);
nextStyleConfig.maxStrokeWidth = Math.max(
nextStyleConfig.minStrokeWidth,
nextStyleConfig.maxStrokeWidth
);
nextStyleConfig.fixedStrokeWidth = Math.max(1, nextStyleConfig.fixedStrokeWidth);
nextStyleConfig.customColors =
nextStyleConfig.colorType === "custom"
? getDefaultCustomColors(
nextStyleConfig.segments,
nextStyleConfig.customColors || []
)
: nextStyleConfig.customColors;
nextStyleConfig.customBreaks =
nextStyleConfig.classificationMethod === "custom_breaks"
? normalizeCustomBreaks(
nextStyleConfig.customBreaks ||
getBreakDefaults(
nextStyleConfig.segments,
nextStyleConfig.property,
getRenderLayersById(layerId)[0]
),
nextStyleConfig.segments
)
: nextStyleConfig.customBreaks;
return nextStyleConfig;
},
[getBreakDefaults, getRenderLayersById]
);
const applyExternalStyle = useCallback(
(layerId: DefaultLayerStyleId, overrides?: Partial<StyleConfig>) => {
const targetLayer = getRenderLayersById(layerId)[0];
if (!targetLayer) {
open?.({
type: "error",
message: `未找到${layerId === "junctions" ? "节点" : "管道"}图层，无法应用样式。`,
});
return;
}
const nextStyleConfig = normalizeExternalStyleConfig(layerId, overrides);
if (!nextStyleConfig.property) {
open?.({
type: "error",
message: "样式工具缺少有效的渲染属性，无法应用样式。",
});
return;
}
const layerName = targetLayer.get("name") || (layerId === "junctions" ? "节点" : "管道");
const targetProperties = (targetLayer.get("properties") || []) as AvailableProperty[];
const propertyLabel =
targetProperties.find((item) => item.value === nextStyleConfig.property)?.name ||
nextStyleConfig.property;
setSelectedRenderLayer(targetLayer);
setStyleConfig(nextStyleConfig);
upsertLayerStyleState({
layerId,
layerName,
styleConfig: nextStyleConfig,
legendConfig: {
layerId,
layerName,
property: propertyLabel,
colors: [],
type: targetLayer.get("type") || (layerId === "junctions" ? "point" : "linestring"),
dimensions: [],
breaks: [],
},
isActive: true,
});
if (layerId === "junctions") {
setJunctionText?.(nextStyleConfig.property);
setShowJunctionTextLayer?.(nextStyleConfig.showLabels);
setShowJunctionId?.(nextStyleConfig.showId);
setContourLayerAvailable?.(nextStyleConfig.property === "pressure");
setApplyJunctionStyle(true);
} else {
setPipeText?.(nextStyleConfig.property);
setShowPipeTextLayer?.(nextStyleConfig.showLabels);
setShowPipeId?.(nextStyleConfig.showId);
setWaterflowLayerAvailable?.(true);
setApplyPipeStyle(true);
}
applyClassificationStyle(layerId, nextStyleConfig);
open?.({
type: "success",
message: `${layerId === "junctions" ? "节点" : "管道"}图层样式已应用。`,
});
},
[
applyClassificationStyle,
getRenderLayersById,
normalizeExternalStyleConfig,
open,
setContourLayerAvailable,
setJunctionText,
setPipeText,
setShowJunctionId,
setShowJunctionTextLayer,
setShowPipeId,
setShowPipeTextLayer,
setWaterflowLayerAvailable,
upsertLayerStyleState,
]
);
const resetExternalStyle = useCallback(
(layerId: DefaultLayerStyleId) => {
const targetLayer = getRenderLayersById(layerId)[0];
if (!targetLayer) {
open?.({
type: "error",
message: `未找到${layerId === "junctions" ? "节点" : "管道"}图层，无法重置样式。`,
});
return;
}
const defaultStyleConfig = createDefaultLayerStyleState(layerId).styleConfig;
const defaultFlatStyle: FlatStyleLike = config.MAP_DEFAULT_STYLE;
setSelectedRenderLayer(targetLayer);
setStyleConfig(defaultStyleConfig);
getRenderLayersById(layerId).forEach((renderLayer) => {
renderLayer.setStyle(defaultFlatStyle);
});
removeLayerStyleState(layerId);
if (layerId === "junctions") {
setApplyJunctionStyle(false);
setShowJunctionTextLayer?.(false);
setShowJunctionId?.(false);
setJunctionText?.("");
setContours?.([]);
setContourLayerAvailable?.(false);
} else {
setApplyPipeStyle(false);
setShowPipeTextLayer?.(false);
setShowPipeId?.(false);
setPipeText?.("");
setWaterflowLayerAvailable?.(false);
}
open?.({
type: "success",
message: `${layerId === "junctions" ? "节点" : "管道"}图层样式已重置。`,
});
},
[
getRenderLayersById,
open,
removeLayerStyleState,
setContourLayerAvailable,
setContours,
setJunctionText,
setPipeText,
setShowJunctionId,
setShowJunctionTextLayer,
setShowPipeId,
setShowPipeTextLayer,
setWaterflowLayerAvailable,
]
);
const handleLayerChange = useCallback(
(index: number) => {
const newLayer = index >= 0 ? renderLayers[index] : undefined;
@@ -747,6 +978,7 @@ export const useStyleEditor = ({
nextStates[index] = defaultState;
}
});
latestLayerStyleStatesRef.current = nextStates;
return nextStates;
});
@@ -940,5 +1172,7 @@ export const useStyleEditor = ({
handleColorTypeChange,
handleApply,
handleReset,
applyExternalStyle,
resetExternalStyle,
};
};
src/components/olmap/core/Controls/useToolbarChatActions.ts
+23
View File
@@ -13,6 +13,7 @@ import { apiFetch } from "@/lib/apiFetch";
import { queryFeaturesByIds } from "@/utils/mapQueryService";
import { config } from "@/config/config";
import { useMap } from "../MapComponent";
import type { DefaultLayerStyleId, StyleConfig } from "./styleEditorTypes";
type UseToolbarChatActionsParams = {
setHighlightFeatures: Dispatch<SetStateAction<Feature[]>>;
@@ -22,7 +23,13 @@ type UseToolbarChatActionsParams = {
SetStateAction<{ startTime?: string; endTime?: string } | null>
>;
setShowHistoryPanel: Dispatch<SetStateAction<boolean>>;
setShowStyleEditor: Dispatch<SetStateAction<boolean>>;
setActiveTools: Dispatch<SetStateAction<string[]>>;
applyExternalStyle: (
layerId: DefaultLayerStyleId,
styleConfig?: Partial<StyleConfig>
) => void;
resetExternalStyle: (layerId: DefaultLayerStyleId) => void;
};
export const useToolbarChatActions = ({
@@ -31,7 +38,10 @@ export const useToolbarChatActions = ({
setChatPanelType,
setChatPanelTimeRange,
setShowHistoryPanel,
setShowStyleEditor,
setActiveTools,
applyExternalStyle,
resetExternalStyle,
}: UseToolbarChatActionsParams) => {
const map = useMap();
const chatJunctionRenderCleanupRef = useRef<(() => void) | null>(null);
@@ -206,17 +216,30 @@ export const useToolbarChatActions = ({
})();
break;
}
case "apply_layer_style": {
setShowStyleEditor(true);
setActiveTools((prev) => (prev.includes("style") ? prev : [...prev, "style"]));
if (action.resetToDefault) {
resetExternalStyle(action.layerId);
} else {
applyExternalStyle(action.layerId, action.styleConfig);
}
break;
}
}
},
[
applyExternalStyle,
disposeChatJunctionRender,
map,
resetExternalStyle,
setActiveTools,
setChatPanelFeatureInfos,
setChatPanelTimeRange,
setChatPanelType,
setHighlightFeatures,
setShowHistoryPanel,
setShowStyleEditor,
],
),
);