@fleet-frontend/mower-maps 0.2.6-beta.2 → 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 +111 -78
- package/dist/index.js +111 -78
- package/dist/render/MowerPartitionPickerMap.d.ts +1 -1
- package/dist/render/MowerPartitionPickerMap.d.ts.map +1 -1
- package/dist/render/partitionPicker/constants.d.ts +34 -33
- package/dist/render/partitionPicker/constants.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/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,
|
|
@@ -31879,19 +31891,16 @@ function usePartitionLabelItems(mapData, viewBox, containerWidth, containerHeigh
|
|
|
31879
31891
|
]);
|
|
31880
31892
|
}
|
|
31881
31893
|
|
|
31882
|
-
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-
|
|
31883
|
-
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"};
|
|
31884
31896
|
styleInject(css_248z);
|
|
31885
31897
|
|
|
31886
31898
|
const PARTITION_BOUNDARY_ID_ATTR$1 = 'data-partition-boundary-id';
|
|
31887
|
-
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, }) => {
|
|
31888
31900
|
const style = data.style || {};
|
|
31889
31901
|
const boundaryId = Number(data.id);
|
|
31890
31902
|
const colors = boundaryColors;
|
|
31891
|
-
const strokePx = boundaryStrokePx ?? {
|
|
31892
|
-
default: PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX,
|
|
31893
|
-
emphasized: PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX,
|
|
31894
|
-
};
|
|
31903
|
+
const strokePx = boundaryStrokePx ?? { ...WEB_PARTITION_BOUNDARY_STROKE_PX };
|
|
31895
31904
|
const pointsString = useMemo(() => data.points.map((point) => `${point[0]},${point[1]}`).join(' '), [data.points]);
|
|
31896
31905
|
const fillColor = useMemo(() => {
|
|
31897
31906
|
if (isIsolated)
|
|
@@ -31914,31 +31923,16 @@ const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isI
|
|
|
31914
31923
|
return style.lineColor || colors.defaultStroke;
|
|
31915
31924
|
}, [colors, hovered, isIsolated, selected, style.lineColor]);
|
|
31916
31925
|
const strokeWidth = useMemo(() => {
|
|
31917
|
-
let baseWidth;
|
|
31918
|
-
let emphasized = false;
|
|
31919
|
-
if (isIsolated)
|
|
31920
|
-
baseWidth = colors.isolatedStrokeWidth;
|
|
31921
|
-
else if (selected) {
|
|
31922
|
-
emphasized = true;
|
|
31923
|
-
baseWidth = hovered ? colors.selectedHoverStrokeWidth : colors.selectedStrokeWidth;
|
|
31924
|
-
}
|
|
31925
|
-
else if (hovered) {
|
|
31926
|
-
emphasized = true;
|
|
31927
|
-
baseWidth = colors.hoverStrokeWidth;
|
|
31928
|
-
}
|
|
31929
|
-
else
|
|
31930
|
-
baseWidth = colors.defaultStrokeWidth;
|
|
31931
31926
|
const viewBox = { width: viewBoxWidth, height: viewBoxHeight };
|
|
31932
|
-
|
|
31927
|
+
const targetScreenStrokePx = !isIsolated && (selected || hovered) ? strokePx.selected : strokePx.default;
|
|
31928
|
+
return scaleStrokeWidthForViewBox(viewBox, {
|
|
31933
31929
|
containerWidth,
|
|
31934
31930
|
containerHeight,
|
|
31935
|
-
|
|
31931
|
+
targetScreenStrokePx,
|
|
31936
31932
|
});
|
|
31937
31933
|
}, [
|
|
31938
|
-
colors,
|
|
31939
31934
|
containerHeight,
|
|
31940
31935
|
containerWidth,
|
|
31941
|
-
fitViewBox,
|
|
31942
31936
|
hovered,
|
|
31943
31937
|
isIsolated,
|
|
31944
31938
|
selected,
|
|
@@ -31958,7 +31952,7 @@ const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isI
|
|
|
31958
31952
|
};
|
|
31959
31953
|
var SelectableBoundaryElement$1 = memo(SelectableBoundaryElement);
|
|
31960
31954
|
|
|
31961
|
-
const PartitionPickerSvg = ({ svgElementDatas, viewBox,
|
|
31955
|
+
const PartitionPickerSvg = ({ svgElementDatas, viewBox, containerWidth, containerHeight, mapRotation = 0, boundaryColors, boundaryStrokePx, isolatedBoundaryIds, selectedIds, hoveredId, onHoverChange, onBoundaryClick, }) => {
|
|
31962
31956
|
const boundaries = (svgElementDatas[DataType.BOUNDARY] || []);
|
|
31963
31957
|
const channels = (svgElementDatas[DataType.CHANNEL] || []);
|
|
31964
31958
|
const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
|
|
@@ -31970,7 +31964,7 @@ const PartitionPickerSvg = ({ svgElementDatas, viewBox, fitViewBox, containerWid
|
|
|
31970
31964
|
}, [mapRotation, viewBox.x, viewBox.y, viewBox.width, viewBox.height]);
|
|
31971
31965
|
const mapContent = (jsxs(Fragment, { children: [jsx(GElement, { type: "boundary", children: boundaries.map((item) => {
|
|
31972
31966
|
const boundaryId = Number(item.id);
|
|
31973
|
-
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));
|
|
31974
31968
|
}) }), jsxs(GElement, { type: "channel", children: [jsx(ChannelClipPath, {}), channels.map((item) => (jsx(ChannelElement, { data: item }, item.id)))] })] }));
|
|
31975
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) }));
|
|
31976
31970
|
};
|
|
@@ -32010,10 +32004,21 @@ const MapGridBackground = ({ viewBox, gridStyle }) => {
|
|
|
32010
32004
|
var MapGridBackground$1 = memo(MapGridBackground);
|
|
32011
32005
|
|
|
32012
32006
|
const PartitionPickerGridSvg = ({ viewBox, gridStyle }) => {
|
|
32013
|
-
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 }) }));
|
|
32014
32019
|
};
|
|
32015
32020
|
|
|
32016
|
-
const PartitionNameLabels = ({ items, selectedIds, labelStyles,
|
|
32021
|
+
const PartitionNameLabels = ({ items, selectedIds, labelStyles, platform = PlatformType.WEB, showSelectionOrder = false, rotation = 0, onHoverChange, onBoundaryClick, }) => {
|
|
32017
32022
|
const isWeb = platform === PlatformType.WEB;
|
|
32018
32023
|
const orderBadgeStyle = useMemo(() => ({
|
|
32019
32024
|
width: labelStyles.selectionOrderBadge.width,
|
|
@@ -32023,18 +32028,18 @@ const PartitionNameLabels = ({ items, selectedIds, labelStyles, labelMinScreenWi
|
|
|
32023
32028
|
color: labelStyles.selectionOrderBadge.color,
|
|
32024
32029
|
fontSize: `${labelStyles.selectionOrderBadge.fontSize}px`,
|
|
32025
32030
|
fontWeight: labelStyles.selectionOrderBadge.fontWeight,
|
|
32031
|
+
fontFamily: labelStyles.selectionOrderBadge.fontFamily,
|
|
32026
32032
|
lineHeight: labelStyles.selectionOrderBadge.lineHeight,
|
|
32027
32033
|
}), [labelStyles]);
|
|
32028
32034
|
return (jsx("div", { className: styles.labelsLayer, children: items.map((item) => {
|
|
32029
32035
|
const isIsolated = item.isIsolated === true;
|
|
32030
32036
|
const selected = !isIsolated && selectedIds.includes(item.id);
|
|
32031
32037
|
const selectionOrder = selected ? selectedIds.indexOf(item.id) + 1 : null;
|
|
32032
|
-
const isLargeEnough = item.screenWidthPx >
|
|
32038
|
+
const isLargeEnough = item.screenWidthPx > H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX;
|
|
32033
32039
|
// Web 始终展示名称;H5 按屏幕宽度决定
|
|
32034
32040
|
const showNameLabel = isWeb || isLargeEnough;
|
|
32035
32041
|
const showOrderBadge = showSelectionOrder && selected && selectionOrder != null;
|
|
32036
32042
|
const h5OrderOnly = !isWeb && showOrderBadge && !isLargeEnough;
|
|
32037
|
-
const h5OrderWithName = !isWeb && showOrderBadge && isLargeEnough;
|
|
32038
32043
|
if (!showNameLabel && !showOrderBadge && !isIsolated) {
|
|
32039
32044
|
return null;
|
|
32040
32045
|
}
|
|
@@ -32043,18 +32048,21 @@ const PartitionNameLabels = ({ items, selectedIds, labelStyles, labelMinScreenWi
|
|
|
32043
32048
|
styles.label,
|
|
32044
32049
|
!isWeb && showNameLabel ? styles.labelH5Wrap : '',
|
|
32045
32050
|
isIsolated ? styles.labelIsolated : '',
|
|
32046
|
-
isWeb && showOrderBadge ? styles.labelWithOrder : '',
|
|
32047
|
-
h5OrderWithName ? styles.labelWithOrderH5 : '',
|
|
32048
32051
|
h5OrderOnly ? styles.labelOrderOnly : '',
|
|
32049
32052
|
isIsolated ? styles.labelIsolatedLayout : '',
|
|
32050
32053
|
]
|
|
32051
32054
|
.filter(Boolean)
|
|
32052
32055
|
.join(' ');
|
|
32056
|
+
const showOrderWithName = showOrderBadge && showNameLabel;
|
|
32057
|
+
const selectionOrderGapPx = isWeb
|
|
32058
|
+
? WEB_SELECTION_ORDER_GAP_PX
|
|
32059
|
+
: H5_SELECTION_ORDER_GAP_PX;
|
|
32053
32060
|
const boundaryIdProps = isIsolated ? {} : { [PARTITION_BOUNDARY_ID_ATTR$1]: item.id };
|
|
32054
32061
|
return (jsxs("div", { className: labelClassName, style: {
|
|
32055
32062
|
left: `${item.leftPct}%`,
|
|
32056
32063
|
top: `${item.topPct}%`,
|
|
32057
32064
|
transform: `translate(-50%, -50%) rotate(${-rotation}deg)`,
|
|
32065
|
+
...(showOrderWithName ? { gap: selectionOrderGapPx } : undefined),
|
|
32058
32066
|
}, ...boundaryIdProps, onMouseEnter: isIsolated ? undefined : () => onHoverChange(item.id), onMouseLeave: isIsolated ? undefined : () => onHoverChange(null), onClick: onBoundaryClick && !isIsolated
|
|
32059
32067
|
? (event) => {
|
|
32060
32068
|
event.stopPropagation();
|
|
@@ -32069,7 +32077,7 @@ const DEFAULT_BACKGROUND = PARTITION_PICKER_GRID_BASE_COLOR;
|
|
|
32069
32077
|
const PARTITION_BOUNDARY_ID_ATTR = 'data-partition-boundary-id';
|
|
32070
32078
|
/** Map 模式下 OverlayViewF 默认 z-index */
|
|
32071
32079
|
const DEFAULT_OVERLAY_Z_INDEX = 100;
|
|
32072
|
-
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) => {
|
|
32073
32081
|
/**
|
|
32074
32082
|
* 是否为 Map 模式(传入 mapRef 时为 true):
|
|
32075
32083
|
* - true:Google Maps 底图 + OverlayViewF,平移/缩放/fit 由底图负责
|
|
@@ -32080,8 +32088,34 @@ const MowerPartitionPickerMap = forwardRef(({ mapJson, mapConfig, pickerStyleCon
|
|
|
32080
32088
|
const channelClipPathId = useMemo(() => createChannelClipPathId({ sn, reactId: reactInstanceId }), [sn, reactInstanceId]);
|
|
32081
32089
|
/** 外部 pickerStyleConfig 与内置 platform 默认值合并后的最终外观(地块/标签/网格等) */
|
|
32082
32090
|
const mergedPickerStyles = useMemo(() => resolvePartitionPickerStyles(platform, pickerStyleConfig), [pickerStyleConfig, platform]);
|
|
32083
|
-
/** Standalone
|
|
32084
|
-
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
|
+
]);
|
|
32085
32119
|
const mergedMapConfig = useMemo(() => merge$1({}, DEFAULT_STYLES, getPartitionPickerMapConfig(platform), mapConfig), [mapConfig, platform]);
|
|
32086
32120
|
const svgElementDatas = useMemo(() => UnifiedMapDataProcessor.processMapData(mapJson, mergedMapConfig) || {}, [mapJson, mergedMapConfig]);
|
|
32087
32121
|
/** 地图 Y 轴相对正北的偏移(度),与 MowerMapRenderer.originNorthRotate 一致 */
|
|
@@ -32156,7 +32190,7 @@ const MowerPartitionPickerMap = forwardRef(({ mapJson, mapConfig, pickerStyleCon
|
|
|
32156
32190
|
}
|
|
32157
32191
|
}, [isMapMode, isReady, onSizeChange, pxWidth, pxHeight]);
|
|
32158
32192
|
/** Standalone:平移/缩放 viewBox;Map 模式 enablePanZoom 关闭,仅保留 hook 结构 */
|
|
32159
|
-
const { viewBox: standaloneViewBox, gridViewBox,
|
|
32193
|
+
const { viewBox: standaloneViewBox, gridViewBox, resetView: standaloneResetView, fitToView: standaloneFitToView, } = useMapViewport({
|
|
32160
32194
|
mapJson,
|
|
32161
32195
|
containerRef,
|
|
32162
32196
|
width: pxWidth,
|
|
@@ -32171,7 +32205,6 @@ const MowerPartitionPickerMap = forwardRef(({ mapJson, mapConfig, pickerStyleCon
|
|
|
32171
32205
|
});
|
|
32172
32206
|
/** 按模式选取 viewBox / 尺寸 / 旋转 / 就绪状态(Map 与 Standalone 数据源不同) */
|
|
32173
32207
|
const viewBox = isMapMode ? googleOverlay.svgViewBox : standaloneViewBox;
|
|
32174
|
-
const fitViewBox = isMapMode ? googleOverlay.fitViewBox : standaloneFitViewBox;
|
|
32175
32208
|
const overlayWidth = isMapMode ? googleOverlay.overlayWidth : pxWidth;
|
|
32176
32209
|
const overlayHeight = isMapMode ? googleOverlay.overlayHeight : pxHeight;
|
|
32177
32210
|
const actureRotate = isMapMode ? googleOverlay.actureRotate : standaloneActureRotate;
|
|
@@ -32245,18 +32278,18 @@ const MowerPartitionPickerMap = forwardRef(({ mapJson, mapConfig, pickerStyleCon
|
|
|
32245
32278
|
...(isMapMode ? {} : layoutStyle),
|
|
32246
32279
|
}), [isMapMode, layoutStyle, resolvedBackgroundColor, style]);
|
|
32247
32280
|
/** 地块 + 通道 SVG;Map 模式不在 SVG 内旋转(由 OverlayViewF rotate 处理) */
|
|
32248
|
-
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;
|
|
32249
32282
|
/**
|
|
32250
32283
|
* 分区标签 + 充电桩 HTML 层。
|
|
32251
32284
|
* Map 模式:平铺于 overlay 根节点;Standalone:包在 mapOverlayLayer 内做 CSS 旋转。
|
|
32252
32285
|
*/
|
|
32253
|
-
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;
|
|
32254
32287
|
/** Map 模式:渲染 OverlayViewF,底图为 Google Maps */
|
|
32255
32288
|
if (isMapMode && mapRef) {
|
|
32256
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] }) }) }) }));
|
|
32257
32290
|
}
|
|
32258
32291
|
/** Standalone 模式:固定容器 + 网格底图 + 双层 SVG / HTML overlay */
|
|
32259
|
-
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] })) }) }) }));
|
|
32260
32293
|
});
|
|
32261
32294
|
MowerPartitionPickerMap.displayName = 'MowerPartitionPickerMap';
|
|
32262
32295
|
|