@fleet-frontend/mower-maps 0.2.6-beta.1 → 0.2.6-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +118 -82
- package/dist/index.js +118 -82
- package/dist/render/MowerPartitionPickerMap.d.ts +1 -1
- package/dist/render/MowerPartitionPickerMap.d.ts.map +1 -1
- package/dist/render/partitionPicker/constants.d.ts +35 -34
- package/dist/render/partitionPicker/constants.d.ts.map +1 -1
- package/dist/render/partitionPicker/hooks/useGoogleMapsOverlay.d.ts.map +1 -1
- package/dist/render/partitionPicker/hooks/useMapViewport.d.ts.map +1 -1
- package/dist/render/partitionPicker/layers/PartitionNameLabels.d.ts +1 -3
- package/dist/render/partitionPicker/layers/PartitionNameLabels.d.ts.map +1 -1
- package/dist/render/partitionPicker/layers/PartitionPickerGridSvg.d.ts.map +1 -1
- package/dist/render/partitionPicker/layers/PartitionPickerSvg.d.ts +1 -2
- package/dist/render/partitionPicker/layers/PartitionPickerSvg.d.ts.map +1 -1
- package/dist/render/partitionPicker/layers/SelectableBoundaryElement.d.ts +2 -4
- package/dist/render/partitionPicker/layers/SelectableBoundaryElement.d.ts.map +1 -1
- package/dist/render/partitionPicker/types.d.ts +1 -1
- package/dist/render/partitionPicker/types.d.ts.map +1 -1
- package/dist/render/partitionPicker/viewportUtils.d.ts +6 -7
- package/dist/render/partitionPicker/viewportUtils.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -23548,15 +23548,13 @@ function computePolygonScreenWidthPx(points, viewBox, containerWidth, containerH
|
|
|
23548
23548
|
const scale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
|
|
23549
23549
|
return mapWidth * scale;
|
|
23550
23550
|
}
|
|
23551
|
-
function scaleStrokeWidthForViewBox(
|
|
23552
|
-
const { containerWidth, containerHeight,
|
|
23551
|
+
function scaleStrokeWidthForViewBox(viewBox, options) {
|
|
23552
|
+
const { containerWidth, containerHeight, targetScreenStrokePx = 2 } = options;
|
|
23553
23553
|
const meetScale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
|
|
23554
|
-
|
|
23555
|
-
|
|
23556
|
-
return baseStrokeWidth;
|
|
23554
|
+
if (meetScale <= 0 || !Number.isFinite(targetScreenStrokePx)) {
|
|
23555
|
+
return targetScreenStrokePx;
|
|
23557
23556
|
}
|
|
23558
|
-
|
|
23559
|
-
return targetScreenPx / meetScale;
|
|
23557
|
+
return targetScreenStrokePx / meetScale;
|
|
23560
23558
|
}
|
|
23561
23559
|
/** 屏幕拖拽像素 → viewBox 坐标增量(与 mapPointToContainerPercent 互逆,供 applyPan 使用) */
|
|
23562
23560
|
function containerDeltaToViewBoxDelta(deltaXPx, deltaYPx, viewBox, containerWidth, containerHeight, mapRotationDeg = 0) {
|
|
@@ -30844,15 +30842,27 @@ const BoundarySvgRender = React__default.memo(({ mapJson, unStructMapData, id, m
|
|
|
30844
30842
|
});
|
|
30845
30843
|
|
|
30846
30844
|
/** ChannelClipPath 等内容裁剪使用的 SVG 坐标边距(与用户传入的屏幕 padding 无关) */
|
|
30847
|
-
const PARTITION_PICKER_CONTENT_CLIP_PADDING =
|
|
30845
|
+
const PARTITION_PICKER_CONTENT_CLIP_PADDING = 0;
|
|
30848
30846
|
/** H5:子区域屏幕宽度超过该值才展示名称标签(px) */
|
|
30849
|
-
const H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX =
|
|
30847
|
+
const H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX = 92;
|
|
30850
30848
|
/** H5:名称气泡总宽度(px) */
|
|
30851
|
-
const H5_PARTITION_LABEL_WIDTH_PX =
|
|
30852
|
-
/**
|
|
30853
|
-
const
|
|
30854
|
-
/**
|
|
30855
|
-
const
|
|
30849
|
+
const H5_PARTITION_LABEL_WIDTH_PX = 92;
|
|
30850
|
+
/** Web:序号徽章与名称标签间距(px) */
|
|
30851
|
+
const WEB_SELECTION_ORDER_GAP_PX = 8;
|
|
30852
|
+
/** H5:序号徽章与名称标签间距(px) */
|
|
30853
|
+
const H5_SELECTION_ORDER_GAP_PX = 4;
|
|
30854
|
+
/** Standalone:充电桩图标最小屏幕尺寸(px),缩小全图 fit 时避免过小;放大时随 viewBox 同比缩放 */
|
|
30855
|
+
const PARTITION_PICKER_CHARGING_PILE_MIN_DISPLAY_PX = 16;
|
|
30856
|
+
/** Web 地块描边屏幕像素宽度:未选中 2px,选中 3px */
|
|
30857
|
+
const WEB_PARTITION_BOUNDARY_STROKE_PX = {
|
|
30858
|
+
default: 2,
|
|
30859
|
+
selected: 3,
|
|
30860
|
+
};
|
|
30861
|
+
/** H5 地块描边屏幕像素宽度:选中与否均为 1px */
|
|
30862
|
+
const H5_PARTITION_BOUNDARY_STROKE_PX = {
|
|
30863
|
+
default: 1,
|
|
30864
|
+
selected: 1,
|
|
30865
|
+
};
|
|
30856
30866
|
/**
|
|
30857
30867
|
* Figma bg/mapping 地图网格背景(Standalone SVG 层)
|
|
30858
30868
|
* @see https://www.figma.com/design/j0DdUYf8VFkXQ8ikkA6ZzP — node 20490:84886
|
|
@@ -30860,17 +30870,17 @@ const PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX = 2.5;
|
|
|
30860
30870
|
/** 网格区域底色,也用于容器 letterbox 留白 */
|
|
30861
30871
|
const PARTITION_PICKER_GRID_BASE_COLOR = '#E3E5EB';
|
|
30862
30872
|
/** 网格单元边长(SVG 地图坐标,与 viewBox 一致;zoom 时间距同比缩放) */
|
|
30863
|
-
const PARTITION_PICKER_GRID_TILE_SIZE =
|
|
30873
|
+
const PARTITION_PICKER_GRID_TILE_SIZE = 10;
|
|
30864
30874
|
/** 网格线宽(地图坐标;随 zoom 同比缩放,不做屏幕像素恒定) */
|
|
30865
|
-
const PARTITION_PICKER_GRID_LINE_WIDTH =
|
|
30875
|
+
const PARTITION_PICKER_GRID_LINE_WIDTH = 0.5;
|
|
30866
30876
|
/** 网格交点圆点半径(地图坐标) */
|
|
30867
|
-
const PARTITION_PICKER_GRID_DOT_RADIUS =
|
|
30877
|
+
const PARTITION_PICKER_GRID_DOT_RADIUS = 0.5;
|
|
30868
30878
|
/** 网格层整体不透明度(Figma 约 80%) */
|
|
30869
|
-
const PARTITION_PICKER_GRID_OPACITY = 0.
|
|
30879
|
+
const PARTITION_PICKER_GRID_OPACITY = 0.4;
|
|
30870
30880
|
/** 网格线与交点颜色 */
|
|
30871
30881
|
const PARTITION_PICKER_GRID_STROKE = '#FFFFFF';
|
|
30872
30882
|
/** 可见范围内交点超过该数量时跳过圆点,仅保留网格线(缩小视野时减轻 DOM 压力) */
|
|
30873
|
-
const PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS =
|
|
30883
|
+
const PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS = 2000;
|
|
30874
30884
|
/**
|
|
30875
30885
|
* 分区选择地图专用样式
|
|
30876
30886
|
*
|
|
@@ -30895,37 +30905,27 @@ const PARTITION_PICKER_MAP_CONFIG = {
|
|
|
30895
30905
|
const PARTITION_PICKER_COLORS_WEB = {
|
|
30896
30906
|
defaultFill: 'rgba(222, 225, 231, 1)',
|
|
30897
30907
|
defaultStroke: 'rgba(132, 152, 169, 1)',
|
|
30898
|
-
defaultStrokeWidth: 2,
|
|
30899
30908
|
hoverFill: 'rgba(211, 216, 226, 1)',
|
|
30900
30909
|
hoverStroke: 'rgba(132, 152, 169, 1)',
|
|
30901
|
-
hoverStrokeWidth: 3,
|
|
30902
30910
|
selectedFill: 'rgba(202, 214, 238, 1)',
|
|
30903
30911
|
selectedStroke: 'rgba(132, 152, 169, 1)',
|
|
30904
|
-
selectedStrokeWidth: 3,
|
|
30905
30912
|
selectedHoverFill: 'rgba(202, 214, 238, 1)',
|
|
30906
30913
|
selectedHoverStroke: 'rgba(132, 152, 169, 1)',
|
|
30907
|
-
selectedHoverStrokeWidth: 3,
|
|
30908
30914
|
isolatedFill: 'rgba(225, 227, 233, 1)',
|
|
30909
30915
|
isolatedStroke: 'rgba(189, 198, 208, 1)',
|
|
30910
|
-
isolatedStrokeWidth: 2,
|
|
30911
30916
|
};
|
|
30912
30917
|
/** H5 端地块配色 */
|
|
30913
30918
|
const PARTITION_PICKER_COLORS_H5 = {
|
|
30914
30919
|
defaultFill: 'rgba(222, 225, 231, 1)',
|
|
30915
30920
|
defaultStroke: 'rgba(132, 152, 169, 1)',
|
|
30916
|
-
defaultStrokeWidth: 1,
|
|
30917
30921
|
hoverFill: 'rgba(222, 225, 231, 1)',
|
|
30918
30922
|
hoverStroke: 'rgba(132, 152, 169, 1)',
|
|
30919
|
-
hoverStrokeWidth: 1,
|
|
30920
30923
|
selectedFill: 'rgba(202, 214, 238, 1)',
|
|
30921
30924
|
selectedStroke: 'rgba(132, 152, 169, 1)',
|
|
30922
|
-
selectedStrokeWidth: 1,
|
|
30923
30925
|
selectedHoverFill: 'rgba(202, 214, 238, 1)',
|
|
30924
30926
|
selectedHoverStroke: 'rgba(132, 152, 169, 1)',
|
|
30925
|
-
selectedHoverStrokeWidth: 1,
|
|
30926
30927
|
isolatedFill: 'rgba(225, 227, 233, 1)',
|
|
30927
30928
|
isolatedStroke: 'rgba(189, 198, 208, 1)',
|
|
30928
|
-
isolatedStrokeWidth: 1,
|
|
30929
30929
|
};
|
|
30930
30930
|
function getPartitionPickerMapConfig(platform = PlatformType.WEB) {
|
|
30931
30931
|
return platform === PlatformType.WEB
|
|
@@ -30935,6 +30935,11 @@ function getPartitionPickerMapConfig(platform = PlatformType.WEB) {
|
|
|
30935
30935
|
function getPartitionPickerColors(platform = PlatformType.WEB) {
|
|
30936
30936
|
return platform === PlatformType.WEB ? PARTITION_PICKER_COLORS_WEB : PARTITION_PICKER_COLORS_H5;
|
|
30937
30937
|
}
|
|
30938
|
+
function getPartitionPickerBoundaryStrokePx(platform = PlatformType.WEB) {
|
|
30939
|
+
return platform === PlatformType.WEB
|
|
30940
|
+
? { ...WEB_PARTITION_BOUNDARY_STROKE_PX }
|
|
30941
|
+
: { ...H5_PARTITION_BOUNDARY_STROKE_PX };
|
|
30942
|
+
}
|
|
30938
30943
|
/** Web 分区名气泡(Figma「地块名称」/ 选中区域) */
|
|
30939
30944
|
const PARTITION_PICKER_LABEL_STYLES_WEB = {
|
|
30940
30945
|
default: {
|
|
@@ -30975,6 +30980,7 @@ const PARTITION_PICKER_LABEL_STYLES_H5 = {
|
|
|
30975
30980
|
fontWeight: 400,
|
|
30976
30981
|
padding: '6px',
|
|
30977
30982
|
width: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
|
|
30983
|
+
maxWidth: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
|
|
30978
30984
|
borderRadius: 100,
|
|
30979
30985
|
boxSizing: 'border-box',
|
|
30980
30986
|
},
|
|
@@ -30985,6 +30991,7 @@ const PARTITION_PICKER_LABEL_STYLES_H5 = {
|
|
|
30985
30991
|
fontWeight: 400,
|
|
30986
30992
|
padding: '6px',
|
|
30987
30993
|
width: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
|
|
30994
|
+
maxWidth: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
|
|
30988
30995
|
borderRadius: 100,
|
|
30989
30996
|
boxSizing: 'border-box',
|
|
30990
30997
|
},
|
|
@@ -31022,10 +31029,6 @@ const DEFAULT_PARTITION_PICKER_GRID_STYLE = {
|
|
|
31022
31029
|
opacity: PARTITION_PICKER_GRID_OPACITY,
|
|
31023
31030
|
maxIntersectionDots: PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS,
|
|
31024
31031
|
};
|
|
31025
|
-
const DEFAULT_PARTITION_PICKER_BOUNDARY_STROKE_PX = {
|
|
31026
|
-
default: PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX,
|
|
31027
|
-
emphasized: PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX,
|
|
31028
|
-
};
|
|
31029
31032
|
/**
|
|
31030
31033
|
* 将 platform 内置默认值与外部 pickerStyleConfig 深度合并。
|
|
31031
31034
|
* 调用方只需覆盖变化的字段,无需改组件源码。
|
|
@@ -31042,8 +31045,7 @@ function resolvePartitionPickerStyles(platform = PlatformType.WEB, config) {
|
|
|
31042
31045
|
}
|
|
31043
31046
|
: baseLabels,
|
|
31044
31047
|
grid: merge$1({}, DEFAULT_PARTITION_PICKER_GRID_STYLE, config?.grid),
|
|
31045
|
-
boundaryStrokePx: merge$1({},
|
|
31046
|
-
labelMinScreenWidthPx: config?.labelMinScreenWidthPx ?? H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX,
|
|
31048
|
+
boundaryStrokePx: merge$1({}, getPartitionPickerBoundaryStrokePx(platform), config?.boundaryStrokePx),
|
|
31047
31049
|
};
|
|
31048
31050
|
}
|
|
31049
31051
|
|
|
@@ -31057,7 +31059,7 @@ function resolvePartitionPickerStyles(platform = PlatformType.WEB, config) {
|
|
|
31057
31059
|
*
|
|
31058
31060
|
* 平移可在地块/分区名等任意区域发起;仅当位移小于阈值时才视为点击
|
|
31059
31061
|
*/
|
|
31060
|
-
function useMapViewport({ mapJson, containerRef: externalContainerRef, width, height, padding, minZoom = 0.5, maxZoom =
|
|
31062
|
+
function useMapViewport({ mapJson, containerRef: externalContainerRef, width, height, padding, minZoom = 0.5, maxZoom = 3, enablePanZoom = true, refitOnResize = true, onViewportTap, mapRotationDeg = 0, }) {
|
|
31061
31063
|
/** 地图容器 DOM,用于绑定 wheel/pointer/touch 事件 */
|
|
31062
31064
|
const internalContainerRef = useRef(null);
|
|
31063
31065
|
const containerRef = externalContainerRef ?? internalContainerRef;
|
|
@@ -31476,7 +31478,17 @@ function useMapViewport({ mapJson, containerRef: externalContainerRef, width, he
|
|
|
31476
31478
|
window.removeEventListener('mouseup', handleWindowPointerUp);
|
|
31477
31479
|
window.removeEventListener('blur', handleWindowPointerUp);
|
|
31478
31480
|
};
|
|
31479
|
-
}, [
|
|
31481
|
+
}, [
|
|
31482
|
+
applyPan,
|
|
31483
|
+
applyZoom,
|
|
31484
|
+
clearPanState,
|
|
31485
|
+
enablePanZoom,
|
|
31486
|
+
height,
|
|
31487
|
+
maxZoom,
|
|
31488
|
+
minZoom,
|
|
31489
|
+
scheduleViewBox,
|
|
31490
|
+
width,
|
|
31491
|
+
]);
|
|
31480
31492
|
return {
|
|
31481
31493
|
/** 绑定到地图外层容器的 ref */
|
|
31482
31494
|
containerRef,
|
|
@@ -31535,10 +31547,12 @@ function useGoogleMapsOverlay({ mapJson, mapRef, defaultTransform, originNorthRo
|
|
|
31535
31547
|
/**
|
|
31536
31548
|
* OverlayViewF 的 LatLngBounds:
|
|
31537
31549
|
* GPS 包围盒 + defaultTransform 在 Web Mercator 下的平移偏移。
|
|
31550
|
+
* 仅 Map 模式(enabled)且 Google Maps 已加载时才计算。
|
|
31538
31551
|
*/
|
|
31539
31552
|
const bounds = useMemo(() => {
|
|
31540
|
-
if (!mapJson || typeof window === 'undefined' || !window.google?.maps)
|
|
31553
|
+
if (!enabled || !mapJson || typeof window === 'undefined' || !window.google?.maps) {
|
|
31541
31554
|
return null;
|
|
31555
|
+
}
|
|
31542
31556
|
const validBounds = getValidGpsBounds(mapJson, 0);
|
|
31543
31557
|
const [swLng0, swLat0] = validBounds.sw;
|
|
31544
31558
|
const [neLng0, neLat0] = validBounds.ne;
|
|
@@ -31551,7 +31565,7 @@ function useGoogleMapsOverlay({ mapJson, mapRef, defaultTransform, originNorthRo
|
|
|
31551
31565
|
const [swLng, swLat] = proj4(WEB_MERCATOR, WGS84, [swX, swY]);
|
|
31552
31566
|
const [neLng, neLat] = proj4(WEB_MERCATOR, WGS84, [neX, neY]);
|
|
31553
31567
|
return new window.google.maps.LatLngBounds(new window.google.maps.LatLng(swLat, swLng), new window.google.maps.LatLng(neLat, neLng));
|
|
31554
|
-
}, [mapJson, transformX, transformY]);
|
|
31568
|
+
}, [enabled, mapJson, transformX, transformY]);
|
|
31555
31569
|
/** OverlayViewF onDraw:解析 overlay 容器 style,得到像素 layout */
|
|
31556
31570
|
const handleOverlayDraw = useCallback((style) => {
|
|
31557
31571
|
const layout = Object.keys(style).reduce((acc, key) => {
|
|
@@ -31566,8 +31580,9 @@ function useGoogleMapsOverlay({ mapJson, mapRef, defaultTransform, originNorthRo
|
|
|
31566
31580
|
}, []);
|
|
31567
31581
|
/** Map 模式 fitToView:调用 google.maps.Map.fitBounds,考虑旋转后的 GPS 包围盒 */
|
|
31568
31582
|
const fitToView = useCallback((nextPadding) => {
|
|
31569
|
-
if (!enabled || !mapRef || !mapJson)
|
|
31583
|
+
if (!enabled || !mapRef || !mapJson || typeof window === 'undefined' || !window.google?.maps) {
|
|
31570
31584
|
return;
|
|
31585
|
+
}
|
|
31571
31586
|
const rotate = transformRotation + originNorthRotate;
|
|
31572
31587
|
const validBounds = getValidGpsBounds(mapJson, rotate);
|
|
31573
31588
|
const [swLng0, swLat0] = validBounds.sw;
|
|
@@ -31616,7 +31631,7 @@ function useGoogleMapsOverlay({ mapJson, mapRef, defaultTransform, originNorthRo
|
|
|
31616
31631
|
const listener = mapRef.addListener('zoom_changed', handleZoomChanged);
|
|
31617
31632
|
updateScale();
|
|
31618
31633
|
return () => {
|
|
31619
|
-
if (listener) {
|
|
31634
|
+
if (listener && window.google?.maps?.event) {
|
|
31620
31635
|
window.google.maps.event.removeListener(listener);
|
|
31621
31636
|
}
|
|
31622
31637
|
handleZoomChanged.cancel();
|
|
@@ -31876,19 +31891,16 @@ function usePartitionLabelItems(mapData, viewBox, containerWidth, containerHeigh
|
|
|
31876
31891
|
]);
|
|
31877
31892
|
}
|
|
31878
31893
|
|
|
31879
|
-
var css_248z = "@charset \"UTF-8\";\n/* 地图容器:裁剪溢出,禁用浏览器默认 touch 手势以便自定义 pinch */\n.index-module_container__nNYv7 {\n position: relative;\n overflow: hidden;\n touch-action: none;\n user-select: none;\n cursor: grab;\n /* H5 点击时不出现矩形 tap 高亮 */\n -webkit-tap-highlight-color: transparent;\n tap-highlight-color: transparent;\n}\n\n/* 网格 + 地块双层 SVG 叠放,共用 viewBox 保证平移/缩放同步 */\n.index-module_mapSvgStack__nz2s2 {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 1;\n}\n\n.index-module_gridSvg__MoJD6 {\n position: absolute;\n inset: 0;\n display: block;\n pointer-events: none;\n}\n\n/* 地图 SVG:地块/通道,可绕 viewBox 中心旋转 */\n.index-module_mapSvg__vN0LV {\n position: absolute;\n inset: 0;\n display: block;\n pointer-events: none;\n -webkit-tap-highlight-color: transparent;\n tap-highlight-color: transparent;\n}\n\n/* 可点击地块:点击选中由 viewport 统一处理,此处保留 hover */\n.index-module_boundaryPolygon__uHe-E {\n cursor: grab;\n pointer-events: auto;\n -webkit-tap-highlight-color: transparent;\n tap-highlight-color: transparent;\n outline: none;\n -webkit-touch-callout: none;\n}\n\n.index-module_container__nNYv7:active {\n cursor: grabbing;\n}\n\n.index-module_boundaryPolygon__uHe-E:active {\n cursor: grabbing;\n}\n\n/* Map 模式:OverlayViewF 内根节点,铺满 overlay 像素区域 */\n.index-module_googleOverlayRoot__TQ3II {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: visible;\n}\n\n/* HTML overlay 层:CSS rotate 与 MowerMapRenderer OverlayViewF 一致,子元素自行反向补偿 */\n.index-module_mapOverlayLayer__7jTDy {\n position: absolute;\n inset: 0;\n transform-origin: 50% 50%;\n pointer-events: none;\n z-index: 2;\n}\n\n/* 分区名气泡层,绝对定位覆盖在 SVG 之上 */\n.index-module_labelsLayer__Rcikw {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n\n.index-module_label__xo3Kc {\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: center;\n pointer-events: auto;\n cursor: grab;\n white-space: nowrap;\n -webkit-tap-highlight-color: transparent;\n tap-highlight-color: transparent;\n outline: none;\n -webkit-touch-callout: none;\n}\n\n.index-module_label__xo3Kc:active {\n cursor: grabbing;\n}\n\n.index-
|
|
31880
|
-
var styles = {"container":"index-module_container__nNYv7","mapSvgStack":"index-module_mapSvgStack__nz2s2","gridSvg":"index-module_gridSvg__MoJD6","mapSvg":"index-module_mapSvg__vN0LV","boundaryPolygon":"index-module_boundaryPolygon__uHe-E","googleOverlayRoot":"index-module_googleOverlayRoot__TQ3II","mapOverlayLayer":"index-module_mapOverlayLayer__7jTDy","labelsLayer":"index-module_labelsLayer__Rcikw","label":"index-module_label__xo3Kc","
|
|
31894
|
+
var css_248z = "@charset \"UTF-8\";\n/* 地图容器:裁剪溢出,禁用浏览器默认 touch 手势以便自定义 pinch */\n.index-module_container__nNYv7 {\n position: relative;\n overflow: hidden;\n touch-action: none;\n user-select: none;\n cursor: grab;\n /* H5 点击时不出现矩形 tap 高亮 */\n -webkit-tap-highlight-color: transparent;\n tap-highlight-color: transparent;\n}\n\n/* 网格 + 地块双层 SVG 叠放,共用 viewBox 保证平移/缩放同步 */\n.index-module_mapSvgStack__nz2s2 {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 1;\n}\n\n.index-module_gridSvg__MoJD6 {\n position: absolute;\n inset: 0;\n display: block;\n pointer-events: none;\n}\n\n/* 地图 SVG:地块/通道,可绕 viewBox 中心旋转 */\n.index-module_mapSvg__vN0LV {\n position: absolute;\n inset: 0;\n display: block;\n pointer-events: none;\n -webkit-tap-highlight-color: transparent;\n tap-highlight-color: transparent;\n}\n\n/* 可点击地块:点击选中由 viewport 统一处理,此处保留 hover */\n.index-module_boundaryPolygon__uHe-E {\n cursor: grab;\n pointer-events: auto;\n -webkit-tap-highlight-color: transparent;\n tap-highlight-color: transparent;\n outline: none;\n -webkit-touch-callout: none;\n}\n\n.index-module_container__nNYv7:active {\n cursor: grabbing;\n}\n\n.index-module_boundaryPolygon__uHe-E:active {\n cursor: grabbing;\n}\n\n/* Map 模式:OverlayViewF 内根节点,铺满 overlay 像素区域 */\n.index-module_googleOverlayRoot__TQ3II {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: visible;\n}\n\n/* HTML overlay 层:CSS rotate 与 MowerMapRenderer OverlayViewF 一致,子元素自行反向补偿 */\n.index-module_mapOverlayLayer__7jTDy {\n position: absolute;\n inset: 0;\n transform-origin: 50% 50%;\n pointer-events: none;\n z-index: 2;\n}\n\n/* 分区名气泡层,绝对定位覆盖在 SVG 之上 */\n.index-module_labelsLayer__Rcikw {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n\n.index-module_label__xo3Kc {\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: center;\n pointer-events: auto;\n cursor: grab;\n white-space: nowrap;\n -webkit-tap-highlight-color: transparent;\n tap-highlight-color: transparent;\n outline: none;\n -webkit-touch-callout: none;\n}\n\n.index-module_label__xo3Kc:active {\n cursor: grabbing;\n}\n\n.index-module_labelOrderOnly__TDLBU {\n gap: 0;\n}\n\n/* H5 名称标签:气泡宽度 / 文案最大宽度由 constants.ts 内联样式控制 */\n.index-module_labelH5Wrap__Es5cA {\n white-space: normal;\n}\n\n.index-module_labelPill__7jnOo {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n}\n\n.index-module_labelPillH5__iPeHi {\n box-sizing: border-box;\n}\n\n.index-module_labelText__ialST {\n word-break: break-word;\n text-align: center;\n}\n\n.index-module_labelTextH5__jz8SO {\n max-width: 100%;\n white-space: normal;\n overflow-wrap: anywhere;\n line-height: 1.33;\n}\n\n/* 选中序号徽章:尺寸与颜色由 constants 按 platform 注入 */\n.index-module_selectionOrderBadge__uj7LX {\n flex-shrink: 0;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.index-module_boundaryPolygonIsolated__syN4V {\n cursor: not-allowed;\n}\n\n.index-module_boundaryPolygonIsolated__syN4V:active {\n cursor: grabbing;\n}\n\n.index-module_labelIsolated__K3WAB {\n cursor: not-allowed;\n pointer-events: auto;\n}\n\n.index-module_labelIsolated__K3WAB:active {\n cursor: grabbing;\n}\n\n.index-module_labelIsolatedLayout__k-rwI {\n gap: 4px;\n}\n\n.index-module_isolatedIconBelow__PuVIF {\n position: static;\n transform: none;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n pointer-events: none;\n}\n\n.index-module_isolatedIconBelow__PuVIF.index-module_isolatedIconWeb__iPkYp {\n width: 20px;\n height: 20px;\n}\n\n.index-module_isolatedIcon__Vbxl0 {\n position: absolute;\n width: 24px;\n height: 24px;\n left: 50%;\n bottom: calc(100% + 4px);\n transform: translateX(-50%);\n}\n\n.index-module_isolatedIconWeb__iPkYp {\n width: 20px;\n height: 20px;\n bottom: calc(100% + 2px);\n}";
|
|
31895
|
+
var styles = {"container":"index-module_container__nNYv7","mapSvgStack":"index-module_mapSvgStack__nz2s2","gridSvg":"index-module_gridSvg__MoJD6","mapSvg":"index-module_mapSvg__vN0LV","boundaryPolygon":"index-module_boundaryPolygon__uHe-E","googleOverlayRoot":"index-module_googleOverlayRoot__TQ3II","mapOverlayLayer":"index-module_mapOverlayLayer__7jTDy","labelsLayer":"index-module_labelsLayer__Rcikw","label":"index-module_label__xo3Kc","labelOrderOnly":"index-module_labelOrderOnly__TDLBU","labelH5Wrap":"index-module_labelH5Wrap__Es5cA","labelPill":"index-module_labelPill__7jnOo","labelPillH5":"index-module_labelPillH5__iPeHi","labelText":"index-module_labelText__ialST","labelTextH5":"index-module_labelTextH5__jz8SO","selectionOrderBadge":"index-module_selectionOrderBadge__uj7LX","boundaryPolygonIsolated":"index-module_boundaryPolygonIsolated__syN4V","labelIsolated":"index-module_labelIsolated__K3WAB","labelIsolatedLayout":"index-module_labelIsolatedLayout__k-rwI","isolatedIconBelow":"index-module_isolatedIconBelow__PuVIF","isolatedIconWeb":"index-module_isolatedIconWeb__iPkYp"};
|
|
31881
31896
|
styleInject(css_248z);
|
|
31882
31897
|
|
|
31883
31898
|
const PARTITION_BOUNDARY_ID_ATTR$1 = 'data-partition-boundary-id';
|
|
31884
|
-
const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isIsolated = false, selected, hovered, viewBoxWidth, viewBoxHeight,
|
|
31899
|
+
const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isIsolated = false, selected, hovered, viewBoxWidth, viewBoxHeight, containerWidth, containerHeight, onHoverChange, onBoundaryClick, }) => {
|
|
31885
31900
|
const style = data.style || {};
|
|
31886
31901
|
const boundaryId = Number(data.id);
|
|
31887
31902
|
const colors = boundaryColors;
|
|
31888
|
-
const strokePx = boundaryStrokePx ?? {
|
|
31889
|
-
default: PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX,
|
|
31890
|
-
emphasized: PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX,
|
|
31891
|
-
};
|
|
31903
|
+
const strokePx = boundaryStrokePx ?? { ...WEB_PARTITION_BOUNDARY_STROKE_PX };
|
|
31892
31904
|
const pointsString = useMemo(() => data.points.map((point) => `${point[0]},${point[1]}`).join(' '), [data.points]);
|
|
31893
31905
|
const fillColor = useMemo(() => {
|
|
31894
31906
|
if (isIsolated)
|
|
@@ -31911,31 +31923,16 @@ const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isI
|
|
|
31911
31923
|
return style.lineColor || colors.defaultStroke;
|
|
31912
31924
|
}, [colors, hovered, isIsolated, selected, style.lineColor]);
|
|
31913
31925
|
const strokeWidth = useMemo(() => {
|
|
31914
|
-
let baseWidth;
|
|
31915
|
-
let emphasized = false;
|
|
31916
|
-
if (isIsolated)
|
|
31917
|
-
baseWidth = colors.isolatedStrokeWidth;
|
|
31918
|
-
else if (selected) {
|
|
31919
|
-
emphasized = true;
|
|
31920
|
-
baseWidth = hovered ? colors.selectedHoverStrokeWidth : colors.selectedStrokeWidth;
|
|
31921
|
-
}
|
|
31922
|
-
else if (hovered) {
|
|
31923
|
-
emphasized = true;
|
|
31924
|
-
baseWidth = colors.hoverStrokeWidth;
|
|
31925
|
-
}
|
|
31926
|
-
else
|
|
31927
|
-
baseWidth = colors.defaultStrokeWidth;
|
|
31928
31926
|
const viewBox = { width: viewBoxWidth, height: viewBoxHeight };
|
|
31929
|
-
|
|
31927
|
+
const targetScreenStrokePx = !isIsolated && (selected || hovered) ? strokePx.selected : strokePx.default;
|
|
31928
|
+
return scaleStrokeWidthForViewBox(viewBox, {
|
|
31930
31929
|
containerWidth,
|
|
31931
31930
|
containerHeight,
|
|
31932
|
-
|
|
31931
|
+
targetScreenStrokePx,
|
|
31933
31932
|
});
|
|
31934
31933
|
}, [
|
|
31935
|
-
colors,
|
|
31936
31934
|
containerHeight,
|
|
31937
31935
|
containerWidth,
|
|
31938
|
-
fitViewBox,
|
|
31939
31936
|
hovered,
|
|
31940
31937
|
isIsolated,
|
|
31941
31938
|
selected,
|
|
@@ -31955,7 +31952,7 @@ const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isI
|
|
|
31955
31952
|
};
|
|
31956
31953
|
var SelectableBoundaryElement$1 = memo(SelectableBoundaryElement);
|
|
31957
31954
|
|
|
31958
|
-
const PartitionPickerSvg = ({ svgElementDatas, viewBox,
|
|
31955
|
+
const PartitionPickerSvg = ({ svgElementDatas, viewBox, containerWidth, containerHeight, mapRotation = 0, boundaryColors, boundaryStrokePx, isolatedBoundaryIds, selectedIds, hoveredId, onHoverChange, onBoundaryClick, }) => {
|
|
31959
31956
|
const boundaries = (svgElementDatas[DataType.BOUNDARY] || []);
|
|
31960
31957
|
const channels = (svgElementDatas[DataType.CHANNEL] || []);
|
|
31961
31958
|
const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
|
|
@@ -31967,7 +31964,7 @@ const PartitionPickerSvg = ({ svgElementDatas, viewBox, fitViewBox, containerWid
|
|
|
31967
31964
|
}, [mapRotation, viewBox.x, viewBox.y, viewBox.width, viewBox.height]);
|
|
31968
31965
|
const mapContent = (jsxs(Fragment, { children: [jsx(GElement, { type: "boundary", children: boundaries.map((item) => {
|
|
31969
31966
|
const boundaryId = Number(item.id);
|
|
31970
|
-
return (jsx(SelectableBoundaryElement$1, { data: item, boundaryColors: boundaryColors, boundaryStrokePx: boundaryStrokePx, isIsolated: isolatedBoundaryIds.has(boundaryId), selected: selectedIdSet.has(boundaryId), hovered: hoveredId === boundaryId, viewBoxWidth: viewBox.width, viewBoxHeight: viewBox.height,
|
|
31967
|
+
return (jsx(SelectableBoundaryElement$1, { data: item, boundaryColors: boundaryColors, boundaryStrokePx: boundaryStrokePx, isIsolated: isolatedBoundaryIds.has(boundaryId), selected: selectedIdSet.has(boundaryId), hovered: hoveredId === boundaryId, viewBoxWidth: viewBox.width, viewBoxHeight: viewBox.height, containerWidth: containerWidth, containerHeight: containerHeight, onHoverChange: onHoverChange, onBoundaryClick: onBoundaryClick }, item.id));
|
|
31971
31968
|
}) }), jsxs(GElement, { type: "channel", children: [jsx(ChannelClipPath, {}), channels.map((item) => (jsx(ChannelElement, { data: item }, item.id)))] })] }));
|
|
31972
31969
|
return (jsx("svg", { className: styles.mapSvg, xmlns: "http://www.w3.org/2000/svg", viewBox: viewBoxToString(viewBox), width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet", shapeRendering: "geometricPrecision", children: mapContentTransform ? (jsx("g", { transform: mapContentTransform, children: mapContent })) : (mapContent) }));
|
|
31973
31970
|
};
|
|
@@ -32007,10 +32004,21 @@ const MapGridBackground = ({ viewBox, gridStyle }) => {
|
|
|
32007
32004
|
var MapGridBackground$1 = memo(MapGridBackground);
|
|
32008
32005
|
|
|
32009
32006
|
const PartitionPickerGridSvg = ({ viewBox, gridStyle }) => {
|
|
32010
|
-
return (jsx("svg", { className: styles.gridSvg, "data-viewport-background": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: viewBoxToString(viewBox), width: "100%", height: "100%",
|
|
32007
|
+
return (jsx("svg", { className: styles.gridSvg, "data-viewport-background": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: viewBoxToString(viewBox), width: "100%", height: "100%",
|
|
32008
|
+
// 设置缩放的规则
|
|
32009
|
+
//等比缩放 viewBox 内容,使其完整落在容器内;
|
|
32010
|
+
//水平、垂直都居中;
|
|
32011
|
+
//比例不一致时,上下或左右留空(letterboxing),不裁切、不拉伸变形。
|
|
32012
|
+
preserveAspectRatio: "xMidYMid meet",
|
|
32013
|
+
/**
|
|
32014
|
+
* 控制浏览器如何绘制路径/线条:
|
|
32015
|
+
* geometricPrecision:优先几何精度,线条更平滑、对齐更稳,缩放时不易发虚或抖动。
|
|
32016
|
+
* 网格是大量细线,用这个属性能让缩放/平移时网格更清晰稳定。
|
|
32017
|
+
*/
|
|
32018
|
+
shapeRendering: "geometricPrecision", "aria-hidden": true, children: jsx(MapGridBackground$1, { viewBox: viewBox, gridStyle: gridStyle }) }));
|
|
32011
32019
|
};
|
|
32012
32020
|
|
|
32013
|
-
const PartitionNameLabels = ({ items, selectedIds, labelStyles,
|
|
32021
|
+
const PartitionNameLabels = ({ items, selectedIds, labelStyles, platform = PlatformType.WEB, showSelectionOrder = false, rotation = 0, onHoverChange, onBoundaryClick, }) => {
|
|
32014
32022
|
const isWeb = platform === PlatformType.WEB;
|
|
32015
32023
|
const orderBadgeStyle = useMemo(() => ({
|
|
32016
32024
|
width: labelStyles.selectionOrderBadge.width,
|
|
@@ -32020,18 +32028,18 @@ const PartitionNameLabels = ({ items, selectedIds, labelStyles, labelMinScreenWi
|
|
|
32020
32028
|
color: labelStyles.selectionOrderBadge.color,
|
|
32021
32029
|
fontSize: `${labelStyles.selectionOrderBadge.fontSize}px`,
|
|
32022
32030
|
fontWeight: labelStyles.selectionOrderBadge.fontWeight,
|
|
32031
|
+
fontFamily: labelStyles.selectionOrderBadge.fontFamily,
|
|
32023
32032
|
lineHeight: labelStyles.selectionOrderBadge.lineHeight,
|
|
32024
32033
|
}), [labelStyles]);
|
|
32025
32034
|
return (jsx("div", { className: styles.labelsLayer, children: items.map((item) => {
|
|
32026
32035
|
const isIsolated = item.isIsolated === true;
|
|
32027
32036
|
const selected = !isIsolated && selectedIds.includes(item.id);
|
|
32028
32037
|
const selectionOrder = selected ? selectedIds.indexOf(item.id) + 1 : null;
|
|
32029
|
-
const isLargeEnough = item.screenWidthPx >
|
|
32038
|
+
const isLargeEnough = item.screenWidthPx > H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX;
|
|
32030
32039
|
// Web 始终展示名称;H5 按屏幕宽度决定
|
|
32031
32040
|
const showNameLabel = isWeb || isLargeEnough;
|
|
32032
32041
|
const showOrderBadge = showSelectionOrder && selected && selectionOrder != null;
|
|
32033
32042
|
const h5OrderOnly = !isWeb && showOrderBadge && !isLargeEnough;
|
|
32034
|
-
const h5OrderWithName = !isWeb && showOrderBadge && isLargeEnough;
|
|
32035
32043
|
if (!showNameLabel && !showOrderBadge && !isIsolated) {
|
|
32036
32044
|
return null;
|
|
32037
32045
|
}
|
|
@@ -32040,18 +32048,21 @@ const PartitionNameLabels = ({ items, selectedIds, labelStyles, labelMinScreenWi
|
|
|
32040
32048
|
styles.label,
|
|
32041
32049
|
!isWeb && showNameLabel ? styles.labelH5Wrap : '',
|
|
32042
32050
|
isIsolated ? styles.labelIsolated : '',
|
|
32043
|
-
isWeb && showOrderBadge ? styles.labelWithOrder : '',
|
|
32044
|
-
h5OrderWithName ? styles.labelWithOrderH5 : '',
|
|
32045
32051
|
h5OrderOnly ? styles.labelOrderOnly : '',
|
|
32046
32052
|
isIsolated ? styles.labelIsolatedLayout : '',
|
|
32047
32053
|
]
|
|
32048
32054
|
.filter(Boolean)
|
|
32049
32055
|
.join(' ');
|
|
32056
|
+
const showOrderWithName = showOrderBadge && showNameLabel;
|
|
32057
|
+
const selectionOrderGapPx = isWeb
|
|
32058
|
+
? WEB_SELECTION_ORDER_GAP_PX
|
|
32059
|
+
: H5_SELECTION_ORDER_GAP_PX;
|
|
32050
32060
|
const boundaryIdProps = isIsolated ? {} : { [PARTITION_BOUNDARY_ID_ATTR$1]: item.id };
|
|
32051
32061
|
return (jsxs("div", { className: labelClassName, style: {
|
|
32052
32062
|
left: `${item.leftPct}%`,
|
|
32053
32063
|
top: `${item.topPct}%`,
|
|
32054
32064
|
transform: `translate(-50%, -50%) rotate(${-rotation}deg)`,
|
|
32065
|
+
...(showOrderWithName ? { gap: selectionOrderGapPx } : undefined),
|
|
32055
32066
|
}, ...boundaryIdProps, onMouseEnter: isIsolated ? undefined : () => onHoverChange(item.id), onMouseLeave: isIsolated ? undefined : () => onHoverChange(null), onClick: onBoundaryClick && !isIsolated
|
|
32056
32067
|
? (event) => {
|
|
32057
32068
|
event.stopPropagation();
|
|
@@ -32066,7 +32077,7 @@ const DEFAULT_BACKGROUND = PARTITION_PICKER_GRID_BASE_COLOR;
|
|
|
32066
32077
|
const PARTITION_BOUNDARY_ID_ATTR = 'data-partition-boundary-id';
|
|
32067
32078
|
/** Map 模式下 OverlayViewF 默认 z-index */
|
|
32068
32079
|
const DEFAULT_OVERLAY_Z_INDEX = 100;
|
|
32069
|
-
const MowerPartitionPickerMap = forwardRef(({ mapJson, mapConfig, pickerStyleConfig, sn = '', platform = PlatformType.WEB, width, height, padding =
|
|
32080
|
+
const MowerPartitionPickerMap = forwardRef(({ mapJson, mapConfig, pickerStyleConfig, sn = '', platform = PlatformType.WEB, width, height, padding = 0, backgroundColor = DEFAULT_BACKGROUND, defaultTransform, mapRef, minZoom = 0.5, maxZoom = 3, enablePanZoom = true, refitOnResize = true, onSizeChange, selectedBoundaryIds, defaultSelectedBoundaryIds, onSelectionChange, hoveredBoundaryId, defaultHoveredBoundaryId, onBoundaryHoverChange, showSelectionOrder = false, zIndex = DEFAULT_OVERLAY_Z_INDEX, className, style, }, ref) => {
|
|
32070
32081
|
/**
|
|
32071
32082
|
* 是否为 Map 模式(传入 mapRef 时为 true):
|
|
32072
32083
|
* - true:Google Maps 底图 + OverlayViewF,平移/缩放/fit 由底图负责
|
|
@@ -32077,8 +32088,34 @@ const MowerPartitionPickerMap = forwardRef(({ mapJson, mapConfig, pickerStyleCon
|
|
|
32077
32088
|
const channelClipPathId = useMemo(() => createChannelClipPathId({ sn, reactId: reactInstanceId }), [sn, reactInstanceId]);
|
|
32078
32089
|
/** 外部 pickerStyleConfig 与内置 platform 默认值合并后的最终外观(地块/标签/网格等) */
|
|
32079
32090
|
const mergedPickerStyles = useMemo(() => resolvePartitionPickerStyles(platform, pickerStyleConfig), [pickerStyleConfig, platform]);
|
|
32080
|
-
/** Standalone
|
|
32081
|
-
const resolvedBackgroundColor =
|
|
32091
|
+
/** Standalone 容器背景与 grid.baseColor 对齐(合并后的最终值) */
|
|
32092
|
+
const resolvedBackgroundColor = useMemo(() => {
|
|
32093
|
+
if (isMapMode)
|
|
32094
|
+
return undefined;
|
|
32095
|
+
if (pickerStyleConfig?.grid?.baseColor != null) {
|
|
32096
|
+
return mergedPickerStyles.grid.baseColor;
|
|
32097
|
+
}
|
|
32098
|
+
return backgroundColor ?? mergedPickerStyles.grid.baseColor;
|
|
32099
|
+
}, [
|
|
32100
|
+
backgroundColor,
|
|
32101
|
+
isMapMode,
|
|
32102
|
+
mergedPickerStyles.grid.baseColor,
|
|
32103
|
+
pickerStyleConfig?.grid?.baseColor,
|
|
32104
|
+
]);
|
|
32105
|
+
/** Standalone 网格层:backgroundColor 未显式指定 grid.baseColor 时与容器背景同步 */
|
|
32106
|
+
const standaloneGridStyle = useMemo(() => {
|
|
32107
|
+
if (pickerStyleConfig?.grid?.baseColor != null) {
|
|
32108
|
+
return mergedPickerStyles.grid;
|
|
32109
|
+
}
|
|
32110
|
+
if (backgroundColor != null) {
|
|
32111
|
+
return { ...mergedPickerStyles.grid, baseColor: backgroundColor };
|
|
32112
|
+
}
|
|
32113
|
+
return mergedPickerStyles.grid;
|
|
32114
|
+
}, [
|
|
32115
|
+
backgroundColor,
|
|
32116
|
+
mergedPickerStyles.grid,
|
|
32117
|
+
pickerStyleConfig?.grid?.baseColor,
|
|
32118
|
+
]);
|
|
32082
32119
|
const mergedMapConfig = useMemo(() => merge$1({}, DEFAULT_STYLES, getPartitionPickerMapConfig(platform), mapConfig), [mapConfig, platform]);
|
|
32083
32120
|
const svgElementDatas = useMemo(() => UnifiedMapDataProcessor.processMapData(mapJson, mergedMapConfig) || {}, [mapJson, mergedMapConfig]);
|
|
32084
32121
|
/** 地图 Y 轴相对正北的偏移(度),与 MowerMapRenderer.originNorthRotate 一致 */
|
|
@@ -32153,7 +32190,7 @@ const MowerPartitionPickerMap = forwardRef(({ mapJson, mapConfig, pickerStyleCon
|
|
|
32153
32190
|
}
|
|
32154
32191
|
}, [isMapMode, isReady, onSizeChange, pxWidth, pxHeight]);
|
|
32155
32192
|
/** Standalone:平移/缩放 viewBox;Map 模式 enablePanZoom 关闭,仅保留 hook 结构 */
|
|
32156
|
-
const { viewBox: standaloneViewBox, gridViewBox,
|
|
32193
|
+
const { viewBox: standaloneViewBox, gridViewBox, resetView: standaloneResetView, fitToView: standaloneFitToView, } = useMapViewport({
|
|
32157
32194
|
mapJson,
|
|
32158
32195
|
containerRef,
|
|
32159
32196
|
width: pxWidth,
|
|
@@ -32168,7 +32205,6 @@ const MowerPartitionPickerMap = forwardRef(({ mapJson, mapConfig, pickerStyleCon
|
|
|
32168
32205
|
});
|
|
32169
32206
|
/** 按模式选取 viewBox / 尺寸 / 旋转 / 就绪状态(Map 与 Standalone 数据源不同) */
|
|
32170
32207
|
const viewBox = isMapMode ? googleOverlay.svgViewBox : standaloneViewBox;
|
|
32171
|
-
const fitViewBox = isMapMode ? googleOverlay.fitViewBox : standaloneFitViewBox;
|
|
32172
32208
|
const overlayWidth = isMapMode ? googleOverlay.overlayWidth : pxWidth;
|
|
32173
32209
|
const overlayHeight = isMapMode ? googleOverlay.overlayHeight : pxHeight;
|
|
32174
32210
|
const actureRotate = isMapMode ? googleOverlay.actureRotate : standaloneActureRotate;
|
|
@@ -32242,18 +32278,18 @@ const MowerPartitionPickerMap = forwardRef(({ mapJson, mapConfig, pickerStyleCon
|
|
|
32242
32278
|
...(isMapMode ? {} : layoutStyle),
|
|
32243
32279
|
}), [isMapMode, layoutStyle, resolvedBackgroundColor, style]);
|
|
32244
32280
|
/** 地块 + 通道 SVG;Map 模式不在 SVG 内旋转(由 OverlayViewF rotate 处理) */
|
|
32245
|
-
const mapSvgLayer = viewBox && isLayersReady ? (jsx(PartitionPickerSvg, { svgElementDatas: svgElementDatas, viewBox: viewBox,
|
|
32281
|
+
const mapSvgLayer = viewBox && isLayersReady ? (jsx(PartitionPickerSvg, { svgElementDatas: svgElementDatas, viewBox: viewBox, containerWidth: overlayWidth, containerHeight: overlayHeight, mapRotation: isMapMode ? 0 : actureRotate, boundaryColors: mergedPickerStyles.boundary, boundaryStrokePx: mergedPickerStyles.boundaryStrokePx, isolatedBoundaryIds: isolatedBoundaryIds, selectedIds: selectedIds, hoveredId: hoveredId, onHoverChange: handleHoverChange, onBoundaryClick: isMapMode ? handleBoundaryClick : undefined })) : null;
|
|
32246
32282
|
/**
|
|
32247
32283
|
* 分区标签 + 充电桩 HTML 层。
|
|
32248
32284
|
* Map 模式:平铺于 overlay 根节点;Standalone:包在 mapOverlayLayer 内做 CSS 旋转。
|
|
32249
32285
|
*/
|
|
32250
|
-
const overlayLayers = viewBox && isLayersReady ? (isMapMode ? (jsxs(Fragment, { children: [jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels,
|
|
32286
|
+
const overlayLayers = viewBox && isLayersReady ? (isMapMode ? (jsxs(Fragment, { children: [jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels, platform: platform, showSelectionOrder: showSelectionOrder, rotation: actureRotate, onHoverChange: handleHoverChange, onBoundaryClick: handleBoundaryClick }), jsx(CharginPile, { viewBox: viewBox, rotation: actureRotate })] })) : (jsxs("div", { className: styles.mapOverlayLayer, style: mapOverlayLayerStyle, children: [jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels, platform: platform, showSelectionOrder: showSelectionOrder, rotation: actureRotate, onHoverChange: handleHoverChange }), jsx(CharginPile, { viewBox: viewBox, rotation: actureRotate, viewRotationMode: "overlay-parent", containerWidth: overlayWidth, containerHeight: overlayHeight, sizeInSvgUnits: true, minDisplaySizePx: PARTITION_PICKER_CHARGING_PILE_MIN_DISPLAY_PX })] }))) : null;
|
|
32251
32287
|
/** Map 模式:渲染 OverlayViewF,底图为 Google Maps */
|
|
32252
32288
|
if (isMapMode && mapRef) {
|
|
32253
32289
|
return (jsx(CommonContextProvider, { value: commonValue, children: jsx(SvgEditContextProvider, { value: svgEditValue, children: jsx(OverlayViewF, { map: mapRef, mapPaneName: "overlayMouseTarget", bounds: googleOverlay.bounds ?? undefined, rotate: actureRotate, zIndex: zIndex, onDraw: googleOverlay.handleOverlayDraw, children: jsxs("div", { className: `${styles.googleOverlayRoot} ${className || ''}`, style: containerStyle, onMouseLeave: () => setHoveredId(null), children: [mapSvgLayer, overlayLayers] }) }) }) }));
|
|
32254
32290
|
}
|
|
32255
32291
|
/** Standalone 模式:固定容器 + 网格底图 + 双层 SVG / HTML overlay */
|
|
32256
|
-
return (jsx(CommonContextProvider, { value: commonValue, children: jsx(SvgEditContextProvider, { value: svgEditValue, children: jsx("div", { ref: containerRef, className: `${styles.container} ${className || ''}`, "data-viewport-background": "true", style: containerStyle, onMouseLeave: () => setHoveredId(null), children: isLayersReady && (jsxs(Fragment, { children: [jsxs("div", { className: styles.mapSvgStack, children: [jsx(PartitionPickerGridSvg, { viewBox: gridViewBox, gridStyle:
|
|
32292
|
+
return (jsx(CommonContextProvider, { value: commonValue, children: jsx(SvgEditContextProvider, { value: svgEditValue, children: jsx("div", { ref: containerRef, className: `${styles.container} ${className || ''}`, "data-viewport-background": "true", style: containerStyle, onMouseLeave: () => setHoveredId(null), children: isLayersReady && (jsxs(Fragment, { children: [jsxs("div", { className: styles.mapSvgStack, children: [jsx(PartitionPickerGridSvg, { viewBox: gridViewBox, gridStyle: standaloneGridStyle }), mapSvgLayer] }), overlayLayers] })) }) }) }));
|
|
32257
32293
|
});
|
|
32258
32294
|
MowerPartitionPickerMap.displayName = 'MowerPartitionPickerMap';
|
|
32259
32295
|
|