@zerodep-dev/vue-tsx-pro-ui 0.3.2 → 0.4.0

package/dist/charts/MapChart.js

@@ -1,29 +1,32 @@
+import { svgNumber } from "../utils/data/number.js";
 import { toNumber } from "../utils/data/numeric.js";
-import { colors } from "../config/theme/tokens.js";
+import { colors, t } from "../config/theme/tokens.js";
 import { useLang } from "../config/context.js";
 import { IconButton } from "../base/IconButton.js";
-import { useEventListener } from "../utils/dom/event-listener.js";
+import { useReducedMotion } from "../utils/dom/media-query.js";
 import { useFormat } from "../config/lang/format.js";
 import { Skeleton } from "../feedback/Skeleton.js";
+import { usePanZoom } from "../utils/dom/pan-zoom.js";
+import { ChartTooltipBox, chartSvgStyles, pointerIn, usePlotArea } from "./plot.js";
 import { ChartFrame, chartTooltip } from "./frame.js";
 import { resolveColor } from "./series.js";
-import { useSingleChart } from "./single.js";
+import { estimateTextWidth } from "./text-size.js";
+import { createProjection } from "./geo/projection.js";
+import { simplifyTopology, topologyBounds, topologyFeatures } from "./geo/topojson.js";
 import { placeLabels, rectsOverlap } from "./label-layout.js";
 import { computed, createTextVNode, createVNode, ref, shallowRef } from "vue";
 import { _component, effect, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import { css } from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { Maximize, Minus, Plus } from "@lucide/icons";
-import { MapProjection, TopoJSONMap } from "@unovis/ts";
-import { presimplify, simplify } from "topojson-simplify";
 //#region src/charts/MapChart.tsx
 /**
 * 地图：按区域着色（分省的销售额、各国的采购额），标出地点（工厂、供应商）与它们之间的流向。
-* 地理数据是 TopoJSON：Unovis 自带中国省份、世界、美国等（`@unovis/ts/maps`），也可以用自己的。
+* 地理数据是 TopoJSON：`@zerodep-dev/vue-tsx-pro-ui/maps` 带着中国省份与世界各国，也可以用自己的。
 *
-*   import { ChinaTopoJSON } from '@unovis/ts/maps';
+*   import { chinaProvinces } from '@zerodep-dev/vue-tsx-pro-ui/maps';
 *   <MapChart
 *     aria-label="各省销售额"
-*     topology={ChinaTopoJSON}
+*     topology={chinaProvinces}
 *     feature="provinces"
 *     areas={[{ id: 'CN-JS', label: '江苏', value: 623 }, …]}   // id 是地图要素的 id
 *     points={[{ id: 'sh', label: '上海组装', longitude: 121.47, latitude: 31.23, value: 860 }]}
@@ -32,49 +35,77 @@ import { presimplify, simplify } from "topojson-simplify";
 *     areaLabels
 *   />
 *
-* 投影：默认按地理数据的范围选——一个国家、一个地区用以它为中心的等积圆锥投影（中国地图常用的 Albers，正着、不歪），
-* 跨了大半个地球时用 Natural Earth；也可以指定 mercator、equalEarth、orthographic（地球仪）或自己的 d3 投影。
+* 投影（见 createProjection）：默认按地理数据的范围选——一个国家、一个地区用以它为中心的等积圆锥投影
+* （中国地图常用的 Albers，正着、不歪），跨了大半个地球时用 Natural Earth；也可以指定 mercator、equalEarth、
+* equirectangular、orthographic（地球仪）或自己的投影函数（d3-geo 的投影可以直接传）。
+* 地理数据先按绘图区的像素简化（看不出的点去掉），再投影、按绘图区缩放居中。
 *
 * 着色：sequential（默认）按数值深浅；diverging 以 midpoint 为界两头两种颜色（同比的涨跌）；
 * bins 分成几档（分级着色，图例是几个色块），不写时连续着色（图例是色带）；区域写了 color 时按它（分类着色）。
 * 没有数据的区域是底色。地点：value 决定大小（面积按比例），color、shape 决定颜色与形状；名字自动避让
 * （换方位、挤时往外退并画引线，数值大的先放，放不下的悬停看；压住名字、地点的区域名藏起来）；
-* links 是地点之间的流向，粗细按 value，flow 时有流动的粒子。
-* zoomable 时可以拖动、按住 Ctrl 滚轮缩放，右上角有放大、缩小、复位的按钮。悬停看名称与数值；读屏的数据表列出各区域、地点与流向。
+* links 是地点之间的流向，粗细按 value，flow 时有流动的粒子（“减少动态效果”时不播）。
+* zoomable 时可以拖动、按住 Ctrl 滚轮缩放，右上角有放大、缩小、复位的按钮；缩放时区域放大，地点与文字保持原来的大小。
+* 悬停看名称与数值；读屏的数据表列出各区域、地点与流向。
 */
 /** 一个区域的数据 */
 /** 一个地点 */
 /** 两个地点之间的流向 */
 /** 投影的预设 */
-/** d3 的投影（TopoJSONMap 的 projection） */
 /** 未声明的属性落到外层 div（role="figure"）上；aria-label 是图表的名称 */
 /** MapChart 的样式 */
 var mapChartStyles = css.create({
-	root: {
-		"--vis-map-feature-color": colors.fill,
-		"--vis-map-boundary-color": colors.surface,
-		"--vis-map-point-label-text-color-dark": colors.text,
-		"--vis-map-point-label-text-color-light": colors.text,
-		"--vis-map-area-label-text-color": colors.text,
-		"--vis-map-area-label-font-size": "10px",
-		"--vis-map-area-label-font-weight": "400",
-		"--vis-map-point-default-stroke-color": colors.surface,
-		"--vis-map-point-default-stroke-width": "1.5px"
-	},
 	skeleton: {
 		display: "block",
 		width: "100%",
 		height: "100%"
 	},
-	pointLabels: {
-		fontWeight: 600,
-		fill: colors.text,
-		stroke: colors.surface,
-		paintOrder: "stroke",
-		strokeLinejoin: "round",
+	viewport: {
+		position: "absolute",
+		inset: 0
+	},
+	feature: {
+		stroke: "_surface",
+		strokeWidth: .8,
+		fillRule: "evenodd",
+		transition: `fill ${t.durations.md} ${t.easings.standard}`
+	},
+	featureHover: {
+		fill: "none",
+		stroke: "_text",
+		strokeWidth: 1.5,
 		pointerEvents: "none"
 	},
-	leader: { stroke: colors.textMuted },
+	sphere: {
+		fill: "_surfaceMuted",
+		stroke: "_border",
+		strokeWidth: 1
+	},
+	link: {
+		fill: "none",
+		strokeOpacity: .7,
+		strokeLinecap: "round",
+		pointerEvents: "none"
+	},
+	particle: { pointerEvents: "none" },
+	point: {
+		stroke: "_surface",
+		strokeWidth: 1.5
+	},
+	clickable: { cursor: "pointer" },
+	pointLabel: {
+		fill: "_text",
+		fontSize: "11px",
+		fontWeight: "_semibold"
+	},
+	areaLabel: {
+		fill: "_text",
+		fontSize: "10px"
+	},
+	leader: {
+		stroke: "_textMuted",
+		strokeWidth: 1
+	},
 	zoom: {
 		display: "inline-flex",
 		alignItems: "center",
@@ -116,81 +147,30 @@ var mapChartStyles = css.create({
 	},
 	swatchColor: (color) => ({ backgroundColor: color })
 });
-/** 地点的标签四周留的空（屏幕像素） */
-var labelPadding = 3;
-/** 新建一个 SVG 元素 */
-var svgElement = (name) => document.createElementNS("http://www.w3.org/2000/svg", name);
+/** 地点名字的字号、区域名的字号（px） */
+var POINT_FONT = 11;
+var AREA_FONT = 10;
 /** 混色：基色占 percent，其余透明（落在底色上） */
 var tint = (color, percent) => `color-mix(in srgb, ${color} ${Math.round(percent)}%, transparent)`;
-/** 算好了各点权重的地理数据：同一份 TopoJSON 只算一次 */
-var presimplified = /* @__PURE__ */ new WeakMap();
-/**
-* 简化过的地理数据放进这个类的实例：Unovis 的 setConfig 深拷贝配置，但跳过类的实例，
-* 每次更新就不必把整份 TopoJSON 再拷一遍
-*/
-var SharedTopology = class {};
-/** 简化过的地理数据：TopoJSON → 档位 → 结果 */
-var simplified = /* @__PURE__ */ new WeakMap();
-/**
-* 简化地理数据：去掉与前后两点围成的三角形面积不到 minArea（坐标单位的平方，经纬度是平方度）的点
-* （Visvalingam，topojson-simplify）。相邻区域共用的边界一起简化，不会出现缝隙；各段弧的两端总保留。
-* minArea 按 2 的整数次幂分档缓存：绘图区大小变一点不重算。
-*/
-function simplifyTopology(topology, minArea) {
-	if (!(minArea > 0) || !Number.isFinite(minArea)) return topology;
-	const level = 2 ** Math.floor(Math.log2(minArea));
-	let byLevel = simplified.get(topology);
-	if (!byLevel) simplified.set(topology, byLevel = /* @__PURE__ */ new Map());
-	let result = byLevel.get(level);
-	if (!result) {
-		let weighted = presimplified.get(topology);
-		if (!weighted) presimplified.set(topology, weighted = presimplify(topology));
-		result = Object.assign(new SharedTopology(), simplify(weighted, level));
-		byLevel.set(level, result);
-	}
-	return result;
+/** 一组环写成路径；坐标保留一位小数（像素） */
+function ringsPath(rings) {
+	const round = (value) => Math.round(value * 10) / 10;
+	return rings.map((ring) => `M${ring.map(([x, y]) => `${round(x)},${round(y)}`).join("L")}Z`).join("");
 }
-/** TopoJSON 的经纬度范围 [西, 南, 东, 北]：有 bbox 用它，否则解出各段弧的坐标（量化的弧是逐点的差值） */
-function topologyBounds(topology) {
-	if (topology.bbox) {
-		const [west, south, east, north] = topology.bbox;
-		return [
-			west,
-			south,
-			east,
-			north
-		];
+/** 地点的标记：中心在 (x, y)、半径 r 的路径 */
+function markerPath(shape, x, y, r) {
+	const [cx, cy] = [svgNumber(x), svgNumber(y)];
+	if (shape === "square") {
+		const half = svgNumber(r * .9);
+		return `M${cx - half},${cy - half}h${half * 2}v${half * 2}h${-half * 2}Z`;
 	}
-	const quantized = topology.transform;
-	const [scaleX, scaleY] = quantized?.scale ?? [1, 1];
-	const [translateX, translateY] = quantized?.translate ?? [0, 0];
-	let [west, south, east, north] = [
-		Infinity,
-		Infinity,
-		-Infinity,
-		-Infinity
-	];
-	for (const arc of topology.arcs) {
-		let x = 0;
-		let y = 0;
-		for (const position of arc) {
-			x = quantized ? x + position[0] : position[0];
-			y = quantized ? y + position[1] : position[1];
-			const longitude = x * scaleX + translateX;
-			const latitude = y * scaleY + translateY;
-			west = Math.min(west, longitude);
-			east = Math.max(east, longitude);
-			south = Math.min(south, latitude);
-			north = Math.max(north, latitude);
-		}
+	if (shape === "triangle") {
+		const h = svgNumber(r * 1.15);
+		return `M${cx},${svgNumber(cy - h)}L${svgNumber(cx + h)},${svgNumber(cy + h * .75)}L${svgNumber(cx - h)},${svgNumber(cy + h * .75)}Z`;
 	}
-	return [
-		west,
-		south,
-		east,
-		north
-	];
+	return `M${svgNumber(cx - r)},${cy}A${r},${r},0,1,1,${svgNumber(cx + r)},${cy}A${r},${r},0,1,1,${svgNumber(cx - r)},${cy}Z`;
 }
+/** 悬停的区域或地点 */
 /** 地图 */
 var MapChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const _cache = [];
@@ -217,12 +197,15 @@ var MapChart = /*#__PURE__*/ _component((_props, _ctx) => {
 	const tooltip = readonlyProp(_props, "tooltip", true);
 	const onAreaClick = readonlyProp(_props, "onAreaClick");
 	const onPointClick = readonlyProp(_props, "onPointClick");
-	const sx = readonlyProp(_props, "sx");
 	const rest = restProps(_props, _ctx, true);
 	const lang = useLang();
 	const format = useFormat();
+	const area = usePlotArea();
+	const reducedMotion = useReducedMotion();
+	const viewport = shallowRef(null);
+	let hovered = shallowRef(null);
 	const bounds = computed(() => topologyBounds(topology.value));
-	const numbers = computed(() => areas.value.flatMap((area) => area.value === void 0 ? [] : [toNumber(area.value)]));
+	const numbers = computed(() => areas.value.flatMap((item) => item.value === void 0 ? [] : [toNumber(item.value)]));
 	const extent = computed(() => numbers.value.length ? [Math.min(...numbers.value), Math.max(...numbers.value)] : null);
 	const largest = (values) => Math.max(0, ...values.map((item) => item.value === void 0 ? 0 : toNumber(item.value)));
 	const valueText = (value) => value === void 0 ? lang.emptyValue : format.number(value, unit.value ? {
@@ -230,6 +213,8 @@ var MapChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		suffix: unit.value
 	} : valueFormat.value);
 	const numberText = (value) => format.number(value, valueFormat.value);
+	const areaById = computed(() => new Map(areas.value.map((item) => [item.id, item])));
+	const pointById = computed(() => new Map(points.value.map((point) => [point.id, point])));
 	/** 数值 → 颜色：sequential 从 12% 到 100%；diverging 两头各自从分界往外加深；bins 时按档取 */
 	function colorOf(value) {
 		const [low, high] = extent.value ?? [0, 0];
@@ -244,129 +229,155 @@ var MapChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		if (bins.value) ratio = Math.min(Math.floor(ratio * bins.value), bins.value - 1) / Math.max(bins.value - 1, 1);
 		return tint(resolveColor(color.value, 0), 12 + ratio * 88);
 	}
-	const areaColor = (area) => area.color ? resolveColor(area.color, 0) : area.value === void 0 ? void 0 : colorOf(toNumber(area.value));
-	/** 投影：预设按中心旋转；不写时按范围选 */
-	function createProjection() {
-		if (projection.value && typeof projection.value !== "string") return projection.value;
-		const [west, south, east, north] = bounds.value;
-		const [longitude, latitude] = center.value ?? [(west + east) / 2, (south + north) / 2];
-		const kind = projection.value ?? (east - west > 180 ? "naturalEarth" : "conic");
-		if (kind === "conic") return MapProjection.ConicEqualArea().rotate([-longitude, 0]).parallels([south + (north - south) / 6, north - (north - south) / 6]);
-		if (kind === "orthographic") return MapProjection.Orthographic().rotate([-longitude, -latitude]);
-		return (kind === "mercator" ? MapProjection.Mercator : kind === "equalEarth" ? MapProjection.EqualEarth : MapProjection.NaturalEarth1)().rotate([-longitude, 0]);
-	}
-	let mapKey = [];
-	let generation = 0;
-	let mapProjection;
-	function updateProjection() {
-		const key = [
-			projection.value,
-			center.value?.[0],
-			center.value?.[1],
-			...bounds.value
-		];
-		if (key.some((item, index) => item !== mapKey[index])) {
-			if (mapKey.length) {
-				map?.destroy();
-				generation += 1;
+	const areaColor = (item) => !item ? void 0 : item.color ? resolveColor(item.color, 0) : item.value === void 0 ? void 0 : colorOf(toNumber(item.value));
+	const pointMax = computed(() => largest(points.value));
+	const radiusOf = (point) => point.value === void 0 || pointMax.value === 0 ? 4 : 3 + Math.sqrt(toNumber(point.value) / pointMax.value) * 5;
+	let wheelHint = ref(false);
+	let hintTimer;
+	effect(() => () => clearTimeout(hintTimer));
+	const view = usePanZoom({
+		viewport: () => viewport.value,
+		min: 1,
+		max: 12,
+		step: 1.5,
+		disabled: () => !zoomable.value,
+		filter: (event) => {
+			if (event instanceof WheelEvent && !event.ctrlKey && !event.metaKey) {
+				wheelHint.value = true;
+				clearTimeout(hintTimer);
+				hintTimer = setTimeout(() => wheelHint.value = false, 1500);
+				return false;
 			}
-			mapKey = key;
-			mapProjection = createProjection();
+			return true;
 		}
-	}
-	function drawnTopology() {
-		const width = plot.value?.clientWidth ?? 0;
-		const height = plot.value?.clientHeight ?? 0;
-		if (!width || !height) return topology.value;
+	});
+	/** 投影：预设按中心旋转；不写时按范围选 */
+	const projector = computed(() => {
 		const [west, south, east, north] = bounds.value;
-		const degreesPerPixel = Math.max((east - west) / width, (north - south) / height) / (zoomable.value ? 2 : 1);
-		return simplifyTopology(topology.value, degreesPerPixel ** 2);
-	}
-	const pointOf = (id) => points.value.find((point) => point.id === id);
-	/** Unovis 画连线时给的是 { source, target }（克隆过的地点），不是原来的流向：按两端的 id 找回 */
-	const linkOf = (drawn) => {
-		const { source, target } = drawn;
-		return links.value.find((link) => link.from === source.id && link.to === target.id);
-	};
-	let map;
-	let plot = shallowRef(null);
-	const pointMax = computed(() => largest(points.value));
-	const radiusOf = (point) => point.value === void 0 || pointMax.value === 0 ? 4 : 3 + Math.sqrt(toNumber(point.value) / pointMax.value) * 5;
-	let labelFrame = 0;
-	/** 画完、缩放之后，下一帧重排地点的标签 */
-	function scheduleLabels() {
-		cancelAnimationFrame(labelFrame);
-		labelFrame = requestAnimationFrame(layoutLabels);
-	}
-	effect(() => () => cancelAnimationFrame(labelFrame));
+		const middle = center.value ?? [(west + east) / 2, (south + north) / 2];
+		const name = projection.value ?? (east - west > 180 ? "naturalEarth" : "conic");
+		return createProjection(name, {
+			center: middle,
+			bounds: bounds.value
+		});
+	});
 	/**
-	* 地点的标签：Unovis 的标签相撞时只会藏起来，这里用 placeLabels 挪到放得下的方位（挤时画引线），
-	* 画在地点那一组里（跟着缩放、拖动）；压在标签、地点上的区域名藏起来。
-	* 按屏幕像素算：地点那一组的坐标乘缩放级别
+	* 区域的路径：按绘图区里一像素对应的经纬度简化（三角形不到一平方像素的点去掉；能缩放时留到放大一倍也看不出折角），
+	* 投影后按绘图区缩放、居中。地点、连线用同一个换算（toScreen）
 	*/
-	function layoutLabels() {
-		const root = map?.g.node();
-		const group = root?.querySelector(`.${TopoJSONMap.selectors.points}`);
-		const svg = group?.ownerSVGElement;
-		if (!root || !group || !svg || !mapProjection) return;
-		const projectionAt = mapProjection;
-		const zoom = Number(svg.style.getPropertyValue("--vis-map-current-zoom-level")) || 1;
-		const layer = group.querySelector(":scope > [data-point-labels]") ?? svgElement("g");
-		layer.setAttribute("data-point-labels", "");
-		layer.setAttribute("class", css.attrs(mapChartStyles.pointLabels).class ?? "");
-		layer.style.fontSize = `${11 / zoom}px`;
-		layer.style.strokeWidth = `${3 / zoom}px`;
-		group.append(layer);
-		const items = points.value.flatMap((point) => {
-			const position = projectionAt([point.longitude, point.latitude]);
-			if (!position || !point.label) return [];
-			const text = svgElement("text");
-			text.textContent = point.label;
-			text.setAttribute("text-anchor", "middle");
-			return [{
-				point,
-				text,
-				x: position[0] * zoom,
-				y: position[1] * zoom
-			}];
-		});
-		layer.replaceChildren(...items.map((item) => item.text));
-		const glyphs = items.map((item) => item.text.getBBox());
-		const anchors = items.map((item, index) => {
-			const box = glyphs[index];
-			return {
-				x: item.x,
-				y: item.y,
-				radius: radiusOf(item.point),
-				width: box.width * zoom + 6,
-				height: box.height * zoom + 6,
-				priority: item.point.value === void 0 ? 0 : toNumber(item.point.value)
-			};
-		});
-		const areaTexts = [...root.querySelectorAll(`text.${TopoJSONMap.selectors.areaLabel}`)].filter((text) => text.getAttribute("visibility") !== "hidden");
-		const areaBoxes = areaTexts.map((text) => {
-			text.style.display = "";
-			const { e, f } = text.transform.baseVal.consolidate()?.matrix ?? {
-				e: 0,
-				f: 0
+	const geometry = computed(() => {
+		const { width, height: plotHeight } = area;
+		const [west, south, east, north] = bounds.value;
+		const degreesPerPixel = width && plotHeight ? Math.max((east - west) / width, (north - south) / plotHeight) / (zoomable.value ? 2 : 1) : 0;
+		const projected = topologyFeatures(simplifyTopology(topology.value, degreesPerPixel ** 2), feature.value).map((item) => ({
+			feature: item,
+			rings: item.polygons.flatMap((polygon) => projector.value.polygon(polygon)).filter((ring) => ring.length > 2)
+		}));
+		let [x0, y0, x1, y1] = [
+			Infinity,
+			Infinity,
+			-Infinity,
+			-Infinity
+		];
+		for (const item of projected) for (const ring of item.rings) for (const [x, y] of ring) {
+			x0 = Math.min(x0, x);
+			x1 = Math.max(x1, x);
+			y0 = Math.min(y0, y);
+			y1 = Math.max(y1, y);
+		}
+		const fits = Number.isFinite(x0) && x1 > x0 && y1 > y0;
+		const k = fits ? Math.min((width - 16) / (x1 - x0), (plotHeight - 16) / (y1 - y0)) : 1;
+		const tx = fits ? (width - (x1 - x0) * k) / 2 - x0 * k : 0;
+		const ty = fits ? (plotHeight - (y1 - y0) * k) / 2 - y0 * k : 0;
+		const toScreen = ([x, y]) => [x * k + tx, y * k + ty];
+		return {
+			toScreen,
+			sphere: projector.value.sphere && {
+				...projector.value.sphere,
+				cx: tx,
+				cy: ty,
+				r: projector.value.sphere.r * k
+			},
+			shapes: projected.map((item) => {
+				const screen = item.rings.map((ring) => ring.map(toScreen));
+				let best;
+				for (const ring of screen) {
+					const xs = ring.map(([x]) => x);
+					const ys = ring.map(([, y]) => y);
+					const box = {
+						x: Math.min(...xs),
+						y: Math.min(...ys),
+						width: Math.max(...xs) - Math.min(...xs),
+						height: Math.max(...ys) - Math.min(...ys)
+					};
+					if (!best || box.width * box.height > best.size) best = {
+						box,
+						size: box.width * box.height
+					};
+				}
+				return {
+					id: item.feature.id,
+					d: ringsPath(screen),
+					box: best?.box
+				};
+			})
+		};
+	});
+	/** 缩放后屏幕上的位置：地点、连线、文字不随缩放变大，只跟着移动 */
+	const zoomed = ([x, y]) => [x * view.scale + view.x, y * view.scale + view.y];
+	/** 地点在屏幕上的位置；看不见（地球背面）的不画 */
+	const placedPoints = computed(() => points.value.flatMap((point, index) => {
+		const projected = projector.value.point([point.longitude, point.latitude]);
+		if (!projected) return [];
+		const [x, y] = zoomed(geometry.value.toScreen(projected));
+		return [{
+			point,
+			index,
+			x,
+			y,
+			r: radiusOf(point)
+		}];
+	}));
+	/** 地点的名字：placeLabels 挪到放得下的方位（挤时画引线）；压住名字、地点的区域名藏起来 */
+	const labels = computed(() => {
+		const anchors = placedPoints.value.map((item) => ({
+			x: item.x,
+			y: item.y,
+			radius: item.r,
+			width: estimateTextWidth(item.point.label, POINT_FONT) + 6,
+			height: 19.75,
+			priority: item.point.value === void 0 ? 0 : toNumber(item.point.value)
+		}));
+		const areaBoxes = areaLabels.value ? geometry.value.shapes.flatMap((shape) => {
+			const info = areaById.value.get(shape.id);
+			if (!info || !shape.box) return [];
+			const width = estimateTextWidth(info.label, AREA_FONT);
+			const box = {
+				x: shape.box.x * view.scale + view.x,
+				y: shape.box.y * view.scale + view.y,
+				width: shape.box.width * view.scale,
+				height: shape.box.height * view.scale
 			};
-			const box = text.getBBox();
-			return {
-				x: (e + box.x) * zoom,
-				y: (f + box.y) * zoom,
-				width: box.width * zoom,
-				height: box.height * zoom
+			if (box.width < width + 4 || box.height < 14) return [];
+			const rect = {
+				x: box.x + box.width / 2 - width / 2,
+				y: box.y + box.height / 2 - AREA_FONT / 2,
+				width,
+				height: AREA_FONT
 			};
-		});
-		const bounds = zoom === 1 ? {
-			x: 0,
-			y: 0,
-			width: svg.clientWidth,
-			height: svg.clientHeight
-		} : void 0;
+			return [{
+				label: info.label,
+				rect
+			}];
+		}) : [];
 		const placements = placeLabels(anchors, {
-			bounds,
-			soft: areaBoxes
+			bounds: view.scale === 1 ? {
+				x: 0,
+				y: 0,
+				width: area.width,
+				height: area.height
+			} : void 0,
+			soft: areaBoxes.map((item) => item.rect)
 		});
 		const taken = anchors.map((anchor) => ({
 			x: anchor.x - anchor.radius,
@@ -374,128 +385,191 @@ var MapChart = /*#__PURE__*/ _component((_props, _ctx) => {
 			width: anchor.radius * 2,
 			height: anchor.radius * 2
 		}));
-		placements.forEach((placement, index) => {
-			const { text } = items[index];
-			if (!placement) {
-				text.remove();
-				return;
-			}
-			const { box, leader } = placement;
-			taken.push(box);
-			text.setAttribute("x", String((box.x + box.width / 2) / zoom));
-			text.setAttribute("y", String((box.y + labelPadding) / zoom - glyphs[index].y));
-			if (leader) layer.insertBefore(leaderLine(anchors[index], box, zoom), text);
-		});
-		areaTexts.forEach((text, index) => {
-			if (taken.some((rect) => rectsOverlap(rect, areaBoxes[index]))) text.style.display = "none";
+		for (const placement of placements) if (placement) taken.push(placement.box);
+		return {
+			points: placements.map((placement, index) => ({
+				placement,
+				anchor: anchors[index],
+				item: placedPoints.value[index]
+			})),
+			areas: areaBoxes.filter((item) => !taken.some((rect) => rectsOverlap(rect, item.rect)))
+		};
+	});
+	/** 连线：两个地点之间往上拱起的弧，粗细按数值 */
+	const linkShapes = computed(() => {
+		const linkMax = largest(links.value);
+		const byId = new Map(placedPoints.value.map((item) => [item.point.id, item]));
+		return links.value.flatMap((link, index) => {
+			const from = byId.get(link.from);
+			const to = byId.get(link.to);
+			if (!from || !to) return [];
+			const dx = to.x - from.x;
+			const dy = to.y - from.y;
+			const length = Math.hypot(dx, dy) || 1;
+			const [nx, ny] = dx >= 0 ? [dy / length, -dx / length] : [-dy / length, dx / length];
+			const bend = length * .2;
+			const cx = (from.x + to.x) / 2 + nx * bend;
+			const cy = (from.y + to.y) / 2 + ny * bend;
+			return [{
+				link,
+				index,
+				length,
+				d: `M${svgNumber(from.x)},${svgNumber(from.y)}Q${svgNumber(cx)},${svgNumber(cy)},${svgNumber(to.x)},${svgNumber(to.y)}`,
+				width: link.value === void 0 || linkMax === 0 ? 1.5 : 1 + toNumber(link.value) / linkMax * 4
+			}];
 		});
+	});
+	function onPointermove(event) {
+		const target = event.target.closest?.("[data-feature],[data-point]");
+		if (!target) {
+			hovered.value = null;
+			return;
+		}
+		const { x, y } = pointerIn(event, viewport.value ?? event.currentTarget);
+		const point = target.getAttribute("data-point");
+		hovered.value = point === null ? {
+			kind: "feature",
+			index: Number(target.getAttribute("data-feature")),
+			x,
+			y
+		} : {
+			kind: "point",
+			index: Number(point),
+			x,
+			y
+		};
 	}
-	/** 引线：从标记的边到标签矩形上离标记最近的点 */
-	function leaderLine(anchor, box, zoom) {
-		const toX = Math.min(Math.max(anchor.x, box.x), box.x + box.width);
-		const toY = Math.min(Math.max(anchor.y, box.y), box.y + box.height);
-		const length = Math.hypot(toX - anchor.x, toY - anchor.y) || 1;
-		const line = svgElement("line");
-		line.setAttribute("class", css.attrs(mapChartStyles.leader).class ?? "");
-		line.setAttribute("x1", String((anchor.x + (toX - anchor.x) / length * anchor.radius) / zoom));
-		line.setAttribute("y1", String((anchor.y + (toY - anchor.y) / length * anchor.radius) / zoom));
-		line.setAttribute("x2", String(toX / zoom));
-		line.setAttribute("y2", String(toY / zoom));
-		line.style.strokeWidth = `${1 / zoom}px`;
-		return line;
+	function onClick(event) {
+		const target = event.target.closest?.("[data-feature],[data-point]");
+		if (!target) return;
+		const point = target.getAttribute("data-point");
+		if (point !== null) {
+			onPointClick.value?.(points.value[Number(point)]);
+			return;
+		}
+		const shape = geometry.value.shapes[Number(target.getAttribute("data-feature"))];
+		const info = shape && areaById.value.get(shape.id);
+		if (info) onAreaClick.value?.(info);
 	}
-	const chart = useSingleChart(() => ({
-		element: plot.value,
-		ready: !loading.value,
-		tooltip: tooltip.value,
-		build: (instance) => {
-			const linkMax = largest(links.value);
-			updateProjection();
-			map = instance(`map-${generation}`, () => {
-				const created = new TopoJSONMap();
-				created.g.select("filter#heatmapFilter").remove();
-				const observer = new MutationObserver(scheduleLabels);
-				queueMicrotask(() => {
-					const svg = created.g.node()?.parentElement;
-					if (svg) observer.observe(svg, {
-						attributes: true,
-						attributeFilter: ["style"]
-					});
-				});
-				const destroy = created.destroy.bind(created);
-				created.destroy = () => {
-					observer.disconnect();
-					destroy();
-				};
-				return created;
-			});
-			map.setConfig({
-				topojson: drawnTopology(),
-				mapFeatureName: feature.value,
-				projection: mapProjection,
-				disableZoom: !zoomable.value,
-				areaId: (area) => area.id,
-				areaColor,
-				areaLabel: areaLabels.value ? (area) => area.label : void 0,
-				areaCursor: onAreaClick.value ? () => "pointer" : void 0,
-				pointId: (point) => point.id,
-				longitude: (point) => point.longitude,
-				latitude: (point) => point.latitude,
-				pointColor: (point) => resolveColor(point.color ?? "danger", 0),
-				pointRadius: radiusOf,
-				pointShape: (point) => point.shape ?? "circle",
-				pointCursor: onPointClick.value ? () => "pointer" : void 0,
-				pointLabel: () => "",
-				pointBottomLabel: () => "",
-				linkSource: (link) => link.from,
-				linkTarget: (link) => link.to,
-				linkColor: (drawn) => resolveColor(linkOf(drawn)?.color ?? "neutral", 0),
-				linkWidth: (drawn) => {
-					const value = linkOf(drawn)?.value;
-					return value === void 0 || linkMax === 0 ? 1.5 : 1 + toNumber(value) / linkMax * 4;
-				},
-				enableFlowAnimation: flow.value,
-				sourceLongitude: (link) => pointOf(link.from)?.longitude,
-				sourceLatitude: (link) => pointOf(link.from)?.latitude,
-				targetLongitude: (link) => pointOf(link.to)?.longitude,
-				targetLatitude: (link) => pointOf(link.to)?.latitude,
-				sourcePointRadius: 0,
-				flowParticleColor: (link) => resolveColor(link.color ?? "accent", 0),
-				flowParticleRadius: 2,
-				flowParticleDensity: .15,
-				events: {
-					[TopoJSONMap.selectors.feature]: { click: (shape) => {
-						if (shape.data) onAreaClick.value?.(shape.data);
-					} },
-					[TopoJSONMap.selectors.point]: { click: (point) => onPointClick.value?.(point) }
-				}
-			});
+	function renderPlot() {
+		const { width, height: plotHeight } = area;
+		const { shapes, sphere } = geometry.value;
+		const current = hovered.value;
+		const hoveredShape = current?.kind === "feature" ? shapes[current.index] : void 0;
+		return createVNode("svg", mergeJsxProps({
+			"width": width,
+			"height": plotHeight
+		}, css.attrs(chartSvgStyles.svg), { "onClick": onClick }), [
+			createVNode("g", mergeJsxProps({
+				"data-part": "features",
+				"transform": `translate(${svgNumber(view.x)} ${svgNumber(view.y)}) scale(${svgNumber(view.scale)})`
+			}, css.attrs(chartSvgStyles.fadeIn)), [
+				sphere && createVNode("circle", mergeJsxProps({
+					"cx": sphere.cx,
+					"cy": sphere.cy,
+					"r": sphere.r
+				}, css.attrs(mapChartStyles.sphere)), null),
+				shapes.map((shape, index) => {
+					const info = areaById.value.get(shape.id);
+					return createVNode("path", mergeJsxProps({
+						"key": `${shape.id}:${index}`,
+						"data-part": "feature",
+						"data-feature": index,
+						"d": shape.d,
+						"vector-effect": "non-scaling-stroke"
+					}, css.attrs(mapChartStyles.feature, chartSvgStyles.fill(areaColor(info) ?? colors.fill), info && onAreaClick.value && mapChartStyles.clickable)), null);
+				}),
+				hoveredShape && createVNode("path", mergeJsxProps({
+					"d": hoveredShape.d,
+					"vector-effect": "non-scaling-stroke"
+				}, css.attrs(mapChartStyles.featureHover)), null)
+			]),
+			createVNode("g", { "data-part": "links" }, [linkShapes.value.map((shape) => {
+				const tone = resolveColor(shape.link.color ?? "neutral", 0);
+				return createVNode("path", mergeJsxProps({
+					"key": shape.index,
+					"data-part": "link",
+					"d": shape.d,
+					"stroke-width": svgNumber(shape.width)
+				}, css.attrs(mapChartStyles.link, chartSvgStyles.stroke(tone))), null);
+			}), flow.value && !reducedMotion.value && linkShapes.value.flatMap((shape) => {
+				const count = Math.max(1, Math.round(shape.length / 120));
+				const duration = Math.max(1.5, shape.length / 60);
+				const tone = resolveColor(shape.link.color ?? "accent", 0);
+				return Array.from({ length: count }, (_, k) => createVNode("circle", mergeJsxProps({
+					"key": `${shape.index}:${k}`,
+					"r": 2
+				}, css.attrs(mapChartStyles.particle, chartSvgStyles.fill(tone))), [createVNode("animateMotion", mergeJsxProps({
+					"dur": `${svgNumber(duration)}s`,
+					"begin": `${svgNumber(-(duration * k) / count)}s`,
+					"repeatCount": "indefinite"
+				}, { path: shape.d }), null)]));
+			})]),
+			createVNode("g", { "data-part": "points" }, [placedPoints.value.map((item) => createVNode("path", mergeJsxProps({
+				"key": item.point.id,
+				"data-part": "point",
+				"data-point": item.index,
+				"d": markerPath(item.point.shape, item.x, item.y, item.r)
+			}, css.attrs(mapChartStyles.point, chartSvgStyles.fill(resolveColor(item.point.color ?? "danger", 0)), onPointClick.value && mapChartStyles.clickable)), null))]),
+			createVNode("g", mergeJsxProps({ "data-part": "area-labels" }, css.attrs(chartSvgStyles.noPointer)), [labels.value.areas.map((item) => createVNode("text", mergeJsxProps({
+				"key": item.label,
+				"x": svgNumber(item.rect.x + item.rect.width / 2),
+				"y": svgNumber(item.rect.y + item.rect.height / 2),
+				"text-anchor": "middle",
+				"dominant-baseline": "central"
+			}, css.attrs(mapChartStyles.areaLabel, chartSvgStyles.halo)), [item.label]))]),
+			createVNode("g", mergeJsxProps({ "data-part": "point-labels" }, css.attrs(chartSvgStyles.noPointer)), [labels.value.points.map(({ placement, anchor, item }) => {
+				if (!placement) return null;
+				const { box, leader } = placement;
+				const toX = Math.min(Math.max(anchor.x, box.x), box.x + box.width);
+				const toY = Math.min(Math.max(anchor.y, box.y), box.y + box.height);
+				const length = Math.hypot(toX - anchor.x, toY - anchor.y) || 1;
+				return createVNode("g", { "key": item.point.id }, [leader && createVNode("line", mergeJsxProps({
+					"x1": svgNumber(anchor.x + (toX - anchor.x) / length * anchor.radius),
+					"y1": svgNumber(anchor.y + (toY - anchor.y) / length * anchor.radius),
+					"x2": svgNumber(toX),
+					"y2": svgNumber(toY)
+				}, css.attrs(mapChartStyles.leader)), null), createVNode("text", mergeJsxProps({
+					"x": svgNumber(box.x + box.width / 2),
+					"y": svgNumber(box.y + box.height / 2),
+					"text-anchor": "middle",
+					"dominant-baseline": "central"
+				}, css.attrs(mapChartStyles.pointLabel, chartSvgStyles.halo)), [item.point.label])]);
+			})])
+		]);
+	}
+	const tip = () => {
+		const current = hovered.value;
+		if (!tooltip.value || !current) return null;
+		if (current.kind === "point") {
+			const point = points.value[current.index];
+			if (!point) return null;
 			return {
-				component: map,
-				onRender: scheduleLabels,
-				data: {
-					areas: [...areas.value],
-					points: [...points.value],
-					links: links.value.filter((link) => pointOf(link.from) && pointOf(link.to))
-				},
-				triggers: {
-					[TopoJSONMap.selectors.feature]: (shape) => shape.data ? chart.tooltip(chartTooltip(shape.data.label, [{
-						label: lang.chartValue,
-						color: areaColor(shape.data) ?? "transparent",
-						value: valueText(shape.data.value)
-					}])) : void 0,
-					[TopoJSONMap.selectors.point]: (point) => chart.tooltip(chartTooltip(point.label, [{
-						label: lang.chartValue,
-						color: resolveColor(point.color ?? "danger", 0),
-						value: valueText(point.value)
-					}]))
-				}
+				x: current.x,
+				y: current.y,
+				content: chartTooltip(point.label, [{
+					label: lang.chartValue,
+					color: resolveColor(point.color ?? "danger", 0),
+					value: valueText(point.value)
+				}])
 			};
 		}
-	}));
+		const shape = geometry.value.shapes[current.index];
+		const info = shape && areaById.value.get(shape.id);
+		if (!info) return null;
+		return {
+			x: current.x,
+			y: current.y,
+			content: chartTooltip(info.label, [{
+				label: lang.chartValue,
+				color: areaColor(info) ?? "transparent",
+				value: valueText(info.value)
+			}])
+		};
+	};
 	/** 图例：分档时每档一个色块与范围，连续时一条色带两端写最小最大 */
 	function legend() {
-		if (!extent.value || areas.value.every((area) => area.color)) return null;
+		if (!extent.value || areas.value.every((item) => item.color)) return null;
 		const [low, high] = extent.value;
 		if (bins.value) {
 			const step = (high - low) / bins.value;
@@ -521,32 +595,22 @@ var MapChart = /*#__PURE__*/ _component((_props, _ctx) => {
 			createVNode("span", null, [numberText(high)])
 		]);
 	}
-	let wheelHint = ref(false);
-	let hintTimer;
-	useEventListener(() => zoomable.value ? plot.value : null, "wheel", (event) => {
-		if (event.ctrlKey || event.metaKey) return;
-		event.stopPropagation();
-		wheelHint.value = true;
-		clearTimeout(hintTimer);
-		hintTimer = setTimeout(() => wheelHint.value = false, 1500);
-	}, { capture: true });
-	effect(() => () => clearTimeout(hintTimer));
 	/** 缩放按钮：放大、缩小、复位；前面是滚轮的提示 */
 	const zoomButtons = () => createVNode("span", css.attrs(mapChartStyles.zoom), [wheelHint.value && createVNode("span", mergeJsxProps(css.attrs(mapChartStyles.wheelHint), { "role": "status" }), [lang.chartZoomWheelHint]), [
 		[
 			Plus,
 			lang.chartZoomIn,
-			() => map?.zoomIn()
+			() => view.zoomIn()
 		],
 		[
 			Minus,
 			lang.chartZoomOut,
-			() => map?.zoomOut()
+			() => view.zoomOut()
 		],
 		[
 			Maximize,
 			lang.chartZoomFit,
-			() => map?.fitView()
+			() => view.reset()
 		]
 	].map(([icon, label, action]) => createVNode(IconButton, {
 		"key": label,
@@ -558,7 +622,6 @@ var MapChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		"onClick": action
 	}, null))]);
 	return () => createVNode(ChartFrame, mergeJsxProps(rest, {
-		"sx": [mapChartStyles.root, sx.value],
 		"unit": unit.value,
 		"height": height.value,
 		"legend": _cache[0] || (_cache[0] = []),
@@ -573,16 +636,16 @@ var MapChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		"table": {
 			columns: [lang.chartCategory, unit.value ? `${lang.chartValue}（${unit.value}）` : lang.chartValue],
 			rows: [
-				...areas.value.map((area) => ({
-					header: area.label,
-					value: area.value
+				...areas.value.map((item) => ({
+					header: item.label,
+					value: item.value
 				})),
 				...points.value.map((point) => ({
 					header: point.label,
 					value: point.value
 				})),
 				...links.value.map((link) => ({
-					header: lang.chartFlowLabel(pointOf(link.from)?.label ?? link.from, pointOf(link.to)?.label ?? link.to),
+					header: lang.chartFlowLabel(pointById.value.get(link.from)?.label ?? link.from, pointById.value.get(link.to)?.label ?? link.to),
 					value: link.value
 				}))
 			].map((row) => ({
@@ -590,7 +653,18 @@ var MapChart = /*#__PURE__*/ _component((_props, _ctx) => {
 				cells: [row.value === void 0 ? lang.emptyValue : format.number(row.value, valueFormat.value)]
 			}))
 		},
-		"plotRef": _cache[3] || (_cache[3] = (element) => plot.value = element)
+		"plotRef": area.ref,
+		"plot": area.ready ? createVNode("div", mergeJsxProps(css.attrs(mapChartStyles.viewport), zoomable.value ? view.viewportProps : {}, {
+			"ref": _cache[3] || (_cache[3] = (element) => viewport.value = element),
+			"onPointermove": _cache[4] || (_cache[4] = (event) => {
+				if (zoomable.value) view.viewportProps.onPointermove(event);
+				onPointermove(event);
+			}),
+			"onPointerleave": _cache[5] || (_cache[5] = () => hovered.value = null)
+		}), [renderPlot(), createVNode(ChartTooltipBox, {
+			"tip": tip(),
+			"width": area.width
+		}, null)]) : null
 	}), null);
 }, {
 	name: "MapChart",
@@ -617,11 +691,10 @@ var MapChart = /*#__PURE__*/ _component((_props, _ctx) => {
 		"empty",
 		"tooltip",
 		"onAreaClick",
-		"onPointClick",
-		"sx"
+		"onPointClick"
 	]
 });
 //#endregion
-export { MapChart, mapChartStyles, simplifyTopology, topologyBounds };
+export { MapChart, mapChartStyles };
 
 //# sourceMappingURL=MapChart.js.map