@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.js
CHANGED
|
@@ -23568,15 +23568,13 @@ function computePolygonScreenWidthPx(points, viewBox, containerWidth, containerH
|
|
|
23568
23568
|
const scale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
|
|
23569
23569
|
return mapWidth * scale;
|
|
23570
23570
|
}
|
|
23571
|
-
function scaleStrokeWidthForViewBox(
|
|
23572
|
-
const { containerWidth, containerHeight,
|
|
23571
|
+
function scaleStrokeWidthForViewBox(viewBox, options) {
|
|
23572
|
+
const { containerWidth, containerHeight, targetScreenStrokePx = 2 } = options;
|
|
23573
23573
|
const meetScale = getViewBoxMeetScale(viewBox, containerWidth, containerHeight);
|
|
23574
|
-
|
|
23575
|
-
|
|
23576
|
-
return baseStrokeWidth;
|
|
23574
|
+
if (meetScale <= 0 || !Number.isFinite(targetScreenStrokePx)) {
|
|
23575
|
+
return targetScreenStrokePx;
|
|
23577
23576
|
}
|
|
23578
|
-
|
|
23579
|
-
return targetScreenPx / meetScale;
|
|
23577
|
+
return targetScreenStrokePx / meetScale;
|
|
23580
23578
|
}
|
|
23581
23579
|
/** 屏幕拖拽像素 → viewBox 坐标增量(与 mapPointToContainerPercent 互逆,供 applyPan 使用) */
|
|
23582
23580
|
function containerDeltaToViewBoxDelta(deltaXPx, deltaYPx, viewBox, containerWidth, containerHeight, mapRotationDeg = 0) {
|
|
@@ -30864,15 +30862,27 @@ const BoundarySvgRender = React.memo(({ mapJson, unStructMapData, id, maxWidth =
|
|
|
30864
30862
|
});
|
|
30865
30863
|
|
|
30866
30864
|
/** ChannelClipPath 等内容裁剪使用的 SVG 坐标边距(与用户传入的屏幕 padding 无关) */
|
|
30867
|
-
const PARTITION_PICKER_CONTENT_CLIP_PADDING =
|
|
30865
|
+
const PARTITION_PICKER_CONTENT_CLIP_PADDING = 0;
|
|
30868
30866
|
/** H5:子区域屏幕宽度超过该值才展示名称标签(px) */
|
|
30869
|
-
const H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX =
|
|
30867
|
+
const H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX = 92;
|
|
30870
30868
|
/** H5:名称气泡总宽度(px) */
|
|
30871
|
-
const H5_PARTITION_LABEL_WIDTH_PX =
|
|
30872
|
-
/**
|
|
30873
|
-
const
|
|
30874
|
-
/**
|
|
30875
|
-
const
|
|
30869
|
+
const H5_PARTITION_LABEL_WIDTH_PX = 92;
|
|
30870
|
+
/** Web:序号徽章与名称标签间距(px) */
|
|
30871
|
+
const WEB_SELECTION_ORDER_GAP_PX = 8;
|
|
30872
|
+
/** H5:序号徽章与名称标签间距(px) */
|
|
30873
|
+
const H5_SELECTION_ORDER_GAP_PX = 4;
|
|
30874
|
+
/** Standalone:充电桩图标最小屏幕尺寸(px),缩小全图 fit 时避免过小;放大时随 viewBox 同比缩放 */
|
|
30875
|
+
const PARTITION_PICKER_CHARGING_PILE_MIN_DISPLAY_PX = 16;
|
|
30876
|
+
/** Web 地块描边屏幕像素宽度:未选中 2px,选中 3px */
|
|
30877
|
+
const WEB_PARTITION_BOUNDARY_STROKE_PX = {
|
|
30878
|
+
default: 2,
|
|
30879
|
+
selected: 3,
|
|
30880
|
+
};
|
|
30881
|
+
/** H5 地块描边屏幕像素宽度:选中与否均为 1px */
|
|
30882
|
+
const H5_PARTITION_BOUNDARY_STROKE_PX = {
|
|
30883
|
+
default: 1,
|
|
30884
|
+
selected: 1,
|
|
30885
|
+
};
|
|
30876
30886
|
/**
|
|
30877
30887
|
* Figma bg/mapping 地图网格背景(Standalone SVG 层)
|
|
30878
30888
|
* @see https://www.figma.com/design/j0DdUYf8VFkXQ8ikkA6ZzP — node 20490:84886
|
|
@@ -30880,17 +30890,17 @@ const PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX = 2.5;
|
|
|
30880
30890
|
/** 网格区域底色,也用于容器 letterbox 留白 */
|
|
30881
30891
|
const PARTITION_PICKER_GRID_BASE_COLOR = '#E3E5EB';
|
|
30882
30892
|
/** 网格单元边长(SVG 地图坐标,与 viewBox 一致;zoom 时间距同比缩放) */
|
|
30883
|
-
const PARTITION_PICKER_GRID_TILE_SIZE =
|
|
30893
|
+
const PARTITION_PICKER_GRID_TILE_SIZE = 10;
|
|
30884
30894
|
/** 网格线宽(地图坐标;随 zoom 同比缩放,不做屏幕像素恒定) */
|
|
30885
|
-
const PARTITION_PICKER_GRID_LINE_WIDTH =
|
|
30895
|
+
const PARTITION_PICKER_GRID_LINE_WIDTH = 0.5;
|
|
30886
30896
|
/** 网格交点圆点半径(地图坐标) */
|
|
30887
|
-
const PARTITION_PICKER_GRID_DOT_RADIUS =
|
|
30897
|
+
const PARTITION_PICKER_GRID_DOT_RADIUS = 0.5;
|
|
30888
30898
|
/** 网格层整体不透明度(Figma 约 80%) */
|
|
30889
|
-
const PARTITION_PICKER_GRID_OPACITY = 0.
|
|
30899
|
+
const PARTITION_PICKER_GRID_OPACITY = 0.4;
|
|
30890
30900
|
/** 网格线与交点颜色 */
|
|
30891
30901
|
const PARTITION_PICKER_GRID_STROKE = '#FFFFFF';
|
|
30892
30902
|
/** 可见范围内交点超过该数量时跳过圆点,仅保留网格线(缩小视野时减轻 DOM 压力) */
|
|
30893
|
-
const PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS =
|
|
30903
|
+
const PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS = 2000;
|
|
30894
30904
|
/**
|
|
30895
30905
|
* 分区选择地图专用样式
|
|
30896
30906
|
*
|
|
@@ -30915,37 +30925,27 @@ const PARTITION_PICKER_MAP_CONFIG = {
|
|
|
30915
30925
|
const PARTITION_PICKER_COLORS_WEB = {
|
|
30916
30926
|
defaultFill: 'rgba(222, 225, 231, 1)',
|
|
30917
30927
|
defaultStroke: 'rgba(132, 152, 169, 1)',
|
|
30918
|
-
defaultStrokeWidth: 2,
|
|
30919
30928
|
hoverFill: 'rgba(211, 216, 226, 1)',
|
|
30920
30929
|
hoverStroke: 'rgba(132, 152, 169, 1)',
|
|
30921
|
-
hoverStrokeWidth: 3,
|
|
30922
30930
|
selectedFill: 'rgba(202, 214, 238, 1)',
|
|
30923
30931
|
selectedStroke: 'rgba(132, 152, 169, 1)',
|
|
30924
|
-
selectedStrokeWidth: 3,
|
|
30925
30932
|
selectedHoverFill: 'rgba(202, 214, 238, 1)',
|
|
30926
30933
|
selectedHoverStroke: 'rgba(132, 152, 169, 1)',
|
|
30927
|
-
selectedHoverStrokeWidth: 3,
|
|
30928
30934
|
isolatedFill: 'rgba(225, 227, 233, 1)',
|
|
30929
30935
|
isolatedStroke: 'rgba(189, 198, 208, 1)',
|
|
30930
|
-
isolatedStrokeWidth: 2,
|
|
30931
30936
|
};
|
|
30932
30937
|
/** H5 端地块配色 */
|
|
30933
30938
|
const PARTITION_PICKER_COLORS_H5 = {
|
|
30934
30939
|
defaultFill: 'rgba(222, 225, 231, 1)',
|
|
30935
30940
|
defaultStroke: 'rgba(132, 152, 169, 1)',
|
|
30936
|
-
defaultStrokeWidth: 1,
|
|
30937
30941
|
hoverFill: 'rgba(222, 225, 231, 1)',
|
|
30938
30942
|
hoverStroke: 'rgba(132, 152, 169, 1)',
|
|
30939
|
-
hoverStrokeWidth: 1,
|
|
30940
30943
|
selectedFill: 'rgba(202, 214, 238, 1)',
|
|
30941
30944
|
selectedStroke: 'rgba(132, 152, 169, 1)',
|
|
30942
|
-
selectedStrokeWidth: 1,
|
|
30943
30945
|
selectedHoverFill: 'rgba(202, 214, 238, 1)',
|
|
30944
30946
|
selectedHoverStroke: 'rgba(132, 152, 169, 1)',
|
|
30945
|
-
selectedHoverStrokeWidth: 1,
|
|
30946
30947
|
isolatedFill: 'rgba(225, 227, 233, 1)',
|
|
30947
30948
|
isolatedStroke: 'rgba(189, 198, 208, 1)',
|
|
30948
|
-
isolatedStrokeWidth: 1,
|
|
30949
30949
|
};
|
|
30950
30950
|
function getPartitionPickerMapConfig(platform = exports.PlatformType.WEB) {
|
|
30951
30951
|
return platform === exports.PlatformType.WEB
|
|
@@ -30955,6 +30955,11 @@ function getPartitionPickerMapConfig(platform = exports.PlatformType.WEB) {
|
|
|
30955
30955
|
function getPartitionPickerColors(platform = exports.PlatformType.WEB) {
|
|
30956
30956
|
return platform === exports.PlatformType.WEB ? PARTITION_PICKER_COLORS_WEB : PARTITION_PICKER_COLORS_H5;
|
|
30957
30957
|
}
|
|
30958
|
+
function getPartitionPickerBoundaryStrokePx(platform = exports.PlatformType.WEB) {
|
|
30959
|
+
return platform === exports.PlatformType.WEB
|
|
30960
|
+
? { ...WEB_PARTITION_BOUNDARY_STROKE_PX }
|
|
30961
|
+
: { ...H5_PARTITION_BOUNDARY_STROKE_PX };
|
|
30962
|
+
}
|
|
30958
30963
|
/** Web 分区名气泡(Figma「地块名称」/ 选中区域) */
|
|
30959
30964
|
const PARTITION_PICKER_LABEL_STYLES_WEB = {
|
|
30960
30965
|
default: {
|
|
@@ -30995,6 +31000,7 @@ const PARTITION_PICKER_LABEL_STYLES_H5 = {
|
|
|
30995
31000
|
fontWeight: 400,
|
|
30996
31001
|
padding: '6px',
|
|
30997
31002
|
width: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
|
|
31003
|
+
maxWidth: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
|
|
30998
31004
|
borderRadius: 100,
|
|
30999
31005
|
boxSizing: 'border-box',
|
|
31000
31006
|
},
|
|
@@ -31005,6 +31011,7 @@ const PARTITION_PICKER_LABEL_STYLES_H5 = {
|
|
|
31005
31011
|
fontWeight: 400,
|
|
31006
31012
|
padding: '6px',
|
|
31007
31013
|
width: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
|
|
31014
|
+
maxWidth: `${H5_PARTITION_LABEL_WIDTH_PX}px`,
|
|
31008
31015
|
borderRadius: 100,
|
|
31009
31016
|
boxSizing: 'border-box',
|
|
31010
31017
|
},
|
|
@@ -31042,10 +31049,6 @@ const DEFAULT_PARTITION_PICKER_GRID_STYLE = {
|
|
|
31042
31049
|
opacity: PARTITION_PICKER_GRID_OPACITY,
|
|
31043
31050
|
maxIntersectionDots: PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS,
|
|
31044
31051
|
};
|
|
31045
|
-
const DEFAULT_PARTITION_PICKER_BOUNDARY_STROKE_PX = {
|
|
31046
|
-
default: PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX,
|
|
31047
|
-
emphasized: PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX,
|
|
31048
|
-
};
|
|
31049
31052
|
/**
|
|
31050
31053
|
* 将 platform 内置默认值与外部 pickerStyleConfig 深度合并。
|
|
31051
31054
|
* 调用方只需覆盖变化的字段,无需改组件源码。
|
|
@@ -31062,8 +31065,7 @@ function resolvePartitionPickerStyles(platform = exports.PlatformType.WEB, confi
|
|
|
31062
31065
|
}
|
|
31063
31066
|
: baseLabels,
|
|
31064
31067
|
grid: merge$1({}, DEFAULT_PARTITION_PICKER_GRID_STYLE, config?.grid),
|
|
31065
|
-
boundaryStrokePx: merge$1({},
|
|
31066
|
-
labelMinScreenWidthPx: config?.labelMinScreenWidthPx ?? H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX,
|
|
31068
|
+
boundaryStrokePx: merge$1({}, getPartitionPickerBoundaryStrokePx(platform), config?.boundaryStrokePx),
|
|
31067
31069
|
};
|
|
31068
31070
|
}
|
|
31069
31071
|
|
|
@@ -31077,7 +31079,7 @@ function resolvePartitionPickerStyles(platform = exports.PlatformType.WEB, confi
|
|
|
31077
31079
|
*
|
|
31078
31080
|
* 平移可在地块/分区名等任意区域发起;仅当位移小于阈值时才视为点击
|
|
31079
31081
|
*/
|
|
31080
|
-
function useMapViewport({ mapJson, containerRef: externalContainerRef, width, height, padding, minZoom = 0.5, maxZoom =
|
|
31082
|
+
function useMapViewport({ mapJson, containerRef: externalContainerRef, width, height, padding, minZoom = 0.5, maxZoom = 3, enablePanZoom = true, refitOnResize = true, onViewportTap, mapRotationDeg = 0, }) {
|
|
31081
31083
|
/** 地图容器 DOM,用于绑定 wheel/pointer/touch 事件 */
|
|
31082
31084
|
const internalContainerRef = React.useRef(null);
|
|
31083
31085
|
const containerRef = externalContainerRef ?? internalContainerRef;
|
|
@@ -31496,7 +31498,17 @@ function useMapViewport({ mapJson, containerRef: externalContainerRef, width, he
|
|
|
31496
31498
|
window.removeEventListener('mouseup', handleWindowPointerUp);
|
|
31497
31499
|
window.removeEventListener('blur', handleWindowPointerUp);
|
|
31498
31500
|
};
|
|
31499
|
-
}, [
|
|
31501
|
+
}, [
|
|
31502
|
+
applyPan,
|
|
31503
|
+
applyZoom,
|
|
31504
|
+
clearPanState,
|
|
31505
|
+
enablePanZoom,
|
|
31506
|
+
height,
|
|
31507
|
+
maxZoom,
|
|
31508
|
+
minZoom,
|
|
31509
|
+
scheduleViewBox,
|
|
31510
|
+
width,
|
|
31511
|
+
]);
|
|
31500
31512
|
return {
|
|
31501
31513
|
/** 绑定到地图外层容器的 ref */
|
|
31502
31514
|
containerRef,
|
|
@@ -31899,19 +31911,16 @@ function usePartitionLabelItems(mapData, viewBox, containerWidth, containerHeigh
|
|
|
31899
31911
|
]);
|
|
31900
31912
|
}
|
|
31901
31913
|
|
|
31902
|
-
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-
|
|
31903
|
-
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","
|
|
31914
|
+
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}";
|
|
31915
|
+
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"};
|
|
31904
31916
|
styleInject(css_248z);
|
|
31905
31917
|
|
|
31906
31918
|
const PARTITION_BOUNDARY_ID_ATTR$1 = 'data-partition-boundary-id';
|
|
31907
|
-
const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isIsolated = false, selected, hovered, viewBoxWidth, viewBoxHeight,
|
|
31919
|
+
const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isIsolated = false, selected, hovered, viewBoxWidth, viewBoxHeight, containerWidth, containerHeight, onHoverChange, onBoundaryClick, }) => {
|
|
31908
31920
|
const style = data.style || {};
|
|
31909
31921
|
const boundaryId = Number(data.id);
|
|
31910
31922
|
const colors = boundaryColors;
|
|
31911
|
-
const strokePx = boundaryStrokePx ?? {
|
|
31912
|
-
default: PARTITION_BOUNDARY_TARGET_SCREEN_STROKE_PX,
|
|
31913
|
-
emphasized: PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX,
|
|
31914
|
-
};
|
|
31923
|
+
const strokePx = boundaryStrokePx ?? { ...WEB_PARTITION_BOUNDARY_STROKE_PX };
|
|
31915
31924
|
const pointsString = React.useMemo(() => data.points.map((point) => `${point[0]},${point[1]}`).join(' '), [data.points]);
|
|
31916
31925
|
const fillColor = React.useMemo(() => {
|
|
31917
31926
|
if (isIsolated)
|
|
@@ -31934,31 +31943,16 @@ const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isI
|
|
|
31934
31943
|
return style.lineColor || colors.defaultStroke;
|
|
31935
31944
|
}, [colors, hovered, isIsolated, selected, style.lineColor]);
|
|
31936
31945
|
const strokeWidth = React.useMemo(() => {
|
|
31937
|
-
let baseWidth;
|
|
31938
|
-
let emphasized = false;
|
|
31939
|
-
if (isIsolated)
|
|
31940
|
-
baseWidth = colors.isolatedStrokeWidth;
|
|
31941
|
-
else if (selected) {
|
|
31942
|
-
emphasized = true;
|
|
31943
|
-
baseWidth = hovered ? colors.selectedHoverStrokeWidth : colors.selectedStrokeWidth;
|
|
31944
|
-
}
|
|
31945
|
-
else if (hovered) {
|
|
31946
|
-
emphasized = true;
|
|
31947
|
-
baseWidth = colors.hoverStrokeWidth;
|
|
31948
|
-
}
|
|
31949
|
-
else
|
|
31950
|
-
baseWidth = colors.defaultStrokeWidth;
|
|
31951
31946
|
const viewBox = { width: viewBoxWidth, height: viewBoxHeight };
|
|
31952
|
-
|
|
31947
|
+
const targetScreenStrokePx = !isIsolated && (selected || hovered) ? strokePx.selected : strokePx.default;
|
|
31948
|
+
return scaleStrokeWidthForViewBox(viewBox, {
|
|
31953
31949
|
containerWidth,
|
|
31954
31950
|
containerHeight,
|
|
31955
|
-
|
|
31951
|
+
targetScreenStrokePx,
|
|
31956
31952
|
});
|
|
31957
31953
|
}, [
|
|
31958
|
-
colors,
|
|
31959
31954
|
containerHeight,
|
|
31960
31955
|
containerWidth,
|
|
31961
|
-
fitViewBox,
|
|
31962
31956
|
hovered,
|
|
31963
31957
|
isIsolated,
|
|
31964
31958
|
selected,
|
|
@@ -31978,7 +31972,7 @@ const SelectableBoundaryElement = ({ data, boundaryColors, boundaryStrokePx, isI
|
|
|
31978
31972
|
};
|
|
31979
31973
|
var SelectableBoundaryElement$1 = React.memo(SelectableBoundaryElement);
|
|
31980
31974
|
|
|
31981
|
-
const PartitionPickerSvg = ({ svgElementDatas, viewBox,
|
|
31975
|
+
const PartitionPickerSvg = ({ svgElementDatas, viewBox, containerWidth, containerHeight, mapRotation = 0, boundaryColors, boundaryStrokePx, isolatedBoundaryIds, selectedIds, hoveredId, onHoverChange, onBoundaryClick, }) => {
|
|
31982
31976
|
const boundaries = (svgElementDatas[exports.DataType.BOUNDARY] || []);
|
|
31983
31977
|
const channels = (svgElementDatas[exports.DataType.CHANNEL] || []);
|
|
31984
31978
|
const selectedIdSet = React.useMemo(() => new Set(selectedIds), [selectedIds]);
|
|
@@ -31990,7 +31984,7 @@ const PartitionPickerSvg = ({ svgElementDatas, viewBox, fitViewBox, containerWid
|
|
|
31990
31984
|
}, [mapRotation, viewBox.x, viewBox.y, viewBox.width, viewBox.height]);
|
|
31991
31985
|
const mapContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(GElement, { type: "boundary", children: boundaries.map((item) => {
|
|
31992
31986
|
const boundaryId = Number(item.id);
|
|
31993
|
-
return (jsxRuntime.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,
|
|
31987
|
+
return (jsxRuntime.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));
|
|
31994
31988
|
}) }), jsxRuntime.jsxs(GElement, { type: "channel", children: [jsxRuntime.jsx(ChannelClipPath, {}), channels.map((item) => (jsxRuntime.jsx(ChannelElement, { data: item }, item.id)))] })] }));
|
|
31995
31989
|
return (jsxRuntime.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 ? (jsxRuntime.jsx("g", { transform: mapContentTransform, children: mapContent })) : (mapContent) }));
|
|
31996
31990
|
};
|
|
@@ -32030,10 +32024,21 @@ const MapGridBackground = ({ viewBox, gridStyle }) => {
|
|
|
32030
32024
|
var MapGridBackground$1 = React.memo(MapGridBackground);
|
|
32031
32025
|
|
|
32032
32026
|
const PartitionPickerGridSvg = ({ viewBox, gridStyle }) => {
|
|
32033
|
-
return (jsxRuntime.jsx("svg", { className: styles.gridSvg, "data-viewport-background": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: viewBoxToString(viewBox), width: "100%", height: "100%",
|
|
32027
|
+
return (jsxRuntime.jsx("svg", { className: styles.gridSvg, "data-viewport-background": "true", xmlns: "http://www.w3.org/2000/svg", viewBox: viewBoxToString(viewBox), width: "100%", height: "100%",
|
|
32028
|
+
// 设置缩放的规则
|
|
32029
|
+
//等比缩放 viewBox 内容,使其完整落在容器内;
|
|
32030
|
+
//水平、垂直都居中;
|
|
32031
|
+
//比例不一致时,上下或左右留空(letterboxing),不裁切、不拉伸变形。
|
|
32032
|
+
preserveAspectRatio: "xMidYMid meet",
|
|
32033
|
+
/**
|
|
32034
|
+
* 控制浏览器如何绘制路径/线条:
|
|
32035
|
+
* geometricPrecision:优先几何精度,线条更平滑、对齐更稳,缩放时不易发虚或抖动。
|
|
32036
|
+
* 网格是大量细线,用这个属性能让缩放/平移时网格更清晰稳定。
|
|
32037
|
+
*/
|
|
32038
|
+
shapeRendering: "geometricPrecision", "aria-hidden": true, children: jsxRuntime.jsx(MapGridBackground$1, { viewBox: viewBox, gridStyle: gridStyle }) }));
|
|
32034
32039
|
};
|
|
32035
32040
|
|
|
32036
|
-
const PartitionNameLabels = ({ items, selectedIds, labelStyles,
|
|
32041
|
+
const PartitionNameLabels = ({ items, selectedIds, labelStyles, platform = exports.PlatformType.WEB, showSelectionOrder = false, rotation = 0, onHoverChange, onBoundaryClick, }) => {
|
|
32037
32042
|
const isWeb = platform === exports.PlatformType.WEB;
|
|
32038
32043
|
const orderBadgeStyle = React.useMemo(() => ({
|
|
32039
32044
|
width: labelStyles.selectionOrderBadge.width,
|
|
@@ -32043,18 +32048,18 @@ const PartitionNameLabels = ({ items, selectedIds, labelStyles, labelMinScreenWi
|
|
|
32043
32048
|
color: labelStyles.selectionOrderBadge.color,
|
|
32044
32049
|
fontSize: `${labelStyles.selectionOrderBadge.fontSize}px`,
|
|
32045
32050
|
fontWeight: labelStyles.selectionOrderBadge.fontWeight,
|
|
32051
|
+
fontFamily: labelStyles.selectionOrderBadge.fontFamily,
|
|
32046
32052
|
lineHeight: labelStyles.selectionOrderBadge.lineHeight,
|
|
32047
32053
|
}), [labelStyles]);
|
|
32048
32054
|
return (jsxRuntime.jsx("div", { className: styles.labelsLayer, children: items.map((item) => {
|
|
32049
32055
|
const isIsolated = item.isIsolated === true;
|
|
32050
32056
|
const selected = !isIsolated && selectedIds.includes(item.id);
|
|
32051
32057
|
const selectionOrder = selected ? selectedIds.indexOf(item.id) + 1 : null;
|
|
32052
|
-
const isLargeEnough = item.screenWidthPx >
|
|
32058
|
+
const isLargeEnough = item.screenWidthPx > H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX;
|
|
32053
32059
|
// Web 始终展示名称;H5 按屏幕宽度决定
|
|
32054
32060
|
const showNameLabel = isWeb || isLargeEnough;
|
|
32055
32061
|
const showOrderBadge = showSelectionOrder && selected && selectionOrder != null;
|
|
32056
32062
|
const h5OrderOnly = !isWeb && showOrderBadge && !isLargeEnough;
|
|
32057
|
-
const h5OrderWithName = !isWeb && showOrderBadge && isLargeEnough;
|
|
32058
32063
|
if (!showNameLabel && !showOrderBadge && !isIsolated) {
|
|
32059
32064
|
return null;
|
|
32060
32065
|
}
|
|
@@ -32063,18 +32068,21 @@ const PartitionNameLabels = ({ items, selectedIds, labelStyles, labelMinScreenWi
|
|
|
32063
32068
|
styles.label,
|
|
32064
32069
|
!isWeb && showNameLabel ? styles.labelH5Wrap : '',
|
|
32065
32070
|
isIsolated ? styles.labelIsolated : '',
|
|
32066
|
-
isWeb && showOrderBadge ? styles.labelWithOrder : '',
|
|
32067
|
-
h5OrderWithName ? styles.labelWithOrderH5 : '',
|
|
32068
32071
|
h5OrderOnly ? styles.labelOrderOnly : '',
|
|
32069
32072
|
isIsolated ? styles.labelIsolatedLayout : '',
|
|
32070
32073
|
]
|
|
32071
32074
|
.filter(Boolean)
|
|
32072
32075
|
.join(' ');
|
|
32076
|
+
const showOrderWithName = showOrderBadge && showNameLabel;
|
|
32077
|
+
const selectionOrderGapPx = isWeb
|
|
32078
|
+
? WEB_SELECTION_ORDER_GAP_PX
|
|
32079
|
+
: H5_SELECTION_ORDER_GAP_PX;
|
|
32073
32080
|
const boundaryIdProps = isIsolated ? {} : { [PARTITION_BOUNDARY_ID_ATTR$1]: item.id };
|
|
32074
32081
|
return (jsxRuntime.jsxs("div", { className: labelClassName, style: {
|
|
32075
32082
|
left: `${item.leftPct}%`,
|
|
32076
32083
|
top: `${item.topPct}%`,
|
|
32077
32084
|
transform: `translate(-50%, -50%) rotate(${-rotation}deg)`,
|
|
32085
|
+
...(showOrderWithName ? { gap: selectionOrderGapPx } : undefined),
|
|
32078
32086
|
}, ...boundaryIdProps, onMouseEnter: isIsolated ? undefined : () => onHoverChange(item.id), onMouseLeave: isIsolated ? undefined : () => onHoverChange(null), onClick: onBoundaryClick && !isIsolated
|
|
32079
32087
|
? (event) => {
|
|
32080
32088
|
event.stopPropagation();
|
|
@@ -32089,7 +32097,7 @@ const DEFAULT_BACKGROUND = PARTITION_PICKER_GRID_BASE_COLOR;
|
|
|
32089
32097
|
const PARTITION_BOUNDARY_ID_ATTR = 'data-partition-boundary-id';
|
|
32090
32098
|
/** Map 模式下 OverlayViewF 默认 z-index */
|
|
32091
32099
|
const DEFAULT_OVERLAY_Z_INDEX = 100;
|
|
32092
|
-
const MowerPartitionPickerMap = React.forwardRef(({ mapJson, mapConfig, pickerStyleConfig, sn = '', platform = exports.PlatformType.WEB, width, height, padding =
|
|
32100
|
+
const MowerPartitionPickerMap = React.forwardRef(({ mapJson, mapConfig, pickerStyleConfig, sn = '', platform = exports.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) => {
|
|
32093
32101
|
/**
|
|
32094
32102
|
* 是否为 Map 模式(传入 mapRef 时为 true):
|
|
32095
32103
|
* - true:Google Maps 底图 + OverlayViewF,平移/缩放/fit 由底图负责
|
|
@@ -32100,8 +32108,34 @@ const MowerPartitionPickerMap = React.forwardRef(({ mapJson, mapConfig, pickerSt
|
|
|
32100
32108
|
const channelClipPathId = React.useMemo(() => createChannelClipPathId({ sn, reactId: reactInstanceId }), [sn, reactInstanceId]);
|
|
32101
32109
|
/** 外部 pickerStyleConfig 与内置 platform 默认值合并后的最终外观(地块/标签/网格等) */
|
|
32102
32110
|
const mergedPickerStyles = React.useMemo(() => resolvePartitionPickerStyles(platform, pickerStyleConfig), [pickerStyleConfig, platform]);
|
|
32103
|
-
/** Standalone
|
|
32104
|
-
const resolvedBackgroundColor =
|
|
32111
|
+
/** Standalone 容器背景与 grid.baseColor 对齐(合并后的最终值) */
|
|
32112
|
+
const resolvedBackgroundColor = React.useMemo(() => {
|
|
32113
|
+
if (isMapMode)
|
|
32114
|
+
return undefined;
|
|
32115
|
+
if (pickerStyleConfig?.grid?.baseColor != null) {
|
|
32116
|
+
return mergedPickerStyles.grid.baseColor;
|
|
32117
|
+
}
|
|
32118
|
+
return backgroundColor ?? mergedPickerStyles.grid.baseColor;
|
|
32119
|
+
}, [
|
|
32120
|
+
backgroundColor,
|
|
32121
|
+
isMapMode,
|
|
32122
|
+
mergedPickerStyles.grid.baseColor,
|
|
32123
|
+
pickerStyleConfig?.grid?.baseColor,
|
|
32124
|
+
]);
|
|
32125
|
+
/** Standalone 网格层:backgroundColor 未显式指定 grid.baseColor 时与容器背景同步 */
|
|
32126
|
+
const standaloneGridStyle = React.useMemo(() => {
|
|
32127
|
+
if (pickerStyleConfig?.grid?.baseColor != null) {
|
|
32128
|
+
return mergedPickerStyles.grid;
|
|
32129
|
+
}
|
|
32130
|
+
if (backgroundColor != null) {
|
|
32131
|
+
return { ...mergedPickerStyles.grid, baseColor: backgroundColor };
|
|
32132
|
+
}
|
|
32133
|
+
return mergedPickerStyles.grid;
|
|
32134
|
+
}, [
|
|
32135
|
+
backgroundColor,
|
|
32136
|
+
mergedPickerStyles.grid,
|
|
32137
|
+
pickerStyleConfig?.grid?.baseColor,
|
|
32138
|
+
]);
|
|
32105
32139
|
const mergedMapConfig = React.useMemo(() => merge$1({}, DEFAULT_STYLES, getPartitionPickerMapConfig(platform), mapConfig), [mapConfig, platform]);
|
|
32106
32140
|
const svgElementDatas = React.useMemo(() => UnifiedMapDataProcessor.processMapData(mapJson, mergedMapConfig) || {}, [mapJson, mergedMapConfig]);
|
|
32107
32141
|
/** 地图 Y 轴相对正北的偏移(度),与 MowerMapRenderer.originNorthRotate 一致 */
|
|
@@ -32176,7 +32210,7 @@ const MowerPartitionPickerMap = React.forwardRef(({ mapJson, mapConfig, pickerSt
|
|
|
32176
32210
|
}
|
|
32177
32211
|
}, [isMapMode, isReady, onSizeChange, pxWidth, pxHeight]);
|
|
32178
32212
|
/** Standalone:平移/缩放 viewBox;Map 模式 enablePanZoom 关闭,仅保留 hook 结构 */
|
|
32179
|
-
const { viewBox: standaloneViewBox, gridViewBox,
|
|
32213
|
+
const { viewBox: standaloneViewBox, gridViewBox, resetView: standaloneResetView, fitToView: standaloneFitToView, } = useMapViewport({
|
|
32180
32214
|
mapJson,
|
|
32181
32215
|
containerRef,
|
|
32182
32216
|
width: pxWidth,
|
|
@@ -32191,7 +32225,6 @@ const MowerPartitionPickerMap = React.forwardRef(({ mapJson, mapConfig, pickerSt
|
|
|
32191
32225
|
});
|
|
32192
32226
|
/** 按模式选取 viewBox / 尺寸 / 旋转 / 就绪状态(Map 与 Standalone 数据源不同) */
|
|
32193
32227
|
const viewBox = isMapMode ? googleOverlay.svgViewBox : standaloneViewBox;
|
|
32194
|
-
const fitViewBox = isMapMode ? googleOverlay.fitViewBox : standaloneFitViewBox;
|
|
32195
32228
|
const overlayWidth = isMapMode ? googleOverlay.overlayWidth : pxWidth;
|
|
32196
32229
|
const overlayHeight = isMapMode ? googleOverlay.overlayHeight : pxHeight;
|
|
32197
32230
|
const actureRotate = isMapMode ? googleOverlay.actureRotate : standaloneActureRotate;
|
|
@@ -32265,18 +32298,18 @@ const MowerPartitionPickerMap = React.forwardRef(({ mapJson, mapConfig, pickerSt
|
|
|
32265
32298
|
...(isMapMode ? {} : layoutStyle),
|
|
32266
32299
|
}), [isMapMode, layoutStyle, resolvedBackgroundColor, style]);
|
|
32267
32300
|
/** 地块 + 通道 SVG;Map 模式不在 SVG 内旋转(由 OverlayViewF rotate 处理) */
|
|
32268
|
-
const mapSvgLayer = viewBox && isLayersReady ? (jsxRuntime.jsx(PartitionPickerSvg, { svgElementDatas: svgElementDatas, viewBox: viewBox,
|
|
32301
|
+
const mapSvgLayer = viewBox && isLayersReady ? (jsxRuntime.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;
|
|
32269
32302
|
/**
|
|
32270
32303
|
* 分区标签 + 充电桩 HTML 层。
|
|
32271
32304
|
* Map 模式:平铺于 overlay 根节点;Standalone:包在 mapOverlayLayer 内做 CSS 旋转。
|
|
32272
32305
|
*/
|
|
32273
|
-
const overlayLayers = viewBox && isLayersReady ? (isMapMode ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels,
|
|
32306
|
+
const overlayLayers = viewBox && isLayersReady ? (isMapMode ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels, platform: platform, showSelectionOrder: showSelectionOrder, rotation: actureRotate, onHoverChange: handleHoverChange, onBoundaryClick: handleBoundaryClick }), jsxRuntime.jsx(CharginPile, { viewBox: viewBox, rotation: actureRotate })] })) : (jsxRuntime.jsxs("div", { className: styles.mapOverlayLayer, style: mapOverlayLayerStyle, children: [jsxRuntime.jsx(PartitionNameLabels, { items: labelItems, selectedIds: selectedIds, labelStyles: mergedPickerStyles.labels, platform: platform, showSelectionOrder: showSelectionOrder, rotation: actureRotate, onHoverChange: handleHoverChange }), jsxRuntime.jsx(CharginPile, { viewBox: viewBox, rotation: actureRotate, viewRotationMode: "overlay-parent", containerWidth: overlayWidth, containerHeight: overlayHeight, sizeInSvgUnits: true, minDisplaySizePx: PARTITION_PICKER_CHARGING_PILE_MIN_DISPLAY_PX })] }))) : null;
|
|
32274
32307
|
/** Map 模式:渲染 OverlayViewF,底图为 Google Maps */
|
|
32275
32308
|
if (isMapMode && mapRef) {
|
|
32276
32309
|
return (jsxRuntime.jsx(CommonContextProvider, { value: commonValue, children: jsxRuntime.jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxRuntime.jsx(OverlayViewF, { map: mapRef, mapPaneName: "overlayMouseTarget", bounds: googleOverlay.bounds ?? undefined, rotate: actureRotate, zIndex: zIndex, onDraw: googleOverlay.handleOverlayDraw, children: jsxRuntime.jsxs("div", { className: `${styles.googleOverlayRoot} ${className || ''}`, style: containerStyle, onMouseLeave: () => setHoveredId(null), children: [mapSvgLayer, overlayLayers] }) }) }) }));
|
|
32277
32310
|
}
|
|
32278
32311
|
/** Standalone 模式:固定容器 + 网格底图 + 双层 SVG / HTML overlay */
|
|
32279
|
-
return (jsxRuntime.jsx(CommonContextProvider, { value: commonValue, children: jsxRuntime.jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxRuntime.jsx("div", { ref: containerRef, className: `${styles.container} ${className || ''}`, "data-viewport-background": "true", style: containerStyle, onMouseLeave: () => setHoveredId(null), children: isLayersReady && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles.mapSvgStack, children: [jsxRuntime.jsx(PartitionPickerGridSvg, { viewBox: gridViewBox, gridStyle:
|
|
32312
|
+
return (jsxRuntime.jsx(CommonContextProvider, { value: commonValue, children: jsxRuntime.jsx(SvgEditContextProvider, { value: svgEditValue, children: jsxRuntime.jsx("div", { ref: containerRef, className: `${styles.container} ${className || ''}`, "data-viewport-background": "true", style: containerStyle, onMouseLeave: () => setHoveredId(null), children: isLayersReady && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles.mapSvgStack, children: [jsxRuntime.jsx(PartitionPickerGridSvg, { viewBox: gridViewBox, gridStyle: standaloneGridStyle }), mapSvgLayer] }), overlayLayers] })) }) }) }));
|
|
32280
32313
|
});
|
|
32281
32314
|
MowerPartitionPickerMap.displayName = 'MowerPartitionPickerMap';
|
|
32282
32315
|
|
|
@@ -11,7 +11,7 @@ import React from 'react';
|
|
|
11
11
|
import { MowerPartitionPickerMapProps, MowerPartitionPickerMapRef } from './partitionPicker/types';
|
|
12
12
|
export declare const MowerPartitionPickerMap: React.ForwardRefExoticComponent<MowerPartitionPickerMapProps & React.RefAttributes<MowerPartitionPickerMapRef>>;
|
|
13
13
|
export default MowerPartitionPickerMap;
|
|
14
|
-
export type { MowerPartitionPickerMapProps, MowerPartitionPickerMapRef, CssLength } from './partitionPicker/types';
|
|
14
|
+
export type { MowerPartitionPickerMapProps, MowerPartitionPickerMapRef, CssLength, } from './partitionPicker/types';
|
|
15
15
|
export type { PartitionPickerStyleConfig, PartitionPickerBoundaryColors, PartitionPickerLabelStyles, PartitionPickerGridStyle, ResolvedPartitionPickerStyles, } from './partitionPicker/constants';
|
|
16
16
|
export { resolvePartitionPickerStyles, getPartitionPickerColors, getPartitionPickerLabelStyles, PARTITION_PICKER_COLORS_WEB, PARTITION_PICKER_COLORS_H5, PARTITION_PICKER_LABEL_STYLES_WEB, PARTITION_PICKER_LABEL_STYLES_H5, } from './partitionPicker/constants';
|
|
17
17
|
//# sourceMappingURL=MowerPartitionPickerMap.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MowerPartitionPickerMap.d.ts","sourceRoot":"","sources":["../../src/render/MowerPartitionPickerMap.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAON,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"MowerPartitionPickerMap.d.ts","sourceRoot":"","sources":["../../src/render/MowerPartitionPickerMap.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAON,MAAM,OAAO,CAAC;AAoBf,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAiBnG,eAAO,MAAM,uBAAuB,iHAwanC,CAAC;AAIF,eAAe,uBAAuB,CAAC;AAEvC,YAAY,EACV,4BAA4B,EAC5B,0BAA0B,EAC1B,SAAS,GACV,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACV,0BAA0B,EAC1B,6BAA6B,EAC7B,0BAA0B,EAC1B,wBAAwB,EACxB,6BAA6B,GAC9B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,4BAA4B,EAC5B,wBAAwB,EACxB,6BAA6B,EAC7B,2BAA2B,EAC3B,0BAA0B,EAC1B,iCAAiC,EACjC,gCAAgC,GACjC,MAAM,6BAA6B,CAAC"}
|
|
@@ -1,19 +1,29 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
import { MapConfig, PlatformType } from '../../types';
|
|
3
3
|
/** ChannelClipPath 等内容裁剪使用的 SVG 坐标边距(与用户传入的屏幕 padding 无关) */
|
|
4
|
-
export declare const PARTITION_PICKER_CONTENT_CLIP_PADDING =
|
|
4
|
+
export declare const PARTITION_PICKER_CONTENT_CLIP_PADDING = 0;
|
|
5
5
|
/** H5:子区域屏幕宽度超过该值才展示名称标签(px) */
|
|
6
|
-
export declare const H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX =
|
|
6
|
+
export declare const H5_PARTITION_LABEL_MIN_SCREEN_WIDTH_PX = 92;
|
|
7
7
|
/** H5:名称气泡总宽度(px) */
|
|
8
|
-
export declare const H5_PARTITION_LABEL_WIDTH_PX =
|
|
9
|
-
/** H5:名称文案最大宽度(px
|
|
10
|
-
export declare const H5_PARTITION_LABEL_TEXT_MAX_WIDTH_PX =
|
|
8
|
+
export declare const H5_PARTITION_LABEL_WIDTH_PX = 92;
|
|
9
|
+
/** H5:名称文案最大宽度(px,可换行);默认设计值,实际随 labels.width/maxWidth 与 padding 自适应 */
|
|
10
|
+
export declare const H5_PARTITION_LABEL_TEXT_MAX_WIDTH_PX = 80;
|
|
11
|
+
/** Web:序号徽章与名称标签间距(px) */
|
|
12
|
+
export declare const WEB_SELECTION_ORDER_GAP_PX = 8;
|
|
11
13
|
/** H5:序号徽章与名称标签间距(px) */
|
|
12
14
|
export declare const H5_SELECTION_ORDER_GAP_PX = 4;
|
|
13
|
-
/**
|
|
14
|
-
export declare const
|
|
15
|
-
/**
|
|
16
|
-
export declare const
|
|
15
|
+
/** Standalone:充电桩图标最小屏幕尺寸(px),缩小全图 fit 时避免过小;放大时随 viewBox 同比缩放 */
|
|
16
|
+
export declare const PARTITION_PICKER_CHARGING_PILE_MIN_DISPLAY_PX = 16;
|
|
17
|
+
/** Web 地块描边屏幕像素宽度:未选中 2px,选中 3px */
|
|
18
|
+
export declare const WEB_PARTITION_BOUNDARY_STROKE_PX: {
|
|
19
|
+
readonly default: 2;
|
|
20
|
+
readonly selected: 3;
|
|
21
|
+
};
|
|
22
|
+
/** H5 地块描边屏幕像素宽度:选中与否均为 1px */
|
|
23
|
+
export declare const H5_PARTITION_BOUNDARY_STROKE_PX: {
|
|
24
|
+
readonly default: 1;
|
|
25
|
+
readonly selected: 1;
|
|
26
|
+
};
|
|
17
27
|
/**
|
|
18
28
|
* Figma bg/mapping 地图网格背景(Standalone SVG 层)
|
|
19
29
|
* @see https://www.figma.com/design/j0DdUYf8VFkXQ8ikkA6ZzP — node 20490:84886
|
|
@@ -21,17 +31,17 @@ export declare const PARTITION_BOUNDARY_EMPHASIZED_TARGET_SCREEN_STROKE_PX = 2.5
|
|
|
21
31
|
/** 网格区域底色,也用于容器 letterbox 留白 */
|
|
22
32
|
export declare const PARTITION_PICKER_GRID_BASE_COLOR = "#E3E5EB";
|
|
23
33
|
/** 网格单元边长(SVG 地图坐标,与 viewBox 一致;zoom 时间距同比缩放) */
|
|
24
|
-
export declare const PARTITION_PICKER_GRID_TILE_SIZE =
|
|
34
|
+
export declare const PARTITION_PICKER_GRID_TILE_SIZE = 10;
|
|
25
35
|
/** 网格线宽(地图坐标;随 zoom 同比缩放,不做屏幕像素恒定) */
|
|
26
|
-
export declare const PARTITION_PICKER_GRID_LINE_WIDTH =
|
|
36
|
+
export declare const PARTITION_PICKER_GRID_LINE_WIDTH = 0.5;
|
|
27
37
|
/** 网格交点圆点半径(地图坐标) */
|
|
28
|
-
export declare const PARTITION_PICKER_GRID_DOT_RADIUS =
|
|
38
|
+
export declare const PARTITION_PICKER_GRID_DOT_RADIUS = 0.5;
|
|
29
39
|
/** 网格层整体不透明度(Figma 约 80%) */
|
|
30
|
-
export declare const PARTITION_PICKER_GRID_OPACITY = 0.
|
|
40
|
+
export declare const PARTITION_PICKER_GRID_OPACITY = 0.4;
|
|
31
41
|
/** 网格线与交点颜色 */
|
|
32
42
|
export declare const PARTITION_PICKER_GRID_STROKE = "#FFFFFF";
|
|
33
43
|
/** 可见范围内交点超过该数量时跳过圆点,仅保留网格线(缩小视野时减轻 DOM 压力) */
|
|
34
|
-
export declare const PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS =
|
|
44
|
+
export declare const PARTITION_PICKER_GRID_MAX_INTERSECTION_DOTS = 2000;
|
|
35
45
|
/**
|
|
36
46
|
* 分区选择地图专用样式
|
|
37
47
|
*
|
|
@@ -43,28 +53,27 @@ export declare const PARTITION_PICKER_MAP_CONFIG: MapConfig;
|
|
|
43
53
|
export interface PartitionPickerBoundaryColors {
|
|
44
54
|
defaultFill: string;
|
|
45
55
|
defaultStroke: string;
|
|
46
|
-
defaultStrokeWidth: number;
|
|
47
56
|
hoverFill: string;
|
|
48
57
|
hoverStroke: string;
|
|
49
|
-
hoverStrokeWidth: number;
|
|
50
58
|
selectedFill: string;
|
|
51
59
|
selectedStroke: string;
|
|
52
|
-
selectedStrokeWidth: number;
|
|
53
60
|
selectedHoverFill: string;
|
|
54
61
|
selectedHoverStroke: string;
|
|
55
|
-
selectedHoverStrokeWidth: number;
|
|
56
62
|
isolatedFill: string;
|
|
57
63
|
isolatedStroke: string;
|
|
58
|
-
isolatedStrokeWidth: number;
|
|
59
64
|
}
|
|
60
65
|
/** Web 端地块配色(Figma Vector 360 / 361 / 99788) */
|
|
61
66
|
export declare const PARTITION_PICKER_COLORS_WEB: PartitionPickerBoundaryColors;
|
|
62
67
|
/** H5 端地块配色 */
|
|
63
68
|
export declare const PARTITION_PICKER_COLORS_H5: PartitionPickerBoundaryColors;
|
|
64
|
-
/** @deprecated 使用 getPartitionPickerColors */
|
|
65
|
-
export declare const PARTITION_PICKER_COLORS: PartitionPickerBoundaryColors;
|
|
66
69
|
export declare function getPartitionPickerMapConfig(platform?: PlatformType): MapConfig;
|
|
67
70
|
export declare function getPartitionPickerColors(platform?: PlatformType): PartitionPickerBoundaryColors;
|
|
71
|
+
/** 地块描边屏幕像素目标(Web / H5 平台默认值不同) */
|
|
72
|
+
export interface PartitionPickerBoundaryStrokePx {
|
|
73
|
+
default: number;
|
|
74
|
+
selected: number;
|
|
75
|
+
}
|
|
76
|
+
export declare function getPartitionPickerBoundaryStrokePx(platform?: PlatformType): PartitionPickerBoundaryStrokePx;
|
|
68
77
|
/** 分区名气泡单态样式(默认 / 选中) */
|
|
69
78
|
export interface PartitionPickerLabelAppearance {
|
|
70
79
|
backgroundColor?: string;
|
|
@@ -76,6 +85,7 @@ export interface PartitionPickerLabelAppearance {
|
|
|
76
85
|
padding: string;
|
|
77
86
|
borderRadius: number;
|
|
78
87
|
width?: string;
|
|
88
|
+
maxWidth?: string;
|
|
79
89
|
boxSizing?: CSSProperties['boxSizing'];
|
|
80
90
|
border?: string;
|
|
81
91
|
boxShadow?: string;
|
|
@@ -121,20 +131,13 @@ export interface PartitionPickerGridStyle {
|
|
|
121
131
|
maxIntersectionDots: number;
|
|
122
132
|
}
|
|
123
133
|
export declare const DEFAULT_PARTITION_PICKER_GRID_STYLE: PartitionPickerGridStyle;
|
|
124
|
-
/** 地块描边屏幕像素恒定目标 */
|
|
125
|
-
export interface PartitionPickerBoundaryStrokePx {
|
|
126
|
-
default: number;
|
|
127
|
-
emphasized: number;
|
|
128
|
-
}
|
|
129
|
-
export declare const DEFAULT_PARTITION_PICKER_BOUNDARY_STROKE_PX: PartitionPickerBoundaryStrokePx;
|
|
130
134
|
/**
|
|
131
135
|
* 分区选择器外观配置(由外部传入,与内置默认值深度合并)
|
|
132
136
|
*
|
|
133
|
-
* - boundary:地块
|
|
137
|
+
* - boundary:地块 fill / stroke 颜色(线宽见 boundaryStrokePx)
|
|
134
138
|
* - labels:分区名气泡与序号徽章
|
|
135
|
-
* - grid:Standalone 网格底图(Map
|
|
136
|
-
* - boundaryStrokePx
|
|
137
|
-
* - labelMinScreenWidthPx:H5 名称标签最小展示宽度
|
|
139
|
+
* - grid:Standalone 网格底图(Map 模式不渲染;baseColor 同时影响 Standalone 容器背景)
|
|
140
|
+
* - boundaryStrokePx:描边屏幕像素目标(Web 2/3px,H5 1px)
|
|
138
141
|
*/
|
|
139
142
|
export interface PartitionPickerStyleConfig {
|
|
140
143
|
boundary?: Partial<PartitionPickerBoundaryColors>;
|
|
@@ -145,7 +148,6 @@ export interface PartitionPickerStyleConfig {
|
|
|
145
148
|
};
|
|
146
149
|
grid?: Partial<PartitionPickerGridStyle>;
|
|
147
150
|
boundaryStrokePx?: Partial<PartitionPickerBoundaryStrokePx>;
|
|
148
|
-
labelMinScreenWidthPx?: number;
|
|
149
151
|
}
|
|
150
152
|
export interface ResolvedPartitionPickerStyles {
|
|
151
153
|
/** 地块 default / hover / selected / isolated 最终配色 */
|
|
@@ -155,7 +157,6 @@ export interface ResolvedPartitionPickerStyles {
|
|
|
155
157
|
/** Standalone 网格底图最终样式 */
|
|
156
158
|
grid: PartitionPickerGridStyle;
|
|
157
159
|
boundaryStrokePx: PartitionPickerBoundaryStrokePx;
|
|
158
|
-
labelMinScreenWidthPx: number;
|
|
159
160
|
}
|
|
160
161
|
/**
|
|
161
162
|
* 将 platform 内置默认值与外部 pickerStyleConfig 深度合并。
|